@wordpress/components 19.10.0 → 19.13.0

package/build-module/autocomplete/index.js

@@ -8,7 +8,7 @@ import { escapeRegExp, find, deburr } from 'lodash';
  * WordPress dependencies
  */
 
-import { renderToString, useEffect, useState, useRef } from '@wordpress/element';
+import { renderToString, useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT, BACKSPACE } from '@wordpress/keycodes';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useInstanceId, useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
@@ -110,7 +110,7 @@ function useAutocomplete(_ref) {
   const [filterValue, setFilterValue] = useState('');
   const [autocompleter, setAutocompleter] = useState(null);
   const [AutocompleterUI, setAutocompleterUI] = useState(null);
-  const [backspacing, setBackspacing] = useState(false);
+  const backspacing = useRef(false);
 
   function insertCompletion(replacement) {
     const end = record.start;
@@ -190,7 +190,7 @@ function useAutocomplete(_ref) {
   }
 
   function handleKeyDown(event) {
-    setBackspacing(event.keyCode === BACKSPACE);
+    backspacing.current = event.keyCode === BACKSPACE;
 
     if (!autocompleter) {
       return;
@@ -235,14 +235,16 @@ function useAutocomplete(_ref) {
 
 
     event.preventDefault();
-  }
-
-  let textContent;
+  } // textContent is a primitive (string), memoizing is not strictly necessary
+  // but this is a preemptive performance improvement, since the autocompleter
+  // is a potential bottleneck for the editor type metric.
 
-  if (isCollapsed(record)) {
-    textContent = getTextContent(slice(record, 0));
-  }
 
+  const textContent = useMemo(() => {
+    if (isCollapsed(record)) {
+      return getTextContent(slice(record, 0));
+    }
+  }, [record]);
   useEffect(() => {
     if (!textContent) {
       reset();
@@ -290,7 +292,7 @@ function useAutocomplete(_ref) {
       // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
       // if the user presses backspace here, it will show the completion popup again.
 
-      const matchingWhileBackspacing = backspacing && textWithoutTrigger.split(/\s/).length <= 3;
+      const matchingWhileBackspacing = backspacing.current && textWithoutTrigger.split(/\s/).length <= 3;
 
       if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
         return false;
@@ -318,7 +320,7 @@ function useAutocomplete(_ref) {
     setAutocompleter(completer);
     setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);
     setFilterValue(query);
-  }, [textContent]);
+  }, [textContent, AutocompleterUI, autocompleter, completers, record, filteredOptions.length]);
   const {
     key: selectedKey = ''
   } = filteredOptions[selectedIndex] || {};

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["escapeRegExp","find","deburr","renderToString","useEffect","useState","useRef","ENTER","ESCAPE","UP","DOWN","LEFT","RIGHT","BACKSPACE","__","_n","sprintf","useInstanceId","useDebounce","useMergeRefs","useRefEffect","create","slice","insert","isCollapsed","getTextContent","speak","getAutoCompleterUI","useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","setBackspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","keyCode","defaultPrevented","preventDefault","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","key","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","current","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { escapeRegExp, find, deburr } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n} from '@wordpress/element';\nimport {\n\tENTER,\n\tESCAPE,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tBACKSPACE,\n} from '@wordpress/keycodes';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after  the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue}       value  the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string}          query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string}                           name                a way to identify a completer, useful for selective overriding.\n * @property {?string}                          className           A class to apply to the popup menu.\n * @property {string}                           triggerPrefix       the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options             the completer options or a function to get them.\n * @property {?FnGetOptionKeywords}             getOptionKeywords   get the keywords for a given option.\n * @property {?FnIsOptionDisabled}              isOptionDisabled    get whether or not the given option is disabled.\n * @property {FnGetOptionLabel}                 getOptionLabel      get the label for a given option.\n * @property {?FnAllowContext}                  allowContext        filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion}            getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst [ backspacing, setBackspacing ] = useState( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tsetBackspacing( event.keyCode === BACKSPACE );\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase UP:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase DOWN:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase ESCAPE:\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase ENTER:\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase LEFT:\n\t\t\tcase RIGHT:\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled keycode should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\tlet textContent;\n\n\tif ( isCollapsed( record ) ) {\n\t\ttextContent = getTextContent( slice( record, 0 ) );\n\t}\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = deburr( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing && textWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["escapeRegExp","find","deburr","renderToString","useEffect","useState","useRef","useMemo","ENTER","ESCAPE","UP","DOWN","LEFT","RIGHT","BACKSPACE","__","_n","sprintf","useInstanceId","useDebounce","useMergeRefs","useRefEffect","create","slice","insert","isCollapsed","getTextContent","speak","getAutoCompleterUI","useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","keyCode","defaultPrevented","preventDefault","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","key","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { escapeRegExp, find, deburr } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport {\n\tENTER,\n\tESCAPE,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tBACKSPACE,\n} from '@wordpress/keycodes';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after  the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue}       value  the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string}          query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string}                           name                a way to identify a completer, useful for selective overriding.\n * @property {?string}                          className           A class to apply to the popup menu.\n * @property {string}                           triggerPrefix       the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options             the completer options or a function to get them.\n * @property {?FnGetOptionKeywords}             getOptionKeywords   get the keywords for a given option.\n * @property {?FnIsOptionDisabled}              isOptionDisabled    get whether or not the given option is disabled.\n * @property {FnGetOptionLabel}                 getOptionLabel      get the label for a given option.\n * @property {?FnAllowContext}                  allowContext        filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion}            getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tbackspacing.current = event.keyCode === BACKSPACE;\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase UP:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase DOWN:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase ESCAPE:\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase ENTER:\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase LEFT:\n\t\t\tcase RIGHT:\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled keycode should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = deburr( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing.current &&\n\t\t\t\t\ttextWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t}, [\n\t\ttextContent,\n\t\tAutocompleterUI,\n\t\tautocompleter,\n\t\tcompleters,\n\t\trecord,\n\t\tfilteredOptions.length,\n\t] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}

package/build-module/border-box-control/border-box-control/component.js

@@ -5,6 +5,8 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -49,17 +51,26 @@ const BorderBoxControl = (props, forwardedRef) => {
     linkedValue,
     onLinkedChange,
     onSplitChange,
-    popoverClassNames,
+    popoverPlacement,
+    popoverOffset,
     splitValue,
     toggleLinked,
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
+    __next36pxDefaultSize = false,
     ...otherProps
   } = useBorderBoxControl(props);
+  const containerRef = useRef();
+  const mergedRef = useMergeRefs([containerRef, forwardedRef]);
+  const popoverProps = popoverPlacement ? {
+    placement: popoverPlacement,
+    offset: popoverOffset,
+    anchorRef: containerRef
+  } : undefined;
   return createElement(View, _extends({
     className: className
   }, otherProps, {
-    ref: forwardedRef
+    ref: mergedRef
   }), createElement(BorderLabel, {
     label: label,
     hideLabelFromVision: hideLabelFromVision
@@ -75,27 +86,31 @@ const BorderBoxControl = (props, forwardedRef) => {
     enableStyle: enableStyle,
     onChange: onLinkedChange,
     placeholder: hasMixedBorders ? __('Mixed') : undefined,
-    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.linked,
+    __unstablePopoverProps: popoverProps,
     shouldSanitizeBorder: false // This component will handle that.
     ,
     value: linkedValue,
     withSlider: true,
     width: '110px',
     __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
-    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    __next36pxDefaultSize: __next36pxDefaultSize
   }) : createElement(BorderBoxControlSplitControls, {
     colors: colors,
     disableCustomColors: disableCustomColors,
     enableAlpha: enableAlpha,
     enableStyle: enableStyle,
     onChange: onSplitChange,
-    popoverClassNames: popoverClassNames,
+    popoverPlacement: popoverPlacement,
+    popoverOffset: popoverOffset,
     value: splitValue,
     __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
-    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    __next36pxDefaultSize: __next36pxDefaultSize
   }), createElement(BorderBoxControlLinkedButton, {
     onClick: toggleLinked,
-    isLinked: isLinked
+    isLinked: isLinked,
+    __next36pxDefaultSize: __next36pxDefaultSize
   })));
 };
 

package/build-module/border-box-control/border-box-control/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["__","BorderBoxControlLinkedButton","BorderBoxControlSplitControls","BorderControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderBoxControl","BorderLabel","props","label","hideLabelFromVision","BorderBoxControl","forwardedRef","className","colors","disableCustomColors","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverClassNames","splitValue","toggleLinked","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","undefined","linked","ConnectedBorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type { LabelProps } from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverClassNames,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tpopoverContentClassName={ popoverClassNames?.linked }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={ '110px' }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverClassNames={ popoverClassNames }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderBoxControl = contextConnect(\n\tBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default ConnectedBorderBoxControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["__","useRef","useMergeRefs","BorderBoxControlLinkedButton","BorderBoxControlSplitControls","BorderControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderBoxControl","BorderLabel","props","label","hideLabelFromVision","BorderBoxControl","forwardedRef","className","colors","disableCustomColors","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","splitValue","toggleLinked","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","containerRef","mergedRef","popoverProps","placement","offset","anchorRef","undefined","ConnectedBorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type { LabelProps } from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\tconst containerRef = useRef();\n\tconst mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );\n\tconst popoverProps = popoverPlacement\n\t\t? {\n\t\t\t\tplacement: popoverPlacement,\n\t\t\t\toffset: popoverOffset,\n\t\t\t\tanchorRef: containerRef,\n\t\t  }\n\t\t: undefined;\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={ '110px' }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderBoxControl = contextConnect(\n\tBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default ConnectedBorderBoxControl;\n"]}

package/build-module/border-box-control/border-box-control/hook.js

@@ -78,10 +78,10 @@ export function useBorderBoxControl(props) {
   const cx = useCx();
   const classes = useMemo(() => {
     return cx(styles.BorderBoxControl, className);
-  }, [className]);
+  }, [cx, className]);
   const linkedControlClassName = useMemo(() => {
     return cx(styles.LinkedBorderControl);
-  }, []);
+  }, [cx]);
   return { ...otherProps,
     className: classes,
     hasMixedBorders: mixedBorders,

package/build-module/border-box-control/border-box-control/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","useBorderBoxControl","props","className","onChange","value","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","BorderBoxControl","linkedControlClassName","LinkedBorderControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst { className, onChange, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControl'\n\t);\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate  widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControl, className );\n\t}, [ className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.LinkedBorderControl );\n\t}, [] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsplitValue,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","useBorderBoxControl","props","className","onChange","value","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","BorderBoxControl","linkedControlClassName","LinkedBorderControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst { className, onChange, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControl'\n\t);\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate  widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.LinkedBorderControl );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsplitValue,\n\t};\n}\n"]}

package/build-module/border-box-control/border-box-control-linked-button/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["link","linkOff","__","Button","Tooltip","View","contextConnect","useBorderBoxControlLinkedButton","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,OAAP,MAAoB,eAApB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,+BAAT,QAAgD,QAAhD;;AAIA,MAAMC,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,QAFK;AAGL,OAAGC;AAHE,MAIFN,+BAA+B,CAAEE,KAAF,CAJnC;AAKA,QAAMK,KAAK,GAAGF,QAAQ,GAAGV,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGY;AAAhB,KACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,cAAC,MAAD,eACME,WADN;AAEC,IAAA,OAAO,EAAGD,QAAQ,GAAG,SAAH,GAAe,WAFlC;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGA,QAAQ,GAAGZ,IAAH,GAAUC,OAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaa,KANd;AAOC,IAAA,GAAG,EAAGJ;AAPP,KADD,CADD,CADD;AAeA,CA1BD;;AA4BA,MAAMK,qCAAqC,GAAGT,cAAc,CAC3DE,4BAD2D,EAE3D,8BAF2D,CAA5D;AAIA,eAAeO,qCAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tisLinked,\n\t\t...buttonProps\n\t} = useBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tvariant={ isLinked ? 'primary' : 'secondary' }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 16 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["link","linkOff","__","Button","Tooltip","View","contextConnect","useBorderBoxControlLinkedButton","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,OAAP,MAAoB,eAApB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,+BAAT,QAAgD,QAAhD;;AAIA,MAAMC,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuB,OAAGC;AAA1B,MACLN,+BAA+B,CAAEE,KAAF,CADhC;AAEA,QAAMK,KAAK,GAAGF,QAAQ,GAAGV,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGY;AAAhB,KACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,cAAC,MAAD,eACME,WADN;AAEC,IAAA,OAAO,EAAGD,QAAQ,GAAG,SAAH,GAAe,WAFlC;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGA,QAAQ,GAAGZ,IAAH,GAAUC,OAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaa,KANd;AAOC,IAAA,GAAG,EAAGJ;AAPP,KADD,CADD,CADD;AAeA,CAvBD;;AAyBA,MAAMK,qCAAqC,GAAGT,cAAc,CAC3DE,4BAD2D,EAE3D,8BAF2D,CAA5D;AAIA,eAAeO,qCAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tvariant={ isLinked ? 'primary' : 'secondary' }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 16 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"]}

package/build-module/border-box-control/border-box-control-linked-button/hook.js

@@ -12,13 +12,14 @@ import { useCx } from '../../utils/hooks/use-cx';
 export function useBorderBoxControlLinkedButton(props) {
   const {
     className,
+    __next36pxDefaultSize = false,
     ...otherProps
   } = useContextSystem(props, 'BorderBoxControlLinkedButton'); // Generate class names.
 
   const cx = useCx();
   const classes = useMemo(() => {
-    return cx(styles.BorderBoxControlLinkedButton, className);
-  }, [className]);
+    return cx(styles.BorderBoxControlLinkedButton(__next36pxDefaultSize), className);
+  }, [className, cx, __next36pxDefaultSize]);
   return { ...otherProps,
     className: classes
   };

package/build-module/border-box-control/border-box-control-linked-button/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlLinkedButton","props","className","otherProps","cx","classes","BorderBoxControlLinkedButton"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAIA,OAAO,SAASC,+BAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BL,gBAAgB,CACpDG,KADoD,EAEpD,8BAFoD,CAArD,CADC,CAMD;;AACA,QAAMG,EAAE,GAAGL,KAAK,EAAhB;AACA,QAAMM,OAAO,GAAGT,OAAO,CAAE,MAAM;AAC9B,WAAOQ,EAAE,CAAEP,MAAM,CAACS,4BAAT,EAAuCJ,SAAvC,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,CAFoB,CAAvB;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBD,IAAAA,SAAS,EAAEG;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { LinkedButtonProps } from '../types';\n\nexport function useBorderBoxControlLinkedButton(\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlLinkedButton'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlLinkedButton, className );\n\t}, [ className ] );\n\n\treturn { ...otherProps, className: classes };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlLinkedButton","props","className","__next36pxDefaultSize","otherProps","cx","classes","BorderBoxControlLinkedButton"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAIA,OAAO,SAASC,+BAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,qBAAqB,GAAG,KAFnB;AAGL,OAAGC;AAHE,MAIFN,gBAAgB,CAAEG,KAAF,EAAS,8BAAT,CAJpB,CADC,CAOD;;AACA,QAAMI,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,OAAO,GAAGV,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CACRR,MAAM,CAACU,4BAAP,CAAqCJ,qBAArC,CADQ,EAERD,SAFQ,CAAT;AAIA,GALsB,EAKpB,CAAEA,SAAF,EAAaG,EAAb,EAAiBF,qBAAjB,CALoB,CAAvB;AAOA,SAAO,EAAE,GAAGC,UAAL;AAAiBF,IAAAA,SAAS,EAAEI;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { LinkedButtonProps } from '../types';\n\nexport function useBorderBoxControlLinkedButton(\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlLinkedButton' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.BorderBoxControlLinkedButton( __next36pxDefaultSize ),\n\t\t\tclassName\n\t\t);\n\t}, [ className, cx, __next36pxDefaultSize ] );\n\n\treturn { ...otherProps, className: classes };\n}\n"]}

package/build-module/border-box-control/border-box-control-split-controls/component.js

@@ -5,6 +5,8 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -23,12 +25,22 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
     enableAlpha,
     enableStyle,
     onChange,
-    popoverClassNames,
+    popoverPlacement,
+    popoverOffset,
+    rightAlignedClassName,
     value,
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
+    __next36pxDefaultSize,
     ...otherProps
   } = useBorderBoxControlSplitControls(props);
+  const containerRef = useRef();
+  const mergedRef = useMergeRefs([containerRef, forwardedRef]);
+  const popoverProps = popoverPlacement ? {
+    placement: popoverPlacement,
+    offset: popoverOffset,
+    anchorRef: containerRef
+  } : undefined;
   const sharedBorderControlProps = {
     colors,
     disableCustomColors,
@@ -36,38 +48,41 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
     enableStyle,
     isCompact: true,
     __experimentalHasMultipleOrigins,
-    __experimentalIsRenderedInSidebar
+    __experimentalIsRenderedInSidebar,
+    __next36pxDefaultSize
   };
   return createElement(Grid, _extends({}, otherProps, {
-    ref: forwardedRef,
+    ref: mergedRef,
     gap: 4
   }), createElement(BorderBoxControlVisualizer, {
-    value: value
+    value: value,
+    __next36pxDefaultSize: __next36pxDefaultSize
   }), createElement(BorderControl, _extends({
     className: centeredClassName,
     hideLabelFromVision: true,
     label: __('Top border'),
     onChange: newBorder => onChange(newBorder, 'top'),
-    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.top,
+    __unstablePopoverProps: popoverProps,
     value: value === null || value === void 0 ? void 0 : value.top
   }, sharedBorderControlProps)), createElement(BorderControl, _extends({
     hideLabelFromVision: true,
     label: __('Left border'),
     onChange: newBorder => onChange(newBorder, 'left'),
-    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.left,
+    __unstablePopoverProps: popoverProps,
     value: value === null || value === void 0 ? void 0 : value.left
   }, sharedBorderControlProps)), createElement(BorderControl, _extends({
+    className: rightAlignedClassName,
     hideLabelFromVision: true,
     label: __('Right border'),
     onChange: newBorder => onChange(newBorder, 'right'),
-    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.right,
+    __unstablePopoverProps: popoverProps,
     value: value === null || value === void 0 ? void 0 : value.right
   }, sharedBorderControlProps)), createElement(BorderControl, _extends({
     className: centeredClassName,
     hideLabelFromVision: true,
     label: __('Bottom border'),
     onChange: newBorder => onChange(newBorder, 'bottom'),
-    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.bottom,
+    __unstablePopoverProps: popoverProps,
     value: value === null || value === void 0 ? void 0 : value.bottom
   }, sharedBorderControlProps)));
 };

package/build-module/border-box-control/border-box-control-split-controls/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["__","BorderBoxControlVisualizer","BorderControl","Grid","contextConnect","useBorderBoxControlSplitControls","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverClassNames","value","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","sharedBorderControlProps","isCompact","newBorder","top","left","right","bottom","ConnectedBorderBoxControlSplitControls"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverClassNames,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ forwardedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.top }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.left }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.right }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.bottom }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["__","useRef","useMergeRefs","BorderBoxControlVisualizer","BorderControl","Grid","contextConnect","useBorderBoxControlSplitControls","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","value","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","containerRef","mergedRef","popoverProps","placement","offset","anchorRef","undefined","sharedBorderControlProps","isCompact","newBorder","top","left","right","bottom","ConnectedBorderBoxControlSplitControls"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\trightAlignedClassName,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\tconst containerRef = useRef();\n\tconst mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );\n\tconst popoverProps = popoverPlacement\n\t\t? {\n\t\t\t\tplacement: popoverPlacement,\n\t\t\t\toffset: popoverOffset,\n\t\t\t\tanchorRef: containerRef,\n\t\t  }\n\t\t: undefined;\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t};\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer\n\t\t\t\tvalue={ value }\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ rightAlignedClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"]}

package/build-module/border-box-control/border-box-control-split-controls/hook.js

@@ -16,15 +16,22 @@ export function useBorderBoxControlSplitControls(props) {
   } = useContextSystem(props, 'BorderBoxControlSplitControls'); // Generate class names.
 
   const cx = useCx();
+  const rtlWatchResult = rtl.watch();
   const classes = useMemo(() => {
-    return cx(styles.BorderBoxControlSplitControls, className);
-  }, [className, rtl.watch()]);
+    return cx(styles.borderBoxControlSplitControls(), className); // rtlWatchResult is needed to refresh styles when the writing direction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cx, className, rtlWatchResult]);
   const centeredClassName = useMemo(() => {
     return cx(styles.CenteredBorderControl, className);
-  }, []);
+  }, [cx, className]);
+  const rightAlignedClassName = useMemo(() => {
+    return cx(styles.rightBorderControl(), className); // rtlWatchResult is needed to refresh styles when the writing direction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cx, className, rtlWatchResult]);
   return { ...otherProps,
     centeredClassName,
-    className: classes
+    className: classes,
+    rightAlignedClassName
   };
 }
 //# sourceMappingURL=hook.js.map

package/build-module/border-box-control/border-box-control-split-controls/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","rtl","useBorderBoxControlSplitControls","props","className","otherProps","cx","classes","BorderBoxControlSplitControls","watch","centeredClassName","CenteredBorderControl"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,EAAgBC,GAAhB,QAA2B,cAA3B;AAIA,OAAO,SAASC,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BN,gBAAgB,CACpDI,KADoD,EAEpD,+BAFoD,CAArD,CADC,CAMD;;AACA,QAAMG,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,OAAO,GAAGV,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CAAER,MAAM,CAACU,6BAAT,EAAwCJ,SAAxC,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAaH,GAAG,CAACQ,KAAJ,EAAb,CAFoB,CAAvB;AAIA,QAAMC,iBAAiB,GAAGb,OAAO,CAAE,MAAM;AACxC,WAAOS,EAAE,CAAER,MAAM,CAACa,qBAAT,EAAgCP,SAAhC,CAAT;AACA,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBK,IAAAA,iBAAjB;AAAoCN,IAAAA,SAAS,EAAEG;AAA/C,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlSplitControls'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlSplitControls, className );\n\t}, [ className, rtl.watch() ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.CenteredBorderControl, className );\n\t}, [] );\n\n\treturn { ...otherProps, centeredClassName, className: classes };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","rtl","useBorderBoxControlSplitControls","props","className","otherProps","cx","rtlWatchResult","watch","classes","borderBoxControlSplitControls","centeredClassName","CenteredBorderControl","rightAlignedClassName","rightBorderControl"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,EAAgBC,GAAhB,QAA2B,cAA3B;AAIA,OAAO,SAASC,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BN,gBAAgB,CACpDI,KADoD,EAEpD,+BAFoD,CAArD,CADC,CAMD;;AACA,QAAMG,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,cAAc,GAAGN,GAAG,CAACO,KAAJ,EAAvB;AACA,QAAMC,OAAO,GAAGZ,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CAAER,MAAM,CAACY,6BAAP,EAAF,EAA0CN,SAA1C,CAAT,CAD8B,CAE9B;AACA;AACA,GAJsB,EAIpB,CAAEE,EAAF,EAAMF,SAAN,EAAiBG,cAAjB,CAJoB,CAAvB;AAMA,QAAMI,iBAAiB,GAAGd,OAAO,CAAE,MAAM;AACxC,WAAOS,EAAE,CAAER,MAAM,CAACc,qBAAT,EAAgCR,SAAhC,CAAT;AACA,GAFgC,EAE9B,CAAEE,EAAF,EAAMF,SAAN,CAF8B,CAAjC;AAIA,QAAMS,qBAAqB,GAAGhB,OAAO,CAAE,MAAM;AAC5C,WAAOS,EAAE,CAAER,MAAM,CAACgB,kBAAP,EAAF,EAA+BV,SAA/B,CAAT,CAD4C,CAE5C;AACA;AACA,GAJoC,EAIlC,CAAEE,EAAF,EAAMF,SAAN,EAAiBG,cAAjB,CAJkC,CAArC;AAMA,SAAO,EACN,GAAGF,UADG;AAENM,IAAAA,iBAFM;AAGNP,IAAAA,SAAS,EAAEK,OAHL;AAINI,IAAAA;AAJM,GAAP;AAMA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlSplitControls'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst rtlWatchResult = rtl.watch();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlSplitControls(), className );\n\t\t// rtlWatchResult is needed to refresh styles when the writing direction changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ cx, className, rtlWatchResult ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.CenteredBorderControl, className );\n\t}, [ cx, className ] );\n\n\tconst rightAlignedClassName = useMemo( () => {\n\t\treturn cx( styles.rightBorderControl(), className );\n\t\t// rtlWatchResult is needed to refresh styles when the writing direction changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ cx, className, rtlWatchResult ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tcenteredClassName,\n\t\tclassName: classes,\n\t\trightAlignedClassName,\n\t};\n}\n"]}

package/build-module/border-box-control/border-box-control-visualizer/hook.js

@@ -13,13 +13,16 @@ export function useBorderBoxControlVisualizer(props) {
   const {
     className,
     value,
+    __next36pxDefaultSize = false,
     ...otherProps
   } = useContextSystem(props, 'BorderBoxControlVisualizer'); // Generate class names.
 
   const cx = useCx();
+  const rtlWatchResult = rtl.watch();
   const classes = useMemo(() => {
-    return cx(styles.BorderBoxControlVisualizer(value), className);
-  }, [className, value, rtl.watch()]);
+    return cx(styles.borderBoxControlVisualizer(value, __next36pxDefaultSize), className); // rtlWatchResult is needed to refresh styles when the writing direction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cx, className, value, __next36pxDefaultSize, rtlWatchResult]);
   return { ...otherProps,
     className: classes,
     value

package/build-module/border-box-control/border-box-control-visualizer/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","rtl","useBorderBoxControlVisualizer","props","className","value","otherProps","cx","classes","BorderBoxControlVisualizer","watch"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,EAAgBC,GAAhB,QAA2B,aAA3B;AAIA,OAAO,SAASC,6BAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,KAAb;AAAoB,OAAGC;AAAvB,MAAsCP,gBAAgB,CAC3DI,KAD2D,EAE3D,4BAF2D,CAA5D,CADC,CAMD;;AACA,QAAMI,EAAE,GAAGP,KAAK,EAAhB;AACA,QAAMQ,OAAO,GAAGX,OAAO,CAAE,MAAM;AAC9B,WAAOU,EAAE,CAAET,MAAM,CAACW,0BAAP,CAAmCJ,KAAnC,CAAF,EAA8CD,SAA9C,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAaC,KAAb,EAAoBJ,GAAG,CAACS,KAAJ,EAApB,CAFoB,CAAvB;AAIA,SAAO,EAAE,GAAGJ,UAAL;AAAiBF,IAAAA,SAAS,EAAEI,OAA5B;AAAqCH,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils';\n\nimport type { VisualizerProps } from '../types';\n\nexport function useBorderBoxControlVisualizer(\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >\n) {\n\tconst { className, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlVisualizer'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlVisualizer( value ), className );\n\t}, [ className, value, rtl.watch() ] );\n\n\treturn { ...otherProps, className: classes, value };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","rtl","useBorderBoxControlVisualizer","props","className","value","__next36pxDefaultSize","otherProps","cx","rtlWatchResult","watch","classes","borderBoxControlVisualizer"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,EAAgBC,GAAhB,QAA2B,aAA3B;AAIA,OAAO,SAASC,6BAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,qBAAqB,GAAG,KAHnB;AAIL,OAAGC;AAJE,MAKFR,gBAAgB,CAAEI,KAAF,EAAS,4BAAT,CALpB,CADC,CAQD;;AACA,QAAMK,EAAE,GAAGR,KAAK,EAAhB;AACA,QAAMS,cAAc,GAAGR,GAAG,CAACS,KAAJ,EAAvB;AACA,QAAMC,OAAO,GAAGd,OAAO,CAAE,MAAM;AAC9B,WAAOW,EAAE,CACRV,MAAM,CAACc,0BAAP,CAAmCP,KAAnC,EAA0CC,qBAA1C,CADQ,EAERF,SAFQ,CAAT,CAD8B,CAK9B;AACA;AACA,GAPsB,EAOpB,CAAEI,EAAF,EAAMJ,SAAN,EAAiBC,KAAjB,EAAwBC,qBAAxB,EAA+CG,cAA/C,CAPoB,CAAvB;AASA,SAAO,EAAE,GAAGF,UAAL;AAAiBH,IAAAA,SAAS,EAAEO,OAA5B;AAAqCN,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils';\n\nimport type { VisualizerProps } from '../types';\n\nexport function useBorderBoxControlVisualizer(\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tvalue,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlVisualizer' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst rtlWatchResult = rtl.watch();\n\tconst classes = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),\n\t\t\tclassName\n\t\t);\n\t\t// rtlWatchResult is needed to refresh styles when the writing direction changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );\n\n\treturn { ...otherProps, className: classes, value };\n}\n"]}