@wordpress/components 25.13.0 → 25.15.0

package/build-module/mobile/keyboard-aware-flat-list/{use-scroll-to-text-input.native.js → use-scroll-to-section.native.js}

@@ -7,24 +7,22 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-const DEFAULT_FONT_SIZE = 16;
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /** @typedef {import('react-native-reanimated').SharedValue} SharedValue */
 /**
- * Hook to scroll to the currently focused TextInput
- * depending on where the caret is placed taking into
- * account the Keyboard and the Header.
+ * Hook to scroll to a specified section by taking into account the Keyboard
+ * and the Header.
  *
  * @param {number}      extraScrollHeight      Extra space to not overlap the content.
  * @param {number}      keyboardOffset         Keyboard space offset.
  * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.
  * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.
- * @param {RefObject}   scrollViewRef          ScrollView reference.
+ * @param {RefObject}   scrollViewRef          Scroll view reference.
  * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.
- * @return {Function[]} Function to scroll to the current TextInput's offset.
+ * @return {Function[]} Function to scroll to a section.
  */
-export default function useScrollToTextInput(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset) {
+export default function useScrollToSection(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset) {
   const {
     top,
     bottom
@@ -32,42 +30,38 @@ export default function useScrollToTextInput(extraScrollHeight, keyboardOffset,
   const insets = top + bottom;
 
   /**
-   * Function to scroll to the current TextInput's offset.
+   * Function to scroll to a section.
    *
-   * @param {Object} caret             The caret position data of the currently focused TextInput.
-   * @param {number} caret.caretHeight The height of the caret.
-   * @param {number} textInputOffset   The offset calculated with the caret's Y coordinate + the
-   *                                   TextInput's Y coord or height value.
+   * @param {Object} section        Section data to scroll to.
+   * @param {number} section.y      Y-coordinate of of the section.
+   * @param {number} section.height Height of the section.
    */
-  const scrollToTextInputOffset = useCallback((caret, textInputOffset) => {
-    const {
-      caretHeight = DEFAULT_FONT_SIZE
-    } = caret !== null && caret !== void 0 ? caret : {};
-    if (!scrollViewRef.current || !scrollEnabled || !scrollViewMeasurements.current) {
+  const scrollToSection = useCallback((sectionY, sectionHeight) => {
+    if (!scrollViewRef.current || !scrollEnabled || !scrollViewMeasurements) {
       return;
     }
     const currentScrollViewYOffset = Math.max(0, scrollViewYOffset.value);
 
-    // Scroll up.
-    if (textInputOffset < currentScrollViewYOffset) {
+    // Scroll to the top of the section.
+    if (sectionY < currentScrollViewYOffset) {
       scrollViewRef.current.scrollTo({
-        y: textInputOffset,
+        y: sectionY,
         animated: true
       });
       return;
     }
-    const availableScreenSpace = Math.abs(Math.floor(scrollViewMeasurements.current.height - (keyboardOffset + extraScrollHeight + caretHeight)));
+    const availableScreenSpace = Math.abs(Math.floor(scrollViewMeasurements.current.height - (keyboardOffset + extraScrollHeight + sectionHeight)));
     const maxOffset = Math.floor(currentScrollViewYOffset + availableScreenSpace);
-    const isAtTheTop = textInputOffset < scrollViewMeasurements.current.y + insets;
+    const isAtTheTop = sectionY < scrollViewMeasurements.current.y + insets;
 
-    // Scroll down.
-    if (textInputOffset > maxOffset && !isAtTheTop) {
+    // Scroll to the bottom of the section.
+    if (sectionY > maxOffset && !isAtTheTop) {
       scrollViewRef.current.scrollTo({
-        y: textInputOffset - availableScreenSpace,
+        y: sectionY - availableScreenSpace,
         animated: true
       });
     }
   }, [extraScrollHeight, insets, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset]);
-  return [scrollToTextInputOffset];
+  return [scrollToSection];
 }
-//# sourceMappingURL=use-scroll-to-text-input.native.js.map
+//# sourceMappingURL=use-scroll-to-section.native.js.map

package/build-module/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSafeAreaInsets","useCallback","useScrollToSection","extraScrollHeight","keyboardOffset","scrollEnabled","scrollViewMeasurements","scrollViewRef","scrollViewYOffset","top","bottom","insets","scrollToSection","sectionY","sectionHeight","current","currentScrollViewYOffset","Math","max","value","scrollTo","y","animated","availableScreenSpace","abs","floor","height","maxOffset","isAtTheTop"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/** @typedef {import('react-native-reanimated').SharedValue} SharedValue */\n/**\n * Hook to scroll to a specified section by taking into account the Keyboard\n * and the Header.\n *\n * @param {number}      extraScrollHeight      Extra space to not overlap the content.\n * @param {number}      keyboardOffset         Keyboard space offset.\n * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.\n * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.\n * @param {RefObject}   scrollViewRef          Scroll view reference.\n * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.\n * @return {Function[]} Function to scroll to a section.\n */\nexport default function useScrollToSection(\n\textraScrollHeight,\n\tkeyboardOffset,\n\tscrollEnabled,\n\tscrollViewMeasurements,\n\tscrollViewRef,\n\tscrollViewYOffset\n) {\n\tconst { top, bottom } = useSafeAreaInsets();\n\tconst insets = top + bottom;\n\n\t/**\n\t * Function to scroll to a section.\n\t *\n\t * @param {Object} section        Section data to scroll to.\n\t * @param {number} section.y      Y-coordinate of of the section.\n\t * @param {number} section.height Height of the section.\n\t */\n\tconst scrollToSection = useCallback(\n\t\t( sectionY, sectionHeight ) => {\n\t\t\tif (\n\t\t\t\t! scrollViewRef.current ||\n\t\t\t\t! scrollEnabled ||\n\t\t\t\t! scrollViewMeasurements\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst currentScrollViewYOffset = Math.max(\n\t\t\t\t0,\n\t\t\t\tscrollViewYOffset.value\n\t\t\t);\n\n\t\t\t// Scroll to the top of the section.\n\t\t\tif ( sectionY < currentScrollViewYOffset ) {\n\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\ty: sectionY,\n\t\t\t\t\tanimated: true,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst availableScreenSpace = Math.abs(\n\t\t\t\tMath.floor(\n\t\t\t\t\tscrollViewMeasurements.current.height -\n\t\t\t\t\t\t( keyboardOffset + extraScrollHeight + sectionHeight )\n\t\t\t\t)\n\t\t\t);\n\t\t\tconst maxOffset = Math.floor(\n\t\t\t\tcurrentScrollViewYOffset + availableScreenSpace\n\t\t\t);\n\n\t\t\tconst isAtTheTop =\n\t\t\t\tsectionY < scrollViewMeasurements.current.y + insets;\n\n\t\t\t// Scroll to the bottom of the section.\n\t\t\tif ( sectionY > maxOffset && ! isAtTheTop ) {\n\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\ty: sectionY - availableScreenSpace,\n\t\t\t\t\tanimated: true,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\textraScrollHeight,\n\t\t\tinsets,\n\t\t\tkeyboardOffset,\n\t\t\tscrollEnabled,\n\t\t\tscrollViewMeasurements,\n\t\t\tscrollViewRef,\n\t\t\tscrollViewYOffset,\n\t\t]\n\t);\n\n\treturn [ scrollToSection ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,iBAAiB,QAAQ,gCAAgC;;AAElE;AACA;AACA;AACA,SAASC,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,kBAAkBA,CACzCC,iBAAiB,EACjBC,cAAc,EACdC,aAAa,EACbC,sBAAsB,EACtBC,aAAa,EACbC,iBAAiB,EAChB;EACD,MAAM;IAAEC,GAAG;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EAC3C,MAAMW,MAAM,GAAGF,GAAG,GAAGC,MAAM;;EAE3B;AACD;AACA;AACA;AACA;AACA;AACA;EACC,MAAME,eAAe,GAAGX,WAAW,CAClC,CAAEY,QAAQ,EAAEC,aAAa,KAAM;IAC9B,IACC,CAAEP,aAAa,CAACQ,OAAO,IACvB,CAAEV,aAAa,IACf,CAAEC,sBAAsB,EACvB;MACD;IACD;IAEA,MAAMU,wBAAwB,GAAGC,IAAI,CAACC,GAAG,CACxC,CAAC,EACDV,iBAAiB,CAACW,KACnB,CAAC;;IAED;IACA,IAAKN,QAAQ,GAAGG,wBAAwB,EAAG;MAC1CT,aAAa,CAACQ,OAAO,CAACK,QAAQ,CAAE;QAC/BC,CAAC,EAAER,QAAQ;QACXS,QAAQ,EAAE;MACX,CAAE,CAAC;MACH;IACD;IAEA,MAAMC,oBAAoB,GAAGN,IAAI,CAACO,GAAG,CACpCP,IAAI,CAACQ,KAAK,CACTnB,sBAAsB,CAACS,OAAO,CAACW,MAAM,IAClCtB,cAAc,GAAGD,iBAAiB,GAAGW,aAAa,CACtD,CACD,CAAC;IACD,MAAMa,SAAS,GAAGV,IAAI,CAACQ,KAAK,CAC3BT,wBAAwB,GAAGO,oBAC5B,CAAC;IAED,MAAMK,UAAU,GACff,QAAQ,GAAGP,sBAAsB,CAACS,OAAO,CAACM,CAAC,GAAGV,MAAM;;IAErD;IACA,IAAKE,QAAQ,GAAGc,SAAS,IAAI,CAAEC,UAAU,EAAG;MAC3CrB,aAAa,CAACQ,OAAO,CAACK,QAAQ,CAAE;QAC/BC,CAAC,EAAER,QAAQ,GAAGU,oBAAoB;QAClCD,QAAQ,EAAE;MACX,CAAE,CAAC;IACJ;EACD,CAAC,EACD,CACCnB,iBAAiB,EACjBQ,MAAM,EACNP,cAAc,EACdC,aAAa,EACbC,sBAAsB,EACtBC,aAAa,EACbC,iBAAiB,CAEnB,CAAC;EAED,OAAO,CAAEI,eAAe,CAAE;AAC3B"}

package/build-module/mobile/keyboard-aware-flat-list/use-scroll.native.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+
+import { useWindowDimensions } from 'react-native';
+import { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useKeyboardOffset from './use-keyboard-offset';
+import useScrollToSection from './use-scroll-to-section';
+import useScrollToElement from './use-scroll-to-element';
+export default function useScroll({
+  scrollEnabled,
+  shouldPreventAutomaticScroll,
+  onScroll,
+  onSizeChange,
+  extraScrollHeight
+}) {
+  const scrollViewRef = useRef();
+  const scrollViewMeasurements = useRef();
+  const scrollViewYOffset = useSharedValue(-1);
+  const lastScrollTo = useRef({
+    clientId: null
+  });
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = useWindowDimensions();
+  const isLandscape = windowWidth >= windowHeight;
+  const [keyboardOffset] = useKeyboardOffset(scrollEnabled, shouldPreventAutomaticScroll);
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: event => {
+      const {
+        contentOffset
+      } = event;
+      scrollViewYOffset.value = contentOffset.y;
+      onScroll(event);
+    }
+  });
+
+  // When the orientation changes, the ScrollView measurements
+  // need to be re-calculated.
+  useEffect(() => {
+    scrollViewMeasurements.current = null;
+  }, [isLandscape]);
+  const [scrollToSection] = useScrollToSection(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset);
+  const [scrollToElement] = useScrollToElement(scrollViewRef, scrollToSection);
+  const measureScrollView = useCallback(() => {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.measureInWindow((_x, y, width, height) => {
+        scrollViewMeasurements.current = {
+          y,
+          width,
+          height
+        };
+      });
+    }
+  }, [scrollViewRef]);
+  const onContentSizeChange = useCallback(() => {
+    if (onSizeChange) {
+      onSizeChange();
+    }
+
+    // Sets the first values when the content size changes.
+    if (!scrollViewMeasurements.current) {
+      measureScrollView();
+    }
+  }, [measureScrollView, onSizeChange]);
+  return {
+    scrollViewRef,
+    scrollHandler,
+    keyboardOffset,
+    scrollToSection,
+    scrollToElement,
+    onContentSizeChange,
+    lastScrollTo
+  };
+}
+//# sourceMappingURL=use-scroll.native.js.map

package/build-module/mobile/keyboard-aware-flat-list/use-scroll.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useWindowDimensions","useAnimatedScrollHandler","useSharedValue","useCallback","useEffect","useRef","useKeyboardOffset","useScrollToSection","useScrollToElement","useScroll","scrollEnabled","shouldPreventAutomaticScroll","onScroll","onSizeChange","extraScrollHeight","scrollViewRef","scrollViewMeasurements","scrollViewYOffset","lastScrollTo","clientId","height","windowHeight","width","windowWidth","isLandscape","keyboardOffset","scrollHandler","event","contentOffset","value","y","current","scrollToSection","scrollToElement","measureScrollView","measureInWindow","_x","onContentSizeChange"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/use-scroll.native.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { useWindowDimensions } from 'react-native';\nimport {\n\tuseAnimatedScrollHandler,\n\tuseSharedValue,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useKeyboardOffset from './use-keyboard-offset';\nimport useScrollToSection from './use-scroll-to-section';\nimport useScrollToElement from './use-scroll-to-element';\n\nexport default function useScroll( {\n\tscrollEnabled,\n\tshouldPreventAutomaticScroll,\n\tonScroll,\n\tonSizeChange,\n\textraScrollHeight,\n} ) {\n\tconst scrollViewRef = useRef();\n\tconst scrollViewMeasurements = useRef();\n\tconst scrollViewYOffset = useSharedValue( -1 );\n\tconst lastScrollTo = useRef( {\n\t\tclientId: null,\n\t} );\n\n\tconst { height: windowHeight, width: windowWidth } = useWindowDimensions();\n\tconst isLandscape = windowWidth >= windowHeight;\n\n\tconst [ keyboardOffset ] = useKeyboardOffset(\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll\n\t);\n\n\tconst scrollHandler = useAnimatedScrollHandler( {\n\t\tonScroll: ( event ) => {\n\t\t\tconst { contentOffset } = event;\n\t\t\tscrollViewYOffset.value = contentOffset.y;\n\t\t\tonScroll( event );\n\t\t},\n\t} );\n\n\t// When the orientation changes, the ScrollView measurements\n\t// need to be re-calculated.\n\tuseEffect( () => {\n\t\tscrollViewMeasurements.current = null;\n\t}, [ isLandscape ] );\n\n\tconst [ scrollToSection ] = useScrollToSection(\n\t\textraScrollHeight,\n\t\tkeyboardOffset,\n\t\tscrollEnabled,\n\t\tscrollViewMeasurements,\n\t\tscrollViewRef,\n\t\tscrollViewYOffset\n\t);\n\tconst [ scrollToElement ] = useScrollToElement(\n\t\tscrollViewRef,\n\t\tscrollToSection\n\t);\n\n\tconst measureScrollView = useCallback( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tscrollViewRef.current.measureInWindow( ( _x, y, width, height ) => {\n\t\t\t\tscrollViewMeasurements.current = { y, width, height };\n\t\t\t} );\n\t\t}\n\t}, [ scrollViewRef ] );\n\n\tconst onContentSizeChange = useCallback( () => {\n\t\tif ( onSizeChange ) {\n\t\t\tonSizeChange();\n\t\t}\n\n\t\t// Sets the first values when the content size changes.\n\t\tif ( ! scrollViewMeasurements.current ) {\n\t\t\tmeasureScrollView();\n\t\t}\n\t}, [ measureScrollView, onSizeChange ] );\n\n\treturn {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tkeyboardOffset,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SACCC,wBAAwB,EACxBC,cAAc,QACR,yBAAyB;;AAEhC;AACA;AACA;AACA,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEnE;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,kBAAkB,MAAM,yBAAyB;AACxD,OAAOC,kBAAkB,MAAM,yBAAyB;AAExD,eAAe,SAASC,SAASA,CAAE;EAClCC,aAAa;EACbC,4BAA4B;EAC5BC,QAAQ;EACRC,YAAY;EACZC;AACD,CAAC,EAAG;EACH,MAAMC,aAAa,GAAGV,MAAM,CAAC,CAAC;EAC9B,MAAMW,sBAAsB,GAAGX,MAAM,CAAC,CAAC;EACvC,MAAMY,iBAAiB,GAAGf,cAAc,CAAE,CAAC,CAAE,CAAC;EAC9C,MAAMgB,YAAY,GAAGb,MAAM,CAAE;IAC5Bc,QAAQ,EAAE;EACX,CAAE,CAAC;EAEH,MAAM;IAAEC,MAAM,EAAEC,YAAY;IAAEC,KAAK,EAAEC;EAAY,CAAC,GAAGvB,mBAAmB,CAAC,CAAC;EAC1E,MAAMwB,WAAW,GAAGD,WAAW,IAAIF,YAAY;EAE/C,MAAM,CAAEI,cAAc,CAAE,GAAGnB,iBAAiB,CAC3CI,aAAa,EACbC,4BACD,CAAC;EAED,MAAMe,aAAa,GAAGzB,wBAAwB,CAAE;IAC/CW,QAAQ,EAAIe,KAAK,IAAM;MACtB,MAAM;QAAEC;MAAc,CAAC,GAAGD,KAAK;MAC/BV,iBAAiB,CAACY,KAAK,GAAGD,aAAa,CAACE,CAAC;MACzClB,QAAQ,CAAEe,KAAM,CAAC;IAClB;EACD,CAAE,CAAC;;EAEH;EACA;EACAvB,SAAS,CAAE,MAAM;IAChBY,sBAAsB,CAACe,OAAO,GAAG,IAAI;EACtC,CAAC,EAAE,CAAEP,WAAW,CAAG,CAAC;EAEpB,MAAM,CAAEQ,eAAe,CAAE,GAAGzB,kBAAkB,CAC7CO,iBAAiB,EACjBW,cAAc,EACdf,aAAa,EACbM,sBAAsB,EACtBD,aAAa,EACbE,iBACD,CAAC;EACD,MAAM,CAAEgB,eAAe,CAAE,GAAGzB,kBAAkB,CAC7CO,aAAa,EACbiB,eACD,CAAC;EAED,MAAME,iBAAiB,GAAG/B,WAAW,CAAE,MAAM;IAC5C,IAAKY,aAAa,CAACgB,OAAO,EAAG;MAC5BhB,aAAa,CAACgB,OAAO,CAACI,eAAe,CAAE,CAAEC,EAAE,EAAEN,CAAC,EAAER,KAAK,EAAEF,MAAM,KAAM;QAClEJ,sBAAsB,CAACe,OAAO,GAAG;UAAED,CAAC;UAAER,KAAK;UAAEF;QAAO,CAAC;MACtD,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,CAAEL,aAAa,CAAG,CAAC;EAEtB,MAAMsB,mBAAmB,GAAGlC,WAAW,CAAE,MAAM;IAC9C,IAAKU,YAAY,EAAG;MACnBA,YAAY,CAAC,CAAC;IACf;;IAEA;IACA,IAAK,CAAEG,sBAAsB,CAACe,OAAO,EAAG;MACvCG,iBAAiB,CAAC,CAAC;IACpB;EACD,CAAC,EAAE,CAAEA,iBAAiB,EAAErB,YAAY,CAAG,CAAC;EAExC,OAAO;IACNE,aAAa;IACbW,aAAa;IACbD,cAAc;IACdO,eAAe;IACfC,eAAe;IACfI,mBAAmB;IACnBnB;EACD,CAAC;AACF"}

package/build-module/mobile/utils/get-px-from-css-unit.native.js

@@ -0,0 +1,294 @@
+/**
+ * Converts string to object { value, unit }.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit
+ */
+function parseUnit(cssUnit) {
+  const match = cssUnit?.trim().match(/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/);
+  if (!isNaN(cssUnit) && !isNaN(parseFloat(cssUnit))) {
+    return {
+      value: parseFloat(cssUnit),
+      unit: 'px'
+    };
+  }
+  return match ? {
+    value: parseFloat(match[1]) || match[1],
+    unit: match[2]
+  } : {
+    value: cssUnit,
+    unit: undefined
+  };
+}
+/**
+ * Evaluate a math expression.
+ *
+ * @param {string} expression
+ * @return {number} evaluated expression.
+ */
+function calculate(expression) {
+  try {
+    return Function(`'use strict'; return (${expression})`)();
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * Calculates the css function value for the supported css functions such as max, min, clamp and calc.
+ *
+ * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.
+ * @param {Object} options
+ * @return {string} unit containing the unit in PX.
+ */
+function getFunctionUnitValue(functionUnitValue, options) {
+  const functionUnit = functionUnitValue.split(/[(),]/g).filter(Boolean);
+  const units = functionUnit.slice(1).map(unit => parseUnit(getPxFromCssUnit(unit, options)).value).filter(Boolean);
+  switch (functionUnit[0]) {
+    case 'min':
+      return Math.min(...units) + 'px';
+    case 'max':
+      return Math.max(...units) + 'px';
+    case 'clamp':
+      if (units.length !== 3) {
+        return null;
+      }
+      if (units[1] < units[0]) {
+        return units[0] + 'px';
+      }
+      if (units[1] > units[2]) {
+        return units[2] + 'px';
+      }
+      return units[1] + 'px';
+    case 'calc':
+      return units[0] + 'px';
+  }
+}
+
+/**
+ * Take a css function such as min, max, calc, clamp and returns parsedUnit
+ *
+ * How this works for the nested function is that it first replaces the inner function call.
+ * Then it tackles the outer onces.
+ * So for example: min( max(25px, 35px), 40px )
+ * in the first pass we would replace max(25px, 35px) with 35px.
+ * then we would try to evaluate min( 35px, 40px )
+ * and then finally return 35px.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit object.
+ */
+function parseUnitFunction(cssUnit) {
+  while (true) {
+    const currentCssUnit = cssUnit;
+    const regExp = /(max|min|calc|clamp)\(([^()]*)\)/g;
+    const matches = regExp.exec(cssUnit) || [];
+    if (matches[0]) {
+      const functionUnitValue = getFunctionUnitValue(matches[0]);
+      cssUnit = cssUnit.replace(matches[0], functionUnitValue);
+    }
+
+    // If the unit hasn't been modified or we have a single value break free.
+    if (cssUnit === currentCssUnit || parseFloat(cssUnit)) {
+      break;
+    }
+  }
+  return parseUnit(cssUnit);
+}
+/**
+ * Return true if we think this is a math expression.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {boolean} Whether the cssUnit is a math expression.
+ */
+function isMathExpression(cssUnit) {
+  for (let i = 0; i < cssUnit.length; i++) {
+    if (['+', '-', '/', '*'].includes(cssUnit[i])) {
+      return true;
+    }
+  }
+  return false;
+}
+/**
+ * Evaluates the math expression and return a px value.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {string} return a converfted value to px.
+ */
+function evalMathExpression(cssUnit) {
+  let errorFound = false;
+  // Convert every part of the expression to px values.
+  // The following regex matches numbers that have a following unit
+  // E.g. 5.25rem, 1vw
+  const cssUnitsBits = cssUnit.match(/\d+\.?\d*[a-zA-Z]+|\.\d+[a-zA-Z]+/g);
+  if (cssUnitsBits) {
+    for (const unit of cssUnitsBits) {
+      // Standardize the unit to px and extract the value.
+      const parsedUnit = parseUnit(getPxFromCssUnit(unit));
+      if (!parseFloat(parsedUnit.value)) {
+        errorFound = true;
+        // End early since we are dealing with a null value.
+        break;
+      }
+      cssUnit = cssUnit.replace(unit, parsedUnit.value);
+    }
+  } else {
+    errorFound = true;
+  }
+
+  // For mixed math expressions wrapped within CSS expressions
+  const expressionsMatches = cssUnit.match(/(max|min|clamp)/g);
+  if (!errorFound && expressionsMatches) {
+    const values = cssUnit.split(',');
+    for (const currentValue of values) {
+      // Check for nested calc() and remove them to calculate the value.
+      const rawCurrentValue = currentValue.replace(/\s|calc/g, '');
+      if (isMathExpression(rawCurrentValue)) {
+        const calculatedExpression = calculate(rawCurrentValue);
+        if (calculatedExpression) {
+          const calculatedValue = calculatedExpression.toFixed(0) + 'px';
+          cssUnit = cssUnit.replace(currentValue, calculatedValue);
+        }
+      }
+    }
+    const parsedValue = parseUnitFunction(cssUnit);
+    return !parsedValue ? null : parsedValue.value + parsedValue.unit;
+  }
+  if (errorFound) {
+    return null;
+  }
+  const calculatedResult = calculate(cssUnit);
+  return calculatedResult ? calculatedResult.toFixed(0) + 'px' : null;
+}
+
+/**
+ * Convert a parsedUnit object to px value.
+ *
+ * @param {Object} parsedUnit
+ * @param {Object} options
+ * @return {string} or {null} returns the converted with in a px value format.
+ */
+function convertParsedUnitToPx(parsedUnit, options) {
+  const PIXELS_PER_INCH = 96;
+  const ONE_PERCENT = 0.01;
+  const defaultProperties = {
+    fontSize: 16,
+    lineHeight: 16,
+    width: 375,
+    height: 812,
+    type: 'font'
+  };
+  const setOptions = Object.assign({}, defaultProperties, options);
+  const relativeUnits = {
+    em: setOptions.fontSize,
+    rem: setOptions.fontSize,
+    vh: setOptions.height * ONE_PERCENT,
+    vw: setOptions.width * ONE_PERCENT,
+    vmin: (setOptions.width < setOptions.height ? setOptions.width : setOptions.height) * ONE_PERCENT,
+    vmax: (setOptions.width > setOptions.height ? setOptions.width : setOptions.height) * ONE_PERCENT,
+    '%': (setOptions.type === 'font' ? setOptions.fontSize : setOptions.width) * ONE_PERCENT,
+    ch: 8,
+    // The advance measure (width) of the glyph "0" of the element's font. Approximate
+    ex: 7.15625,
+    // X-height of the element's font. Approximate.
+    lh: setOptions.lineHeight
+  };
+  relativeUnits.svw = relativeUnits.vmin;
+  relativeUnits.lvw = relativeUnits.vmax;
+  relativeUnits.dvw = relativeUnits.vw;
+  relativeUnits.svh = relativeUnits.vmin;
+  relativeUnits.lvh = relativeUnits.vmax;
+  relativeUnits.dvh = relativeUnits.vh;
+  relativeUnits.vi = relativeUnits.vh;
+  relativeUnits.svi = relativeUnits.vmin;
+  relativeUnits.lvi = relativeUnits.vmax;
+  relativeUnits.dvi = relativeUnits.vw;
+  relativeUnits.vb = relativeUnits.vh;
+  relativeUnits.svb = relativeUnits.vmin;
+  relativeUnits.lvb = relativeUnits.vmax;
+  relativeUnits.dvb = relativeUnits.vh;
+  relativeUnits.svmin = relativeUnits.vmin;
+  relativeUnits.lvmin = relativeUnits.vmin;
+  relativeUnits.dvmin = relativeUnits.vmin;
+  relativeUnits.svmax = relativeUnits.vmax;
+  relativeUnits.lvmax = relativeUnits.vmax;
+  relativeUnits.dvmax = relativeUnits.vmax;
+  const absoluteUnits = {
+    in: PIXELS_PER_INCH,
+    cm: PIXELS_PER_INCH / 2.54,
+    mm: PIXELS_PER_INCH / 25.4,
+    pt: PIXELS_PER_INCH / 72,
+    pc: PIXELS_PER_INCH / 6,
+    px: 1,
+    Q: PIXELS_PER_INCH / 2.54 / 40
+  };
+  if (relativeUnits[parsedUnit.unit]) {
+    return (relativeUnits[parsedUnit.unit] * parsedUnit.value).toFixed(0) + 'px';
+  }
+  if (absoluteUnits[parsedUnit.unit]) {
+    return (absoluteUnits[parsedUnit.unit] * parsedUnit.value).toFixed(0) + 'px';
+  }
+  return null;
+}
+
+/**
+ * Returns the px value of a cssUnit.
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+export function getPxFromCssUnit(cssUnit, options = {}) {
+  if (Number.isFinite(cssUnit)) {
+    return cssUnit.toFixed(0) + 'px';
+  }
+  if (cssUnit === undefined) {
+    return null;
+  }
+  let parsedUnit = parseUnit(cssUnit);
+  if (!parsedUnit.unit) {
+    parsedUnit = parseUnitFunction(cssUnit);
+  }
+  if (isMathExpression(cssUnit) && !parsedUnit.unit) {
+    return evalMathExpression(cssUnit);
+  }
+  return convertParsedUnitToPx(parsedUnit, options);
+}
+
+// Use simple cache.
+const cache = {};
+/**
+ * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+function memoizedGetPxFromCssUnit(cssUnit, options = {}) {
+  const hash = cssUnit + hashOptions(options);
+  if (!cache[hash]) {
+    cache[hash] = getPxFromCssUnit(cssUnit, options);
+  }
+  return cache[hash];
+}
+function hashOptions(options) {
+  let hash = '';
+  if (options.hasOwnProperty('fontSize')) {
+    hash = ':' + options.width;
+  }
+  if (options.hasOwnProperty('lineHeight')) {
+    hash = ':' + options.lineHeight;
+  }
+  if (options.hasOwnProperty('width')) {
+    hash = ':' + options.width;
+  }
+  if (options.hasOwnProperty('height')) {
+    hash = ':' + options.height;
+  }
+  if (options.hasOwnProperty('type')) {
+    hash = ':' + options.type;
+  }
+  return hash;
+}
+export default memoizedGetPxFromCssUnit;
+//# sourceMappingURL=get-px-from-css-unit.native.js.map

package/build-module/mobile/utils/get-px-from-css-unit.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parseUnit","cssUnit","match","trim","isNaN","parseFloat","value","unit","undefined","calculate","expression","Function","err","getFunctionUnitValue","functionUnitValue","options","functionUnit","split","filter","Boolean","units","slice","map","getPxFromCssUnit","Math","min","max","length","parseUnitFunction","currentCssUnit","regExp","matches","exec","replace","isMathExpression","i","includes","evalMathExpression","errorFound","cssUnitsBits","parsedUnit","expressionsMatches","values","currentValue","rawCurrentValue","calculatedExpression","calculatedValue","toFixed","parsedValue","calculatedResult","convertParsedUnitToPx","PIXELS_PER_INCH","ONE_PERCENT","defaultProperties","fontSize","lineHeight","width","height","type","setOptions","Object","assign","relativeUnits","em","rem","vh","vw","vmin","vmax","ch","ex","lh","svw","lvw","dvw","svh","lvh","dvh","vi","svi","lvi","dvi","vb","svb","lvb","dvb","svmin","lvmin","dvmin","svmax","lvmax","dvmax","absoluteUnits","in","cm","mm","pt","pc","px","Q","Number","isFinite","cache","memoizedGetPxFromCssUnit","hash","hashOptions","hasOwnProperty"],"sources":["@wordpress/components/src/mobile/utils/get-px-from-css-unit.native.js"],"sourcesContent":["/**\n * Converts string to object { value, unit }.\n *\n * @param {string} cssUnit\n * @return {Object} parsedUnit\n */\nfunction parseUnit( cssUnit ) {\n\tconst match = cssUnit\n\t\t?.trim()\n\t\t.match(\n\t\t\t/^(0?[-.]?\\d*\\.?\\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/\n\t\t);\n\tif ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {\n\t\treturn { value: parseFloat( cssUnit ), unit: 'px' };\n\t}\n\treturn match\n\t\t? { value: parseFloat( match[ 1 ] ) || match[ 1 ], unit: match[ 2 ] }\n\t\t: { value: cssUnit, unit: undefined };\n}\n/**\n * Evaluate a math expression.\n *\n * @param {string} expression\n * @return {number} evaluated expression.\n */\nfunction calculate( expression ) {\n\ttry {\n\t\treturn Function( `'use strict'; return (${ expression })` )();\n\t} catch ( err ) {\n\t\treturn null;\n\t}\n}\n\n/**\n * Calculates the css function value for the supported css functions such as max, min, clamp and calc.\n *\n * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.\n * @param {Object} options\n * @return {string} unit containing the unit in PX.\n */\nfunction getFunctionUnitValue( functionUnitValue, options ) {\n\tconst functionUnit = functionUnitValue.split( /[(),]/g ).filter( Boolean );\n\n\tconst units = functionUnit\n\t\t.slice( 1 )\n\t\t.map( ( unit ) => parseUnit( getPxFromCssUnit( unit, options ) ).value )\n\t\t.filter( Boolean );\n\n\tswitch ( functionUnit[ 0 ] ) {\n\t\tcase 'min':\n\t\t\treturn Math.min( ...units ) + 'px';\n\t\tcase 'max':\n\t\t\treturn Math.max( ...units ) + 'px';\n\t\tcase 'clamp':\n\t\t\tif ( units.length !== 3 ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tif ( units[ 1 ] < units[ 0 ] ) {\n\t\t\t\treturn units[ 0 ] + 'px';\n\t\t\t}\n\t\t\tif ( units[ 1 ] > units[ 2 ] ) {\n\t\t\t\treturn units[ 2 ] + 'px';\n\t\t\t}\n\t\t\treturn units[ 1 ] + 'px';\n\t\tcase 'calc':\n\t\t\treturn units[ 0 ] + 'px';\n\t}\n}\n\n/**\n * Take a css function such as min, max, calc, clamp and returns parsedUnit\n *\n * How this works for the nested function is that it first replaces the inner function call.\n * Then it tackles the outer onces.\n * So for example: min( max(25px, 35px), 40px )\n * in the first pass we would replace max(25px, 35px) with 35px.\n * then we would try to evaluate min( 35px, 40px )\n * and then finally return 35px.\n *\n * @param {string} cssUnit\n * @return {Object} parsedUnit object.\n */\nfunction parseUnitFunction( cssUnit ) {\n\twhile ( true ) {\n\t\tconst currentCssUnit = cssUnit;\n\t\tconst regExp = /(max|min|calc|clamp)\\(([^()]*)\\)/g;\n\t\tconst matches = regExp.exec( cssUnit ) || [];\n\t\tif ( matches[ 0 ] ) {\n\t\t\tconst functionUnitValue = getFunctionUnitValue( matches[ 0 ] );\n\t\t\tcssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );\n\t\t}\n\n\t\t// If the unit hasn't been modified or we have a single value break free.\n\t\tif ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn parseUnit( cssUnit );\n}\n/**\n * Return true if we think this is a math expression.\n *\n * @param {string} cssUnit the cssUnit value being evaluted.\n * @return {boolean} Whether the cssUnit is a math expression.\n */\nfunction isMathExpression( cssUnit ) {\n\tfor ( let i = 0; i < cssUnit.length; i++ ) {\n\t\tif ( [ '+', '-', '/', '*' ].includes( cssUnit[ i ] ) ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n}\n/**\n * Evaluates the math expression and return a px value.\n *\n * @param {string} cssUnit the cssUnit value being evaluted.\n * @return {string} return a converfted value to px.\n */\nfunction evalMathExpression( cssUnit ) {\n\tlet errorFound = false;\n\t// Convert every part of the expression to px values.\n\t// The following regex matches numbers that have a following unit\n\t// E.g. 5.25rem, 1vw\n\tconst cssUnitsBits = cssUnit.match( /\\d+\\.?\\d*[a-zA-Z]+|\\.\\d+[a-zA-Z]+/g );\n\tif ( cssUnitsBits ) {\n\t\tfor ( const unit of cssUnitsBits ) {\n\t\t\t// Standardize the unit to px and extract the value.\n\t\t\tconst parsedUnit = parseUnit( getPxFromCssUnit( unit ) );\n\t\t\tif ( ! parseFloat( parsedUnit.value ) ) {\n\t\t\t\terrorFound = true;\n\t\t\t\t// End early since we are dealing with a null value.\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcssUnit = cssUnit.replace( unit, parsedUnit.value );\n\t\t}\n\t} else {\n\t\terrorFound = true;\n\t}\n\n\t// For mixed math expressions wrapped within CSS expressions\n\tconst expressionsMatches = cssUnit.match( /(max|min|clamp)/g );\n\tif ( ! errorFound && expressionsMatches ) {\n\t\tconst values = cssUnit.split( ',' );\n\t\tfor ( const currentValue of values ) {\n\t\t\t// Check for nested calc() and remove them to calculate the value.\n\t\t\tconst rawCurrentValue = currentValue.replace( /\\s|calc/g, '' );\n\n\t\t\tif ( isMathExpression( rawCurrentValue ) ) {\n\t\t\t\tconst calculatedExpression = calculate( rawCurrentValue );\n\n\t\t\t\tif ( calculatedExpression ) {\n\t\t\t\t\tconst calculatedValue =\n\t\t\t\t\t\tcalculatedExpression.toFixed( 0 ) + 'px';\n\t\t\t\t\tcssUnit = cssUnit.replace( currentValue, calculatedValue );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst parsedValue = parseUnitFunction( cssUnit );\n\t\treturn ! parsedValue ? null : parsedValue.value + parsedValue.unit;\n\t}\n\n\tif ( errorFound ) {\n\t\treturn null;\n\t}\n\n\tconst calculatedResult = calculate( cssUnit );\n\treturn calculatedResult ? calculatedResult.toFixed( 0 ) + 'px' : null;\n}\n\n/**\n * Convert a parsedUnit object to px value.\n *\n * @param {Object} parsedUnit\n * @param {Object} options\n * @return {string} or {null} returns the converted with in a px value format.\n */\nfunction convertParsedUnitToPx( parsedUnit, options ) {\n\tconst PIXELS_PER_INCH = 96;\n\tconst ONE_PERCENT = 0.01;\n\n\tconst defaultProperties = {\n\t\tfontSize: 16,\n\t\tlineHeight: 16,\n\t\twidth: 375,\n\t\theight: 812,\n\t\ttype: 'font',\n\t};\n\n\tconst setOptions = Object.assign( {}, defaultProperties, options );\n\n\tconst relativeUnits = {\n\t\tem: setOptions.fontSize,\n\t\trem: setOptions.fontSize,\n\t\tvh: setOptions.height * ONE_PERCENT,\n\t\tvw: setOptions.width * ONE_PERCENT,\n\t\tvmin:\n\t\t\t( setOptions.width < setOptions.height\n\t\t\t\t? setOptions.width\n\t\t\t\t: setOptions.height ) * ONE_PERCENT,\n\t\tvmax:\n\t\t\t( setOptions.width > setOptions.height\n\t\t\t\t? setOptions.width\n\t\t\t\t: setOptions.height ) * ONE_PERCENT,\n\t\t'%':\n\t\t\t( setOptions.type === 'font'\n\t\t\t\t? setOptions.fontSize\n\t\t\t\t: setOptions.width ) * ONE_PERCENT,\n\t\tch: 8, // The advance measure (width) of the glyph \"0\" of the element's font. Approximate\n\t\tex: 7.15625, // X-height of the element's font. Approximate.\n\t\tlh: setOptions.lineHeight,\n\t};\n\trelativeUnits.svw = relativeUnits.vmin;\n\trelativeUnits.lvw = relativeUnits.vmax;\n\trelativeUnits.dvw = relativeUnits.vw;\n\trelativeUnits.svh = relativeUnits.vmin;\n\trelativeUnits.lvh = relativeUnits.vmax;\n\trelativeUnits.dvh = relativeUnits.vh;\n\trelativeUnits.vi = relativeUnits.vh;\n\trelativeUnits.svi = relativeUnits.vmin;\n\trelativeUnits.lvi = relativeUnits.vmax;\n\trelativeUnits.dvi = relativeUnits.vw;\n\trelativeUnits.vb = relativeUnits.vh;\n\trelativeUnits.svb = relativeUnits.vmin;\n\trelativeUnits.lvb = relativeUnits.vmax;\n\trelativeUnits.dvb = relativeUnits.vh;\n\trelativeUnits.svmin = relativeUnits.vmin;\n\trelativeUnits.lvmin = relativeUnits.vmin;\n\trelativeUnits.dvmin = relativeUnits.vmin;\n\trelativeUnits.svmax = relativeUnits.vmax;\n\trelativeUnits.lvmax = relativeUnits.vmax;\n\trelativeUnits.dvmax = relativeUnits.vmax;\n\n\tconst absoluteUnits = {\n\t\tin: PIXELS_PER_INCH,\n\t\tcm: PIXELS_PER_INCH / 2.54,\n\t\tmm: PIXELS_PER_INCH / 25.4,\n\t\tpt: PIXELS_PER_INCH / 72,\n\t\tpc: PIXELS_PER_INCH / 6,\n\t\tpx: 1,\n\t\tQ: PIXELS_PER_INCH / 2.54 / 40,\n\t};\n\n\tif ( relativeUnits[ parsedUnit.unit ] ) {\n\t\treturn (\n\t\t\t( relativeUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(\n\t\t\t\t0\n\t\t\t) + 'px'\n\t\t);\n\t}\n\n\tif ( absoluteUnits[ parsedUnit.unit ] ) {\n\t\treturn (\n\t\t\t( absoluteUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(\n\t\t\t\t0\n\t\t\t) + 'px'\n\t\t);\n\t}\n\n\treturn null;\n}\n\n/**\n * Returns the px value of a cssUnit.\n *\n * @param {string} cssUnit\n * @param {Object} options\n * @return {string} returns the cssUnit value in a simple px format.\n */\nexport function getPxFromCssUnit( cssUnit, options = {} ) {\n\tif ( Number.isFinite( cssUnit ) ) {\n\t\treturn cssUnit.toFixed( 0 ) + 'px';\n\t}\n\tif ( cssUnit === undefined ) {\n\t\treturn null;\n\t}\n\tlet parsedUnit = parseUnit( cssUnit );\n\n\tif ( ! parsedUnit.unit ) {\n\t\tparsedUnit = parseUnitFunction( cssUnit );\n\t}\n\n\tif ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {\n\t\treturn evalMathExpression( cssUnit );\n\t}\n\n\treturn convertParsedUnitToPx( parsedUnit, options );\n}\n\n// Use simple cache.\nconst cache = {};\n/**\n * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;\n *\n * @param {string} cssUnit\n * @param {Object} options\n * @return {string} returns the cssUnit value in a simple px format.\n */\nfunction memoizedGetPxFromCssUnit( cssUnit, options = {} ) {\n\tconst hash = cssUnit + hashOptions( options );\n\n\tif ( ! cache[ hash ] ) {\n\t\tcache[ hash ] = getPxFromCssUnit( cssUnit, options );\n\t}\n\treturn cache[ hash ];\n}\n\nfunction hashOptions( options ) {\n\tlet hash = '';\n\tif ( options.hasOwnProperty( 'fontSize' ) ) {\n\t\thash = ':' + options.width;\n\t}\n\tif ( options.hasOwnProperty( 'lineHeight' ) ) {\n\t\thash = ':' + options.lineHeight;\n\t}\n\tif ( options.hasOwnProperty( 'width' ) ) {\n\t\thash = ':' + options.width;\n\t}\n\tif ( options.hasOwnProperty( 'height' ) ) {\n\t\thash = ':' + options.height;\n\t}\n\tif ( options.hasOwnProperty( 'type' ) ) {\n\t\thash = ':' + options.type;\n\t}\n\treturn hash;\n}\n\nexport default memoizedGetPxFromCssUnit;\n"],"mappings":"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"}

package/build-module/modal/index.js

@@ -19,9 +19,10 @@ import * as ariaHelper from './aria-helper';
 import Button from '../button';
 import StyleProvider from '../style-provider';
 // Used to track and dismiss the prior modal when another opens unless nested.
-const level0Dismissers = [];
-const ModalContext = createContext(level0Dismissers);
-let isBodyOpenClassActive = false;
+const ModalContext = createContext([]);
+
+// Used to track body class names applied while modals are open.
+const bodyOpenClasses = new Map();
 function UnforwardedModal(props, forwardedRef) {
   const {
     bodyOpenClassName = 'modal-open',
@@ -119,20 +120,24 @@ function UnforwardedModal(props, forwardedRef) {
       dismissers.shift();
     };
   }, [dismissers]);
-  const isLevel0 = dismissers === level0Dismissers;
+
   // Adds/removes the value of bodyOpenClassName to body element.
   useEffect(() => {
-    if (!isBodyOpenClassActive) {
-      isBodyOpenClassActive = true;
-      document.body.classList.add(bodyOpenClassName);
-    }
+    var _bodyOpenClasses$get;
+    const theClass = bodyOpenClassName;
+    const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);
+    bodyOpenClasses.set(theClass, oneMore);
+    document.body.classList.add(bodyOpenClassName);
     return () => {
-      if (isLevel0 && dismissers.length === 0) {
-        document.body.classList.remove(bodyOpenClassName);
-        isBodyOpenClassActive = false;
+      const oneLess = bodyOpenClasses.get(theClass) - 1;
+      if (oneLess === 0) {
+        document.body.classList.remove(theClass);
+        bodyOpenClasses.delete(theClass);
+      } else {
+        bodyOpenClasses.set(theClass, oneLess);
       }
     };
-  }, [bodyOpenClassName, dismissers, isLevel0]);
+  }, [bodyOpenClassName]);
 
   // Calls the isContentScrollable callback when the Modal children container resizes.
   useLayoutEffect(() => {
@@ -156,7 +161,7 @@ function UnforwardedModal(props, forwardedRef) {
     event.keyCode === 229) {
       return;
     }
-    if (shouldCloseOnEsc && event.code === 'Escape' && !event.defaultPrevented) {
+    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {
       event.preventDefault();
       if (onRequestClose) {
         onRequestClose(event);