@wordpress/components 17.0.0 → 19.0.2

package/build/font-size-picker/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -13,8 +11,6 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
-
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
@@ -23,15 +19,21 @@ var _button = _interopRequireDefault(require("../button"));
 
 var _rangeControl = _interopRequireDefault(require("../range-control"));
 
+var _flex = require("../flex");
+
 var _unitControl = _interopRequireWildcard(require("../unit-control"));
 
 var _customSelectControl = _interopRequireDefault(require("../custom-select-control"));
 
 var _visuallyHidden = require("../visually-hidden");
 
-/**
- * External dependencies
- */
+var _toggleGroupControl = require("../toggle-group-control");
+
+var _utils = require("./utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
  * WordPress dependencies
@@ -40,98 +42,135 @@ var _visuallyHidden = require("../visually-hidden");
 /**
  * Internal dependencies
  */
-const DEFAULT_FONT_SIZE = 'default';
-const CUSTOM_FONT_SIZE = 'custom';
-const MAX_FONT_SIZE_DISPLAY = '25px';
+function FontSizePicker(_ref, ref) {
+  var _fontSizes$, _value$endsWith;
+
+  let {
+    fallbackFontSize,
+    fontSizes = [],
+    disableCustomFontSizes = false,
+    onChange,
+    value,
+    withSlider = false,
+    withReset = true
+  } = _ref;
+  const hasUnits = [typeof value, typeof (fontSizes === null || fontSizes === void 0 ? void 0 : (_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size)].includes('string');
+  const noUnitsValue = !hasUnits ? value : parseInt(value);
+  const isPixelValue = typeof value === 'number' || (value === null || value === void 0 ? void 0 : (_value$endsWith = value.endsWith) === null || _value$endsWith === void 0 ? void 0 : _value$endsWith.call(value, 'px'));
+  const units = (0, _unitControl.useCustomUnits)({
+    availableUnits: ['px', 'em', 'rem']
+  }); // The main font size UI displays a toggle group when the presets are less
+  // than six and a select control when they are more.
+  //
+  // A select control is also used when the value of a preset cannot be
+  // immediately computed (eg. 'calc', 'var').
+
+  const shouldUseSelectControl = fontSizes.length > 5 || fontSizes.some(_ref2 => {
+    let {
+      size
+    } = _ref2;
+    return !(0, _utils.isSimpleCssValue)(size);
+  });
+  const options = (0, _element.useMemo)(() => (0, _utils.getFontSizeOptions)(shouldUseSelectControl, fontSizes, disableCustomFontSizes), [shouldUseSelectControl, fontSizes, disableCustomFontSizes]);
+  const selectedOption = (0, _utils.getSelectedOption)(fontSizes, value);
+  const isCustomValue = selectedOption.slug === _utils.CUSTOM_FONT_SIZE;
+  const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomFontSizes && isCustomValue);
+  const headerHint = (0, _element.useMemo)(() => {
+    if (showCustomValueControl) {
+      return `(${(0, _i18n.__)('Custom')})`;
+    } // If we have a custom value that is not available in the font sizes,
+    // show it as a hint as long as it's a simple CSS value.
+
+
+    if (isCustomValue) {
+      return (0, _utils.isSimpleCssValue)(value) && `(${value})`;
+    }
 
-function getSelectValueFromFontSize(fontSizes, value) {
-  if (value) {
-    const fontSizeValue = fontSizes.find(font => font.size === value);
-    return fontSizeValue ? fontSizeValue.slug : CUSTOM_FONT_SIZE;
-  }
+    if (shouldUseSelectControl) {
+      return (0, _utils.isSimpleCssValue)(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size) && `(${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size})`;
+    } // Calculate the `hint` for toggle group control.
 
-  return DEFAULT_FONT_SIZE;
-}
 
-function getSelectOptions(optionsArray, disableCustomFontSizes) {
-  if (disableCustomFontSizes && !optionsArray.length) {
-    return null;
-  }
-
-  optionsArray = [{
-    slug: DEFAULT_FONT_SIZE,
-    name: (0, _i18n.__)('Default')
-  }, ...optionsArray, ...(disableCustomFontSizes ? [] : [{
-    slug: CUSTOM_FONT_SIZE,
-    name: (0, _i18n.__)('Custom')
-  }])];
-  return optionsArray.map(option => ({
-    key: option.slug,
-    name: option.name,
-    size: option.size,
-    style: {
-      fontSize: `min( ${option.size}, ${MAX_FONT_SIZE_DISPLAY} )`
+    let hint = selectedOption.name;
+
+    if (typeof selectedOption.size === 'string') {
+      const [, unit] = (0, _utils.splitValueAndUnitFromSize)(selectedOption.size);
+      hint += `(${unit})`;
     }
-  }));
-}
 
-function FontSizePicker({
-  fallbackFontSize,
-  fontSizes = [],
-  disableCustomFontSizes = false,
-  onChange,
-  value,
-  withSlider = false
-}, ref) {
-  const hasUnits = (0, _lodash.isString)(value) || fontSizes[0] && (0, _lodash.isString)(fontSizes[0].size);
-  let noUnitsValue;
-
-  if (!hasUnits) {
-    noUnitsValue = value;
-  } else {
-    noUnitsValue = parseInt(value);
-  }
-
-  const isPixelValue = (0, _lodash.isNumber)(value) || (0, _lodash.isString)(value) && value.endsWith('px');
-  const units = (0, _unitControl.useCustomUnits)({
-    availableUnits: ['px', 'em', 'rem']
-  });
-  const options = (0, _element.useMemo)(() => getSelectOptions(fontSizes, disableCustomFontSizes), [fontSizes, disableCustomFontSizes]);
+    return hint;
+  }, [showCustomValueControl, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.slug, value, isCustomValue]);
 
   if (!options) {
     return null;
-  }
+  } // This is used for select control only. We need to add support
+  // for ToggleGroupControl.
+
 
-  const selectedFontSizeSlug = getSelectValueFromFontSize(fontSizes, value);
   const currentFontSizeSR = (0, _i18n.sprintf)( // translators: %s: Currently selected font size.
-  (0, _i18n.__)('Currently selected font size: %s'), options.find(option => option.key === selectedFontSizeSlug).name);
+  (0, _i18n.__)('Currently selected font size: %s'), selectedOption.name);
+  const baseClassName = 'components-font-size-picker';
   return (0, _element.createElement)("fieldset", (0, _extends2.default)({
-    className: "components-font-size-picker"
+    className: baseClassName
   }, ref ? {} : {
     ref
   }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
     as: "legend"
-  }, (0, _i18n.__)('Font size')), (0, _element.createElement)("div", {
-    className: "components-font-size-picker__controls"
-  }, fontSizes.length > 0 && (0, _element.createElement)(_customSelectControl.default, {
-    className: 'components-font-size-picker__select',
+  }, (0, _i18n.__)('Font size')), (0, _element.createElement)(_flex.Flex, {
+    justify: "space-between",
+    className: `${baseClassName}__header`
+  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _i18n.__)('Size'), headerHint && (0, _element.createElement)("span", {
+    className: `${baseClassName}__header__hint`
+  }, headerHint)), !disableCustomFontSizes && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_button.default, {
+    label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
+    showTooltip: false,
+    icon: _icons.settings,
+    onClick: () => {
+      setShowCustomValueControl(!showCustomValueControl);
+    },
+    isPressed: showCustomValueControl,
+    isSmall: true
+  }))), (0, _element.createElement)("div", {
+    className: `${baseClassName}__controls`
+  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_customSelectControl.default, {
+    className: `${baseClassName}__select`,
     label: (0, _i18n.__)('Font size'),
+    hideLabelFromVision: true,
     describedBy: currentFontSizeSR,
     options: options,
-    value: options.find(option => option.key === selectedFontSizeSlug),
-    onChange: ({
-      selectedItem
-    }) => {
-      if (hasUnits) {
-        onChange(selectedItem.size);
-      } else {
-        onChange(Number(selectedItem.size));
+    value: options.find(option => option.key === selectedOption.slug),
+    onChange: _ref3 => {
+      let {
+        selectedItem
+      } = _ref3;
+      onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
+
+      if (selectedItem.key === _utils.CUSTOM_FONT_SIZE) {
+        setShowCustomValueControl(true);
       }
     }
-  }), !withSlider && !disableCustomFontSizes && (0, _element.createElement)(_unitControl.default, {
+  }), !shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_toggleGroupControl.ToggleGroupControl, {
+    label: (0, _i18n.__)('Font size'),
+    hideLabelFromVision: true,
+    value: value,
+    onChange: newValue => {
+      onChange(hasUnits ? newValue : Number(newValue));
+    },
+    isBlock: true
+  }, options.map(option => (0, _element.createElement)(_toggleGroupControl.ToggleGroupControlOption, {
+    key: option.key,
+    value: option.value,
+    label: option.label,
+    "aria-label": option.name
+  }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && (0, _element.createElement)(_flex.Flex, {
+    justify: "space-between",
+    className: `${baseClassName}__custom-size-control`
+  }, (0, _element.createElement)(_flex.FlexItem, {
+    isBlock: true
+  }, (0, _element.createElement)(_unitControl.default, {
     label: (0, _i18n.__)('Custom'),
     labelPosition: "top",
-    __unstableInputWidth: "60px",
+    hideLabelFromVision: true,
     value: value,
     onChange: nextSize => {
       if (0 === parseFloat(nextSize) || !nextSize) {
@@ -141,7 +180,9 @@ function FontSizePicker({
       }
     },
     units: hasUnits ? units : false
-  }), (0, _element.createElement)(_button.default, {
+  })), withReset && (0, _element.createElement)(_flex.FlexItem, {
+    isBlock: true
+  }, (0, _element.createElement)(_button.default, {
     className: "components-color-palette__clear",
     disabled: value === undefined,
     onClick: () => {
@@ -149,8 +190,8 @@ function FontSizePicker({
     },
     isSmall: true,
     variant: "secondary"
-  }, (0, _i18n.__)('Reset'))), withSlider && (0, _element.createElement)(_rangeControl.default, {
-    className: "components-font-size-picker__custom-input",
+  }, (0, _i18n.__)('Reset'))))), withSlider && (0, _element.createElement)(_rangeControl.default, {
+    className: `${baseClassName}__custom-input`,
     label: (0, _i18n.__)('Custom Size'),
     value: isPixelValue && noUnitsValue || '',
     initialPosition: fallbackFontSize,
@@ -158,9 +199,7 @@ function FontSizePicker({
       onChange(hasUnits ? newValue + 'px' : newValue);
     },
     min: 12,
-    max: 100,
-    beforeIcon: _icons.textColor,
-    afterIcon: _icons.textColor
+    max: 100
   }));
 }
 

package/build/font-size-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["DEFAULT_FONT_SIZE","CUSTOM_FONT_SIZE","MAX_FONT_SIZE_DISPLAY","getSelectValueFromFontSize","fontSizes","value","fontSizeValue","find","font","size","slug","getSelectOptions","optionsArray","disableCustomFontSizes","length","name","map","option","key","style","fontSize","FontSizePicker","fallbackFontSize","onChange","withSlider","ref","hasUnits","noUnitsValue","parseInt","isPixelValue","endsWith","units","availableUnits","options","selectedFontSizeSlug","currentFontSizeSR","selectedItem","Number","nextSize","parseFloat","undefined","newValue","textColor"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isNumber, isString } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { textColor } from '@wordpress/icons';\nimport { useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport CustomSelectControl from '../custom-select-control';\nimport { VisuallyHidden } from '../visually-hidden';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst CUSTOM_FONT_SIZE = 'custom';\nconst MAX_FONT_SIZE_DISPLAY = '25px';\n\nfunction getSelectValueFromFontSize( fontSizes, value ) {\n\tif ( value ) {\n\t\tconst fontSizeValue = fontSizes.find( ( font ) => font.size === value );\n\t\treturn fontSizeValue ? fontSizeValue.slug : CUSTOM_FONT_SIZE;\n\t}\n\treturn DEFAULT_FONT_SIZE;\n}\n\nfunction getSelectOptions( optionsArray, disableCustomFontSizes ) {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\toptionsArray = [\n\t\t{ slug: DEFAULT_FONT_SIZE, name: __( 'Default' ) },\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes\n\t\t\t? []\n\t\t\t: [ { slug: CUSTOM_FONT_SIZE, name: __( 'Custom' ) } ] ),\n\t];\n\treturn optionsArray.map( ( option ) => ( {\n\t\tkey: option.slug,\n\t\tname: option.name,\n\t\tsize: option.size,\n\t\tstyle: {\n\t\t\tfontSize: `min( ${ option.size }, ${ MAX_FONT_SIZE_DISPLAY } )`,\n\t\t},\n\t} ) );\n}\n\nfunction FontSizePicker(\n\t{\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tvalue,\n\t\twithSlider = false,\n\t},\n\tref\n) {\n\tconst hasUnits =\n\t\tisString( value ) ||\n\t\t( fontSizes[ 0 ] && isString( fontSizes[ 0 ].size ) );\n\n\tlet noUnitsValue;\n\tif ( ! hasUnits ) {\n\t\tnoUnitsValue = value;\n\t} else {\n\t\tnoUnitsValue = parseInt( value );\n\t}\n\n\tconst isPixelValue =\n\t\tisNumber( value ) || ( isString( value ) && value.endsWith( 'px' ) );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst options = useMemo(\n\t\t() => getSelectOptions( fontSizes, disableCustomFontSizes ),\n\t\t[ fontSizes, disableCustomFontSizes ]\n\t);\n\n\tif ( ! options ) {\n\t\treturn null;\n\t}\n\n\tconst selectedFontSizeSlug = getSelectValueFromFontSize( fontSizes, value );\n\n\tconst currentFontSizeSR = sprintf(\n\t\t// translators: %s: Currently selected font size.\n\t\t__( 'Currently selected font size: %s' ),\n\t\toptions.find( ( option ) => option.key === selectedFontSizeSlug ).name\n\t);\n\n\treturn (\n\t\t<fieldset\n\t\t\tclassName=\"components-font-size-picker\"\n\t\t\t{ ...( ref ? {} : { ref } ) }\n\t\t>\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<div className=\"components-font-size-picker__controls\">\n\t\t\t\t{ fontSizes.length > 0 && (\n\t\t\t\t\t<CustomSelectControl\n\t\t\t\t\t\tclassName={ 'components-font-size-picker__select' }\n\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\tdescribedBy={ currentFontSizeSR }\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ options.find(\n\t\t\t\t\t\t\t( option ) => option.key === selectedFontSizeSlug\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\t\t\tif ( hasUnits ) {\n\t\t\t\t\t\t\t\tonChange( selectedItem.size );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange( Number( selectedItem.size ) );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! withSlider && ! disableCustomFontSizes && (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t__unstableInputWidth=\"60px\"\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\tif ( 0 === parseFloat( nextSize ) || ! nextSize ) {\n\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t? nextSize\n\t\t\t\t\t\t\t\t\t\t: parseInt( nextSize, 10 )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tunits={ hasUnits ? units : false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-color-palette__clear\"\n\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t} }\n\t\t\t\t\tisSmall\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t{ withSlider && (\n\t\t\t\t<RangeControl\n\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\tvalue={ ( isPixelValue && noUnitsValue ) || '' }\n\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\tonChange( hasUnits ? newValue + 'px' : newValue );\n\t\t\t\t\t} }\n\t\t\t\t\tmin={ 12 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tbeforeIcon={ textColor }\n\t\t\t\t\tafterIcon={ textColor }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nexport default forwardRef( FontSizePicker );\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["FontSizePicker","ref","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","value","withSlider","withReset","hasUnits","size","includes","noUnitsValue","parseInt","isPixelValue","endsWith","units","availableUnits","shouldUseSelectControl","length","some","options","selectedOption","isCustomValue","slug","CUSTOM_FONT_SIZE","showCustomValueControl","setShowCustomValueControl","headerHint","hint","name","unit","currentFontSizeSR","baseClassName","settings","find","option","key","selectedItem","Number","newValue","map","label","nextSize","parseFloat","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport CustomSelectControl from '../custom-select-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport {\n\tgetFontSizeOptions,\n\tgetSelectedOption,\n\tsplitValueAndUnitFromSize,\n\tisSimpleCssValue,\n\tCUSTOM_FONT_SIZE,\n} from './utils';\n\nfunction FontSizePicker(\n\t{\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t},\n\tref\n) {\n\tconst hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(\n\t\t'string'\n\t);\n\tconst noUnitsValue = ! hasUnits ? value : parseInt( value );\n\tconst isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\t// The main font size UI displays a toggle group when the presets are less\n\t// than six and a select control when they are more.\n\t//\n\t// A select control is also used when the value of a preset cannot be\n\t// immediately computed (eg. 'calc', 'var').\n\tconst shouldUseSelectControl =\n\t\tfontSizes.length > 5 ||\n\t\tfontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) );\n\n\tconst options = useMemo(\n\t\t() =>\n\t\t\tgetFontSizeOptions(\n\t\t\t\tshouldUseSelectControl,\n\t\t\t\tfontSizes,\n\t\t\t\tdisableCustomFontSizes\n\t\t\t),\n\t\t[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]\n\t);\n\tconst selectedOption = getSelectedOption( fontSizes, value );\n\tconst isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn `(${ __( 'Custom' ) })`;\n\t\t}\n\n\t\t// If we have a custom value that is not available in the font sizes,\n\t\t// show it as a hint as long as it's a simple CSS value.\n\t\tif ( isCustomValue ) {\n\t\t\treturn isSimpleCssValue( value ) && `(${ value })`;\n\t\t}\n\t\tif ( shouldUseSelectControl ) {\n\t\t\treturn (\n\t\t\t\tisSimpleCssValue( selectedOption?.size ) &&\n\t\t\t\t`(${ selectedOption?.size })`\n\t\t\t);\n\t\t}\n\t\t// Calculate the `hint` for toggle group control.\n\t\tlet hint = selectedOption.name;\n\t\tif ( typeof selectedOption.size === 'string' ) {\n\t\t\tconst [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );\n\t\t\thint += `(${ unit })`;\n\t\t}\n\t\treturn hint;\n\t}, [ showCustomValueControl, selectedOption?.slug, value, isCustomValue ] );\n\n\tif ( ! options ) {\n\t\treturn null;\n\t}\n\n\t// This is used for select control only. We need to add support\n\t// for ToggleGroupControl.\n\tconst currentFontSizeSR = sprintf(\n\t\t// translators: %s: Currently selected font size.\n\t\t__( 'Currently selected font size: %s' ),\n\t\tselectedOption.name\n\t);\n\tconst baseClassName = 'components-font-size-picker';\n\treturn (\n\t\t<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Flex\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName={ `${ baseClassName }__header` }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t<span className={ `${ baseClassName }__header__hint` }>\n\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowCustomValueControl(\n\t\t\t\t\t\t\t\t\t! showCustomValueControl\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Flex>\n\t\t\t<div className={ `${ baseClassName }__controls` }>\n\t\t\t\t{ !! fontSizes.length &&\n\t\t\t\t\tshouldUseSelectControl &&\n\t\t\t\t\t! showCustomValueControl && (\n\t\t\t\t\t\t<CustomSelectControl\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__select` }\n\t\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tdescribedBy={ currentFontSizeSR }\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ options.find(\n\t\t\t\t\t\t\t\t( option ) => option.key === selectedOption.slug\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t? selectedItem.size\n\t\t\t\t\t\t\t\t\t\t: Number( selectedItem.size )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tif ( selectedItem.key === CUSTOM_FONT_SIZE ) {\n\t\t\t\t\t\t\t\t\tsetShowCustomValueControl( true );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ ! shouldUseSelectControl && ! showCustomValueControl && (\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Font size' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\thasUnits ? newValue : Number( newValue )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\t\t\t\taria-label={ option.name }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t\t{ ! withSlider &&\n\t\t\t\t\t! disableCustomFontSizes &&\n\t\t\t\t\tshowCustomValueControl && (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__custom-size-control` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t\t? nextSize\n\t\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( nextSize, 10 )\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tunits={ hasUnits ? units : false }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-color-palette__clear\"\n\t\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ withSlider && (\n\t\t\t\t<RangeControl\n\t\t\t\t\tclassName={ `${ baseClassName }__custom-input` }\n\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\tvalue={ ( isPixelValue && noUnitsValue ) || '' }\n\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\tonChange( hasUnits ? newValue + 'px' : newValue );\n\t\t\t\t\t} }\n\t\t\t\t\tmin={ 12 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nexport default forwardRef( FontSizePicker );\n"]}

package/build/font-size-picker/index.native.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,10 +19,16 @@ var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
+var _blockEditor = require("@wordpress/block-editor");
+
 var _unitControl = _interopRequireWildcard(require("../unit-control"));
 
 var _style = _interopRequireDefault(require("./style.scss"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * External dependencies
  */
@@ -36,16 +40,31 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
-function FontSizePicker({
-  fontSizes = [],
-  disableCustomFontSizes = false,
-  onChange,
-  value: selectedValue
-}) {
+const DEFAULT_FONT_SIZE = 16;
+
+function FontSizePicker(_ref) {
   var _fontSizes$find;
 
+  let {
+    fontSizes = [],
+    disableCustomFontSizes = false,
+    onChange,
+    value: selectedValue
+  } = _ref;
   const [showSubSheet, setShowSubSheet] = (0, _element.useState)(false);
   const navigation = (0, _native.useNavigation)();
+  const {
+    height,
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const cssUnitOptions = {
+    height,
+    width,
+    fontSize: DEFAULT_FONT_SIZE
+  }; // We need to always convert to px units because the selected value
+  // could be coming from the web where it could be stored as a different unit.
+
+  const selectedPxValue = (0, _blockEditor.getPxFromCssUnit)(selectedValue, cssUnitOptions);
 
   const onChangeValue = value => {
     return () => {
@@ -54,7 +73,7 @@ function FontSizePicker({
     };
   };
 
-  const selectedOption = (_fontSizes$find = fontSizes.find(option => option.size === selectedValue)) !== null && _fontSizes$find !== void 0 ? _fontSizes$find : {
+  const selectedOption = (_fontSizes$find = fontSizes.find(option => option.sizePx === selectedPxValue)) !== null && _fontSizes$find !== void 0 ? _fontSizes$find : {
     name: 'Custom'
   };
 
@@ -77,7 +96,7 @@ function FontSizePicker({
       label: label,
       separatorType: "none",
       value: selectedValue ? (0, _i18n.sprintf)( // translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px
-      (0, _i18n.__)('%1$s (%2$s)'), selectedOption.name, selectedValue) : (0, _i18n.__)('Default'),
+      (0, _i18n.__)('%1$s (%2$s)'), selectedOption.name, selectedPxValue) : (0, _i18n.__)('Default'),
       onPress: openSubSheet,
       accessibilityRole: 'button',
       accessibilityLabel: selectedOption.name,
@@ -105,7 +124,7 @@ function FontSizePicker({
     icon: _icons.check
   }))), fontSizes.map((item, index) => {
     // Only display a choice that we can currenly select.
-    if (!parseFloat(item.size)) {
+    if (!parseFloat(item.sizePx)) {
       return null;
     }
 
@@ -113,15 +132,15 @@ function FontSizePicker({
       customActionButton: true,
       separatorType: "none",
       label: item.name,
-      subLabel: item.size,
-      onPress: onChangeValue(item.size),
+      subLabel: item.sizePx,
+      onPress: onChangeValue(item.sizePx),
       leftAlign: true,
       key: index,
       accessibilityRole: 'button',
-      accessibilityLabel: item.size === selectedValue ? (0, _i18n.sprintf)( // translators: %s: Select font size option value e.g: "Selected: Large".
+      accessibilityLabel: item.sizePx === selectedValue ? (0, _i18n.sprintf)( // translators: %s: Select font size option value e.g: "Selected: Large".
       (0, _i18n.__)('Selected: %s'), item.name) : item.name,
       accessibilityHint: (0, _i18n.__)('Double tap to select font size')
-    }, (0, _element.createElement)(_reactNative.View, null, item.size === selectedValue && (0, _element.createElement)(_icons.Icon, {
+    }, (0, _element.createElement)(_reactNative.View, null, item.sizePx === selectedPxValue && (0, _element.createElement)(_icons.Icon, {
       icon: _icons.check
     })));
   }), !disableCustomFontSizes && (0, _element.createElement)(_unitControl.default, {

package/build/font-size-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"names":["FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","showSubSheet","setShowSubSheet","navigation","onChangeValue","goBack","selectedOption","find","option","size","name","openSubSheet","navigate","BottomSheet","SubSheet","screenName","label","units","availableUnits","chevronRight","styles","undefined","check","map","item","index","parseFloat","nextSize"],"mappings":";;;;;;;;;;;AASA;;AANA;;AAKA;;AAEA;;AACA;;AACA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AAIA,SAASA,cAAT,CAAyB;AACxBC,EAAAA,SAAS,GAAG,EADY;AAExBC,EAAAA,sBAAsB,GAAG,KAFD;AAGxBC,EAAAA,QAHwB;AAIxBC,EAAAA,KAAK,EAAEC;AAJiB,CAAzB,EAKI;AAAA;;AACH,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,uBAAU,KAAV,CAA1C;AACA,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,QAAMC,aAAa,GAAKL,KAAF,IAAa;AAClC,WAAO,MAAM;AACZM,MAAAA,MAAM;AACNP,MAAAA,QAAQ,CAAEC,KAAF,CAAR;AACA,KAHD;AAIA,GALD;;AAOA,QAAMO,cAAc,sBAAGV,SAAS,CAACW,IAAV,CACpBC,MAAF,IAAcA,MAAM,CAACC,IAAP,KAAgBT,aADR,CAAH,6DAEf;AAAEU,IAAAA,IAAI,EAAE;AAAR,GAFL;;AAIA,QAAML,MAAM,GAAG,MAAM;AACpBH,IAAAA,eAAe,CAAE,KAAF,CAAf;AACAC,IAAAA,UAAU,CAACE,MAAX;AACA,GAHD;;AAKA,QAAMM,YAAY,GAAG,MAAM;AAC1BR,IAAAA,UAAU,CAACS,QAAX,CAAqBC,wBAAYC,QAAZ,CAAqBC,UAA1C;AACAb,IAAAA,eAAe,CAAE,IAAF,CAAf;AACA,GAHD;;AAIA,QAAMc,KAAK,GAAG,cAAI,WAAJ,CAAd;AAEA,QAAMC,KAAK,GAAG,iCAAgB;AAC7BC,IAAAA,cAAc,EAAE,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd;AADa,GAAhB,CAAd;AAIA,SACC,4BAAC,uBAAD,CAAa,QAAb;AACC,IAAA,gBAAgB,EACf,4BAAC,uBAAD,CAAa,IAAb;AACC,MAAA,KAAK,EAAGF,KADT;AAEC,MAAA,aAAa,EAAC,MAFf;AAGC,MAAA,KAAK,EACJhB,aAAa,GACV,oBACA;AACA,oBAAI,aAAJ,CAFA,EAGAM,cAAc,CAACI,IAHf,EAIAV,aAJA,CADU,GAOV,cAAI,SAAJ,CAXL;AAaC,MAAA,OAAO,EAAGW,YAbX;AAcC,MAAA,iBAAiB,EAAG,QAdrB;AAeC,MAAA,kBAAkB,EAAGL,cAAc,CAACI,IAfrC;AAgBC,MAAA,iBAAiB,EAAG,oBACnB;AACA,oBAAI,wBAAJ,CAFmB,EAGnBJ,cAAc,CAACI,IAHI;AAhBrB,OAsBC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGS;AAAb,MAtBD,CAFF;AA2BC,IAAA,SAAS,EAAGlB;AA3Bb,KA6BC,qDACC,4BAAC,uBAAD,CAAa,MAAb,QACC,4BAAC,uBAAD,CAAa,MAAb,CAAoB,UAApB;AAA+B,IAAA,OAAO,EAAGI;AAAzC,IADD,EAEC,4BAAC,uBAAD,CAAa,MAAb,CAAoB,OAApB,QACGW,KADH,CAFD,CADD,EAOC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGI,eAAQ,6BAAR;AAAd,KACC,4BAAC,uBAAD,CAAa,IAAb;AACC,IAAA,kBAAkB,MADnB;AAEC,IAAA,aAAa,EAAC,MAFf;AAGC,IAAA,KAAK,EAAG,cAAI,SAAJ,CAHT;AAIC,IAAA,OAAO,EAAGhB,aAAa,CAAEiB,SAAF,CAJxB;AAKC,IAAA,SAAS,EAAG,IALb;AAMC,IAAA,GAAG,EAAG,SANP;AAOC,IAAA,iBAAiB,EAAG,QAPrB;AAQC,IAAA,kBAAkB,EAAG,cAAI,mBAAJ,CARtB;AASC,IAAA,iBAAiB,EAAG,cACnB,wCADmB;AATrB,KAaC,4BAAC,iBAAD,QACGrB,aAAa,KAAKqB,SAAlB,IACD,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC;AAAb,IAFF,CAbD,CADD,EAoBG1B,SAAS,CAAC2B,GAAV,CAAe,CAAEC,IAAF,EAAQC,KAAR,KAAmB;AACnC;AACA,QAAK,CAAEC,UAAU,CAAEF,IAAI,CAACf,IAAP,CAAjB,EAAiC;AAChC,aAAO,IAAP;AACA;;AACD,WACC,4BAAC,uBAAD,CAAa,IAAb;AACC,MAAA,kBAAkB,MADnB;AAEC,MAAA,aAAa,EAAC,MAFf;AAGC,MAAA,KAAK,EAAGe,IAAI,CAACd,IAHd;AAIC,MAAA,QAAQ,EAAGc,IAAI,CAACf,IAJjB;AAKC,MAAA,OAAO,EAAGL,aAAa,CAAEoB,IAAI,CAACf,IAAP,CALxB;AAMC,MAAA,SAAS,EAAG,IANb;AAOC,MAAA,GAAG,EAAGgB,KAPP;AAQC,MAAA,iBAAiB,EAAG,QARrB;AASC,MAAA,kBAAkB,EACjBD,IAAI,CAACf,IAAL,KAAcT,aAAd,GACG,oBACA;AACA,oBAAI,cAAJ,CAFA,EAGAwB,IAAI,CAACd,IAHL,CADH,GAMGc,IAAI,CAACd,IAhBV;AAkBC,MAAA,iBAAiB,EAAG,cACnB,gCADmB;AAlBrB,OAsBC,4BAAC,iBAAD,QACGc,IAAI,CAACf,IAAL,KAAcT,aAAd,IACD,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGsB;AAAb,MAFF,CAtBD,CADD;AA8BA,GAnCC,CApBH,EAwDG,CAAEzB,sBAAF,IACD,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,GAAG,EAAG,CAFP;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,IAAI,EAAG,CAJR;AAKC,IAAA,KAAK,EAAGG,aALT;AAMC,IAAA,QAAQ,EAAK2B,QAAF,IAAgB;AAC1B,UACC,MAAMD,UAAU,CAAEC,QAAF,CAAhB,IACA,CAAEA,QAFH,EAGE;AACD7B,QAAAA,QAAQ,CAAEuB,SAAF,CAAR;AACA,OALD,MAKO;AACNvB,QAAAA,QAAQ,CAAE6B,QAAF,CAAR;AACA;AACD,KAfF;AAgBC,IAAA,KAAK,EAAGV;AAhBT,IAzDF,CAPD,CA7BD,CADD;AAqHA;;eAEctB,c","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.size === selectedValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t__( '%1$s (%2$s)' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ selectedOption.name }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. Small\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\tkey={ 'default' }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currenly select.\n\t\t\t\t\t\tif ( ! parseFloat( item.size ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.size }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.size ) }\n\t\t\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.size === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Select font size option value e.g: \"Selected: Large\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.size === selectedValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"names":["DEFAULT_FONT_SIZE","FontSizePicker","fontSizes","disableCustomFontSizes","onChange","value","selectedValue","showSubSheet","setShowSubSheet","navigation","height","width","cssUnitOptions","fontSize","selectedPxValue","onChangeValue","goBack","selectedOption","find","option","sizePx","name","openSubSheet","navigate","BottomSheet","SubSheet","screenName","label","units","availableUnits","chevronRight","styles","undefined","check","map","item","index","parseFloat","nextSize"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, useWindowDimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { getPxFromCssUnit } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { default as UnitControl, useCustomUnits } from '../unit-control';\nimport styles from './style.scss';\n\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction FontSizePicker( {\n\tfontSizes = [],\n\tdisableCustomFontSizes = false,\n\tonChange,\n\tvalue: selectedValue,\n} ) {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst { height, width } = useWindowDimensions();\n\tconst cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };\n\t// We need to always convert to px units because the selected value\n\t// could be coming from the web where it could be stored as a different unit.\n\tconst selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = fontSizes.find(\n\t\t( option ) => option.sizePx === selectedPxValue\n\t) ?? { name: 'Custom' };\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\tconst label = __( 'Font Size' );\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tselectedValue\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px\n\t\t\t\t\t\t\t\t\t__( '%1$s (%2$s)' ),\n\t\t\t\t\t\t\t\t\tselectedOption.name,\n\t\t\t\t\t\t\t\t\tselectedPxValue\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'Default' )\n\t\t\t\t\t}\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ selectedOption.name }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. Small\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.name\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles[ 'components-font-size-picker' ] }>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\tonPress={ onChangeValue( undefined ) }\n\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\tkey={ 'default' }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityLabel={ __( 'Selected: Default' ) }\n\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t'Double tap to select default font size'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t{ selectedValue === undefined && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t{ fontSizes.map( ( item, index ) => {\n\t\t\t\t\t\t// Only display a choice that we can currenly select.\n\t\t\t\t\t\tif ( ! parseFloat( item.sizePx ) ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\t\tlabel={ item.name }\n\t\t\t\t\t\t\t\tsubLabel={ item.sizePx }\n\t\t\t\t\t\t\t\tonPress={ onChangeValue( item.sizePx ) }\n\t\t\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\titem.sizePx === selectedValue\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Select font size option value e.g: \"Selected: Large\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\titem.name\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t: item.name\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t\t\t\t\t'Double tap to select font size'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t\t\t{ item.sizePx === selectedPxValue && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ! disableCustomFontSizes && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 200 }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\t\tonChange={ ( nextSize ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t0 === parseFloat( nextSize ) ||\n\t\t\t\t\t\t\t\t\t! nextSize\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( nextSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n}\n\nexport default FontSizePicker;\n"]}

package/build/font-size-picker/utils.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CUSTOM_FONT_SIZE = void 0;
+exports.getFontSizeOptions = getFontSizeOptions;
+exports.getSelectedOption = getSelectedOption;
+exports.isSimpleCssValue = isSimpleCssValue;
+exports.splitValueAndUnitFromSize = splitValueAndUnitFromSize;
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+const DEFAULT_FONT_SIZE = 'default';
+const DEFAULT_FONT_SIZE_OPTION = {
+  slug: DEFAULT_FONT_SIZE,
+  name: (0, _i18n.__)('Default')
+};
+const CUSTOM_FONT_SIZE = 'custom';
+exports.CUSTOM_FONT_SIZE = CUSTOM_FONT_SIZE;
+const CUSTOM_FONT_SIZE_OPTION = {
+  slug: CUSTOM_FONT_SIZE,
+  name: (0, _i18n.__)('Custom')
+};
+/**
+ * Helper util to split a font size to its numeric value
+ * and its `unit`, if exists.
+ *
+ * @param {string|number} size Font size.
+ * @return {[number, string]} An array with the numeric value and the unit if exists.
+ */
+
+function splitValueAndUnitFromSize(size) {
+  /**
+   * The first matched result is ignored as it's the left
+   * hand side of the capturing group in the regex.
+   */
+  const [, numericValue, unit] = size.split(/(\d+)/);
+  return [numericValue, unit];
+}
+/**
+ * Some themes use css vars for their font sizes, so until we
+ * have the way of calculating them don't display them.
+ *
+ * @param {string|number} value The value that is checked.
+ * @return {boolean} Whether the value is a simple css value.
+ */
+
+
+function isSimpleCssValue(value) {
+  const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+  return sizeRegex.test(value);
+}
+/**
+ * Return font size options in the proper format depending
+ * on the currently used control (select, toggle group).
+ *
+ * @param {boolean}  useSelectControl       Whether to use a select control.
+ * @param {Object[]} optionsArray           Array of available font sizes objects.
+ * @param {*}        disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return {Object[]|null} Array of font sizes in proper format for the used control.
+ */
+
+
+function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes) {
+  if (disableCustomFontSizes && !optionsArray.length) {
+    return null;
+  }
+
+  return useSelectControl ? getSelectOptions(optionsArray, disableCustomFontSizes) : getToggleGroupOptions(optionsArray);
+}
+
+function getSelectOptions(optionsArray, disableCustomFontSizes) {
+  const options = [DEFAULT_FONT_SIZE_OPTION, ...optionsArray, ...(disableCustomFontSizes ? [] : [CUSTOM_FONT_SIZE_OPTION])];
+  return options.map(_ref => {
+    let {
+      slug,
+      name,
+      size
+    } = _ref;
+    return {
+      key: slug,
+      name,
+      size,
+      __experimentalHint: size && isSimpleCssValue(size) && parseInt(size)
+    };
+  });
+}
+
+function getToggleGroupOptions(optionsArray) {
+  return optionsArray.map(_ref2 => {
+    let {
+      slug,
+      size,
+      name
+    } = _ref2;
+    let label = size;
+
+    if (typeof size === 'string') {
+      const [numericValue] = splitValueAndUnitFromSize(size);
+      label = numericValue;
+    }
+
+    return {
+      key: slug,
+      value: size,
+      label,
+      name
+    };
+  });
+}
+
+function getSelectedOption(fontSizes, value) {
+  if (!value) {
+    return DEFAULT_FONT_SIZE_OPTION;
+  }
+
+  return fontSizes.find(font => font.size === value) || CUSTOM_FONT_SIZE_OPTION;
+}
+//# sourceMappingURL=utils.js.map

package/build/font-size-picker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.js"],"names":["DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","splitValueAndUnitFromSize","size","numericValue","unit","split","isSimpleCssValue","value","sizeRegex","test","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","length","getSelectOptions","getToggleGroupOptions","options","map","key","__experimentalHint","parseInt","label","getSelectedOption","fontSizes","find","font"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,iBAAiB,GAAG,SAA1B;AACA,MAAMC,wBAAwB,GAAG;AAChCC,EAAAA,IAAI,EAAEF,iBAD0B;AAEhCG,EAAAA,IAAI,EAAE,cAAI,SAAJ;AAF0B,CAAjC;AAIO,MAAMC,gBAAgB,GAAG,QAAzB;;AACP,MAAMC,uBAAuB,GAAG;AAC/BH,EAAAA,IAAI,EAAEE,gBADyB;AAE/BD,EAAAA,IAAI,EAAE,cAAI,QAAJ;AAFyB,CAAhC;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASG,yBAAT,CAAoCC,IAApC,EAA2C;AACjD;AACD;AACA;AACA;AACC,QAAM,GAAIC,YAAJ,EAAkBC,IAAlB,IAA2BF,IAAI,CAACG,KAAL,CAAY,OAAZ,CAAjC;AACA,SAAO,CAAEF,YAAF,EAAgBC,IAAhB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASE,gBAAT,CAA2BC,KAA3B,EAAmC;AACzC,QAAMC,SAAS,GAAG,iCAAlB;AACA,SAAOA,SAAS,CAACC,IAAV,CAAgBF,KAAhB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,kBAAT,CACNC,gBADM,EAENC,YAFM,EAGNC,sBAHM,EAIL;AACD,MAAKA,sBAAsB,IAAI,CAAED,YAAY,CAACE,MAA9C,EAAuD;AACtD,WAAO,IAAP;AACA;;AACD,SAAOH,gBAAgB,GACpBI,gBAAgB,CAAEH,YAAF,EAAgBC,sBAAhB,CADI,GAEpBG,qBAAqB,CAAEJ,YAAF,CAFxB;AAGA;;AAED,SAASG,gBAAT,CAA2BH,YAA3B,EAAyCC,sBAAzC,EAAkE;AACjE,QAAMI,OAAO,GAAG,CACfrB,wBADe,EAEf,GAAGgB,YAFY,EAGf,IAAKC,sBAAsB,GAAG,EAAH,GAAQ,CAAEb,uBAAF,CAAnC,CAHe,CAAhB;AAKA,SAAOiB,OAAO,CAACC,GAAR,CAAa;AAAA,QAAE;AAAErB,MAAAA,IAAF;AAAQC,MAAAA,IAAR;AAAcI,MAAAA;AAAd,KAAF;AAAA,WAA8B;AACjDiB,MAAAA,GAAG,EAAEtB,IAD4C;AAEjDC,MAAAA,IAFiD;AAGjDI,MAAAA,IAHiD;AAIjDkB,MAAAA,kBAAkB,EACjBlB,IAAI,IAAII,gBAAgB,CAAEJ,IAAF,CAAxB,IAAoCmB,QAAQ,CAAEnB,IAAF;AALI,KAA9B;AAAA,GAAb,CAAP;AAOA;;AAED,SAASc,qBAAT,CAAgCJ,YAAhC,EAA+C;AAC9C,SAAOA,YAAY,CAACM,GAAb,CAAkB,SAA4B;AAAA,QAA1B;AAAErB,MAAAA,IAAF;AAAQK,MAAAA,IAAR;AAAcJ,MAAAA;AAAd,KAA0B;AACpD,QAAIwB,KAAK,GAAGpB,IAAZ;;AACA,QAAK,OAAOA,IAAP,KAAgB,QAArB,EAAgC;AAC/B,YAAM,CAAEC,YAAF,IAAmBF,yBAAyB,CAAEC,IAAF,CAAlD;AACAoB,MAAAA,KAAK,GAAGnB,YAAR;AACA;;AACD,WAAO;AAAEgB,MAAAA,GAAG,EAAEtB,IAAP;AAAaU,MAAAA,KAAK,EAAEL,IAApB;AAA0BoB,MAAAA,KAA1B;AAAiCxB,MAAAA;AAAjC,KAAP;AACA,GAPM,CAAP;AAQA;;AAEM,SAASyB,iBAAT,CAA4BC,SAA5B,EAAuCjB,KAAvC,EAA+C;AACrD,MAAK,CAAEA,KAAP,EAAe;AACd,WAAOX,wBAAP;AACA;;AACD,SACC4B,SAAS,CAACC,IAAV,CAAkBC,IAAF,IAAYA,IAAI,CAACxB,IAAL,KAAcK,KAA1C,KACAP,uBAFD;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst DEFAULT_FONT_SIZE_OPTION = {\n\tslug: DEFAULT_FONT_SIZE,\n\tname: __( 'Default' ),\n};\nexport const CUSTOM_FONT_SIZE = 'custom';\nconst CUSTOM_FONT_SIZE_OPTION = {\n\tslug: CUSTOM_FONT_SIZE,\n\tname: __( 'Custom' ),\n};\n\n/**\n * Helper util to split a font size to its numeric value\n * and its `unit`, if exists.\n *\n * @param {string|number} size Font size.\n * @return {[number, string]} An array with the numeric value and the unit if exists.\n */\nexport function splitValueAndUnitFromSize( size ) {\n\t/**\n\t * The first matched result is ignored as it's the left\n\t * hand side of the capturing group in the regex.\n\t */\n\tconst [ , numericValue, unit ] = size.split( /(\\d+)/ );\n\treturn [ numericValue, unit ];\n}\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param {string|number} value The value that is checked.\n * @return {boolean} Whether the value is a simple css value.\n */\nexport function isSimpleCssValue( value ) {\n\tconst sizeRegex = /^(?!0)\\d+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( value );\n}\n\n/**\n * Return font size options in the proper format depending\n * on the currently used control (select, toggle group).\n *\n * @param {boolean}  useSelectControl       Whether to use a select control.\n * @param {Object[]} optionsArray           Array of available font sizes objects.\n * @param {*}        disableCustomFontSizes Flag that indicates if custom font sizes are disabled.\n * @return {Object[]|null} Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl,\n\toptionsArray,\n\tdisableCustomFontSizes\n) {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\treturn useSelectControl\n\t\t? getSelectOptions( optionsArray, disableCustomFontSizes )\n\t\t: getToggleGroupOptions( optionsArray );\n}\n\nfunction getSelectOptions( optionsArray, disableCustomFontSizes ) {\n\tconst options = [\n\t\tDEFAULT_FONT_SIZE_OPTION,\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),\n\t];\n\treturn options.map( ( { slug, name, size } ) => ( {\n\t\tkey: slug,\n\t\tname,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseInt( size ),\n\t} ) );\n}\n\nfunction getToggleGroupOptions( optionsArray ) {\n\treturn optionsArray.map( ( { slug, size, name } ) => {\n\t\tlet label = size;\n\t\tif ( typeof size === 'string' ) {\n\t\t\tconst [ numericValue ] = splitValueAndUnitFromSize( size );\n\t\t\tlabel = numericValue;\n\t\t}\n\t\treturn { key: slug, value: size, label, name };\n\t} );\n}\n\nexport function getSelectedOption( fontSizes, value ) {\n\tif ( ! value ) {\n\t\treturn DEFAULT_FONT_SIZE_OPTION;\n\t}\n\treturn (\n\t\tfontSizes.find( ( font ) => font.size === value ) ||\n\t\tCUSTOM_FONT_SIZE_OPTION\n\t);\n}\n"]}