npm - @wordpress/components - Versions diffs - 28.11.0 → 28.13.1-next.082ed6819.0 - Mend

@wordpress/components 28.11.0 → 28.13.1-next.082ed6819.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (514) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,72 @@
 ## Unreleased
+## 28.13.0-next.0 (2024-11-26)
+### Deprecations
+-   `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)).
+-   `TextControl`: Deprecate 36px default size ([#66745](https://github.com/WordPress/gutenberg/pull/66745).
+-   `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
+-   `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
+-   `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
+-   `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).
+### Bug Fixes
+-   `Modal`: Modal: Increase size of the Close button ([#66792](https://github.com/WordPress/gutenberg/pull/66792)).
+-   `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)).
+-   `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)).
+-   `ColorPalette`: Disable `Clear` button if there's no color value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `GradientPicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `DuotonePicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)).
+-   `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([#67139](https://github.com/WordPress/gutenberg/pull/67139)).
+-   `Composite.Hover`: Restore functionality ([#67212](https://github.com/WordPress/gutenberg/pull/67212)).
+-   `Composite.Typeahead`: Restore functionality ([#67212](https://github.com/WordPress/gutenberg/pull/67212)).
+-   `Dashicons`: Remove non-existent icons from type ([#67235](https://github.com/WordPress/gutenberg/pull/67235)).
+### Enhancements
+-   `ColorPicker`: Update sizes of color format select and copy button ([#67093](https://github.com/WordPress/gutenberg/pull/67093)).
+-   `ComboboxControl`: Update reset button size ([#67215](https://github.com/WordPress/gutenberg/pull/67215)).
+-   `Autocomplete`: Increase option height ([#67214](https://github.com/WordPress/gutenberg/pull/67214)).
+### Experimental
+-   `SlotFill`: Remove registration API methods from return value of `__experimentalUseSlot` ([#67070](https://github.com/WordPress/gutenberg/pull/67070)).
+-   `SlotFill`: Remove the `createPrivateSlotFill` private API ([#67238](https://github.com/WordPress/gutenberg/pull/67238)).
+### Internal
+-   `SlotFill`: fix dependencies of `Fill` registration effects ([#67071](https://github.com/WordPress/gutenberg/pull/67071)).
+-   `SlotFill`: rewrite the `Slot` component from class component to functional ([#67153](https://github.com/WordPress/gutenberg/pull/67153)).
+-   `Menu.ItemHelpText`: Fix text wrapping to prevent unintended word breaks ([#67011](https://github.com/WordPress/gutenberg/pull/67011)).
+-   `BorderBoxControl`: Suppress redundant warnings for deprecated 36px size ([#67213](https://github.com/WordPress/gutenberg/pull/67213)).
+## 28.12.0 (2024-11-16)
+### Deprecations
+-   `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)).
+### Bug Fixes
+-   `Popover`: Fix missing label of the headerTitle Close button ([#66813](https://github.com/WordPress/gutenberg/pull/66813)).
+### Enhancements
+-   `MenuItem`: Add 40px size prop on Button ([#66596](https://github.com/WordPress/gutenberg/pull/66596)).
+-   `Guide`: Use small size button for page controls ([#66607](https://github.com/WordPress/gutenberg/pull/66607)).
+-   `PaletteEdit`: Add appropriate size props to Buttons ([#66590](https://github.com/WordPress/gutenberg/pull/66590)).
+-   `Notice`: Add appropriate size props to Buttons ([#66593](https://github.com/WordPress/gutenberg/pull/66593)).
+-   `FormTokenField`: Fix token styles ([#66640](https://github.com/WordPress/gutenberg/pull/66640)).
+### Internal
+-   `Snackbar`: Use link variant for action Button ([#66560](https://github.com/WordPress/gutenberg/pull/66560)).
+-   `BorderControl`: Remove unnecessary boolean assignments ([#66857](https://github.com/WordPress/gutenberg/pull/66857)).
 ## 28.11.0 (2024-10-30)
 ### Deprecations
@@ -18,6 +84,7 @@
 ### Enhancements
 -   `PaletteEdit`: use `Item` internally instead of custom styles ([#66164](https://github.com/WordPress/gutenberg/pull/66164)).
+-   `Popover`: Use small size variant for close button when `expandOnMobile` prop is enabled ([#66587](https://github.com/WordPress/gutenberg/pull/66587)).
 ### Experimental
@@ -34,6 +101,7 @@
 -   ESLint: Stop disabling `react-hooks/exhaustive-deps` rule ([#66324](https://github.com/WordPress/gutenberg/pull/66324)).
 -   `TabPanel`: Add 40px size prop to tab Button ([#66557](https://github.com/WordPress/gutenberg/pull/66557)).
+-   `Panel`: Add 40px size prop to Button ([#66589](https://github.com/WordPress/gutenberg/pull/66589)).
 ## 28.10.0 (2024-10-16)

package/build/autocomplete/autocompleter-ui.js CHANGED Viewed

@@ -45,6 +45,7 @@ function ListBox({
     children: items.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
       id: `components-autocomplete-item-${instanceId}-${option.key}`,
       role: "option",
+      __next40pxDefaultSize: true,
       "aria-selected": index === selectedIndex,
       accessibleWhenDisabled: true,
       disabled: option.isDisabled,

package/build/autocomplete/autocompleter-ui.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_richText","_compose","_a11y","_i18n","_getDefaultUseItems","_button","_popover","_visuallyHidden","_reactDom","_jsxRuntime","ListBox","items","onSelect","selectedIndex","instanceId","listBoxId","className","Component","jsx","id","role","children","map","option","index","default","key","accessibleWhenDisabled","disabled","isDisabled","clsx","variant","undefined","onClick","label","getAutoCompleterUI","autocompleter","_autocompleter$useIte","useItems","getDefaultUseItems","AutocompleterUI","filterValue","onChangeOptions","onReset","reset","contentRef","popoverAnchor","useAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","useState","popoverRef","useRef","popoverRefs","useMergeRefs","useRefEffect","node","ownerDocument","useOnClickOutside","debouncedSpeak","useDebounce","speak","announce","options","length","sprintf","_n","__","useLayoutEffect","jsxs","Fragment","focusOnMount","onClose","placement","anchor","ref","createPortal","VisuallyHidden","body","handler","useEffect","listener","event","contains","target","document","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';\n\ntype ListBoxProps = {\n\titems: KeyedOption[];\n\tonSelect: ( option: KeyedOption ) => void;\n\tselectedIndex: number;\n\tinstanceId: number;\n\tlistBoxId: string \| undefined;\n\tclassName?: string;\n\tComponent?: React.ElementType;\n};\n\nfunction ListBox( {\n\titems,\n\tonSelect,\n\tselectedIndex,\n\tinstanceId,\n\tlistBoxId,\n\tclassName,\n\tComponent = 'div',\n}: ListBoxProps ) {\n\treturn (\n\t\t<Component\n\t\t\tid={ listBoxId }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"components-autocomplete__results\"\n\t\t>\n\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t<Button\n\t\t\t\t\tkey={ option.key }\n\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// Unused, for backwards compatibility.\n\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvariant={ index === selectedIndex ? 'primary' : undefined }\n\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</Button>\n\t\t\t) ) }\n\t\t</Component>\n\t);\n}\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems =\n\t\tautocompleter.useItems ?? getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aria- attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\t\tfunction announce( options: Array< KeyedOption > ) {\n\t\t\tif ( ! debouncedSpeak ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( !! options.length ) {\n\t\t\t\tif ( filterValue ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. /\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/ translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t}\n\t\t}\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tannounce( items );\n\t\t\t// We want to avoid introducing unexpected side effects.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox\n\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox\n\t\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tComponent={ VisuallyHidden }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent \| TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current \|\|\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t}, [ handler, ref ] );\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_richText","_compose","_a11y","_i18n","_getDefaultUseItems","_button","_popover","_visuallyHidden","_reactDom","_jsxRuntime","ListBox","items","onSelect","selectedIndex","instanceId","listBoxId","className","Component","jsx","id","role","children","map","option","index","default","key","__next40pxDefaultSize","accessibleWhenDisabled","disabled","isDisabled","clsx","variant","undefined","onClick","label","getAutoCompleterUI","autocompleter","_autocompleter$useIte","useItems","getDefaultUseItems","AutocompleterUI","filterValue","onChangeOptions","onReset","reset","contentRef","popoverAnchor","useAnchor","editableContentElement","current","needsA11yCompat","setNeedsA11yCompat","useState","popoverRef","useRef","popoverRefs","useMergeRefs","useRefEffect","node","ownerDocument","useOnClickOutside","debouncedSpeak","useDebounce","speak","announce","options","length","sprintf","_n","__","useLayoutEffect","jsxs","Fragment","focusOnMount","onClose","placement","anchor","ref","createPortal","VisuallyHidden","body","handler","useEffect","listener","event","contains","target","document","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\nimport type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';\n\ntype ListBoxProps = {\n\titems: KeyedOption[];\n\tonSelect: ( option: KeyedOption ) => void;\n\tselectedIndex: number;\n\tinstanceId: number;\n\tlistBoxId: string \| undefined;\n\tclassName?: string;\n\tComponent?: React.ElementType;\n};\n\nfunction ListBox( {\n\titems,\n\tonSelect,\n\tselectedIndex,\n\tinstanceId,\n\tlistBoxId,\n\tclassName,\n\tComponent = 'div',\n}: ListBoxProps ) {\n\treturn (\n\t\t<Component\n\t\t\tid={ listBoxId }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"components-autocomplete__results\"\n\t\t>\n\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t<Button\n\t\t\t\t\tkey={ option.key }\n\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// Unused, for backwards compatibility.\n\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvariant={ index === selectedIndex ? 'primary' : undefined }\n\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</Button>\n\t\t\t) ) }\n\t\t</Component>\n\t);\n}\n\nexport function getAutoCompleterUI( autocompleter: WPCompleter ) {\n\tconst useItems =\n\t\tautocompleter.useItems ?? getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\treset,\n\t\tcontentRef,\n\t}: AutocompleterUIProps ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t} );\n\n\t\tconst [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef< HTMLElement >( null );\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aria- attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\t\tfunction announce( options: Array< KeyedOption > ) {\n\t\t\tif ( ! debouncedSpeak ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( !! options.length ) {\n\t\t\t\tif ( filterValue ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. /\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/ translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\toptions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t}\n\t\t}\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tannounce( items );\n\t\t\t// We want to avoid introducing unexpected side effects.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t}, [ items ] );\n\n\t\tif ( items.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox\n\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox\n\t\t\t\t\t\t\titems={ items }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tComponent={ VisuallyHidden }\n\t\t\t\t\t\t/>,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nfunction useOnClickOutside(\n\tref: React.RefObject< HTMLElement >,\n\thandler: AutocompleterUIProps[ 'reset' ]\n) {\n\tuseEffect( () => {\n\t\tconst listener = ( event: MouseEvent \| TouchEvent ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif (\n\t\t\t\t! ref.current \|\|\n\t\t\t\tref.current.contains( event.target as Node )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t}, [ handler, ref ] );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/border-box-control/border-box-control/component.js CHANGED Viewed

@@ -103,6 +103,7 @@ const UnconnectedBorderBoxControl = (props, forwardedRef) => {
         withSlider: true,
         width: size === '__unstable-large' ? '116px' : '110px',
         __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+        __shouldNotWarnDeprecated36pxSize: true,
         size: size
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderBoxControlSplitControls.default, {
         colors: colors,

package/build/border-box-control/border-box-control/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlLinkedButton","_interopRequireDefault","_borderBoxControlSplitControls","_borderControl","_baseControlStyles","_view","_visuallyHidden","_context","_hook","_jsxRuntime","BorderLabel","props","label","hideLabelFromVision","jsx","VisuallyHidden","as","children","StyledLabel","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControl","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","mergedRef","useMergeRefs","jsxs","View","ref","BorderControl","onChange","placeholder","__","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","default","onClick","BorderBoxControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } 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 { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} 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 UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\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\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element \| null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\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<View className={ wrapperClassName }>\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\tdisableUnits={ disableUnits }\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\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\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\tsize={ size }\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__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\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\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/\n An input control for the color, style, and width of the border of a box. The\n * border can be customized as a whole, or individually for each side of the box.\n \n ```jsx\n * import { BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n \n const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n \n const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n \n \treturn (\n * \t\t<BorderBoxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlLinkedButton","_interopRequireDefault","_borderBoxControlSplitControls","_borderControl","_baseControlStyles","_view","_visuallyHidden","_context","_hook","_jsxRuntime","BorderLabel","props","label","hideLabelFromVision","jsx","VisuallyHidden","as","children","StyledLabel","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControl","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","mergedRef","useMergeRefs","jsxs","View","ref","BorderControl","onChange","placeholder","__","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","__shouldNotWarnDeprecated36pxSize","default","onClick","BorderBoxControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } 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 { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} 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 UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\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\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element \| null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\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<View className={ wrapperClassName }>\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\tdisableUnits={ disableUnits }\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\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\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__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\tsize={ size }\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__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\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\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/\n An input control for the color, style, and width of the border of a box. The\n * border can be customized as a whole, or individually for each side of the box.\n \n ```jsx\n * import { BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n \n const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n \n const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n \n \treturn (\n * \t\t<BorderBoxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -57,7 +57,8 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
     enableStyle,
     isCompact: true,
     __experimentalIsRenderedInSidebar,
-    size
+    size,
+    __shouldNotWarnDeprecated36pxSize: true
   };
   const mergedRef = (0, _compose.useMergeRefs)([setPopoverAnchor, forwardedRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid.Grid, {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlVisualizer","_interopRequireDefault","_borderControl","_grid","_context","_hook","_jsxRuntime","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","size","value","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControlSplitControls","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","sharedBorderControlProps","isCompact","mergedRef","useMergeRefs","jsxs","Grid","ref","gap","children","jsx","default","BorderControl","className","hideLabelFromVision","label","__","newBorder","__unstablePopoverProps","top","left","right","bottom","ConnectedBorderBoxControlSplitControls","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } 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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { BorderControlProps } from '../../border-control/types';\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\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element \| null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tsize,\n\t};\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } size={ size } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision\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\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\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\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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,2BAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAR,OAAA;AAA0D,IAAAS,WAAA,GAAAT,OAAA;AAf1D;AACA;AACA;;AAKA;AACA;AACA;;AAWA,MAAMU,6BAA6B,GAAGA,CACrCC,KAA2D,EAC3DC,YAAuC,KACnC;EACJ,MAAM;IACLC,iBAAiB;IACjBC,MAAM;IACNC,mBAAmB;IACnBC,WAAW;IACXC,WAAW;IACXC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,qBAAqB;IACrBC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,iCAAiC;IACjC,GAAGC;EACJ,CAAC,GAAG,IAAAC,sCAAgC,EAAEf,KAAM,CAAC;;EAE7C;EACA;EACA,MAAM,CAAEgB,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,iBAAQ,EACnD,IACD,CAAC;;EAED;EACA,MAAMC,YAA4D,GACjE,IAAAC,gBAAO,EACN,MACCZ,gBAAgB,GACb;IACAa,SAAS,EAAEb,gBAAgB;IAC3Bc,MAAM,EAAEb,aAAa;IACrBc,MAAM,EAAEP,aAAa;IACrBQ,KAAK,EAAE;EACP,CAAC,GACDC,SAAS,EACb,CAAEjB,gBAAgB,EAAEC,aAAa,EAAEO,aAAa,CACjD,CAAC;EAEF,MAAMU,wBAAwB,GAAG;IAChCvB,MAAM;IACNC,mBAAmB;IACnBC,WAAW;IACXC,WAAW;IACXqB,SAAS,EAAE,IAAI;IACfd,iCAAiC;IACjCF;~~EACD~~,CAAC;EAED,~~MAAMiB~~,SAAS,GAAG,IAAAC,qBAAY,EAAE,~~CAAEZ~~,gBAAgB,EAAEhB,YAAY,CAAG,CAAC;EAEpE,oBACC,IAAAH,WAAA,~~CAAAgC~~,IAAA,~~EAACnC~~,KAAA,~~CAAAoC~~,IAAI;IAAA,~~GAAMjB~~,UAAU;~~IAAGkB~~,GAAG,EAAGJ,SAAW;IAACK,GAAG,EAAG,CAAG;IAAAC,QAAA,gBAClD,~~IAAApC~~,WAAA,~~CAAAqC~~,GAAA,~~EAAC3C~~,2BAAA,~~CAAA4C~~,OAA0B;~~MAACxB~~,KAAK,EAAGA,KAAO;MAACD,IAAI,EAAGA;IAAM,CAAE,CAAC,eAC5D,IAAAb,WAAA,~~CAAAqC~~,GAAA,~~EAACzC~~,cAAA,~~CAAA2C~~,aAAa;MACbC,SAAS,~~EAAGpC~~,iBAAmB;MAC/~~BqC~~,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,YAAa,CAAG;~~MAC5BlC~~,QAAQ,~~EAAKmC~~,SAAS,~~IAAMnC~~,QAAQ,~~CAAEmC~~,SAAS,EAAE,KAAM,CAAG;MAC1DC,sBAAsB,~~EAAGxB~~,YAAc;MACvCP,KAAK,EAAGA,KAAK,~~EAAEgC~~,GAAK;MAAA,~~GACflB~~;IAAwB,CAC7B,CAAC,eACF,IAAA5B,WAAA,~~CAAAqC~~,GAAA,~~EAACzC~~,cAAA,~~CAAA2C~~,aAAa;MACbE,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,aAAc,CAAG;~~MAC7BlC~~,QAAQ,~~EAAKmC~~,SAAS,~~IAAMnC~~,QAAQ,~~CAAEmC~~,SAAS,EAAE,MAAO,CAAG;MAC3DC,sBAAsB,~~EAAGxB~~,YAAc;MACvCP,KAAK,EAAGA,KAAK,~~EAAEiC~~,IAAM;MAAA,~~GAChBnB~~;IAAwB,CAC7B,CAAC,eACF,IAAA5B,WAAA,~~CAAAqC~~,GAAA,~~EAACzC~~,cAAA,~~CAAA2C~~,aAAa;MACbC,SAAS,~~EAAG5B~~,qBAAuB;~~MACnC6B~~,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,cAAe,CAAG;~~MAC9BlC~~,QAAQ,~~EAAKmC~~,SAAS,~~IAAMnC~~,QAAQ,~~CAAEmC~~,SAAS,EAAE,OAAQ,CAAG;MAC5DC,sBAAsB,~~EAAGxB~~,YAAc;MACvCP,KAAK,EAAGA,KAAK,~~EAAEkC~~,KAAO;MAAA,~~GACjBpB~~;IAAwB,CAC7B,CAAC,eACF,IAAA5B,WAAA,~~CAAAqC~~,GAAA,~~EAACzC~~,cAAA,~~CAAA2C~~,aAAa;MACbC,SAAS,~~EAAGpC~~,iBAAmB;MAC/~~BqC~~,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;MAC/~~BlC~~,QAAQ,~~EAAKmC~~,SAAS,~~IAAMnC~~,QAAQ,~~CAAEmC~~,SAAS,EAAE,QAAS,CAAG;MAC7DC,sBAAsB,~~EAAGxB~~,YAAc;MACvCP,KAAK,EAAGA,KAAK,~~EAAEmC~~,MAAQ;MAAA,~~GAClBrB~~;IAAwB,CAC7B,CAAC;EAAA,CACG,CAAC;AAET,CAAC;AAED,~~MAAMsB~~,sCAAsC,GAAG,IAAAC,uBAAc,~~EAC5DlD~~,6BAA6B,EAC7B,+BACD,CAAC;AAAC,~~IAAAmD~~,QAAA,GAAAC,OAAA,CAAAf,OAAA,GACaY,sCAAsC","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlVisualizer","_interopRequireDefault","_borderControl","_grid","_context","_hook","_jsxRuntime","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","size","value","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControlSplitControls","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","sharedBorderControlProps","isCompact","__shouldNotWarnDeprecated36pxSize","mergedRef","useMergeRefs","jsxs","Grid","ref","gap","children","jsx","default","BorderControl","className","hideLabelFromVision","label","__","newBorder","__unstablePopoverProps","top","left","right","bottom","ConnectedBorderBoxControlSplitControls","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } 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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { BorderControlProps } from '../../border-control/types';\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\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element \| null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tsize,\n\t\t__shouldNotWarnDeprecated36pxSize: true,\n\t};\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } size={ size } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision\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\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\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\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"],"mappings":"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","ignoreList":[]}

package/build/border-control/border-control/component.js CHANGED Viewed

@@ -119,7 +119,8 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
         step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
         value: widthValue || undefined,
         withInputField: false,
-        __next40pxDefaultSize: __next40pxDefaultSize
+        __next40pxDefaultSize: __next40pxDefaultSize,
+        __shouldNotWarnDeprecated36pxSize: true
       })]
     })]
   });

package/build/border-control/border-control/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_borderControlDropdown","_interopRequireDefault","_unitControl","_rangeControl","_hStack","_baseControlStyles","_view","_visuallyHidden","_context","_hook","_spacer","_jsxRuntime","BorderLabel","props","label","hideLabelFromVision","jsx","VisuallyHidden","as","children","StyledLabel","UnconnectedBorderControl","forwardedRef","__next40pxDefaultSize","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","isStyleSettable","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","useBorderControl","jsxs","View","ref","HStack","spacing","className","default","prefix","Spacer","marginRight","marginBottom","onChange","__","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\nimport { Spacer } from '../../spacer';\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=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tisStyleSettable,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...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 spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<Spacer marginRight={ 1 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\t__unstablePopoverProps={\n\t\t\t\t\t\t\t\t\t__unstablePopoverProps\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\t\tpreviousStyleSelection={\n\t\t\t\t\t\t\t\t\tpreviousStyleSelection\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width \|\| '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue \|\| undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/\n The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n \n Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n \n ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n \n const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n \n const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n \n \treturn (\n * \t\t<BorderControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":"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~~MAAuB,CAC~~/C,CACD;IAAA,CACM,CAAC;EAAA,CACJ,CAAC;AAET,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,~~MAAMiD~~,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,uBAAc,~~EAC1CrD~~,wBAAwB,EACxB,eACD,CAAC;AAAC,~~IAAAsD~~,QAAA,GAAAF,OAAA,~~CAAAlB~~,OAAA,~~GAEaiB~~,aAAa","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_borderControlDropdown","_interopRequireDefault","_unitControl","_rangeControl","_hStack","_baseControlStyles","_view","_visuallyHidden","_context","_hook","_spacer","_jsxRuntime","BorderLabel","props","label","hideLabelFromVision","jsx","VisuallyHidden","as","children","StyledLabel","UnconnectedBorderControl","forwardedRef","__next40pxDefaultSize","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","isStyleSettable","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","useBorderControl","jsxs","View","ref","HStack","spacing","className","default","prefix","Spacer","marginRight","marginBottom","onChange","__","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","__shouldNotWarnDeprecated36pxSize","BorderControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-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 type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\nimport { Spacer } from '../../spacer';\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=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tisStyleSettable,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...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 spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<Spacer marginRight={ 1 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\t__unstablePopoverProps={\n\t\t\t\t\t\t\t\t\t__unstablePopoverProps\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\t\tpreviousStyleSelection={\n\t\t\t\t\t\t\t\t\tpreviousStyleSelection\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width \|\| '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue \|\| undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/\n The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n \n Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n \n ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n \n const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n \n const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n \n \treturn (\n * \t\t<BorderControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,aAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,eAAA,GAAAR,OAAA;AAEA,IAAAS,QAAA,GAAAT,OAAA;AACA,IAAAU,KAAA,GAAAV,OAAA;AAGA,IAAAW,OAAA,GAAAX,OAAA;AAAsC,IAAAY,WAAA,GAAAZ,OAAA;AApBtC;AACA;AACA;;AAGA;AACA;AACA;;AAeA,MAAMa,WAAW,GAAKC,KAAiB,IAAM;EAC5C,MAAM;IAAEC,KAAK;IAAEC;EAAoB,CAAC,GAAGF,KAAK;EAE5C,IAAK,CAAEC,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,OAAOC,mBAAmB,gBACzB,IAAAJ,WAAA,CAAAK,GAAA,EAACT,eAAA,CAAAU,cAAc;IAACC,EAAE,EAAC,QAAQ;IAAAC,QAAA,EAAGL;EAAK,CAAkB,CAAC,gBAEtD,IAAAH,WAAA,CAAAK,GAAA,EAACX,kBAAA,CAAAe,WAAW;IAACF,EAAE,EAAC,QAAQ;IAAAC,QAAA,EAAGL;EAAK,CAAe,CAC/C;AACF,CAAC;AAED,MAAMO,wBAAwB,GAAGA,CAChCR,KAAkE,EAClES,YAAuC,KACnC;EACJ,MAAM;IACLC,qBAAqB,GAAG,KAAK;IAC7BC,MAAM;IACNC,mBAAmB;IACnBC,YAAY;IACZC,WAAW;IACXC,WAAW;IACXb,mBAAmB;IACnBc,qBAAqB;IACrBC,UAAU;IACVC,eAAe;IACfjB,KAAK;IACLkB,cAAc;IACdC,cAAc;IACdC,aAAa;IACbC,WAAW;IACXC,sBAAsB;IACtBC,sBAAsB;IACtBC,kBAAkB;IAClBC,IAAI;IACJC,eAAe;IACfC,KAAK,EAAEC,MAAM;IACbC,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,iCAAiC;IACjC,GAAGC;EACJ,CAAC,GAAG,IAAAC,sBAAgB,EAAEnC,KAAM,CAAC;EAE7B,oBACC,IAAAF,WAAA,CAAAsC,IAAA,EAAC3C,KAAA,CAAA4C,IAAI;IAAChC,EAAE,EAAC,UAAU;IAAA,GAAM6B,UAAU;IAAGI,GAAG,EAAG7B,YAAc;IAAAH,QAAA,gBACzD,IAAAR,WAAA,CAAAK,GAAA,EAACJ,WAAW;MACXE,KAAK,EAAGA,KAAO;MACfC,mBAAmB,EAAGA;IAAqB,CAC3C,CAAC,eACF,IAAAJ,WAAA,CAAAsC,IAAA,EAAC7C,OAAA,CAAAgD,MAAM;MAACC,OAAO,EAAG,CAAG;MAACC,SAAS,EAAGzB,qBAAuB;MAAAV,QAAA,gBACxD,IAAAR,WAAA,CAAAK,GAAA,EAACd,YAAA,CAAAqD,OAAW;QACXC,MAAM,eACL,IAAA7C,WAAA,CAAAK,GAAA,EAACN,OAAA,CAAA+C,MAAM;UAACC,WAAW,EAAG,CAAG;UAACC,YAAY,EAAG,CAAG;UAAAxC,QAAA,eAC3C,IAAAR,WAAA,CAAAK,GAAA,EAAChB,sBAAA,CAAAuD,OAAqB;YACrBb,MAAM,EAAGA,MAAQ;YACjBlB,MAAM,EAAGA,MAAQ;YACjBY,sBAAsB,EACrBA,sBACA;YACDX,mBAAmB,EAAGA,mBAAqB;YAC3CE,WAAW,EAAGA,WAAa;YAC3BC,WAAW,EAAGA,WAAa;YAC3BG,eAAe,EAAGA,eAAiB;YACnC6B,QAAQ,EAAG5B,cAAgB;YAC3BK,sBAAsB,EACrBA,sBACA;YACDS,iCAAiC,EAChCA,iCACA;YACDP,IAAI,EAAGA;UAAM,CACb;QAAC,CACK,CACR;QACDzB,KAAK,EAAG,IAAA+C,QAAE,EAAE,cAAe,CAAG;QAC9B9C,mBAAmB;QACnB+C,GAAG,EAAG,CAAG;QACTF,QAAQ,EAAG1B,aAAe;QAC1BO,KAAK,EAAGC,MAAM,EAAEqB,KAAK,IAAI,EAAI;QAC7B5B,WAAW,EAAGA,WAAa;QAC3BT,YAAY,EAAGA,YAAc;QAC7BsC,oBAAoB,EAAGlC,UAAY;QACnCS,IAAI,EAAGA;MAAM,CACb,CAAC,EACAM,UAAU,iBACX,IAAAlC,WAAA,CAAAK,GAAA,EAACb,aAAA,CAAAoD,OAAY;QACZU,uBAAuB;QACvBnD,KAAK,EAAG,IAAA+C,QAAE,EAAE,cAAe,CAAG;QAC9B9C,mBAAmB;QACnBuC,SAAS,EAAGd,eAAiB;QAC7B0B,eAAe,EAAG,CAAG;QACrBC,GAAG,EAAG,GAAK;QACXL,GAAG,EAAG,CAAG;QACTF,QAAQ,EAAG3B,cAAgB;QAC3BmC,IAAI,EAAG,CAAE,IAAI,EAAE,GAAG,CAAE,CAACC,QAAQ,CAAE1B,SAAU,CAAC,GAAG,CAAC,GAAG,GAAK;QACtDF,KAAK,EAAGG,UAAU,IAAI0B,SAAW;QACjCC,cAAc,EAAG,KAAO;QACxBhD,qBAAqB,EAAGA,qBAAuB;QAC/CiD,iCAAiC;MAAA,CACjC,CACD;IAAA,CACM,CAAC;EAAA,CACJ,CAAC;AAET,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,uBAAc,EAC1CtD,wBAAwB,EACxB,eACD,CAAC;AAAC,IAAAuD,QAAA,GAAAF,OAAA,CAAAnB,OAAA,GAEakB,aAAa","ignoreList":[]}

package/build/border-control/border-control/hook.js CHANGED Viewed

@@ -41,12 +41,14 @@ function useBorderControl(props) {
     width,
     __experimentalIsRenderedInSidebar = false,
     __next40pxDefaultSize,
+    __shouldNotWarnDeprecated36pxSize,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'BorderControl');
   (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
     componentName: 'BorderControl',
     __next40pxDefaultSize,
-    size
+    size,
+    __shouldNotWarnDeprecated36pxSize
   });
   const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
   const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border?.width);

package/build/border-control/border-control/hook.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","styles","_interopRequireWildcard","_utils","_context","_useCx","_deprecated36pxSize","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","isValidBorder","border","hasWidth","width","undefined","hasColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","useContextSystem","maybeWarnDeprecated36pxSize","componentName","computedSize","widthValue","originalWidthUnit","parseQuantityAndUnitFromRawValue","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","useState","styleSelection","setStyleSelection","isStyleSettable","onBorderChange","useCallback","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","useCx","classes","useMemo","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { Border, BorderControlProps } from '../types';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = ( border?: Border ) => {\n\tconst hasWidth = border?.width !== undefined && border.width !== '';\n\tconst hasColor = border?.color !== undefined;\n\treturn hasWidth \|\| hasColor;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tisCompact,\n\t\tonChange,\n\t\tenableAlpha = true,\n\t\tenableStyle = true,\n\t\tshouldSanitizeBorder = true,\n\t\tsize = 'default',\n\t\tvalue: border,\n\t\twidth,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BorderControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t} );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit \|\| 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst isStyleSettable = shouldSanitizeBorder\n\t\t? isValidBorder( border )\n\t\t: true;\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {\n\t\t\t\tonChange( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tlet wrapperWidth = width;\n\tif ( isCompact ) {\n\t\t// Widths below represent the minimum usable width for compact controls.\n\t\t// Taller controls contain greater internal padding, thus greater width.\n\t\twrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n\t}\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( computedSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, computedSize ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\n\t\tisStyleSettable,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\tsize: computedSize,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next40pxDefaultSize,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","styles","_interopRequireWildcard","_utils","_context","_useCx","_deprecated36pxSize","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","isValidBorder","border","hasWidth","width","undefined","hasColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","__shouldNotWarnDeprecated36pxSize","otherProps","useContextSystem","maybeWarnDeprecated36pxSize","componentName","computedSize","widthValue","originalWidthUnit","parseQuantityAndUnitFromRawValue","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","useState","styleSelection","setStyleSelection","isStyleSettable","onBorderChange","useCallback","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","useCx","classes","useMemo","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { Border, BorderControlProps } from '../types';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = ( border?: Border ) => {\n\tconst hasWidth = border?.width !== undefined && border.width !== '';\n\tconst hasColor = border?.color !== undefined;\n\treturn hasWidth \|\| hasColor;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tisCompact,\n\t\tonChange,\n\t\tenableAlpha = true,\n\t\tenableStyle = true,\n\t\tshouldSanitizeBorder = true,\n\t\tsize = 'default',\n\t\tvalue: border,\n\t\twidth,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BorderControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t} );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit \|\| 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst isStyleSettable = shouldSanitizeBorder\n\t\t? isValidBorder( border )\n\t\t: true;\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {\n\t\t\t\tonChange( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tlet wrapperWidth = width;\n\tif ( isCompact ) {\n\t\t// Widths below represent the minimum usable width for compact controls.\n\t\t// Taller controls contain greater internal padding, thus greater width.\n\t\twrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n\t}\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( computedSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, computedSize ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\n\t\tisStyleSettable,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\tsize: computedSize,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next40pxDefaultSize,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

package/build/border-control/border-control-dropdown/component.js CHANGED Viewed

@@ -123,7 +123,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     tooltipPosition: dropdownPosition,
     label: (0, _i18n.__)('Border color and style picker'),
     showTooltip: true,
-    __next40pxDefaultSize: size === '__unstable-large' ? true : false,
+    __next40pxDefaultSize: size === '__unstable-large',
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: indicatorWrapperClassName,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {

package/build/border-control/border-control-dropdown/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_borderControlStylePicker","_interopRequireDefault","_button","_colorIndicator","_colorPalette","_dropdown","_vStack","_context","_hook","_dropdownContentWrapper","_utils","_jsxRuntime","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","isMultiplePaletteArray","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","sprintf","__","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","size","__unstablePopoverProps","otherProps","useBorderControlDropdown","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","jsx","default","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","children","className","renderContent","onClose","jsxs","Fragment","paddingSize","VStack","spacing","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\$(.+)\$$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] \| undefined\n) => {\n\tif ( ! colorValue \|\| ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject \| undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t),\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color has a value of \"%s\".'\n\t\t\t),\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tisStyleSettable,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tsize,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border \|\| {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color \|\| ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' ? true : false }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\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\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && isStyleSettable && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_borderControlStylePicker","_interopRequireDefault","_button","_colorIndicator","_colorPalette","_dropdown","_vStack","_context","_hook","_dropdownContentWrapper","_utils","_jsxRuntime","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","isMultiplePaletteArray","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","sprintf","__","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","size","__unstablePopoverProps","otherProps","useBorderControlDropdown","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","jsx","default","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","children","className","renderContent","onClose","jsxs","Fragment","paddingSize","VStack","spacing","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\$(.+)\$$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] \| undefined\n) => {\n\tif ( ! colorValue \|\| ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject \| undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t),\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color has a value of \"%s\".'\n\t\t\t),\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tisStyleSettable,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tsize,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border \|\| {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color \|\| ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\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\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && isStyleSettable && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"],"mappings":";;;;;;;AAQA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,yBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,eAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,aAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,SAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAEA,IAAAQ,QAAA,GAAAR,OAAA;AACA,IAAAS,KAAA,GAAAT,OAAA;AACA,IAAAU,uBAAA,GAAAR,sBAAA,CAAAF,OAAA;AAGA,IAAAW,MAAA,GAAAX,OAAA;AAAmE,IAAAY,WAAA,GAAAZ,OAAA;AAzBnE;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAiBA,MAAMa,sBAAsB,GAAKC,UAAkB,IAAM;EACxD;EACA,OAAOA,UAAU,CAACC,OAAO,CAAE,eAAe,EAAE,IAAK,CAAC;AACnD,CAAC;AAED,MAAMC,cAAc,GAAGA,CACtBF,UAA0C,EAC1CG,MAA0C,KACtC;EACJ,IAAK,CAAEH,UAAU,IAAI,CAAEG,MAAM,EAAG;IAC/B;EACD;EAEA,IAAK,IAAAC,6BAAsB,EAAED,MAAO,CAAC,EAAG;IACvC;IACA,IAAIE,YAAY;IAEhBF,MAAM,CAACG,IAAI,CAAIC,MAAM,IACpBA,MAAM,CAACJ,MAAM,CAACG,IAAI,CAAIE,KAAK,IAAM;MAChC,IAAKA,KAAK,CAACA,KAAK,KAAKR,UAAU,EAAG;QACjCK,YAAY,GAAGG,KAAK;QACpB,OAAO,IAAI;MACZ;MAEA,OAAO,KAAK;IACb,CAAE,CACH,CAAC;IAED,OAAOH,YAAY;EACpB;;EAEA;EACA,OAAOF,MAAM,CAACM,IAAI,CAAID,KAAK,IAAMA,KAAK,CAACA,KAAK,KAAKR,UAAW,CAAC;AAC9D,CAAC;AAED,MAAMU,kBAAkB,GAAGA,CAC1BV,UAA0C,EAC1CW,WAAoC,EACpCC,KAAqC,EACrCC,cAAuB,KACnB;EACJ,IAAKA,cAAc,EAAG;IACrB,IAAKF,WAAW,EAAG;MAClB,MAAMG,cAAc,GAAGf,sBAAsB,CAAEY,WAAW,CAACH,KAAM,CAAC;MAClE,OAAOI,KAAK,GACT,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,iJACD,CAAC,EACDL,WAAW,CAACM,IAAI,EAChBH,cAAc,EACdF,KACA,CAAC,GACD,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,yGACD,CAAC,EACDL,WAAW,CAACM,IAAI,EAChBH,cACA,CAAC;IACL;IAEA,IAAKd,UAAU,EAAG;MACjB,MAAMc,cAAc,GAAGf,sBAAsB,CAAEC,UAAW,CAAC;MAC3D,OAAOY,KAAK,GACT,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,4HACD,CAAC,EACDF,cAAc,EACdF,KACA,CAAC,GACD,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,kFACD,CAAC,EACDF,cACA,CAAC;IACL;IAEA,OAAO,IAAAE,QAAE,EAAE,gCAAiC,CAAC;EAC9C;EAEA,IAAKL,WAAW,EAAG;IAClB,OAAO,IAAAI,aAAO;IACb;IACA,IAAAC,QAAE,EACD,+FACD,CAAC,EACDL,WAAW,CAACM,IAAI,EAChBlB,sBAAsB,CAAEY,WAAW,CAACH,KAAM,CAC3C,CAAC;EACF;EAEA,IAAKR,UAAU,EAAG;IACjB,OAAO,IAAAe,aAAO;IACb;IACA,IAAAC,QAAE,EACD,wEACD,CAAC,EACDjB,sBAAsB,CAAEC,UAAW,CACpC,CAAC;EACF;EAEA,OAAO,IAAAgB,QAAE,EAAE,sBAAuB,CAAC;AACpC,CAAC;AAED,MAAME,qBAAqB,GAAGA,CAC7BC,KAAsD,EACtDC,YAAuC,KACnC;EACJ,MAAM;IACLC,iCAAiC;IACjCC,MAAM;IACNnB,MAAM;IACNoB,mBAAmB;IACnBC,WAAW;IACXC,WAAW;IACXC,kBAAkB;IAClBC,yBAAyB;IACzBC,eAAe;IACfC,OAAO;IACPC,aAAa;IACbC,aAAa;IACbC,uBAAuB;IACvBC,wBAAwB;IACxBC,oBAAoB;IACpBC,IAAI;IACJC,sBAAsB;IACtB,GAAGC;EACJ,CAAC,GAAG,IAAAC,8BAAwB,EAAEnB,KAAM,CAAC;EAErC,MAAM;IAAEX,KAAK;IAAEI;EAAM,CAAC,GAAGU,MAAM,IAAI,CAAC,CAAC;EACrC,MAAMX,WAAW,GAAGT,cAAc,CAAEM,KAAK,EAAEL,MAAO,CAAC;EAEnD,MAAMoC,eAAe,GAAG7B,kBAAkB,CACzCF,KAAK,EACLG,WAAW,EACXC,KAAK,EACLa,WACD,CAAC;EAED,MAAMe,eAAe,GAAGhC,KAAK,IAAMI,KAAK,IAAIA,KAAK,KAAK,MAAQ;EAC9D,MAAM6B,gBAAgB,GAAGpB,iCAAiC,GACvD,aAAa,GACbqB,SAAS;EAEZ,MAAMC,YAAsD,GAAGA,CAAE;IAChEC;EACD,CAAC,kBACA,IAAA9C,WAAA,CAAA+C,GAAA,EAACxD,OAAA,CAAAyD,OAAM;IACNC,OAAO,EAAGH,QAAU;IACpBI,OAAO,EAAC,UAAU;IAClB,cAAaT,eAAiB;IAC9BU,eAAe,EAAGR,gBAAkB;IACpCS,KAAK,EAAG,IAAAlC,QAAE,EAAE,+BAAgC,CAAG;IAC/CmC,WAAW;IACXC,qBAAqB,EAAGjB,IAAI,KAAK,kBAAoB;IAAAkB,QAAA,eAErD,IAAAvD,WAAA,CAAA+C,GAAA;MAAMS,SAAS,EAAG3B,yBAA2B;MAAA0B,QAAA,eAC5C,IAAAvD,WAAA,CAAA+C,GAAA,EAACvD,eAAA,CAAAwD,OAAc;QACdQ,SAAS,EAAG5B,kBAAoB;QAChC1B,UAAU,EAAGQ;MAAO,CACpB;IAAC,CACG;EAAC,CACA,CACR;EAED,MAAM+C,aAAwD,GAAGA,CAAE;IAClEC;EACD,CAAC,kBACA,IAAA1D,WAAA,CAAA2D,IAAA,EAAA3D,WAAA,CAAA4D,QAAA;IAAAL,QAAA,gBACC,IAAAvD,WAAA,CAAA+C,GAAA,EAACjD,uBAAA,CAAAkD,OAAsB;MAACa,WAAW,EAAC,QAAQ;MAAAN,QAAA,eAC3C,IAAAvD,WAAA,CAAA2D,IAAA,EAAChE,OAAA,CAAAmE,MAAM;QAACN,SAAS,EAAGrB,wBAA0B;QAAC4B,OAAO,EAAG,CAAG;QAAAR,QAAA,gBAC3D,IAAAvD,WAAA,CAAA+C,GAAA,EAACtD,aAAA,CAAAuD,OAAY;UACZQ,SAAS,EAAGtB,uBAAyB;UACrC8B,KAAK,EAAGtD,KAAO;UACfuD,QAAQ,EAAGjC,aAAe;UACnB3B,MAAM;UAAEoB,mBAAmB;UAClCF,iCAAiC,EAChCA,iCACA;UACD2C,SAAS,EAAG,KAAO;UACnBxC,WAAW,EAAGA;QAAa,CAC3B,CAAC,EACAC,WAAW,IAAIG,eAAe,iBAC/B,IAAA9B,WAAA,CAAA+C,GAAA,EAAC1D,yBAAA,CAAA2D,OAAwB;UACxBI,KAAK,EAAG,IAAAlC,QAAE,EAAE,OAAQ,CAAG;UACvB8C,KAAK,EAAGlD,KAAO;UACfmD,QAAQ,EAAGhC;QAAe,CAC1B,CACD;MAAA,CACM;IAAC,CACc,CAAC,EACvBS,eAAe,iBAChB,IAAA1C,WAAA,CAAA+C,GAAA,EAACjD,uBAAA,CAAAkD,OAAsB;MAACa,WAAW,EAAC,MAAM;MAAAN,QAAA,eACzC,IAAAvD,WAAA,CAAA+C,GAAA,EAACxD,OAAA,CAAAyD,OAAM;QACNQ,SAAS,EAAGpB,oBAAsB;QAClCc,OAAO,EAAC,UAAU;QAClBD,OAAO,EAAGA,CAAA,KAAM;UACflB,OAAO,CAAC,CAAC;UACT2B,OAAO,CAAC,CAAC;QACV,CAAG;QACHJ,qBAAqB;QAAAC,QAAA,EAEnB,IAAArC,QAAE,EAAE,OAAQ;MAAC,CACR;IAAC,CACc,CACxB;EAAA,CACA,CACF;EAED,oBACC,IAAAlB,WAAA,CAAA+C,GAAA,EAACrD,SAAA,CAAAsD,OAAQ;IACRH,YAAY,EAAGA,YAAc;IAC7BY,aAAa,EAAGA,aAAe;IAC/BU,YAAY,EAAG;MACd,GAAG7B;IACJ,CAAG;IAAA,GACEC,UAAU;IACf6B,GAAG,EAAG9C;EAAc,CACpB,CAAC;AAEJ,CAAC;AAED,MAAM+C,8BAA8B,GAAG,IAAAC,uBAAc,EACpDlD,qBAAqB,EACrB,uBACD,CAAC;AAAC,IAAAmD,QAAA,GAAAC,OAAA,CAAAxB,OAAA,GAEaqB,8BAA8B","ignoreList":[]}

package/build/border-control/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n Internal dependencies\n /\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' \| '__experimentalIsRenderedInSidebar'\n> & {\n\t/\n\t This toggles the ability to choose custom colors.\n\t /\n\tdisableCustomColors?: boolean;\n\t/\n\t This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t \n\t @default true\n\t /\n\tenableAlpha?: boolean;\n};\n\nexport type LabelProps = {\n\t/\n\t Provides control over whether the label will only be visible to\n\t * screen readers.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t If provided, a label will be generated using this as the content.\n\t /\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/\n\t\t This controls whether unit selection should be disabled.\n\t\t /\n\t\tdisableUnits?: boolean;\n\t\t/\n\t\t This controls whether to support border style selection.\n\t\t \n\t\t @default true\n\t\t /\n\t\tenableStyle?: boolean;\n\t\t/\n\t\t This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t /\n\t\tisCompact?: boolean;\n\t\t/\n\t\t A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t /\n\t\tonChange: ( value?: Border ) => void;\n\t\t/\n\t\t Placeholder text for the number input.\n\t\t /\n\t\tplaceholder?: HTMLInputElement[ 'placeholder' ];\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t\t/\n\t\t Size of the control.\n\t\t \n\t\t @default 'default'\n\t\t /\n\t\tsize?: 'default' \| '__unstable-large';\n\t\t/\n\t\t An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t /\n\t\tvalue?: Border;\n\t\t/\n\t\t Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t /\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/\n\t\t Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t /\n\t\twithSlider?: boolean;\n\t\t/\n\t\t Start opting into the larger default height that will become the default size in a future version.\n\t\t \n\t\t @default false\n\t\t /\n\t\t__next40pxDefaultSize?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t /\n\t\tborder?: Border;\n\t\t/\n\t\t Whether a border style can be set, based on the border sanitization settings.\n\t\t /\n\t\tisStyleSettable: boolean;\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t A callback invoked when the border color or style selections change.\n\t\t /\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/\n\t\t Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t /\n\t\tpreviousStyleSelection?: string;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' \| 'onChange' \| 'children'\n> & {\n\t/\n\t A callback function invoked when a border style is selected or cleared.\n\t /\n\tonChange: ( style?: string ) => void;\n\t/\n\t The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n Internal dependencies\n /\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' \| '__experimentalIsRenderedInSidebar'\n> & {\n\t/\n\t This toggles the ability to choose custom colors.\n\t /\n\tdisableCustomColors?: boolean;\n\t/\n\t This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t \n\t @default true\n\t /\n\tenableAlpha?: boolean;\n};\n\nexport type LabelProps = {\n\t/\n\t Provides control over whether the label will only be visible to\n\t * screen readers.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t If provided, a label will be generated using this as the content.\n\t /\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/\n\t\t This controls whether unit selection should be disabled.\n\t\t /\n\t\tdisableUnits?: boolean;\n\t\t/\n\t\t This controls whether to support border style selection.\n\t\t \n\t\t @default true\n\t\t /\n\t\tenableStyle?: boolean;\n\t\t/\n\t\t This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t /\n\t\tisCompact?: boolean;\n\t\t/\n\t\t A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t /\n\t\tonChange: ( value?: Border ) => void;\n\t\t/\n\t\t Placeholder text for the number input.\n\t\t /\n\t\tplaceholder?: HTMLInputElement[ 'placeholder' ];\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t\t/\n\t\t Size of the control.\n\t\t \n\t\t @default 'default'\n\t\t /\n\t\tsize?: 'default' \| '__unstable-large';\n\t\t/\n\t\t An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t /\n\t\tvalue?: Border;\n\t\t/\n\t\t Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t /\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/\n\t\t Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t /\n\t\twithSlider?: boolean;\n\t\t/\n\t\t Start opting into the larger default height that will become the default size in a future version.\n\t\t \n\t\t @default false\n\t\t /\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/\n\t\t Do not throw a warning for the deprecated 36px default size.\n\t\t * For internal components of other components that already throw the warning.\n\t\t \n\t\t @ignore\n\t\t /\n\t\t__shouldNotWarnDeprecated36pxSize?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t /\n\t\tborder?: Border;\n\t\t/\n\t\t Whether a border style can be set, based on the border sanitization settings.\n\t\t /\n\t\tisStyleSettable: boolean;\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t A callback invoked when the border color or style selections change.\n\t\t /\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/\n\t\t Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t /\n\t\tpreviousStyleSelection?: string;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' \| 'onChange' \| 'children'\n> & {\n\t/\n\t A callback function invoked when a border style is selected or cleared.\n\t /\n\tonChange: ( style?: string ) => void;\n\t/\n\t The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":"","ignoreList":[]}

package/build/box-control/all-input-control.js CHANGED Viewed

@@ -74,6 +74,7 @@ function AllInputControl({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
       __nextHasNoMarginBottom: true,
       __next40pxDefaultSize: __next40pxDefaultSize,
+      __shouldNotWarnDeprecated36pxSize: true,
       "aria-controls": inputId,
       label: _utils.LABELS.all,
       hideLabelFromVision: true,