@wordpress/components 25.0.0 → 25.1.1

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

@@ -39,12 +39,12 @@ function useBorderControlDropdown(props) {
     __experimentalIsRenderedInSidebar = false,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'BorderControlDropdown');
-  const [widthValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(border === null || border === void 0 ? void 0 : border.width);
+  const [widthValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(border?.width);
   const hasZeroWidth = widthValue === 0;
 
   const onColorChange = color => {
-    const style = (border === null || border === void 0 ? void 0 : border.style) === 'none' ? previousStyleSelection : border === null || border === void 0 ? void 0 : border.style;
-    const width = hasZeroWidth && !!color ? '1px' : border === null || border === void 0 ? void 0 : border.width;
+    const style = border?.style === 'none' ? previousStyleSelection : border?.style;
+    const width = hasZeroWidth && !!color ? '1px' : border?.width;
     onChange({
       color,
       style,
@@ -53,7 +53,7 @@ function useBorderControlDropdown(props) {
   };
 
   const onStyleChange = style => {
-    const width = hasZeroWidth && !!style ? '1px' : border === null || border === void 0 ? void 0 : border.width;
+    const width = hasZeroWidth && !!style ? '1px' : border?.width;
     onChange({ ...border,
       style,
       width

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useBorderControlDropdown","props","border","className","colors","enableAlpha","enableStyle","onChange","previousStyleSelection","size","__experimentalIsRenderedInSidebar","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","styles","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown( size ), className );\n\t}, [ className, cx, size ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx( styles.colorIndicatorWrapper( border, size ) );\n\t}, [ border, cx, size ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useBorderControlDropdown","props","border","className","colors","enableAlpha","enableStyle","onChange","previousStyleSelection","size","__experimentalIsRenderedInSidebar","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","styles","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown( size ), className );\n\t}, [ className, cx, size ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx( styles.colorIndicatorWrapper( border, size ) );\n\t}, [ border, cx, size ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}

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

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _icons = require("@wordpress/icons");
 
 var _i18n = require("@wordpress/i18n");
@@ -74,9 +72,9 @@ const BorderControlStylePicker = (props, forwardedRef) => {
     value,
     ...otherProps
   } = (0, _hook.useBorderControlStylePicker)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, otherProps, {
+  return (0, _element.createElement)(_view.View, { ...otherProps,
     ref: forwardedRef
-  }), (0, _element.createElement)(Label, {
+  }, (0, _element.createElement)(Label, {
     label: label,
     hideLabelFromVision: hideLabelFromVision
   }), (0, _element.createElement)(_flex.Flex, {

package/build/border-control/border-control-style-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"names":["BORDER_STYLES","label","icon","lineSolid","value","lineDashed","lineDotted","Label","props","hideLabelFromVision","BorderControlStylePicker","forwardedRef","buttonClassName","onChange","otherProps","map","borderStyle","undefined","ConnectedBorderControlStylePicker"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAfA;AACA;AACA;;AAIA;AACA;AACA;AAWA,MAAMA,aAAa,GAAG,CACrB;AAAEC,EAAAA,KAAK,EAAE,cAAI,OAAJ,CAAT;AAAwBC,EAAAA,IAAI,EAAEC,gBAA9B;AAAyCC,EAAAA,KAAK,EAAE;AAAhD,CADqB,EAErB;AAAEH,EAAAA,KAAK,EAAE,cAAI,QAAJ,CAAT;AAAyBC,EAAAA,IAAI,EAAEG,iBAA/B;AAA2CD,EAAAA,KAAK,EAAE;AAAlD,CAFqB,EAGrB;AAAEH,EAAAA,KAAK,EAAE,cAAI,QAAJ,CAAT;AAAyBC,EAAAA,IAAI,EAAEI,iBAA/B;AAA2CF,EAAAA,KAAK,EAAE;AAAlD,CAHqB,CAAtB;;AAMA,MAAMG,KAAK,GAAKC,KAAF,IAAyB;AACtC,QAAM;AAAEP,IAAAA,KAAF;AAASQ,IAAAA;AAAT,MAAiCD,KAAvC;;AAEA,MAAK,CAAEP,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,SAAOQ,mBAAmB,GACzB,4BAAC,8BAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BR,KAA7B,CADyB,GAGzB,4BAAC,8BAAD,QAAeA,KAAf,CAHD;AAKA,CAZD;;AAcA,MAAMS,wBAAwB,GAAG,CAChCF,KADgC,EAEhCG,YAFgC,KAG5B;AACJ,QAAM;AACLC,IAAAA,eADK;AAELH,IAAAA,mBAFK;AAGLR,IAAAA,KAHK;AAILY,IAAAA,QAJK;AAKLT,IAAAA,KALK;AAML,OAAGU;AANE,MAOF,uCAA6BN,KAA7B,CAPJ;AASA,SACC,4BAAC,UAAD,6BAAWM,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACC,4BAAC,KAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,mBAAmB,EAAGQ;AAFvB,IADD,EAKC,4BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,GAAG,EAAG;AAAjC,KACGT,aAAa,CAACe,GAAd,CAAqBC,WAAF,IACpB,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGA,WAAW,CAACZ,KADnB;AAEC,IAAA,SAAS,EAAGQ,eAFb;AAGC,IAAA,IAAI,EAAGI,WAAW,CAACd,IAHpB;AAIC,IAAA,OAAO,MAJR;AAKC,IAAA,SAAS,EAAGc,WAAW,CAACZ,KAAZ,KAAsBA,KALnC;AAMC,IAAA,OAAO,EAAG,MACTS,QAAQ,CACPG,WAAW,CAACZ,KAAZ,KAAsBA,KAAtB,GACGa,SADH,GAEGD,WAAW,CAACZ,KAHR,CAPV;AAaC,kBAAaY,WAAW,CAACf,KAb1B;AAcC,IAAA,KAAK,EAAGe,WAAW,CAACf,KAdrB;AAeC,IAAA,WAAW,EAAG;AAff,IADC,CADH,CALD,CADD;AA6BA,CA1CD;;AA4CA,MAAMiB,iCAAiC,GAAG,6BACzCR,wBADyC,EAEzC,0BAFyC,CAA1C;eAKeQ,iC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { Flex } from '../../flex';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlStylePicker } from './hook';\n\nimport type { LabelProps, StylePickerProps } from '../types';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nconst Label = ( 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 BorderControlStylePicker = (\n\tprops: WordPressComponentProps< StylePickerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tbuttonClassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tonChange,\n\t\tvalue,\n\t\t...otherProps\n\t} = useBorderControlStylePicker( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<Label\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<Flex justify=\"flex-start\" gap={ 1 }>\n\t\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\t\tclassName={ buttonClassName }\n\t\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ borderStyle.value === value }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tborderStyle.value === value\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: borderStyle.value\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ borderStyle.label }\n\t\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Flex>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControlStylePicker = contextConnect(\n\tBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default ConnectedBorderControlStylePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"names":["BORDER_STYLES","label","icon","lineSolid","value","lineDashed","lineDotted","Label","props","hideLabelFromVision","BorderControlStylePicker","forwardedRef","buttonClassName","onChange","otherProps","map","borderStyle","undefined","ConnectedBorderControlStylePicker"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAfA;AACA;AACA;;AAIA;AACA;AACA;AAWA,MAAMA,aAAa,GAAG,CACrB;AAAEC,EAAAA,KAAK,EAAE,cAAI,OAAJ,CAAT;AAAwBC,EAAAA,IAAI,EAAEC,gBAA9B;AAAyCC,EAAAA,KAAK,EAAE;AAAhD,CADqB,EAErB;AAAEH,EAAAA,KAAK,EAAE,cAAI,QAAJ,CAAT;AAAyBC,EAAAA,IAAI,EAAEG,iBAA/B;AAA2CD,EAAAA,KAAK,EAAE;AAAlD,CAFqB,EAGrB;AAAEH,EAAAA,KAAK,EAAE,cAAI,QAAJ,CAAT;AAAyBC,EAAAA,IAAI,EAAEI,iBAA/B;AAA2CF,EAAAA,KAAK,EAAE;AAAlD,CAHqB,CAAtB;;AAMA,MAAMG,KAAK,GAAKC,KAAF,IAAyB;AACtC,QAAM;AAAEP,IAAAA,KAAF;AAASQ,IAAAA;AAAT,MAAiCD,KAAvC;;AAEA,MAAK,CAAEP,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,SAAOQ,mBAAmB,GACzB,4BAAC,8BAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BR,KAA7B,CADyB,GAGzB,4BAAC,8BAAD,QAAeA,KAAf,CAHD;AAKA,CAZD;;AAcA,MAAMS,wBAAwB,GAAG,CAChCF,KADgC,EAEhCG,YAFgC,KAG5B;AACJ,QAAM;AACLC,IAAAA,eADK;AAELH,IAAAA,mBAFK;AAGLR,IAAAA,KAHK;AAILY,IAAAA,QAJK;AAKLT,IAAAA,KALK;AAML,OAAGU;AANE,MAOF,uCAA6BN,KAA7B,CAPJ;AASA,SACC,4BAAC,UAAD,OAAWM,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,KACC,4BAAC,KAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,mBAAmB,EAAGQ;AAFvB,IADD,EAKC,4BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,GAAG,EAAG;AAAjC,KACGT,aAAa,CAACe,GAAd,CAAqBC,WAAF,IACpB,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGA,WAAW,CAACZ,KADnB;AAEC,IAAA,SAAS,EAAGQ,eAFb;AAGC,IAAA,IAAI,EAAGI,WAAW,CAACd,IAHpB;AAIC,IAAA,OAAO,MAJR;AAKC,IAAA,SAAS,EAAGc,WAAW,CAACZ,KAAZ,KAAsBA,KALnC;AAMC,IAAA,OAAO,EAAG,MACTS,QAAQ,CACPG,WAAW,CAACZ,KAAZ,KAAsBA,KAAtB,GACGa,SADH,GAEGD,WAAW,CAACZ,KAHR,CAPV;AAaC,kBAAaY,WAAW,CAACf,KAb1B;AAcC,IAAA,KAAK,EAAGe,WAAW,CAACf,KAdrB;AAeC,IAAA,WAAW,EAAG;AAff,IADC,CADH,CALD,CADD;AA6BA,CA1CD;;AA4CA,MAAMiB,iCAAiC,GAAG,6BACzCR,wBADyC,EAEzC,0BAFyC,CAA1C;eAKeQ,iC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { Flex } from '../../flex';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlStylePicker } from './hook';\n\nimport type { LabelProps, StylePickerProps } from '../types';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nconst Label = ( 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 BorderControlStylePicker = (\n\tprops: WordPressComponentProps< StylePickerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tbuttonClassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tonChange,\n\t\tvalue,\n\t\t...otherProps\n\t} = useBorderControlStylePicker( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<Label\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<Flex justify=\"flex-start\" gap={ 1 }>\n\t\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\t\tclassName={ buttonClassName }\n\t\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ borderStyle.value === value }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tborderStyle.value === value\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: borderStyle.value\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ borderStyle.label }\n\t\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Flex>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControlStylePicker = contextConnect(\n\tBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default ConnectedBorderControlStylePicker;\n"]}

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

@@ -9,8 +9,6 @@ exports.default = AllInputControl;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _unitControl = _interopRequireDefault(require("./unit-control"));
 
 var _utils = require("./utils");
@@ -20,18 +18,17 @@ var _utils = require("./utils");
  */
 const noop = () => {};
 
-function AllInputControl(_ref) {
-  let {
-    onChange = noop,
-    onFocus = noop,
-    onHoverOn = noop,
-    onHoverOff = noop,
-    values,
-    sides,
-    selectedUnits,
-    setSelectedUnits,
-    ...props
-  } = _ref;
+function AllInputControl({
+  onChange = noop,
+  onFocus = noop,
+  onHoverOn = noop,
+  onHoverOff = noop,
+  values,
+  sides,
+  selectedUnits,
+  setSelectedUnits,
+  ...props
+}) {
   const allValue = (0, _utils.getAllValue)(values, selectedUnits, sides);
   const hasValues = (0, _utils.isValuesDefined)(values);
   const isMixed = hasValues && (0, _utils.isValuesMixed)(values, selectedUnits, sides);
@@ -75,7 +72,7 @@ function AllInputControl(_ref) {
     });
   };
 
-  return (0, _element.createElement)(_unitControl.default, (0, _extends2.default)({}, props, {
+  return (0, _element.createElement)(_unitControl.default, { ...props,
     disableUnits: isMixed,
     isOnly: true,
     value: allValue,
@@ -85,6 +82,6 @@ function AllInputControl(_ref) {
     onHoverOn: handleOnHoverOn,
     onHoverOff: handleOnHoverOff,
     placeholder: allPlaceholder
-  }));
+  });
 }
 //# sourceMappingURL=all-input-control.js.map

package/build/box-control/all-input-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"names":["noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","LABELS","mixed","undefined","handleOnFocus","event","side","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","handleOnUnitChange","unit","newUnits","handleOnHoverOn","top","bottom","left","right","handleOnHoverOff"],"mappings":";;;;;;;;;;;;;AAKA;;AACA;;AANA;AACA;AACA;AAYA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEe,SAASC,eAAT,OAUkB;AAAA,MAVQ;AACxCC,IAAAA,QAAQ,GAAGF,IAD6B;AAExCG,IAAAA,OAAO,GAAGH,IAF8B;AAGxCI,IAAAA,SAAS,GAAGJ,IAH4B;AAIxCK,IAAAA,UAAU,GAAGL,IAJ2B;AAKxCM,IAAAA,MALwC;AAMxCC,IAAAA,KANwC;AAOxCC,IAAAA,aAPwC;AAQxCC,IAAAA,gBARwC;AASxC,OAAGC;AATqC,GAUR;AAChC,QAAMC,QAAQ,GAAG,wBAAaL,MAAb,EAAqBE,aAArB,EAAoCD,KAApC,CAAjB;AACA,QAAMK,SAAS,GAAG,4BAAiBN,MAAjB,CAAlB;AACA,QAAMO,OAAO,GAAGD,SAAS,IAAI,0BAAeN,MAAf,EAAuBE,aAAvB,EAAsCD,KAAtC,CAA7B;AACA,QAAMO,cAAc,GAAGD,OAAO,GAAGE,cAAOC,KAAV,GAAkBC,SAAhD;;AAEA,QAAMC,aAA0D,GAC/DC,KADkE,IAE9D;AACJhB,IAAAA,OAAO,CAAEgB,KAAF,EAAS;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAAT,CAAP;AACA,GAJD;;AAMA,QAAMC,cAA8C,GAAKC,IAAF,IAAY;AAClE,UAAMC,SAAS,GAAGD,IAAI,KAAKL,SAAT,IAAsB,CAAEO,KAAK,CAAEC,UAAU,CAAEH,IAAF,CAAZ,CAA/C;AACA,UAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAH,GAAUL,SAArC;AACA,UAAMU,UAAU,GAAG,8BAAmBrB,MAAnB,EAA2BoB,SAA3B,EAAsCnB,KAAtC,CAAnB;AAEAL,IAAAA,QAAQ,CAAEyB,UAAF,CAAR;AACA,GAND,CAZgC,CAoBhC;AACA;;;AACA,QAAMC,kBAAsD,GAAKC,IAAF,IAAY;AAC1E,UAAMC,QAAQ,GAAG,8BAAmBtB,aAAnB,EAAkCqB,IAAlC,EAAwCtB,KAAxC,CAAjB;AACAE,IAAAA,gBAAgB,CAAEqB,QAAF,CAAhB;AACA,GAHD;;AAKA,QAAMC,eAAe,GAAG,MAAM;AAC7B3B,IAAAA,SAAS,CAAE;AACV4B,MAAAA,GAAG,EAAE,IADK;AAEVC,MAAAA,MAAM,EAAE,IAFE;AAGVC,MAAAA,IAAI,EAAE,IAHI;AAIVC,MAAAA,KAAK,EAAE;AAJG,KAAF,CAAT;AAMA,GAPD;;AASA,QAAMC,gBAAgB,GAAG,MAAM;AAC9B/B,IAAAA,UAAU,CAAE;AACX2B,MAAAA,GAAG,EAAE,KADM;AAEXC,MAAAA,MAAM,EAAE,KAFG;AAGXC,MAAAA,IAAI,EAAE,KAHK;AAIXC,MAAAA,KAAK,EAAE;AAJI,KAAF,CAAV;AAMA,GAPD;;AASA,SACC,4BAAC,oBAAD,6BACMzB,KADN;AAEC,IAAA,YAAY,EAAGG,OAFhB;AAGC,IAAA,MAAM,MAHP;AAIC,IAAA,KAAK,EAAGF,QAJT;AAKC,IAAA,QAAQ,EAAGU,cALZ;AAMC,IAAA,YAAY,EAAGO,kBANhB;AAOC,IAAA,OAAO,EAAGV,aAPX;AAQC,IAAA,SAAS,EAAGa,eARb;AASC,IAAA,UAAU,EAAGK,gBATd;AAUC,IAAA,WAAW,EAAGtB;AAVf,KADD;AAcA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { BoxControlInputControlProps } from './types';\nimport UnitControl from './unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"names":["noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","LABELS","mixed","undefined","handleOnFocus","event","side","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","handleOnUnitChange","unit","newUnits","handleOnHoverOn","top","bottom","left","right","handleOnHoverOff"],"mappings":";;;;;;;;;;;AAKA;;AACA;;AANA;AACA;AACA;AAYA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,QAAQ,GAAGF,IAD6B;AAExCG,EAAAA,OAAO,GAAGH,IAF8B;AAGxCI,EAAAA,SAAS,GAAGJ,IAH4B;AAIxCK,EAAAA,UAAU,GAAGL,IAJ2B;AAKxCM,EAAAA,MALwC;AAMxCC,EAAAA,KANwC;AAOxCC,EAAAA,aAPwC;AAQxCC,EAAAA,gBARwC;AASxC,KAAGC;AATqC,CAA1B,EAUkB;AAChC,QAAMC,QAAQ,GAAG,wBAAaL,MAAb,EAAqBE,aAArB,EAAoCD,KAApC,CAAjB;AACA,QAAMK,SAAS,GAAG,4BAAiBN,MAAjB,CAAlB;AACA,QAAMO,OAAO,GAAGD,SAAS,IAAI,0BAAeN,MAAf,EAAuBE,aAAvB,EAAsCD,KAAtC,CAA7B;AACA,QAAMO,cAAc,GAAGD,OAAO,GAAGE,cAAOC,KAAV,GAAkBC,SAAhD;;AAEA,QAAMC,aAA0D,GAC/DC,KADkE,IAE9D;AACJhB,IAAAA,OAAO,CAAEgB,KAAF,EAAS;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAAT,CAAP;AACA,GAJD;;AAMA,QAAMC,cAA8C,GAAKC,IAAF,IAAY;AAClE,UAAMC,SAAS,GAAGD,IAAI,KAAKL,SAAT,IAAsB,CAAEO,KAAK,CAAEC,UAAU,CAAEH,IAAF,CAAZ,CAA/C;AACA,UAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAH,GAAUL,SAArC;AACA,UAAMU,UAAU,GAAG,8BAAmBrB,MAAnB,EAA2BoB,SAA3B,EAAsCnB,KAAtC,CAAnB;AAEAL,IAAAA,QAAQ,CAAEyB,UAAF,CAAR;AACA,GAND,CAZgC,CAoBhC;AACA;;;AACA,QAAMC,kBAAsD,GAAKC,IAAF,IAAY;AAC1E,UAAMC,QAAQ,GAAG,8BAAmBtB,aAAnB,EAAkCqB,IAAlC,EAAwCtB,KAAxC,CAAjB;AACAE,IAAAA,gBAAgB,CAAEqB,QAAF,CAAhB;AACA,GAHD;;AAKA,QAAMC,eAAe,GAAG,MAAM;AAC7B3B,IAAAA,SAAS,CAAE;AACV4B,MAAAA,GAAG,EAAE,IADK;AAEVC,MAAAA,MAAM,EAAE,IAFE;AAGVC,MAAAA,IAAI,EAAE,IAHI;AAIVC,MAAAA,KAAK,EAAE;AAJG,KAAF,CAAT;AAMA,GAPD;;AASA,QAAMC,gBAAgB,GAAG,MAAM;AAC9B/B,IAAAA,UAAU,CAAE;AACX2B,MAAAA,GAAG,EAAE,KADM;AAEXC,MAAAA,MAAM,EAAE,KAFG;AAGXC,MAAAA,IAAI,EAAE,KAHK;AAIXC,MAAAA,KAAK,EAAE;AAJI,KAAF,CAAV;AAMA,GAPD;;AASA,SACC,4BAAC,oBAAD,OACMzB,KADN;AAEC,IAAA,YAAY,EAAGG,OAFhB;AAGC,IAAA,MAAM,MAHP;AAIC,IAAA,KAAK,EAAGF,QAJT;AAKC,IAAA,QAAQ,EAAGU,cALZ;AAMC,IAAA,YAAY,EAAGO,kBANhB;AAOC,IAAA,OAAO,EAAGV,aAPX;AAQC,IAAA,SAAS,EAAGa,eARb;AASC,IAAA,UAAU,EAAGK,gBATd;AAUC,IAAA,WAAW,EAAGtB;AAVf,IADD;AAcA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { BoxControlInputControlProps } from './types';\nimport UnitControl from './unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}

package/build/box-control/axial-input-controls.js

@@ -9,8 +9,6 @@ exports.default = AxialInputControls;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _utils = require("../unit-control/utils");
 
 var _unitControl = _interopRequireDefault(require("./unit-control"));
@@ -24,19 +22,17 @@ var _boxControlStyles = require("./styles/box-control-styles");
  */
 const groupedSides = ['vertical', 'horizontal'];
 
-function AxialInputControls(_ref) {
-  let {
-    onChange,
-    onFocus,
-    onHoverOn,
-    onHoverOff,
-    values,
-    selectedUnits,
-    setSelectedUnits,
-    sides,
-    ...props
-  } = _ref;
-
+function AxialInputControls({
+  onChange,
+  onFocus,
+  onHoverOn,
+  onHoverOff,
+  values,
+  selectedUnits,
+  setSelectedUnits,
+  sides,
+  ...props
+}) {
   const createHandleOnFocus = side => event => {
     if (!onFocus) {
       return;
@@ -128,7 +124,7 @@ function AxialInputControls(_ref) {
   }; // Filter sides if custom configuration provided, maintaining default order.
 
 
-  const filteredSides = sides !== null && sides !== void 0 && sides.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
+  const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
   const first = filteredSides[0];
   const last = filteredSides[filteredSides.length - 1];
   const only = first === last && first;
@@ -139,7 +135,7 @@ function AxialInputControls(_ref) {
   }, filteredSides.map(side => {
     const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(side === 'vertical' ? values.top : values.left);
     const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
-    return (0, _element.createElement)(_unitControl.default, (0, _extends2.default)({}, props, {
+    return (0, _element.createElement)(_unitControl.default, { ...props,
       isFirst: first === side,
       isLast: last === side,
       isOnly: only === side,
@@ -151,7 +147,7 @@ function AxialInputControls(_ref) {
       onHoverOff: createHandleOnHoverOff(side),
       label: _utils2.LABELS[side],
       key: side
-    }));
+    });
   }));
 }
 //# sourceMappingURL=axial-input-controls.js.map

package/build/box-control/axial-input-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"names":["groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join","LABELS"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAOA,MAAMA,YAAY,GAAG,CAAE,UAAF,EAAc,YAAd,CAArB;;AAGe,SAASC,kBAAT,OAUkB;AAAA,MAVW;AAC3CC,IAAAA,QAD2C;AAE3CC,IAAAA,OAF2C;AAG3CC,IAAAA,SAH2C;AAI3CC,IAAAA,UAJ2C;AAK3CC,IAAAA,MAL2C;AAM3CC,IAAAA,aAN2C;AAO3CC,IAAAA,gBAP2C;AAQ3CC,IAAAA,KAR2C;AAS3C,OAAGC;AATwC,GAUX;;AAChC,QAAMC,mBAAmB,GACtBC,IAAF,IACEC,KAAF,IAAmD;AAClD,QAAK,CAAEV,OAAP,EAAiB;AAChB;AACA;;AACDA,IAAAA,OAAO,CAAEU,KAAF,EAAS;AAAED,MAAAA;AAAF,KAAT,CAAP;AACA,GAPF;;AASA,QAAME,qBAAqB,GAAKF,IAAF,IAAyB,MAAM;AAC5D,QAAK,CAAER,SAAP,EAAmB;AAClB;AACA;;AACD,QAAKQ,IAAI,KAAK,UAAd,EAA2B;AAC1BR,MAAAA,SAAS,CAAE;AACVW,QAAAA,GAAG,EAAE,IADK;AAEVC,QAAAA,MAAM,EAAE;AAFE,OAAF,CAAT;AAIA;;AACD,QAAKJ,IAAI,KAAK,YAAd,EAA6B;AAC5BR,MAAAA,SAAS,CAAE;AACVa,QAAAA,IAAI,EAAE,IADI;AAEVC,QAAAA,KAAK,EAAE;AAFG,OAAF,CAAT;AAIA;AACD,GAhBD;;AAkBA,QAAMC,sBAAsB,GAAKP,IAAF,IAAyB,MAAM;AAC7D,QAAK,CAAEP,UAAP,EAAoB;AACnB;AACA;;AACD,QAAKO,IAAI,KAAK,UAAd,EAA2B;AAC1BP,MAAAA,UAAU,CAAE;AACXU,QAAAA,GAAG,EAAE,KADM;AAEXC,QAAAA,MAAM,EAAE;AAFG,OAAF,CAAV;AAIA;;AACD,QAAKJ,IAAI,KAAK,YAAd,EAA6B;AAC5BP,MAAAA,UAAU,CAAE;AACXY,QAAAA,IAAI,EAAE,KADK;AAEXC,QAAAA,KAAK,EAAE;AAFI,OAAF,CAAV;AAIA;AACD,GAhBD;;AAkBA,QAAME,oBAAoB,GAAKR,IAAF,IAA2BS,IAAF,IAAqB;AAC1E,QAAK,CAAEnB,QAAP,EAAkB;AACjB;AACA;;AACD,UAAMoB,UAAU,GAAG,EAAE,GAAGhB;AAAL,KAAnB;AACA,UAAMiB,SAAS,GAAGF,IAAI,KAAKG,SAAT,IAAsB,CAAEC,KAAK,CAAEC,UAAU,CAAEL,IAAF,CAAZ,CAA/C;AACA,UAAMM,SAAS,GAAGJ,SAAS,GAAGF,IAAH,GAAUG,SAArC;;AAEA,QAAKZ,IAAI,KAAK,UAAd,EAA2B;AAC1BU,MAAAA,UAAU,CAACP,GAAX,GAAiBY,SAAjB;AACAL,MAAAA,UAAU,CAACN,MAAX,GAAoBW,SAApB;AACA;;AAED,QAAKf,IAAI,KAAK,YAAd,EAA6B;AAC5BU,MAAAA,UAAU,CAACL,IAAX,GAAkBU,SAAlB;AACAL,MAAAA,UAAU,CAACJ,KAAX,GAAmBS,SAAnB;AACA;;AAEDzB,IAAAA,QAAQ,CAAEoB,UAAF,CAAR;AACA,GAnBD;;AAqBA,QAAMM,wBAAwB,GAC3BhB,IAAF,IAA2BS,IAAF,IAAqB;AAC7C,UAAMQ,QAAQ,GAAG,EAAE,GAAGtB;AAAL,KAAjB;;AAEA,QAAKK,IAAI,KAAK,UAAd,EAA2B;AAC1BiB,MAAAA,QAAQ,CAACd,GAAT,GAAeM,IAAf;AACAQ,MAAAA,QAAQ,CAACb,MAAT,GAAkBK,IAAlB;AACA;;AAED,QAAKT,IAAI,KAAK,YAAd,EAA6B;AAC5BiB,MAAAA,QAAQ,CAACZ,IAAT,GAAgBI,IAAhB;AACAQ,MAAAA,QAAQ,CAACX,KAAT,GAAiBG,IAAjB;AACA;;AAEDb,IAAAA,gBAAgB,CAAEqB,QAAF,CAAhB;AACA,GAfF,CAnEgC,CAoFhC;;;AACA,QAAMC,aAAa,GAAGrB,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEsB,MAAP,GACnB/B,YAAY,CAACgC,MAAb,CAAuBpB,IAAF,IAAYH,KAAK,CAACwB,QAAN,CAAgBrB,IAAhB,CAAjC,CADmB,GAEnBZ,YAFH;AAIA,QAAMkC,KAAK,GAAGJ,aAAa,CAAE,CAAF,CAA3B;AACA,QAAMK,IAAI,GAAGL,aAAa,CAAEA,aAAa,CAACC,MAAd,GAAuB,CAAzB,CAA1B;AACA,QAAMK,IAAI,GAAGF,KAAK,KAAKC,IAAV,IAAkBD,KAA/B;AAEA,SACC,4BAAC,wBAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,KAAK,EAAC,KAFP;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGJ,aAAa,CAACO,GAAd,CAAqBzB,IAAF,IAAY;AAChC,UAAM,CAAE0B,cAAF,EAAkBC,UAAlB,IACL,6CACC3B,IAAI,KAAK,UAAT,GAAsBN,MAAM,CAACS,GAA7B,GAAmCT,MAAM,CAACW,IAD3C,CADD;AAIA,UAAMuB,YAAY,GACjB5B,IAAI,KAAK,UAAT,GACGL,aAAa,CAACQ,GADjB,GAEGR,aAAa,CAACU,IAHlB;AAIA,WACC,4BAAC,oBAAD,6BACMP,KADN;AAEC,MAAA,OAAO,EAAGwB,KAAK,KAAKtB,IAFrB;AAGC,MAAA,MAAM,EAAGuB,IAAI,KAAKvB,IAHnB;AAIC,MAAA,MAAM,EAAGwB,IAAI,KAAKxB,IAJnB;AAKC,MAAA,KAAK,EAAG,CACP0B,cADO,EAEPE,YAFO,aAEPA,YAFO,cAEPA,YAFO,GAESD,UAFT,EAGNE,IAHM,CAGA,EAHA,CALT;AASC,MAAA,QAAQ,EAAGrB,oBAAoB,CAAER,IAAF,CAThC;AAUC,MAAA,YAAY,EAAGgB,wBAAwB,CAAEhB,IAAF,CAVxC;AAWC,MAAA,OAAO,EAAGD,mBAAmB,CAAEC,IAAF,CAX9B;AAYC,MAAA,SAAS,EAAGE,qBAAqB,CAAEF,IAAF,CAZlC;AAaC,MAAA,UAAU,EAAGO,sBAAsB,CAAEP,IAAF,CAbpC;AAcC,MAAA,KAAK,EAAG8B,eAAQ9B,IAAR,CAdT;AAeC,MAAA,GAAG,EAAGA;AAfP,OADD;AAmBA,GA5BC,CALH,CADD;AAqCA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"names":["groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join","LABELS"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}

package/build/box-control/icon.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = BoxControlIcon;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _boxControlIconStyles = require("./styles/box-control-icon-styles");
 
 /**
@@ -18,15 +14,13 @@ var _boxControlIconStyles = require("./styles/box-control-icon-styles");
  */
 const BASE_ICON_SIZE = 24;
 
-function BoxControlIcon(_ref) {
-  let {
-    size = 24,
-    side = 'all',
-    sides,
-    ...props
-  } = _ref;
-
-  const isSideDisabled = value => (sides === null || sides === void 0 ? void 0 : sides.length) && !sides.includes(value);
+function BoxControlIcon({
+  size = 24,
+  side = 'all',
+  sides,
+  ...props
+}) {
+  const isSideDisabled = value => sides?.length && !sides.includes(value);
 
   const hasSide = value => {
     if (isSideDisabled(value)) {
@@ -42,11 +36,12 @@ function BoxControlIcon(_ref) {
   const left = hasSide('left') || hasSide('horizontal'); // Simulates SVG Icon scaling.
 
   const scale = size / BASE_ICON_SIZE;
-  return (0, _element.createElement)(_boxControlIconStyles.Root, (0, _extends2.default)({
+  return (0, _element.createElement)(_boxControlIconStyles.Root, {
     style: {
       transform: `scale(${scale})`
-    }
-  }, props), (0, _element.createElement)(_boxControlIconStyles.Viewbox, null, (0, _element.createElement)(_boxControlIconStyles.TopStroke, {
+    },
+    ...props
+  }, (0, _element.createElement)(_boxControlIconStyles.Viewbox, null, (0, _element.createElement)(_boxControlIconStyles.TopStroke, {
     isFocused: top
   }), (0, _element.createElement)(_boxControlIconStyles.RightStroke, {
     isFocused: right

package/build/box-control/icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/icon.tsx"],"names":["BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","transform"],"mappings":";;;;;;;;;;;;;AAIA;;AAJA;AACA;AACA;AAYA,MAAMA,cAAc,GAAG,EAAvB;;AAEe,SAASC,cAAT,OAK6C;AAAA,MALpB;AACvCC,IAAAA,IAAI,GAAG,EADgC;AAEvCC,IAAAA,IAAI,GAAG,KAFgC;AAGvCC,IAAAA,KAHuC;AAIvC,OAAGC;AAJoC,GAKoB;;AAC3D,QAAMC,cAAc,GACnBC,KADsB,IAElB,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,MAAP,KAAiB,CAAEJ,KAAK,CAACK,QAAN,CAAgBF,KAAhB,CAFxB;;AAIA,QAAMG,OAAO,GACZH,KADe,IAEX;AACJ,QAAKD,cAAc,CAAEC,KAAF,CAAnB,EAA+B;AAC9B,aAAO,KAAP;AACA;;AAED,WAAOJ,IAAI,KAAK,KAAT,IAAkBA,IAAI,KAAKI,KAAlC;AACA,GARD;;AAUA,QAAMI,GAAG,GAAGD,OAAO,CAAE,KAAF,CAAP,IAAoBA,OAAO,CAAE,UAAF,CAAvC;AACA,QAAME,KAAK,GAAGF,OAAO,CAAE,OAAF,CAAP,IAAsBA,OAAO,CAAE,YAAF,CAA3C;AACA,QAAMG,MAAM,GAAGH,OAAO,CAAE,QAAF,CAAP,IAAuBA,OAAO,CAAE,UAAF,CAA7C;AACA,QAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAF,CAAP,IAAqBA,OAAO,CAAE,YAAF,CAAzC,CAlB2D,CAoB3D;;AACA,QAAMK,KAAK,GAAGb,IAAI,GAAGF,cAArB;AAEA,SACC,4BAAC,0BAAD;AAAM,IAAA,KAAK,EAAG;AAAEgB,MAAAA,SAAS,EAAG,SAASD,KAAO;AAA9B;AAAd,KAAwDV,KAAxD,GACC,4BAAC,6BAAD,QACC,4BAAC,+BAAD;AAAW,IAAA,SAAS,EAAGM;AAAvB,IADD,EAEC,4BAAC,iCAAD;AAAa,IAAA,SAAS,EAAGC;AAAzB,IAFD,EAGC,4BAAC,kCAAD;AAAc,IAAA,SAAS,EAAGC;AAA1B,IAHD,EAIC,4BAAC,gCAAD;AAAY,IAAA,SAAS,EAAGC;AAAxB,IAJD,CADD,CADD;AAUA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport {\n\tRoot,\n\tViewbox,\n\tTopStroke,\n\tRightStroke,\n\tBottomStroke,\n\tLeftStroke,\n} from './styles/box-control-icon-styles';\nimport type { BoxControlIconProps, BoxControlProps } from './types';\n\nconst BASE_ICON_SIZE = 24;\n\nexport default function BoxControlIcon( {\n\tsize = 24,\n\tside = 'all',\n\tsides,\n\t...props\n}: WordPressComponentProps< BoxControlIconProps, 'span' > ) {\n\tconst isSideDisabled = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => sides?.length && ! sides.includes( value );\n\n\tconst hasSide = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => {\n\t\tif ( isSideDisabled( value ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn side === 'all' || side === value;\n\t};\n\n\tconst top = hasSide( 'top' ) || hasSide( 'vertical' );\n\tconst right = hasSide( 'right' ) || hasSide( 'horizontal' );\n\tconst bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );\n\tconst left = hasSide( 'left' ) || hasSide( 'horizontal' );\n\n\t// Simulates SVG Icon scaling.\n\tconst scale = size / BASE_ICON_SIZE;\n\n\treturn (\n\t\t<Root style={ { transform: `scale(${ scale })` } } { ...props }>\n\t\t\t<Viewbox>\n\t\t\t\t<TopStroke isFocused={ top } />\n\t\t\t\t<RightStroke isFocused={ right } />\n\t\t\t\t<BottomStroke isFocused={ bottom } />\n\t\t\t\t<LeftStroke isFocused={ left } />\n\t\t\t</Viewbox>\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/icon.tsx"],"names":["BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","transform"],"mappings":";;;;;;;;;AAIA;;AAJA;AACA;AACA;AAYA,MAAMA,cAAc,GAAG,EAAvB;;AAEe,SAASC,cAAT,CAAyB;AACvCC,EAAAA,IAAI,GAAG,EADgC;AAEvCC,EAAAA,IAAI,GAAG,KAFgC;AAGvCC,EAAAA,KAHuC;AAIvC,KAAGC;AAJoC,CAAzB,EAK6C;AAC3D,QAAMC,cAAc,GACnBC,KADsB,IAElBH,KAAK,EAAEI,MAAP,IAAiB,CAAEJ,KAAK,CAACK,QAAN,CAAgBF,KAAhB,CAFxB;;AAIA,QAAMG,OAAO,GACZH,KADe,IAEX;AACJ,QAAKD,cAAc,CAAEC,KAAF,CAAnB,EAA+B;AAC9B,aAAO,KAAP;AACA;;AAED,WAAOJ,IAAI,KAAK,KAAT,IAAkBA,IAAI,KAAKI,KAAlC;AACA,GARD;;AAUA,QAAMI,GAAG,GAAGD,OAAO,CAAE,KAAF,CAAP,IAAoBA,OAAO,CAAE,UAAF,CAAvC;AACA,QAAME,KAAK,GAAGF,OAAO,CAAE,OAAF,CAAP,IAAsBA,OAAO,CAAE,YAAF,CAA3C;AACA,QAAMG,MAAM,GAAGH,OAAO,CAAE,QAAF,CAAP,IAAuBA,OAAO,CAAE,UAAF,CAA7C;AACA,QAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAF,CAAP,IAAqBA,OAAO,CAAE,YAAF,CAAzC,CAlB2D,CAoB3D;;AACA,QAAMK,KAAK,GAAGb,IAAI,GAAGF,cAArB;AAEA,SACC,4BAAC,0BAAD;AAAM,IAAA,KAAK,EAAG;AAAEgB,MAAAA,SAAS,EAAG,SAASD,KAAO;AAA9B,KAAd;AAAA,OAAwDV;AAAxD,KACC,4BAAC,6BAAD,QACC,4BAAC,+BAAD;AAAW,IAAA,SAAS,EAAGM;AAAvB,IADD,EAEC,4BAAC,iCAAD;AAAa,IAAA,SAAS,EAAGC;AAAzB,IAFD,EAGC,4BAAC,kCAAD;AAAc,IAAA,SAAS,EAAGC;AAA1B,IAHD,EAIC,4BAAC,gCAAD;AAAY,IAAA,SAAS,EAAGC;AAAxB,IAJD,CADD,CADD;AAUA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport {\n\tRoot,\n\tViewbox,\n\tTopStroke,\n\tRightStroke,\n\tBottomStroke,\n\tLeftStroke,\n} from './styles/box-control-icon-styles';\nimport type { BoxControlIconProps, BoxControlProps } from './types';\n\nconst BASE_ICON_SIZE = 24;\n\nexport default function BoxControlIcon( {\n\tsize = 24,\n\tside = 'all',\n\tsides,\n\t...props\n}: WordPressComponentProps< BoxControlIconProps, 'span' > ) {\n\tconst isSideDisabled = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => sides?.length && ! sides.includes( value );\n\n\tconst hasSide = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => {\n\t\tif ( isSideDisabled( value ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn side === 'all' || side === value;\n\t};\n\n\tconst top = hasSide( 'top' ) || hasSide( 'vertical' );\n\tconst right = hasSide( 'right' ) || hasSide( 'horizontal' );\n\tconst bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );\n\tconst left = hasSide( 'left' ) || hasSide( 'horizontal' );\n\n\t// Simulates SVG Icon scaling.\n\tconst scale = size / BASE_ICON_SIZE;\n\n\treturn (\n\t\t<Root style={ { transform: `scale(${ scale })` } } { ...props }>\n\t\t\t<Viewbox>\n\t\t\t\t<TopStroke isFocused={ top } />\n\t\t\t\t<RightStroke isFocused={ right } />\n\t\t\t\t<BottomStroke isFocused={ bottom } />\n\t\t\t\t<LeftStroke isFocused={ left } />\n\t\t\t</Viewbox>\n\t\t</Root>\n\t);\n}\n"]}

package/build/box-control/index.js

@@ -15,8 +15,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _compose = require("@wordpress/compose");
 
 var _i18n = require("@wordpress/i18n");
@@ -89,27 +87,26 @@ function useUniqueId(idProp) {
  */
 
 
-function BoxControl(_ref) {
-  let {
-    id: idProp,
-    inputProps = defaultInputProps,
-    onChange = noop,
-    label = (0, _i18n.__)('Box Control'),
-    values: valuesProp,
-    units,
-    sides,
-    splitOnAxis = false,
-    allowReset = true,
-    resetValues = _utils2.DEFAULT_VALUES,
-    onMouseOver,
-    onMouseOut
-  } = _ref;
+function BoxControl({
+  id: idProp,
+  inputProps = defaultInputProps,
+  onChange = noop,
+  label = (0, _i18n.__)('Box Control'),
+  values: valuesProp,
+  units,
+  sides,
+  splitOnAxis = false,
+  allowReset = true,
+  resetValues = _utils2.DEFAULT_VALUES,
+  onMouseOver,
+  onMouseOut
+}) {
   const [values, setValues] = (0, _hooks.useControlledState)(valuesProp, {
     fallback: _utils2.DEFAULT_VALUES
   });
   const inputValues = values || _utils2.DEFAULT_VALUES;
   const hasInitialValue = (0, _utils2.isValuesDefined)(valuesProp);
-  const hasOneSide = (sides === null || sides === void 0 ? void 0 : sides.length) === 1;
+  const hasOneSide = sides?.length === 1;
   const [isDirty, setIsDirty] = (0, _element.useState)(hasInitialValue);
   const [isLinked, setIsLinked] = (0, _element.useState)(!hasInitialValue || !(0, _utils2.isValuesMixed)(inputValues) || hasOneSide);
   const [side, setSide] = (0, _element.useState)((0, _utils2.getInitialSide)(isLinked, splitOnAxis)); // Tracking selected units via internal state allows filtering of CSS unit
@@ -117,10 +114,10 @@ function BoxControl(_ref) {
   // behaviour. Filtering CSS only values prevents invalid style values.
 
   const [selectedUnits, setSelectedUnits] = (0, _element.useState)({
-    top: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.top)[1],
-    right: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.right)[1],
-    bottom: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.bottom)[1],
-    left: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.left)[1]
+    top: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp?.top)[1],
+    right: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp?.right)[1],
+    bottom: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp?.bottom)[1],
+    left: (0, _utils.parseQuantityAndUnitFromRawValue)(valuesProp?.left)[1]
   });
   const id = useUniqueId(idProp);
   const headingId = `${id}-heading`;
@@ -130,10 +127,9 @@ function BoxControl(_ref) {
     setSide((0, _utils2.getInitialSide)(!isLinked, splitOnAxis));
   };
 
-  const handleOnFocus = (_event, _ref2) => {
-    let {
-      side: nextSide
-    } = _ref2;
+  const handleOnFocus = (_event, {
+    side: nextSide
+  }) => {
     setSide(nextSide);
   };
 
@@ -181,12 +177,15 @@ function BoxControl(_ref) {
   }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_icon.default, {
     side: side,
     sides: sides
-  })), isLinked && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_allInputControl.default, (0, _extends2.default)({
-    "aria-label": label
-  }, inputControlProps))), !isLinked && splitOnAxis && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_axialInputControls.default, inputControlProps)), !hasOneSide && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_linkedButton.default, {
+  })), isLinked && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_allInputControl.default, {
+    "aria-label": label,
+    ...inputControlProps
+  })), !isLinked && splitOnAxis && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_axialInputControls.default, { ...inputControlProps
+  })), !hasOneSide && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_linkedButton.default, {
     onClick: toggleLinked,
     isLinked: isLinked
-  }))), !isLinked && !splitOnAxis && (0, _element.createElement)(_inputControls.default, inputControlProps));
+  }))), !isLinked && !splitOnAxis && (0, _element.createElement)(_inputControls.default, { ...inputControlProps
+  }));
 }
 
 var _default = BoxControl;

package/build/box-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/index.tsx"],"names":["defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/index.tsx"],"names":["defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"]}

package/build/box-control/input-controls.js

@@ -9,8 +9,6 @@ exports.default = BoxInputControls;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _unitControl = _interopRequireDefault(require("./unit-control"));
 
 var _utils = require("../unit-control/utils");
@@ -24,19 +22,17 @@ var _boxControlStyles = require("./styles/box-control-styles");
  */
 const noop = () => {};
 
-function BoxInputControls(_ref) {
-  let {
-    onChange = noop,
-    onFocus = noop,
-    onHoverOn = noop,
-    onHoverOff = noop,
-    values,
-    selectedUnits,
-    setSelectedUnits,
-    sides,
-    ...props
-  } = _ref;
-
+function BoxInputControls({
+  onChange = noop,
+  onFocus = noop,
+  onHoverOn = noop,
+  onHoverOff = noop,
+  values,
+  selectedUnits,
+  setSelectedUnits,
+  sides,
+  ...props
+}) {
   const createHandleOnFocus = side => event => {
     onFocus(event, {
       side
@@ -59,10 +55,9 @@ function BoxInputControls(_ref) {
     onChange(nextValues);
   };
 
-  const createHandleOnChange = side => (next, _ref2) => {
-    let {
-      event
-    } = _ref2;
+  const createHandleOnChange = side => (next, {
+    event
+  }) => {
     const nextValues = { ...values
     };
     const isNumeric = next !== undefined && !isNaN(parseFloat(next));
@@ -107,7 +102,7 @@ function BoxInputControls(_ref) {
   }; // Filter sides if custom configuration provided, maintaining default order.
 
 
-  const filteredSides = sides !== null && sides !== void 0 && sides.length ? _utils2.ALL_SIDES.filter(side => sides.includes(side)) : _utils2.ALL_SIDES;
+  const filteredSides = sides?.length ? _utils2.ALL_SIDES.filter(side => sides.includes(side)) : _utils2.ALL_SIDES;
   const first = filteredSides[0];
   const last = filteredSides[filteredSides.length - 1];
   const only = first === last && first;
@@ -120,7 +115,7 @@ function BoxInputControls(_ref) {
   }, filteredSides.map(side => {
     const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(values[side]);
     const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
-    return (0, _element.createElement)(_unitControl.default, (0, _extends2.default)({}, props, {
+    return (0, _element.createElement)(_unitControl.default, { ...props,
       isFirst: first === side,
       isLast: last === side,
       isOnly: only === side,
@@ -132,7 +127,7 @@ function BoxInputControls(_ref) {
       onHoverOff: createHandleOnHoverOff(side),
       label: _utils2.LABELS[side],
       key: `box-control-${side}`
-    }));
+    });
   })));
 }
 //# sourceMappingURL=input-controls.js.map