@wordpress/components 32.5.0 → 32.5.2-next.v.202604091042.0

package/build-module/autocomplete/get-autocomplete-match.mjs

@@ -0,0 +1,56 @@
+// packages/components/src/autocomplete/get-autocomplete-match.ts
+import removeAccents from "remove-accents";
+function getAutocompleteMatch(textContent, completers, filteredOptionsLength, isBackspacing, getTextAfterSelection) {
+  if (!textContent) {
+    return null;
+  }
+  let completer = null;
+  let triggerIndex = -1;
+  let matchedEndIndex = -1;
+  let matchedPrefixLength = 0;
+  for (const currentCompleter of completers) {
+    const currentIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);
+    if (currentIndex < 0) {
+      continue;
+    }
+    const currentEndIndex = currentIndex + currentCompleter.triggerPrefix.length;
+    if (currentEndIndex > matchedEndIndex || currentEndIndex === matchedEndIndex && currentCompleter.triggerPrefix.length > matchedPrefixLength) {
+      completer = currentCompleter;
+      triggerIndex = currentIndex;
+      matchedEndIndex = currentEndIndex;
+      matchedPrefixLength = currentCompleter.triggerPrefix.length;
+    }
+  }
+  if (!completer) {
+    return null;
+  }
+  const {
+    allowContext,
+    triggerPrefix
+  } = completer;
+  const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);
+  if (textWithoutTrigger.length > 50) {
+    return null;
+  }
+  const mismatch = filteredOptionsLength === 0;
+  const wordsFromTrigger = textWithoutTrigger.split(/\s/);
+  const hasOneTriggerWord = wordsFromTrigger.length === 1;
+  const matchingWhileBackspacing = isBackspacing && wordsFromTrigger.length <= 3;
+  if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
+    return null;
+  }
+  if (allowContext && !allowContext(textContent.slice(0, triggerIndex), getTextAfterSelection())) {
+    return null;
+  }
+  if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) {
+    return null;
+  }
+  return {
+    completer,
+    filterValue: removeAccents(textWithoutTrigger)
+  };
+}
+export {
+  getAutocompleteMatch
+};
+//# sourceMappingURL=get-autocomplete-match.mjs.map

package/build-module/autocomplete/get-autocomplete-match.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/autocomplete/get-autocomplete-match.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * Internal dependencies\n */\n\nexport function getAutocompleteMatch(textContent, completers, filteredOptionsLength, isBackspacing, getTextAfterSelection) {\n  if (!textContent) {\n    return null;\n  }\n\n  // Find the completer whose trigger prefix ends closest to the cursor\n  // (rightmost end position). Comparing end positions instead of start\n  // positions correctly resolves overlapping prefixes like \"@\" and \"@@\".\n  let completer = null;\n  let triggerIndex = -1;\n  let matchedEndIndex = -1;\n  let matchedPrefixLength = 0;\n  for (const currentCompleter of completers) {\n    const currentIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);\n    if (currentIndex < 0) {\n      continue;\n    }\n    const currentEndIndex = currentIndex + currentCompleter.triggerPrefix.length;\n    if (currentEndIndex > matchedEndIndex || currentEndIndex === matchedEndIndex && currentCompleter.triggerPrefix.length > matchedPrefixLength) {\n      completer = currentCompleter;\n      triggerIndex = currentIndex;\n      matchedEndIndex = currentEndIndex;\n      matchedPrefixLength = currentCompleter.triggerPrefix.length;\n    }\n  }\n  if (!completer) {\n    return null;\n  }\n  const {\n    allowContext,\n    triggerPrefix\n  } = completer;\n  const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);\n\n  // Prevent matching with an extremely long string, which causes\n  // the editor to slow-down significantly. This could happen, for\n  // example, if `matchingWhileBackspacing` is true and one of the\n  // \"words\" ends up being too long. Returning null here intentionally\n  // resets the autocompleter state in the caller.\n  if (textWithoutTrigger.length > 50) {\n    return null;\n  }\n  const mismatch = filteredOptionsLength === 0;\n  const wordsFromTrigger = textWithoutTrigger.split(/\\s/);\n\n  // Allow matching when typing a trigger + the match string or when\n  // clicking in an existing trigger word on the page.\n  // E.g. \"Some text @a\" \u2014 \"@a\" is detected as a trigger word.\n  const hasOneTriggerWord = wordsFromTrigger.length === 1;\n\n  // Allow matching when backspacing near a trigger word (up to 3\n  // words from the trigger character). This lets us recover from a\n  // mismatch when backspacing while still imposing sane limits.\n  // E.g. \"Some text @marcelo sekkkk\" \u2014 backspacing \"kkkk\" re-shows\n  // the popup once the text matches again.\n  const matchingWhileBackspacing = isBackspacing && wordsFromTrigger.length <= 3;\n  if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {\n    return null;\n  }\n  if (allowContext && !allowContext(textContent.slice(0, triggerIndex), getTextAfterSelection())) {\n    return null;\n  }\n  if (/^\\s/.test(textWithoutTrigger) || /\\s\\s+$/.test(textWithoutTrigger)) {\n    return null;\n  }\n  return {\n    completer,\n    filterValue: removeAccents(textWithoutTrigger)\n  };\n}"],
+  "mappings": ";AAGA,OAAO,mBAAmB;AAMnB,SAAS,qBAAqB,aAAa,YAAY,uBAAuB,eAAe,uBAAuB;AACzH,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAKA,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,kBAAkB;AACtB,MAAI,sBAAsB;AAC1B,aAAW,oBAAoB,YAAY;AACzC,UAAM,eAAe,YAAY,YAAY,iBAAiB,aAAa;AAC3E,QAAI,eAAe,GAAG;AACpB;AAAA,IACF;AACA,UAAM,kBAAkB,eAAe,iBAAiB,cAAc;AACtE,QAAI,kBAAkB,mBAAmB,oBAAoB,mBAAmB,iBAAiB,cAAc,SAAS,qBAAqB;AAC3I,kBAAY;AACZ,qBAAe;AACf,wBAAkB;AAClB,4BAAsB,iBAAiB,cAAc;AAAA,IACvD;AAAA,EACF;AACA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,qBAAqB,YAAY,MAAM,eAAe,cAAc,MAAM;AAOhF,MAAI,mBAAmB,SAAS,IAAI;AAClC,WAAO;AAAA,EACT;AACA,QAAM,WAAW,0BAA0B;AAC3C,QAAM,mBAAmB,mBAAmB,MAAM,IAAI;AAKtD,QAAM,oBAAoB,iBAAiB,WAAW;AAOtD,QAAM,2BAA2B,iBAAiB,iBAAiB,UAAU;AAC7E,MAAI,YAAY,EAAE,4BAA4B,oBAAoB;AAChE,WAAO;AAAA,EACT;AACA,MAAI,gBAAgB,CAAC,aAAa,YAAY,MAAM,GAAG,YAAY,GAAG,sBAAsB,CAAC,GAAG;AAC9F,WAAO;AAAA,EACT;AACA,MAAI,MAAM,KAAK,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,GAAG;AACvE,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL;AAAA,IACA,aAAa,cAAc,kBAAkB;AAAA,EAC/C;AACF;",
+  "names": []
+}

package/build-module/autocomplete/index.mjs

@@ -1,17 +1,54 @@
 // packages/components/src/autocomplete/index.tsx
-import removeAccents from "remove-accents";
-import { renderToString, useEffect, useState, useRef, useMemo } from "@wordpress/element";
+import { renderToString, useEffect, useMemo, useReducer, useRef } from "@wordpress/element";
 import { useInstanceId, useMergeRefs, useRefEffect } from "@wordpress/compose";
 import { create, slice, insert, isCollapsed, getTextContent } from "@wordpress/rich-text";
 import { speak } from "@wordpress/a11y";
 import { isAppleOS } from "@wordpress/keycodes";
-import { getAutoCompleterUI } from "./autocompleter-ui.mjs";
-import { escapeRegExp } from "../utils/strings.mjs";
+import { AutocompleterUI } from "./autocompleter-ui.mjs";
+import { getAutocompleteMatch } from "./get-autocomplete-match.mjs";
 import { withIgnoreIMEEvents } from "../utils/with-ignore-ime-events.mjs";
 import getNodeText from "../utils/get-node-text.mjs";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var EMPTY_FILTERED_OPTIONS = [];
 var AUTOCOMPLETE_HOOK_REFERENCE = {};
+function getCompletionObject(completion) {
+  if (completion !== null && typeof completion === "object" && "action" in completion && completion.action !== void 0 && "value" in completion && completion.value !== void 0) {
+    return completion;
+  }
+  return {
+    action: "insert-at-caret",
+    value: completion
+  };
+}
+var initialState = {
+  selectedIndex: 0,
+  filteredOptions: EMPTY_FILTERED_OPTIONS,
+  filterValue: "",
+  autocompleter: null
+};
+function autocompleteReducer(state, action) {
+  switch (action.type) {
+    case "RESET":
+      return initialState;
+    case "SELECT":
+      return {
+        ...state,
+        selectedIndex: action.index
+      };
+    case "OPTIONS":
+      return {
+        ...state,
+        filteredOptions: action.options,
+        selectedIndex: action.options.length === state.filteredOptions.length ? state.selectedIndex : 0
+      };
+    case "MATCH":
+      return {
+        ...state,
+        autocompleter: action.completer,
+        filterValue: action.query
+      };
+  }
+}
 function useAutocomplete({
   record,
   onChange,
@@ -20,11 +57,13 @@ function useAutocomplete({
   contentRef
 }) {
   const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [filteredOptions, setFilteredOptions] = useState(EMPTY_FILTERED_OPTIONS);
-  const [filterValue, setFilterValue] = useState("");
-  const [autocompleter, setAutocompleter] = useState(null);
-  const [AutocompleterUI, setAutocompleterUI] = useState(null);
+  const [state, dispatch] = useReducer(autocompleteReducer, initialState);
+  const {
+    selectedIndex,
+    filteredOptions,
+    filterValue,
+    autocompleter
+  } = state;
   const backspacingRef = useRef(false);
   function insertCompletion(replacement) {
     if (autocompleter === null) {
@@ -45,14 +84,7 @@ function useAutocomplete({
       return;
     }
     if (getOptionCompletion) {
-      const completion = getOptionCompletion(option.value, filterValue);
-      const isCompletionObject = (obj) => {
-        return obj !== null && typeof obj === "object" && "action" in obj && obj.action !== void 0 && "value" in obj && obj.value !== void 0;
-      };
-      const completionObject = isCompletionObject(completion) ? completion : {
-        action: "insert-at-caret",
-        value: completion
-      };
+      const completionObject = getCompletionObject(getOptionCompletion(option.value, filterValue));
       if ("replace" === completionObject.action) {
         onReplace([completionObject.value]);
         return;
@@ -60,19 +92,16 @@ function useAutocomplete({
         insertCompletion(completionObject.value);
       }
     }
-    reset();
+    dispatch({
+      type: "RESET"
+    });
     contentRef.current?.focus();
   }
-  function reset() {
-    setSelectedIndex(0);
-    setFilteredOptions(EMPTY_FILTERED_OPTIONS);
-    setFilterValue("");
-    setAutocompleter(null);
-    setAutocompleterUI(null);
-  }
   function onChangeOptions(options) {
-    setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0);
-    setFilteredOptions(options);
+    dispatch({
+      type: "OPTIONS",
+      options
+    });
   }
   function handleKeyDown(event) {
     backspacingRef.current = event.key === "Backspace";
@@ -86,25 +115,23 @@ function useAutocomplete({
       return;
     }
     switch (event.key) {
-      case "ArrowUp": {
-        const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1;
-        setSelectedIndex(newIndex);
-        if (isAppleOS()) {
-          speak(getNodeText(filteredOptions[newIndex].label), "assertive");
-        }
-        break;
-      }
+      case "ArrowUp":
       case "ArrowDown": {
-        const newIndex = (selectedIndex + 1) % filteredOptions.length;
-        setSelectedIndex(newIndex);
+        const offset = event.key === "ArrowUp" ? -1 : 1;
+        const newIndex = (selectedIndex + offset + filteredOptions.length) % filteredOptions.length;
+        dispatch({
+          type: "SELECT",
+          index: newIndex
+        });
         if (isAppleOS()) {
           speak(getNodeText(filteredOptions[newIndex].label), "assertive");
         }
         break;
       }
       case "Escape":
-        setAutocompleter(null);
-        setAutocompleterUI(null);
+        dispatch({
+          type: "RESET"
+        });
         event.preventDefault();
         break;
       case "Enter":
@@ -112,7 +139,9 @@ function useAutocomplete({
         break;
       case "ArrowLeft":
       case "ArrowRight":
-        reset();
+        dispatch({
+          type: "RESET"
+        });
         return;
       default:
         return;
@@ -126,69 +155,27 @@ function useAutocomplete({
     return "";
   }, [record]);
   useEffect(() => {
-    if (!textContent) {
-      if (autocompleter) {
-        reset();
-      }
-      return;
+    function getTextAfterSelection() {
+      return textContent ? getTextContent(slice(record, void 0, getTextContent(record).length)) : "";
     }
-    const completer = completers.reduce((lastTrigger, currentCompleter) => {
-      const triggerIndex2 = textContent.lastIndexOf(currentCompleter.triggerPrefix);
-      const lastTriggerIndex = lastTrigger !== null ? textContent.lastIndexOf(lastTrigger.triggerPrefix) : -1;
-      return triggerIndex2 > lastTriggerIndex ? currentCompleter : lastTrigger;
-    }, null);
-    if (!completer) {
+    const match = getAutocompleteMatch(textContent, completers, filteredOptions.length, backspacingRef.current, getTextAfterSelection);
+    if (!match) {
       if (autocompleter) {
-        reset();
+        dispatch({
+          type: "RESET"
+        });
       }
       return;
     }
     const {
-      allowContext,
-      triggerPrefix
-    } = completer;
-    const triggerIndex = textContent.lastIndexOf(triggerPrefix);
-    const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);
-    const tooDistantFromTrigger = textWithoutTrigger.length > 50;
-    if (tooDistantFromTrigger) {
-      return;
-    }
-    const mismatch = filteredOptions.length === 0;
-    const wordsFromTrigger = textWithoutTrigger.split(/\s/);
-    const hasOneTriggerWord = wordsFromTrigger.length === 1;
-    const matchingWhileBackspacing = backspacingRef.current && wordsFromTrigger.length <= 3;
-    if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
-      if (autocompleter) {
-        reset();
-      }
-      return;
-    }
-    const textAfterSelection = getTextContent(slice(record, void 0, getTextContent(record).length));
-    if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) {
-      if (autocompleter) {
-        reset();
-      }
-      return;
-    }
-    if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) {
-      if (autocompleter) {
-        reset();
-      }
-      return;
-    }
-    if (!/[\u0000-\uFFFF]*$/.test(textWithoutTrigger)) {
-      if (autocompleter) {
-        reset();
-      }
-      return;
-    }
-    const safeTrigger = escapeRegExp(completer.triggerPrefix);
-    const text = removeAccents(textContent);
-    const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\0-\uFFFF]*)$`));
-    const query = match && match[1];
-    setAutocompleter(completer);
-    setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);
-    setFilterValue(query === null ? "" : query);
+      completer,
+      filterValue: query
+    } = match;
+    dispatch({
+      type: "MATCH",
+      completer,
+      query
+    });
   }, [textContent]);
   const {
     key: selectedKey = ""
@@ -200,12 +187,13 @@ function useAutocomplete({
   const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : void 0;
   const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;
   const hasSelection = record.start !== void 0;
-  const showPopover = !!textContent && hasSelection && !!AutocompleterUI;
+  const showPopover = !!textContent && hasSelection && !!autocompleter;
   return {
     listBoxId,
     activeId,
     onKeyDown: withIgnoreIMEEvents(handleKeyDown),
     popover: showPopover && /* @__PURE__ */ _jsx(AutocompleterUI, {
+      autocompleter,
       className,
       filterValue,
       instanceId,
@@ -213,19 +201,26 @@ function useAutocomplete({
       selectedIndex,
       onChangeOptions,
       onSelect: select,
-      value: record,
       contentRef,
-      reset
-    })
+      reset: () => dispatch({
+        type: "RESET"
+      })
+    }, autocompleter.name + autocompleter.triggerPrefix)
   };
 }
+function recordValuesMatch(a, b) {
+  return a.text === b.text && a.start === b.start && a.end === b.end;
+}
 function useLastDifferentValue(value) {
-  const history = useRef(/* @__PURE__ */ new Set());
-  history.current.add(value);
-  if (history.current.size > 2) {
-    history.current.delete(Array.from(history.current)[0]);
+  const history = useRef([]);
+  const lastEntry = history.current[history.current.length - 1];
+  if (!lastEntry || !recordValuesMatch(value, lastEntry)) {
+    history.current.push(value);
+  }
+  if (history.current.length > 2) {
+    history.current.shift();
   }
-  return Array.from(history.current)[0];
+  return history.current[0];
 }
 function useAutocompleteProps(options) {
   const ref = useRef(null);
@@ -283,6 +278,7 @@ function Autocomplete({
 export {
   Autocomplete as default,
   useAutocomplete,
-  useAutocompleteProps
+  useAutocompleteProps,
+  useLastDifferentValue
 };
 //# sourceMappingURL=index.mjs.map

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": "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",
+  "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": "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",
+  "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": ";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,cAAc,iBAAiB,uBAAuB;AAC/E,SAAS,0BAA0B;AACnC,SAAS,mCAAmC;AAC5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AA4J3C,SAAS,yBAAyB;AA3JlC,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;AAKrG,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;AAAA,EACvB;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;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;",
   "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,