@wordpress/components 22.0.0 → 22.1.0

package/build-module/font-size-picker/font-size-picker-toggle-group.js

@@ -0,0 +1,40 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';
+import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
+
+const FontSizePickerToggleGroup = props => {
+  const {
+    fontSizes,
+    value,
+    __nextHasNoMarginBottom,
+    size,
+    onChange
+  } = props;
+  return createElement(ToggleGroupControl, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    label: __('Font size'),
+    hideLabelFromVision: true,
+    value: value,
+    onChange: onChange,
+    isBlock: true,
+    size: size
+  }, fontSizes.map((fontSize, index) => createElement(ToggleGroupControlOption, {
+    key: fontSize.slug,
+    value: fontSize.size,
+    label: T_SHIRT_ABBREVIATIONS[index],
+    "aria-label": fontSize.name || T_SHIRT_NAMES[index],
+    showTooltip: true
+  })));
+};
+
+export default FontSizePickerToggleGroup;
+//# sourceMappingURL=font-size-picker-toggle-group.js.map

package/build-module/font-size-picker/font-size-picker-toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/font-size-picker-toggle-group.tsx"],"names":["__","ToggleGroupControl","ToggleGroupControlOption","T_SHIRT_ABBREVIATIONS","T_SHIRT_NAMES","FontSizePickerToggleGroup","props","fontSizes","value","__nextHasNoMarginBottom","size","onChange","map","fontSize","index","slug","name"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,kBADD,EAECC,wBAFD,QAGO,yBAHP;AAIA,SAASC,qBAAT,EAAgCC,aAAhC,QAAqD,aAArD;;AAGA,MAAMC,yBAAyB,GAAKC,KAAF,IAA6C;AAC9E,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,KAAb;AAAoBC,IAAAA,uBAApB;AAA6CC,IAAAA,IAA7C;AAAmDC,IAAAA;AAAnD,MAAgEL,KAAtE;AACA,SACC,cAAC,kBAAD;AACC,IAAA,uBAAuB,EAAGG,uBAD3B;AAEC,IAAA,KAAK,EAAGT,EAAE,CAAE,WAAF,CAFX;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,KAAK,EAAGQ,KAJT;AAKC,IAAA,QAAQ,EAAGG,QALZ;AAMC,IAAA,OAAO,MANR;AAOC,IAAA,IAAI,EAAGD;AAPR,KASGH,SAAS,CAACK,GAAV,CAAe,CAAEC,QAAF,EAAYC,KAAZ,KAChB,cAAC,wBAAD;AACC,IAAA,GAAG,EAAGD,QAAQ,CAACE,IADhB;AAEC,IAAA,KAAK,EAAGF,QAAQ,CAACH,IAFlB;AAGC,IAAA,KAAK,EAAGP,qBAAqB,CAAEW,KAAF,CAH9B;AAIC,kBAAaD,QAAQ,CAACG,IAAT,IAAiBZ,aAAa,CAAEU,KAAF,CAJ5C;AAKC,IAAA,WAAW;AALZ,IADC,CATH,CADD;AAqBA,CAvBD;;AAyBA,eAAeT,yBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOption,\n} from '../toggle-group-control';\nimport { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';\nimport type { FontSizePickerToggleGroupProps } from './types';\n\nconst FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {\n\tconst { fontSizes, value, __nextHasNoMarginBottom, size, onChange } = props;\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tisBlock\n\t\t\tsize={ size }\n\t\t>\n\t\t\t{ fontSizes.map( ( fontSize, index ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ fontSize.slug }\n\t\t\t\t\tvalue={ fontSize.size }\n\t\t\t\t\tlabel={ T_SHIRT_ABBREVIATIONS[ index ] }\n\t\t\t\t\taria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n};\n\nexport default FontSizePickerToggleGroup;\n"]}

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

@@ -8,7 +8,7 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
@@ -19,13 +19,14 @@ import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';
-import CustomSelectControl from '../custom-select-control';
 import { VisuallyHidden } from '../visually-hidden';
-import { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';
-import { getFontSizeOptions, getSelectedOption, isSimpleCssValue, CUSTOM_FONT_SIZE } from './utils';
+import { getCommonSizeUnit } from './utils';
 import { HStack } from '../h-stack';
 import { Container, HeaderHint, HeaderLabel, Controls, ResetButton } from './styles';
 import { Spacer } from '../spacer';
+import FontSizePickerSelect from './font-size-picker-select';
+import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
+import { T_SHIRT_NAMES } from './constants';
 
 const UnforwardedFontSizePicker = (props, ref) => {
   var _fontSizes$;
@@ -54,59 +55,39 @@ const UnforwardedFontSizePicker = (props, ref) => {
   const units = 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.
-   */
-
-  const fontSizesContainComplexValues = fontSizes.some(_ref => {
-    let {
-      size: sizeArg
-    } = _ref;
-    return !isSimpleCssValue(sizeArg);
-  });
   const shouldUseSelectControl = fontSizes.length > 5;
-  const options = useMemo(() => getFontSizeOptions(shouldUseSelectControl, fontSizes, disableCustomFontSizes), [shouldUseSelectControl, fontSizes, disableCustomFontSizes]);
-  const selectedOption = getSelectedOption(fontSizes, value);
-  const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
+  const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
+  const isCustomValue = !!value && !selectedFontSize;
   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 value !== undefined && isSimpleCssValue(value) && `(${value})`;
+      return __('Custom');
     }
 
-    if (shouldUseSelectControl) {
-      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size) !== undefined && 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.
+    if (!shouldUseSelectControl) {
+      if (selectedFontSize) {
+        return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
+      }
 
+      return '';
+    }
 
-    let hint = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) || selectedOption.slug;
+    const commonUnit = getCommonSizeUnit(fontSizes);
 
-    if (!fontSizesContainComplexValues && typeof selectedOption.size === 'string') {
-      const [, unit] = parseQuantityAndUnitFromRawValue(selectedOption.size, units);
-      hint += `(${unit})`;
+    if (commonUnit) {
+      return `(${commonUnit})`;
     }
 
-    return hint;
-  }, [showCustomValueControl, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size, value, isCustomValue, shouldUseSelectControl, fontSizesContainComplexValues]);
+    return '';
+  }, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]);
 
-  if (!options) {
+  if (fontSizes.length === 0 && disableCustomFontSizes) {
     return null;
-  } // This is used for select control only. We need to add support
-  // for ToggleGroupControl.
-
-
-  const currentFontSizeSR = sprintf( // translators: %s: Currently selected font size.
-  __('Currently selected font size: %s'), selectedOption.name); // If neither the value or first font size is a string, then FontSizePicker
+  } // If neither the value or first font size is a string, then FontSizePicker
   // operates in a legacy "unitless" mode where UnitControl can only be used
   // to select px values and onChange() is always called with number values.
 
+
   const hasUnits = typeof value === 'string' || typeof ((_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size) === 'string';
   const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units);
   const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit);
@@ -132,51 +113,32 @@ const UnforwardedFontSizePicker = (props, ref) => {
   }))), createElement(Controls, {
     className: "components-font-size-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(CustomSelectControl, {
-    __nextUnconstrainedWidth: true,
-    className: "components-font-size-picker__select",
-    label: __('Font size'),
-    hideLabelFromVision: true,
-    describedBy: currentFontSizeSR,
-    options: options,
-    value: options.find(option => option.key === selectedOption.slug),
-    onChange: _ref2 => {
-      let {
-        selectedItem
-      } = _ref2;
-
-      if (selectedItem.size === undefined) {
+  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(FontSizePickerSelect, {
+    fontSizes: fontSizes,
+    value: value,
+    disableCustomFontSizes: disableCustomFontSizes,
+    size: size,
+    onChange: newValue => {
+      if (newValue === undefined) {
         onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
       } else {
-        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));
-      }
-
-      if (selectedItem.key === CUSTOM_FONT_SIZE) {
-        setShowCustomValueControl(true);
+        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
       }
     },
-    size: size
-  }), !shouldUseSelectControl && !showCustomValueControl && createElement(ToggleGroupControl, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    label: __('Font size'),
-    hideLabelFromVision: true,
+    onSelectCustom: () => setShowCustomValueControl(true)
+  }), !shouldUseSelectControl && !showCustomValueControl && createElement(FontSizePickerToggleGroup, {
+    fontSizes: fontSizes,
     value: value,
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    size: size,
     onChange: newValue => {
       if (newValue === undefined) {
         onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
       } else {
-        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue));
+        onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
       }
-    },
-    isBlock: true,
-    size: size
-  }, options.map(option => createElement(ToggleGroupControlOption, {
-    key: option.key,
-    value: option.value,
-    label: option.label,
-    "aria-label": option.name,
-    showTooltip: true
-  }))), !disableCustomFontSizes && showCustomValueControl && createElement(Flex, {
+    }
+  }), !disableCustomFontSizes && showCustomValueControl && createElement(Flex, {
     className: "components-font-size-picker__custom-size-control"
   }, createElement(FlexItem, {
     isBlock: true

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["deprecated","__","sprintf","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","CustomSelectControl","VisuallyHidden","ToggleGroupControl","ToggleGroupControlOption","getFontSizeOptions","getSelectedOption","isSimpleCssValue","CUSTOM_FONT_SIZE","HStack","Container","HeaderHint","HeaderLabel","Controls","ResetButton","Spacer","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","value","withSlider","withReset","since","version","hint","units","availableUnits","fontSizesContainComplexValues","some","sizeArg","shouldUseSelectControl","length","options","selectedOption","isCustomValue","slug","showCustomValueControl","setShowCustomValueControl","headerHint","undefined","name","unit","currentFontSizeSR","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","find","option","key","selectedItem","Number","newValue","map","label","parseInt","FontSizePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\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 {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} 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\tisSimpleCssValue,\n\tCUSTOM_FONT_SIZE,\n} from './utils';\nimport { HStack } from '../h-stack';\nimport type {\n\tFontSizePickerProps,\n\tFontSizeSelectOption,\n\tFontSizeToggleGroupOption,\n} from './types';\nimport {\n\tContainer,\n\tHeaderHint,\n\tHeaderLabel,\n\tControls,\n\tResetButton,\n} from './styles';\nimport { Spacer } from '../spacer';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\t/**\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\tconst fontSizesContainComplexValues = fontSizes.some(\n\t\t( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )\n\t);\n\tconst shouldUseSelectControl = fontSizes.length > 5;\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 (\n\t\t\t\tvalue !== undefined &&\n\t\t\t\tisSimpleCssValue( value ) &&\n\t\t\t\t`(${ value })`\n\t\t\t);\n\t\t}\n\t\tif ( shouldUseSelectControl ) {\n\t\t\treturn (\n\t\t\t\tselectedOption?.size !== undefined &&\n\t\t\t\tisSimpleCssValue( selectedOption?.size ) &&\n\t\t\t\t`(${ selectedOption?.size })`\n\t\t\t);\n\t\t}\n\n\t\t// Calculate the `hint` for toggle group control.\n\t\tlet hint = selectedOption?.name || selectedOption.slug;\n\t\tif (\n\t\t\t! fontSizesContainComplexValues &&\n\t\t\ttypeof selectedOption.size === 'string'\n\t\t) {\n\t\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\tselectedOption.size,\n\t\t\t\tunits\n\t\t\t);\n\t\t\thint += `(${ unit })`;\n\t\t}\n\t\treturn hint;\n\t}, [\n\t\tshowCustomValueControl,\n\t\tselectedOption?.name,\n\t\tselectedOption?.size,\n\t\tvalue,\n\t\tisCustomValue,\n\t\tshouldUseSelectControl,\n\t\tfontSizesContainComplexValues,\n\t] );\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\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<HStack className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\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\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) }\n\t\t\t\t</HStack>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\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\t__nextUnconstrainedWidth\n\t\t\t\t\t\t\tclassName=\"components-font-size-picker__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 as FontSizeSelectOption[] }\n\t\t\t\t\t\t\tvalue={ ( options as FontSizeSelectOption[] ).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={ ( {\n\t\t\t\t\t\t\t\tselectedItem,\n\t\t\t\t\t\t\t}: {\n\t\t\t\t\t\t\t\tselectedItem: FontSizeSelectOption;\n\t\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\t\tif ( selectedItem.size === undefined ) {\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?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? selectedItem.size\n\t\t\t\t\t\t\t\t\t\t\t: Number( selectedItem.size )\n\t\t\t\t\t\t\t\t\t);\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\tsize={ size }\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\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\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\tif ( newValue === undefined ) {\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 ? newValue : Number( newValue )\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\tisBlock\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( options as FontSizeToggleGroupOption[] ).map(\n\t\t\t\t\t\t\t( option ) => (\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\t\t\t\t\taria-label={ option.name }\n\t\t\t\t\t\t\t\t\tshowTooltip={ 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</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\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} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\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\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<ResetButton\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</ResetButton>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/index.tsx"],"names":["deprecated","__","settings","useState","useMemo","forwardRef","Button","RangeControl","Flex","FlexItem","default","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits","VisuallyHidden","getCommonSizeUnit","HStack","Container","HeaderHint","HeaderLabel","Controls","ResetButton","Spacer","FontSizePickerSelect","FontSizePickerToggleGroup","T_SHIRT_NAMES","UnforwardedFontSizePicker","props","ref","__nextHasNoMarginBottom","fallbackFontSize","fontSizes","disableCustomFontSizes","onChange","size","value","withSlider","withReset","since","version","hint","units","availableUnits","shouldUseSelectControl","length","selectedFontSize","find","fontSize","isCustomValue","showCustomValueControl","setShowCustomValueControl","headerHint","name","indexOf","commonUnit","hasUnits","valueQuantity","valueUnit","isValueUnitRelative","includes","newValue","undefined","Number","parseInt","FontSizePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } 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 {\n\tdefault as UnitControl,\n\tparseQuantityAndUnitFromRawValue,\n\tuseCustomUnits,\n} from '../unit-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { getCommonSizeUnit } from './utils';\nimport { HStack } from '../h-stack';\nimport type { FontSizePickerProps } from './types';\nimport {\n\tContainer,\n\tHeaderHint,\n\tHeaderLabel,\n\tControls,\n\tResetButton,\n} from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { T_SHIRT_NAMES } from './constants';\n\nconst UnforwardedFontSizePicker = (\n\tprops: FontSizePickerProps,\n\tref: ForwardedRef< any >\n) => {\n\tconst {\n\t\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t\t__nextHasNoMarginBottom = false,\n\t\tfallbackFontSize,\n\t\tfontSizes = [],\n\t\tdisableCustomFontSizes = false,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\twithSlider = false,\n\t\twithReset = true,\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated( 'Bottom margin styles for wp.components.FontSizePicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst shouldUseSelectControl = fontSizes.length > 5;\n\tconst selectedFontSize = fontSizes.find(\n\t\t( fontSize ) => fontSize.size === value\n\t);\n\tconst isCustomValue = !! value && ! selectedFontSize;\n\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! disableCustomFontSizes && isCustomValue\n\t);\n\n\tconst headerHint = useMemo( () => {\n\t\tif ( showCustomValueControl ) {\n\t\t\treturn __( 'Custom' );\n\t\t}\n\n\t\tif ( ! shouldUseSelectControl ) {\n\t\t\tif ( selectedFontSize ) {\n\t\t\t\treturn (\n\t\t\t\t\tselectedFontSize.name ||\n\t\t\t\t\tT_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn '';\n\t\t}\n\n\t\tconst commonUnit = getCommonSizeUnit( fontSizes );\n\t\tif ( commonUnit ) {\n\t\t\treturn `(${ commonUnit })`;\n\t\t}\n\n\t\treturn '';\n\t}, [\n\t\tshowCustomValueControl,\n\t\tshouldUseSelectControl,\n\t\tselectedFontSize,\n\t\tfontSizes,\n\t] );\n\n\tif ( fontSizes.length === 0 && disableCustomFontSizes ) {\n\t\treturn null;\n\t}\n\n\t// If neither the value or first font size is a string, then FontSizePicker\n\t// operates in a legacy \"unitless\" mode where UnitControl can only be used\n\t// to select px values and onChange() is always called with number values.\n\tconst hasUnits =\n\t\ttypeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';\n\n\tconst [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tvalue,\n\t\tunits\n\t);\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );\n\n\treturn (\n\t\t<Container ref={ ref } className=\"components-font-size-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Font size' ) }</VisuallyHidden>\n\t\t\t<Spacer>\n\t\t\t\t<HStack className=\"components-font-size-picker__header\">\n\t\t\t\t\t<HeaderLabel\n\t\t\t\t\t\taria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Size' ) }\n\t\t\t\t\t\t{ headerHint && (\n\t\t\t\t\t\t\t<HeaderHint className=\"components-font-size-picker__header__hint\">\n\t\t\t\t\t\t\t\t{ headerHint }\n\t\t\t\t\t\t\t</HeaderHint>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HeaderLabel>\n\t\t\t\t\t{ ! disableCustomFontSizes && (\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\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) }\n\t\t\t\t</HStack>\n\t\t\t</Spacer>\n\t\t\t<Controls\n\t\t\t\tclassName=\"components-font-size-picker__controls\"\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\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<FontSizePickerSelect\n\t\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tdisableCustomFontSizes={ disableCustomFontSizes }\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\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?.(\n\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\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}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonSelectCustom={ () =>\n\t\t\t\t\t\t\t\tsetShowCustomValueControl( true )\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<FontSizePickerToggleGroup\n\t\t\t\t\t\tfontSizes={ fontSizes }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tif ( newValue === undefined ) {\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 ? newValue : Number( newValue ),\n\t\t\t\t\t\t\t\t\tfontSizes.find(\n\t\t\t\t\t\t\t\t\t\t( fontSize ) =>\n\t\t\t\t\t\t\t\t\t\t\tfontSize.size === newValue\n\t\t\t\t\t\t\t\t\t)\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) }\n\t\t\t\t{ ! disableCustomFontSizes && showCustomValueControl && (\n\t\t\t\t\t<Flex className=\"components-font-size-picker__custom-size-control\">\n\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\thasUnits\n\t\t\t\t\t\t\t\t\t\t\t\t? newValue\n\t\t\t\t\t\t\t\t\t\t\t\t: parseInt( newValue, 10 )\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} }\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\tunits={ hasUnits ? units : [] }\n\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ withSlider && (\n\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom={\n\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"components-font-size-picker__custom-input\"\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom Size' ) }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\t\t\t\tinitialPosition={ fallbackFontSize }\n\t\t\t\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( newValue === undefined ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t\t\t} else if ( hasUnits ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\tnewValue +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( valueUnit ?? 'px' )\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChange?.( newValue );\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\tmin={ 0 }\n\t\t\t\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ withReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<ResetButton\n\t\t\t\t\t\t\t\t\tdisabled={ value === undefined }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange?.( undefined );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t</ResetButton>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t) }\n\t\t\t</Controls>\n\t\t</Container>\n\t);\n};\n\nexport const FontSizePicker = forwardRef( UnforwardedFontSizePicker );\n\nexport default FontSizePicker;\n"]}

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

@@ -1,38 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
 
-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')
-};
 /**
- * In case we have at most five font sizes, show a `T-shirt size`
- * alias as a label of the font size. The label assumes that the font sizes
- * are ordered accordingly - from smallest to largest.
+ * Internal dependencies
  */
-
-const FONT_SIZES_ALIASES = [
-/* translators: S stands for 'small' and is a size label. */
-__('S'),
-/* translators: M stands for 'medium' and is a size label. */
-__('M'),
-/* translators: L stands for 'large' and is a size label. */
-__('L'),
-/* translators: XL stands for 'extra large' and is a size label. */
-__('XL'),
-/* translators: XXL stands for 'extra extra large' and is a size label. */
-__('XXL')];
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 /**
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
@@ -46,69 +19,25 @@ export function isSimpleCssValue(value) {
   return sizeRegex.test(String(value));
 }
 /**
- * Return font size options in the proper format depending
- * on the currently used control (select, toggle group).
+ * If all of the given font sizes have the same unit (e.g. 'px'), return that
+ * unit. Otherwise return null.
  *
- * @param  useSelectControl       Whether to use a select control.
- * @param  optionsArray           Array of available font sizes objects.
- * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
- * @return Array of font sizes in proper format for the used control.
+ * @param  fontSizes List of font sizes.
+ * @return The common unit, or null.
  */
 
-export function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes) {
-  if (disableCustomFontSizes && !optionsArray.length) {
+export function getCommonSizeUnit(fontSizes) {
+  const [firstFontSize, ...otherFontSizes] = fontSizes;
+
+  if (!firstFontSize) {
     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: name || slug,
-      size,
-      __experimentalHint: size && isSimpleCssValue(size) && parseFloat(String(size))
-    };
-  });
-}
-/**
- * Build options for the toggle group options.
- *
- * @param  optionsArray An array of font size options.
- * @param  labelAliases An array of alternative labels.
- * @return Remapped optionsArray.
- */
-
-
-export function getToggleGroupOptions(optionsArray) {
-  let labelAliases = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FONT_SIZES_ALIASES;
-  return optionsArray.map((_ref2, index) => {
-    let {
-      slug,
-      size,
-      name
-    } = _ref2;
-    return {
-      key: slug,
-      value: size,
-      label: labelAliases[index],
-      name: name || labelAliases[index]
-    };
+  const [, firstUnit] = parseQuantityAndUnitFromRawValue(firstFontSize.size);
+  const areAllSizesSameUnit = otherFontSizes.every(fontSize => {
+    const [, unit] = parseQuantityAndUnitFromRawValue(fontSize.size);
+    return unit === firstUnit;
   });
-}
-export function getSelectedOption(fontSizes, value) {
-  if (!value) {
-    return DEFAULT_FONT_SIZE_OPTION;
-  }
-
-  return fontSizes.find(font => font.size === value) || CUSTOM_FONT_SIZE_OPTION;
+  return areAllSizesSameUnit ? firstUnit : null;
 }
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.ts"],"names":["__","DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","FONT_SIZES_ALIASES","isSimpleCssValue","value","sizeRegex","test","String","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","length","getSelectOptions","getToggleGroupOptions","options","map","size","key","__experimentalHint","parseFloat","labelAliases","index","label","getSelectedOption","fontSizes","find","font"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFontSize,\n\tFontSizeOption,\n\tFontSizeSelectOption,\n\tFontSizeToggleGroupOption,\n\tFontSizePickerProps,\n} from './types';\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 * In case we have at most five font sizes, show a `T-shirt size`\n * alias as a label of the font size. The label assumes that the font sizes\n * are ordered accordingly - from smallest to largest.\n */\nconst FONT_SIZES_ALIASES = [\n\t/* translators: S stands for 'small' and is a size label. */\n\t__( 'S' ),\n\t/* translators: M stands for 'medium' and is a size label. */\n\t__( 'M' ),\n\t/* translators: L stands for 'large' and is a size label. */\n\t__( 'L' ),\n\t/* translators: XL stands for 'extra large' and is a size label. */\n\t__( 'XL' ),\n\t/* translators: XXL stands for 'extra extra large' and is a size label. */\n\t__( 'XXL' ),\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  value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(\n\tvalue: NonNullable< FontSizePickerProps[ 'value' ] >\n) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( String( 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  useSelectControl       Whether to use a select control.\n * @param  optionsArray           Array of available font sizes objects.\n * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.\n * @return Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl: boolean,\n\toptionsArray: FontSize[],\n\tdisableCustomFontSizes: boolean\n): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {\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(\n\toptionsArray: FontSize[],\n\tdisableCustomFontSizes: boolean\n): FontSizeSelectOption[] {\n\tconst options: FontSizeOption[] = [\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: name || slug,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseFloat( String( size ) ),\n\t} ) );\n}\n\n/**\n * Build options for the toggle group options.\n *\n * @param  optionsArray An array of font size options.\n * @param  labelAliases An array of alternative labels.\n * @return Remapped optionsArray.\n */\nexport function getToggleGroupOptions(\n\toptionsArray: FontSize[],\n\tlabelAliases: string[] = FONT_SIZES_ALIASES\n): FontSizeToggleGroupOption[] {\n\treturn optionsArray.map( ( { slug, size, name }, index ) => {\n\t\treturn {\n\t\t\tkey: slug,\n\t\t\tvalue: size,\n\t\t\tlabel: labelAliases[ index ],\n\t\t\tname: name || labelAliases[ index ],\n\t\t};\n\t} );\n}\n\nexport function getSelectedOption(\n\tfontSizes: FontSize[],\n\tvalue: FontSizePickerProps[ 'value' ]\n): FontSizeOption {\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"]}
+{"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.ts"],"names":["parseQuantityAndUnitFromRawValue","isSimpleCssValue","value","sizeRegex","test","String","getCommonSizeUnit","fontSizes","firstFontSize","otherFontSizes","firstUnit","size","areAllSizesSameUnit","every","fontSize","unit"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AAEA,SAASA,gCAAT,QAAiD,iBAAjD;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,gBAAT,CACNC,KADM,EAEL;AACD,QAAMC,SAAS,GAAG,gCAAlB;AACA,SAAOA,SAAS,CAACC,IAAV,CAAgBC,MAAM,CAAEH,KAAF,CAAtB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,iBAAT,CAA4BC,SAA5B,EAAoD;AAC1D,QAAM,CAAEC,aAAF,EAAiB,GAAGC,cAApB,IAAuCF,SAA7C;;AACA,MAAK,CAAEC,aAAP,EAAuB;AACtB,WAAO,IAAP;AACA;;AACD,QAAM,GAAIE,SAAJ,IAAkBV,gCAAgC,CACvDQ,aAAa,CAACG,IADyC,CAAxD;AAGA,QAAMC,mBAAmB,GAAGH,cAAc,CAACI,KAAf,CAAwBC,QAAF,IAAgB;AACjE,UAAM,GAAIC,IAAJ,IAAaf,gCAAgC,CAAEc,QAAQ,CAACH,IAAX,CAAnD;AACA,WAAOI,IAAI,KAAKL,SAAhB;AACA,GAH2B,CAA5B;AAIA,SAAOE,mBAAmB,GAAGF,SAAH,GAAe,IAAzC;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { FontSizePickerProps, FontSize } from './types';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\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  value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(\n\tvalue: NonNullable< FontSizePickerProps[ 'value' ] >\n) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( String( value ) );\n}\n\n/**\n * If all of the given font sizes have the same unit (e.g. 'px'), return that\n * unit. Otherwise return null.\n *\n * @param  fontSizes List of font sizes.\n * @return The common unit, or null.\n */\nexport function getCommonSizeUnit( fontSizes: FontSize[] ) {\n\tconst [ firstFontSize, ...otherFontSizes ] = fontSizes;\n\tif ( ! firstFontSize ) {\n\t\treturn null;\n\t}\n\tconst [ , firstUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tfirstFontSize.size\n\t);\n\tconst areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {\n\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( fontSize.size );\n\t\treturn unit === firstUnit;\n\t} );\n\treturn areAllSizesSameUnit ? firstUnit : null;\n}\n"]}

package/build-module/form-token-field/index.js

@@ -158,11 +158,15 @@ export function FormTokenField(props) {
   function onKeyDown(event) {
     let preventDefault = false;
 
-    if (event.defaultPrevented) {
+    if (event.defaultPrevented || // Ignore keydowns from IMEs
+    event.nativeEvent.isComposing || // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+    // is `isComposing=false`, even though it's technically still part of the composition.
+    // These can only be detected by keyCode.
+    event.keyCode === 229) {
       return;
     }
 
-    switch (event.code) {
+    switch (event.key) {
       case 'Backspace':
         preventDefault = handleDeleteKey(deleteTokenBeforeInput);
         break;
@@ -212,11 +216,10 @@ export function FormTokenField(props) {
   }
 
   function onKeyPress(event) {
-    let preventDefault = false; // TODO: replace to event.code;
+    let preventDefault = false;
 
-    switch (event.charCode) {
-      case 44:
-        // Comma.
+    switch (event.key) {
+      case ',':
         preventDefault = handleCommaKey();
         break;