@wordpress/components 28.12.0 → 28.13.0

package/CHANGELOG.md

@@ -2,6 +2,51 @@
 
 ## Unreleased
 
+## 28.13.0 (2024-11-27)
+
+### 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)).
+-   `CircularOptionPicker`: Update `Button` sizes to be ready for 40px default size ([#67285](https://github.com/WordPress/gutenberg/pull/67285)).
+
+### 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)).
+-   `CustomGradientPicker`: Prepare `Button`s for 40px default size ([#67286](https://github.com/WordPress/gutenberg/pull/67286)).
+
 ## 28.12.0 (2024-11-16)
 
 ### Deprecations
@@ -11,7 +56,6 @@
 ### Bug Fixes
 
 -   `Popover`: Fix missing label of the headerTitle Close button ([#66813](https://github.com/WordPress/gutenberg/pull/66813)).
--   `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)).
 
 ### Enhancements
 

package/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 Thank you for taking the time to contribute.
 
-The following is a set of guidelines for contributing to the `@wordpress/components` package to be considered in addition to the general ones described in our [Contributing Policy](/CONTRIBUTING.md).
+The following is a set of guidelines for contributing to the `@wordpress/components` package to be considered in addition to the general ones described in our [Contributing Policy](https://github.com/WordPress/gutenberg/blob/HEAD/CONTRIBUTING.md).
 
 This set of guidelines should apply especially to newly introduced components. In fact, while these guidelines should also be retroactively applied to existing components, it is sometimes impossible to do so for legacy/compatibility reasons.
 
@@ -36,7 +36,7 @@ To determine if a component should be added, ask yourself:
 
 Here’s a flowchart that can help determine if a new component is necessary:
 
-[![New component flowchart](https://wordpress.org/gutenberg/files/2019/07/New_component_flowchart.png)](https://coggle.it/diagram/WtUSrld3uAYZHsn-/t/new-ui-component/992b38cbe685d897b4aec6d0dd93cc4b47c06e0d4484eeb0d7d9a47fb2c48d94)
+![New component flowchart](https://wordpress.org/gutenberg/files/2019/07/New_component_flowchart.png)
 
 ### First steps
 
@@ -95,12 +95,12 @@ In these situations, one possible approach is to "soft-deprecate" a given legacy
 2. Updating all places in Gutenberg that use that API.
 3. Adding deprecation warnings (only after the previous point is completed, otherwise the Browser Console will be polluted by all those warnings and some e2e tests may fail).
 
-When adding new components or new props to existing components, it's recommended to create a [private version](/packages/private-apis/README.md)) of the component until the changes are stable enough to be exposed as part of the public API.
+When adding new components or new props to existing components, it's recommended to create a [private version](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/) of the component until the changes are stable enough to be exposed as part of the public API.
 
 ### Learn more
 
--   [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component)
--   [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#legacy-experimental-apis-plugin-only-apis-and-private-apis)
+-   [How to preserve backward compatibility for a React Component](https://developer.wordpress.org/block-editor/contributors/code/backward-compatibility/#how-to-preserve-backward-compatibility-for-a-react-component)
+-   [Experimental and Unstable APIs](https://developer.wordpress.org/block-editor/contributors/code/coding-guidelines/#legacy-experimental-apis-plugin-only-apis-and-private-apis)
 -   [Deprecating styles](#deprecating-styles)
 
 <!-- ## Polymorphic Components (i.e. the `as` prop)
@@ -216,8 +216,8 @@ function Example(
 
 A couple of good examples of how hooks are used for composition are:
 
--   the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
--   the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).
+-   the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/card/card/hook.ts);
+-   the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/h-stack/hook.tsx).
 
 <!-- ## API Consinstency
 
@@ -418,7 +418,7 @@ On the component's main named export, add a JSDoc comment that includes the main
 
 All new component should be styled using [Emotion](https://emotion.sh/docs/introduction).
 
-Note: Instead of using Emotion's standard `cx` function, the custom [`useCx` hook](/packages/components/src/utils/hooks/use-cx.ts) should be used instead.
+Note: Instead of using Emotion's standard `cx` function, the custom [`useCx` hook](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/utils/hooks/use-cx.ts) should be used instead.
 
 ### Deprecating styles
 
@@ -462,7 +462,7 @@ export const Wrapper = styled.div`
 
 Once deprecated, code examples in docs/stories should include the opt-in prop set to `true` so that new consumers are encouraged to adopt it from the start.
 
-Remember to [add a **Needs Dev Note** label](/docs/contributors/code/backward-compatibility.md##dev-notes) to the pull request so third-party developers can be informed of the deprecation.
+Remember to [add a **Needs Dev Note** label](https://developer.wordpress.org/block-editor/contributors/code/backward-compatibility/#dev-notes) to the pull request so third-party developers can be informed of the deprecation.
 
 When the grace period is over and the deprecation version arrives, the `__next*` prop, deprecation notice, and deprecated styles should all be completely removed from the codebase.
 
@@ -491,7 +491,7 @@ Components can use this system via a couple of functions:
 -   they can connect to the Context via `contextConnect`
 -   they can read the "computed" values from the context via `useContextSystem`
 
-An example of how this is used can be found in the [`Card` component family](/packages/components/src/card). For example, this is how the `Card` component injects the `size` and `isBorderless` props down to its `CardBody` subcomponent — which makes it use the correct spacing and border settings "auto-magically".
+An example of how this is used can be found in the [`Card` component family](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/card). For example, this is how the `Card` component injects the `size` and `isBorderless` props down to its `CardBody` subcomponent — which makes it use the correct spacing and border settings "auto-magically".
 
 ```jsx
 //=========================================================================
@@ -564,7 +564,7 @@ export function useCardBody( props ) {
 
 ## Unit tests
 
-Please refer to the [JavaScript Testing Overview docs](/docs/contributors/code/testing-overview.md#snapshot-testing).
+Please refer to the [JavaScript Testing Overview docs](https://developer.wordpress.org/block-editor/contributors/code/testing-overview/#snapshot-testing).
 
 ## Storybook
 
@@ -596,13 +596,13 @@ Primary.args = {
 
 A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Historically, we used [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs), but it was deprecated and later removed in [#47152](https://github.com/WordPress/gutenberg/pull/47152).
 
-The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.tsx)).
+The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/card/stories/index.story.tsx)).
 
 Storybook can be started on a local machine by running `npm run storybook:dev`. Alternatively, the components' catalogue (up to date with the latest code on `trunk`) can be found at [wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/).
 
 ## Documentation
 
-All components, in addition to being typed, should be using JSDoc when necessary — as explained in the [Coding Guidelines](/docs/contributors/code/coding-guidelines.md#javascript-documentation-using-jsdoc).
+All components, in addition to being typed, should be using JSDoc when necessary — as explained in the [Coding Guidelines](https://developer.wordpress.org/block-editor/contributors/code/coding-guidelines/#javascript-documentation-using-jsdoc).
 
 Each component that is exported from the `@wordpress/components` package should include a `README.md` file, explaining how to use the component, showing examples, and documenting all the props.
 
@@ -625,7 +625,7 @@ Description of the component.
 
 ## Usage
 
-Code example using correct markdown syntax and formatted using project's formatting rules. See [ItemGroup](/packages/components/src/item-group/item-group/README.md#usage) for a real-world example.
+Code example using correct markdown syntax and formatted using project's formatting rules. See [ItemGroup](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/item-group/item-group/README.md) for a real-world example.
 
 ```jsx
 import { ExampleComponent } from '@wordpress/components';
@@ -653,13 +653,13 @@ Prop description. With a new line before and after the description and before an
 
 ### Inherited props
 
-Add this section when there are props that are drilled down into an internal component. See [ClipboardButton](/packages/components/src/clipboard-button/README.md) for an example.
+Add this section when there are props that are drilled down into an internal component. See [ClipboardButton](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/clipboard-button/README.md) for an example.
 
 <!-- Only add the next section if the component relies on the [Context System](#context-system) -->
 
 ## Context
 
-See examples for this section for the [ItemGroup](/packages/components/src/item-group/item-group/README.md#context) and [`Card`](/packages/components/src/card/card/README.md#context) components.
+See examples for this section for the [ItemGroup](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/item-group/item-group/README.md#context) and [`Card`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/card/card#context) components.
 ````
 
 ## Folder structure

package/build/autocomplete/autocompleter-ui.js

@@ -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

@@ -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":[]}
+{"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

@@ -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

@@ -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":[]}
+{"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

@@ -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

@@ -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":"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","ignoreList":[]}
+{"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

@@ -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

@@ -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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","ignoreList":[]}
+{"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":"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","ignoreList":[]}

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

@@ -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

@@ -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":[]}
+{"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/types.js.map

@@ -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":[]}
+{"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

@@ -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,