@wordpress/components 16.0.1-next.5df0cd52b7.0 → 19.0.1

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

@@ -1,60 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import { isNumber, isString } from 'lodash';
 /**
  * WordPress dependencies
  */
-
-import { __ } from '@wordpress/i18n';
-import { textColor } from '@wordpress/icons';
-import { useMemo, forwardRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { settings } from '@wordpress/icons';
+import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
 import Button from '../button';
 import RangeControl from '../range-control';
+import { Flex, FlexItem } from '../flex';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import CustomSelectControl from '../custom-select-control';
 import { VisuallyHidden } from '../visually-hidden';
-const DEFAULT_FONT_SIZE = 'default';
-const CUSTOM_FONT_SIZE = 'custom';
-const MAX_FONT_SIZE_DISPLAY = '25px';
-
-function getSelectValueFromFontSize(fontSizes, value) {
-  if (value) {
-    const fontSizeValue = fontSizes.find(font => font.size === value);
-    return fontSizeValue ? fontSizeValue.slug : CUSTOM_FONT_SIZE;
-  }
-
-  return DEFAULT_FONT_SIZE;
-}
-
-function getSelectOptions(optionsArray, disableCustomFontSizes) {
-  if (disableCustomFontSizes && !optionsArray.length) {
-    return null;
-  }
-
-  optionsArray = [{
-    slug: DEFAULT_FONT_SIZE,
-    name: __('Default')
-  }, ...optionsArray, ...(disableCustomFontSizes ? [] : [{
-    slug: CUSTOM_FONT_SIZE,
-    name: __('Custom')
-  }])];
-  return optionsArray.map(option => ({
-    key: option.slug,
-    name: option.name,
-    size: option.size,
-    style: {
-      fontSize: `min( ${option.size}, ${MAX_FONT_SIZE_DISPLAY} )`
-    }
-  }));
-}
+import { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';
+import { getFontSizeOptions, getSelectedOption, splitValueAndUnitFromSize, isSimpleCssValue, CUSTOM_FONT_SIZE } from './utils';
 
 function FontSizePicker({
   fallbackFontSize,
@@ -62,54 +26,124 @@ function FontSizePicker({
   disableCustomFontSizes = false,
   onChange,
   value,
-  withSlider = false
+  withSlider = false,
+  withReset = true
 }, ref) {
-  const hasUnits = isString(value) || fontSizes[0] && isString(fontSizes[0].size);
-  let noUnitsValue;
-
-  if (!hasUnits) {
-    noUnitsValue = value;
-  } else {
-    noUnitsValue = parseInt(value);
-  }
+  var _fontSizes$, _value$endsWith;
 
-  const isPixelValue = isNumber(value) || isString(value) && value.endsWith('px');
+  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 = useCustomUnits({
     availableUnits: ['px', 'em', 'rem']
-  });
-  const options = useMemo(() => getSelectOptions(fontSizes, disableCustomFontSizes), [fontSizes, disableCustomFontSizes]);
+  }); // 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(({
+    size
+  }) => !isSimpleCssValue(size));
+  const options = useMemo(() => getFontSizeOptions(shouldUseSelectControl, fontSizes, disableCustomFontSizes), [shouldUseSelectControl, fontSizes, disableCustomFontSizes]);
+  const selectedOption = getSelectedOption(fontSizes, value);
+  const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
+  const [showCustomValueControl, setShowCustomValueControl] = useState(!disableCustomFontSizes && isCustomValue);
+  const headerHint = useMemo(() => {
+    if (showCustomValueControl) {
+      return `(${__('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 isSimpleCssValue(value) && `(${value})`;
+    }
+
+    if (shouldUseSelectControl) {
+      return 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.
+
+
+    let hint = selectedOption.name;
+
+    if (typeof selectedOption.size === 'string') {
+      const [, unit] = splitValueAndUnitFromSize(selectedOption.size);
+      hint += `(${unit})`;
+    }
+
+    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 = sprintf( // translators: %s: Currently selected font size.
+  __('Currently selected font size: %s'), selectedOption.name);
+  const baseClassName = 'components-font-size-picker';
   return createElement("fieldset", _extends({
-    className: "components-font-size-picker"
+    className: baseClassName
   }, ref ? {} : {
     ref
   }), createElement(VisuallyHidden, {
     as: "legend"
-  }, __('Font size')), createElement("div", {
-    className: "components-font-size-picker__controls"
-  }, fontSizes.length > 0 && createElement(CustomSelectControl, {
-    className: 'components-font-size-picker__select',
+  }, __('Font size')), createElement(Flex, {
+    justify: "space-between",
+    className: `${baseClassName}__header`
+  }, createElement(FlexItem, null, __('Size'), headerHint && createElement("span", {
+    className: `${baseClassName}__header__hint`
+  }, headerHint)), !disableCustomFontSizes && createElement(FlexItem, null, createElement(Button, {
+    label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
+    showTooltip: false,
+    icon: settings,
+    onClick: () => {
+      setShowCustomValueControl(!showCustomValueControl);
+    },
+    isPressed: showCustomValueControl,
+    isSmall: true
+  }))), createElement("div", {
+    className: `${baseClassName}__controls`
+  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(CustomSelectControl, {
+    className: `${baseClassName}__select`,
     label: __('Font size'),
+    hideLabelFromVision: true,
+    describedBy: currentFontSizeSR,
     options: options,
-    value: options.find(option => option.key === selectedFontSizeSlug),
+    value: options.find(option => option.key === selectedOption.slug),
     onChange: ({
       selectedItem
     }) => {
-      if (hasUnits) {
-        onChange(selectedItem.size);
-      } else {
-        onChange(Number(selectedItem.size));
+      onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
+
+      if (selectedItem.key === CUSTOM_FONT_SIZE) {
+        setShowCustomValueControl(true);
       }
     }
-  }), !withSlider && !disableCustomFontSizes && createElement(UnitControl, {
+  }), !shouldUseSelectControl && !showCustomValueControl && createElement(ToggleGroupControl, {
+    label: __('Font size'),
+    hideLabelFromVision: true,
+    value: value,
+    onChange: newValue => {
+      onChange(hasUnits ? newValue : Number(newValue));
+    },
+    isBlock: true
+  }, options.map(option => createElement(ToggleGroupControlOption, {
+    key: option.key,
+    value: option.value,
+    label: option.label,
+    "aria-label": option.name
+  }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && createElement(Flex, {
+    justify: "space-between",
+    className: `${baseClassName}__custom-size-control`
+  }, createElement(FlexItem, {
+    isBlock: true
+  }, createElement(UnitControl, {
     label: __('Custom'),
     labelPosition: "top",
-    __unstableInputWidth: "60px",
+    hideLabelFromVision: true,
     value: value,
     onChange: nextSize => {
       if (0 === parseFloat(nextSize) || !nextSize) {
@@ -119,7 +153,9 @@ function FontSizePicker({
       }
     },
     units: hasUnits ? units : false
-  }), createElement(Button, {
+  })), withReset && createElement(FlexItem, {
+    isBlock: true
+  }, createElement(Button, {
     className: "components-color-palette__clear",
     disabled: value === undefined,
     onClick: () => {
@@ -127,8 +163,8 @@ function FontSizePicker({
     },
     isSmall: true,
     variant: "secondary"
-  }, __('Reset'))), withSlider && createElement(RangeControl, {
-    className: "components-font-size-picker__custom-input",
+  }, __('Reset'))))), withSlider && createElement(RangeControl, {
+    className: `${baseClassName}__custom-input`,
     label: __('Custom Size'),
     value: isPixelValue && noUnitsValue || '',
     initialPosition: fallbackFontSize,
@@ -136,9 +172,7 @@ function FontSizePicker({
       onChange(hasUnits ? newValue + 'px' : newValue);
     },
     min: 12,
-    max: 100,
-    beforeIcon: textColor,
-    afterIcon: textColor
+    max: 100
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.js"],"names":["isNumber","isString","__","textColor","useMemo","forwardRef","Button","RangeControl","default","UnitControl","useCustomUnits","CustomSelectControl","VisuallyHidden","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","selectedItem","Number","nextSize","parseFloat","undefined","newValue"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isNumber, isString } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } 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\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\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":["__","sprintf","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","useCustomUnits","CustomSelectControl","VisuallyHidden","ToggleGroupControl","ToggleGroupControlOption","getFontSizeOptions","getSelectedOption","splitValueAndUnitFromSize","isSimpleCssValue","CUSTOM_FONT_SIZE","FontSizePicker","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","value","withSlider","withReset","ref","hasUnits","size","includes","noUnitsValue","parseInt","isPixelValue","endsWith","units","availableUnits","shouldUseSelectControl","length","some","options","selectedOption","isCustomValue","slug","showCustomValueControl","setShowCustomValueControl","headerHint","hint","name","unit","currentFontSizeSR","baseClassName","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-module/font-size-picker/index.native.js

@@ -0,0 +1,144 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { View, useWindowDimensions } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+
+import { useNavigation } from '@react-navigation/native';
+import { useState } from '@wordpress/element';
+import { Icon, chevronRight, check } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { BottomSheet } from '@wordpress/components';
+import { getPxFromCssUnit } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+
+import { default as UnitControl, useCustomUnits } from '../unit-control';
+import styles from './style.scss';
+const DEFAULT_FONT_SIZE = 16;
+
+function FontSizePicker({
+  fontSizes = [],
+  disableCustomFontSizes = false,
+  onChange,
+  value: selectedValue
+}) {
+  var _fontSizes$find;
+
+  const [showSubSheet, setShowSubSheet] = useState(false);
+  const navigation = useNavigation();
+  const {
+    height,
+    width
+  } = 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 = getPxFromCssUnit(selectedValue, cssUnitOptions);
+
+  const onChangeValue = value => {
+    return () => {
+      goBack();
+      onChange(value);
+    };
+  };
+
+  const selectedOption = (_fontSizes$find = fontSizes.find(option => option.sizePx === selectedPxValue)) !== null && _fontSizes$find !== void 0 ? _fontSizes$find : {
+    name: 'Custom'
+  };
+
+  const goBack = () => {
+    setShowSubSheet(false);
+    navigation.goBack();
+  };
+
+  const openSubSheet = () => {
+    navigation.navigate(BottomSheet.SubSheet.screenName);
+    setShowSubSheet(true);
+  };
+
+  const label = __('Font Size');
+
+  const units = useCustomUnits({
+    availableUnits: ['px', 'em', 'rem']
+  });
+  return createElement(BottomSheet.SubSheet, {
+    navigationButton: createElement(BottomSheet.Cell, {
+      label: label,
+      separatorType: "none",
+      value: selectedValue ? sprintf( // translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px
+      __('%1$s (%2$s)'), selectedOption.name, selectedPxValue) : __('Default'),
+      onPress: openSubSheet,
+      accessibilityRole: 'button',
+      accessibilityLabel: selectedOption.name,
+      accessibilityHint: sprintf( // translators: %s: Select control button label e.g. Small
+      __('Navigates to select %s'), selectedOption.name)
+    }, createElement(Icon, {
+      icon: chevronRight
+    })),
+    showSheet: showSubSheet
+  }, createElement(Fragment, null, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.BackButton, {
+    onPress: goBack
+  }), createElement(BottomSheet.NavBar.Heading, null, label)), createElement(View, {
+    style: styles['components-font-size-picker']
+  }, createElement(BottomSheet.Cell, {
+    customActionButton: true,
+    separatorType: "none",
+    label: __('Default'),
+    onPress: onChangeValue(undefined),
+    leftAlign: true,
+    key: 'default',
+    accessibilityRole: 'button',
+    accessibilityLabel: __('Selected: Default'),
+    accessibilityHint: __('Double tap to select default font size')
+  }, createElement(View, null, selectedValue === undefined && createElement(Icon, {
+    icon: check
+  }))), fontSizes.map((item, index) => {
+    // Only display a choice that we can currenly select.
+    if (!parseFloat(item.sizePx)) {
+      return null;
+    }
+
+    return createElement(BottomSheet.Cell, {
+      customActionButton: true,
+      separatorType: "none",
+      label: item.name,
+      subLabel: item.sizePx,
+      onPress: onChangeValue(item.sizePx),
+      leftAlign: true,
+      key: index,
+      accessibilityRole: 'button',
+      accessibilityLabel: item.sizePx === selectedValue ? sprintf( // translators: %s: Select font size option value e.g: "Selected: Large".
+      __('Selected: %s'), item.name) : item.name,
+      accessibilityHint: __('Double tap to select font size')
+    }, createElement(View, null, item.sizePx === selectedPxValue && createElement(Icon, {
+      icon: check
+    })));
+  }), !disableCustomFontSizes && createElement(UnitControl, {
+    label: __('Custom'),
+    min: 0,
+    max: 200,
+    step: 1,
+    value: selectedValue,
+    onChange: nextSize => {
+      if (0 === parseFloat(nextSize) || !nextSize) {
+        onChange(undefined);
+      } else {
+        onChange(nextSize);
+      }
+    },
+    units: units
+  }))));
+}
+
+export default FontSizePicker;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.native.js"],"names":["View","useWindowDimensions","useNavigation","useState","Icon","chevronRight","check","__","sprintf","BottomSheet","getPxFromCssUnit","default","UnitControl","useCustomUnits","styles","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","SubSheet","screenName","label","units","availableUnits","undefined","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-module/font-size-picker/utils.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+const DEFAULT_FONT_SIZE = 'default';
+const DEFAULT_FONT_SIZE_OPTION = {
+  slug: DEFAULT_FONT_SIZE,
+  name: __('Default')
+};
+export const CUSTOM_FONT_SIZE = 'custom';
+const CUSTOM_FONT_SIZE_OPTION = {
+  slug: CUSTOM_FONT_SIZE,
+  name: __('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.
+ */
+
+export 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.
+ */
+
+export 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.
+ */
+
+export 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(({
+    slug,
+    name,
+    size
+  }) => ({
+    key: slug,
+    name,
+    size,
+    __experimentalHint: size && isSimpleCssValue(size) && parseInt(size)
+  }));
+}
+
+function getToggleGroupOptions(optionsArray) {
+  return optionsArray.map(({
+    slug,
+    size,
+    name
+  }) => {
+    let label = size;
+
+    if (typeof size === 'string') {
+      const [numericValue] = splitValueAndUnitFromSize(size);
+      label = numericValue;
+    }
+
+    return {
+      key: slug,
+      value: size,
+      label,
+      name
+    };
+  });
+}
+
+export 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-module/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":"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","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"]}