Update 11.4

Author: bollain

package-lock.json

@@ -70,22 +70,22 @@
     "@babel/plugin-proposal-throw-expressions": "^7.8.3",
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.8.3",
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^1.3.5",
     "@google-cloud/translate": "^5.1.4",
     "@hot-loader/react-dom": "^17.0.2",
     "@pdftron/webviewer-downloader": "^1.4.2",
     "@pdftron/webviewer-reading-mode": "1.0.8",
     "@reduxjs/toolkit": "^1.8.1",
-    "@storybook/addon-a11y": "^8.6.7",
-    "@storybook/addon-actions": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/addon-themes": "^8.6.7",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-webpack5": "^8.6.7",
-    "@storybook/test": "^8.6.7",
+    "@storybook/addon-a11y": "^8.1.3",
+    "@storybook/addon-actions": "^8.1.0",
+    "@storybook/addon-essentials": "^8.1.0",
+    "@storybook/addon-interactions": "^8.1.2",
+    "@storybook/addon-links": "^8.1.0",
+    "@storybook/addon-themes": "^8.1.0",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/react": "^8.1.0",
+    "@storybook/react-webpack5": "^8.1.0",
+    "@storybook/test": "^8.1.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/react-hooks": "^5.0.3",
@@ -131,8 +131,8 @@
     "rimraf": "^3.0.0",
     "sass": "^1.34.0",
     "sass-loader": "^8.0.2",
-    "storybook": "^8.6.7",
-    "storybook-addon-pseudo-states": "^4.0.3",
+    "storybook": "^8.1.0",
+    "storybook-addon-pseudo-states": "^3.1.1",
     "style-loader": "^1.1.3",
     "stylelint": "^13.13.1",
     "svg-inline-loader": "^0.8.0",
@@ -145,4 +145,4 @@
   "lint-staged": {
     "./src/**/*.{js,ts}": "eslint --fix"
   }
-}
+}

package.json

@@ -10,7 +10,6 @@ import highContastLightModeString from '!!raw-loader!../constants/highContrastLi
 import darkModeString from '!!raw-loader!../constants/dark.scss';
 import highContrastDarkModeString from '!!raw-loader!../constants/highContrastDark.scss';
 import Theme from '../constants/theme';
-import getRootNode from 'helpers/getRootNode';
 
 /**
  * Sets the theme of WebViewer UI. Please note that this does not work in IE11.
@@ -53,10 +52,7 @@ export default (store) => {
 };
 
 const setVariables = (themeVarString = '') => {
-  let root = document.documentElement;
-  if (window.isApryseWebViewerWebComponent) {
-    root = getRootNode().host;
-  }
+  const root = document.documentElement;
   const themeVariables = parse(themeVarString, {});
   Object.keys(themeVariables).forEach((key) => {
     const themeVariable = themeVariables[key];

src/apis/setTheme.js

@@ -81,7 +81,7 @@ function Dropdown({
   id = '',
   items,
   images,
-  width = DEFAULT_WIDTH,
+  width = width || DEFAULT_WIDTH,
   height,
   columns = 1,
   currentSelectionKey,

src/components/Dropdown/Dropdown.js

@@ -29,6 +29,22 @@ function LineMeasurementInput({ annotation, isOpen, selectedTool, canModify }) {
   const unit = annotation?.DisplayUnits[0] || selectedTool?.Measure?.unit;
   const [length, setLength] = useState((annotation?.getLineLength() * factor || 0).toFixed(2));
 
+  useEffect(() => {
+    if (!annotation) {
+      setAngle(computeAngle());
+      return;
+    }
+    const onAnnotationChanged = () => {
+      setLength((annotation.getLineLength() * factor).toFixed(2));
+      setAngle(computeAngle());
+    };
+    core.addEventListener('mouseMove', onAnnotationChanged);
+
+    return () => {
+      core.removeEventListener('mouseMove', onAnnotationChanged);
+    };
+  }, [annotation, computeAngle, factor, selectedTool]);
+
   const onInputChanged = (event) => {
     setLength(event.target.value);
     validateLineLength(event);
@@ -68,42 +84,6 @@ function LineMeasurementInput({ annotation, isOpen, selectedTool, canModify }) {
     return Math.abs(value1 - value2) < 0.1;
   };
 
-  const forceLineRedraw = useCallback(() => {
-    const annotationManager = core.getAnnotationManager();
-    annotationManager.drawAnnotations(annotation.PageNumber);
-    annotationManager.trigger('annotationChanged', [[annotation], 'modify', {}]);
-  }, [annotation]);
-
-  const getMaxLineLengthInPts = useCallback(() => {
-    const currentPageNumber = core.getCurrentPage();
-    const documentWidth = core.getPageWidth(currentPageNumber);
-    const documentHeight = core.getPageHeight(currentPageNumber);
-    const angleInDegrees = annotation.getAngle() * (180 / Math.PI).toFixed(2);
-    const startPoint = annotation.getStartPoint();
-    const startX = startPoint.x;
-    const startY = startPoint.y;
-
-    let maxX;
-    let maxY;
-    if (Math.abs(angleInDegrees) < 90) {
-      maxX = documentWidth;
-    } else {
-      maxX = 0;
-    }
-
-    if (angleInDegrees > 0) {
-      maxY = documentHeight;
-    } else {
-      maxY = 0;
-    }
-
-    const maxLenX = Math.abs((maxX - startX) / Math.cos(annotation.getAngle()));
-    const maxLenY = Math.abs((maxY - startY) / Math.sin(annotation.getAngle()));
-
-    return Math.min(maxLenX, maxLenY);
-  }, [annotation]);
-
-
   const ensureLineIsWithinBounds = useCallback(
     (lengthInPts) => {
       if (!isApproximatelyEqual(annotation.getLineLength(), lengthInPts)) {
@@ -151,6 +131,41 @@ function LineMeasurementInput({ annotation, isOpen, selectedTool, canModify }) {
     );
   };
 
+  const forceLineRedraw = useCallback(() => {
+    const annotationManager = core.getAnnotationManager();
+    annotationManager.drawAnnotations(annotation.PageNumber);
+    annotationManager.trigger('annotationChanged', [[annotation], 'modify', {}]);
+  }, [annotation]);
+
+  const getMaxLineLengthInPts = useCallback(() => {
+    const currentPageNumber = core.getCurrentPage();
+    const documentWidth = core.getPageWidth(currentPageNumber);
+    const documentHeight = core.getPageHeight(currentPageNumber);
+    const angleInDegrees = annotation.getAngle() * (180 / Math.PI).toFixed(2);
+    const startPoint = annotation.getStartPoint();
+    const startX = startPoint.x;
+    const startY = startPoint.y;
+
+    let maxX;
+    let maxY;
+    if (Math.abs(angleInDegrees) < 90) {
+      maxX = documentWidth;
+    } else {
+      maxX = 0;
+    }
+
+    if (angleInDegrees > 0) {
+      maxY = documentHeight;
+    } else {
+      maxY = 0;
+    }
+
+    const maxLenX = Math.abs((maxX - startX) / Math.cos(annotation.getAngle()));
+    const maxLenY = Math.abs((maxY - startY) / Math.sin(annotation.getAngle()));
+
+    return Math.min(maxLenX, maxLenY);
+  }, [annotation]);
+
   const setLineAngle = (event) => {
     const angle = event.target.value;
     const angleInRadians = angle * (Math.PI / 180) * -1;
@@ -188,22 +203,6 @@ function LineMeasurementInput({ annotation, isOpen, selectedTool, canModify }) {
     }
   }, [annotation, ensureLineIsWithinBounds, isOpen]);
 
-  useEffect(() => {
-    if (!annotation) {
-      setAngle(computeAngle());
-      return;
-    }
-    const onAnnotationChanged = () => {
-      setLength((annotation.getLineLength() * factor).toFixed(2));
-      setAngle(computeAngle());
-    };
-    core.addEventListener('mouseMove', onAnnotationChanged);
-
-    return () => {
-      core.removeEventListener('mouseMove', onAnnotationChanged);
-    };
-  }, [annotation, computeAngle, factor, selectedTool]);
-
   return (
     <>
       <div className="measurement__detail-item">

src/components/Icon/svgMap.js

@@ -5,6 +5,7 @@ import core from 'core';
 import { userEvent, expect, within } from '@storybook/test';
 import EditorFileName from './EditorFileName';
 import { OEModularUIMockState } from 'src/helpers/storybookHelper';
+
 export default {
   title: 'ModularComponents/EditorFileName',
   component: EditorFileName,
@@ -51,4 +52,4 @@ FileNameButton.play = async ({ canvasElement }) => {
   await userEvent.keyboard('{Escape}');
   const fileNameButtonAfterClick = await canvas.findByRole('button', { name: /newFileName.docx/i });
   expect(fileNameButtonAfterClick).toBeInTheDocument();
-};
+};

src/components/Icon/svgMap.vite.js

@@ -108,4 +108,4 @@ export const CellTextAlignmentFlyout = () => {
       <Flyout />
     </Provider>
   );
-};
+};