@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

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/aria-helper.js

@@ -1,6 +1,5 @@
 const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
-let hiddenElements = [],
-  isHidden = false;
+const hiddenElementsByDepth = [];
 
 /**
  * Hides all elements in the body element from screen-readers except
@@ -12,31 +11,27 @@ let hiddenElements = [],
  * we should consider removing these helper functions in favor of
  * `aria-modal="true"`.
  *
- * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.
+ * @param modalElement The element that should not be hidden.
  */
-export function hideApp(unhiddenElement) {
-  if (isHidden) {
-    return;
-  }
+export function modalize(modalElement) {
   const elements = Array.from(document.body.children);
-  elements.forEach(element => {
-    if (element === unhiddenElement) {
-      return;
-    }
+  const hiddenElements = [];
+  hiddenElementsByDepth.push(hiddenElements);
+  for (const element of elements) {
+    if (element === modalElement) continue;
     if (elementShouldBeHidden(element)) {
       element.setAttribute('aria-hidden', 'true');
       hiddenElements.push(element);
     }
-  });
-  isHidden = true;
+  }
 }
 
 /**
  * Determines if the passed element should not be hidden from screen readers.
  *
- * @param {HTMLElement} element The element that should be checked.
+ * @param element The element that should be checked.
  *
- * @return {boolean} Whether the element should not be hidden from screen-readers.
+ * @return Whether the element should not be hidden from screen-readers.
  */
 export function elementShouldBeHidden(element) {
   const role = element.getAttribute('role');
@@ -44,17 +39,11 @@ export function elementShouldBeHidden(element) {
 }
 
 /**
- * Makes all elements in the body that have been hidden by `hideApp`
- * visible again to screen-readers.
+ * Accessibly reveals the elements hidden by the latest modal.
  */
-export function showApp() {
-  if (!isHidden) {
-    return;
-  }
-  hiddenElements.forEach(element => {
-    element.removeAttribute('aria-hidden');
-  });
-  hiddenElements = [];
-  isHidden = false;
+export function unmodalize() {
+  const hiddenElements = hiddenElementsByDepth.pop();
+  if (!hiddenElements) return;
+  for (const element of hiddenElements) element.removeAttribute('aria-hidden');
 }
 //# sourceMappingURL=aria-helper.js.map

package/build-module/modal/aria-helper.js.map

@@ -1 +1 @@
-{"version":3,"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElements","isHidden","hideApp","unhiddenElement","elements","Array","from","document","body","children","forEach","element","elementShouldBeHidden","setAttribute","push","role","getAttribute","tagName","hasAttribute","has","showApp","removeAttribute"],"sources":["@wordpress/components/src/modal/aria-helper.ts"],"sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nlet hiddenElements: Element[] = [],\n\tisHidden = false;\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.\n */\nexport function hideApp( unhiddenElement?: HTMLDivElement ) {\n\tif ( isHidden ) {\n\t\treturn;\n\t}\n\tconst elements = Array.from( document.body.children );\n\telements.forEach( ( element ) => {\n\t\tif ( element === unhiddenElement ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t} );\n\tisHidden = true;\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param {HTMLElement} element The element that should be checked.\n *\n * @return {boolean} Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Makes all elements in the body that have been hidden by `hideApp`\n * visible again to screen-readers.\n */\nexport function showApp() {\n\tif ( ! isHidden ) {\n\t\treturn;\n\t}\n\thiddenElements.forEach( ( element ) => {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t} );\n\thiddenElements = [];\n\tisHidden = false;\n}\n"],"mappings":"AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAG,CAAE,CACvC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,CACN,CAAC;AAEH,IAAIC,cAAyB,GAAG,EAAE;EACjCC,QAAQ,GAAG,KAAK;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,OAAOA,CAAEC,eAAgC,EAAG;EAC3D,IAAKF,QAAQ,EAAG;IACf;EACD;EACA,MAAMG,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAAEC,QAAQ,CAACC,IAAI,CAACC,QAAS,CAAC;EACrDL,QAAQ,CAACM,OAAO,CAAIC,OAAO,IAAM;IAChC,IAAKA,OAAO,KAAKR,eAAe,EAAG;MAClC;IACD;IACA,IAAKS,qBAAqB,CAAED,OAAQ,CAAC,EAAG;MACvCA,OAAO,CAACE,YAAY,CAAE,aAAa,EAAE,MAAO,CAAC;MAC7Cb,cAAc,CAACc,IAAI,CAAEH,OAAQ,CAAC;IAC/B;EACD,CAAE,CAAC;EACHV,QAAQ,GAAG,IAAI;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASW,qBAAqBA,CAAED,OAAgB,EAAG;EACzD,MAAMI,IAAI,GAAGJ,OAAO,CAACK,YAAY,CAAE,MAAO,CAAC;EAC3C,OAAO,EACNL,OAAO,CAACM,OAAO,KAAK,QAAQ,IAC5BN,OAAO,CAACO,YAAY,CAAE,aAAc,CAAC,IACrCP,OAAO,CAACO,YAAY,CAAE,WAAY,CAAC,IACjCH,IAAI,IAAIjB,sBAAsB,CAACqB,GAAG,CAAEJ,IAAK,CAAG,CAC9C;AACF;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASK,OAAOA,CAAA,EAAG;EACzB,IAAK,CAAEnB,QAAQ,EAAG;IACjB;EACD;EACAD,cAAc,CAACU,OAAO,CAAIC,OAAO,IAAM;IACtCA,OAAO,CAACU,eAAe,CAAE,aAAc,CAAC;EACzC,CAAE,CAAC;EACHrB,cAAc,GAAG,EAAE;EACnBC,QAAQ,GAAG,KAAK;AACjB"}
+{"version":3,"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElementsByDepth","modalize","modalElement","elements","Array","from","document","body","children","hiddenElements","push","element","elementShouldBeHidden","setAttribute","role","getAttribute","tagName","hasAttribute","has","unmodalize","pop","removeAttribute"],"sources":["@wordpress/components/src/modal/aria-helper.ts"],"sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nconst hiddenElementsByDepth: Element[][] = [];\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param modalElement The element that should not be hidden.\n */\nexport function modalize( modalElement?: HTMLDivElement ) {\n\tconst elements = Array.from( document.body.children );\n\tconst hiddenElements: Element[] = [];\n\thiddenElementsByDepth.push( hiddenElements );\n\tfor ( const element of elements ) {\n\t\tif ( element === modalElement ) continue;\n\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t}\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param element The element that should be checked.\n *\n * @return Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Accessibly reveals the elements hidden by the latest modal.\n */\nexport function unmodalize() {\n\tconst hiddenElements = hiddenElementsByDepth.pop();\n\tif ( ! hiddenElements ) return;\n\n\tfor ( const element of hiddenElements )\n\t\telement.removeAttribute( 'aria-hidden' );\n}\n"],"mappings":"AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAG,CAAE,CACvC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,CACN,CAAC;AAEH,MAAMC,qBAAkC,GAAG,EAAE;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAEC,YAA6B,EAAG;EACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAAEC,QAAQ,CAACC,IAAI,CAACC,QAAS,CAAC;EACrD,MAAMC,cAAyB,GAAG,EAAE;EACpCT,qBAAqB,CAACU,IAAI,CAAED,cAAe,CAAC;EAC5C,KAAM,MAAME,OAAO,IAAIR,QAAQ,EAAG;IACjC,IAAKQ,OAAO,KAAKT,YAAY,EAAG;IAEhC,IAAKU,qBAAqB,CAAED,OAAQ,CAAC,EAAG;MACvCA,OAAO,CAACE,YAAY,CAAE,aAAa,EAAE,MAAO,CAAC;MAC7CJ,cAAc,CAACC,IAAI,CAAEC,OAAQ,CAAC;IAC/B;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAED,OAAgB,EAAG;EACzD,MAAMG,IAAI,GAAGH,OAAO,CAACI,YAAY,CAAE,MAAO,CAAC;EAC3C,OAAO,EACNJ,OAAO,CAACK,OAAO,KAAK,QAAQ,IAC5BL,OAAO,CAACM,YAAY,CAAE,aAAc,CAAC,IACrCN,OAAO,CAACM,YAAY,CAAE,WAAY,CAAC,IACjCH,IAAI,IAAIhB,sBAAsB,CAACoB,GAAG,CAAEJ,IAAK,CAAG,CAC9C;AACF;;AAEA;AACA;AACA;AACA,OAAO,SAASK,UAAUA,CAAA,EAAG;EAC5B,MAAMV,cAAc,GAAGT,qBAAqB,CAACoB,GAAG,CAAC,CAAC;EAClD,IAAK,CAAEX,cAAc,EAAG;EAExB,KAAM,MAAME,OAAO,IAAIF,cAAc,EACpCE,OAAO,CAACU,eAAe,CAAE,aAAc,CAAC;AAC1C"}

package/build-module/modal/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect } from '@wordpress/element';
-import { useInstanceId, useFocusReturn, useFocusOnMount, __experimentalUseFocusOutside as useFocusOutside, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';
+import { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect, createContext, useContext } from '@wordpress/element';
+import { useInstanceId, useFocusReturn, useFocusOnMount, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { getScrollContainer } from '@wordpress/dom';
@@ -18,8 +18,11 @@ import { getScrollContainer } from '@wordpress/dom';
 import * as ariaHelper from './aria-helper';
 import Button from '../button';
 import StyleProvider from '../style-provider';
-// Used to count the number of open modals.
-let openModalCount = 0;
+// Used to track and dismiss the prior modal when another opens unless nested.
+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',
@@ -44,20 +47,35 @@ function UnforwardedModal(props, forwardedRef) {
     contentLabel,
     onKeyDown,
     isFullScreen = false,
+    size,
     headerActions = null,
     __experimentalHideHeader = false
   } = props;
   const ref = useRef();
   const instanceId = useInstanceId(Modal);
   const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;
-  const focusOnMountRef = useFocusOnMount(focusOnMount);
+
+  // The focus hook does not support 'firstContentElement' but this is a valid
+  // value for the Modal's focusOnMount prop. The following code ensures the focus
+  // hook will focus the first focusable node within the element to which it is applied.
+  // When `firstContentElement` is passed as the value of the focusOnMount prop,
+  // the focus hook is applied to the Modal's content element.
+  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the
+  // focus hook will focus the first element in the Modal's **content** when
+  // `firstContentElement` is passed.
+  const focusOnMountRef = useFocusOnMount(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);
   const constrainedTabbingRef = useConstrainedTabbing();
   const focusReturnRef = useFocusReturn();
-  const focusOutsideProps = useFocusOutside(onRequestClose);
   const contentRef = useRef(null);
   const childrenContainerRef = useRef(null);
   const [hasScrolledContent, setHasScrolledContent] = useState(false);
   const [hasScrollableContent, setHasScrollableContent] = useState(false);
+  let sizeClass;
+  if (isFullScreen || size === 'fill') {
+    sizeClass = 'is-full-screen';
+  } else if (size) {
+    sizeClass = `has-size-${size}`;
+  }
 
   // Determines whether the Modal content is scrollable and updates the state.
   const isContentScrollable = useCallback(() => {
@@ -71,17 +89,52 @@ function UnforwardedModal(props, forwardedRef) {
       setHasScrollableContent(false);
     }
   }, [contentRef]);
+
+  // Accessibly isolates/unisolates the modal.
   useEffect(() => {
-    openModalCount++;
-    if (openModalCount === 1) {
-      ariaHelper.hideApp(ref.current);
-      document.body.classList.add(bodyOpenClassName);
-    }
+    ariaHelper.modalize(ref.current);
+    return () => ariaHelper.unmodalize();
+  }, []);
+
+  // Keeps a fresh ref for the subsequent effect.
+  const refOnRequestClose = useRef();
+  useEffect(() => {
+    refOnRequestClose.current = onRequestClose;
+  }, [onRequestClose]);
+
+  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
+  // one should remain open at a time and the list enables closing prior ones.
+  const dismissers = useContext(ModalContext);
+  // Used for the tracking and dismissing any nested modals.
+  const nestedDismissers = useRef([]);
+
+  // Updates the stack tracking open modals at this level and calls
+  // onRequestClose for any prior and/or nested modals as applicable.
+  useEffect(() => {
+    dismissers.push(refOnRequestClose);
+    const [first, second] = dismissers;
+    if (second) first?.current?.();
+    const nested = nestedDismissers.current;
     return () => {
-      openModalCount--;
-      if (openModalCount === 0) {
-        document.body.classList.remove(bodyOpenClassName);
-        ariaHelper.showApp();
+      nested[0]?.current?.();
+      dismissers.shift();
+    };
+  }, [dismissers]);
+
+  // Adds/removes the value of bodyOpenClassName to body element.
+  useEffect(() => {
+    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 () => {
+      const oneLess = bodyOpenClasses.get(theClass) - 1;
+      if (oneLess === 0) {
+        document.body.classList.remove(theClass);
+        bodyOpenClasses.delete(theClass);
+      } else {
+        bodyOpenClasses.set(theClass, oneLess);
       }
     };
   }, [bodyOpenClassName]);
@@ -108,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);
@@ -127,12 +180,9 @@ function UnforwardedModal(props, forwardedRef) {
   let pressTarget = null;
   const overlayPressHandlers = {
     onPointerDown: event => {
-      if (event.isPrimary && event.target === event.currentTarget) {
+      if (event.target === event.currentTarget) {
         pressTarget = event.target;
-        // Avoids loss of focus yet also leaves `useFocusOutside`
-        // practically useless with its only potential trigger being
-        // programmatic focus movement. TODO opt for either removing
-        // the hook or enhancing it such that this isn't needed.
+        // Avoids focus changing so that focus return works as expected.
         event.preventDefault();
       }
     },
@@ -151,7 +201,7 @@ function UnforwardedModal(props, forwardedRef) {
       if (button === 0 && isSameTarget) onRequestClose();
     }
   };
-  return createPortal(
+  const modal =
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
   createElement("div", {
     ref: useMergeRefs([ref, forwardedRef]),
@@ -161,17 +211,14 @@ function UnforwardedModal(props, forwardedRef) {
   }, createElement(StyleProvider, {
     document: document
   }, createElement("div", {
-    className: classnames('components-modal__frame', className, {
-      'is-full-screen': isFullScreen
-    }),
+    className: classnames('components-modal__frame', sizeClass, className),
     style: style,
-    ref: useMergeRefs([constrainedTabbingRef, focusReturnRef, focusOnMountRef]),
+    ref: useMergeRefs([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
     role: role,
     "aria-label": contentLabel,
     "aria-labelledby": contentLabel ? undefined : headingId,
     "aria-describedby": aria.describedby,
     tabIndex: -1,
-    ...(shouldCloseOnClickOutside ? focusOutsideProps : {}),
     onKeyDown: onKeyDown
   }, createElement("div", {
     className: classnames('components-modal__content', {
@@ -199,8 +246,11 @@ function UnforwardedModal(props, forwardedRef) {
     icon: close,
     label: closeButtonLabel || __('Close')
   })), createElement("div", {
-    ref: childrenContainerRef
-  }, children))))), document.body);
+    ref: useMergeRefs([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null])
+  }, children)))));
+  return createPortal(createElement(ModalContext.Provider, {
+    value: nestedDismissers.current
+  }, modal), document.body);
 }
 
 /**