@wordpress/components 37.0.0 → 38.0.0

package/build/tools-panel/tools-panel-item/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/tools-panel/tools-panel-item/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerResetAllFilter,\n    deregisterResetAllFilter,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // hasValue is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // resetAllFilter is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);\n  const previousPanelId = usePrevious(currentPanelId);\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // Registering the panel item allows the panel to include it in its\n  // automatically generated menu and determine its initial checked status.\n  //\n  // This is performed in a layout effect to ensure that the panel item\n  // is registered before it is rendered preventing a rendering glitch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (hasMatchingPanel && previousPanelId !== null) {\n      registerPanelItem({\n        hasValue: hasValueCallback,\n        isShownByDefault,\n        label,\n        panelId\n      });\n    }\n    return () => {\n      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {\n        deregisterPanelItem(label);\n      }\n    };\n  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);\n  useEffect(() => {\n    if (hasMatchingPanel) {\n      registerResetAllFilter(resetAllFilterCallback);\n    }\n    return () => {\n      if (hasMatchingPanel) {\n        deregisterResetAllFilter(resetAllFilterCallback);\n      }\n    };\n  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);\n\n  // Note: `label` is used as a key when building menu item state in\n  // `ToolsPanel`.\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const wasMenuItemChecked = usePrevious(isMenuItemChecked);\n  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;\n  const isValueSet = hasValue();\n  // Notify the panel when an item's value has changed except for optional\n  // items without value because the item should not cause itself to hide.\n  useEffect(() => {\n    if (!isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label, menuGroup);\n  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);\n\n  // Determine if the panel item's corresponding menu is being toggled and\n  // trigger appropriate callback if it is.\n  useEffect(() => {\n    // We check whether this item is currently registered as items rendered\n    // via fills can persist through the parent panel being remounted.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);\n\n  // The item is shown if it is a default control regardless of whether it\n  // has a value. Optional items are shown when they are checked or have\n  // a value.\n  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;\n  const cx = useCx();\n  const classes = useMemo(() => {\n    const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n    const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass;\n    const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass;\n    return cx(styles.ToolsPanelItem, shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder, !shouldApplyPlaceholderStyles && className, firstItemStyle, lastItemStyle);\n  }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\n    className: classes\n  };\n}"],
-  "mappings": "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",
-  "names": ["import_context"]
+  "sources": ["../../../src/tools-panel/tools-panel-item/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/tools-panel/style.module.scss"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from '../style.module.scss';\nimport { useToolsPanelContext } from '../context';\nimport { useContextSystem } from '../../context';\nconst noop = () => {};\nexport function useToolsPanelItem(props) {\n  const {\n    className,\n    hasValue,\n    isShownByDefault = false,\n    label,\n    panelId,\n    resetAllFilter = noop,\n    onDeselect,\n    onSelect,\n    ...otherProps\n  } = useContextSystem(props, 'ToolsPanelItem');\n  const {\n    panelId: currentPanelId,\n    menuItems,\n    registerResetAllFilter,\n    deregisterResetAllFilter,\n    registerPanelItem,\n    deregisterPanelItem,\n    flagItemCustomization,\n    isResetting,\n    shouldRenderPlaceholderItems: shouldRenderPlaceholder,\n    firstDisplayedItem,\n    lastDisplayedItem,\n    __experimentalFirstVisibleItemClass,\n    __experimentalLastVisibleItemClass\n  } = useToolsPanelContext();\n\n  // hasValue is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const hasValueCallback = useCallback(hasValue, [panelId]);\n  // resetAllFilter is a new function on every render, so do not add it as a\n  // dependency to the useCallback hook! If needed, we should use a ref.\n  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);\n  const previousPanelId = usePrevious(currentPanelId);\n  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;\n\n  // Registering the panel item allows the panel to include it in its\n  // automatically generated menu and determine its initial checked status.\n  //\n  // This is performed in a layout effect to ensure that the panel item\n  // is registered before it is rendered preventing a rendering glitch.\n  // See: https://github.com/WordPress/gutenberg/issues/56470\n  useLayoutEffect(() => {\n    if (hasMatchingPanel && previousPanelId !== null) {\n      registerPanelItem({\n        hasValue: hasValueCallback,\n        isShownByDefault,\n        label,\n        panelId\n      });\n    }\n    return () => {\n      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {\n        deregisterPanelItem(label);\n      }\n    };\n  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);\n  useEffect(() => {\n    if (hasMatchingPanel) {\n      registerResetAllFilter(resetAllFilterCallback);\n    }\n    return () => {\n      if (hasMatchingPanel) {\n        deregisterResetAllFilter(resetAllFilterCallback);\n      }\n    };\n  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);\n\n  // Note: `label` is used as a key when building menu item state in\n  // `ToolsPanel`.\n  const menuGroup = isShownByDefault ? 'default' : 'optional';\n  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];\n  const wasMenuItemChecked = usePrevious(isMenuItemChecked);\n  const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined;\n  const isValueSet = hasValue();\n  // Notify the panel when an item's value has changed except for optional\n  // items without value because the item should not cause itself to hide.\n  useEffect(() => {\n    if (!isShownByDefault && !isValueSet) {\n      return;\n    }\n    flagItemCustomization(isValueSet, label, menuGroup);\n  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);\n\n  // Determine if the panel item's corresponding menu is being toggled and\n  // trigger appropriate callback if it is.\n  useEffect(() => {\n    // We check whether this item is currently registered as items rendered\n    // via fills can persist through the parent panel being remounted.\n    // See: https://github.com/WordPress/gutenberg/pull/45673\n    if (!isRegistered || isResetting || !hasMatchingPanel) {\n      return;\n    }\n    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {\n      onSelect?.();\n    }\n    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {\n      onDeselect?.();\n    }\n  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);\n\n  // The item is shown if it is a default control regardless of whether it\n  // has a value. Optional items are shown when they are checked or have\n  // a value.\n  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked;\n  const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;\n  const classes = clsx(styles['tools-panel-item'], shouldApplyPlaceholderStyles && styles['tools-panel-item-placeholder'], !shouldApplyPlaceholderStyles && className, firstDisplayedItem === label && __experimentalFirstVisibleItemClass, lastDisplayedItem === label && __experimentalLastVisibleItemClass);\n  return {\n    ...otherProps,\n    isShown,\n    shouldRenderPlaceholder,\n    className: classes\n  };\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"29b739f451\", \"._62d714739f4dc308__tools-panel{border-top:1px solid #ddd;margin-top:-1px;padding:16px}._40db7f4f897b683d__tools-panel-with-inner-wrapper>div:not(:first-of-type){column-gap:16px;display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}._95a15674966f30a3__tools-panel-hidden-inner-wrapper>div:not(:first-of-type){display:none}._322a049b9b7d8674__tools-panel-header{gap:8px;grid-column:1/-1}._322a049b9b7d8674__tools-panel-header .components-dropdown-menu{line-height:0;margin:-4px 0}._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header._322a049b9b7d8674__tools-panel-header .components-dropdown-menu__toggle{min-width:24px;padding:0}.b92a382d3b30104d__tools-panel-heading.b92a382d3b30104d__tools-panel-heading{font-size:inherit;line-height:normal;margin:0}._8005d68fffa9db91__tools-panel-item{grid-column:1/-1}._8005d68fffa9db91__tools-panel-item>div,._8005d68fffa9db91__tools-panel-item>fieldset{margin-bottom:0;max-width:100%;padding-bottom:0}._8005d68fffa9db91__tools-panel-item .components-base-control__help,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control,._8005d68fffa9db91__tools-panel-item._8005d68fffa9db91__tools-panel-item .components-base-control .components-base-control__field:last-child{margin-bottom:0}._4f55e1a6e373746e__tools-panel-item-placeholder{display:none}.d40032517bff9e12__dropdown-menu{min-width:200px}.f135b96aa96ca6bb__reset-label{color:var(--wp-components-color-accent-darker-10,var(--wp-admin-theme-color-darker-10,#2145e6));font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-emphasis,600);line-height:1.4;margin-inline-start:12px;text-transform:uppercase}._69b138dfa5570d9c__default-controls-item{color:#1e1e1e}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]{color:#757575;opacity:1}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true]:hover{color:#757575}._69b138dfa5570d9c__default-controls-item._69b138dfa5570d9c__default-controls-item[aria-disabled=true] .f135b96aa96ca6bb__reset-label{opacity:.3}\");\n}\nexport default {\"tools-panel\":\"_62d714739f4dc308__tools-panel\",\"tools-panel-with-inner-wrapper\":\"_40db7f4f897b683d__tools-panel-with-inner-wrapper\",\"tools-panel-hidden-inner-wrapper\":\"_95a15674966f30a3__tools-panel-hidden-inner-wrapper\",\"tools-panel-header\":\"_322a049b9b7d8674__tools-panel-header\",\"tools-panel-heading\":\"b92a382d3b30104d__tools-panel-heading\",\"tools-panel-item\":\"_8005d68fffa9db91__tools-panel-item\",\"tools-panel-item-placeholder\":\"_4f55e1a6e373746e__tools-panel-item-placeholder\",\"dropdown-menu\":\"d40032517bff9e12__dropdown-menu\",\"reset-label\":\"f135b96aa96ca6bb__reset-label\",\"default-controls-item\":\"_69b138dfa5570d9c__default-controls-item\"};\n"],
+  "mappings": "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",
+  "names": ["import_context", "clsx"]
 }

package/build/validated-form-controls/control-with-error.cjs

@@ -70,6 +70,9 @@ function UnforwardedControlWithError({
     const validityTarget = getValidityTarget();
     const suppressNativePopover = (event) => {
       event.preventDefault();
+      if (!event.isTrusted) {
+        return;
+      }
       const target = event.target;
       const firstErrorInForm = Array.from(target.form?.elements ?? []).find((el) => !el.validity.valid);
       if (!target.form || firstErrorInForm === target) {

package/build/validated-form-controls/control-with-error.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/validated-form-controls/control-with-error.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useId, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  let suffix;\n  if (required && !markWhenOptional) {\n    suffix = `(${__('Required')})`;\n  } else if (!required && markWhenOptional) {\n    suffix = `(${__('Optional')})`;\n  }\n  if (!suffix) {\n    return label;\n  }\n  if (typeof label === 'string') {\n    return `${label} ${suffix}`;\n  }\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [label, \" \", suffix]\n  });\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          validityTarget?.setCustomValidity(customValidity.message ?? '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const messageId = useId();\n  const message = (() => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  })();\n  const visibleMessage = showMessage ? message : null;\n\n  // Imperatively manage `aria-describedby` on the validity target so we\n  // merge with any value the child control sets internally (e.g. from a\n  // `help` prop), rather than competing with it at the props level.\n  useEffect(() => {\n    const target = getValidityTarget();\n    if (!target) {\n      return;\n    }\n    function setDescribedBy(el, shouldAdd) {\n      const ids = (el.getAttribute('aria-describedby') ?? '').split(' ').filter(id => id && id !== messageId);\n      if (shouldAdd) {\n        ids.push(messageId);\n      }\n      if (ids.length) {\n        el.setAttribute('aria-describedby', ids.join(' '));\n      } else {\n        el.removeAttribute('aria-describedby');\n      }\n    }\n    setDescribedBy(target, !!visibleMessage);\n    return () => setDescribedBy(target, false);\n  }, [visibleMessage, messageId, getValidityTarget]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), visibleMessage]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAqE;AAMrE,gCAAkC;AAClC,yBAAkE;AAClE,SAAS,wBAAwB,OAAO,UAAU,kBAAkB;AAClE,MAAI;AACJ,MAAI,YAAY,CAAC,kBAAkB;AACjC,aAAS,QAAI,gBAAG,UAAU,CAAC;AAAA,EAC7B,WAAW,CAAC,YAAY,kBAAkB;AACxC,aAAS,QAAI,gBAAG,UAAU,CAAC;AAAA,EAC7B;AACA,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AACA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,GAAG,KAAK,IAAI,MAAM;AAAA,EAC3B;AACA,SAAoB,uCAAAA,MAAM,mBAAAC,UAAW;AAAA,IACnC,UAAU,CAAC,OAAO,KAAK,MAAM;AAAA,EAC/B,CAAC;AACH;AACA,IAAM,6BAA6B;AACnC,IAAM,YAAY;AAWlB,SAAS,4BAA4B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,cAAc;AACf,QAAM,CAAC,cAAc,eAAe,QAAI,yBAAS;AACjD,QAAM,CAAC,eAAe,gBAAgB,QAAI,yBAAS;AACnD,QAAM,CAAC,aAAa,cAAc,QAAI,yBAAS,KAAK;AACpD,QAAM,CAAC,WAAW,YAAY,QAAI,yBAAS,KAAK;AAIhD,gCAAU,MAAM;AACd,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,UAAU,MAAM;AACpB,qBAAe,IAAI;AACnB,sBAAgB,aAAa,4BAA4B,EAAE;AAAA,IAC7D;AACA,oBAAgB,iBAAiB,WAAW,OAAO;AACnD,WAAO,MAAM,gBAAgB,oBAAoB,WAAW,OAAO;AAAA,EACrE,GAAG,CAAC,iBAAiB,CAAC;AAGtB,gCAAU,MAAM;AACd,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,wBAAwB,WAAS;AACrC,YAAM,eAAe;AACrB,YAAM,SAAS,MAAM;AACrB,YAAM,mBAAmB,MAAM,KAAK,OAAO,MAAM,YAAY,CAAC,CAAC,EAAE,KAAK,QAAM,CAAC,GAAG,SAAS,KAAK;AAC9F,UAAI,CAAC,OAAO,QAAQ,qBAAqB,QAAQ;AAC/C,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AAKA,UAAM,iBAAiB,gBAAgB,SAAS,WAAW,gBAAgB,OAAO,MAAM,KAAK,gBAAgB,QAAQ,IAAI,SAAS,EAAE,GAAG,iBAAiB,6BAA6B,gBAAgB,IAAI,IAAI,KAAK,CAAC,CAAC,EAAE,OAAO,aAAW,YAAY,cAAc,IAAI,CAAC;AACvQ,oBAAgB,iBAAiB,WAAW,qBAAqB;AACjE,mBAAe,QAAQ,aAAW,QAAQ,iBAAiB,WAAW,qBAAqB,CAAC;AAC5F,WAAO,MAAM;AACX,sBAAgB,oBAAoB,WAAW,qBAAqB;AACpE,qBAAe,QAAQ,aAAW,QAAQ,oBAAoB,WAAW,qBAAqB,CAAC;AAAA,IACjG;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AAGtB,gCAAU,MAAM;AACd,UAAM,iBAAiB,kBAAkB;AACzC,QAAI,CAAC,gBAAgB,MAAM;AACzB,sBAAgB,kBAAkB,EAAE;AACpC,sBAAgB,gBAAgB,iBAAiB;AACjD,uBAAiB,MAAS;AAC1B;AAAA,IACF;AACA,YAAQ,eAAe,MAAM;AAAA,MAC3B,KAAK,cACH;AACE,wBAAgB,kBAAkB,EAAE;AACpC,wBAAgB,MAAS;AACzB,yBAAiB;AAAA,UACf,MAAM;AAAA,UACN,SAAS,eAAe;AAAA,QAC1B,CAAC;AACD;AAAA,MACF;AAAA,MACF,KAAK,SACH;AACE,wBAAgB,kBAAkB,EAAE;AACpC,wBAAgB,gBAAgB,iBAAiB;AACjD,yBAAiB;AAAA,UACf,MAAM;AAAA,UACN,SAAS,eAAe;AAAA,QAC1B,CAAC;AACD;AAAA,MACF;AAAA,MACF,KAAK,WACH;AACE,wBAAgB,kBAAkB,eAAe,WAAW,EAAE;AAC9D,wBAAgB,gBAAgB,iBAAiB;AACjD,yBAAiB,MAAS;AAC1B;AAAA,MACF;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,gBAAgB,iBAAiB,CAAC;AAItC,gCAAU,MAAM;AACd,QAAI,CAAC,aAAa,aAAa;AAC7B;AAAA,IACF;AACA,QAAI,gBAAgB,SAAS,cAAc;AAEzC,YAAM,QAAQ,WAAW,MAAM;AAC7B,uBAAe,IAAI;AAAA,MACrB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AACA,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,MAAM,WAAW,CAAC;AAGjD,QAAM,SAAS,WAAS;AACtB,QAAI,WAAW;AACb;AAAA,IACF;AAIA,QAAI,CAAC,MAAM,iBAAiB,CAAC,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG;AAC9E,mBAAa,IAAI;AACjB,wBAAkB,GAAG,aAAa,4BAA4B,EAAE;AAAA,IAClE;AAAA,EACF;AACA,QAAM,gBAAY,sBAAM;AACxB,QAAM,WAAW,MAAM;AACrB,QAAI,cAAc;AAChB,aAAoB,uCAAAC,KAAK,6CAAmB;AAAA,QAC1C,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,MACX,CAAC;AAAA,IACH;AACA,QAAI,eAAe,MAAM;AACvB,aAAoB,uCAAAA,KAAK,6CAAmB;AAAA,QAC1C,IAAI;AAAA,QACJ,MAAM,cAAc;AAAA,QACpB,SAAS,cAAc;AAAA,MACzB,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG;AACH,QAAM,iBAAiB,cAAc,UAAU;AAK/C,gCAAU,MAAM;AACd,UAAM,SAAS,kBAAkB;AACjC,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,aAAS,eAAe,IAAI,WAAW;AACrC,YAAM,OAAO,GAAG,aAAa,kBAAkB,KAAK,IAAI,MAAM,GAAG,EAAE,OAAO,QAAM,MAAM,OAAO,SAAS;AACtG,UAAI,WAAW;AACb,YAAI,KAAK,SAAS;AAAA,MACpB;AACA,UAAI,IAAI,QAAQ;AACd,WAAG,aAAa,oBAAoB,IAAI,KAAK,GAAG,CAAC;AAAA,MACnD,OAAO;AACL,WAAG,gBAAgB,kBAAkB;AAAA,MACvC;AAAA,IACF;AACA,mBAAe,QAAQ,CAAC,CAAC,cAAc;AACvC,WAAO,MAAM,eAAe,QAAQ,KAAK;AAAA,EAC3C,GAAG,CAAC,gBAAgB,WAAW,iBAAiB,CAAC;AACjD,SAAoB,uCAAAF,MAAM,OAAO;AAAA,IAC/B;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,UAAU,KAAC,6BAAa,UAAU;AAAA,MAChC,OAAO,wBAAwB,SAAS,MAAM,OAAO,UAAU,gBAAgB;AAAA,MAC/E;AAAA,IACF,CAAC,GAAG,cAAc;AAAA,EACpB,CAAC;AACH;AACO,IAAM,uBAAmB,2BAAW,2BAA2B;AACtE,iBAAiB,cAAc;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useId, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  let suffix;\n  if (required && !markWhenOptional) {\n    suffix = `(${__('Required')})`;\n  } else if (!required && markWhenOptional) {\n    suffix = `(${__('Optional')})`;\n  }\n  if (!suffix) {\n    return label;\n  }\n  if (typeof label === 'string') {\n    return `${label} ${suffix}`;\n  }\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [label, \" \", suffix]\n  });\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      event.preventDefault();\n\n      // Only trusted `invalid` events (a form submission or a\n      // `reportValidity()` call) mirror the native focus behavior.\n      // Consumers may dispatch a synthetic `invalid` event to reveal\n      // this control's error message without disturbing the user's\n      // place in the form, so it must not move focus.\n      if (!event.isTrusted) {\n        return;\n      }\n      const target = event.target;\n      const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          validityTarget?.setCustomValidity(customValidity.message ?? '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const messageId = useId();\n  const message = (() => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  })();\n  const visibleMessage = showMessage ? message : null;\n\n  // Imperatively manage `aria-describedby` on the validity target so we\n  // merge with any value the child control sets internally (e.g. from a\n  // `help` prop), rather than competing with it at the props level.\n  useEffect(() => {\n    const target = getValidityTarget();\n    if (!target) {\n      return;\n    }\n    function setDescribedBy(el, shouldAdd) {\n      const ids = (el.getAttribute('aria-describedby') ?? '').split(' ').filter(id => id && id !== messageId);\n      if (shouldAdd) {\n        ids.push(messageId);\n      }\n      if (ids.length) {\n        el.setAttribute('aria-describedby', ids.join(' '));\n      } else {\n        el.removeAttribute('aria-describedby');\n      }\n    }\n    setDescribedBy(target, !!visibleMessage);\n    return () => setDescribedBy(target, false);\n  }, [visibleMessage, messageId, getValidityTarget]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), visibleMessage]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
+  "mappings": "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",
   "names": ["_jsxs", "_Fragment", "_jsx"]
 }

package/build-module/autocomplete/index.mjs

@@ -290,8 +290,10 @@ function useAutocompleteProps(options) {
     ref: mergedRefs,
     children: popover,
     "aria-autocomplete": listBoxId ? "list" : void 0,
+    "aria-haspopup": listBoxId ? "listbox" : void 0,
+    "aria-controls": listBoxId,
     "aria-owns": listBoxId,
-    "aria-activedescendant": activeId
+    "aria-activedescendant": activeId ?? void 0
   };
 }
 function Autocomplete({

package/build-module/autocomplete/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/autocomplete/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent, privateApis as richTextPrivateApis } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { AutocompleterUI } from './autocompleter-ui';\nimport { getAutocompleteMatch } from './get-autocomplete-match';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { unlock } from '../lock-unlock';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst {\n  subscribeOwnedListener\n} = unlock(richTextPrivateApis);\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nfunction getCompletionObject(completion) {\n  if (completion !== null && typeof completion === 'object' && 'action' in completion && completion.action !== undefined && 'value' in completion && completion.value !== undefined) {\n    return completion;\n  }\n  return {\n    action: 'insert-at-caret',\n    value: completion\n  };\n}\nconst initialState = {\n  selectedIndex: 0,\n  filteredOptions: EMPTY_FILTERED_OPTIONS,\n  filterValue: '',\n  autocompleter: null\n};\nfunction autocompleteReducer(state, action) {\n  switch (action.type) {\n    case 'RESET':\n      return initialState;\n    case 'SELECT':\n      return {\n        ...state,\n        selectedIndex: action.index\n      };\n    case 'OPTIONS':\n      return {\n        ...state,\n        filteredOptions: action.options,\n        selectedIndex: action.options.length === state.filteredOptions.length ? state.selectedIndex : 0\n      };\n    case 'MATCH':\n      return {\n        ...state,\n        autocompleter: action.completer,\n        filterValue: action.query\n      };\n  }\n}\nexport function useAutocomplete({\n  record,\n  onChange,\n  onReplace,\n  completers,\n  contentRef\n}) {\n  const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n  const [state, dispatch] = useReducer(autocompleteReducer, initialState);\n  const {\n    selectedIndex,\n    filteredOptions,\n    filterValue,\n    autocompleter\n  } = state;\n  const backspacingRef = useRef(false);\n  const prevRecordTextRef = useRef('');\n  const lastCompletionRef = useRef(null);\n  function insertCompletion(replacement) {\n    if (autocompleter === null) {\n      return '';\n    }\n    const end = record.start;\n    const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n    const toInsert = create({\n      html: renderToString(replacement)\n    });\n    onChange(insert(record, toInsert, start, end));\n    return getTextContent(toInsert);\n  }\n  function select(option) {\n    if (option.isDisabled || !autocompleter) {\n      return;\n    }\n    const {\n      getOptionCompletion\n    } = autocompleter;\n    if (!getOptionCompletion) {\n      dispatch({\n        type: 'RESET'\n      });\n      contentRef.current?.focus();\n      return;\n    }\n    const completionObject = getCompletionObject(getOptionCompletion(option.value, filterValue));\n    if ('replace' === completionObject.action) {\n      onReplace([completionObject.value]);\n      // When replacing, the component will unmount, so don't reset\n      // state (below) on an unmounted component.\n      return;\n    }\n    if ('insert-at-caret' === completionObject.action) {\n      const completionText = insertCompletion(completionObject.value);\n      // When the completion value starts with the trigger prefix\n      // (e.g. @username), the trigger stays in the text and would\n      // re-activate the autocompleter. Store the completed text so\n      // the effect can suppress the stale re-match.\n      if (completionText.startsWith(autocompleter.triggerPrefix)) {\n        const afterPrefix = completionText.slice(autocompleter.triggerPrefix.length);\n        if (afterPrefix) {\n          lastCompletionRef.current = {\n            name: autocompleter.name,\n            value: afterPrefix\n          };\n        }\n      }\n    }\n\n    // Reset autocomplete state after insertion rather than before\n    // so insertion events don't cause the completion menu to redisplay.\n    dispatch({\n      type: 'RESET'\n    });\n\n    // Make sure that the content remains focused after making a selection\n    // and that the text cursor position is not lost.\n    contentRef.current?.focus();\n  }\n  function onChangeOptions(options) {\n    dispatch({\n      type: 'OPTIONS',\n      options\n    });\n  }\n  function handleKeyDown(event) {\n    backspacingRef.current = event.key === 'Backspace';\n    if (!autocompleter) {\n      return;\n    }\n    if (filteredOptions.length === 0) {\n      return;\n    }\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        {\n          const offset = event.key === 'ArrowUp' ? -1 : 1;\n          const newIndex = (selectedIndex + offset + filteredOptions.length) % filteredOptions.length;\n          dispatch({\n            type: 'SELECT',\n            index: newIndex\n          });\n          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'Escape':\n        dispatch({\n          type: 'RESET'\n        });\n        event.preventDefault();\n        break;\n      case 'Enter':\n        select(filteredOptions[selectedIndex]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        dispatch({\n          type: 'RESET'\n        });\n        return;\n      default:\n        return;\n    }\n\n    // Any handled key should prevent original behavior. This relies on\n    // the early return in the default case.\n    event.preventDefault();\n  }\n\n  // textContent is a primitive (string), memoizing is not strictly necessary\n  // but this is a preemptive performance improvement, since the autocompleter\n  // is a potential bottleneck for the editor type metric.\n  const textContent = useMemo(() => {\n    if (isCollapsed(record)) {\n      return getTextContent(slice(record, 0));\n    }\n    return '';\n  }, [record]);\n  useEffect(() => {\n    const isTextChange = record.text !== prevRecordTextRef.current;\n    prevRecordTextRef.current = record.text;\n    function getTextAfterSelection() {\n      return textContent ? getTextContent(slice(record, undefined, getTextContent(record).length)) : '';\n    }\n    const match = getAutocompleteMatch(textContent, completers, {\n      matchCount: filteredOptions.length,\n      isBackspacing: backspacingRef.current,\n      getTextAfterSelection,\n      lastCompletion: lastCompletionRef.current\n    });\n    if (!match) {\n      if (autocompleter) {\n        dispatch({\n          type: 'RESET'\n        });\n      }\n      return;\n    }\n    const {\n      completer,\n      filterValue: query\n    } = match;\n\n    // Don't re-activate a dismissed autocompleter on cursor-only\n    // movement. `textContent` (text before cursor) changes with the\n    // caret, so the effect re-runs, but `record.text` does not.\n    // Complements the render-time `didUserInput` gate in\n    // `useAutocompleteProps` for callers using this hook directly.\n    if (!autocompleter && !isTextChange) {\n      return;\n    }\n\n    // Clear stale completion ref when the user types a new trigger\n    // for the same completer (the previous completion is no longer\n    // relevant). Must be after the cursor-only check so that mere\n    // cursor movement doesn't discard the suppression state.\n    if (lastCompletionRef.current && lastCompletionRef.current.name === completer.name) {\n      lastCompletionRef.current = null;\n    }\n    dispatch({\n      type: 'MATCH',\n      completer,\n      query\n    });\n    // We want to avoid introducing unexpected side effects.\n    // See https://github.com/WordPress/gutenberg/pull/41820\n  }, [textContent]);\n  const {\n    key: selectedKey = ''\n  } = filteredOptions[selectedIndex] || {};\n  const {\n    className\n  } = autocompleter || {};\n  const isExpanded = !!autocompleter && filteredOptions.length > 0;\n  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n  const hasSelection = record.start !== undefined;\n  const showPopover = !!textContent && hasSelection && !!autocompleter;\n  return {\n    listBoxId,\n    activeId,\n    onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n    popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n      autocompleter: autocompleter,\n      className: className,\n      filterValue: filterValue,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      selectedIndex: selectedIndex,\n      onChangeOptions: onChangeOptions,\n      onSelect: select,\n      contentRef: contentRef,\n      reset: () => dispatch({\n        type: 'RESET'\n      })\n    }, autocompleter.name + autocompleter.triggerPrefix)\n  };\n}\n\n/**\n * Checks whether two records represent the same user-visible state\n * (same text content and cursor position).\n */\nfunction recordValuesMatch(a, b) {\n  return a.text === b.text && a.start === b.start && a.end === b.end;\n}\n\n/**\n * Tracks the last record whose value differed from the current one.\n * Used to determine whether the user has actually typed something\n */\nexport function useLastDifferentValue(value) {\n  const history = useRef([]);\n  const lastEntry = history.current[history.current.length - 1];\n\n  // Only add to history if the value is meaningfully different from\n  // the most recent entry (analogous to Set.add being a no-op for\n  // duplicate references in the original implementation).\n  if (!lastEntry || !recordValuesMatch(value, lastEntry)) {\n    history.current.push(value);\n  }\n\n  // Keep the history size to 2.\n  if (history.current.length > 2) {\n    history.current.shift();\n  }\n  return history.current[0];\n}\nexport function useAutocompleteProps(options) {\n  const ref = useRef(null);\n  const onKeyDownRef = useRef(undefined);\n  const {\n    record\n  } = options;\n  const previousRecord = useLastDifferentValue(record);\n  const {\n    popover,\n    listBoxId,\n    activeId,\n    onKeyDown\n  } = useAutocomplete({\n    ...options,\n    contentRef: ref\n  });\n  onKeyDownRef.current = onKeyDown;\n  const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n    function _onKeyDown(event) {\n      onKeyDownRef.current?.(event);\n    }\n    // Capture phase. When the autocomplete popover is open,\n    // Up/Down/Enter/Escape must navigate the completion list —\n    // they shouldn't be consumed by ancestor handlers (e.g.\n    // block-editor's writing-flow) for block navigation, block\n    // splitting, or \"move out of parent\" actions. Those handlers\n    // fire at bubble phase and gate on `event.defaultPrevented`,\n    // so firing in capture lets us preventDefault first when the\n    // popover is active.\n    return subscribeOwnedListener(element, 'keydown', _onKeyDown, true);\n  }, [])]);\n\n  // We only want to show the popover if the user has typed something.\n  const didUserInput = record.text !== previousRecord?.text;\n  if (!didUserInput) {\n    return {\n      ref: mergedRefs\n    };\n  }\n  return {\n    ref: mergedRefs,\n    children: popover,\n    'aria-autocomplete': listBoxId ? 'list' : undefined,\n    'aria-owns': listBoxId,\n    'aria-activedescendant': activeId\n  };\n}\nexport default function Autocomplete({\n  children,\n  isSelected,\n  ...options\n}) {\n  const {\n    popover,\n    ...props\n  } = useAutocomplete(options);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children(props), isSelected && popover]\n  });\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent, privateApis as richTextPrivateApis } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { AutocompleterUI } from './autocompleter-ui';\nimport { getAutocompleteMatch } from './get-autocomplete-match';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { unlock } from '../lock-unlock';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst {\n  subscribeOwnedListener\n} = unlock(richTextPrivateApis);\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nfunction getCompletionObject(completion) {\n  if (completion !== null && typeof completion === 'object' && 'action' in completion && completion.action !== undefined && 'value' in completion && completion.value !== undefined) {\n    return completion;\n  }\n  return {\n    action: 'insert-at-caret',\n    value: completion\n  };\n}\nconst initialState = {\n  selectedIndex: 0,\n  filteredOptions: EMPTY_FILTERED_OPTIONS,\n  filterValue: '',\n  autocompleter: null\n};\nfunction autocompleteReducer(state, action) {\n  switch (action.type) {\n    case 'RESET':\n      return initialState;\n    case 'SELECT':\n      return {\n        ...state,\n        selectedIndex: action.index\n      };\n    case 'OPTIONS':\n      return {\n        ...state,\n        filteredOptions: action.options,\n        selectedIndex: action.options.length === state.filteredOptions.length ? state.selectedIndex : 0\n      };\n    case 'MATCH':\n      return {\n        ...state,\n        autocompleter: action.completer,\n        filterValue: action.query\n      };\n  }\n}\nexport function useAutocomplete({\n  record,\n  onChange,\n  onReplace,\n  completers,\n  contentRef\n}) {\n  const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n  const [state, dispatch] = useReducer(autocompleteReducer, initialState);\n  const {\n    selectedIndex,\n    filteredOptions,\n    filterValue,\n    autocompleter\n  } = state;\n  const backspacingRef = useRef(false);\n  const prevRecordTextRef = useRef('');\n  const lastCompletionRef = useRef(null);\n  function insertCompletion(replacement) {\n    if (autocompleter === null) {\n      return '';\n    }\n    const end = record.start;\n    const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n    const toInsert = create({\n      html: renderToString(replacement)\n    });\n    onChange(insert(record, toInsert, start, end));\n    return getTextContent(toInsert);\n  }\n  function select(option) {\n    if (option.isDisabled || !autocompleter) {\n      return;\n    }\n    const {\n      getOptionCompletion\n    } = autocompleter;\n    if (!getOptionCompletion) {\n      dispatch({\n        type: 'RESET'\n      });\n      contentRef.current?.focus();\n      return;\n    }\n    const completionObject = getCompletionObject(getOptionCompletion(option.value, filterValue));\n    if ('replace' === completionObject.action) {\n      onReplace([completionObject.value]);\n      // When replacing, the component will unmount, so don't reset\n      // state (below) on an unmounted component.\n      return;\n    }\n    if ('insert-at-caret' === completionObject.action) {\n      const completionText = insertCompletion(completionObject.value);\n      // When the completion value starts with the trigger prefix\n      // (e.g. @username), the trigger stays in the text and would\n      // re-activate the autocompleter. Store the completed text so\n      // the effect can suppress the stale re-match.\n      if (completionText.startsWith(autocompleter.triggerPrefix)) {\n        const afterPrefix = completionText.slice(autocompleter.triggerPrefix.length);\n        if (afterPrefix) {\n          lastCompletionRef.current = {\n            name: autocompleter.name,\n            value: afterPrefix\n          };\n        }\n      }\n    }\n\n    // Reset autocomplete state after insertion rather than before\n    // so insertion events don't cause the completion menu to redisplay.\n    dispatch({\n      type: 'RESET'\n    });\n\n    // Make sure that the content remains focused after making a selection\n    // and that the text cursor position is not lost.\n    contentRef.current?.focus();\n  }\n  function onChangeOptions(options) {\n    dispatch({\n      type: 'OPTIONS',\n      options\n    });\n  }\n  function handleKeyDown(event) {\n    backspacingRef.current = event.key === 'Backspace';\n    if (!autocompleter) {\n      return;\n    }\n    if (filteredOptions.length === 0) {\n      return;\n    }\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        {\n          const offset = event.key === 'ArrowUp' ? -1 : 1;\n          const newIndex = (selectedIndex + offset + filteredOptions.length) % filteredOptions.length;\n          dispatch({\n            type: 'SELECT',\n            index: newIndex\n          });\n          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'Escape':\n        dispatch({\n          type: 'RESET'\n        });\n        event.preventDefault();\n        break;\n      case 'Enter':\n        select(filteredOptions[selectedIndex]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        dispatch({\n          type: 'RESET'\n        });\n        return;\n      default:\n        return;\n    }\n\n    // Any handled key should prevent original behavior. This relies on\n    // the early return in the default case.\n    event.preventDefault();\n  }\n\n  // textContent is a primitive (string), memoizing is not strictly necessary\n  // but this is a preemptive performance improvement, since the autocompleter\n  // is a potential bottleneck for the editor type metric.\n  const textContent = useMemo(() => {\n    if (isCollapsed(record)) {\n      return getTextContent(slice(record, 0));\n    }\n    return '';\n  }, [record]);\n  useEffect(() => {\n    const isTextChange = record.text !== prevRecordTextRef.current;\n    prevRecordTextRef.current = record.text;\n    function getTextAfterSelection() {\n      return textContent ? getTextContent(slice(record, undefined, getTextContent(record).length)) : '';\n    }\n    const match = getAutocompleteMatch(textContent, completers, {\n      matchCount: filteredOptions.length,\n      isBackspacing: backspacingRef.current,\n      getTextAfterSelection,\n      lastCompletion: lastCompletionRef.current\n    });\n    if (!match) {\n      if (autocompleter) {\n        dispatch({\n          type: 'RESET'\n        });\n      }\n      return;\n    }\n    const {\n      completer,\n      filterValue: query\n    } = match;\n\n    // Don't re-activate a dismissed autocompleter on cursor-only\n    // movement. `textContent` (text before cursor) changes with the\n    // caret, so the effect re-runs, but `record.text` does not.\n    // Complements the render-time `didUserInput` gate in\n    // `useAutocompleteProps` for callers using this hook directly.\n    if (!autocompleter && !isTextChange) {\n      return;\n    }\n\n    // Clear stale completion ref when the user types a new trigger\n    // for the same completer (the previous completion is no longer\n    // relevant). Must be after the cursor-only check so that mere\n    // cursor movement doesn't discard the suppression state.\n    if (lastCompletionRef.current && lastCompletionRef.current.name === completer.name) {\n      lastCompletionRef.current = null;\n    }\n    dispatch({\n      type: 'MATCH',\n      completer,\n      query\n    });\n    // We want to avoid introducing unexpected side effects.\n    // See https://github.com/WordPress/gutenberg/pull/41820\n  }, [textContent]);\n  const {\n    key: selectedKey = ''\n  } = filteredOptions[selectedIndex] || {};\n  const {\n    className\n  } = autocompleter || {};\n  const isExpanded = !!autocompleter && filteredOptions.length > 0;\n  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n  const hasSelection = record.start !== undefined;\n  const showPopover = !!textContent && hasSelection && !!autocompleter;\n  return {\n    listBoxId,\n    activeId,\n    onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n    popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n      autocompleter: autocompleter,\n      className: className,\n      filterValue: filterValue,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      selectedIndex: selectedIndex,\n      onChangeOptions: onChangeOptions,\n      onSelect: select,\n      contentRef: contentRef,\n      reset: () => dispatch({\n        type: 'RESET'\n      })\n    }, autocompleter.name + autocompleter.triggerPrefix)\n  };\n}\n\n/**\n * Checks whether two records represent the same user-visible state\n * (same text content and cursor position).\n */\nfunction recordValuesMatch(a, b) {\n  return a.text === b.text && a.start === b.start && a.end === b.end;\n}\n\n/**\n * Tracks the last record whose value differed from the current one.\n * Used to determine whether the user has actually typed something\n */\nexport function useLastDifferentValue(value) {\n  const history = useRef([]);\n  const lastEntry = history.current[history.current.length - 1];\n\n  // Only add to history if the value is meaningfully different from\n  // the most recent entry (analogous to Set.add being a no-op for\n  // duplicate references in the original implementation).\n  if (!lastEntry || !recordValuesMatch(value, lastEntry)) {\n    history.current.push(value);\n  }\n\n  // Keep the history size to 2.\n  if (history.current.length > 2) {\n    history.current.shift();\n  }\n  return history.current[0];\n}\n\n// The popover is anchored to the element this hook's own `ref` lands on, so it\n// owns `contentRef` and callers don't provide one.\nexport function useAutocompleteProps(options) {\n  const ref = useRef(null);\n  const onKeyDownRef = useRef(undefined);\n  const {\n    record\n  } = options;\n  const previousRecord = useLastDifferentValue(record);\n  const {\n    popover,\n    listBoxId,\n    activeId,\n    onKeyDown\n  } = useAutocomplete({\n    ...options,\n    contentRef: ref\n  });\n  onKeyDownRef.current = onKeyDown;\n  const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n    function _onKeyDown(event) {\n      onKeyDownRef.current?.(event);\n    }\n    // Capture phase. When the autocomplete popover is open,\n    // Up/Down/Enter/Escape must navigate the completion list —\n    // they shouldn't be consumed by ancestor handlers (e.g.\n    // block-editor's writing-flow) for block navigation, block\n    // splitting, or \"move out of parent\" actions. Those handlers\n    // fire at bubble phase and gate on `event.defaultPrevented`,\n    // so firing in capture lets us preventDefault first when the\n    // popover is active.\n    return subscribeOwnedListener(element, 'keydown', _onKeyDown, true);\n  }, [])]);\n\n  // We only want to show the popover if the user has typed something.\n  const didUserInput = record.text !== previousRecord?.text;\n  if (!didUserInput) {\n    return {\n      ref: mergedRefs\n    };\n  }\n\n  // `aria-owns` and `aria-controls` point at the same list: either one lets\n  // `aria-activedescendant` resolve to an option rendered outside this\n  // element, and assistive technology support differs between them.\n  //\n  // No `aria-expanded`: consumers are `textbox` elements, which don't\n  // support it; that would mean `role=\"combobox\"`, which in turn doesn't\n  // support the `aria-multiline` these fields set.\n  return {\n    ref: mergedRefs,\n    children: popover,\n    'aria-autocomplete': listBoxId ? 'list' : undefined,\n    'aria-haspopup': listBoxId ? 'listbox' : undefined,\n    'aria-controls': listBoxId,\n    'aria-owns': listBoxId,\n    'aria-activedescendant': activeId ?? undefined\n  };\n}\nexport default function Autocomplete({\n  children,\n  isSelected,\n  ...options\n}) {\n  const {\n    popover,\n    ...props\n  } = useAutocomplete(options);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children(props), isSelected && popover]\n  });\n}"],
+  "mappings": "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",
   "names": []
 }

package/build-module/color-picker/component.mjs

@@ -60,12 +60,15 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     ...safeColordColor.toHsl()
   }));
   const lastProducedHexRef = useRef(safeColordColor.toHex());
+  const isPickerInteractingRef = useRef(false);
   useEffect(() => {
-    const incomingHex = safeColordColor.toHex();
-    if (incomingHex === lastProducedHexRef.current) {
+    if (isPickerInteractingRef.current) {
       return;
     }
-    lastProducedHexRef.current = incomingHex;
+    if (safeColordColor.isEqual(lastProducedHexRef.current)) {
+      return;
+    }
+    lastProducedHexRef.current = safeColordColor.toHex();
     const externalHSLA = safeColordColor.toHsl();
     setInternalHSLA((prev) => mergeHSLA(externalHSLA, prev));
   }, [safeColordColor]);
@@ -73,7 +76,7 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     setInternalHSLA(nextHSLA);
     const previousHex = lastProducedHexRef.current;
     const nextHex = colord(nextHSLA).toHex();
-    if (nextHex !== previousHex) {
+    if (!colord(nextHex).isEqual(previousHex)) {
       lastProducedHexRef.current = nextHex;
       setColor(nextHex);
     }
@@ -116,7 +119,13 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     children: [/* @__PURE__ */ _jsx(Picker, {
       onChange: handleHSLAChange,
       hsla: internalHSLA,
-      enableAlpha
+      enableAlpha,
+      onInteractionStart: () => {
+        isPickerInteractingRef.current = true;
+      },
+      onInteractionEnd: () => {
+        isPickerInteractingRef.current = false;
+      }
     }), /* @__PURE__ */ _jsxs(AuxiliaryColorArtefactWrapper, {
       children: [/* @__PURE__ */ _jsxs(AuxiliaryColorArtefactHStackHeader, {
         justify: "space-between",

package/build-module/color-picker/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend, getFormat } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin]);\n\n/**\n * Merges incoming HSLA with previous state, preserving hue for achromatic\n * colors and saturation only at lightness extremes (black/white) where\n * it has no visual effect.\n */\nfunction mergeHSLA(nextHSLA, prevHSLA) {\n  if (nextHSLA.s === 0) {\n    if (nextHSLA.l === 0 || nextHSLA.l === 100) {\n      return {\n        ...nextHSLA,\n        h: prevHSLA.h,\n        s: prevHSLA.s\n      };\n    }\n    return {\n      ...nextHSLA,\n      h: prevHSLA.h\n    };\n  }\n  return nextHSLA;\n}\nconst options = [{\n  label: 'RGB',\n  value: 'rgb'\n}, {\n  label: 'HSL',\n  value: 'hsl'\n}, {\n  label: 'Hex',\n  value: 'hex'\n}];\nconst UnconnectedColorPicker = (props, forwardedRef) => {\n  const {\n    enableAlpha = false,\n    color: colorProp,\n    onChange,\n    defaultValue = '#fff',\n    copyFormat,\n    ...divProps\n  } = useContextSystem(props, 'ColorPicker');\n\n  // Use a safe default value for the color and remove the possibility of `undefined`.\n  const [color, setColor] = useControlledValue({\n    onChange,\n    value: colorProp,\n    defaultValue\n  });\n  const safeColordColor = useMemo(() => {\n    return colord(color || '');\n  }, [color]);\n  const debouncedSetColor = useDebounce(setColor);\n\n  // Internal HSLA state preserves hue and saturation values that\n  // would otherwise be lost when converting to/from hex at achromatic\n  // colors (e.g. pure black or white where any H/S maps to the same hex).\n  const [internalHSLA, setInternalHSLA] = useState(() => ({\n    ...safeColordColor.toHsl()\n  }));\n\n  // Track the last hex we produced so the sync effect can\n  // distinguish our own updates from external prop changes.\n  const lastProducedHexRef = useRef(safeColordColor.toHex());\n\n  // Sync internalHSLA when the color prop changes externally (e.g.\n  // parent passes a new color that wasn't produced by our onChange).\n  useEffect(() => {\n    const incomingHex = safeColordColor.toHex();\n\n    // If this hex matches what we last produced, it's our own\n    // update arriving back — skip the sync to avoid overwriting\n    // internalHSLA with lossy round-tripped values.\n    if (incomingHex === lastProducedHexRef.current) {\n      return;\n    }\n\n    // Genuinely external change — sync internalHSLA.\n    lastProducedHexRef.current = incomingHex;\n    const externalHSLA = safeColordColor.toHsl();\n    setInternalHSLA(prev => mergeHSLA(externalHSLA, prev));\n  }, [safeColordColor]);\n\n  // Handler for HSL-aware components (Picker, HSL inputs) that\n  // provide raw HSLA values without information loss.\n  // Uses direct setColor (not debounced) to prevent race conditions\n  // where a stale debounced hex would overwrite newer internalHSLA.\n  // This is safe performance-wise because react-colorful internally\n  // throttles its onChange callbacks using requestAnimationFrame.\n\n  const handleHSLAChange = useCallback(nextHSLA => {\n    // No mergeHSLA here — this handler receives the user's explicit\n    // choice from the picker or HSL inputs, with no lossy conversion.\n    setInternalHSLA(nextHSLA);\n    const previousHex = lastProducedHexRef.current;\n    const nextHex = colord(nextHSLA).toHex();\n    // Only notify parent when the hex actually changes. This\n    // avoids firing onChange for H/S changes on achromatic\n    // colors (e.g. adjusting hue on pure white).\n    if (nextHex !== previousHex) {\n      lastProducedHexRef.current = nextHex;\n      setColor(nextHex);\n    }\n  }, [setColor]);\n\n  // Handler for components that provide Colord values (RGB, Hex inputs).\n  // Uses debouncedSetColor since the hex input fires per keystroke.\n  const handleChange = useCallback(nextValue => {\n    const nextHSLA = nextValue.toHsl();\n    setInternalHSLA(prev => mergeHSLA(nextHSLA, prev));\n    const nextHex = nextValue.toHex();\n    lastProducedHexRef.current = nextHex;\n    debouncedSetColor(nextHex);\n  }, [debouncedSetColor]);\n  const [colorType, setColorType] = useState(copyFormat || 'hex');\n\n  /*\n   * ! Listener intended for the CAPTURE phase\n   *\n   * Capture paste events over the entire color picker, looking for clipboard\n   * data that could be parsed as a color. If not, let the paste event\n   * propagate normally, so that individual input controls within the\n   * component have a chance to handle it.\n   */\n  const maybeHandlePaste = useCallback(event => {\n    const pastedText = event.clipboardData?.getData('text')?.trim();\n    if (!pastedText) {\n      return;\n    }\n    const parsedColor = colord(pastedText);\n    if (!parsedColor.isValid()) {\n      return;\n    }\n\n    // Apply all valid colors, even if the format isn't supported in\n    // the UI (e.g. names like \"cyan\" or, in the future color spaces\n    // like \"lch\" if we add the right colord plugins)\n    handleChange(parsedColor);\n\n    // This redundancy helps TypeScript and is safer than assertions\n    const supportedFormats = {\n      hex: 'hex',\n      rgb: 'rgb',\n      hsl: 'hsl'\n    };\n    const detectedFormat = String(getFormat(pastedText));\n    const newColorType = supportedFormats[detectedFormat];\n    if (newColorType) {\n      setColorType(newColorType);\n    }\n\n    // Stop at capture phase; no bubbling\n    event.stopPropagation();\n    event.preventDefault();\n  }, [handleChange, setColorType]);\n  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\n    onPasteCapture: maybeHandlePaste,\n    children: [/*#__PURE__*/_jsx(Picker, {\n      onChange: handleHSLAChange,\n      hsla: internalHSLA,\n      enableAlpha: enableAlpha\n    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {\n      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {\n        justify: \"space-between\",\n        children: [/*#__PURE__*/_jsx(SelectControl, {\n          size: \"compact\",\n          options: options,\n          value: colorType,\n          onChange: nextColorType => setColorType(nextColorType),\n          label: __('Color format'),\n          hideLabelFromVision: true,\n          variant: \"minimal\"\n        }), /*#__PURE__*/_jsx(ColorCopyButton, {\n          color: safeColordColor,\n          colorType: copyFormat || colorType\n        })]\n      }), /*#__PURE__*/_jsx(ColorInputWrapper, {\n        direction: \"column\",\n        gap: 2,\n        children: /*#__PURE__*/_jsx(ColorInput, {\n          colorType: colorType,\n          color: safeColordColor,\n          hsla: internalHSLA,\n          onChange: handleChange,\n          onHSLChange: handleHSLAChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\n};\n\n/**\n * `ColorPicker` lets users select a color from a visual color surface, or by\n * editing its hex, RGB, or HSL values.\n */\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend, getFormat } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin]);\n\n/**\n * Merges incoming HSLA with previous state, preserving hue for achromatic\n * colors and saturation only at lightness extremes (black/white) where\n * it has no visual effect.\n */\nfunction mergeHSLA(nextHSLA, prevHSLA) {\n  if (nextHSLA.s === 0) {\n    if (nextHSLA.l === 0 || nextHSLA.l === 100) {\n      return {\n        ...nextHSLA,\n        h: prevHSLA.h,\n        s: prevHSLA.s\n      };\n    }\n    return {\n      ...nextHSLA,\n      h: prevHSLA.h\n    };\n  }\n  return nextHSLA;\n}\nconst options = [{\n  label: 'RGB',\n  value: 'rgb'\n}, {\n  label: 'HSL',\n  value: 'hsl'\n}, {\n  label: 'Hex',\n  value: 'hex'\n}];\nconst UnconnectedColorPicker = (props, forwardedRef) => {\n  const {\n    enableAlpha = false,\n    color: colorProp,\n    onChange,\n    defaultValue = '#fff',\n    copyFormat,\n    ...divProps\n  } = useContextSystem(props, 'ColorPicker');\n\n  // Use a safe default value for the color and remove the possibility of `undefined`.\n  const [color, setColor] = useControlledValue({\n    onChange,\n    value: colorProp,\n    defaultValue\n  });\n  const safeColordColor = useMemo(() => {\n    return colord(color || '');\n  }, [color]);\n  const debouncedSetColor = useDebounce(setColor);\n\n  // Internal HSLA state preserves hue and saturation values that\n  // would otherwise be lost when converting to/from hex at achromatic\n  // colors (e.g. pure black or white where any H/S maps to the same hex).\n  const [internalHSLA, setInternalHSLA] = useState(() => ({\n    ...safeColordColor.toHsl()\n  }));\n\n  // Track the last hex we produced so the sync effect can\n  // distinguish our own updates from external prop changes.\n  const lastProducedHexRef = useRef(safeColordColor.toHex());\n\n  // While the user is dragging the visual picker, ignore color-prop sync\n  // so delayed/stale controlled echoes cannot overwrite internalHSLA mid-drag.\n  const isPickerInteractingRef = useRef(false);\n\n  // Sync internalHSLA when the color prop changes externally (e.g.\n  // parent passes a new color that wasn't produced by our onChange).\n  useEffect(() => {\n    if (isPickerInteractingRef.current) {\n      return;\n    }\n\n    // Compare by color equality, not hex string — rgb()/rgba()\n    // round-trips can differ in string form for the same color.\n    if (safeColordColor.isEqual(lastProducedHexRef.current)) {\n      return;\n    }\n\n    // Genuinely external change — sync internalHSLA.\n    lastProducedHexRef.current = safeColordColor.toHex();\n    const externalHSLA = safeColordColor.toHsl();\n    setInternalHSLA(prev => mergeHSLA(externalHSLA, prev));\n  }, [safeColordColor]);\n\n  // Handler for HSL inputs (and the HSVA picker after it converts to HSLA).\n  // Apply the user's HSLA, then notify the parent only when the color\n  // actually changes. setColor must not run inside setInternalHSLA\n  // (state updaters must be pure). Uses direct setColor (not debounced)\n  // to avoid races with hex/RGB's debouncedSetColor.\n  const handleHSLAChange = useCallback(nextHSLA => {\n    setInternalHSLA(nextHSLA);\n    const previousHex = lastProducedHexRef.current;\n    const nextHex = colord(nextHSLA).toHex();\n    if (!colord(nextHex).isEqual(previousHex)) {\n      lastProducedHexRef.current = nextHex;\n      setColor(nextHex);\n    }\n  }, [setColor]);\n\n  // Handler for components that provide Colord values (RGB, Hex inputs).\n  // Uses debouncedSetColor since the hex input fires per keystroke.\n  const handleChange = useCallback(nextValue => {\n    const nextHSLA = nextValue.toHsl();\n    setInternalHSLA(prev => mergeHSLA(nextHSLA, prev));\n    const nextHex = nextValue.toHex();\n    lastProducedHexRef.current = nextHex;\n    debouncedSetColor(nextHex);\n  }, [debouncedSetColor]);\n  const [colorType, setColorType] = useState(copyFormat || 'hex');\n\n  /*\n   * ! Listener intended for the CAPTURE phase\n   *\n   * Capture paste events over the entire color picker, looking for clipboard\n   * data that could be parsed as a color. If not, let the paste event\n   * propagate normally, so that individual input controls within the\n   * component have a chance to handle it.\n   */\n  const maybeHandlePaste = useCallback(event => {\n    const pastedText = event.clipboardData?.getData('text')?.trim();\n    if (!pastedText) {\n      return;\n    }\n    const parsedColor = colord(pastedText);\n    if (!parsedColor.isValid()) {\n      return;\n    }\n\n    // Apply all valid colors, even if the format isn't supported in\n    // the UI (e.g. names like \"cyan\" or, in the future color spaces\n    // like \"lch\" if we add the right colord plugins)\n    handleChange(parsedColor);\n\n    // This redundancy helps TypeScript and is safer than assertions\n    const supportedFormats = {\n      hex: 'hex',\n      rgb: 'rgb',\n      hsl: 'hsl'\n    };\n    const detectedFormat = String(getFormat(pastedText));\n    const newColorType = supportedFormats[detectedFormat];\n    if (newColorType) {\n      setColorType(newColorType);\n    }\n\n    // Stop at capture phase; no bubbling\n    event.stopPropagation();\n    event.preventDefault();\n  }, [handleChange, setColorType]);\n  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\n    onPasteCapture: maybeHandlePaste,\n    children: [/*#__PURE__*/_jsx(Picker, {\n      onChange: handleHSLAChange,\n      hsla: internalHSLA,\n      enableAlpha: enableAlpha,\n      onInteractionStart: () => {\n        isPickerInteractingRef.current = true;\n      },\n      onInteractionEnd: () => {\n        isPickerInteractingRef.current = false;\n      }\n    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {\n      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {\n        justify: \"space-between\",\n        children: [/*#__PURE__*/_jsx(SelectControl, {\n          size: \"compact\",\n          options: options,\n          value: colorType,\n          onChange: nextColorType => setColorType(nextColorType),\n          label: __('Color format'),\n          hideLabelFromVision: true,\n          variant: \"minimal\"\n        }), /*#__PURE__*/_jsx(ColorCopyButton, {\n          color: safeColordColor,\n          colorType: copyFormat || colorType\n        })]\n      }), /*#__PURE__*/_jsx(ColorInputWrapper, {\n        direction: \"column\",\n        gap: 2,\n        children: /*#__PURE__*/_jsx(ColorInput, {\n          colorType: colorType,\n          color: safeColordColor,\n          hsla: internalHSLA,\n          onChange: handleChange,\n          onHSLChange: handleHSLAChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\n};\n\n/**\n * `ColorPicker` lets users select a color from a visual color surface, or by\n * editing its hex, RGB, or HSL values.\n */\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,38 +1,110 @@
 // packages/components/src/color-picker/picker.tsx
-import { HslColorPicker, HslaColorPicker } from "react-colorful";
+import { useEffect, useRef, useState } from "@wordpress/element";
+import { HsvColorPicker, HsvaColorPicker } from "react-colorful";
+import { colord } from "colord";
 import { jsx as _jsx } from "react/jsx-runtime";
-var pointerCaptureProps = {
-  onPointerDown({
-    currentTarget,
-    pointerId
-  }) {
-    currentTarget.setPointerCapture(pointerId);
-  },
-  onPointerUp({
-    currentTarget,
-    pointerId
-  }) {
-    currentTarget.releasePointerCapture(pointerId);
+function toHsva(hsla) {
+  return {
+    ...colord(hsla).toHsv(),
+    // HSL and HSV share the hue angle. Color conversion collapses achromatic
+    // hue to 0, but HSLA retains the user's latent hue.
+    h: hsla.h,
+    a: hsla.a
+  };
+}
+function isSameHsla(a, b) {
+  return a.h === b.h && a.s === b.s && a.l === b.l && a.a === b.a;
+}
+function toHsvaFromHsla(hsla, prevHsva, prevHsla) {
+  const converted = toHsva(hsla);
+  if (hsla.l !== 0) {
+    return converted;
   }
-};
+  const saturationChanged = prevHsla !== null && prevHsla.s !== hsla.s;
+  return {
+    h: hsla.h,
+    s: saturationChanged ? hsla.s : prevHsva.s,
+    v: 0,
+    a: hsla.a
+  };
+}
 var Picker = ({
   hsla,
   enableAlpha,
-  onChange
+  onChange,
+  onInteractionStart,
+  onInteractionEnd
 }) => {
+  const [hsva, setHsva] = useState(() => toHsva(hsla));
+  const pickerOriginHslaRef = useRef(null);
+  const prevHslaRef = useRef(hsla);
+  const isPointerInteractingRef = useRef(false);
+  useEffect(() => {
+    if (isPointerInteractingRef.current) {
+      prevHslaRef.current = hsla;
+      return;
+    }
+    if (pickerOriginHslaRef.current && isSameHsla(pickerOriginHslaRef.current, hsla)) {
+      prevHslaRef.current = hsla;
+      return;
+    }
+    pickerOriginHslaRef.current = null;
+    setHsva((prev) => toHsvaFromHsla(hsla, prev, prevHslaRef.current));
+    prevHslaRef.current = hsla;
+  }, [hsla]);
+  const pointerCaptureProps = {
+    onPointerDown({
+      currentTarget,
+      pointerId
+    }) {
+      isPointerInteractingRef.current = true;
+      onInteractionStart?.();
+      currentTarget.setPointerCapture(pointerId);
+    },
+    onPointerUp({
+      currentTarget,
+      pointerId
+    }) {
+      currentTarget.releasePointerCapture(pointerId);
+      isPointerInteractingRef.current = false;
+      onInteractionEnd?.();
+    },
+    onPointerCancel({
+      currentTarget,
+      pointerId
+    }) {
+      currentTarget.releasePointerCapture(pointerId);
+      isPointerInteractingRef.current = false;
+      onInteractionEnd?.();
+    }
+  };
+  const handleChange = (next) => {
+    setHsva(next);
+    const nextHsla = {
+      ...colord(next).toHsl(),
+      a: next.a
+    };
+    pickerOriginHslaRef.current = nextHsla;
+    onChange(nextHsla);
+  };
   if (enableAlpha) {
-    return /* @__PURE__ */ _jsx(HslaColorPicker, {
-      color: hsla,
-      onChange,
+    return /* @__PURE__ */ _jsx(HsvaColorPicker, {
+      color: hsva,
+      onChange: handleChange,
       ...pointerCaptureProps
     });
   }
-  return /* @__PURE__ */ _jsx(HslColorPicker, {
-    color: hsla,
-    onChange: (nextColor) => {
-      onChange({
-        ...nextColor,
-        a: hsla.a
+  const hsv = {
+    h: hsva.h,
+    s: hsva.s,
+    v: hsva.v
+  };
+  return /* @__PURE__ */ _jsx(HsvColorPicker, {
+    color: hsv,
+    onChange: (next) => {
+      handleChange({
+        ...next,
+        a: hsva.a
       });
     },
     ...pointerCaptureProps

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/picker.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { HslColorPicker, HslaColorPicker } from 'react-colorful';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n// Pointer capture fortifies drag gestures so that they continue to work\n// while dragging outside the component over objects like iframes. If a\n// newer version of react-colorful begins to employ pointer capture this\n// will be redundant and should be removed.\nconst pointerCaptureProps = {\n  onPointerDown({\n    currentTarget,\n    pointerId\n  }) {\n    currentTarget.setPointerCapture(pointerId);\n  },\n  onPointerUp({\n    currentTarget,\n    pointerId\n  }) {\n    currentTarget.releasePointerCapture(pointerId);\n  }\n};\nexport const Picker = ({\n  hsla,\n  enableAlpha,\n  onChange\n}) => {\n  if (enableAlpha) {\n    return /*#__PURE__*/_jsx(HslaColorPicker, {\n      color: hsla,\n      onChange: onChange,\n      ...pointerCaptureProps\n    });\n  }\n  return /*#__PURE__*/_jsx(HslColorPicker, {\n    color: hsla,\n    onChange: nextColor => {\n      onChange({\n        ...nextColor,\n        a: hsla.a\n      });\n    },\n    ...pointerCaptureProps\n  });\n};"],
-  "mappings": ";AAGA,SAAS,gBAAgB,uBAAuB;AAKhD,SAAS,OAAO,YAAY;AAK5B,IAAM,sBAAsB;AAAA,EAC1B,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,EACF,GAAG;AACD,kBAAc,kBAAkB,SAAS;AAAA,EAC3C;AAAA,EACA,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACF,GAAG;AACD,kBAAc,sBAAsB,SAAS;AAAA,EAC/C;AACF;AACO,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,aAAa;AACf,WAAoB,qBAAK,iBAAiB;AAAA,MACxC,OAAO;AAAA,MACP;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,gBAAgB;AAAA,IACvC,OAAO;AAAA,IACP,UAAU,eAAa;AACrB,eAAS;AAAA,QACP,GAAG;AAAA,QACH,GAAG,KAAK;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { HsvColorPicker, HsvaColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction toHsva(hsla) {\n  return {\n    ...colord(hsla).toHsv(),\n    // HSL and HSV share the hue angle. Color conversion collapses achromatic\n    // hue to 0, but HSLA retains the user's latent hue.\n    h: hsla.h,\n    a: hsla.a\n  };\n}\nfunction isSameHsla(a, b) {\n  return a.h === b.h && a.s === b.s && a.l === b.l && a.a === b.a;\n}\n\n/**\n * Convert parent HSLA into HSVA for prop sync.\n *\n * At black, RGB round-trips collapse saturation to 0. Preserve the native\n * HSVA saturation coordinate unless the HSL saturation channel itself\n * changed (sibling hue/alpha edits must not snap the pointer).\n *\n * At white, only `v: 100, s: 0` is visually white — preserving a prior\n * chromatic saturation would leave the pointer at the top-right and make\n * the first keyboard step jump from white to a saturated color.\n */\nfunction toHsvaFromHsla(hsla, prevHsva, prevHsla) {\n  const converted = toHsva(hsla);\n\n  // White and chromatic colors use the converted value as-is.\n  if (hsla.l !== 0) {\n    return converted;\n  }\n  const saturationChanged = prevHsla !== null && prevHsla.s !== hsla.s;\n  return {\n    h: hsla.h,\n    s: saturationChanged ? hsla.s : prevHsva.s,\n    v: 0,\n    a: hsla.a\n  };\n}\n\n/**\n * Visual color surface.\n *\n * Uses HSVA (react-colorful's native model) and keeps that value in local\n * state so HSLA↔hex round-trips cannot move the pointer\n * Parent ColorPicker still speaks HSLA for\n * inputs and controlled value sync; conversion happens only at the boundary.\n *\n * Prop sync from parent HSLA is suppressed for:\n * - pointer/touch drags (interaction flag), and\n * - any picker-originated update including keyboard (HSLA origin token).\n *\n * Achromatic HSL sibling edits (hue/alpha while at black) preserve native\n * HSVA saturation unless saturation itself changed. White always syncs to\n * the converted `s: 0` visual coordinate.\n */\nexport const Picker = ({\n  hsla,\n  enableAlpha,\n  onChange,\n  onInteractionStart,\n  onInteractionEnd\n}) => {\n  const [hsva, setHsva] = useState(() => toHsva(hsla));\n  // Last HSLA emitted by this picker — skip echoing it back into HSVA.\n  const pickerOriginHslaRef = useRef(null);\n  // Previous parent HSLA — detect which channel changed on achromatic sync.\n  const prevHslaRef = useRef(hsla);\n  // Pointer/touch drag: never sync from HSLA mid-gesture (origin match alone\n  // can fail across rapid frames when parent gradient state re-renders).\n  const isPointerInteractingRef = useRef(false);\n  useEffect(() => {\n    if (isPointerInteractingRef.current) {\n      // Keep prevHsla in lockstep with parent updates during the gesture\n      // so a post-drag HSL sibling edit is not compared against pre-drag\n      // HSLA and mistaken for a saturation change.\n      prevHslaRef.current = hsla;\n      return;\n    }\n    if (pickerOriginHslaRef.current && isSameHsla(pickerOriginHslaRef.current, hsla)) {\n      prevHslaRef.current = hsla;\n      return;\n    }\n    pickerOriginHslaRef.current = null;\n    setHsva(prev => toHsvaFromHsla(hsla, prev, prevHslaRef.current));\n    prevHslaRef.current = hsla;\n  }, [hsla]);\n\n  // Inline handlers so refs are not passed into a helper during render\n  // (react-hooks/refs). Pointer capture also keeps drag working over iframes.\n  const pointerCaptureProps = {\n    onPointerDown({\n      currentTarget,\n      pointerId\n    }) {\n      isPointerInteractingRef.current = true;\n      onInteractionStart?.();\n      currentTarget.setPointerCapture(pointerId);\n    },\n    onPointerUp({\n      currentTarget,\n      pointerId\n    }) {\n      currentTarget.releasePointerCapture(pointerId);\n      isPointerInteractingRef.current = false;\n      onInteractionEnd?.();\n    },\n    onPointerCancel({\n      currentTarget,\n      pointerId\n    }) {\n      currentTarget.releasePointerCapture(pointerId);\n      isPointerInteractingRef.current = false;\n      onInteractionEnd?.();\n    }\n  };\n  const handleChange = next => {\n    setHsva(next);\n    const nextHsla = {\n      ...colord(next).toHsl(),\n      a: next.a\n    };\n    pickerOriginHslaRef.current = nextHsla;\n    onChange(nextHsla);\n  };\n  if (enableAlpha) {\n    return /*#__PURE__*/_jsx(HsvaColorPicker, {\n      color: hsva,\n      onChange: handleChange,\n      ...pointerCaptureProps\n    });\n  }\n\n  // HsvColorPicker's equality checks enumerate own keys — never pass `a`,\n  // or every parent re-render looks like an external color change and the\n  // pointer jitters while dragging.\n  const hsv = {\n    h: hsva.h,\n    s: hsva.s,\n    v: hsva.v\n  };\n  return /*#__PURE__*/_jsx(HsvColorPicker, {\n    color: hsv,\n    onChange: next => {\n      handleChange({\n        ...next,\n        a: hsva.a\n      });\n    },\n    ...pointerCaptureProps\n  });\n};"],
+  "mappings": ";AAIA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,cAAc;AAKvB,SAAS,OAAO,YAAY;AAC5B,SAAS,OAAO,MAAM;AACpB,SAAO;AAAA,IACL,GAAG,OAAO,IAAI,EAAE,MAAM;AAAA;AAAA;AAAA,IAGtB,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,EACV;AACF;AACA,SAAS,WAAW,GAAG,GAAG;AACxB,SAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AAChE;AAaA,SAAS,eAAe,MAAM,UAAU,UAAU;AAChD,QAAM,YAAY,OAAO,IAAI;AAG7B,MAAI,KAAK,MAAM,GAAG;AAChB,WAAO;AAAA,EACT;AACA,QAAM,oBAAoB,aAAa,QAAQ,SAAS,MAAM,KAAK;AACnE,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,IACR,GAAG,oBAAoB,KAAK,IAAI,SAAS;AAAA,IACzC,GAAG;AAAA,IACH,GAAG,KAAK;AAAA,EACV;AACF;AAkBO,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,OAAO,IAAI,CAAC;AAEnD,QAAM,sBAAsB,OAAO,IAAI;AAEvC,QAAM,cAAc,OAAO,IAAI;AAG/B,QAAM,0BAA0B,OAAO,KAAK;AAC5C,YAAU,MAAM;AACd,QAAI,wBAAwB,SAAS;AAInC,kBAAY,UAAU;AACtB;AAAA,IACF;AACA,QAAI,oBAAoB,WAAW,WAAW,oBAAoB,SAAS,IAAI,GAAG;AAChF,kBAAY,UAAU;AACtB;AAAA,IACF;AACA,wBAAoB,UAAU;AAC9B,YAAQ,UAAQ,eAAe,MAAM,MAAM,YAAY,OAAO,CAAC;AAC/D,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AAIT,QAAM,sBAAsB;AAAA,IAC1B,cAAc;AAAA,MACZ;AAAA,MACA;AAAA,IACF,GAAG;AACD,8BAAwB,UAAU;AAClC,2BAAqB;AACrB,oBAAc,kBAAkB,SAAS;AAAA,IAC3C;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF,GAAG;AACD,oBAAc,sBAAsB,SAAS;AAC7C,8BAAwB,UAAU;AAClC,yBAAmB;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,MACA;AAAA,IACF,GAAG;AACD,oBAAc,sBAAsB,SAAS;AAC7C,8BAAwB,UAAU;AAClC,yBAAmB;AAAA,IACrB;AAAA,EACF;AACA,QAAM,eAAe,UAAQ;AAC3B,YAAQ,IAAI;AACZ,UAAM,WAAW;AAAA,MACf,GAAG,OAAO,IAAI,EAAE,MAAM;AAAA,MACtB,GAAG,KAAK;AAAA,IACV;AACA,wBAAoB,UAAU;AAC9B,aAAS,QAAQ;AAAA,EACnB;AACA,MAAI,aAAa;AACf,WAAoB,qBAAK,iBAAiB;AAAA,MACxC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AAKA,QAAM,MAAM;AAAA,IACV,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,EACV;AACA,SAAoB,qBAAK,gBAAgB;AAAA,IACvC,OAAO;AAAA,IACP,UAAU,UAAQ;AAChB,mBAAa;AAAA,QACX,GAAG;AAAA,QACH,GAAG,KAAK;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AACH;",
   "names": []
 }