@wordpress/components/build/font-size-picker/index.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../src/font-size-picker/index.tsx"],
  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';\nimport { Container, Header, HeaderLabel, HeaderToggle } from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];\nconst MAX_TOGGLE_GROUP_SIZES = 5;\nconst UnforwardedFontSizePicker = (props, ref) => {\n  const {\n    __next40pxDefaultSize = false,\n    fallbackFontSize,\n    fontSizes = [],\n    disableCustomFontSizes = false,\n    onChange,\n    size = 'default',\n    units: unitsProp = DEFAULT_UNITS,\n    value,\n    valueMode = 'literal',\n    withSlider = false,\n    withReset = true\n  } = props;\n  const labelId = useInstanceId(UnforwardedFontSizePicker, 'font-size-picker-label');\n  const units = useCustomUnits({\n    availableUnits: unitsProp\n  });\n  const selectedFontSize = (() => {\n    if (!value) {\n      return undefined;\n    }\n\n    // If valueMode is 'slug', find by slug\n    if (valueMode === 'slug') {\n      return fontSizes.find(fontSize => fontSize.slug === value);\n    }\n\n    // If valueMode is 'literal', find by size value\n    return fontSizes.find(fontSize => fontSize.size === value);\n  })();\n  const isCustomValue = !!value && !selectedFontSize;\n\n  // Initially request a custom picker if the value is not from the predef list.\n  const [userRequestedCustom, setUserRequestedCustom] = useState(isCustomValue);\n\n  // Resolve the literal value to use in custom controls when operating in slug mode.\n  // When `valueMode` is 'slug', the `value` prop contains the slug of the\n  // selected preset. In that case, the custom input should reflect the preset's\n  // actual size value so it pre-populates correctly after clicking \"Set custom size\".\n  const resolvedValueForControls = valueMode === 'slug' ? selectedFontSize?.size : value;\n  let currentPickerType;\n  if (!disableCustomFontSizes && userRequestedCustom) {\n    // While showing the custom value picker, switch back to predef only if\n    // `disableCustomFontSizes` is set to `true`.\n    currentPickerType = 'custom';\n  } else {\n    currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';\n  }\n  if (fontSizes.length === 0 && disableCustomFontSizes) {\n    return null;\n  }\n\n  // If neither the value or first font size is a string, then FontSizePicker\n  // operates in a legacy \"unitless\" mode where UnitControl can only be used\n  // to select px values and onChange() is always called with number values.\n  const hasUnits = typeof resolvedValueForControls === 'string' || typeof fontSizes[0]?.size === 'string';\n  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(resolvedValueForControls, units);\n  const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);\n  const isDisabled = value === undefined;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'FontSizePicker',\n    __next40pxDefaultSize,\n    size\n  });\n  return /*#__PURE__*/_jsxs(Container, {\n    ref: ref,\n    className: \"components-font-size-picker\"\n    // This Container component renders a fieldset element that needs to be labeled.\n    ,\n    \"aria-labelledby\": labelId,\n    children: [/*#__PURE__*/_jsx(Spacer, {\n      children: /*#__PURE__*/_jsxs(Header, {\n        className: \"components-font-size-picker__header\",\n        children: [/*#__PURE__*/_jsx(HeaderLabel, {\n          id: labelId,\n          children: __('Font size')\n        }), !disableCustomFontSizes && /*#__PURE__*/_jsx(HeaderToggle, {\n          label: currentPickerType === 'custom' ? __('Use size preset') : __('Set custom size'),\n          icon: settings,\n          onClick: () => setUserRequestedCustom(!userRequestedCustom),\n          isPressed: currentPickerType === 'custom',\n          size: \"small\"\n        })]\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      children: [currentPickerType === 'select' && /*#__PURE__*/_jsx(FontSizePickerSelect, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        disableCustomFontSizes: disableCustomFontSizes,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        },\n        onSelectCustom: () => setUserRequestedCustom(true)\n      }), currentPickerType === 'togglegroup' && /*#__PURE__*/_jsx(FontSizePickerToggleGroup, {\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        }\n      }), currentPickerType === 'custom' && /*#__PURE__*/_jsxs(Flex, {\n        className: \"components-font-size-picker__custom-size-control\",\n        children: [/*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(UnitControl, {\n            __next40pxDefaultSize: __next40pxDefaultSize,\n            __shouldNotWarnDeprecated36pxSize: true,\n            label: __('Font size'),\n            labelPosition: \"top\",\n            hideLabelFromVision: true,\n            value: hasUnits ? `${valueQuantity ?? ''}${valueUnit ?? ''}` : resolvedValueForControls,\n            onChange: newValue => {\n              setUserRequestedCustom(true);\n\n              // Treat clearing the input (empty string) as a reset\n              if (newValue === undefined || newValue === '') {\n                onChange?.(undefined);\n              } else {\n                onChange?.(hasUnits ? newValue : parseInt(newValue, 10));\n              }\n            },\n            size: size,\n            units: hasUnits ? units : [],\n            min: 0\n          })\n        }), withSlider && /*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(Spacer, {\n            marginX: 2,\n            marginBottom: 0,\n            children: /*#__PURE__*/_jsx(RangeControl, {\n              __next40pxDefaultSize: __next40pxDefaultSize,\n              __shouldNotWarnDeprecated36pxSize: true,\n              className: \"components-font-size-picker__custom-input\",\n              label: __('Font size'),\n              hideLabelFromVision: true,\n              value: valueQuantity,\n              initialPosition: fallbackFontSize,\n              withInputField: false,\n              onChange: newValue => {\n                setUserRequestedCustom(true);\n                if (newValue === undefined) {\n                  onChange?.(undefined);\n                } else if (hasUnits) {\n                  onChange?.(newValue + (valueUnit ?? 'px'));\n                } else {\n                  onChange?.(newValue);\n                }\n              },\n              min: 0,\n              max: isValueUnitRelative ? 10 : 100,\n              step: isValueUnitRelative ? 0.1 : 1\n            })\n          })\n        }), withReset && /*#__PURE__*/_jsx(FlexItem, {\n          children: /*#__PURE__*/_jsx(Button, {\n            disabled: isDisabled,\n            accessibleWhenDisabled: true,\n            onClick: () => {\n              onChange?.(undefined);\n            },\n            variant: \"secondary\",\n            __next40pxDefaultSize: true,\n            size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small',\n            children: __('Reset')\n          })\n        })]\n      })]\n    })]\n  });\n};\nexport const FontSizePicker = forwardRef(UnforwardedFontSizePicker);\nFontSizePicker.displayName = 'FontSizePicker';\nexport default FontSizePicker;"],
  "mappings": "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",
  "names": ["_jsxs", "_jsx", "FontSizePickerSelect", "FontSizePickerToggleGroup", "UnitControl", "RangeControl"]
}