@wordpress/components 33.0.0 → 33.1.1-next.v.202605131006.0

package/build/color-palette/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-palette/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name\n    }, index) => {\n      const colordColor = colord(color);\n      const isSelected = value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index)\n      }, `${color}-${index}`);\n    });\n  }, [colors, value, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: newColor => onChange(newColor, index),\n          value: value,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name,\n      slug\n    }, index) => {\n      const colordColor = colord(color);\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug \u2014 entries without a slug or with a different slug\n      // are not selected, even when their color value matches `value`.\n      // This correctly handles mixed palettes where some entries have slugs\n      // and others don't. Fall back to color value matching otherwise\n      // (including when selectedSlug is an empty string).\n      const isSelected = selectedSlug ? slug === selectedSlug : value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index, slug)\n      }, slug ?? `${color}-${index}`);\n    });\n  }, [colors, value, selectedSlug, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    selectedSlug,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins, selectedSlug), [value, colors, hasMultipleColorOrigins, selectedSlug]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value,\n    selectedSlug\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;"],
+  "mappings": "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",
   "names": ["namesPlugin", "a11yPlugin", "_jsx", "CircularOptionPicker", "_jsxs", "Dropdown", "DropdownContentWrapper", "clsx"]
 }

package/build/color-palette/utils.cjs

@@ -46,7 +46,7 @@ var isSimpleCSSColor = (value) => {
   const valueIsColorMix = /color-mix\(/.test(value ?? "");
   return !valueIsCssVariable && !valueIsColorMix;
 };
-var extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
+var extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false, selectedSlug) => {
   if (!currentValue) {
     return "";
   }
@@ -60,8 +60,15 @@ var extractColorNameFromCurrentValue = (currentValue, colors = [], showMultipleP
   } of colorPalettes) {
     for (const {
       name: colorName,
-      color: colorValue
+      color: colorValue,
+      slug
     } of paletteColors) {
+      if (selectedSlug) {
+        if (slug === selectedSlug) {
+          return colorName;
+        }
+        continue;
+      }
       const normalizedColorValue = currentValueIsSimpleColor ? (0, import_colord.colord)(colorValue).toHex() : colorValue;
       if (normalizedCurrentValue === normalizedColorValue) {
         return colorName;

package/build/color-palette/utils.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-palette/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n  const valueIsCssVariable = /var\\(/.test(value ?? '');\n  const valueIsColorMix = /color-mix\\(/.test(value ?? '');\n  return !valueIsCssVariable && !valueIsColorMix;\n};\nexport const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {\n  if (!currentValue) {\n    return '';\n  }\n  const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;\n  const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;\n\n  // Normalize format of `colors` to simplify the following loop\n\n  const colorPalettes = showMultiplePalettes ? colors : [{\n    colors: colors\n  }];\n  for (const {\n    colors: paletteColors\n  } of colorPalettes) {\n    for (const {\n      name: colorName,\n      color: colorValue\n    } of paletteColors) {\n      const normalizedColorValue = currentValueIsSimpleColor ? colord(colorValue).toHex() : colorValue;\n      if (normalizedCurrentValue === normalizedColorValue) {\n        return colorName;\n      }\n    }\n  }\n\n  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n  return __('Custom');\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);\nexport const isMultiplePaletteArray = arr => {\n  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (value, element) => {\n  if (!value || !element || isSimpleCSSColor(value)) {\n    return value;\n  }\n  const {\n    ownerDocument\n  } = element;\n  const {\n    defaultView\n  } = ownerDocument;\n  const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;\n  return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA+B;AAC/B,mBAAwB;AACxB,kBAAuB;AAKvB,kBAAmB;AAAA,IAMnB,sBAAO,CAAC,aAAAA,SAAa,YAAAC,OAAU,CAAC;AAQhC,IAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,SAAS,EAAE;AACnD,QAAM,kBAAkB,cAAc,KAAK,SAAS,EAAE;AACtD,SAAO,CAAC,sBAAsB,CAAC;AACjC;AACO,IAAM,mCAAmC,CAAC,cAAc,SAAS,CAAC,GAAG,uBAAuB,UAAU;AAC3G,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AACA,QAAM,4BAA4B,eAAe,iBAAiB,YAAY,IAAI;AAClF,QAAM,yBAAyB,gCAA4B,sBAAO,YAAY,EAAE,MAAM,IAAI;AAI1F,QAAM,gBAAgB,uBAAuB,SAAS,CAAC;AAAA,IACrD;AAAA,EACF,CAAC;AACD,aAAW;AAAA,IACT,QAAQ;AAAA,EACV,KAAK,eAAe;AAClB,eAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IACT,KAAK,eAAe;AAClB,YAAM,uBAAuB,gCAA4B,sBAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,aAAO,gBAAG,QAAQ;AACpB;AAIO,IAAM,0BAA0B,SAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,EAAE,WAAW;AACjF,IAAM,yBAAyB,SAAO;AAC3C,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,cAAY,wBAAwB,QAAQ,CAAC;AAClF;AASO,IAAM,sBAAsB,CAAC,OAAO,YAAY;AACrD,MAAI,CAAC,SAAS,CAAC,WAAW,iBAAiB,KAAK,GAAG;AACjD,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,0BAA0B,aAAa,iBAAiB,OAAO,EAAE;AACvE,SAAO,8BAA0B,sBAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n  const valueIsCssVariable = /var\\(/.test(value ?? '');\n  const valueIsColorMix = /color-mix\\(/.test(value ?? '');\n  return !valueIsCssVariable && !valueIsColorMix;\n};\nexport const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false, selectedSlug) => {\n  if (!currentValue) {\n    return '';\n  }\n  const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;\n  const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;\n\n  // Normalize format of `colors` to simplify the following loop\n\n  const colorPalettes = showMultiplePalettes ? colors : [{\n    colors: colors\n  }];\n  for (const {\n    colors: paletteColors\n  } of colorPalettes) {\n    for (const {\n      name: colorName,\n      color: colorValue,\n      slug\n    } of paletteColors) {\n      if (selectedSlug) {\n        if (slug === selectedSlug) {\n          return colorName;\n        }\n        continue;\n      }\n      const normalizedColorValue = currentValueIsSimpleColor ? colord(colorValue).toHex() : colorValue;\n      if (normalizedCurrentValue === normalizedColorValue) {\n        return colorName;\n      }\n    }\n  }\n\n  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n  return __('Custom');\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);\nexport const isMultiplePaletteArray = arr => {\n  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (value, element) => {\n  if (!value || !element || isSimpleCSSColor(value)) {\n    return value;\n  }\n  const {\n    ownerDocument\n  } = element;\n  const {\n    defaultView\n  } = ownerDocument;\n  const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;\n  return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA+B;AAC/B,mBAAwB;AACxB,kBAAuB;AAKvB,kBAAmB;AAAA,IAMnB,sBAAO,CAAC,aAAAA,SAAa,YAAAC,OAAU,CAAC;AAQhC,IAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,SAAS,EAAE;AACnD,QAAM,kBAAkB,cAAc,KAAK,SAAS,EAAE;AACtD,SAAO,CAAC,sBAAsB,CAAC;AACjC;AACO,IAAM,mCAAmC,CAAC,cAAc,SAAS,CAAC,GAAG,uBAAuB,OAAO,iBAAiB;AACzH,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AACA,QAAM,4BAA4B,eAAe,iBAAiB,YAAY,IAAI;AAClF,QAAM,yBAAyB,gCAA4B,sBAAO,YAAY,EAAE,MAAM,IAAI;AAI1F,QAAM,gBAAgB,uBAAuB,SAAS,CAAC;AAAA,IACrD;AAAA,EACF,CAAC;AACD,aAAW;AAAA,IACT,QAAQ;AAAA,EACV,KAAK,eAAe;AAClB,eAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,IACF,KAAK,eAAe;AAClB,UAAI,cAAc;AAChB,YAAI,SAAS,cAAc;AACzB,iBAAO;AAAA,QACT;AACA;AAAA,MACF;AACA,YAAM,uBAAuB,gCAA4B,sBAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,aAAO,gBAAG,QAAQ;AACpB;AAIO,IAAM,0BAA0B,SAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,EAAE,WAAW;AACjF,IAAM,yBAAyB,SAAO;AAC3C,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,cAAY,wBAAwB,QAAQ,CAAC;AAClF;AASO,IAAM,sBAAsB,CAAC,OAAO,YAAY;AACrD,MAAI,CAAC,SAAS,CAAC,WAAW,iBAAiB,KAAK,GAAG;AACjD,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,0BAA0B,aAAa,iBAAiB,OAAO,EAAE;AACvE,SAAO,8BAA0B,sBAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;",
   "names": ["namesPlugin", "a11yPlugin"]
 }

package/build/color-picker/hex-input.cjs

@@ -46,7 +46,7 @@ var HexInput = ({
   enableAlpha
 }) => {
   const handleChange = (nextValue) => {
-    if (!nextValue) {
+    if (nextValue === void 0) {
       return;
     }
     const hexValue = nextValue.startsWith("#") ? nextValue : "#" + nextValue;

package/build/color-picker/hex-input.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/hex-input.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const HexInput = ({\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const handleChange = nextValue => {\n    if (!nextValue) {\n      return;\n    }\n    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;\n    onChange(colord(hexValue));\n  };\n  const stateReducer = (state, action) => {\n    const nativeEvent = action.payload?.event?.nativeEvent;\n    if ('insertFromPaste' !== nativeEvent?.inputType) {\n      return {\n        ...state\n      };\n    }\n    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();\n    return {\n      ...state,\n      value\n    };\n  };\n  return /*#__PURE__*/_jsx(InputControl, {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: /*#__PURE__*/_jsx(Text, {\n        color: COLORS.theme.accent,\n        lineHeight: 1,\n        children: \"#\"\n      })\n    }),\n    value: color.toHex().slice(1).toUpperCase(),\n    onChange: handleChange,\n    maxLength: enableAlpha ? 9 : 7,\n    label: __('Hex color'),\n    hideLabelFromVision: true,\n    size: \"__unstable-large\",\n    __unstableStateReducer: stateReducer,\n    __unstableInputWidth: \"9em\"\n  });\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAKvB,kBAAmB;AAKnB,2BAA6B;AAC7B,kBAAqB;AACrB,2BAAuB;AACvB,kCAAsC;AACtC,yBAA4B;AACrB,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAa;AAChC,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,UAAM,WAAW,UAAU,WAAW,GAAG,IAAI,YAAY,MAAM;AAC/D,iBAAS,sBAAO,QAAQ,CAAC;AAAA,EAC3B;AACA,QAAM,eAAe,CAAC,OAAO,WAAW;AACtC,UAAM,cAAc,OAAO,SAAS,OAAO;AAC3C,QAAI,sBAAsB,aAAa,WAAW;AAChD,aAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,OAAO,WAAW,GAAG,IAAI,MAAM,MAAM,MAAM,CAAC,EAAE,YAAY,IAAI,MAAM,OAAO,YAAY;AAC3G,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,SAAoB,uCAAAA,KAAK,mCAAc;AAAA,IACrC,QAAqB,uCAAAA,KAAK,4BAAAC,SAA2B;AAAA,MACnD,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,QAChC,OAAO,4BAAO,MAAM;AAAA,QACpB,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC;AAAA,IACD,OAAO,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE,YAAY;AAAA,IAC1C,UAAU;AAAA,IACV,WAAW,cAAc,IAAI;AAAA,IAC7B,WAAO,gBAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,MAAM;AAAA,IACN,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,EACxB,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const HexInput = ({\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const handleChange = nextValue => {\n    if (nextValue === undefined) {\n      return;\n    }\n    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;\n    onChange(colord(hexValue));\n  };\n  const stateReducer = (state, action) => {\n    const nativeEvent = action.payload?.event?.nativeEvent;\n    if ('insertFromPaste' !== nativeEvent?.inputType) {\n      return {\n        ...state\n      };\n    }\n    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();\n    return {\n      ...state,\n      value\n    };\n  };\n  return /*#__PURE__*/_jsx(InputControl, {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: /*#__PURE__*/_jsx(Text, {\n        color: COLORS.theme.accent,\n        lineHeight: 1,\n        children: \"#\"\n      })\n    }),\n    value: color.toHex().slice(1).toUpperCase(),\n    onChange: handleChange,\n    maxLength: enableAlpha ? 9 : 7,\n    label: __('Hex color'),\n    hideLabelFromVision: true,\n    size: \"__unstable-large\",\n    __unstableStateReducer: stateReducer,\n    __unstableInputWidth: \"9em\"\n  });\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAKvB,kBAAmB;AAKnB,2BAA6B;AAC7B,kBAAqB;AACrB,2BAAuB;AACvB,kCAAsC;AACtC,yBAA4B;AACrB,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAa;AAChC,QAAI,cAAc,QAAW;AAC3B;AAAA,IACF;AACA,UAAM,WAAW,UAAU,WAAW,GAAG,IAAI,YAAY,MAAM;AAC/D,iBAAS,sBAAO,QAAQ,CAAC;AAAA,EAC3B;AACA,QAAM,eAAe,CAAC,OAAO,WAAW;AACtC,UAAM,cAAc,OAAO,SAAS,OAAO;AAC3C,QAAI,sBAAsB,aAAa,WAAW;AAChD,aAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,OAAO,WAAW,GAAG,IAAI,MAAM,MAAM,MAAM,CAAC,EAAE,YAAY,IAAI,MAAM,OAAO,YAAY;AAC3G,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,SAAoB,uCAAAA,KAAK,mCAAc;AAAA,IACrC,QAAqB,uCAAAA,KAAK,4BAAAC,SAA2B;AAAA,MACnD,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,QAChC,OAAO,4BAAO,MAAM;AAAA,QACpB,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC;AAAA,IACD,OAAO,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE,YAAY;AAAA,IAC1C,UAAU;AAAA,IACV,WAAW,cAAc,IAAI;AAAA,IAC7B,WAAO,gBAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,MAAM;AAAA,IACN,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,EACxB,CAAC;AACH;",
   "names": ["_jsx", "InputControlPrefixWrapper"]
 }

package/build/custom-gradient-picker/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n  if (type === 'linear-gradient' && gradientAST.orientation) {\n    // eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196\n    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n  }\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${lastLinearOrientationAngle.current}`\n      },\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n  if (type === 'linear-gradient' && gradientAST.orientation) {\n    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n  }\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${lastLinearOrientationAngle.current}`\n      },\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,kBAAmB;AACnB,qBAAuB;AAKvB,kCAA+B;AAC/B,0BAA8B;AAC9B,kBAAqB;AACrB,4BAA0B;AAC1B,qBAAuB;AACvB,mBAA6H;AAC7H,wBAAkC;AAClC,uBAAiG;AACjG,2CAAgD;AAChD,yBAA2C;AAC3C,IAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,aAAa,aAAa,SAAS;AACjD,QAAM,gBAAgB,cAAY;AAChC,iBAAS,qCAAkB;AAAA,MACzB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO,GAAG,QAAQ;AAAA,MACpB;AAAA,IACF,CAAC,CAAC;AAAA,EACJ;AACA,SAAoB,uCAAAA,KAAK,4BAAAC,SAAoB;AAAA,IAC3C,UAAU;AAAA,IACV,OAAO,cAAc,QAAQ;AAAA,EAC/B,CAAC;AACH;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,iCAA6B,uBAAO,OAAO,iDAAgC,KAAK,CAAC;AACvF,MAAI,SAAS,qBAAqB,YAAY,aAAa;AACzD,+BAA2B,UAAU,OAAO,YAAY,YAAY,KAAK;AAAA,EAC3E;AACA,QAAM,sBAAsB,MAAM;AAChC,iBAAS,qCAAkB;AAAA,MACzB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO,GAAG,2BAA2B,OAAO;AAAA,MAC9C;AAAA,MACA,MAAM;AAAA,IACR,CAAC,CAAC;AAAA,EACJ;AACA,QAAM,sBAAsB,MAAM;AAChC,UAAM;AAAA,MACJ;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,iBAAS,qCAAkB;AAAA,MACzB,GAAG;AAAA,MACH,MAAM;AAAA,IACR,CAAC,CAAC;AAAA,EACJ;AACA,QAAM,iBAAiB,UAAQ;AAC7B,QAAI,SAAS,mBAAmB;AAC9B,0BAAoB;AAAA,IACtB;AACA,QAAI,SAAS,mBAAmB;AAC9B,0BAAoB;AAAA,IACtB;AAAA,EACF;AACA,SAAoB,uCAAAD,KAAK,sBAAAE,SAAe;AAAA,IACtC,WAAW;AAAA,IACX,WAAO,gBAAG,MAAM;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,cAAc,OAAO;AAAA,EAC9B,CAAC;AACH;AAuBO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,oCAAoC;AACtC,GAAG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,wCAA0B,KAAK;AAKnC,QAAM,iBAAa,8CAAgC,WAAW;AAI9D,QAAM,gBAAgB,YAAY,WAAW,IAAI,eAAa;AAC5D,WAAO;AAAA,MACL,WAAO,8BAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,MAIhC,UAAU,SAAS,UAAU,OAAO,KAAK;AAAA,IAC3C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,MAAM,uBAAQ;AAAA,IAChC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAH,KAAK,oBAAAI,SAAmB;AAAA,MAC9C;AAAA,MACA,cAAc,CAAC;AAAA,MACf;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,UAAU,sBAAoB;AAC5B,qBAAS,yCAAkB,8CAAgC,aAAa,gBAAgB,CAAC,CAAC;AAAA,MAC5F;AAAA,IACF,CAAC,GAAgB,uCAAAD,MAAM,kBAAM;AAAA,MAC3B,KAAK;AAAA,MACL,WAAW;AAAA,MACX,UAAU,CAAc,uCAAAH,KAAK,oDAAe;AAAA,QAC1C,UAAuB,uCAAAA,KAAK,oBAAoB;AAAA,UAC9C;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH,CAAC,GAAgB,uCAAAA,KAAK,uDAAkB;AAAA,QACtC,UAAU,YAAY,SAAS,qBAAkC,uCAAAA,KAAK,qBAAqB;AAAA,UACzF;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,iCAAQ;",
   "names": ["_jsx", "AnglePickerControl", "SelectControl", "_jsxs", "CustomGradientBar"]
 }

package/build/focal-point-picker/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focal-point-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\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 * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-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.5,\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\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ 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<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,kBAAmB;AACnB,qBAA4C;AAC5C,qBAAoF;AAKpF,sBAAqB;AACrB,yBAAuB;AACvB,kBAAiB;AACjB,mBAAkB;AAClB,sCAAwD;AACxD,mBAA+B;AAC/B,mBAAgC;AAChC,iCAAwC;AACxC,6BAA+B;AAC/B,yBAA2C;AAC3C,IAAM,uBAAuB;AA+CtB,SAAS,iBAAiB;AAAA;AAAA,EAE/B,yBAAyB;AAAA,EACzB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,CAAC,OAAO,QAAQ,QAAI,yBAAS,SAAS;AAC5C,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS,KAAK;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,eAAAA,2BAAY;AAAA,IACd,aAAa,WAAS;AACpB,kBAAY,SAAS,MAAM;AAC3B,YAAM,QAAQ,uBAAuB,KAAK;AAI1C,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,oBAAc,OAAO,KAAK;AAC1B,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,YAAY,WAAS;AAEnB,YAAM,eAAe;AACrB,YAAM,QAAQ,uBAAuB,KAAK;AAC1C,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,eAAS,OAAO,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,WAAW,MAAM;AACf,kBAAY;AACZ,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AAGD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,aAAa,QAAQ;AACzB,QAAM,kBAAc,uBAAO,IAAI;AAC/B,QAAM,CAAC,QAAQ,SAAS,QAAI,yBAAS,2BAAc;AACnD,QAAM,sBAAkB,uBAAO,MAAM;AACnC,QAAI,CAAC,YAAY,SAAS;AACxB;AAAA,IACF;AACA,UAAM;AAAA,MACJ,aAAa;AAAA,MACb,cAAc;AAAA,IAChB,IAAI,YAAY;AAIhB,cAAU,QAAQ,KAAK,SAAS,IAAI;AAAA,MAClC;AAAA,MACA;AAAA,IACF,IAAI;AAAA,MACF,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACD,gCAAU,MAAM;AACd,UAAM,eAAe,gBAAgB;AACrC,QAAI,CAAC,YAAY,SAAS;AACxB;AAAA,IACF;AACA,UAAM;AAAA,MACJ;AAAA,IACF,IAAI,YAAY,QAAQ;AACxB,iBAAa,iBAAiB,UAAU,YAAY;AACpD,WAAO,MAAM,aAAa,oBAAoB,UAAU,YAAY;AAAA,EACtE,GAAG,CAAC,CAAC;AAGL,gDAA0B,MAAM,KAAK,gBAAgB,QAAQ,GAAG,CAAC,CAAC;AAIlE,QAAM,yBAAyB,CAAC;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,QAAI,CAAC,YAAY,SAAS;AACxB;AAAA,IACF;AACA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IACF,IAAI,YAAY,QAAQ,sBAAsB;AAC9C,QAAI,SAAS,UAAU,QAAQ,OAAO;AACtC,QAAI,SAAS,UAAU,OAAO,OAAO;AAErC,QAAI,UAAU;AACZ,cAAQ,KAAK,MAAM,QAAQ,GAAG,IAAI;AAClC,cAAQ,KAAK,MAAM,QAAQ,GAAG,IAAI;AAAA,IACpC;AACA,WAAO,cAAc;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,QAAM,gBAAgB,WAAS;AAC7B,UAAM,gBAAgB,eAAe,KAAK,KAAK;AAC/C,kBAAc,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,GAAG,CAAC,CAAC;AAC1D,kBAAc,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,GAAG,CAAC,CAAC;AAC1D,UAAM,0BAA0B,OAAK,KAAK,MAAM,IAAI,GAAG,IAAI;AAC3D,WAAO;AAAA,MACL,GAAG,wBAAwB,cAAc,CAAC;AAAA,MAC1C,GAAG,wBAAwB,cAAc,CAAC;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,eAAe,WAAS;AAC5B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IACF,IAAI;AACJ,QAAI,CAAC,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,IAAI,GAAG;AACvE;AAAA,IACF;AACA,UAAM,eAAe;AACrB,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,WAAW,MAAM;AAC9B,UAAM,QAAQ,SAAS,aAAa,SAAS,cAAc,KAAK,OAAO;AACvE,UAAM,OAAO,SAAS,aAAa,SAAS,cAAc,MAAM;AAChE,UAAM,IAAI,IAAI,MAAM,IAAI,IAAI;AAC5B,eAAW,cAAc,KAAK,CAAC;AAAA,EACjC;AACA,QAAM,qBAAqB;AAAA,IACzB,MAAM,MAAM,SAAY,IAAI,OAAO,QAAQ,MAAM,OAAO;AAAA,IACxD,KAAK,MAAM,SAAY,IAAI,OAAO,SAAS,MAAM,OAAO;AAAA,EAC1D;AACA,QAAM,cAAU,YAAAC,SAAK,yCAAyC,SAAS;AACvE,QAAM,QAAQ,sBAAsB,wCAAiB;AACrD,oCAAgB,MAAM;AACpB,uBAAmB,IAAI;AACvB,UAAM,UAAU,OAAO,WAAW,MAAM;AACtC,yBAAmB,KAAK;AAAA,IAC1B,GAAG,oBAAoB;AACvB,WAAO,MAAM,OAAO,aAAa,OAAO;AAAA,EAC1C,GAAG,CAAC,GAAG,CAAC,CAAC;AACT,SAAoB,uCAAAC,MAAM,2CAAW;AAAA,IACnC,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,UAAU,CAAC,CAAC,CAAC,SAAsB,uCAAAC,KAAK,OAAO;AAAA,MAC7C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,uCAAAA,KAAK,8CAAc;AAAA,MAClC,WAAW;AAAA,MACX,UAAuB,uCAAAD,MAAM,gDAAgB;AAAA,QAC3C,WAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QACb,QAAQ,MAAM;AACZ,cAAI,YAAY;AACd,oBAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAU,CAAc,uCAAAC,KAAK,YAAAC,SAAM;AAAA,UACjC;AAAA,UACA,aAAa;AAAA,QACf,CAAC,GAAgB,uCAAAD,KAAK,aAAAE,SAAO;AAAA,UAC3B,SAAK,gBAAG,eAAe;AAAA,UACvB;AAAA,UACA,QAAQ,gBAAgB;AAAA,UACxB,KAAK;AAAA,QACP,CAAC,GAAgB,uCAAAF,KAAK,mBAAAG,SAAY;AAAA,UAChC,GAAG;AAAA,UACH;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAH,KAAK,gBAAAI,SAAU;AAAA,MAC9B,aAAa,CAAC,CAAC;AAAA,MACf,OAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA,MACA,UAAU,WAAS;AACjB,mBAAW,cAAc,KAAK,CAAC;AAAA,MACjC;AAAA,IACF,CAAC,GAAG,CAAC,CAAC,QAAqB,uCAAAJ,KAAK,uCAAY;AAAA,MAC1C,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,6BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\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  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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",
   "names": ["useDragging", "clsx", "_jsxs", "_jsx", "Grid", "Media", "FocalPoint", "Controls"]
 }

package/build/modal/index.cjs

@@ -146,7 +146,6 @@ function UnforwardedModal(props, forwardedRef) {
   const {
     closeModal,
     frameRef,
-    frameStyle,
     overlayClassname
   } = (0, import_use_modal_exit_animation.useModalExitAnimation)();
   (0, import_element.useLayoutEffect)(() => {
@@ -210,10 +209,7 @@ function UnforwardedModal(props, forwardedRef) {
         document,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
           className: (0, import_clsx.default)("components-modal__frame", sizeClass, className),
-          style: {
-            ...frameStyle,
-            ...style
-          },
+          style,
           ref: (0, import_compose.useMergeRefs)([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== "firstContentElement" ? focusOnMountRef : null]),
           role,
           "aria-label": contentLabel,

package/build/modal/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/modal/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect, useContext } from '@wordpress/element';\nimport { useInstanceId, useFocusReturn, useFocusOnMount, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { Spacer } from '../spacer';\nimport { useModalExitAnimation } from './use-modal-exit-animation';\nimport { ModalContext } from './context';\n\n// Used to track body class names applied while modals are open.\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst bodyOpenClasses = new Map();\nfunction UnforwardedModal(props, forwardedRef) {\n  const {\n    bodyOpenClassName = 'modal-open',\n    role = 'dialog',\n    title = null,\n    focusOnMount = true,\n    shouldCloseOnEsc = true,\n    shouldCloseOnClickOutside = true,\n    isDismissible = true,\n    /* Accessibility. */\n    aria = {\n      labelledby: undefined,\n      describedby: undefined\n    },\n    onRequestClose,\n    icon,\n    closeButtonLabel,\n    children,\n    style,\n    overlayClassName: overlayClassnameProp,\n    className,\n    contentLabel,\n    onKeyDown,\n    isFullScreen = false,\n    size,\n    headerActions = null,\n    __experimentalHideHeader = false\n  } = props;\n  const ref = useRef(null);\n  const instanceId = useInstanceId(Modal);\n  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;\n\n  // The focus hook does not support 'firstContentElement' but this is a valid\n  // value for the Modal's focusOnMount prop. The following code ensures the focus\n  // hook will focus the first focusable node within the element to which it is applied.\n  // When `firstContentElement` is passed as the value of the focusOnMount prop,\n  // the focus hook is applied to the Modal's content element.\n  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n  // focus hook will focus the first element in the Modal's **content** when\n  // `firstContentElement` is passed.\n  const focusOnMountRef = useFocusOnMount(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);\n  const constrainedTabbingRef = useConstrainedTabbing();\n  const focusReturnRef = useFocusReturn();\n  const contentRef = useRef(null);\n  const childrenContainerRef = useRef(null);\n  const [hasScrolledContent, setHasScrolledContent] = useState(false);\n  const [hasScrollableContent, setHasScrollableContent] = useState(false);\n  let sizeClass;\n  if (isFullScreen || size === 'fill') {\n    sizeClass = 'is-full-screen';\n  } else if (size) {\n    sizeClass = `has-size-${size}`;\n  }\n\n  // Determines whether the Modal content is scrollable and updates the state.\n  const isContentScrollable = useCallback(() => {\n    if (!contentRef.current) {\n      return;\n    }\n    const closestScrollContainer = getScrollContainer(contentRef.current);\n    if (contentRef.current === closestScrollContainer) {\n      setHasScrollableContent(true);\n    } else {\n      setHasScrollableContent(false);\n    }\n  }, [contentRef]);\n\n  // Accessibly isolates/unisolates the modal.\n  useEffect(() => {\n    ariaHelper.modalize(ref.current);\n    return () => ariaHelper.unmodalize();\n  }, []);\n\n  // Keeps a fresh ref for the subsequent effect.\n  const onRequestCloseRef = useRef(undefined);\n  useEffect(() => {\n    // eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196\n    onRequestCloseRef.current = onRequestClose;\n  }, [onRequestClose]);\n\n  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n  // one should remain open at a time and the list enables closing prior ones.\n  const dismissers = useContext(ModalContext);\n  // Used for the tracking and dismissing any nested modals.\n  const [nestedDismissers] = useState(() => new Set());\n\n  // Updates the stack tracking open modals at this level and calls\n  // onRequestClose for any prior and/or nested modals as applicable.\n  useEffect(() => {\n    // add this modal instance to the dismissers set\n    dismissers.add(onRequestCloseRef);\n    // request that all the other modals close themselves\n    for (const dismisser of dismissers) {\n      if (dismisser !== onRequestCloseRef) {\n        dismisser.current?.();\n      }\n    }\n    return () => {\n      // request that all the nested modals close themselves\n      for (const dismisser of nestedDismissers) {\n        dismisser.current?.();\n      }\n      // remove this modal instance from the dismissers set\n      dismissers.delete(onRequestCloseRef);\n    };\n  }, [dismissers, nestedDismissers]);\n\n  // Adds/removes the value of bodyOpenClassName to body element.\n  useEffect(() => {\n    const theClass = bodyOpenClassName;\n    const oneMore = 1 + (bodyOpenClasses.get(theClass) ?? 0);\n    bodyOpenClasses.set(theClass, oneMore);\n    document.body.classList.add(bodyOpenClassName);\n    return () => {\n      const oneLess = bodyOpenClasses.get(theClass) - 1;\n      if (oneLess === 0) {\n        document.body.classList.remove(theClass);\n        bodyOpenClasses.delete(theClass);\n      } else {\n        bodyOpenClasses.set(theClass, oneLess);\n      }\n    };\n  }, [bodyOpenClassName]);\n  const {\n    closeModal,\n    frameRef,\n    frameStyle,\n    overlayClassname\n  } = useModalExitAnimation();\n\n  // Calls the isContentScrollable callback when the Modal children container resizes.\n  useLayoutEffect(() => {\n    if (!window.ResizeObserver || !childrenContainerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(isContentScrollable);\n    resizeObserver.observe(childrenContainerRef.current);\n    isContentScrollable();\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [isContentScrollable, childrenContainerRef]);\n  function handleEscapeKeyDown(event) {\n    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {\n      event.preventDefault();\n      closeModal().then(() => onRequestClose(event));\n    }\n  }\n  const onContentContainerScroll = useCallback(e => {\n    const scrollY = e?.currentTarget?.scrollTop ?? -1;\n    if (!hasScrolledContent && scrollY > 0) {\n      setHasScrolledContent(true);\n    } else if (hasScrolledContent && scrollY <= 0) {\n      setHasScrolledContent(false);\n    }\n  }, [hasScrolledContent]);\n  let pressTarget = null;\n  const overlayPressHandlers = {\n    onPointerDown: event => {\n      if (event.target === event.currentTarget) {\n        pressTarget = event.target;\n        // Avoids focus changing so that focus return works as expected.\n        event.preventDefault();\n      }\n    },\n    // Closes the modal with two exceptions. 1. Opening the context menu on\n    // the overlay. 2. Pressing on the overlay then dragging the pointer\n    // over the modal and releasing. Due to the modal being a child of the\n    // overlay, such a gesture is a `click` on the overlay and cannot be\n    // excepted by a `click` handler. Thus the tactic of handling\n    // `pointerup` and comparing its target to that of the `pointerdown`.\n    onPointerUp: ({\n      target,\n      button\n    }) => {\n      const isSameTarget = target === pressTarget;\n      pressTarget = null;\n      if (button === 0 && isSameTarget) {\n        closeModal().then(() => onRequestClose());\n      }\n    }\n  };\n  const modal =\n  /*#__PURE__*/\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  _jsx(\"div\", {\n    ref: useMergeRefs([ref, forwardedRef]),\n    className: clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),\n    onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),\n    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),\n    children: /*#__PURE__*/_jsx(StyleProvider, {\n      document: document,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: clsx('components-modal__frame', sizeClass, className),\n        style: {\n          ...frameStyle,\n          ...style\n        },\n        ref: useMergeRefs([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),\n        role: role,\n        \"aria-label\": contentLabel,\n        \"aria-labelledby\": contentLabel ? undefined : headingId,\n        \"aria-describedby\": aria.describedby,\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: /*#__PURE__*/_jsxs(\"div\", {\n          className: clsx('components-modal__content', {\n            'hide-header': __experimentalHideHeader,\n            'is-scrollable': hasScrollableContent,\n            'has-scrolled-content': hasScrolledContent\n          }),\n          role: \"document\",\n          onScroll: onContentContainerScroll,\n          ref: contentRef,\n          \"aria-label\": hasScrollableContent ? __('Scrollable section') : undefined,\n          tabIndex: hasScrollableContent ? 0 : undefined,\n          children: [!__experimentalHideHeader && /*#__PURE__*/_jsxs(\"div\", {\n            className: \"components-modal__header\",\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: \"components-modal__header-heading-container\",\n              children: [icon && /*#__PURE__*/_jsx(\"span\", {\n                className: \"components-modal__icon-container\",\n                \"aria-hidden\": true,\n                children: icon\n              }), title && /*#__PURE__*/_jsx(\"h1\", {\n                id: headingId,\n                className: \"components-modal__header-heading\",\n                children: title\n              })]\n            }), headerActions, isDismissible && /*#__PURE__*/_jsxs(_Fragment, {\n              children: [/*#__PURE__*/_jsx(Spacer, {\n                marginBottom: 0,\n                marginLeft: 2\n              }), /*#__PURE__*/_jsx(Button, {\n                size: \"compact\",\n                onClick: event => closeModal().then(() => onRequestClose(event)),\n                icon: close,\n                label: closeButtonLabel || __('Close')\n              })]\n            })]\n          }), /*#__PURE__*/_jsx(\"div\", {\n            ref: useMergeRefs([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),\n            className: \"components-modal__children-container\",\n            children: children\n          })]\n        })\n      })\n    })\n  });\n  return createPortal(/*#__PURE__*/_jsx(ModalContext.Provider, {\n    value: nestedDismissers,\n    children: modal\n  }), document.body);\n}\n\n/**\n * Modals give users information and choices related to a task they\u2019re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef(UnforwardedModal);\nModal.displayName = 'Modal';\nexport default Modal;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect, useContext } from '@wordpress/element';\nimport { useInstanceId, useFocusReturn, useFocusOnMount, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { Spacer } from '../spacer';\nimport { useModalExitAnimation } from './use-modal-exit-animation';\nimport { ModalContext } from './context';\n\n// Used to track body class names applied while modals are open.\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst bodyOpenClasses = new Map();\nfunction UnforwardedModal(props, forwardedRef) {\n  const {\n    bodyOpenClassName = 'modal-open',\n    role = 'dialog',\n    title = null,\n    focusOnMount = true,\n    shouldCloseOnEsc = true,\n    shouldCloseOnClickOutside = true,\n    isDismissible = true,\n    /* Accessibility. */\n    aria = {\n      labelledby: undefined,\n      describedby: undefined\n    },\n    onRequestClose,\n    icon,\n    closeButtonLabel,\n    children,\n    style,\n    overlayClassName: overlayClassnameProp,\n    className,\n    contentLabel,\n    onKeyDown,\n    isFullScreen = false,\n    size,\n    headerActions = null,\n    __experimentalHideHeader = false\n  } = props;\n  const ref = useRef(null);\n  const instanceId = useInstanceId(Modal);\n  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;\n\n  // The focus hook does not support 'firstContentElement' but this is a valid\n  // value for the Modal's focusOnMount prop. The following code ensures the focus\n  // hook will focus the first focusable node within the element to which it is applied.\n  // When `firstContentElement` is passed as the value of the focusOnMount prop,\n  // the focus hook is applied to the Modal's content element.\n  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n  // focus hook will focus the first element in the Modal's **content** when\n  // `firstContentElement` is passed.\n  const focusOnMountRef = useFocusOnMount(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);\n  const constrainedTabbingRef = useConstrainedTabbing();\n  const focusReturnRef = useFocusReturn();\n  const contentRef = useRef(null);\n  const childrenContainerRef = useRef(null);\n  const [hasScrolledContent, setHasScrolledContent] = useState(false);\n  const [hasScrollableContent, setHasScrollableContent] = useState(false);\n  let sizeClass;\n  if (isFullScreen || size === 'fill') {\n    sizeClass = 'is-full-screen';\n  } else if (size) {\n    sizeClass = `has-size-${size}`;\n  }\n\n  // Determines whether the Modal content is scrollable and updates the state.\n  const isContentScrollable = useCallback(() => {\n    if (!contentRef.current) {\n      return;\n    }\n    const closestScrollContainer = getScrollContainer(contentRef.current);\n    if (contentRef.current === closestScrollContainer) {\n      setHasScrollableContent(true);\n    } else {\n      setHasScrollableContent(false);\n    }\n  }, [contentRef]);\n\n  // Accessibly isolates/unisolates the modal.\n  useEffect(() => {\n    ariaHelper.modalize(ref.current);\n    return () => ariaHelper.unmodalize();\n  }, []);\n\n  // Keeps a fresh ref for the subsequent effect.\n  const onRequestCloseRef = useRef(undefined);\n  useEffect(() => {\n    onRequestCloseRef.current = onRequestClose;\n  }, [onRequestClose]);\n\n  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n  // one should remain open at a time and the list enables closing prior ones.\n  const dismissers = useContext(ModalContext);\n  // Used for the tracking and dismissing any nested modals.\n  const [nestedDismissers] = useState(() => new Set());\n\n  // Updates the stack tracking open modals at this level and calls\n  // onRequestClose for any prior and/or nested modals as applicable.\n  useEffect(() => {\n    // add this modal instance to the dismissers set\n    dismissers.add(onRequestCloseRef);\n    // request that all the other modals close themselves\n    for (const dismisser of dismissers) {\n      if (dismisser !== onRequestCloseRef) {\n        dismisser.current?.();\n      }\n    }\n    return () => {\n      // request that all the nested modals close themselves\n      for (const dismisser of nestedDismissers) {\n        dismisser.current?.();\n      }\n      // remove this modal instance from the dismissers set\n      dismissers.delete(onRequestCloseRef);\n    };\n  }, [dismissers, nestedDismissers]);\n\n  // Adds/removes the value of bodyOpenClassName to body element.\n  useEffect(() => {\n    const theClass = bodyOpenClassName;\n    const oneMore = 1 + (bodyOpenClasses.get(theClass) ?? 0);\n    bodyOpenClasses.set(theClass, oneMore);\n    document.body.classList.add(bodyOpenClassName);\n    return () => {\n      const oneLess = bodyOpenClasses.get(theClass) - 1;\n      if (oneLess === 0) {\n        document.body.classList.remove(theClass);\n        bodyOpenClasses.delete(theClass);\n      } else {\n        bodyOpenClasses.set(theClass, oneLess);\n      }\n    };\n  }, [bodyOpenClassName]);\n  const {\n    closeModal,\n    frameRef,\n    overlayClassname\n  } = useModalExitAnimation();\n\n  // Calls the isContentScrollable callback when the Modal children container resizes.\n  useLayoutEffect(() => {\n    if (!window.ResizeObserver || !childrenContainerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(isContentScrollable);\n    resizeObserver.observe(childrenContainerRef.current);\n    isContentScrollable();\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [isContentScrollable, childrenContainerRef]);\n  function handleEscapeKeyDown(event) {\n    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {\n      event.preventDefault();\n      closeModal().then(() => onRequestClose(event));\n    }\n  }\n  const onContentContainerScroll = useCallback(e => {\n    const scrollY = e?.currentTarget?.scrollTop ?? -1;\n    if (!hasScrolledContent && scrollY > 0) {\n      setHasScrolledContent(true);\n    } else if (hasScrolledContent && scrollY <= 0) {\n      setHasScrolledContent(false);\n    }\n  }, [hasScrolledContent]);\n  let pressTarget = null;\n  const overlayPressHandlers = {\n    onPointerDown: event => {\n      if (event.target === event.currentTarget) {\n        pressTarget = event.target;\n        // Avoids focus changing so that focus return works as expected.\n        event.preventDefault();\n      }\n    },\n    // Closes the modal with two exceptions. 1. Opening the context menu on\n    // the overlay. 2. Pressing on the overlay then dragging the pointer\n    // over the modal and releasing. Due to the modal being a child of the\n    // overlay, such a gesture is a `click` on the overlay and cannot be\n    // excepted by a `click` handler. Thus the tactic of handling\n    // `pointerup` and comparing its target to that of the `pointerdown`.\n    onPointerUp: ({\n      target,\n      button\n    }) => {\n      const isSameTarget = target === pressTarget;\n      pressTarget = null;\n      if (button === 0 && isSameTarget) {\n        closeModal().then(() => onRequestClose());\n      }\n    }\n  };\n  const modal =\n  /*#__PURE__*/\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  _jsx(\"div\", {\n    ref: useMergeRefs([ref, forwardedRef]),\n    className: clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),\n    onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),\n    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),\n    children: /*#__PURE__*/_jsx(StyleProvider, {\n      document: document,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: clsx('components-modal__frame', sizeClass, className),\n        style: style,\n        ref: useMergeRefs([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),\n        role: role,\n        \"aria-label\": contentLabel,\n        \"aria-labelledby\": contentLabel ? undefined : headingId,\n        \"aria-describedby\": aria.describedby,\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: /*#__PURE__*/_jsxs(\"div\", {\n          className: clsx('components-modal__content', {\n            'hide-header': __experimentalHideHeader,\n            'is-scrollable': hasScrollableContent,\n            'has-scrolled-content': hasScrolledContent\n          }),\n          role: \"document\",\n          onScroll: onContentContainerScroll,\n          ref: contentRef,\n          \"aria-label\": hasScrollableContent ? __('Scrollable section') : undefined,\n          tabIndex: hasScrollableContent ? 0 : undefined,\n          children: [!__experimentalHideHeader && /*#__PURE__*/_jsxs(\"div\", {\n            className: \"components-modal__header\",\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: \"components-modal__header-heading-container\",\n              children: [icon && /*#__PURE__*/_jsx(\"span\", {\n                className: \"components-modal__icon-container\",\n                \"aria-hidden\": true,\n                children: icon\n              }), title && /*#__PURE__*/_jsx(\"h1\", {\n                id: headingId,\n                className: \"components-modal__header-heading\",\n                children: title\n              })]\n            }), headerActions, isDismissible && /*#__PURE__*/_jsxs(_Fragment, {\n              children: [/*#__PURE__*/_jsx(Spacer, {\n                marginBottom: 0,\n                marginLeft: 2\n              }), /*#__PURE__*/_jsx(Button, {\n                size: \"compact\",\n                onClick: event => closeModal().then(() => onRequestClose(event)),\n                icon: close,\n                label: closeButtonLabel || __('Close')\n              })]\n            })]\n          }), /*#__PURE__*/_jsx(\"div\", {\n            ref: useMergeRefs([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),\n            className: \"components-modal__children-container\",\n            children: children\n          })]\n        })\n      })\n    })\n  });\n  return createPortal(/*#__PURE__*/_jsx(ModalContext.Provider, {\n    value: nestedDismissers,\n    children: modal\n  }), document.body);\n}\n\n/**\n * Modals give users information and choices related to a task they\u2019re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef(UnforwardedModal);\nModal.displayName = 'Modal';\nexport default Modal;"],
+  "mappings": "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",
   "names": ["_jsx", "clsx", "StyleProvider", "_jsxs", "_Fragment", "Button"]
 }

package/build/modal/use-modal-exit-animation.cjs

@@ -37,57 +37,68 @@ var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
 var import_warning = __toESM(require("@wordpress/warning"));
 var import_utils = require("../utils/index.cjs");
-var FRAME_ANIMATION_DURATION = import_utils.CONFIG.transitionDuration;
-var FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(import_utils.CONFIG.transitionDuration);
+var FRAME_ANIMATION_DURATION_MS = Number.parseInt(
+  import_utils.CONFIG.transitionDuration
+);
 var EXIT_ANIMATION_NAME = "components-modal__disappear-animation";
 function useModalExitAnimation() {
   const frameRef = (0, import_element.useRef)(null);
   const [isAnimatingOut, setIsAnimatingOut] = (0, import_element.useState)(false);
   const isReducedMotion = (0, import_compose.useReducedMotion)();
-  const closeModal = (0, import_element.useCallback)(() => new Promise((closeModalResolve) => {
-    const frameEl = frameRef.current;
-    if (isReducedMotion) {
-      closeModalResolve();
-      return;
-    }
-    if (!frameEl) {
-      globalThis.SCRIPT_DEBUG === true ? (0, import_warning.default)("wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element.") : void 0;
-      closeModalResolve();
-      return;
-    }
-    let handleAnimationEnd;
-    const startAnimation = () => new Promise((animationResolve) => {
-      handleAnimationEnd = (e) => {
-        if (e.animationName === EXIT_ANIMATION_NAME) {
-          animationResolve();
+  const closeModal = (0, import_element.useCallback)(
+    () => new Promise((closeModalResolve) => {
+      const frameEl = frameRef.current;
+      if (isReducedMotion) {
+        closeModalResolve();
+        return;
+      }
+      if (!frameEl) {
+        (0, import_warning.default)(
+          "wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element."
+        );
+        closeModalResolve();
+        return;
+      }
+      let handleAnimationEnd;
+      const startAnimation = () => new Promise((animationResolve) => {
+        handleAnimationEnd = (e) => {
+          if (e.animationName === EXIT_ANIMATION_NAME) {
+            animationResolve();
+          }
+        };
+        frameEl.addEventListener(
+          "animationend",
+          handleAnimationEnd
+        );
+        setIsAnimatingOut(true);
+      });
+      const animationTimeout = () => new Promise((timeoutResolve) => {
+        setTimeout(
+          () => timeoutResolve(),
+          // Allow an extra 20% of the animation duration for the
+          // animationend event to fire, in case the animation frame is
+          // slightly delayes by some other events in the event loop.
+          FRAME_ANIMATION_DURATION_MS * 1.2
+        );
+      });
+      Promise.race([startAnimation(), animationTimeout()]).then(
+        () => {
+          if (handleAnimationEnd) {
+            frameEl.removeEventListener(
+              "animationend",
+              handleAnimationEnd
+            );
+          }
+          setIsAnimatingOut(false);
+          closeModalResolve();
         }
-      };
-      frameEl.addEventListener("animationend", handleAnimationEnd);
-      setIsAnimatingOut(true);
-    });
-    const animationTimeout = () => new Promise((timeoutResolve) => {
-      setTimeout(
-        () => timeoutResolve(),
-        // Allow an extra 20% of the animation duration for the
-        // animationend event to fire, in case the animation frame is
-        // slightly delayes by some other events in the event loop.
-        FRAME_ANIMATION_DURATION_NUMBER * 1.2
       );
-    });
-    Promise.race([startAnimation(), animationTimeout()]).then(() => {
-      if (handleAnimationEnd) {
-        frameEl.removeEventListener("animationend", handleAnimationEnd);
-      }
-      setIsAnimatingOut(false);
-      closeModalResolve();
-    });
-  }), [isReducedMotion]);
+    }),
+    [isReducedMotion]
+  );
   return {
     overlayClassname: isAnimatingOut ? "is-animating-out" : void 0,
     frameRef,
-    frameStyle: {
-      "--modal-frame-animation-duration": `${FRAME_ANIMATION_DURATION}`
-    },
     closeModal
   };
 }

package/build/modal/use-modal-exit-animation.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/modal/use-modal-exit-animation.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useCallback, useRef, useState } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG } from '../utils';\n\n// Animation duration (ms) extracted to JS in order to be used on a setTimeout.\nconst FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;\nconst FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(CONFIG.transitionDuration);\nconst EXIT_ANIMATION_NAME = 'components-modal__disappear-animation';\nexport function useModalExitAnimation() {\n  const frameRef = useRef(null);\n  const [isAnimatingOut, setIsAnimatingOut] = useState(false);\n  const isReducedMotion = useReducedMotion();\n  const closeModal = useCallback(() => new Promise(closeModalResolve => {\n    // Grab a \"stable\" reference of the frame element, since\n    // the value held by the react ref might change at runtime.\n    const frameEl = frameRef.current;\n    if (isReducedMotion) {\n      closeModalResolve();\n      return;\n    }\n    if (!frameEl) {\n      globalThis.SCRIPT_DEBUG === true ? warning(\"wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element.\") : void 0;\n      closeModalResolve();\n      return;\n    }\n    let handleAnimationEnd;\n    const startAnimation = () => new Promise(animationResolve => {\n      handleAnimationEnd = e => {\n        if (e.animationName === EXIT_ANIMATION_NAME) {\n          animationResolve();\n        }\n      };\n      frameEl.addEventListener('animationend', handleAnimationEnd);\n      setIsAnimatingOut(true);\n    });\n    const animationTimeout = () => new Promise(timeoutResolve => {\n      setTimeout(() => timeoutResolve(),\n      // Allow an extra 20% of the animation duration for the\n      // animationend event to fire, in case the animation frame is\n      // slightly delayes by some other events in the event loop.\n      FRAME_ANIMATION_DURATION_NUMBER * 1.2);\n    });\n    Promise.race([startAnimation(), animationTimeout()]).then(() => {\n      if (handleAnimationEnd) {\n        frameEl.removeEventListener('animationend', handleAnimationEnd);\n      }\n      setIsAnimatingOut(false);\n      closeModalResolve();\n    });\n  }), [isReducedMotion]);\n  return {\n    overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,\n    frameRef,\n    frameStyle: {\n      '--modal-frame-animation-duration': `${FRAME_ANIMATION_DURATION}`\n    },\n    closeModal\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AACjC,qBAA8C;AAC9C,qBAAoB;AAKpB,mBAAuB;AAGvB,IAAM,2BAA2B,oBAAO;AACxC,IAAM,kCAAkC,OAAO,SAAS,oBAAO,kBAAkB;AACjF,IAAM,sBAAsB;AACrB,SAAS,wBAAwB;AACtC,QAAM,eAAW,uBAAO,IAAI;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS,KAAK;AAC1D,QAAM,sBAAkB,iCAAiB;AACzC,QAAM,iBAAa,4BAAY,MAAM,IAAI,QAAQ,uBAAqB;AAGpE,UAAM,UAAU,SAAS;AACzB,QAAI,iBAAiB;AACnB,wBAAkB;AAClB;AAAA,IACF;AACA,QAAI,CAAC,SAAS;AACZ,iBAAW,iBAAiB,WAAO,eAAAA,SAAQ,4IAA4I,IAAI;AAC3L,wBAAkB;AAClB;AAAA,IACF;AACA,QAAI;AACJ,UAAM,iBAAiB,MAAM,IAAI,QAAQ,sBAAoB;AAC3D,2BAAqB,OAAK;AACxB,YAAI,EAAE,kBAAkB,qBAAqB;AAC3C,2BAAiB;AAAA,QACnB;AAAA,MACF;AACA,cAAQ,iBAAiB,gBAAgB,kBAAkB;AAC3D,wBAAkB,IAAI;AAAA,IACxB,CAAC;AACD,UAAM,mBAAmB,MAAM,IAAI,QAAQ,oBAAkB;AAC3D;AAAA,QAAW,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,QAIhC,kCAAkC;AAAA,MAAG;AAAA,IACvC,CAAC;AACD,YAAQ,KAAK,CAAC,eAAe,GAAG,iBAAiB,CAAC,CAAC,EAAE,KAAK,MAAM;AAC9D,UAAI,oBAAoB;AACtB,gBAAQ,oBAAoB,gBAAgB,kBAAkB;AAAA,MAChE;AACA,wBAAkB,KAAK;AACvB,wBAAkB;AAAA,IACpB,CAAC;AAAA,EACH,CAAC,GAAG,CAAC,eAAe,CAAC;AACrB,SAAO;AAAA,IACL,kBAAkB,iBAAiB,qBAAqB;AAAA,IACxD;AAAA,IACA,YAAY;AAAA,MACV,oCAAoC,GAAG,wBAAwB;AAAA,IACjE;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useCallback, useRef, useState } from '@wordpress/element';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG } from '../utils';\n\n/**\n * Milliseconds used as a fallback when racing `animationend` against a timeout.\n *\n * Sourced from `CONFIG.transitionDuration`. This value is implicitly coupled to\n * the modal frame\u2019s CSS `animation-duration` in `style.scss`, which uses\n * `var(--wpds-motion-duration-md, 200ms)`. If either the token, the SCSS, or\n * `CONFIG.transitionDuration` changes, keep them aligned so exit timing stays correct.\n */\nconst FRAME_ANIMATION_DURATION_MS = Number.parseInt(\n\tCONFIG.transitionDuration\n);\n\nconst EXIT_ANIMATION_NAME = 'components-modal__disappear-animation';\n\nexport function useModalExitAnimation() {\n\tconst frameRef = useRef< HTMLDivElement >( null );\n\tconst [ isAnimatingOut, setIsAnimatingOut ] = useState( false );\n\tconst isReducedMotion = useReducedMotion();\n\n\tconst closeModal = useCallback(\n\t\t() =>\n\t\t\tnew Promise< void >( ( closeModalResolve ) => {\n\t\t\t\t// Grab a \"stable\" reference of the frame element, since\n\t\t\t\t// the value held by the react ref might change at runtime.\n\t\t\t\tconst frameEl = frameRef.current;\n\n\t\t\t\tif ( isReducedMotion ) {\n\t\t\t\t\tcloseModalResolve();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( ! frameEl ) {\n\t\t\t\t\twarning(\n\t\t\t\t\t\t\"wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element.\"\n\t\t\t\t\t);\n\t\t\t\t\tcloseModalResolve();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet handleAnimationEnd:\n\t\t\t\t\t| undefined\n\t\t\t\t\t| ( ( e: AnimationEvent ) => void );\n\n\t\t\t\tconst startAnimation = () =>\n\t\t\t\t\tnew Promise< void >( ( animationResolve ) => {\n\t\t\t\t\t\thandleAnimationEnd = ( e: AnimationEvent ) => {\n\t\t\t\t\t\t\tif ( e.animationName === EXIT_ANIMATION_NAME ) {\n\t\t\t\t\t\t\t\tanimationResolve();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tframeEl.addEventListener(\n\t\t\t\t\t\t\t'animationend',\n\t\t\t\t\t\t\thandleAnimationEnd\n\t\t\t\t\t\t);\n\t\t\t\t\t\tsetIsAnimatingOut( true );\n\t\t\t\t\t} );\n\t\t\t\tconst animationTimeout = () =>\n\t\t\t\t\tnew Promise< void >( ( timeoutResolve ) => {\n\t\t\t\t\t\tsetTimeout(\n\t\t\t\t\t\t\t() => timeoutResolve(),\n\t\t\t\t\t\t\t// Allow an extra 20% of the animation duration for the\n\t\t\t\t\t\t\t// animationend event to fire, in case the animation frame is\n\t\t\t\t\t\t\t// slightly delayes by some other events in the event loop.\n\t\t\t\t\t\t\tFRAME_ANIMATION_DURATION_MS * 1.2\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\n\t\t\t\tPromise.race( [ startAnimation(), animationTimeout() ] ).then(\n\t\t\t\t\t() => {\n\t\t\t\t\t\tif ( handleAnimationEnd ) {\n\t\t\t\t\t\t\tframeEl.removeEventListener(\n\t\t\t\t\t\t\t\t'animationend',\n\t\t\t\t\t\t\t\thandleAnimationEnd\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsetIsAnimatingOut( false );\n\t\t\t\t\t\tcloseModalResolve();\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ isReducedMotion ]\n\t);\n\n\treturn {\n\t\toverlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,\n\t\tframeRef,\n\t\tcloseModal,\n\t};\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AACjC,qBAA8C;AAC9C,qBAAoB;AAKpB,mBAAuB;AAUvB,IAAM,8BAA8B,OAAO;AAAA,EAC1C,oBAAO;AACR;AAEA,IAAM,sBAAsB;AAErB,SAAS,wBAAwB;AACvC,QAAM,eAAW,uBAA0B,IAAK;AAChD,QAAM,CAAE,gBAAgB,iBAAkB,QAAI,yBAAU,KAAM;AAC9D,QAAM,sBAAkB,iCAAiB;AAEzC,QAAM,iBAAa;AAAA,IAClB,MACC,IAAI,QAAiB,CAAE,sBAAuB;AAG7C,YAAM,UAAU,SAAS;AAEzB,UAAK,iBAAkB;AACtB,0BAAkB;AAClB;AAAA,MACD;AAEA,UAAK,CAAE,SAAU;AAChB,2BAAAA;AAAA,UACC;AAAA,QACD;AACA,0BAAkB;AAClB;AAAA,MACD;AAEA,UAAI;AAIJ,YAAM,iBAAiB,MACtB,IAAI,QAAiB,CAAE,qBAAsB;AAC5C,6BAAqB,CAAE,MAAuB;AAC7C,cAAK,EAAE,kBAAkB,qBAAsB;AAC9C,6BAAiB;AAAA,UAClB;AAAA,QACD;AAEA,gBAAQ;AAAA,UACP;AAAA,UACA;AAAA,QACD;AACA,0BAAmB,IAAK;AAAA,MACzB,CAAE;AACH,YAAM,mBAAmB,MACxB,IAAI,QAAiB,CAAE,mBAAoB;AAC1C;AAAA,UACC,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,UAIrB,8BAA8B;AAAA,QAC/B;AAAA,MACD,CAAE;AAEH,cAAQ,KAAM,CAAE,eAAe,GAAG,iBAAiB,CAAE,CAAE,EAAE;AAAA,QACxD,MAAM;AACL,cAAK,oBAAqB;AACzB,oBAAQ;AAAA,cACP;AAAA,cACA;AAAA,YACD;AAAA,UACD;AACA,4BAAmB,KAAM;AACzB,4BAAkB;AAAA,QACnB;AAAA,MACD;AAAA,IACD,CAAE;AAAA,IACH,CAAE,eAAgB;AAAA,EACnB;AAEA,SAAO;AAAA,IACN,kBAAkB,iBAAiB,qBAAqB;AAAA,IACxD;AAAA,IACA;AAAA,EACD;AACD;",
   "names": ["warning"]
 }