@wordpress/components 39.0.0 → 40.0.0

package/build-module/duotone-picker/duotone-picker.mjs

@@ -3,7 +3,7 @@ import fastDeepEqual from "fast-deep-equal/es6/index.js";
 import { useMemo } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
 import ColorListPicker from "./color-list-picker/index.mjs";
-import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from "../circular-option-picker/index.mjs";
+import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from "../circular-option-picker/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
 import CustomDuotoneBar from "./custom-duotone-bar.mjs";
 import { getDefaultColors, getGradientFromCSSColors } from "./utils.mjs";
@@ -11,6 +11,7 @@ import { Spacer } from "../spacer/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DuotonePicker({
   asButtons,
+  presentation,
   loop,
   clearable = true,
   unsetable = true,
@@ -19,29 +20,37 @@ function DuotonePicker({
   disableCustomColors,
   disableCustomDuotone,
   value,
+  selectedSlug,
   onChange,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
   ...otherProps
 }) {
+  warnIfCircularOptionPickerAsButtonsIsSet("DuotonePicker", asButtons);
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);
   const isUnset = value === "unset";
+  const isUnsetSelected = resolvedPresentation !== "command-buttons" && isUnset;
   const unsetOptionLabel = __("Unset");
   const unsetOption = /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
     value: "unset",
-    isSelected: isUnset,
+    isSelected: isUnsetSelected,
     tooltipText: unsetOptionLabel,
     "aria-label": unsetOptionLabel,
     className: "components-duotone-picker__color-indicator",
     onClick: () => {
-      onChange(isUnset ? void 0 : "unset");
+      onChange(isUnsetSelected ? void 0 : "unset");
     }
   }, "unset");
   const duotoneOptions = duotonePalette.map(({
     colors,
     slug,
     name
-  }) => {
+  }, index) => {
     const style = {
       background: getGradientFromCSSColors(colors, "135deg"),
       color: "transparent"
@@ -56,22 +65,22 @@ function DuotonePicker({
       __("Duotone: %s"),
       name
     ) : tooltipText;
-    const isSelected = fastDeepEqual(colors, value);
+    const isSelected = resolvedPresentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : fastDeepEqual(colors, value));
     return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
       value: colors,
       isSelected,
       "aria-label": label,
       tooltipText,
       style,
-      onClick: () => {
-        onChange(isSelected ? void 0 : colors);
-      }
+      onClick: (
+        // Deselecting reports no preset, matching
+        // `ColorPalette` and `GradientPicker`. Passing the slug
+        // back would leave a controlled consumer marking the
+        // swatch as selected after its value had been cleared.
+        isSelected ? () => onChange(void 0) : () => onChange(colors, index, slug)
+      )
     }, slug);
   });
-  const {
-    metaProps,
-    labelProps
-  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
   return /* @__PURE__ */ _jsx(CircularOptionPicker, {
     ...otherProps,
@@ -84,14 +93,14 @@ function DuotonePicker({
       disabled: !value,
       children: __("Clear")
     }),
-    children: /* @__PURE__ */ _jsx(Spacer, {
+    children: !disableCustomDuotone && /* @__PURE__ */ _jsx(Spacer, {
       paddingTop: options.length === 0 ? 0 : 4,
       children: /* @__PURE__ */ _jsxs(VStack, {
         spacing: 3,
-        children: [!disableCustomColors && !disableCustomDuotone && /* @__PURE__ */ _jsx(CustomDuotoneBar, {
+        children: [!disableCustomColors && /* @__PURE__ */ _jsx(CustomDuotoneBar, {
           value: isUnset ? void 0 : value,
           onChange
-        }), !disableCustomDuotone && /* @__PURE__ */ _jsx(ColorListPicker, {
+        }), /* @__PURE__ */ _jsx(ColorListPicker, {
           labels: [__("Shadows"), __("Highlights")],
           colors: colorPalette,
           value: isUnset ? void 0 : value,

package/build-module/duotone-picker/duotone-picker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/duotone-picker/duotone-picker.tsx"],
-  "sourcesContent": ["import fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnset,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnset ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name ?? sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    const isSelected = fastDeepEqual(colors, value);\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick: () => {\n        onChange(isSelected ? undefined : colors);\n      }\n    }, slug);\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
-  "mappings": "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",
+  "sourcesContent": ["import fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  presentation,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  selectedSlug,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  warnIfCircularOptionPickerAsButtonsIsSet('DuotonePicker', asButtons);\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const isUnsetSelected = resolvedPresentation !== 'command-buttons' && isUnset;\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnsetSelected,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnsetSelected ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }, index) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name ?? sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    // When a non-empty selectedSlug is provided, selection is decided\n    // strictly by slug, which keeps two presets holding the same\n    // colors apart. Otherwise selection falls back to matching the\n    // colors themselves.\n    const isSelected = resolvedPresentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : fastDeepEqual(colors, value));\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick:\n      // Deselecting reports no preset, matching\n      // `ColorPalette` and `GradientPicker`. Passing the slug\n      // back would leave a controlled consumer marking the\n      // swatch as selected after its value had been cleared.\n      isSelected ? () => onChange(undefined) : () => onChange(colors, index, slug)\n    }, slug);\n  });\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: !disableCustomDuotone && /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/focal-point-picker/index.mjs

@@ -155,7 +155,6 @@ function FocalPointPicker({
     top: y !== void 0 ? y * bounds.height : 0.5 * bounds.height
   };
   const classes = clsx("components-focal-point-picker-control", className);
-  const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;
   useUpdateEffect(() => {
     setShowGridOverlay(true);
     const timeout = window.setTimeout(() => {
@@ -167,10 +166,13 @@ function FocalPointPicker({
     ...restProps,
     as: "fieldset",
     className: classes,
-    children: [!!label && /* @__PURE__ */ _jsx(Label, {
+    children: [!!label && (hideLabelFromVision ? /* @__PURE__ */ _jsx(VisuallyHidden, {
       as: "legend",
       children: label
-    }), /* @__PURE__ */ _jsx(MediaWrapper, {
+    }) : /* @__PURE__ */ _jsx(StyledLabel, {
+      as: "legend",
+      children: label
+    })), /* @__PURE__ */ _jsx(MediaWrapper, {
       className: "components-focal-point-picker-wrapper",
       children: /* @__PURE__ */ _jsxs(MediaContainer, {
         className: "components-focal-point-picker",

package/build-module/focal-point-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focal-point-picker/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport { Container, MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { StyledLabel, StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * It addresses two common issues when displaying images in cropped containers. First, large\n * background images can be cropped in undesirable ways, especially on smaller viewports such as\n * mobile devices. Second, the CSS aspect-ratio property can inadvertently crop out the area of\n * highest visual interest. This component allows the selection of the point with the most\n * important visual information and returns it as a pair of numbers between 0 and 1.\n * The output value can be applied to either CSS `background-position` (for elements with\n * `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with\n * `object-fit: cover`).\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`;\n * - Corresponding CSS: `object-position: 50% 10%`;\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.1,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\twidth: '100%',\n * \t\taspectRatio: '16 / 9',\n * \t\tobjectFit: 'cover',\n * \t\tobjectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<img src={ url } alt=\"\" style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\n  __next40pxDefaultSize: _next40pxDefaultSize,\n  autoPlay = true,\n  className,\n  help,\n  hideLabelFromVision,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    const resolvedValue = resolvePoint?.(value) ?? value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(Container, {\n    ...restProps,\n    as: \"fieldset\",\n    className: classes,\n    children: [!!label && /*#__PURE__*/_jsx(Label, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      children: help\n    })]\n  });\n}\nexport default FocalPointPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport { Container, MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { StyledLabel, StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * It addresses two common issues when displaying images in cropped containers. First, large\n * background images can be cropped in undesirable ways, especially on smaller viewports such as\n * mobile devices. Second, the CSS aspect-ratio property can inadvertently crop out the area of\n * highest visual interest. This component allows the selection of the point with the most\n * important visual information and returns it as a pair of numbers between 0 and 1.\n * The output value can be applied to either CSS `background-position` (for elements with\n * `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with\n * `object-fit: cover`).\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`;\n * - Corresponding CSS: `object-position: 50% 10%`;\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.1,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\twidth: '100%',\n * \t\taspectRatio: '16 / 9',\n * \t\tobjectFit: 'cover',\n * \t\tobjectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<img src={ url } alt=\"\" style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\n  __next40pxDefaultSize: _next40pxDefaultSize,\n  autoPlay = true,\n  className,\n  help,\n  hideLabelFromVision,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    const resolvedValue = resolvePoint?.(value) ?? value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(Container, {\n    ...restProps,\n    as: \"fieldset\",\n    className: classes,\n    children: [!!label && (hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(StyledLabel, {\n      as: \"legend\",\n      children: label\n    })), /*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      children: help\n    })]\n  });\n}\nexport default FocalPointPicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/gradient-picker/index.mjs

@@ -2,10 +2,95 @@
 import { __, sprintf } from "@wordpress/i18n";
 import { useInstanceId } from "@wordpress/compose";
 import { useCallback, useMemo } from "@wordpress/element";
-import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from "../circular-option-picker/index.mjs";
+import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from "../circular-option-picker/index.mjs";
 import CustomGradientPicker from "../custom-gradient-picker/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
-import { ColorHeading } from "../color-palette/styles.mjs";
+import { Heading } from "../heading/index.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/color-palette/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a7b05d56c7", ".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}");
+}
+var style_module_default = { "color-heading": "cf6db1948d5273a8__color-heading" };
+
+// packages/components/src/gradient-picker/index.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var isMultipleOriginObject = (obj) => Array.isArray(obj.gradients) && !("gradient" in obj);
 var isMultipleOriginArray = (arr) => {
@@ -18,6 +103,7 @@ function SingleOrigin({
   onChange,
   value,
   selectedSlug,
+  presentation,
   ...additionalProps
 }) {
   const gradientOptions = useMemo(() => {
@@ -26,7 +112,7 @@ function SingleOrigin({
       name,
       slug
     }, index) => {
-      const isSelected = selectedSlug ? slug === selectedSlug : value === gradient;
+      const isSelected = presentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : value === gradient);
       return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
         value: gradient,
         isSelected,
@@ -46,7 +132,7 @@ function SingleOrigin({
         )
       }, slug);
     });
-  }, [gradients, value, onChange, clearGradient, selectedSlug]);
+  }, [gradients, value, onChange, clearGradient, selectedSlug, presentation]);
   return /* @__PURE__ */ _jsx(CircularOptionPicker.OptionGroup, {
     className,
     options: gradientOptions,
@@ -60,7 +146,8 @@ function MultipleOrigin({
   onChange,
   value,
   selectedSlug,
-  headingLevel
+  headingLevel,
+  presentation
 }) {
   const instanceId = useInstanceId(MultipleOrigin);
   return /* @__PURE__ */ _jsx(VStack, {
@@ -73,7 +160,8 @@ function MultipleOrigin({
       const id = `color-palette-${instanceId}-${index}`;
       return /* @__PURE__ */ _jsxs(VStack, {
         spacing: 2,
-        children: [/* @__PURE__ */ _jsx(ColorHeading, {
+        children: [/* @__PURE__ */ _jsx(Heading, {
+          className: style_module_default["color-heading"],
           level: headingLevel,
           id,
           children: name
@@ -83,6 +171,7 @@ function MultipleOrigin({
           onChange: (gradient, _index, slug) => onChange(gradient, index, slug),
           value,
           selectedSlug,
+          presentation,
           "aria-labelledby": id
         })]
       }, index);
@@ -92,6 +181,7 @@ function MultipleOrigin({
 function Component(props) {
   const {
     asButtons,
+    presentation,
     loop,
     actions,
     headingLevel,
@@ -99,16 +189,20 @@ function Component(props) {
     "aria-labelledby": ariaLabelledby,
     ...additionalProps
   } = props;
+  warnIfCircularOptionPickerAsButtonsIsSet("GradientPicker", asButtons);
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const options = isMultipleOriginArray(props.gradients) ? /* @__PURE__ */ _jsx(MultipleOrigin, {
     headingLevel,
-    ...additionalProps
+    ...additionalProps,
+    presentation: resolvedPresentation
   }) : /* @__PURE__ */ _jsx(SingleOrigin, {
-    ...additionalProps
+    ...additionalProps,
+    presentation: resolvedPresentation
   });
-  const {
-    metaProps,
-    labelProps
-  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   return /* @__PURE__ */ _jsx(CircularOptionPicker, {
     ...metaProps,
     ...labelProps,

package/build-module/gradient-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/gradient-picker/index.tsx"],
-  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => {\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug, which keeps two entries with the same gradient\n      // value apart. Otherwise selection falls back to matching the\n      // gradient value.\n      const isSelected = selectedSlug ? slug === selectedSlug : value === gradient;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        value: gradient,\n        isSelected: isSelected,\n        tooltipText: name ||\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient),\n        style: {\n          color: 'rgba( 0,0,0,0 )',\n          background: gradient\n        },\n        onClick: isSelected ? clearGradient : () => onChange(gradient, index, slug),\n        \"aria-label\": name ?\n        // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n        sprintf(__('Gradient: %s'), name) :\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient)\n      }, slug);\n    });\n  }, [gradients, value, onChange, clearGradient, selectedSlug]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: (gradient, _index, slug) => onChange(gradient, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;"],
-  "mappings": "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",
+  "sources": ["../../src/gradient-picker/index.tsx", "../../../style-runtime/src/index.ts", "../../src/color-palette/style.module.scss"],
+  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { Heading } from '../heading';\nimport colorPaletteStyles from '../color-palette/style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  presentation,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => {\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug, which keeps two entries with the same gradient\n      // value apart. Otherwise selection falls back to matching the\n      // gradient value.\n      const isSelected = presentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : value === gradient);\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        value: gradient,\n        isSelected: isSelected,\n        tooltipText: name ||\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient),\n        style: {\n          color: 'rgba( 0,0,0,0 )',\n          background: gradient\n        },\n        onClick: isSelected ? clearGradient : () => onChange(gradient, index, slug),\n        \"aria-label\": name ?\n        // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n        sprintf(__('Gradient: %s'), name) :\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient)\n      }, slug);\n    });\n  }, [gradients, value, onChange, clearGradient, selectedSlug, presentation]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel,\n  presentation\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(Heading, {\n          className: colorPaletteStyles['color-heading'],\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: (gradient, _index, slug) => onChange(gradient, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          presentation: presentation,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    presentation,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  warnIfCircularOptionPickerAsButtonsIsSet('GradientPicker', asButtons);\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps,\n    presentation: resolvedPresentation\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps,\n    presentation: resolvedPresentation\n  });\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"a7b05d56c7\", \".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}\");\n}\nexport default {\"color-heading\":\"cf6db1948d5273a8__color-heading\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/input-control/input-field.mjs

@@ -140,6 +140,7 @@ function InputField({
     ...props,
     ...dragProps,
     className: "components-input-control__input",
+    "data-empty-value": value ? void 0 : "",
     disabled,
     dragCursor,
     isDragging,

package/build-module/input-control/input-field.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/input-field.tsx"],
-  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
-  "mappings": "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",
+  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    \"data-empty-value\": value ? undefined : '',\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
+  "mappings": "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",
   "names": ["dragProps"]
 }