@wordpress/components 32.5.0 → 32.6.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/autocomplete/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useState, useRef, useMemo } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nexport function useAutocomplete({\n  record,\n  onChange,\n  onReplace,\n  completers,\n  contentRef\n}) {\n  const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [filteredOptions, setFilteredOptions] = useState(EMPTY_FILTERED_OPTIONS);\n  const [filterValue, setFilterValue] = useState('');\n  const [autocompleter, setAutocompleter] = useState(null);\n  const [AutocompleterUI, setAutocompleterUI] = useState(null);\n  const backspacingRef = useRef(false);\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  }\n  function select(option) {\n    const {\n      getOptionCompletion\n    } = autocompleter || {};\n    if (option.isDisabled) {\n      return;\n    }\n    if (getOptionCompletion) {\n      const completion = getOptionCompletion(option.value, filterValue);\n      const isCompletionObject = obj => {\n        return obj !== null && typeof obj === 'object' && 'action' in obj && obj.action !== undefined && 'value' in obj && obj.value !== undefined;\n      };\n      const completionObject = isCompletionObject(completion) ? completion : {\n        action: 'insert-at-caret',\n        value: completion\n      };\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      } else if ('insert-at-caret' === completionObject.action) {\n        insertCompletion(completionObject.value);\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    reset();\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 reset() {\n    setSelectedIndex(0);\n    setFilteredOptions(EMPTY_FILTERED_OPTIONS);\n    setFilterValue('');\n    setAutocompleter(null);\n    setAutocompleterUI(null);\n  }\n\n  /**\n   * Load options for an autocompleter.\n   *\n   * @param {Array} options\n   */\n  function onChangeOptions(options) {\n    setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0);\n    setFilteredOptions(options);\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        {\n          const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1;\n          setSelectedIndex(newIndex);\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 'ArrowDown':\n        {\n          const newIndex = (selectedIndex + 1) % filteredOptions.length;\n          setSelectedIndex(newIndex);\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'Escape':\n        setAutocompleter(null);\n        setAutocompleterUI(null);\n        event.preventDefault();\n        break;\n      case 'Enter':\n        select(filteredOptions[selectedIndex]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        reset();\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    if (!textContent) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n\n    // Find the completer with the highest triggerPrefix index in the\n    // textContent.\n    const completer = completers.reduce((lastTrigger, currentCompleter) => {\n      const triggerIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);\n      const lastTriggerIndex = lastTrigger !== null ? textContent.lastIndexOf(lastTrigger.triggerPrefix) : -1;\n      return triggerIndex > lastTriggerIndex ? currentCompleter : lastTrigger;\n    }, null);\n    if (!completer) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const {\n      allowContext,\n      triggerPrefix\n    } = completer;\n    const triggerIndex = textContent.lastIndexOf(triggerPrefix);\n    const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);\n    const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n    // This is a final barrier to prevent the effect from completing with\n    // an extremely long string, which causes the editor to slow-down\n    // significantly. This could happen, for example, if `matchingWhileBackspacing`\n    // is true and one of the \"words\" end up being too long. If that's the case,\n    // it will be caught by this guard.\n    if (tooDistantFromTrigger) {\n      return;\n    }\n    const mismatch = filteredOptions.length === 0;\n    const wordsFromTrigger = textWithoutTrigger.split(/\\s/);\n    // We need to allow the effect to run when not backspacing and if there\n    // was a mismatch. i.e when typing a trigger + the match string or when\n    // clicking in an existing trigger word on the page. We do that if we\n    // detect that we have one word from trigger in the current textual context.\n    //\n    // Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n    // allow the effect to run. It will run until there's a mismatch.\n    const hasOneTriggerWord = wordsFromTrigger.length === 1;\n    // This is used to allow the effect to run when backspacing and if\n    // \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n    // word\" any word up to the limit of 3 from the trigger character.\n    // Anything beyond that is ignored if there's a mismatch. This allows\n    // us to \"escape\" a mismatch when backspacing, but still imposing some\n    // sane limits.\n    //\n    // Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n    // if the user presses backspace here, it will show the completion popup again.\n    const matchingWhileBackspacing = backspacingRef.current && wordsFromTrigger.length <= 3;\n    if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const textAfterSelection = getTextContent(slice(record, undefined, getTextContent(record).length));\n    if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    if (/^\\s/.test(textWithoutTrigger) || /\\s\\s+$/.test(textWithoutTrigger)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    if (!/[\\u0000-\\uFFFF]*$/.test(textWithoutTrigger)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const safeTrigger = escapeRegExp(completer.triggerPrefix);\n    const text = removeAccents(textContent);\n    const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\\u0000-\\uFFFF]*)$`));\n    const query = match && match[1];\n    setAutocompleter(completer);\n    setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);\n    setFilterValue(query === null ? '' : query);\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 && !!AutocompleterUI;\n  return {\n    listBoxId,\n    activeId,\n    onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n    popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n      className: className,\n      filterValue: filterValue,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      selectedIndex: selectedIndex,\n      onChangeOptions: onChangeOptions,\n      onSelect: select,\n      value: record,\n      contentRef: contentRef,\n      reset: reset\n    })\n  };\n}\nfunction useLastDifferentValue(value) {\n  const history = useRef(new Set());\n  history.current.add(value);\n\n  // Keep the history size to 2.\n  if (history.current.size > 2) {\n    history.current.delete(Array.from(history.current)[0]);\n  }\n  return Array.from(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    element.addEventListener('keydown', _onKeyDown);\n    return () => {\n      element.removeEventListener('keydown', _onKeyDown);\n    };\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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",
-  "names": ["triggerIndex"]
+  "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 } 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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\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  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  }\n  function select(option) {\n    const {\n      getOptionCompletion\n    } = autocompleter || {};\n    if (option.isDisabled) {\n      return;\n    }\n    if (getOptionCompletion) {\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      } else if ('insert-at-caret' === completionObject.action) {\n        insertCompletion(completionObject.value);\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    function getTextAfterSelection() {\n      return textContent ? getTextContent(slice(record, undefined, getTextContent(record).length)) : '';\n    }\n    const match = getAutocompleteMatch(textContent, completers, filteredOptions.length, backspacingRef.current, getTextAfterSelection);\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    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    element.addEventListener('keydown', _onKeyDown);\n    return () => {\n      element.removeEventListener('keydown', _onKeyDown);\n    };\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": ";AAGA,SAAS,gBAAgB,WAAW,SAAS,YAAY,cAAc;AACvE,SAAS,eAAe,cAAc,oBAAoB;AAC1D,SAAS,QAAQ,OAAO,QAAQ,aAAa,sBAAsB;AACnE,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAK1B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,OAAO,iBAAiB;AACxB,SAAS,OAAO,MAAM,YAAY,WAAW,QAAQ,aAAa;AAClE,IAAM,yBAAyB,CAAC;AAGhC,IAAM,8BAA8B,CAAC;AACrC,SAAS,oBAAoB,YAAY;AACvC,MAAI,eAAe,QAAQ,OAAO,eAAe,YAAY,YAAY,cAAc,WAAW,WAAW,UAAa,WAAW,cAAc,WAAW,UAAU,QAAW;AACjL,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;AACA,IAAM,eAAe;AAAA,EACnB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,eAAe;AACjB;AACA,SAAS,oBAAoB,OAAO,QAAQ;AAC1C,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,eAAe,OAAO;AAAA,MACxB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,iBAAiB,OAAO;AAAA,QACxB,eAAe,OAAO,QAAQ,WAAW,MAAM,gBAAgB,SAAS,MAAM,gBAAgB;AAAA,MAChG;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,eAAe,OAAO;AAAA,QACtB,aAAa,OAAO;AAAA,MACtB;AAAA,EACJ;AACF;AACO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAa,cAAc,2BAA2B;AAC5D,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,qBAAqB,YAAY;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,iBAAiB,OAAO,KAAK;AACnC,WAAS,iBAAiB,aAAa;AACrC,QAAI,kBAAkB,MAAM;AAC1B;AAAA,IACF;AACA,UAAM,MAAM,OAAO;AACnB,UAAM,QAAQ,MAAM,cAAc,cAAc,SAAS,YAAY;AACrE,UAAM,WAAW,OAAO;AAAA,MACtB,MAAM,eAAe,WAAW;AAAA,IAClC,CAAC;AACD,aAAS,OAAO,QAAQ,UAAU,OAAO,GAAG,CAAC;AAAA,EAC/C;AACA,WAAS,OAAO,QAAQ;AACtB,UAAM;AAAA,MACJ;AAAA,IACF,IAAI,iBAAiB,CAAC;AACtB,QAAI,OAAO,YAAY;AACrB;AAAA,IACF;AACA,QAAI,qBAAqB;AACvB,YAAM,mBAAmB,oBAAoB,oBAAoB,OAAO,OAAO,WAAW,CAAC;AAC3F,UAAI,cAAc,iBAAiB,QAAQ;AACzC,kBAAU,CAAC,iBAAiB,KAAK,CAAC;AAGlC;AAAA,MACF,WAAW,sBAAsB,iBAAiB,QAAQ;AACxD,yBAAiB,iBAAiB,KAAK;AAAA,MACzC;AAAA,IACF;AAIA,aAAS;AAAA,MACP,MAAM;AAAA,IACR,CAAC;AAID,eAAW,SAAS,MAAM;AAAA,EAC5B;AACA,WAAS,gBAAgB,SAAS;AAChC,aAAS;AAAA,MACP,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH;AACA,WAAS,cAAc,OAAO;AAC5B,mBAAe,UAAU,MAAM,QAAQ;AACvC,QAAI,CAAC,eAAe;AAClB;AAAA,IACF;AACA,QAAI,gBAAgB,WAAW,GAAG;AAChC;AAAA,IACF;AACA,QAAI,MAAM,kBAAkB;AAC1B;AAAA,IACF;AACA,YAAQ,MAAM,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK,aACH;AACE,cAAM,SAAS,MAAM,QAAQ,YAAY,KAAK;AAC9C,cAAM,YAAY,gBAAgB,SAAS,gBAAgB,UAAU,gBAAgB;AACrF,iBAAS;AAAA,UACP,MAAM;AAAA,UACN,OAAO;AAAA,QACT,CAAC;AAED,YAAI,UAAU,GAAG;AACf,gBAAM,YAAY,gBAAgB,QAAQ,EAAE,KAAK,GAAG,WAAW;AAAA,QACjE;AACA;AAAA,MACF;AAAA,MACF,KAAK;AACH,iBAAS;AAAA,UACP,MAAM;AAAA,QACR,CAAC;AACD,cAAM,eAAe;AACrB;AAAA,MACF,KAAK;AACH,eAAO,gBAAgB,aAAa,CAAC;AACrC;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,iBAAS;AAAA,UACP,MAAM;AAAA,QACR,CAAC;AACD;AAAA,MACF;AACE;AAAA,IACJ;AAIA,UAAM,eAAe;AAAA,EACvB;AAKA,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,YAAY,MAAM,GAAG;AACvB,aAAO,eAAe,MAAM,QAAQ,CAAC,CAAC;AAAA,IACxC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACX,YAAU,MAAM;AACd,aAAS,wBAAwB;AAC/B,aAAO,cAAc,eAAe,MAAM,QAAQ,QAAW,eAAe,MAAM,EAAE,MAAM,CAAC,IAAI;AAAA,IACjG;AACA,UAAM,QAAQ,qBAAqB,aAAa,YAAY,gBAAgB,QAAQ,eAAe,SAAS,qBAAqB;AACjI,QAAI,CAAC,OAAO;AACV,UAAI,eAAe;AACjB,iBAAS;AAAA,UACP,MAAM;AAAA,QACR,CAAC;AAAA,MACH;AACA;AAAA,IACF;AACA,UAAM;AAAA,MACJ;AAAA,MACA,aAAa;AAAA,IACf,IAAI;AACJ,aAAS;AAAA,MACP,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EAGH,GAAG,CAAC,WAAW,CAAC;AAChB,QAAM;AAAA,IACJ,KAAK,cAAc;AAAA,EACrB,IAAI,gBAAgB,aAAa,KAAK,CAAC;AACvC,QAAM;AAAA,IACJ;AAAA,EACF,IAAI,iBAAiB,CAAC;AACtB,QAAM,aAAa,CAAC,CAAC,iBAAiB,gBAAgB,SAAS;AAC/D,QAAM,YAAY,aAAa,mCAAmC,UAAU,KAAK;AACjF,QAAM,WAAW,aAAa,gCAAgC,UAAU,IAAI,WAAW,KAAK;AAC5F,QAAM,eAAe,OAAO,UAAU;AACtC,QAAM,cAAc,CAAC,CAAC,eAAe,gBAAgB,CAAC,CAAC;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,WAAW,oBAAoB,aAAa;AAAA,IAC5C,SAAS,eAA4B,qBAAK,iBAAiB;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,OAAO,MAAM,SAAS;AAAA,QACpB,MAAM;AAAA,MACR,CAAC;AAAA,IACH,GAAG,cAAc,OAAO,cAAc,aAAa;AAAA,EACrD;AACF;AAMA,SAAS,kBAAkB,GAAG,GAAG;AAC/B,SAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE;AACjE;AAMO,SAAS,sBAAsB,OAAO;AAC3C,QAAM,UAAU,OAAO,CAAC,CAAC;AACzB,QAAM,YAAY,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,CAAC;AAK5D,MAAI,CAAC,aAAa,CAAC,kBAAkB,OAAO,SAAS,GAAG;AACtD,YAAQ,QAAQ,KAAK,KAAK;AAAA,EAC5B;AAGA,MAAI,QAAQ,QAAQ,SAAS,GAAG;AAC9B,YAAQ,QAAQ,MAAM;AAAA,EACxB;AACA,SAAO,QAAQ,QAAQ,CAAC;AAC1B;AACO,SAAS,qBAAqB,SAAS;AAC5C,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,eAAe,OAAO,MAAS;AACrC,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,iBAAiB,sBAAsB,MAAM;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AAAA,IAClB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,CAAC;AACD,eAAa,UAAU;AACvB,QAAM,aAAa,aAAa,CAAC,KAAK,aAAa,aAAW;AAC5D,aAAS,WAAW,OAAO;AACzB,mBAAa,UAAU,KAAK;AAAA,IAC9B;AACA,YAAQ,iBAAiB,WAAW,UAAU;AAC9C,WAAO,MAAM;AACX,cAAQ,oBAAoB,WAAW,UAAU;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,CAAC,CAAC,CAAC;AAGP,QAAM,eAAe,OAAO,SAAS,gBAAgB;AACrD,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,MACL,KAAK;AAAA,IACP;AAAA,EACF;AACA,SAAO;AAAA,IACL,KAAK;AAAA,IACL,UAAU;AAAA,IACV,qBAAqB,YAAY,SAAS;AAAA,IAC1C,aAAa;AAAA,IACb,yBAAyB;AAAA,EAC3B;AACF;AACe,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI,gBAAgB,OAAO;AAC3B,SAAoB,sBAAM,WAAW;AAAA,IACnC,UAAU,CAAC,SAAS,KAAK,GAAG,cAAc,OAAO;AAAA,EACnD,CAAC;AACH;",
+  "names": []
 }

package/build-module/box-control/index.mjs

@@ -9,7 +9,7 @@ import LinkedButton from "./linked-button.mjs";
 import { Grid } from "../grid/index.mjs";
 import { InputWrapper, ResetButton, LinkedButtonWrapper } from "./styles/box-control-styles.mjs";
 import { parseQuantityAndUnitFromRawValue } from "../unit-control/utils.mjs";
-import { DEFAULT_VALUES, getInitialSide, isValueMixed, isValuesDefined, getAllowedSides } from "./utils.mjs";
+import { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from "./utils.mjs";
 import { useControlledState } from "../utils/hooks/index.mjs";
 import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -48,7 +48,6 @@ function BoxControl({
   const hasOneSide = sides?.length === 1;
   const [isDirty, setIsDirty] = useState(hasInitialValue);
   const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);
-  const [side, setSide] = useState(getInitialSide(isLinked, splitOnAxis));
   const [selectedUnits, setSelectedUnits] = useState({
     top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],
     right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],
@@ -59,12 +58,6 @@ function BoxControl({
   const headingId = `${id}-heading`;
   const toggleLinked = () => {
     setIsLinked(!isLinked);
-    setSide(getInitialSide(!isLinked, splitOnAxis));
-  };
-  const handleOnFocus = (_event, {
-    side: nextSide
-  }) => {
-    setSide(nextSide);
   };
   const handleOnChange = (nextValues) => {
     onChange(nextValues);
@@ -82,7 +75,6 @@ function BoxControl({
     onMouseOut,
     ...inputProps,
     onChange: handleOnChange,
-    onFocus: handleOnFocus,
     isLinked,
     units,
     selectedUnits,

package/build-module/box-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/box-control/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport { InputWrapper, ResetButton, LinkedButtonWrapper } from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, getInitialSide, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n  min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n  return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\n * };\n * ```\n */\nfunction BoxControl({\n  __next40pxDefaultSize = false,\n  id: idProp,\n  inputProps = defaultInputProps,\n  onChange = noop,\n  label = __('Box Control'),\n  values: valuesProp,\n  units,\n  sides,\n  splitOnAxis = false,\n  allowReset = true,\n  resetValues = DEFAULT_VALUES,\n  presets,\n  presetKey,\n  onMouseOver,\n  onMouseOut\n}) {\n  const [values, setValues] = useControlledState(valuesProp, {\n    fallback: DEFAULT_VALUES\n  });\n  const inputValues = values || DEFAULT_VALUES;\n  const hasInitialValue = isValuesDefined(valuesProp);\n  const hasOneSide = sides?.length === 1;\n  const [isDirty, setIsDirty] = useState(hasInitialValue);\n  const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n  const [side, setSide] = useState(getInitialSide(isLinked, splitOnAxis));\n\n  // Tracking selected units via internal state allows filtering of CSS unit\n  // only values from being saved while maintaining preexisting unit selection\n  // behaviour. Filtering CSS only values prevents invalid style values.\n  const [selectedUnits, setSelectedUnits] = useState({\n    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n  });\n  const id = useUniqueId(idProp);\n  const headingId = `${id}-heading`;\n  const toggleLinked = () => {\n    setIsLinked(!isLinked);\n    setSide(getInitialSide(!isLinked, splitOnAxis));\n  };\n  const handleOnFocus = (_event, {\n    side: nextSide\n  }) => {\n    setSide(nextSide);\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n    setValues(nextValues);\n    setIsDirty(true);\n  };\n  const handleOnReset = () => {\n    onChange(resetValues);\n    setValues(resetValues);\n    setSelectedUnits(resetValues);\n    setIsDirty(false);\n  };\n  const inputControlProps = {\n    onMouseOver,\n    onMouseOut,\n    ...inputProps,\n    onChange: handleOnChange,\n    onFocus: handleOnFocus,\n    isLinked,\n    units,\n    selectedUnits,\n    setSelectedUnits,\n    sides,\n    values: inputValues,\n    __next40pxDefaultSize,\n    presets,\n    presetKey\n  };\n  maybeWarnDeprecated36pxSize({\n    componentName: 'BoxControl',\n    __next40pxDefaultSize,\n    size: undefined\n  });\n  const sidesToRender = getAllowedSides(sides);\n  if (presets && !presetKey || !presets && presetKey) {\n    const definedProp = presets ? 'presets' : 'presetKey';\n    const missingProp = presets ? 'presetKey' : 'presets';\n    globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n  }\n  return /*#__PURE__*/_jsxs(Grid, {\n    id: id,\n    columns: 3,\n    templateColumns: \"1fr min-content min-content\",\n    role: \"group\",\n    \"aria-labelledby\": headingId,\n    children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: headingId,\n      children: label\n    }), isLinked && /*#__PURE__*/_jsx(InputWrapper, {\n      children: /*#__PURE__*/_jsx(InputControl, {\n        side: \"all\",\n        ...inputControlProps\n      })\n    }), !hasOneSide && /*#__PURE__*/_jsx(LinkedButtonWrapper, {\n      children: /*#__PURE__*/_jsx(LinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked\n      })\n    }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis =>\n    /*#__PURE__*/\n    // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(InputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis =>\n    /*#__PURE__*/\n    // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(InputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), allowReset && /*#__PURE__*/_jsx(ResetButton, {\n      className: \"component-box-control__reset-button\",\n      variant: \"secondary\",\n      size: \"small\",\n      onClick: handleOnReset,\n      disabled: !isDirty,\n      children: __('Reset')\n    })]\n  });\n}\nexport { applyValueToSides } from './utils';\nexport default BoxControl;"],
-  "mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,OAAO,aAAa;AAKpB,SAAS,mBAAmB;AAC5B,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AACzB,SAAS,YAAY;AACrB,SAAS,cAAc,aAAa,2BAA2B;AAC/D,SAAS,wCAAwC;AACjD,SAAS,gBAAgB,gBAAgB,cAAc,iBAAiB,uBAAuB;AAC/F,SAAS,0BAA0B;AACnC,SAAS,mCAAmC;AAC5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAoK3C,SAAS,yBAAyB;AAnKlC,IAAM,oBAAoB;AAAA,EACxB,KAAK;AACP;AACA,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,aAAa,cAAc,YAAY,uBAAuB;AACpE,SAAO,UAAU;AACnB;AA4BA,SAAS,WAAW;AAAA,EAClB,wBAAwB;AAAA,EACxB,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ,GAAG,aAAa;AAAA,EACxB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,mBAAmB,YAAY;AAAA,IACzD,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,cAAc,UAAU;AAC9B,QAAM,kBAAkB,gBAAgB,UAAU;AAClD,QAAM,aAAa,OAAO,WAAW;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,eAAe;AACtD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC,mBAAmB,CAAC,aAAa,WAAW,KAAK,UAAU;AACrG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,eAAe,UAAU,WAAW,CAAC;AAKtE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS;AAAA,IACjD,KAAK,iCAAiC,YAAY,GAAG,EAAE,CAAC;AAAA,IACxD,OAAO,iCAAiC,YAAY,KAAK,EAAE,CAAC;AAAA,IAC5D,QAAQ,iCAAiC,YAAY,MAAM,EAAE,CAAC;AAAA,IAC9D,MAAM,iCAAiC,YAAY,IAAI,EAAE,CAAC;AAAA,EAC5D,CAAC;AACD,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,YAAY,GAAG,EAAE;AACvB,QAAM,eAAe,MAAM;AACzB,gBAAY,CAAC,QAAQ;AACrB,YAAQ,eAAe,CAAC,UAAU,WAAW,CAAC;AAAA,EAChD;AACA,QAAM,gBAAgB,CAAC,QAAQ;AAAA,IAC7B,MAAM;AAAA,EACR,MAAM;AACJ,YAAQ,QAAQ;AAAA,EAClB;AACA,QAAM,iBAAiB,gBAAc;AACnC,aAAS,UAAU;AACnB,cAAU,UAAU;AACpB,eAAW,IAAI;AAAA,EACjB;AACA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,WAAW;AACpB,cAAU,WAAW;AACrB,qBAAiB,WAAW;AAC5B,eAAW,KAAK;AAAA,EAClB;AACA,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU;AAAA,IACV,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AACD,QAAM,gBAAgB,gBAAgB,KAAK;AAC3C,MAAI,WAAW,CAAC,aAAa,CAAC,WAAW,WAAW;AAClD,UAAM,cAAc,UAAU,YAAY;AAC1C,UAAM,cAAc,UAAU,cAAc;AAC5C,eAAW,iBAAiB,OAAO,QAAQ,kCAAkC,WAAW,gCAAgC,WAAW,oBAAoB,IAAI;AAAA,EAC7J;AACA,SAAoB,sBAAM,MAAM;AAAA,IAC9B;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU,CAAc,qBAAK,YAAY,aAAa;AAAA,MACpD,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAG,YAAyB,qBAAK,cAAc;AAAA,MAC9C,UAAuB,qBAAK,cAAc;AAAA,QACxC,MAAM;AAAA,QACN,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAG,CAAC,cAA2B,qBAAK,qBAAqB;AAAA,MACxD,UAAuB,qBAAK,cAAc;AAAA,QACxC,SAAS;AAAA,QACT;AAAA,MACF,CAAC;AAAA,IACH,CAAC,GAAG,CAAC,YAAY,eAAe,CAAC,YAAY,YAAY,EAAE,IAAI;AAAA;AAAA;AAAA,MAI/D,qBAAK,cAAc;AAAA,QACjB,MAAM;AAAA,QACN,GAAG;AAAA,MACL,GAAG,IAAI;AAAA,KAAC,GAAG,CAAC,YAAY,CAAC,eAAe,MAAM,KAAK,aAAa,EAAE,IAAI;AAAA;AAAA;AAAA,MAItE,qBAAK,cAAc;AAAA,QACjB,MAAM;AAAA,QACN,GAAG;AAAA,MACL,GAAG,IAAI;AAAA,KAAC,GAAG,cAA2B,qBAAK,aAAa;AAAA,MACtD,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,CAAC;AAAA,MACX,UAAU,GAAG,OAAO;AAAA,IACtB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport { InputWrapper, ResetButton, LinkedButtonWrapper } from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n  min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n  return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\n * };\n * ```\n */\nfunction BoxControl({\n  __next40pxDefaultSize = false,\n  id: idProp,\n  inputProps = defaultInputProps,\n  onChange = noop,\n  label = __('Box Control'),\n  values: valuesProp,\n  units,\n  sides,\n  splitOnAxis = false,\n  allowReset = true,\n  resetValues = DEFAULT_VALUES,\n  presets,\n  presetKey,\n  onMouseOver,\n  onMouseOut\n}) {\n  const [values, setValues] = useControlledState(valuesProp, {\n    fallback: DEFAULT_VALUES\n  });\n  const inputValues = values || DEFAULT_VALUES;\n  const hasInitialValue = isValuesDefined(valuesProp);\n  const hasOneSide = sides?.length === 1;\n  const [isDirty, setIsDirty] = useState(hasInitialValue);\n  const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n\n  // Tracking selected units via internal state allows filtering of CSS unit\n  // only values from being saved while maintaining preexisting unit selection\n  // behaviour. Filtering CSS only values prevents invalid style values.\n  const [selectedUnits, setSelectedUnits] = useState({\n    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n  });\n  const id = useUniqueId(idProp);\n  const headingId = `${id}-heading`;\n  const toggleLinked = () => {\n    setIsLinked(!isLinked);\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n    setValues(nextValues);\n    setIsDirty(true);\n  };\n  const handleOnReset = () => {\n    onChange(resetValues);\n    setValues(resetValues);\n    setSelectedUnits(resetValues);\n    setIsDirty(false);\n  };\n  const inputControlProps = {\n    onMouseOver,\n    onMouseOut,\n    ...inputProps,\n    onChange: handleOnChange,\n    isLinked,\n    units,\n    selectedUnits,\n    setSelectedUnits,\n    sides,\n    values: inputValues,\n    __next40pxDefaultSize,\n    presets,\n    presetKey\n  };\n  maybeWarnDeprecated36pxSize({\n    componentName: 'BoxControl',\n    __next40pxDefaultSize,\n    size: undefined\n  });\n  const sidesToRender = getAllowedSides(sides);\n  if (presets && !presetKey || !presets && presetKey) {\n    const definedProp = presets ? 'presets' : 'presetKey';\n    const missingProp = presets ? 'presetKey' : 'presets';\n    globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n  }\n  return /*#__PURE__*/_jsxs(Grid, {\n    id: id,\n    columns: 3,\n    templateColumns: \"1fr min-content min-content\",\n    role: \"group\",\n    \"aria-labelledby\": headingId,\n    children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: headingId,\n      children: label\n    }), isLinked && /*#__PURE__*/_jsx(InputWrapper, {\n      children: /*#__PURE__*/_jsx(InputControl, {\n        side: \"all\",\n        ...inputControlProps\n      })\n    }), !hasOneSide && /*#__PURE__*/_jsx(LinkedButtonWrapper, {\n      children: /*#__PURE__*/_jsx(LinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked\n      })\n    }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis =>\n    /*#__PURE__*/\n    // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(InputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis =>\n    /*#__PURE__*/\n    // Disable reason: the parent component is handling the __next40pxDefaultSize prop\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(InputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), allowReset && /*#__PURE__*/_jsx(ResetButton, {\n      className: \"component-box-control__reset-button\",\n      variant: \"secondary\",\n      size: \"small\",\n      onClick: handleOnReset,\n      disabled: !isDirty,\n      children: __('Reset')\n    })]\n  });\n}\nexport { applyValueToSides } from './utils';\nexport default BoxControl;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/box-control/utils.mjs

@@ -1,6 +1,6 @@
 // packages/components/src/box-control/utils.ts
-import { __ } from "@wordpress/i18n";
 import deprecated from "@wordpress/deprecated";
+import { __ } from "@wordpress/i18n";
 var CUSTOM_VALUE_SETTINGS = {
   px: {
     max: 300,
@@ -160,13 +160,6 @@ function isValuesDefined(values) {
     (value) => !!value && /\d/.test(value)
   ).length > 0;
 }
-function getInitialSide(isLinked, splitOnAxis) {
-  let initialSide = "all";
-  if (!isLinked) {
-    initialSide = splitOnAxis ? "vertical" : "top";
-  }
-  return initialSide;
-}
 function normalizeSides(sides) {
   const filteredSides = [];
   if (!sides?.length) {
@@ -251,7 +244,6 @@ export {
   applyValueToSides,
   getAllUnitFallback,
   getAllowedSides,
-  getInitialSide,
   getMergedValue,
   getPresetIndexFromValue,
   getPresetValueFromIndex,

package/build-module/box-control/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/box-control/utils.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport deprecated from '@wordpress/deprecated';\nexport const CUSTOM_VALUE_SETTINGS = {\n  px: {\n    max: 300,\n    step: 1\n  },\n  '%': {\n    max: 100,\n    step: 1\n  },\n  vw: {\n    max: 100,\n    step: 1\n  },\n  vh: {\n    max: 100,\n    step: 1\n  },\n  em: {\n    max: 10,\n    step: 0.1\n  },\n  rm: {\n    max: 10,\n    step: 0.1\n  },\n  svw: {\n    max: 100,\n    step: 1\n  },\n  lvw: {\n    max: 100,\n    step: 1\n  },\n  dvw: {\n    max: 100,\n    step: 1\n  },\n  svh: {\n    max: 100,\n    step: 1\n  },\n  lvh: {\n    max: 100,\n    step: 1\n  },\n  dvh: {\n    max: 100,\n    step: 1\n  },\n  vi: {\n    max: 100,\n    step: 1\n  },\n  svi: {\n    max: 100,\n    step: 1\n  },\n  lvi: {\n    max: 100,\n    step: 1\n  },\n  dvi: {\n    max: 100,\n    step: 1\n  },\n  vb: {\n    max: 100,\n    step: 1\n  },\n  svb: {\n    max: 100,\n    step: 1\n  },\n  lvb: {\n    max: 100,\n    step: 1\n  },\n  dvb: {\n    max: 100,\n    step: 1\n  },\n  vmin: {\n    max: 100,\n    step: 1\n  },\n  svmin: {\n    max: 100,\n    step: 1\n  },\n  lvmin: {\n    max: 100,\n    step: 1\n  },\n  dvmin: {\n    max: 100,\n    step: 1\n  },\n  vmax: {\n    max: 100,\n    step: 1\n  },\n  svmax: {\n    max: 100,\n    step: 1\n  },\n  lvmax: {\n    max: 100,\n    step: 1\n  },\n  dvmax: {\n    max: 100,\n    step: 1\n  }\n};\nexport const LABELS = {\n  all: __('All sides'),\n  top: __('Top side'),\n  bottom: __('Bottom side'),\n  left: __('Left side'),\n  right: __('Right side'),\n  vertical: __('Top and bottom sides'),\n  horizontal: __('Left and right sides')\n};\nexport const DEFAULT_VALUES = {\n  top: undefined,\n  right: undefined,\n  bottom: undefined,\n  left: undefined\n};\nexport const ALL_SIDES = ['top', 'right', 'bottom', 'left'];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param arr Array of items to check.\n * @return The item with the most occurrences.\n */\nfunction mode(arr) {\n  return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();\n}\n\n/**\n * Gets the merged input value and unit from values data.\n *\n * @param values         Box values.\n * @param availableSides Available box sides to evaluate.\n *\n * @return A value + unit for the 'all' input.\n */\nexport function getMergedValue(values = {}, availableSides = ALL_SIDES) {\n  const sides = normalizeSides(availableSides);\n  if (sides.every(side => values[side] === values[sides[0]])) {\n    return values[sides[0]];\n  }\n  return undefined;\n}\n\n/**\n * Checks if the values are mixed.\n *\n * @param values         Box values.\n * @param availableSides Available box sides to evaluate.\n * @return Whether the values are mixed.\n */\nexport function isValueMixed(values = {}, availableSides = ALL_SIDES) {\n  const sides = normalizeSides(availableSides);\n  return sides.some(side => values[side] !== values[sides[0]]);\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param selectedUnits Current unit selections for individual sides.\n * @return  Most common unit selection.\n */\nexport function getAllUnitFallback(selectedUnits) {\n  if (!selectedUnits || typeof selectedUnits !== 'object') {\n    return undefined;\n  }\n  const filteredUnits = Object.values(selectedUnits).filter(Boolean);\n  return mode(filteredUnits);\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param values Box values.\n *\n * @return  Whether values are mixed.\n */\nexport function isValuesDefined(values) {\n  return values && Object.values(values).filter(\n  // Switching units when input is empty causes values only\n  // containing units. This gives false positive on mixed values\n  // unless filtered.\n  value => !!value && /\\d/.test(value)).length > 0;\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param isLinked    Whether the box control's fields are linked.\n * @param splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return The initial side.\n */\nexport function getInitialSide(isLinked, splitOnAxis) {\n  let initialSide = 'all';\n  if (!isLinked) {\n    initialSide = splitOnAxis ? 'vertical' : 'top';\n  }\n  return initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param sides Available sides for box control.\n * @return Normalized sides configuration.\n */\nexport function normalizeSides(sides) {\n  const filteredSides = [];\n  if (!sides?.length) {\n    return ALL_SIDES;\n  }\n  if (sides.includes('vertical')) {\n    filteredSides.push(...['top', 'bottom']);\n  } else if (sides.includes('horizontal')) {\n    filteredSides.push(...['left', 'right']);\n  } else {\n    const newSides = ALL_SIDES.filter(side => sides.includes(side));\n    filteredSides.push(...newSides);\n  }\n  return filteredSides;\n}\n\n/**\n * Applies a value to an object representing top, right, bottom and left sides\n * while taking into account any custom side configuration.\n *\n * @deprecated\n *\n * @param currentValues The current values for each side.\n * @param newValue      The value to apply to the sides object.\n * @param sides         Array defining valid sides.\n *\n * @return Object containing the updated values for each side.\n */\nexport function applyValueToSides(currentValues, newValue, sides) {\n  deprecated('applyValueToSides', {\n    since: '6.8',\n    version: '7.0'\n  });\n  const newValues = {\n    ...currentValues\n  };\n  if (sides?.length) {\n    sides.forEach(side => {\n      if (side === 'vertical') {\n        newValues.top = newValue;\n        newValues.bottom = newValue;\n      } else if (side === 'horizontal') {\n        newValues.left = newValue;\n        newValues.right = newValue;\n      } else {\n        newValues[side] = newValue;\n      }\n    });\n  } else {\n    ALL_SIDES.forEach(side => newValues[side] = newValue);\n  }\n  return newValues;\n}\n\n/**\n * Return the allowed sides based on the sides configuration.\n *\n * @param sides Sides configuration.\n * @return Allowed sides.\n */\nexport function getAllowedSides(sides) {\n  const allowedSides = new Set(!sides ? ALL_SIDES : []);\n  sides?.forEach(allowedSide => {\n    if (allowedSide === 'vertical') {\n      allowedSides.add('top');\n      allowedSides.add('bottom');\n    } else if (allowedSide === 'horizontal') {\n      allowedSides.add('right');\n      allowedSides.add('left');\n    } else {\n      allowedSides.add(allowedSide);\n    }\n  });\n  return allowedSides;\n}\n\n/**\n * Checks if a value is a preset value.\n *\n * @param value     The value to check.\n * @param presetKey The preset key to check against.\n * @return Whether the value is a preset value.\n */\nexport function isValuePreset(value, presetKey) {\n  return value.startsWith(`var:preset|${presetKey}|`);\n}\n\n/**\n * Returns the index of the preset value in the presets array.\n *\n * @param value     The value to check.\n * @param presetKey The preset key to check against.\n * @param presets   The array of presets to search.\n * @return The index of the preset value in the presets array.\n */\nexport function getPresetIndexFromValue(value, presetKey, presets) {\n  if (!isValuePreset(value, presetKey)) {\n    return undefined;\n  }\n  const match = value.match(new RegExp(`^var:preset\\\\|${presetKey}\\\\|(.+)$`));\n  if (!match) {\n    return undefined;\n  }\n  const slug = match[1];\n  const index = presets.findIndex(preset => {\n    return preset.slug === slug;\n  });\n  return index !== -1 ? index : undefined;\n}\n\n/**\n * Returns the preset value from the index.\n *\n * @param index     The index of the preset value in the presets array.\n * @param presetKey The preset key to check against.\n * @param presets   The array of presets to search.\n * @return The preset value from the index.\n */\nexport function getPresetValueFromIndex(index, presetKey, presets) {\n  const preset = presets[index];\n  return `var:preset|${presetKey}|${preset.slug}`;\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nexport const CUSTOM_VALUE_SETTINGS = {\n  px: {\n    max: 300,\n    step: 1\n  },\n  '%': {\n    max: 100,\n    step: 1\n  },\n  vw: {\n    max: 100,\n    step: 1\n  },\n  vh: {\n    max: 100,\n    step: 1\n  },\n  em: {\n    max: 10,\n    step: 0.1\n  },\n  rm: {\n    max: 10,\n    step: 0.1\n  },\n  svw: {\n    max: 100,\n    step: 1\n  },\n  lvw: {\n    max: 100,\n    step: 1\n  },\n  dvw: {\n    max: 100,\n    step: 1\n  },\n  svh: {\n    max: 100,\n    step: 1\n  },\n  lvh: {\n    max: 100,\n    step: 1\n  },\n  dvh: {\n    max: 100,\n    step: 1\n  },\n  vi: {\n    max: 100,\n    step: 1\n  },\n  svi: {\n    max: 100,\n    step: 1\n  },\n  lvi: {\n    max: 100,\n    step: 1\n  },\n  dvi: {\n    max: 100,\n    step: 1\n  },\n  vb: {\n    max: 100,\n    step: 1\n  },\n  svb: {\n    max: 100,\n    step: 1\n  },\n  lvb: {\n    max: 100,\n    step: 1\n  },\n  dvb: {\n    max: 100,\n    step: 1\n  },\n  vmin: {\n    max: 100,\n    step: 1\n  },\n  svmin: {\n    max: 100,\n    step: 1\n  },\n  lvmin: {\n    max: 100,\n    step: 1\n  },\n  dvmin: {\n    max: 100,\n    step: 1\n  },\n  vmax: {\n    max: 100,\n    step: 1\n  },\n  svmax: {\n    max: 100,\n    step: 1\n  },\n  lvmax: {\n    max: 100,\n    step: 1\n  },\n  dvmax: {\n    max: 100,\n    step: 1\n  }\n};\nexport const LABELS = {\n  all: __('All sides'),\n  top: __('Top side'),\n  bottom: __('Bottom side'),\n  left: __('Left side'),\n  right: __('Right side'),\n  vertical: __('Top and bottom sides'),\n  horizontal: __('Left and right sides')\n};\nexport const DEFAULT_VALUES = {\n  top: undefined,\n  right: undefined,\n  bottom: undefined,\n  left: undefined\n};\nexport const ALL_SIDES = ['top', 'right', 'bottom', 'left'];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param arr Array of items to check.\n * @return The item with the most occurrences.\n */\nfunction mode(arr) {\n  return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();\n}\n\n/**\n * Gets the merged input value and unit from values data.\n *\n * @param values         Box values.\n * @param availableSides Available box sides to evaluate.\n *\n * @return A value + unit for the 'all' input.\n */\nexport function getMergedValue(values = {}, availableSides = ALL_SIDES) {\n  const sides = normalizeSides(availableSides);\n  if (sides.every(side => values[side] === values[sides[0]])) {\n    return values[sides[0]];\n  }\n  return undefined;\n}\n\n/**\n * Checks if the values are mixed.\n *\n * @param values         Box values.\n * @param availableSides Available box sides to evaluate.\n * @return Whether the values are mixed.\n */\nexport function isValueMixed(values = {}, availableSides = ALL_SIDES) {\n  const sides = normalizeSides(availableSides);\n  return sides.some(side => values[side] !== values[sides[0]]);\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param selectedUnits Current unit selections for individual sides.\n * @return  Most common unit selection.\n */\nexport function getAllUnitFallback(selectedUnits) {\n  if (!selectedUnits || typeof selectedUnits !== 'object') {\n    return undefined;\n  }\n  const filteredUnits = Object.values(selectedUnits).filter(Boolean);\n  return mode(filteredUnits);\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param values Box values.\n *\n * @return  Whether values are mixed.\n */\nexport function isValuesDefined(values) {\n  return values && Object.values(values).filter(\n  // Switching units when input is empty causes values only\n  // containing units. This gives false positive on mixed values\n  // unless filtered.\n  value => !!value && /\\d/.test(value)).length > 0;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param sides Available sides for box control.\n * @return Normalized sides configuration.\n */\nexport function normalizeSides(sides) {\n  const filteredSides = [];\n  if (!sides?.length) {\n    return ALL_SIDES;\n  }\n  if (sides.includes('vertical')) {\n    filteredSides.push(...['top', 'bottom']);\n  } else if (sides.includes('horizontal')) {\n    filteredSides.push(...['left', 'right']);\n  } else {\n    const newSides = ALL_SIDES.filter(side => sides.includes(side));\n    filteredSides.push(...newSides);\n  }\n  return filteredSides;\n}\n\n/**\n * Applies a value to an object representing top, right, bottom and left sides\n * while taking into account any custom side configuration.\n *\n * @deprecated\n *\n * @param currentValues The current values for each side.\n * @param newValue      The value to apply to the sides object.\n * @param sides         Array defining valid sides.\n *\n * @return Object containing the updated values for each side.\n */\nexport function applyValueToSides(currentValues, newValue, sides) {\n  deprecated('applyValueToSides', {\n    since: '6.8',\n    version: '7.0'\n  });\n  const newValues = {\n    ...currentValues\n  };\n  if (sides?.length) {\n    sides.forEach(side => {\n      if (side === 'vertical') {\n        newValues.top = newValue;\n        newValues.bottom = newValue;\n      } else if (side === 'horizontal') {\n        newValues.left = newValue;\n        newValues.right = newValue;\n      } else {\n        newValues[side] = newValue;\n      }\n    });\n  } else {\n    ALL_SIDES.forEach(side => newValues[side] = newValue);\n  }\n  return newValues;\n}\n\n/**\n * Return the allowed sides based on the sides configuration.\n *\n * @param sides Sides configuration.\n * @return Allowed sides.\n */\nexport function getAllowedSides(sides) {\n  const allowedSides = new Set(!sides ? ALL_SIDES : []);\n  sides?.forEach(allowedSide => {\n    if (allowedSide === 'vertical') {\n      allowedSides.add('top');\n      allowedSides.add('bottom');\n    } else if (allowedSide === 'horizontal') {\n      allowedSides.add('right');\n      allowedSides.add('left');\n    } else {\n      allowedSides.add(allowedSide);\n    }\n  });\n  return allowedSides;\n}\n\n/**\n * Checks if a value is a preset value.\n *\n * @param value     The value to check.\n * @param presetKey The preset key to check against.\n * @return Whether the value is a preset value.\n */\nexport function isValuePreset(value, presetKey) {\n  return value.startsWith(`var:preset|${presetKey}|`);\n}\n\n/**\n * Returns the index of the preset value in the presets array.\n *\n * @param value     The value to check.\n * @param presetKey The preset key to check against.\n * @param presets   The array of presets to search.\n * @return The index of the preset value in the presets array.\n */\nexport function getPresetIndexFromValue(value, presetKey, presets) {\n  if (!isValuePreset(value, presetKey)) {\n    return undefined;\n  }\n  const match = value.match(new RegExp(`^var:preset\\\\|${presetKey}\\\\|(.+)$`));\n  if (!match) {\n    return undefined;\n  }\n  const slug = match[1];\n  const index = presets.findIndex(preset => {\n    return preset.slug === slug;\n  });\n  return index !== -1 ? index : undefined;\n}\n\n/**\n * Returns the preset value from the index.\n *\n * @param index     The index of the preset value in the presets array.\n * @param presetKey The preset key to check against.\n * @param presets   The array of presets to search.\n * @return The preset value from the index.\n */\nexport function getPresetValueFromIndex(index, presetKey, presets) {\n  const preset = presets[index];\n  return `var:preset|${presetKey}|${preset.slug}`;\n}"],
+  "mappings": "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",
   "names": []
 }

package/build-module/calendar/utils/use-localization-props.mjs

@@ -3,8 +3,9 @@ import { __, sprintf } from "@wordpress/i18n";
 import { useMemo } from "@wordpress/element";
 function isLocaleRTL(localeCode) {
   const localeObj = new Intl.Locale(localeCode);
-  if ("getTextInfo" in localeObj) {
-    return localeObj.getTextInfo().direction === "rtl";
+  const direction = localeObj.getTextInfo?.().direction;
+  if (direction) {
+    return direction === "rtl";
   }
   return [
     "ar",

package/build-module/calendar/utils/use-localization-props.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/calendar/utils/use-localization-props.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nfunction isLocaleRTL(localeCode) {\n  const localeObj = new Intl.Locale(localeCode);\n  if ('getTextInfo' in localeObj) {\n    // @ts-expect-error - getTextInfo is not typed yet\n    // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo\n    return localeObj.getTextInfo().direction === 'rtl';\n  }\n  return ['ar',\n  // Arabic\n  'he',\n  // Hebrew\n  'fa',\n  // Persian (Farsi)\n  'ur',\n  // Urdu\n  'ps',\n  // Pashto\n  'syr',\n  // Syriac\n  'dv',\n  // Divehi\n  'ku',\n  // Kurdish (Sorani)\n  'yi' // Yiddish\n  ].includes(localeObj.language);\n}\n\n/**\n * Returns localization props for the calendar components.\n *\n * Notes:\n * - the following props should be intended as defaults, and should\n *   be overridden by consumer props if listed as public props.\n * - It is possible for the translated strings to use a different locale\n *   than the formatted dates and the computed `dir`. This is because the\n *   translation function doesn't expose the locale used for the translated\n *   strings, meaning that the dates are formatted using the `locale` prop.\n *   For a correct localized experience, consumers should make sure that\n *   translation context and `locale` prop are consistent.\n * @param props\n * @param props.locale\n * @param props.timeZone\n * @param props.mode\n */\nexport const useLocalizationProps = ({\n  locale,\n  timeZone,\n  mode\n}) => {\n  return useMemo(() => {\n    // ie. April 2025\n    const monthNameFormatter = new Intl.DateTimeFormat(locale.code, {\n      year: 'numeric',\n      month: 'long',\n      timeZone\n    });\n    // ie. M, T, W, T, F, S, S\n    const weekdayNarrowFormatter = new Intl.DateTimeFormat(locale.code, {\n      weekday: 'narrow',\n      timeZone\n    });\n    // ie. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday\n    const weekdayLongFormatter = new Intl.DateTimeFormat(locale.code, {\n      weekday: 'long',\n      timeZone\n    });\n    // ie. Monday, April 29, 2025\n    const fullDateFormatter = new Intl.DateTimeFormat(locale.code, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      timeZone\n    });\n\n    // Note: the following props should be intended as defaults, and should\n    // be overridden by consumer props if listed as public props.\n    return {\n      'aria-label': mode === 'single' ? __('Date calendar') : __('Date range calendar'),\n      labels: {\n        /**\n         * The label for the month grid.\n         * @param date\n         */\n        labelGrid: date => monthNameFormatter.format(date),\n        /**\n         * The label for the gridcell, when the calendar is not interactive.\n         * @param date\n         * @param modifiers\n         */\n        labelGridcell: (date, modifiers) => {\n          const formattedDate = fullDateFormatter.format(date);\n          let label = formattedDate;\n          if (modifiers?.today) {\n            label = sprintf(\n            // translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n            __('Today, %s'), formattedDate);\n          }\n          return label;\n        },\n        /** The label for the \"next month\" button. */\n        labelNext: () => __('Go to the Next Month'),\n        /** The label for the \"previous month\" button. */\n        labelPrevious: () => __('Go to the Previous Month'),\n        /**\n         * The label for the day button.\n         * @param date\n         * @param modifiers\n         */\n        labelDayButton: (date, modifiers) => {\n          const formattedDate = fullDateFormatter.format(date);\n          let label = formattedDate;\n          if (modifiers?.today) {\n            label = sprintf(\n            // translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n            __('Today, %s'), formattedDate);\n          }\n          if (modifiers?.selected) {\n            label = sprintf(\n            // translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n            __('%s, selected'), formattedDate);\n          }\n          return label;\n        },\n        /**\n         * The label for the weekday.\n         * @param date\n         */\n        labelWeekday: date => weekdayLongFormatter.format(date)\n      },\n      locale,\n      dir: isLocaleRTL(locale.code) ? 'rtl' : 'ltr',\n      formatters: {\n        formatWeekdayName: date => {\n          return weekdayNarrowFormatter.format(date);\n        },\n        formatCaption: date => {\n          return monthNameFormatter.format(date);\n        }\n      },\n      timeZone\n    };\n  }, [locale, timeZone, mode]);\n};"],
-  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,eAAe;AAKxB,SAAS,YAAY,YAAY;AAC/B,QAAM,YAAY,IAAI,KAAK,OAAO,UAAU;AAC5C,MAAI,iBAAiB,WAAW;AAG9B,WAAO,UAAU,YAAY,EAAE,cAAc;AAAA,EAC/C;AACA,SAAO;AAAA,IAAC;AAAA;AAAA,IAER;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,EACA,EAAE,SAAS,UAAU,QAAQ;AAC/B;AAmBO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SAAO,QAAQ,MAAM;AAEnB,UAAM,qBAAqB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAC9D,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAED,UAAM,yBAAyB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAClE,SAAS;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,uBAAuB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAChE,SAAS;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,oBAAoB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAC7D,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAID,WAAO;AAAA,MACL,cAAc,SAAS,WAAW,GAAG,eAAe,IAAI,GAAG,qBAAqB;AAAA,MAChF,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAKN,WAAW,UAAQ,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjD,eAAe,CAAC,MAAM,cAAc;AAClC,gBAAM,gBAAgB,kBAAkB,OAAO,IAAI;AACnD,cAAI,QAAQ;AACZ,cAAI,WAAW,OAAO;AACpB,oBAAQ;AAAA;AAAA,cAER,GAAG,WAAW;AAAA,cAAG;AAAA,YAAa;AAAA,UAChC;AACA,iBAAO;AAAA,QACT;AAAA;AAAA,QAEA,WAAW,MAAM,GAAG,sBAAsB;AAAA;AAAA,QAE1C,eAAe,MAAM,GAAG,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMlD,gBAAgB,CAAC,MAAM,cAAc;AACnC,gBAAM,gBAAgB,kBAAkB,OAAO,IAAI;AACnD,cAAI,QAAQ;AACZ,cAAI,WAAW,OAAO;AACpB,oBAAQ;AAAA;AAAA,cAER,GAAG,WAAW;AAAA,cAAG;AAAA,YAAa;AAAA,UAChC;AACA,cAAI,WAAW,UAAU;AACvB,oBAAQ;AAAA;AAAA,cAER,GAAG,cAAc;AAAA,cAAG;AAAA,YAAa;AAAA,UACnC;AACA,iBAAO;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,cAAc,UAAQ,qBAAqB,OAAO,IAAI;AAAA,MACxD;AAAA,MACA;AAAA,MACA,KAAK,YAAY,OAAO,IAAI,IAAI,QAAQ;AAAA,MACxC,YAAY;AAAA,QACV,mBAAmB,UAAQ;AACzB,iBAAO,uBAAuB,OAAO,IAAI;AAAA,QAC3C;AAAA,QACA,eAAe,UAAQ;AACrB,iBAAO,mBAAmB,OAAO,IAAI;AAAA,QACvC;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,IAAI,CAAC;AAC7B;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nfunction isLocaleRTL(localeCode) {\n  const localeObj = new Intl.Locale(localeCode);\n  const direction = localeObj.getTextInfo?.().direction;\n  if (direction) {\n    return direction === 'rtl';\n  }\n  return ['ar',\n  // Arabic\n  'he',\n  // Hebrew\n  'fa',\n  // Persian (Farsi)\n  'ur',\n  // Urdu\n  'ps',\n  // Pashto\n  'syr',\n  // Syriac\n  'dv',\n  // Divehi\n  'ku',\n  // Kurdish (Sorani)\n  'yi' // Yiddish\n  ].includes(localeObj.language);\n}\n\n/**\n * Returns localization props for the calendar components.\n *\n * Notes:\n * - the following props should be intended as defaults, and should\n *   be overridden by consumer props if listed as public props.\n * - It is possible for the translated strings to use a different locale\n *   than the formatted dates and the computed `dir`. This is because the\n *   translation function doesn't expose the locale used for the translated\n *   strings, meaning that the dates are formatted using the `locale` prop.\n *   For a correct localized experience, consumers should make sure that\n *   translation context and `locale` prop are consistent.\n * @param props\n * @param props.locale\n * @param props.timeZone\n * @param props.mode\n */\nexport const useLocalizationProps = ({\n  locale,\n  timeZone,\n  mode\n}) => {\n  return useMemo(() => {\n    // ie. April 2025\n    const monthNameFormatter = new Intl.DateTimeFormat(locale.code, {\n      year: 'numeric',\n      month: 'long',\n      timeZone\n    });\n    // ie. M, T, W, T, F, S, S\n    const weekdayNarrowFormatter = new Intl.DateTimeFormat(locale.code, {\n      weekday: 'narrow',\n      timeZone\n    });\n    // ie. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday\n    const weekdayLongFormatter = new Intl.DateTimeFormat(locale.code, {\n      weekday: 'long',\n      timeZone\n    });\n    // ie. Monday, April 29, 2025\n    const fullDateFormatter = new Intl.DateTimeFormat(locale.code, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      timeZone\n    });\n\n    // Note: the following props should be intended as defaults, and should\n    // be overridden by consumer props if listed as public props.\n    return {\n      'aria-label': mode === 'single' ? __('Date calendar') : __('Date range calendar'),\n      labels: {\n        /**\n         * The label for the month grid.\n         * @param date\n         */\n        labelGrid: date => monthNameFormatter.format(date),\n        /**\n         * The label for the gridcell, when the calendar is not interactive.\n         * @param date\n         * @param modifiers\n         */\n        labelGridcell: (date, modifiers) => {\n          const formattedDate = fullDateFormatter.format(date);\n          let label = formattedDate;\n          if (modifiers?.today) {\n            label = sprintf(\n            // translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n            __('Today, %s'), formattedDate);\n          }\n          return label;\n        },\n        /** The label for the \"next month\" button. */\n        labelNext: () => __('Go to the Next Month'),\n        /** The label for the \"previous month\" button. */\n        labelPrevious: () => __('Go to the Previous Month'),\n        /**\n         * The label for the day button.\n         * @param date\n         * @param modifiers\n         */\n        labelDayButton: (date, modifiers) => {\n          const formattedDate = fullDateFormatter.format(date);\n          let label = formattedDate;\n          if (modifiers?.today) {\n            label = sprintf(\n            // translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n            __('Today, %s'), formattedDate);\n          }\n          if (modifiers?.selected) {\n            label = sprintf(\n            // translators: %s is the full date (e.g. \"Monday, April 29, 2025\")\n            __('%s, selected'), formattedDate);\n          }\n          return label;\n        },\n        /**\n         * The label for the weekday.\n         * @param date\n         */\n        labelWeekday: date => weekdayLongFormatter.format(date)\n      },\n      locale,\n      dir: isLocaleRTL(locale.code) ? 'rtl' : 'ltr',\n      formatters: {\n        formatWeekdayName: date => {\n          return weekdayNarrowFormatter.format(date);\n        },\n        formatCaption: date => {\n          return monthNameFormatter.format(date);\n        }\n      },\n      timeZone\n    };\n  }, [locale, timeZone, mode]);\n};"],
+  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,eAAe;AAKxB,SAAS,YAAY,YAAY;AAC/B,QAAM,YAAY,IAAI,KAAK,OAAO,UAAU;AAC5C,QAAM,YAAY,UAAU,cAAc,EAAE;AAC5C,MAAI,WAAW;AACb,WAAO,cAAc;AAAA,EACvB;AACA,SAAO;AAAA,IAAC;AAAA;AAAA,IAER;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,EACA,EAAE,SAAS,UAAU,QAAQ;AAC/B;AAmBO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SAAO,QAAQ,MAAM;AAEnB,UAAM,qBAAqB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAC9D,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAED,UAAM,yBAAyB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAClE,SAAS;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,uBAAuB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAChE,SAAS;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,oBAAoB,IAAI,KAAK,eAAe,OAAO,MAAM;AAAA,MAC7D,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAID,WAAO;AAAA,MACL,cAAc,SAAS,WAAW,GAAG,eAAe,IAAI,GAAG,qBAAqB;AAAA,MAChF,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAKN,WAAW,UAAQ,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjD,eAAe,CAAC,MAAM,cAAc;AAClC,gBAAM,gBAAgB,kBAAkB,OAAO,IAAI;AACnD,cAAI,QAAQ;AACZ,cAAI,WAAW,OAAO;AACpB,oBAAQ;AAAA;AAAA,cAER,GAAG,WAAW;AAAA,cAAG;AAAA,YAAa;AAAA,UAChC;AACA,iBAAO;AAAA,QACT;AAAA;AAAA,QAEA,WAAW,MAAM,GAAG,sBAAsB;AAAA;AAAA,QAE1C,eAAe,MAAM,GAAG,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMlD,gBAAgB,CAAC,MAAM,cAAc;AACnC,gBAAM,gBAAgB,kBAAkB,OAAO,IAAI;AACnD,cAAI,QAAQ;AACZ,cAAI,WAAW,OAAO;AACpB,oBAAQ;AAAA;AAAA,cAER,GAAG,WAAW;AAAA,cAAG;AAAA,YAAa;AAAA,UAChC;AACA,cAAI,WAAW,UAAU;AACvB,oBAAQ;AAAA;AAAA,cAER,GAAG,cAAc;AAAA,cAAG;AAAA,YAAa;AAAA,UACnC;AACA,iBAAO;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,cAAc,UAAQ,qBAAqB,OAAO,IAAI;AAAA,MACxD;AAAA,MACA;AAAA,MACA,KAAK,YAAY,OAAO,IAAI,IAAI,QAAQ;AAAA,MACxC,YAAY;AAAA,QACV,mBAAmB,UAAQ;AACzB,iBAAO,uBAAuB,OAAO,IAAI;AAAA,QAC3C;AAAA,QACA,eAAe,UAAQ;AACrB,iBAAO,mBAAmB,OAAO,IAAI;AAAA,QACvC;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,IAAI,CAAC;AAC7B;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n  if (type === 'linear-gradient' && gradientAST.orientation) {\n    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n  }\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${lastLinearOrientationAngle.current}`\n      },\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n  const onAngleChange = newAngle => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${newAngle}`\n      }\n    }));\n  };\n  return /*#__PURE__*/_jsx(AnglePickerControl, {\n    onChange: onAngleChange,\n    value: hasGradient ? angle : ''\n  });\n};\nconst GradientTypePicker = ({\n  gradientAST,\n  hasGradient,\n  onChange\n}) => {\n  const {\n    type\n  } = gradientAST;\n  const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n  if (type === 'linear-gradient' && gradientAST.orientation) {\n    // eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196\n    lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n  }\n  const onSetLinearGradient = () => {\n    onChange(serializeGradient({\n      ...gradientAST,\n      orientation: {\n        type: 'angular',\n        value: `${lastLinearOrientationAngle.current}`\n      },\n      type: 'linear-gradient'\n    }));\n  };\n  const onSetRadialGradient = () => {\n    const {\n      orientation,\n      ...restGradientAST\n    } = gradientAST;\n    onChange(serializeGradient({\n      ...restGradientAST,\n      type: 'radial-gradient'\n    }));\n  };\n  const handleOnChange = next => {\n    if (next === 'linear-gradient') {\n      onSetLinearGradient();\n    }\n    if (next === 'radial-gradient') {\n      onSetRadialGradient();\n    }\n  };\n  return /*#__PURE__*/_jsx(SelectControl, {\n    className: \"components-custom-gradient-picker__type-picker\",\n    label: __('Type'),\n    labelPosition: \"top\",\n    onChange: handleOnChange,\n    options: GRADIENT_OPTIONS,\n    size: \"__unstable-large\",\n    value: hasGradient ? type : undefined\n  });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState();\n *\n *   return (\n *     <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n *     />\n *   );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n  value,\n  onChange,\n  enableAlpha = true,\n  __experimentalIsRenderedInSidebar = false\n}) {\n  const {\n    gradientAST,\n    hasGradient\n  } = getGradientAstWithDefault(value);\n\n  // On radial gradients the bar should display a linear gradient.\n  // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n  // On liner gradients the bar represents the color stops from left to right independently of the angle.\n  const background = getLinearGradientRepresentation(gradientAST);\n\n  // Control points color option may be hex from presets, custom colors will be rgb.\n  // The position should always be a percentage.\n  const controlPoints = gradientAST.colorStops.map(colorStop => {\n    return {\n      color: getStopCssColor(colorStop),\n      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n      // TypeScript doesn't know that `colorStop.length` is not undefined here.\n      // @ts-expect-error\n      position: parseInt(colorStop.length.value)\n    };\n  });\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 4,\n    className: \"components-custom-gradient-picker\",\n    children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      disableAlpha: !enableAlpha,\n      background: background,\n      hasGradient: hasGradient,\n      value: controlPoints,\n      onChange: newControlPoints => {\n        onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n      }\n    }), /*#__PURE__*/_jsxs(Flex, {\n      gap: 3,\n      className: \"components-custom-gradient-picker__ui-line\",\n      children: [/*#__PURE__*/_jsx(SelectWrapper, {\n        children: /*#__PURE__*/_jsx(GradientTypePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n        children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n          gradientAST: gradientAST,\n          hasGradient: hasGradient,\n          onChange: onChange\n        })\n      })]\n    })]\n  });\n}\nexport default CustomGradientPicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/custom-select-control/index.mjs

@@ -3,7 +3,7 @@ import * as Ariakit from "@ariakit/react";
 import clsx from "clsx";
 import { useInstanceId } from "@wordpress/compose";
 import { __, sprintf } from "@wordpress/i18n";
-import _CustomSelect from "../custom-select-control-v2/custom-select.mjs";
+import CustomSelect from "../custom-select-control-v2/custom-select.mjs";
 import CustomSelectItem from "../custom-select-control-v2/item.mjs";
 import * as Styled from "../custom-select-control-v2/styles.mjs";
 import { VisuallyHidden } from "../visually-hidden/index.mjs";
@@ -133,7 +133,7 @@ function CustomSelectControl(props) {
     return size;
   })();
   return /* @__PURE__ */ _jsxs(_Fragment, {
-    children: [/* @__PURE__ */ _jsx(_CustomSelect, {
+    children: [/* @__PURE__ */ _jsx(CustomSelect, {
       "aria-describedby": descriptionId,
       renderSelectedValue,
       size: translatedSize,

package/build-module/custom-select-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  __experimentalShowSelectedHint,\n  ...otherProps\n}) {\n  return {\n    showSelectedHint: __experimentalShowSelectedHint,\n    ...otherProps\n  };\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations({\n  __experimentalHint,\n  ...rest\n}) {\n  return {\n    hint: __experimentalHint,\n    ...rest\n  };\n}\nfunction getDescribedBy(currentName, describedBy) {\n  if (describedBy) {\n    return describedBy;\n  }\n\n  // translators: %s: The selected option.\n  return sprintf(__('Currently selected: %s'), currentName);\n}\nfunction CustomSelectControl(props) {\n  const {\n    __next40pxDefaultSize = false,\n    __shouldNotWarnDeprecated36pxSize,\n    describedBy,\n    options,\n    onChange,\n    size = 'default',\n    value,\n    className: classNameProp,\n    showSelectedHint = false,\n    ...restProps\n  } = useDeprecatedProps(props);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'CustomSelectControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');\n\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    async setValue(nextValue) {\n      const nextOption = options.find(item => item.key === nextValue);\n      if (!onChange || !nextOption) {\n        return;\n      }\n\n      // Executes the logic in a microtask after the popup is closed.\n      // This is simply to ensure the isOpen state matches the one from the\n      // previous legacy implementation.\n      await Promise.resolve();\n      const state = store.getState();\n      const changeObject = {\n        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),\n        inputValue: '',\n        isOpen: state.open,\n        selectedItem: nextOption,\n        type: ''\n      };\n      onChange(changeObject);\n    },\n    value: value?.key,\n    // Setting the first option as a default value when no value is provided\n    // is already done natively by the underlying Ariakit component,\n    // but doing this explicitly avoids the `onChange` callback from firing\n    // on initial render, thus making this implementation closer to the v1.\n    defaultValue: options[0]?.key\n  });\n  const children = options.map(applyOptionDeprecations).map(({\n    name,\n    key,\n    hint,\n    style,\n    className\n  }) => {\n    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        children: name\n      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__item-hint\",\n        children: hint\n      })]\n    });\n    return /*#__PURE__*/_jsx(CustomSelectItem, {\n      value: key,\n      children: hint ? withHint : name,\n      style: style,\n      className: clsx(className,\n      // Keeping the classnames for legacy reasons\n      'components-custom-select-control__item', {\n        'has-hint': hint\n      })\n    }, key);\n  });\n  const currentValue = Ariakit.useStoreState(store, 'value');\n  const selectedOption = options?.map(applyOptionDeprecations)?.find(({\n    key\n  }) => currentValue === key) ?? options[0];\n  const renderSelectedValue = () => {\n    if (!showSelectedHint || !selectedOption.hint) {\n      return selectedOption?.name;\n    }\n    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {\n      children: [selectedOption?.name, /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__hint\",\n        children: selectedOption?.hint\n      })]\n    });\n  };\n  const translatedSize = (() => {\n    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {\n      return 'default';\n    }\n    if (!__next40pxDefaultSize && size === 'default') {\n      return 'compact';\n    }\n    return size;\n  })();\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(_CustomSelect, {\n      \"aria-describedby\": descriptionId,\n      renderSelectedValue: renderSelectedValue,\n      size: translatedSize,\n      store: store,\n      className: clsx(\n      // Keeping the classname for legacy reasons\n      'components-custom-select-control', classNameProp),\n      isLegacy: true,\n      ...restProps,\n      children: children\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: getDescribedBy(selectedOption?.name, describedBy)\n      })\n    })]\n  });\n}\nexport default CustomSelectControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nfunction useDeprecatedProps({\n  __experimentalShowSelectedHint,\n  ...otherProps\n}) {\n  return {\n    showSelectedHint: __experimentalShowSelectedHint,\n    ...otherProps\n  };\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations({\n  __experimentalHint,\n  ...rest\n}) {\n  return {\n    hint: __experimentalHint,\n    ...rest\n  };\n}\nfunction getDescribedBy(currentName, describedBy) {\n  if (describedBy) {\n    return describedBy;\n  }\n\n  // translators: %s: The selected option.\n  return sprintf(__('Currently selected: %s'), currentName);\n}\nfunction CustomSelectControl(props) {\n  const {\n    __next40pxDefaultSize = false,\n    __shouldNotWarnDeprecated36pxSize,\n    describedBy,\n    options,\n    onChange,\n    size = 'default',\n    value,\n    className: classNameProp,\n    showSelectedHint = false,\n    ...restProps\n  } = useDeprecatedProps(props);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'CustomSelectControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  const descriptionId = useInstanceId(CustomSelectControl, 'custom-select-control__description');\n\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    async setValue(nextValue) {\n      const nextOption = options.find(item => item.key === nextValue);\n      if (!onChange || !nextOption) {\n        return;\n      }\n\n      // Executes the logic in a microtask after the popup is closed.\n      // This is simply to ensure the isOpen state matches the one from the\n      // previous legacy implementation.\n      await Promise.resolve();\n      const state = store.getState();\n      const changeObject = {\n        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),\n        inputValue: '',\n        isOpen: state.open,\n        selectedItem: nextOption,\n        type: ''\n      };\n      onChange(changeObject);\n    },\n    value: value?.key,\n    // Setting the first option as a default value when no value is provided\n    // is already done natively by the underlying Ariakit component,\n    // but doing this explicitly avoids the `onChange` callback from firing\n    // on initial render, thus making this implementation closer to the v1.\n    defaultValue: options[0]?.key\n  });\n  const children = options.map(applyOptionDeprecations).map(({\n    name,\n    key,\n    hint,\n    style,\n    className\n  }) => {\n    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        children: name\n      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__item-hint\",\n        children: hint\n      })]\n    });\n    return /*#__PURE__*/_jsx(CustomSelectItem, {\n      value: key,\n      children: hint ? withHint : name,\n      style: style,\n      className: clsx(className,\n      // Keeping the classnames for legacy reasons\n      'components-custom-select-control__item', {\n        'has-hint': hint\n      })\n    }, key);\n  });\n  const currentValue = Ariakit.useStoreState(store, 'value');\n  const selectedOption = options?.map(applyOptionDeprecations)?.find(({\n    key\n  }) => currentValue === key) ?? options[0];\n  const renderSelectedValue = () => {\n    if (!showSelectedHint || !selectedOption.hint) {\n      return selectedOption?.name;\n    }\n    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {\n      children: [selectedOption?.name, /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {\n        // Keeping the classname for legacy reasons\n        className: \"components-custom-select-control__hint\",\n        children: selectedOption?.hint\n      })]\n    });\n  };\n  const translatedSize = (() => {\n    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {\n      return 'default';\n    }\n    if (!__next40pxDefaultSize && size === 'default') {\n      return 'compact';\n    }\n    return size;\n  })();\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(CustomSelect, {\n      \"aria-describedby\": descriptionId,\n      renderSelectedValue: renderSelectedValue,\n      size: translatedSize,\n      store: store,\n      className: clsx(\n      // Keeping the classname for legacy reasons\n      'components-custom-select-control', classNameProp),\n      isLegacy: true,\n      ...restProps,\n      children: children\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: getDescribedBy(selectedOption?.name, describedBy)\n      })\n    })]\n  });\n}\nexport default CustomSelectControl;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/custom-select-control-v2/custom-select.mjs

@@ -42,7 +42,7 @@ var CustomSelectButton = ({
     children: computedRenderSelectedValue(currentValue)
   });
 };
-function _CustomSelect(props) {
+function CustomSelect(props) {
   const {
     children,
     hideLabelFromVision = false,
@@ -103,7 +103,7 @@ function _CustomSelect(props) {
     })
   );
 }
-var custom_select_default = _CustomSelect;
+var custom_select_default = CustomSelect;
 export {
   CustomSelectContext,
   custom_select_default as default

package/build-module/custom-select-control-v2/custom-select.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control-v2/custom-select.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue ?? defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction _CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        __next40pxDefaultSize: true,\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default _CustomSelect;"],
-  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,eAAe,aAAa,eAAe;AACpD,SAAS,IAAI,IAAI,eAAe;AAKhC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,OAAO,eAAe;AACtB,OAAO,8BAA8B;AACrC,OAAO,iBAAiB;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,sBAAsB,cAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,WAAO,GAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,IAAI;AAAA;AAAA,MAEvC,GAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAY,sBAAc,KAAK;AAC/B,QAAM,8BAA8B,QAAQ,MAAM,uBAAuB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1H,SAAoB,qBAAY,eAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,cAAc,OAAO;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,yBAAyB,YAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,sBAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,qBAAa,qBAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,qBAAK,gBAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,qBAAK,YAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,sBAAM,WAAW;AAAA,QAChC,uBAAuB;AAAA,QACvB;AAAA,QACA,QAAqB,qBAAK,0BAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,qBAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,qBAAY,sBAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,qBAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport * as Styled from './styles';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const CustomSelectContext = createContext(undefined);\nCustomSelectContext.displayName = 'CustomSelectContext';\nfunction defaultRenderSelectedValue(value) {\n  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;\n  if (isValueEmpty) {\n    return __('Select an item');\n  }\n  if (Array.isArray(value)) {\n    return value.length === 1 ? value[0] : sprintf(\n    // translators: %d: number of items selected (it will always be 2 or more items)\n    _n('%d item selected', '%d items selected', value.length), value.length);\n  }\n  return value;\n}\nconst CustomSelectButton = ({\n  renderSelectedValue,\n  size = 'default',\n  store,\n  ...restProps\n}) => {\n  const {\n    value: currentValue\n  } = Ariakit.useStoreState(store);\n  const computedRenderSelectedValue = useMemo(() => renderSelectedValue ?? defaultRenderSelectedValue, [renderSelectedValue]);\n  return /*#__PURE__*/_jsx(Styled.Select, {\n    ...restProps,\n    size: size,\n    hasCustomRenderProp: !!renderSelectedValue,\n    store: store,\n    children: computedRenderSelectedValue(currentValue)\n  });\n};\nfunction CustomSelect(props) {\n  const {\n    children,\n    hideLabelFromVision = false,\n    label,\n    size,\n    store,\n    className,\n    isLegacy = false,\n    ...restProps\n  } = props;\n  const onSelectPopoverKeyDown = useCallback(e => {\n    if (isLegacy) {\n      e.stopPropagation();\n    }\n  }, [isLegacy]);\n  const contextValue = useMemo(() => ({\n    store,\n    size\n  }), [store, size]);\n  return (\n    /*#__PURE__*/\n    // Where should `restProps` be forwarded to?\n    _jsxs(\"div\", {\n      className: className,\n      children: [/*#__PURE__*/_jsx(Ariakit.SelectLabel, {\n        store: store,\n        render: hideLabelFromVision ?\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(VisuallyHidden, {}) :\n        /*#__PURE__*/\n        // @ts-expect-error `children` are passed via the render prop\n        _jsx(BaseControl.VisualLabel, {\n          as: \"div\"\n        }),\n        children: label\n      }), /*#__PURE__*/_jsxs(InputBase, {\n        __next40pxDefaultSize: true,\n        size: size,\n        suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),\n        children: [/*#__PURE__*/_jsx(CustomSelectButton, {\n          ...restProps,\n          size: size,\n          store: store\n          // Match legacy behavior (move selection rather than open the popover)\n          ,\n          showOnKeyDown: !isLegacy\n        }), /*#__PURE__*/_jsx(Styled.SelectPopover, {\n          gutter: 12,\n          store: store,\n          sameWidth: true,\n          slide: false,\n          onKeyDown: onSelectPopoverKeyDown\n          // Match legacy behavior\n          ,\n          flip: !isLegacy,\n          children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {\n            value: contextValue,\n            children: children\n          })\n        })]\n      })]\n    })\n  );\n}\nexport default CustomSelect;"],
+  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,eAAe,aAAa,eAAe;AACpD,SAAS,IAAI,IAAI,eAAe;AAKhC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,OAAO,eAAe;AACtB,OAAO,8BAA8B;AACrC,OAAO,iBAAiB;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,sBAAsB,cAAc,MAAS;AAC1D,oBAAoB,cAAc;AAClC,SAAS,2BAA2B,OAAO;AACzC,QAAM,eAAe,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,UAAU,UAAa,UAAU;AAClG,MAAI,cAAc;AAChB,WAAO,GAAG,gBAAgB;AAAA,EAC5B;AACA,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,WAAW,IAAI,MAAM,CAAC,IAAI;AAAA;AAAA,MAEvC,GAAG,oBAAoB,qBAAqB,MAAM,MAAM;AAAA,MAAG,MAAM;AAAA,IAAM;AAAA,EACzE;AACA,SAAO;AACT;AACA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM;AAAA,IACJ,OAAO;AAAA,EACT,IAAY,sBAAc,KAAK;AAC/B,QAAM,8BAA8B,QAAQ,MAAM,uBAAuB,4BAA4B,CAAC,mBAAmB,CAAC;AAC1H,SAAoB,qBAAY,eAAQ;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA,qBAAqB,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,UAAU,4BAA4B,YAAY;AAAA,EACpD,CAAC;AACH;AACA,SAAS,aAAa,OAAO;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,yBAAyB,YAAY,OAAK;AAC9C,QAAI,UAAU;AACZ,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,IAAI,CAAC;AACjB;AAAA;AAAA,IAGE,sBAAM,OAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAc,qBAAa,qBAAa;AAAA,QAChD;AAAA,QACA,QAAQ;AAAA;AAAA,UAGR,qBAAK,gBAAgB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGvB,qBAAK,YAAY,aAAa;AAAA,YAC5B,IAAI;AAAA,UACN,CAAC;AAAA;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,GAAgB,sBAAM,WAAW;AAAA,QAChC,uBAAuB;AAAA,QACvB;AAAA,QACA,QAAqB,qBAAK,0BAA0B,CAAC,CAAC;AAAA,QACtD,UAAU,CAAc,qBAAK,oBAAoB;AAAA,UAC/C,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UAGA,eAAe,CAAC;AAAA,QAClB,CAAC,GAAgB,qBAAY,sBAAe;AAAA,UAC1C,QAAQ;AAAA,UACR;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UAGX,MAAM,CAAC;AAAA,UACP,UAAuB,qBAAK,oBAAoB,UAAU;AAAA,YACxD,OAAO;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH,CAAC,CAAC;AAAA,MACJ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA;AAEL;AACA,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/custom-select-control-v2/index.mjs

@@ -1,6 +1,6 @@
 // packages/components/src/custom-select-control-v2/index.tsx
 import * as Ariakit from "@ariakit/react";
-import _CustomSelect from "./custom-select.mjs";
+import CustomSelect from "./custom-select.mjs";
 import Item from "./item.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CustomSelectControlV2(props) {
@@ -15,7 +15,7 @@ function CustomSelectControlV2(props) {
     defaultValue,
     value
   });
-  return /* @__PURE__ */ _jsx(_CustomSelect, {
+  return /* @__PURE__ */ _jsx(CustomSelect, {
     ...restProps,
     store
   });

package/build-module/custom-select-control-v2/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/custom-select-control-v2/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from './custom-select';\nimport Item from './item';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction CustomSelectControlV2(props) {\n  const {\n    defaultValue,\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    setValue: nextValue => onChange?.(nextValue),\n    defaultValue,\n    value\n  });\n  return /*#__PURE__*/_jsx(_CustomSelect, {\n    ...restProps,\n    store: store\n  });\n}\nCustomSelectControlV2.Item = Item;\nexport default CustomSelectControlV2;"],
-  "mappings": ";AAGA,YAAY,aAAa;AAIzB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,sBAAsB,OAAO;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAgB,uBAAe;AAAA,IACnC,UAAU,eAAa,WAAW,SAAS;AAAA,IAC3C;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,eAAe;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACA,sBAAsB,OAAO;AAC7B,IAAO,mCAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport CustomSelect from './custom-select';\nimport Item from './item';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction CustomSelectControlV2(props) {\n  const {\n    defaultValue,\n    onChange,\n    value,\n    ...restProps\n  } = props;\n  // Forward props + store from v2 implementation\n  const store = Ariakit.useSelectStore({\n    setValue: nextValue => onChange?.(nextValue),\n    defaultValue,\n    value\n  });\n  return /*#__PURE__*/_jsx(CustomSelect, {\n    ...restProps,\n    store: store\n  });\n}\nCustomSelectControlV2.Item = Item;\nexport default CustomSelectControlV2;"],
+  "mappings": ";AAGA,YAAY,aAAa;AAIzB,OAAO,kBAAkB;AACzB,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,sBAAsB,OAAO;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAgB,uBAAe;AAAA,IACnC,UAAU,eAAa,WAAW,SAAS;AAAA,IAC3C;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,cAAc;AAAA,IACrC,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;AACA,sBAAsB,OAAO;AAC7B,IAAO,mCAAQ;",
   "names": []
 }

package/build-module/date-time/{date → date-picker}/index.mjs

@@ -1,4 +1,4 @@
-// packages/components/src/date-time/date/index.tsx
+// packages/components/src/date-time/date-picker/index.tsx
 import { isSameDay, subMonths, addMonths, isEqual, addDays, subDays, subWeeks, addWeeks, isSameMonth } from "date-fns";
 import { __, _n, sprintf, isRTL } from "@wordpress/i18n";
 import { arrowLeft, arrowRight } from "@wordpress/icons";
@@ -200,9 +200,9 @@ function getDayLabel(date, isSelected, isToday, numEvents) {
   }
   return parts.join(". ");
 }
-var date_default = DatePicker;
+var date_picker_default = DatePicker;
 export {
   DatePicker,
-  date_default as default
+  date_picker_default as default
 };
 //# sourceMappingURL=index.mjs.map