npm - @wordpress/components - Versions diffs - 25.15.0 → 25.16.0 - Mend

@wordpress/components 25.15.0 → 25.16.0

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

Files changed (236) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,32 @@
 ## Unreleased
+## 25.16.0 (2024-01-24)
+### Enhancements
+-   `ColorPicker`: improve the UX around HSL sliders ([#57555](https://github.com/WordPress/gutenberg/pull/57555)).
+-   `BoxControl`, `BorderControl`, `BorderBoxControl`: Add opt-in prop for 40px default size ([#56185](https://github.com/WordPress/gutenberg/pull/56185)).
+-   `PaletteEdit`: improve unit tests ([#57645](https://github.com/WordPress/gutenberg/pull/57645)).
+-   `PaletteEdit` and `CircularOptionPicker`: improve unit tests ([#57809](https://github.com/WordPress/gutenberg/pull/57809)).
+-   `Tooltip`: no-op when nested inside other `Tooltip` components ([#57202](https://github.com/WordPress/gutenberg/pull/57202)).
+-   `Tooltip` and `Button`: tidy up unit tests ([#57975](https://github.com/WordPress/gutenberg/pull/57975)).
+-   `BorderControl`, `BorderBoxControl`: Replace style picker with ToggleGroupControl ([#57562](https://github.com/WordPress/gutenberg/pull/57562)).
+-	`SlotFill`: fix typo in use-slot-fills return docs ([#57654](https://github.com/WordPress/gutenberg/pull/57654))
+### Bug Fix
+-   `ToggleGroupControl`: Improve controlled value detection ([#57770](https://github.com/WordPress/gutenberg/pull/57770)).
+-   `Tooltip`: Improve props forwarding to children of nested `Tooltip` components ([#57878](https://github.com/WordPress/gutenberg/pull/57878)).
+-   `Tooltip`: revert prop types to only accept component-specific props ([#58125](https://github.com/WordPress/gutenberg/pull/58125)).
+-   `Button`: prevent the component from trashing and re-creating the HTML element ([#56490](https://github.com/WordPress/gutenberg/pull/56490)).
+### Experimental
+-   `BoxControl`: Update design ([#56665](https://github.com/WordPress/gutenberg/pull/56665)).
+-   `CustomSelect`: adjust `renderSelectedValue` to fix sizing ([#57865](https://github.com/WordPress/gutenberg/pull/57865)).
+-   `Theme`: Set `color` on wrapper div ([#58095](https://github.com/WordPress/gutenberg/pull/58095)).
 ## 25.15.0 (2024-01-10)
 ### Bug Fix

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlLinkedButton","_interopRequireDefault","_borderBoxControlSplitControls","_borderControl","_baseControlStyles","_view","_visuallyHidden","_context","_hook","BorderLabel","props","label","hideLabelFromVision","_react","createElement","VisuallyHidden","as","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","View","ref","BorderControl","onChange","placeholder","__","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","default","onClick","BorderBoxControl","contextConnect","exports","_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\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={ true }\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 The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n \n When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n \n ```jsx\n * import { __experimentalBorderBoxControl as 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\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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"}
1	+ {"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlLinkedButton","_interopRequireDefault","_borderBoxControlSplitControls","_borderControl","_baseControlStyles","_view","_visuallyHidden","_context","_hook","BorderLabel","props","label","hideLabelFromVision","_react","createElement","VisuallyHidden","as","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","View","ref","BorderControl","onChange","placeholder","__","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","default","onClick","BorderBoxControl","contextConnect","exports","_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={ true }\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 The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n \n When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n \n ```jsx\n * import { __experimentalBorderBoxControl as 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\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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"}

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

@@ -29,8 +29,10 @@ function useBorderBoxControl(props) {
     size = 'default',
     value,
     __experimentalIsRenderedInSidebar = false,
+    __next40pxDefaultSize,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'BorderBoxControl');
+  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
   const mixedBorders = (0, _utils.hasMixedBorders)(value);
   const splitBorders = (0, _utils.hasSplitBorders)(value);
   const linkedValue = splitBorders ? (0, _utils.getCommonBorder)(value) : value;
@@ -114,7 +116,7 @@ function useBorderBoxControl(props) {
     onSplitChange,
     toggleLinked,
     linkedValue,
-    size,
+    size: computedSize,
     splitValue,
     wrapperClassName,
     __experimentalIsRenderedInSidebar

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","styles","_interopRequireWildcard","_utils","_context","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","__experimentalIsRenderedInSidebar","otherProps","useContextSystem","mixedBorders","hasMixedBorders","splitBorders","hasSplitBorders","linkedValue","getCommonBorder","splitValue","getSplitBorders","hasWidthValue","isNaN","parseFloat","width","isLinked","setIsLinked","useState","toggleLinked","onLinkedChange","newBorder","undefined","isCompleteBorder","isEmptyBorder","changes","getBorderDiff","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","useCx","classes","useMemo","borderBoxControl","linkedControlClassName","linkedBorderControl","wrapperClassName","wrapper","disableUnits"],"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMemo, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tonChange,\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControl' );\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders \| undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border \| undefined );\n\n\t// If no numeric width value is set, the unit select will be disabled.\n\tconst hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders \|\| isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border \| undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.linkedBorderControl() );\n\t}, [ cx ] );\n\n\tconst wrapperClassName = useMemo( () => {\n\t\treturn cx( styles.wrapper );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tdisableUnits: mixedBorders && ! hasWidthValue,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsize,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAUA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAAiD,SAAAM,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAL,wBAAAS,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AApBjD;AACA;AACA;;AAGA;AACA;AACA;;AAkBO,SAASW,mBAAmBA,CAClCC,KAA8D,EAC7D;EACD,MAAM;IACLC,SAAS;IACTC,MAAM,GAAG,EAAE;IACXC,QAAQ;IACRC,WAAW,GAAG,KAAK;IACnBC,WAAW,GAAG,IAAI;IAClBC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,iCAAiC,GAAG,KAAK;~~IACzC~~,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,~~EAAEV~~,KAAK,EAAE,kBAAmB,CAAC;EAEjD,~~MAAMW~~,YAAY,GAAG,IAAAC,sBAAe,~~EAAEL~~,KAAM,CAAC;EAC7C,~~MAAMM~~,YAAY,GAAG,IAAAC,sBAAe,~~EAAEP~~,KAAM,CAAC;EAE7C,~~MAAMQ~~,WAAW,GAAGF,YAAY,GAC7B,IAAAG,sBAAe,~~EAAET~~,KAA6B,CAAC,GAC7CA,KAAiB;EAEtB,~~MAAMU~~,UAAU,GAAGJ,YAAY,~~GAC1BN~~,KAAK,GACP,~~IAAAW~~,sBAAe,~~EAAEX~~,KAA4B,CAAC;;EAEjD;EACA,~~MAAMY~~,aAAa,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAG,GAAGN,WAAW,EAAEO,KAAO,EAAE,CAAE,CAAC;EAExE,MAAM,CAAEC,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,CAAEd,YAAa,CAAC;EAC5D,MAAMe,YAAY,GAAGA,CAAA,KAAMF,WAAW,CAAE,CAAED,QAAS,CAAC;EAEpD,MAAMI,cAAc,GAAKC,SAAkB,IAAM;IAChD,IAAK,CAAEA,SAAS,EAAG;MAClB,~~OAAOzB~~,QAAQ,~~CAAE0B~~,SAAU,CAAC;IAC7B;;IAEA;IACA,IAAK,CAAElB,YAAY,IAAI,IAAAmB,uBAAgB,EAAEF,SAAU,CAAC,EAAG;MACtD,~~OAAOzB~~,QAAQ,CACd,~~IAAA4B~~,oBAAa,EAAEH,SAAU,CAAC,GAAGC,SAAS,GAAGD,SAC1C,CAAC;IACF;;IAEA;IACA;IACA;IACA;IACA,MAAMI,OAAO,GAAG,IAAAC,oBAAa,EAC5BlB,WAAW,EACXa,SACD,CAAC;IACD,MAAMM,cAAc,GAAG;MACtBC,GAAG,EAAE;QAAE,~~GAAK5B~~,KAAK,~~EAAe4B~~,GAAG;QAAE,GAAGH;MAAQ,CAAC;MACjDI,KAAK,EAAE;QAAE,~~GAAK7B~~,KAAK,~~EAAe6B~~,KAAK;QAAE,GAAGJ;MAAQ,CAAC;MACrDK,MAAM,EAAE;QAAE,~~GAAK9B~~,KAAK,~~EAAe8B~~,MAAM;QAAE,GAAGL;MAAQ,CAAC;MACvDM,IAAI,EAAE;QAAE,~~GAAK/B~~,KAAK,~~EAAe+B~~,IAAI;QAAE,GAAGN;MAAQ;IACnD,CAAC;IAED,IAAK,IAAApB,sBAAe,EAAEsB,cAAe,CAAC,EAAG;MACxC,~~OAAO/B~~,QAAQ,~~CAAE+B~~,cAAe,CAAC;IAClC;IAEA,MAAMK,cAAc,GAAG,IAAAR,oBAAa,EAAEG,cAAc,CAACC,GAAI,CAAC,GACvDN,SAAS,GACTK,cAAc,CAACC,GAAG;~~IAErBhC~~,QAAQ,~~CAAEoC~~,cAAe,CAAC;EAC3B,CAAC;EAED,MAAMC,aAAa,GAAGA,CACrBZ,SAA6B,EAC7Ba,IAAgB,KACZ;IACJ,MAAMP,cAAc,GAAG;MAAE,GAAGjB,UAAU;MAAE,CAAEwB,IAAI,GAAIb;IAAU,CAAC;IAE7D,IAAK,IAAAhB,sBAAe,EAAEsB,cAAe,CAAC,EAAG;~~MACxC/B~~,QAAQ,~~CAAE+B~~,cAAe,CAAC;IAC3B,CAAC,MAAM;~~MACN/B~~,QAAQ,~~CAAEyB~~,SAAU,CAAC;IACtB;EACD,CAAC;EAED,MAAMc,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,OAAOH,EAAE,~~CAAEtE~~,MAAM,~~CAAC0E~~,gBAAgB,~~EAAE7C~~,SAAU,CAAC;EAChD,CAAC,EAAE,~~CAAEyC~~,EAAE,~~EAAEzC~~,SAAS,CAAG,CAAC;EAEtB,~~MAAM8C~~,sBAAsB,GAAG,IAAAF,gBAAO,EAAE,MAAM;IAC7C,OAAOH,EAAE,~~CAAEtE~~,MAAM,~~CAAC4E~~,mBAAmB,CAAC,CAAE,CAAC;EAC1C,CAAC,EAAE,CAAEN,EAAE,CAAG,CAAC;EAEX,MAAMO,gBAAgB,GAAG,IAAAJ,gBAAO,EAAE,MAAM;IACvC,OAAOH,EAAE,~~CAAEtE~~,MAAM,~~CAAC8E~~,OAAQ,CAAC;EAC5B,CAAC,EAAE,CAAER,EAAE,CAAG,CAAC;EAEX,OAAO;IACN,~~GAAGjC~~,UAAU;~~IACbR~~,SAAS,~~EAAE2C~~,OAAO;~~IAClB1C~~,MAAM;~~IACNiD~~,YAAY,EAAExC,YAAY,IAAI,CAAEQ,aAAa;~~IAC7Cf~~,WAAW;IACXC,WAAW;~~IACXO~~,eAAe,EAAED,YAAY;IAC7BY,QAAQ;IACRwB,sBAAsB;IACtBpB,cAAc;IACda,aAAa;IACbd,YAAY;IACZX,WAAW;~~IACXT~~,IAAI;~~IACJW~~,UAAU;IACVgC,gBAAgB;~~IAChBzC~~;EACD,CAAC;AACF"}
1	+ {"version":3,"names":["_element","require","styles","_interopRequireWildcard","_utils","_context","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","useContextSystem","computedSize","mixedBorders","hasMixedBorders","splitBorders","hasSplitBorders","linkedValue","getCommonBorder","splitValue","getSplitBorders","hasWidthValue","isNaN","parseFloat","width","isLinked","setIsLinked","useState","toggleLinked","onLinkedChange","newBorder","undefined","isCompleteBorder","isEmptyBorder","changes","getBorderDiff","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","useCx","classes","useMemo","borderBoxControl","linkedControlClassName","linkedBorderControl","wrapperClassName","wrapper","disableUnits"],"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMemo, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tonChange,\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControl' );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders \| undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border \| undefined );\n\n\t// If no numeric width value is set, the unit select will be disabled.\n\tconst hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders \|\| isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border \| undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.linkedBorderControl() );\n\t}, [ cx ] );\n\n\tconst wrapperClassName = useMemo( () => {\n\t\treturn cx( styles.wrapper );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tdisableUnits: mixedBorders && ! hasWidthValue,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsize: computedSize,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/border-box-control/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type {\n\tBorder,\n\tColorProps,\n\tLabelProps,\n\tBorderControlProps,\n} from '../border-control/types';\nimport type { PopoverProps } from '../popover/types';\n\nexport type Borders = {\n\ttop?: Border;\n\tright?: Border;\n\tbottom?: Border;\n\tleft?: Border;\n};\n\nexport type AnyBorder = Border \| Borders \| undefined;\nexport type BorderProp = keyof Border;\nexport type BorderSide = keyof Borders;\n\nexport type BorderBoxControlProps = ColorProps &\n\tLabelProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback function invoked when any border value is changed. The value\n\t\t * received may be a \"flat\" border object, one that has properties defining\n\t\t * individual side borders, or `undefined`.\n\t\t /\n\t\tonChange: ( value: AnyBorder ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration.\n\t\t \n\t\t This may be a \"flat\" border where the object has `color`, `style`, and\n\t\t * `width` properties or a \"split\" border which defines the previous\n\t\t * properties but for each side; `top`, `right`, `bottom`, and `left`.\n\t\t /\n\t\tvalue: AnyBorder;\n\t};\n\nexport type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t This prop allows the `LinkedButton` to reflect whether the parent\n\t * `BorderBoxControl` is currently displaying \"linked\" or \"unlinked\"\n\t * border controls.\n\t /\n\tisLinked: boolean;\n\t/\n\t A callback invoked when this `LinkedButton` is clicked. It is used to\n\t * toggle display between linked or split border controls within the parent\n\t * `BorderBoxControl`.\n\t /\n\tonClick: () => void;\n};\n\nexport type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t An object representing the current border configuration. It contains\n\t * properties for each side, with each side an object reflecting the border\n\t * color, style, and width.\n\t /\n\tvalue?: Borders;\n};\n\nexport type SplitControlsProps = ColorProps &\n\tPick< BorderBoxControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback that is invoked whenever an individual side's border has\n\t\t * changed.\n\t\t /\n\t\tonChange: ( value: Border \| undefined, side: BorderSide ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration. It contains\n\t\t * properties for each side, with each side an object reflecting the border\n\t\t * color, style, and width.\n\t\t */\n\t\tvalue?: Borders;\n\t};\n"],"mappings":""}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/border-box-control/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type {\n\tBorder,\n\tColorProps,\n\tLabelProps,\n\tBorderControlProps,\n} from '../border-control/types';\nimport type { PopoverProps } from '../popover/types';\n\nexport type Borders = {\n\ttop?: Border;\n\tright?: Border;\n\tbottom?: Border;\n\tleft?: Border;\n};\n\nexport type AnyBorder = Border \| Borders \| undefined;\nexport type BorderProp = keyof Border;\nexport type BorderSide = keyof Borders;\n\nexport type BorderBoxControlProps = ColorProps &\n\tLabelProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback function invoked when any border value is changed. The value\n\t\t * received may be a \"flat\" border object, one that has properties defining\n\t\t * individual side borders, or `undefined`.\n\t\t /\n\t\tonChange: ( value: AnyBorder ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration.\n\t\t \n\t\t This may be a \"flat\" border where the object has `color`, `style`, and\n\t\t * `width` properties or a \"split\" border which defines the previous\n\t\t * properties but for each side; `top`, `right`, `bottom`, and `left`.\n\t\t /\n\t\tvalue: AnyBorder;\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 LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t This prop allows the `LinkedButton` to reflect whether the parent\n\t * `BorderBoxControl` is currently displaying \"linked\" or \"unlinked\"\n\t * border controls.\n\t /\n\tisLinked: boolean;\n\t/\n\t A callback invoked when this `LinkedButton` is clicked. It is used to\n\t * toggle display between linked or split border controls within the parent\n\t * `BorderBoxControl`.\n\t /\n\tonClick: () => void;\n};\n\nexport type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/\n\t An object representing the current border configuration. It contains\n\t * properties for each side, with each side an object reflecting the border\n\t * color, style, and width.\n\t /\n\tvalue?: Borders;\n};\n\nexport type SplitControlsProps = ColorProps &\n\tPick< BorderBoxControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t A callback that is invoked whenever an individual side's border has\n\t\t * changed.\n\t\t /\n\t\tonChange: ( value: Border \| undefined, side: BorderSide ) => void;\n\t\t/\n\t\t The position of the color popovers compared to the control wrapper.\n\t\t /\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/\n\t\t The space between the popover and the control wrapper.\n\t\t /\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/\n\t\t An object representing the current border configuration. It contains\n\t\t * properties for each side, with each side an object reflecting the border\n\t\t * color, style, and width.\n\t\t */\n\t\tvalue?: Borders;\n\t};\n"],"mappings":""}

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

@@ -40,6 +40,7 @@ const BorderLabel = props => {
 };
 const UnconnectedBorderControl = (props, forwardedRef) => {
   const {
+    __next40pxDefaultSize = false,
     colors,
     disableCustomColors,
     disableUnits,
@@ -48,6 +49,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     hideLabelFromVision,
     innerWrapperClassName,
     inputWidth,
+    isStyleSettable,
     label,
     onBorderChange,
     onSliderChange,
@@ -83,6 +85,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
       disableCustomColors: disableCustomColors,
       enableAlpha: enableAlpha,
       enableStyle: enableStyle,
+      isStyleSettable: isStyleSettable,
       onChange: onBorderChange,
       previousStyleSelection: previousStyleSelection,
       showDropdownHeader: showDropdownHeader,
@@ -109,7 +112,8 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     onChange: onSliderChange,
     step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
     value: widthValue || undefined,
-    withInputField: false
+    withInputField: false,
+    __next40pxDefaultSize: __next40pxDefaultSize
   })));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_borderControlDropdown","_interopRequireDefault","_unitControl","_rangeControl","_hStack","_baseControlStyles","_view","_visuallyHidden","_context","_hook","BorderLabel","props","label","hideLabelFromVision","_react","createElement","VisuallyHidden","as","StyledLabel","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","useBorderControl","View","ref","HStack","spacing","className","default","prefix","onChange","__","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl","contextConnect","exports","_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';\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\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\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<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\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/>\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 { __experimentalBorderControl as 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\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,aAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,eAAA,GAAAR,OAAA;AAEA,IAAAS,QAAA,GAAAT,OAAA;AACA,IAAAU,KAAA,GAAAV,OAAA;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAcA,MAAMW,WAAW,GAAKC,KAAiB,IAAM;EAC5C,MAAM;IAAEC,KAAK;IAAEC;EAAoB,CAAC,GAAGF,KAAK;EAE5C,IAAK,CAAEC,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,OAAOC,mBAAmB,GACzB,IAAAC,MAAA,CAAAC,aAAA,EAACR,eAAA,CAAAS,cAAc;IAACC,EAAE,EAAC;EAAQ,GAAGL,KAAuB,CAAC,GAEtD,IAAAE,MAAA,CAAAC,aAAA,EAACV,kBAAA,CAAAa,WAAW;IAACD,EAAE,EAAC;EAAQ,GAAGL,KAAoB,CAC/C;AACF,CAAC;AAED,MAAMO,wBAAwB,GAAGA,CAChCR,KAAkE,EAClES,YAAuC,KACnC;EACJ,MAAM;IACLC,MAAM;IACNC,mBAAmB;IACnBC,YAAY;IACZC,WAAW;IACXC,WAAW;~~IACXZ~~,mBAAmB;~~IACnBa~~,qBAAqB;IACrBC,UAAU;~~IACVf~~,KAAK;~~IACLgB~~,cAAc;IACdC,cAAc;IACdC,aAAa;IACbC,WAAW;IACXC,sBAAsB;IACtBC,sBAAsB;IACtBC,kBAAkB;IAClBC,IAAI;IACJC,eAAe;IACfC,KAAK,EAAEC,MAAM;IACbC,SAAS;IACTC,UAAU;IACVC,UAAU;IACVC,iCAAiC;IACjC,GAAGC;EACJ,CAAC,GAAG,IAAAC,sBAAgB,~~EAAEjC~~,KAAM,CAAC;EAE7B,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACT,KAAA,~~CAAAuC~~,IAAI;~~IAAC5B~~,EAAE,EAAC,UAAU;IAAA,~~GAAM0B~~,UAAU;IAAGG,GAAG,~~EAAG1B~~;EAAc,GACzD,IAAAN,MAAA,CAAAC,aAAA,EAACL,WAAW;IACXE,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA;EAAqB,CAC3C,CAAC,EACF,IAAAC,MAAA,CAAAC,aAAA,EAACX,OAAA,~~CAAA2C~~,MAAM;IAACC,OAAO,EAAG,CAAG;IAACC,SAAS,~~EAAGvB~~;EAAuB,GACxD,~~IAAAZ~~,MAAA,CAAAC,aAAA,EAACb,YAAA,~~CAAAgD~~,OAAW;IACXC,MAAM,EACL,~~IAAArC~~,MAAA,CAAAC,aAAA,EAACf,sBAAA,~~CAAAkD~~,OAAqB;MACrBZ,MAAM,EAAGA,MAAQ;~~MACjBjB~~,MAAM,EAAGA,MAAQ;~~MACjBW~~,sBAAsB,EAAGA,sBAAwB;~~MACjDV~~,mBAAmB,EAAGA,mBAAqB;MAC3CE,WAAW,EAAGA,WAAa;MAC3BC,WAAW,EAAGA,WAAa;~~MAC3B2B~~,QAAQ,EAAGxB,cAAgB;MAC3BK,sBAAsB,EAAGA,sBAAwB;MACjDC,kBAAkB,EAAGA,kBAAoB;MACzCQ,iCAAiC,EAChCA,iCACA;MACDP,IAAI,EAAGA;IAAM,CACb,CACD;~~IACDvB~~,KAAK,EAAG,~~IAAAyC~~,QAAE,EAAE,cAAe,CAAG;~~IAC9BxC~~,mBAAmB;~~IACnByC~~,GAAG,EAAG,CAAG;IACTF,QAAQ,EAAGtB,aAAe;IAC1BO,KAAK,EAAGC,MAAM,EAAEiB,KAAK,IAAI,EAAI;IAC7BxB,WAAW,EAAGA,WAAa;~~IAC3BR~~,YAAY,EAAGA,YAAc;~~IAC7BiC~~,oBAAoB,~~EAAG7B~~,UAAY;~~IACnCQ~~,IAAI,EAAGA;EAAM,CACb,CAAC,EACAM,UAAU,IACX,~~IAAA3B~~,MAAA,CAAAC,aAAA,EAACZ,aAAA,~~CAAA+C~~,OAAY;IACZO,uBAAuB;~~IACvB7C~~,KAAK,EAAG,~~IAAAyC~~,QAAE,EAAE,cAAe,CAAG;~~IAC9BxC~~,mBAAmB;~~IACnBoC~~,SAAS,EAAGb,eAAiB;IAC7BsB,eAAe,EAAG,CAAG;IACrBC,GAAG,EAAG,GAAK;IACXL,GAAG,EAAG,CAAG;IACTF,QAAQ,EAAGvB,cAAgB;IAC3B+B,IAAI,EAAG,CAAE,IAAI,EAAE,GAAG,CAAE,CAACC,QAAQ,CAAEtB,SAAU,CAAC,GAAG,CAAC,GAAG,GAAK;IACtDF,KAAK,EAAGG,UAAU,IAAIsB,SAAW;IACjCC,cAAc,EAAG;~~EAAO~~,~~CACxB~~,CAEK,CACH,CAAC;AAET,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,~~MAAMC~~,aAAa,GAAG,IAAAC,uBAAc,~~EAC1C9C~~,wBAAwB,EACxB,eACD,CAAC;~~AAAC+C~~,OAAA,CAAAF,aAAA,GAAAA,aAAA;AAAA,IAAAG,QAAA,GAEaH,aAAa;AAAAE,OAAA,CAAAhB,OAAA,GAAAiB,QAAA"}
1	+ {"version":3,"names":["_i18n","require","_borderControlDropdown","_interopRequireDefault","_unitControl","_rangeControl","_hStack","_baseControlStyles","_view","_visuallyHidden","_context","_hook","BorderLabel","props","label","hideLabelFromVision","_react","createElement","VisuallyHidden","as","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","View","ref","HStack","spacing","className","default","prefix","onChange","__","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl","contextConnect","exports","_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';\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<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\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 { __experimentalBorderControl as 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\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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"}

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

@@ -19,15 +19,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Internal dependencies
  */
-const sanitizeBorder = border => {
-  const hasNoWidth = border?.width === undefined || border.width === '';
-  const hasNoColor = border?.color === undefined;
-  // If width and color are undefined, unset any style selection as well.
-  if (hasNoWidth && hasNoColor) {
-    return undefined;
-  }
-  return border;
+// If either width or color are defined, the border is considered valid
+// and a border style can be set as well.
+const isValidBorder = border => {
+  const hasWidth = border?.width !== undefined && border.width !== '';
+  const hasColor = border?.color !== undefined;
+  return hasWidth || hasColor;
 };
 function useBorderControl(props) {
   const {
@@ -42,16 +39,20 @@ function useBorderControl(props) {
     value: border,
     width,
     __experimentalIsRenderedInSidebar = false,
+    __next40pxDefaultSize,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'BorderControl');
+  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
   const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border?.width);
   const widthUnit = originalWidthUnit || 'px';
   const hadPreviousZeroWidth = widthValue === 0;
   const [colorSelection, setColorSelection] = (0, _element.useState)();
   const [styleSelection, setStyleSelection] = (0, _element.useState)();
+  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
   const onBorderChange = (0, _element.useCallback)(newBorder => {
-    if (shouldSanitizeBorder) {
-      return onChange(sanitizeBorder(newBorder));
+    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
+      onChange(undefined);
+      return;
     }
     onChange(newBorder);
   }, [onChange, shouldSanitizeBorder]);
@@ -108,9 +109,9 @@ function useBorderControl(props) {
   }
   const innerWrapperClassName = (0, _element.useMemo)(() => {
     const widthStyle = !!wrapperWidth && styles.wrapperWidth;
-    const heightStyle = styles.wrapperHeight(size);
+    const heightStyle = styles.wrapperHeight(computedSize);
     return cx(styles.innerWrapper(), widthStyle, heightStyle);
-  }, [wrapperWidth, cx, size]);
+  }, [wrapperWidth, cx, computedSize]);
   const sliderClassName = (0, _element.useMemo)(() => {
     return cx(styles.borderSlider());
   }, [cx]);
@@ -122,6 +123,7 @@ function useBorderControl(props) {
     enableStyle,
     innerWrapperClassName,
     inputWidth: wrapperWidth,
+    isStyleSettable,
     onBorderChange,
     onSliderChange,
     onWidthChange,
@@ -130,8 +132,9 @@ function useBorderControl(props) {
     value: border,
     widthUnit,
     widthValue,
-    size,
-    __experimentalIsRenderedInSidebar
+    size: computedSize,
+    __experimentalIsRenderedInSidebar,
+    __next40pxDefaultSize
   };
 }
 //# sourceMappingURL=hook.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","styles","_interopRequireWildcard","_utils","_context","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","otherProps","useContextSystem","widthValue","originalWidthUnit","parseQuantityAndUnitFromRawValue","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","useState","styleSelection","setStyleSelection","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';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined \|\| border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\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...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\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 onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\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( size );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, size ] );\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\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,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAAiD,SAAAM,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAL,wBAAAS,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAZjD;AACA;AACA;;AAGA;AACA;AACA;;AASA,MAAMW,cAAc,GAAKC,MAAe,IAAM;EAC7C,MAAMC,UAAU,GAAGD,MAAM,EAAEE,KAAK,KAAKC,SAAS,IAAIH,MAAM,CAACE,KAAK,KAAK,EAAE;EACrE,MAAME,UAAU,GAAGJ,MAAM,EAAEK,KAAK,KAAKF,SAAS;;EAE9C;EACA,IAAKF,UAAU,IAAIG,UAAU,EAAG;IAC/B,OAAOD,SAAS;EACjB;EAEA,OAAOH,MAAM;AACd,CAAC;AAEM,SAASM,gBAAgBA,CAC/BC,KAA2D,EAC1D;EACD,MAAM;IACLC,SAAS;IACTC,MAAM,GAAG,EAAE;IACXC,SAAS;IACTC,QAAQ;IACRC,WAAW,GAAG,IAAI;IAClBC,WAAW,GAAG,IAAI;IAClBC,oBAAoB,GAAG,IAAI;IAC3BC,IAAI,GAAG,SAAS;IAChBC,KAAK,EAAEhB,MAAM;IACbE,KAAK;IACLe,iCAAiC,GAAG,KAAK;IACzC,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEZ,KAAK,EAAE,eAAgB,CAAC;EAE9C,MAAM,CAAEa,UAAU,EAAEC,iBAAiB,CAAE,GAAG,IAAAC,uCAAgC,EACzEtB,MAAM,EAAEE,KACT,CAAC;EACD,MAAMqB,SAAS,GAAGF,iBAAiB,IAAI,IAAI;EAC3C,MAAMG,oBAAoB,GAAGJ,UAAU,KAAK,CAAC;EAE7C,MAAM,CAAEK,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAC,iBAAQ,EAAW,CAAC;EAClE,MAAM,CAAEC,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAF,iBAAQ,EAAW,CAAC;EAElE,MAAMG,cAAc,GAAG,IAAAC,oBAAW,EAC/BC,SAAkB,IAAM;IACzB,IAAKlB,oBAAoB,EAAG;MAC3B,OAAOH,QAAQ,CAAEZ,cAAc,CAAEiC,SAAU,CAAE,CAAC;IAC/C;IAEArB,QAAQ,CAAEqB,SAAU,CAAC;EACtB,CAAC,EACD,CAAErB,QAAQ,EAAEG,oBAAoB,CACjC,CAAC;EAED,MAAMmB,aAAa,GAAG,IAAAF,oBAAW,EAC9BG,QAAiB,IAAM;IACxB,MAAMC,aAAa,GAAGD,QAAQ,KAAK,EAAE,GAAG/B,SAAS,GAAG+B,QAAQ;IAC5D,MAAM,CAAEE,WAAW,CAAE,GACpB,IAAAd,uCAAgC,EAAEY,QAAS,CAAC;IAC7C,MAAMG,YAAY,GAAGD,WAAW,KAAK,CAAC;IACtC,MAAME,aAAa,GAAG;MAAE,GAAGtC,MAAM;MAAEE,KAAK,EAAEiC;IAAc,CAAC;;IAEzD;IACA;IACA,IAAKE,YAAY,IAAI,CAAEb,oBAAoB,EAAG;MAC7C;MACA;MACA;MACAE,iBAAiB,CAAE1B,MAAM,EAAEK,KAAM,CAAC;MAClCwB,iBAAiB,CAAE7B,MAAM,EAAEuC,KAAM,CAAC;;MAElC;MACAD,aAAa,CAACjC,KAAK,GAAGF,SAAS;MAC/BmC,aAAa,CAACC,KAAK,GAAG,MAAM;IAC7B;;IAEA;IACA,IAAK,CAAEF,YAAY,IAAIb,oBAAoB,EAAG;MAC7C;MACA;MACA,IAAKc,aAAa,CAACjC,KAAK,KAAKF,SAAS,EAAG;QACxCmC,aAAa,CAACjC,KAAK,GAAGoB,cAAc;MACrC;MACA,IAAKa,aAAa,CAACC,KAAK,KAAK,MAAM,EAAG;QACrCD,aAAa,CAACC,KAAK,GAAGX,cAAc;MACrC;IACD;IAEAE,cAAc,CAAEQ,aAAc,CAAC;EAChC,CAAC,EACD,CACCtC,MAAM,EACNwB,oBAAoB,EACpBC,cAAc,EACdG,cAAc,EACdE,cAAc,CAEhB,CAAC;EAED,MAAMU,cAAc,GAAG,IAAAT,oBAAW,EAC/Bf,KAAc,IAAM;IACrBiB,aAAa,CAAG,GAAGjB,KAAO,GAAGO,SAAW,EAAE,CAAC;EAC5C,CAAC,EACD,CAAEU,aAAa,EAAEV,SAAS,CAC3B,CAAC;;EAED;EACA,MAAMkB,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,OAAOH,EAAE,CAAErE,MAAM,CAACyE,aAAa,EAAErC,SAAU,CAAC;EAC7C,CAAC,EAAE,CAAEA,SAAS,EAAEiC,EAAE,CAAG,CAAC;EAEtB,IAAIK,YAAY,GAAG5C,KAAK;EACxB,IAAKQ,SAAS,EAAG;IAChB;IACA;IACAoC,YAAY,GAAG/B,IAAI,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM;EAC9D;EACA,MAAMgC,qBAAqB,GAAG,IAAAH,gBAAO,EAAE,MAAM;IAC5C,MAAMI,UAAU,GAAG,CAAC,CAAEF,YAAY,IAAI1E,MAAM,CAAC0E,YAAY;IACzD,MAAMG,WAAW,GAAG7E,MAAM,CAAC8E,aAAa,CAAEnC,IAAK,CAAC;IAEhD,OAAO0B,EAAE,CAAErE,MAAM,CAAC+E,YAAY,CAAC,CAAC,EAAEH,UAAU,EAAEC,WAAY,CAAC;EAC5D,CAAC,EAAE,CAAEH,YAAY,EAAEL,EAAE,EAAE1B,IAAI,CAAG,CAAC;EAE/B,MAAMqC,eAAe,GAAG,IAAAR,gBAAO,EAAE,MAAM;IACtC,OAAOH,EAAE,CAAErE,MAAM,CAACiF,YAAY,CAAC,CAAE,CAAC;EACnC,CAAC,EAAE,CAAEZ,EAAE,CAAG,CAAC;EAEX,OAAO;IACN,GAAGvB,UAAU;IACbV,SAAS,EAAEmC,OAAO;IAClBlC,MAAM;IACNG,WAAW;IACXC,WAAW;IACXkC,qBAAqB;IACrBO,UAAU,EAAER,YAAY;IACxBhB,cAAc;IACdU,cAAc;IACdP,aAAa;IACbsB,sBAAsB,EAAE3B,cAAc;IACtCwB,eAAe;IACfpC,KAAK,EAAEhB,MAAM;IACbuB,SAAS;IACTH,UAAU;IACVL,IAAI;IACJE;EACD,CAAC;AACF"}
1	+ {"version":3,"names":["_element","require","styles","_interopRequireWildcard","_utils","_context","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","isValidBorder","border","hasWidth","width","undefined","hasColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","useContextSystem","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';\n\nimport type { Border, BorderControlProps } from '../types';\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\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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"}

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

@@ -98,6 +98,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     enableStyle,
     indicatorClassName,
     indicatorWrapperClassName,
+    isStyleSettable,
     onReset,
     onColorChange,
     onStyleChange,
@@ -154,7 +155,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     clearable: false,
     enableAlpha: enableAlpha
-  }), enableStyle && (0, _react.createElement)(_borderControlStylePicker.default, {
+  }), enableStyle && isStyleSettable && (0, _react.createElement)(_borderControlStylePicker.default, {
     label: (0, _i18n.__)('Style'),
     value: style,
     onChange: onStyleChange

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_icons","_borderControlStylePicker","_interopRequireDefault","_button","_colorIndicator","_colorPalette","_dropdown","_hStack","_vStack","_context","_hook","_baseControlStyles","_dropdownContentWrapper","_utils","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","isMultiplePaletteArray","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","sprintf","name","__","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","size","__unstablePopoverProps","otherProps","useBorderControlDropdown","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","_react","createElement","default","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","className","renderContent","onClose","Fragment","paddingSize","VStack","spacing","HStack","StyledLabel","icon","closeSmall","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\$(.+)\$$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] \| undefined\n) => {\n\tif ( ! colorValue \|\| ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject \| undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border \|\| {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color \|\| ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' ? true : false }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"],"mappings":"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"}
1	+ {"version":3,"names":["_i18n","require","_icons","_borderControlStylePicker","_interopRequireDefault","_button","_colorIndicator","_colorPalette","_dropdown","_hStack","_vStack","_context","_hook","_baseControlStyles","_dropdownContentWrapper","_utils","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","isMultiplePaletteArray","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","sprintf","name","__","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","size","__unstablePopoverProps","otherProps","useBorderControlDropdown","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","_react","createElement","default","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","className","renderContent","onClose","Fragment","paddingSize","VStack","spacing","HStack","StyledLabel","icon","closeSmall","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\$(.+)\$$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] \| undefined\n) => {\n\tif ( ! colorValue \|\| ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject \| undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tisStyleSettable,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border \|\| {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color \|\| ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' ? true : false }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && isStyleSettable && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 "use strict";
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,13 +7,8 @@ exports.default = void 0;
 var _react = require("react");
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
-var _button = _interopRequireDefault(require("../../button"));
-var _baseControlStyles = require("../../base-control/styles/base-control-styles");
-var _view = require("../../view");
-var _flex = require("../../flex");
-var _visuallyHidden = require("../../visually-hidden");
 var _context = require("../../context");
-var _hook = require("./hook");
+var _toggleGroupControl = require("../../toggle-group-control");
 /**
  * WordPress dependencies
  */
@@ -36,49 +30,27 @@ const BORDER_STYLES = [{
   icon: _icons.lineDotted,
   value: 'dotted'
 }];
-const Label = props => {
-  const {
-    label,
-    hideLabelFromVision
-  } = props;
-  if (!label) {
-    return null;
-  }
-  return hideLabelFromVision ? (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
-    as: "label"
-  }, label) : (0, _react.createElement)(_baseControlStyles.StyledLabel, null, label);
-};
-const BorderControlStylePicker = (props, forwardedRef) => {
-  const {
-    buttonClassName,
-    hideLabelFromVision,
-    label,
-    onChange,
-    value,
-    ...otherProps
-  } = (0, _hook.useBorderControlStylePicker)(props);
-  return (0, _react.createElement)(_view.View, {
-    ...otherProps,
-    ref: forwardedRef
-  }, (0, _react.createElement)(Label, {
-    label: label,
-    hideLabelFromVision: hideLabelFromVision
-  }), (0, _react.createElement)(_flex.Flex, {
-    justify: "flex-start",
-    gap: 1
-  }, BORDER_STYLES.map(borderStyle => (0, _react.createElement)(_button.default, {
+function UnconnectedBorderControlStylePicker({
+  onChange,
+  ...restProps
+}, forwardedRef) {
+  return (0, _react.createElement)(_toggleGroupControl.ToggleGroupControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    ref: forwardedRef,
+    isDeselectable: true,
+    onChange: value => {
+      onChange?.(value);
+    },
+    ...restProps
+  }, BORDER_STYLES.map(borderStyle => (0, _react.createElement)(_toggleGroupControl.ToggleGroupControlOptionIcon, {
     key: borderStyle.value,
-    className: buttonClassName,
+    value: borderStyle.value,
     icon: borderStyle.icon,
-    size: "small",
-    isPressed: borderStyle.value === value,
-    onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
-    "aria-label": borderStyle.label,
-    label: borderStyle.label,
-    showTooltip: true
-  }))));
-};
-const ConnectedBorderControlStylePicker = (0, _context.contextConnect)(BorderControlStylePicker, 'BorderControlStylePicker');
-var _default = ConnectedBorderControlStylePicker;
+    label: borderStyle.label
+  })));
+}
+const BorderControlStylePicker = (0, _context.contextConnect)(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');
+var _default = BorderControlStylePicker;
 exports.default = _default;
 //# sourceMappingURL=component.js.map