@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.1-next.b8c8708f3.0

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

@@ -1,23 +1,16 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import BorderControlDropdown from '../border-control-dropdown';
-import UnitControl from '../../unit-control';
-import RangeControl from '../../range-control';
-import { HStack } from '../../h-stack';
-import { StyledLabel } from '../../base-control/styles/base-control-styles';
-import { View } from '../../view';
-import { VisuallyHidden } from '../../visually-hidden';
-import { contextConnect } from '../../context';
-import { useBorderControl } from './hook';
-import { Spacer } from '../../spacer';
+import { __ } from "@wordpress/i18n";
+import BorderControlDropdown from "../border-control-dropdown";
+import UnitControl from "../../unit-control";
+import RangeControl from "../../range-control";
+import { HStack } from "../../h-stack";
+import { StyledLabel } from "../../base-control/styles/base-control-styles";
+import { View } from "../../view";
+import { VisuallyHidden } from "../../visually-hidden";
+import { contextConnect } from "../../context";
+import { useBorderControl } from "./hook";
+import { Spacer } from "../../spacer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BorderLabel = props => {
+const BorderLabel = (props) => {
   const {
     label,
     hideLabelFromVision
@@ -25,10 +18,10 @@ const BorderLabel = props => {
   if (!label) {
     return null;
   }
-  return hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {
+  return hideLabelFromVision ? /* @__PURE__ */ _jsx(VisuallyHidden, {
     as: "legend",
     children: label
-  }) : /*#__PURE__*/_jsx(StyledLabel, {
+  }) : /* @__PURE__ */ _jsx(StyledLabel, {
     as: "legend",
     children: label
   });
@@ -62,99 +55,67 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     __experimentalIsRenderedInSidebar,
     ...otherProps
   } = useBorderControl(props);
-  return /*#__PURE__*/_jsxs(View, {
+  return /* @__PURE__ */ _jsxs(View, {
     as: "fieldset",
     ...otherProps,
     ref: forwardedRef,
-    children: [/*#__PURE__*/_jsx(BorderLabel, {
-      label: label,
-      hideLabelFromVision: hideLabelFromVision
-    }), /*#__PURE__*/_jsxs(HStack, {
+    children: [/* @__PURE__ */ _jsx(BorderLabel, {
+      label,
+      hideLabelFromVision
+    }), /* @__PURE__ */ _jsxs(HStack, {
       spacing: 4,
       className: innerWrapperClassName,
-      children: [/*#__PURE__*/_jsx(UnitControl, {
-        __next40pxDefaultSize: __next40pxDefaultSize,
+      children: [/* @__PURE__ */ _jsx(UnitControl, {
+        __next40pxDefaultSize,
         __shouldNotWarnDeprecated36pxSize: true,
-        prefix: /*#__PURE__*/_jsx(Spacer, {
+        prefix: /* @__PURE__ */ _jsx(Spacer, {
           marginRight: 1,
           marginBottom: 0,
-          children: /*#__PURE__*/_jsx(BorderControlDropdown, {
-            border: border,
-            colors: colors,
-            __unstablePopoverProps: __unstablePopoverProps,
-            disableCustomColors: disableCustomColors,
-            enableAlpha: enableAlpha,
-            enableStyle: enableStyle,
-            isStyleSettable: isStyleSettable,
+          children: /* @__PURE__ */ _jsx(BorderControlDropdown, {
+            border,
+            colors,
+            __unstablePopoverProps,
+            disableCustomColors,
+            enableAlpha,
+            enableStyle,
+            isStyleSettable,
             onChange: onBorderChange,
-            previousStyleSelection: previousStyleSelection,
-            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-            size: size
+            previousStyleSelection,
+            __experimentalIsRenderedInSidebar,
+            size
           })
         }),
-        label: __('Border width'),
+        label: __("Border width"),
         hideLabelFromVision: true,
         min: 0,
         onChange: onWidthChange,
-        value: border?.width || '',
-        placeholder: placeholder,
-        disableUnits: disableUnits,
+        value: border?.width || "",
+        placeholder,
+        disableUnits,
         __unstableInputWidth: inputWidth,
-        size: size
-      }), withSlider && /*#__PURE__*/_jsx(RangeControl, {
+        size
+      }), withSlider && /* @__PURE__ */ _jsx(RangeControl, {
         __nextHasNoMarginBottom: true,
-        label: __('Border width'),
+        label: __("Border width"),
         hideLabelFromVision: true,
         className: sliderClassName,
         initialPosition: 0,
         max: 100,
         min: 0,
         onChange: onSliderChange,
-        step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,
-        value: widthValue || undefined,
+        step: ["px", "%"].includes(widthUnit) ? 1 : 0.1,
+        value: widthValue || void 0,
         withInputField: false,
-        __next40pxDefaultSize: __next40pxDefaultSize,
+        __next40pxDefaultSize,
         __shouldNotWarnDeprecated36pxSize: true
       })]
     })]
   });
 };
-
-/**
- * The `BorderControl` brings together internal sub-components which allow users to
- * set the various properties of a border. The first sub-component, a
- * `BorderDropdown` contains options representing border color and style. The
- * border width is controlled via a `UnitControl` and an optional `RangeControl`.
- *
- * Border radius is not covered by this control as it may be desired separate to
- * color, style, and width. For example, the border radius may be absorbed under
- * a "shape" abstraction.
- *
- * ```jsx
- * import { BorderControl } from '@wordpress/components';
- * import { __ } from '@wordpress/i18n';
- *
- * const colors = [
- * 	{ name: 'Blue 20', color: '#72aee6' },
- * 	// ...
- * ];
- *
- * const MyBorderControl = () => {
- * 	const [ border, setBorder ] = useState();
- * 	const onChange = ( newBorder ) => setBorder( newBorder );
- *
- * 	return (
- * 		<BorderControl
- * 			__next40pxDefaultSize
- * 			colors={ colors }
- * 			label={ __( 'Border' ) }
- * 			onChange={ onChange }
- * 			value={ border }
- * 		/>
- * 	);
- * };
- * ```
- */
-export const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');
-export default BorderControl;
-//# sourceMappingURL=component.js.map
+const BorderControl = contextConnect(UnconnectedBorderControl, "BorderControl");
+var component_default = BorderControl;
+export {
+  BorderControl,
+  component_default as default
+};
+//# sourceMappingURL=component.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","Spacer","jsx","_jsx","jsxs","_jsxs","BorderLabel","props","label","hideLabelFromVision","as","children","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","ref","spacing","className","__shouldNotWarnDeprecated36pxSize","prefix","marginRight","marginBottom","onChange","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\nimport { Spacer } from '../../spacer';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tisStyleSettable,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<Spacer marginRight={ 1 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\t__unstablePopoverProps={\n\t\t\t\t\t\t\t\t\t__unstablePopoverProps\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\t\tpreviousStyleSelection={\n\t\t\t\t\t\t\t\t\tpreviousStyleSelection\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../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 { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\nimport { Spacer } from '../../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderLabel = props => {\n  const {\n    label,\n    hideLabelFromVision\n  } = props;\n  if (!label) {\n    return null;\n  }\n  return hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n    as: \"legend\",\n    children: label\n  }) : /*#__PURE__*/_jsx(StyledLabel, {\n    as: \"legend\",\n    children: label\n  });\n};\nconst UnconnectedBorderControl = (props, forwardedRef) => {\n  const {\n    __next40pxDefaultSize = false,\n    colors,\n    disableCustomColors,\n    disableUnits,\n    enableAlpha,\n    enableStyle,\n    hideLabelFromVision,\n    innerWrapperClassName,\n    inputWidth,\n    isStyleSettable,\n    label,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    placeholder,\n    __unstablePopoverProps,\n    previousStyleSelection,\n    showDropdownHeader,\n    size,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    withSlider,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderControl(props);\n  return /*#__PURE__*/_jsxs(View, {\n    as: \"fieldset\",\n    ...otherProps,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(BorderLabel, {\n      label: label,\n      hideLabelFromVision: hideLabelFromVision\n    }), /*#__PURE__*/_jsxs(HStack, {\n      spacing: 4,\n      className: innerWrapperClassName,\n      children: [/*#__PURE__*/_jsx(UnitControl, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true,\n        prefix: /*#__PURE__*/_jsx(Spacer, {\n          marginRight: 1,\n          marginBottom: 0,\n          children: /*#__PURE__*/_jsx(BorderControlDropdown, {\n            border: border,\n            colors: colors,\n            __unstablePopoverProps: __unstablePopoverProps,\n            disableCustomColors: disableCustomColors,\n            enableAlpha: enableAlpha,\n            enableStyle: enableStyle,\n            isStyleSettable: isStyleSettable,\n            onChange: onBorderChange,\n            previousStyleSelection: previousStyleSelection,\n            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n            size: size\n          })\n        }),\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        min: 0,\n        onChange: onWidthChange,\n        value: border?.width || '',\n        placeholder: placeholder,\n        disableUnits: disableUnits,\n        __unstableInputWidth: inputWidth,\n        size: size\n      }), withSlider && /*#__PURE__*/_jsx(RangeControl, {\n        __nextHasNoMarginBottom: true,\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        className: sliderClassName,\n        initialPosition: 0,\n        max: 100,\n        min: 0,\n        onChange: onSliderChange,\n        step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,\n        value: widthValue || undefined,\n        withInputField: false,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true\n      })]\n    })]\n  });\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');\nexport default BorderControl;"],
+  "mappings": "AAGA,SAAS,UAAU;AAKnB,OAAO,2BAA2B;AAClC,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,MAAM,cAAc,WAAS;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAO,sBAAmC,qBAAK,gBAAgB;AAAA,IAC7D,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC,IAAiB,qBAAK,aAAa;AAAA,IAClC,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC;AACH;AACA,MAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAC1B,SAAoB,sBAAM,MAAM;AAAA,IAC9B,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,aAAa;AAAA,MACxC;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,sBAAM,QAAQ;AAAA,MAC7B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,aAAa;AAAA,QACxC;AAAA,QACA,mCAAmC;AAAA,QACnC,QAAqB,qBAAK,QAAQ;AAAA,UAChC,aAAa;AAAA,UACb,cAAc;AAAA,UACd,UAAuB,qBAAK,uBAAuB;AAAA,YACjD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,QACD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,QAAQ,SAAS;AAAA,QACxB;AAAA,QACA;AAAA,QACA,sBAAsB;AAAA,QACtB;AAAA,MACF,CAAC,GAAG,cAA2B,qBAAK,cAAc;AAAA,QAChD,yBAAyB;AAAA,QACzB,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM,CAAC,MAAM,GAAG,EAAE,SAAS,SAAS,IAAI,IAAI;AAAA,QAC5C,OAAO,cAAc;AAAA,QACrB,gBAAgB;AAAA,QAChB;AAAA,QACA,mCAAmC;AAAA,MACrC,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqCO,MAAM,gBAAgB,eAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
+  "names": []
+}

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

@@ -1,25 +1,15 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useMemo, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import * as styles from '../styles';
-import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
-import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
-
-// 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;
+import { useCallback, useMemo, useState } from "@wordpress/element";
+import * as styles from "../styles";
+import { parseQuantityAndUnitFromRawValue } from "../../unit-control/utils";
+import { useContextSystem } from "../../context";
+import { useCx } from "../../utils/hooks/use-cx";
+import { maybeWarnDeprecated36pxSize } from "../../utils/deprecated-36px-size";
+const isValidBorder = (border) => {
+  const hasWidth = border?.width !== void 0 && border.width !== "";
+  const hasColor = border?.color !== void 0;
   return hasWidth || hasColor;
 };
-export function useBorderControl(props) {
+function useBorderControl(props) {
   const {
     className,
     colors = [],
@@ -28,84 +18,68 @@ export function useBorderControl(props) {
     enableAlpha = true,
     enableStyle = true,
     shouldSanitizeBorder = true,
-    size = 'default',
+    size = "default",
     value: border,
     width,
     __experimentalIsRenderedInSidebar = false,
     __next40pxDefaultSize,
     __shouldNotWarnDeprecated36pxSize,
     ...otherProps
-  } = useContextSystem(props, 'BorderControl');
+  } = useContextSystem(props, "BorderControl");
   maybeWarnDeprecated36pxSize({
-    componentName: 'BorderControl',
+    componentName: "BorderControl",
     __next40pxDefaultSize,
     size,
     __shouldNotWarnDeprecated36pxSize
   });
-  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+  const computedSize = size === "default" && __next40pxDefaultSize ? "__unstable-large" : size;
   const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
-  const widthUnit = originalWidthUnit || 'px';
+  const widthUnit = originalWidthUnit || "px";
   const hadPreviousZeroWidth = widthValue === 0;
   const [colorSelection, setColorSelection] = useState();
   const [styleSelection, setStyleSelection] = useState();
   const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
-  const onBorderChange = useCallback(newBorder => {
+  const onBorderChange = useCallback((newBorder) => {
     if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
-      onChange(undefined);
+      onChange(void 0);
       return;
     }
     onChange(newBorder);
   }, [onChange, shouldSanitizeBorder]);
-  const onWidthChange = useCallback(newWidth => {
-    const newWidthValue = newWidth === '' ? undefined : newWidth;
+  const onWidthChange = useCallback((newWidth) => {
+    const newWidthValue = newWidth === "" ? void 0 : newWidth;
     const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);
     const hasZeroWidth = parsedValue === 0;
     const updatedBorder = {
       ...border,
       width: newWidthValue
     };
-
-    // Setting the border width explicitly to zero will also set the
-    // border style to `none` and clear the border color.
     if (hasZeroWidth && !hadPreviousZeroWidth) {
-      // Before clearing the color and style selections, keep track of
-      // the current selections so they can be restored when the width
-      // changes to a non-zero value.
       setColorSelection(border?.color);
       setStyleSelection(border?.style);
-
-      // Clear the color and style border properties.
-      updatedBorder.color = undefined;
-      updatedBorder.style = 'none';
+      updatedBorder.color = void 0;
+      updatedBorder.style = "none";
     }
-
-    // Selection has changed from zero border width to non-zero width.
     if (!hasZeroWidth && hadPreviousZeroWidth) {
-      // Restore previous border color and style selections if width
-      // is now not zero.
-      if (updatedBorder.color === undefined) {
+      if (updatedBorder.color === void 0) {
         updatedBorder.color = colorSelection;
       }
-      if (updatedBorder.style === 'none') {
+      if (updatedBorder.style === "none") {
         updatedBorder.style = styleSelection;
       }
     }
     onBorderChange(updatedBorder);
   }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);
-  const onSliderChange = useCallback(value => {
+  const onSliderChange = useCallback((value) => {
     onWidthChange(`${value}${widthUnit}`);
   }, [onWidthChange, widthUnit]);
-
-  // Generate class names.
   const cx = useCx();
   const classes = useMemo(() => {
     return cx(styles.borderControl, className);
   }, [className, cx]);
   let wrapperWidth = width;
   if (isCompact) {
-    // Widths below represent the minimum usable width for compact controls.
-    // Taller controls contain greater internal padding, thus greater width.
-    wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
+    wrapperWidth = size === "__unstable-large" ? "116px" : "90px";
   }
   const innerWrapperClassName = useMemo(() => {
     const widthStyle = !!wrapperWidth && styles.wrapperWidth;
@@ -137,4 +111,7 @@ export function useBorderControl(props) {
     __next40pxDefaultSize
   };
 }
-//# sourceMappingURL=hook.js.map
+export {
+  useBorderControl
+};
+//# sourceMappingURL=hook.js.map

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

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

package/build-module/border-control/border-control/index.js

@@ -1,3 +1,7 @@
-export { default as BorderControl } from './component';
-export { useBorderControl } from './hook';
-//# sourceMappingURL=index.js.map
+import { default as default2 } from "./component";
+import { useBorderControl } from "./hook";
+export {
+  default2 as BorderControl,
+  useBorderControl
+};
+//# sourceMappingURL=index.js.map

package/build-module/border-control/border-control/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["default","BorderControl","useBorderControl"],"sources":["@wordpress/components/src/border-control/border-control/index.ts"],"sourcesContent":["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,aAAa;AACtD,SAASC,gBAAgB,QAAQ,QAAQ","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/border-control/border-control/index.ts"],
+  "sourcesContent": ["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAAgC;AACzC,SAAS,wBAAwB;",
+  "names": ["default"]
+}