@wordpress/components 25.0.0 → 25.1.1

package/build/border-box-control/border-box-control-visualizer/component.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 = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _view = require("../../view");
 
 var _context = require("../../ui/context");
@@ -29,9 +25,9 @@ const BorderBoxControlVisualizer = (props, forwardedRef) => {
     value,
     ...otherProps
   } = (0, _hook.useBorderBoxControlVisualizer)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, otherProps, {
+  return (0, _element.createElement)(_view.View, { ...otherProps,
     ref: forwardedRef
-  }));
+  });
 };
 
 const ConnectedBorderBoxControlVisualizer = (0, _context.contextConnect)(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');

package/build/border-box-control/border-box-control-visualizer/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/component.tsx"],"names":["BorderBoxControlVisualizer","props","forwardedRef","value","otherProps","ConnectedBorderBoxControlVisualizer"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOA,MAAMA,0BAA0B,GAAG,CAClCC,KADkC,EAElCC,YAFkC,KAG9B;AACJ,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA2B,yCAA+BH,KAA/B,CAAjC;AAEA,SAAO,4BAAC,UAAD,6BAAWG,UAAX;AAAwB,IAAA,GAAG,EAAGF;AAA9B,KAAP;AACA,CAPD;;AASA,MAAMG,mCAAmC,GAAG,6BAC3CL,0BAD2C,EAE3C,4BAF2C,CAA5C;eAIeK,mC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlVisualizer } from './hook';\n\nimport type { VisualizerProps } from '../types';\n\nconst BorderBoxControlVisualizer = (\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { value, ...otherProps } = useBorderBoxControlVisualizer( props );\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n};\n\nconst ConnectedBorderBoxControlVisualizer = contextConnect(\n\tBorderBoxControlVisualizer,\n\t'BorderBoxControlVisualizer'\n);\nexport default ConnectedBorderBoxControlVisualizer;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/component.tsx"],"names":["BorderBoxControlVisualizer","props","forwardedRef","value","otherProps","ConnectedBorderBoxControlVisualizer"],"mappings":";;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOA,MAAMA,0BAA0B,GAAG,CAClCC,KADkC,EAElCC,YAFkC,KAG9B;AACJ,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA2B,yCAA+BH,KAA/B,CAAjC;AAEA,SAAO,4BAAC,UAAD,OAAWG,UAAX;AAAwB,IAAA,GAAG,EAAGF;AAA9B,IAAP;AACA,CAPD;;AASA,MAAMG,mCAAmC,GAAG,6BAC3CL,0BAD2C,EAE3C,4BAF2C,CAA5C;eAIeK,mC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlVisualizer } from './hook';\n\nimport type { VisualizerProps } from '../types';\n\nconst BorderBoxControlVisualizer = (\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { value, ...otherProps } = useBorderBoxControlVisualizer( props );\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n};\n\nconst ConnectedBorderBoxControlVisualizer = contextConnect(\n\tBorderBoxControlVisualizer,\n\t'BorderBoxControlVisualizer'\n);\nexport default ConnectedBorderBoxControlVisualizer;\n"]}

package/build/border-box-control/styles.js

@@ -51,10 +51,10 @@ const borderBoxStyleWithFallback = border => {
 };
 
 const borderBoxControlVisualizer = (borders, size) => {
-  return /*#__PURE__*/(0, _react.css)("position:absolute;top:", size === '__unstable-large' ? '20px' : '15px', ";right:", size === '__unstable-large' ? '39px' : '29px', ";bottom:", size === '__unstable-large' ? '20px' : '15px', ";left:", size === '__unstable-large' ? '39px' : '29px', ";border-top:", borderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.top), ";border-bottom:", borderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.bottom), ";", (0, _utils.rtl)({
-    borderLeft: borderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.left)
+  return /*#__PURE__*/(0, _react.css)("position:absolute;top:", size === '__unstable-large' ? '20px' : '15px', ";right:", size === '__unstable-large' ? '39px' : '29px', ";bottom:", size === '__unstable-large' ? '20px' : '15px', ";left:", size === '__unstable-large' ? '39px' : '29px', ";border-top:", borderBoxStyleWithFallback(borders?.top), ";border-bottom:", borderBoxStyleWithFallback(borders?.bottom), ";", (0, _utils.rtl)({
+    borderLeft: borderBoxStyleWithFallback(borders?.left)
   })(), " ", (0, _utils.rtl)({
-    borderRight: borderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.right)
+    borderRight: borderBoxStyleWithFallback(borders?.right)
   })(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:borderBoxControlVisualizer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRFciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgbGlua2VkQm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiAnMjRweCcgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnOHB4JyA6ICczcHgnIH07XG5cdFx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSgpIH1cblx0XHRsaW5lLWhlaWdodDogMDtcblx0YDtcbn07XG5cbmNvbnN0IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9IChcblx0Ym9yZGVycz86IEJvcmRlcnMsXG5cdHNpemU/OiAnZGVmYXVsdCcgfCAnX191bnN0YWJsZS1sYXJnZSdcbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdHJpZ2h0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3R0b206ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICczOXB4JyA6ICcyOXB4JyB9O1xuXHRcdGJvcmRlci10b3A6ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHR3aWR0aDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gdW5kZWZpbmVkIDogJzgwJScgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHJpZ2h0Qm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0JHsgcnRsKCB7IG1hcmdpbkxlZnQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
 };
 

package/build/border-box-control/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/styles.ts"],"names":["borderBoxControl","css","linkedBorderControl","marginRight","wrapper","borderBoxControlLinkedButton","size","right","borderBoxStyleWithFallback","border","color","COLORS","gray","style","width","CONFIG","borderWidth","clampedWidth","hasVisibleBorder","borderStyle","borderBoxControlVisualizer","borders","top","bottom","borderLeft","left","borderRight","borderBoxControlSplitControls","undefined","centeredBorderControl","rightBorderControl","marginLeft"],"mappings":";;;;;;;AAGA;;AAKA;;;;AAKO,MAAMA,gBAAgB,oBAAGC,UAAH,sgHAAtB;;;AAEA,MAAMC,mBAAmB,GAAG,uBAAMD,UAAN,aAE/B,gBAAK;AAAEE,EAAAA,WAAW,EAAE;AAAf,CAAL,GAF+B,ihHAA5B;;;AAKA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;;AAIA,MAAMC,4BAA4B,GACxCC,IAD2C,IAEvC;AACJ,0BAAOL,UAAP,4BAESK,IAAI,KAAK,kBAAT,GAA8B,KAA9B,GAAsC,KAF/C,OAGI,gBAAK;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAAL,GAHJ;AAMA,CATM;;;;AAWP,MAAMC,0BAA0B,GAAKC,MAAF,IAAuB;AACzD,QAAM;AACLC,IAAAA,KAAK,GAAGC,cAAOC,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,KAAK,GAAG,OAFH;AAGLC,IAAAA,KAAK,GAAGC,cAAOC;AAHV,MAIFP,MAAM,IAAI,EAJd;AAMA,QAAMQ,YAAY,GACjBH,KAAK,KAAKC,cAAOC,WAAjB,GAAgC,cAAcF,KAAO,SAArD,GAAgEA,KADjE;AAEA,QAAMI,gBAAgB,GAAK,CAAC,CAAEJ,KAAH,IAAYA,KAAK,KAAK,GAAxB,IAAiC,CAAC,CAAEJ,KAA7D;AACA,QAAMS,WAAW,GAAGD,gBAAgB,GAAGL,KAAK,IAAI,OAAZ,GAAsBA,KAA1D;AAEA,SAAQ,GAAGH,KAAO,IAAIS,WAAa,IAAIF,YAAc,EAArD;AACA,CAbD;;AAeO,MAAMG,0BAA0B,GAAG,CACzCC,OADyC,EAEzCf,IAFyC,KAGrC;AACJ,0BAAOL,UAAP,4BAESK,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MAFhD,aAGWA,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MAHlD,cAIYA,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MAJnD,YAKUA,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MALjD,kBAMgBE,0BAA0B,CAAEa,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,GAAX,CAN1C,qBAOmBd,0BAA0B,CAAEa,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,MAAX,CAP7C,OAQI,gBAAK;AACPC,IAAAA,UAAU,EAAEhB,0BAA0B,CAAEa,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,IAAX;AAD/B,GAAL,GARJ,OAWI,gBAAK;AACPC,IAAAA,WAAW,EAAElB,0BAA0B,CAAEa,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEd,KAAX;AADhC,GAAL,GAXJ;AAeA,CAnBM;;;;AAqBA,MAAMoB,6BAA6B,GACzCrB,IAD4C,qBAExCL,UAFwC,qCAKlCK,IAAI,KAAK,kBAAT,GAA8BsB,SAA9B,GAA0C,KALR,2hHAAtC;;;AAQA,MAAMC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA3B;;;AAKA,MAAMC,kBAAkB,GAAG,uBAAM7B,UAAN,EAC9B,gBAAK;AAAE8B,EAAAA,UAAU,EAAE;AAAd,CAAL,GAD8B,ohHAA3B","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\n\nimport type { Border } from '../border-control/types';\nimport type { Borders } from './types';\n\nexport const borderBoxControl = css``;\n\nexport const linkedBorderControl = () => css`\n\tflex: 1;\n\t${ rtl( { marginRight: '24px' } )() }\n`;\n\nexport const wrapper = css`\n\tposition: relative;\n`;\n\nexport const borderBoxControlLinkedButton = (\n\tsize?: 'default' | '__unstable-large'\n) => {\n\treturn css`\n\t\tposition: absolute;\n\t\ttop: ${ size === '__unstable-large' ? '8px' : '3px' };\n\t\t${ rtl( { right: 0 } )() }\n\t\tline-height: 0;\n\t`;\n};\n\nconst borderBoxStyleWithFallback = ( border?: Border ) => {\n\tconst {\n\t\tcolor = COLORS.gray[ 200 ],\n\t\tstyle = 'solid',\n\t\twidth = CONFIG.borderWidth,\n\t} = border || {};\n\n\tconst clampedWidth =\n\t\twidth !== CONFIG.borderWidth ? `clamp(1px, ${ width }, 10px)` : width;\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn `${ color } ${ borderStyle } ${ clampedWidth }`;\n};\n\nexport const borderBoxControlVisualizer = (\n\tborders?: Borders,\n\tsize?: 'default' | '__unstable-large'\n) => {\n\treturn css`\n\t\tposition: absolute;\n\t\ttop: ${ size === '__unstable-large' ? '20px' : '15px' };\n\t\tright: ${ size === '__unstable-large' ? '39px' : '29px' };\n\t\tbottom: ${ size === '__unstable-large' ? '20px' : '15px' };\n\t\tleft: ${ size === '__unstable-large' ? '39px' : '29px' };\n\t\tborder-top: ${ borderBoxStyleWithFallback( borders?.top ) };\n\t\tborder-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };\n\t\t${ rtl( {\n\t\t\tborderLeft: borderBoxStyleWithFallback( borders?.left ),\n\t\t} )() }\n\t\t${ rtl( {\n\t\t\tborderRight: borderBoxStyleWithFallback( borders?.right ),\n\t\t} )() }\n\t`;\n};\n\nexport const borderBoxControlSplitControls = (\n\tsize?: 'default' | '__unstable-large'\n) => css`\n\tposition: relative;\n\tflex: 1;\n\twidth: ${ size === '__unstable-large' ? undefined : '80%' };\n`;\n\nexport const centeredBorderControl = css`\n\tgrid-column: span 2;\n\tmargin: 0 auto;\n`;\n\nexport const rightBorderControl = () => css`\n\t${ rtl( { marginLeft: 'auto' } )() }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/styles.ts"],"names":["borderBoxControl","css","linkedBorderControl","marginRight","wrapper","borderBoxControlLinkedButton","size","right","borderBoxStyleWithFallback","border","color","COLORS","gray","style","width","CONFIG","borderWidth","clampedWidth","hasVisibleBorder","borderStyle","borderBoxControlVisualizer","borders","top","bottom","borderLeft","left","borderRight","borderBoxControlSplitControls","undefined","centeredBorderControl","rightBorderControl","marginLeft"],"mappings":";;;;;;;AAGA;;AAKA;;;;AAKO,MAAMA,gBAAgB,oBAAGC,UAAH,sgHAAtB;;;AAEA,MAAMC,mBAAmB,GAAG,uBAAMD,UAAN,aAE/B,gBAAK;AAAEE,EAAAA,WAAW,EAAE;AAAf,CAAL,GAF+B,ihHAA5B;;;AAKA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;;AAIA,MAAMC,4BAA4B,GACxCC,IAD2C,IAEvC;AACJ,0BAAOL,UAAP,4BAESK,IAAI,KAAK,kBAAT,GAA8B,KAA9B,GAAsC,KAF/C,OAGI,gBAAK;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAAL,GAHJ;AAMA,CATM;;;;AAWP,MAAMC,0BAA0B,GAAKC,MAAF,IAAuB;AACzD,QAAM;AACLC,IAAAA,KAAK,GAAGC,cAAOC,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,KAAK,GAAG,OAFH;AAGLC,IAAAA,KAAK,GAAGC,cAAOC;AAHV,MAIFP,MAAM,IAAI,EAJd;AAMA,QAAMQ,YAAY,GACjBH,KAAK,KAAKC,cAAOC,WAAjB,GAAgC,cAAcF,KAAO,SAArD,GAAgEA,KADjE;AAEA,QAAMI,gBAAgB,GAAK,CAAC,CAAEJ,KAAH,IAAYA,KAAK,KAAK,GAAxB,IAAiC,CAAC,CAAEJ,KAA7D;AACA,QAAMS,WAAW,GAAGD,gBAAgB,GAAGL,KAAK,IAAI,OAAZ,GAAsBA,KAA1D;AAEA,SAAQ,GAAGH,KAAO,IAAIS,WAAa,IAAIF,YAAc,EAArD;AACA,CAbD;;AAeO,MAAMG,0BAA0B,GAAG,CACzCC,OADyC,EAEzCf,IAFyC,KAGrC;AACJ,0BAAOL,UAAP,4BAESK,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MAFhD,aAGWA,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MAHlD,cAIYA,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MAJnD,YAKUA,IAAI,KAAK,kBAAT,GAA8B,MAA9B,GAAuC,MALjD,kBAMgBE,0BAA0B,CAAEa,OAAO,EAAEC,GAAX,CAN1C,qBAOmBd,0BAA0B,CAAEa,OAAO,EAAEE,MAAX,CAP7C,OAQI,gBAAK;AACPC,IAAAA,UAAU,EAAEhB,0BAA0B,CAAEa,OAAO,EAAEI,IAAX;AAD/B,GAAL,GARJ,OAWI,gBAAK;AACPC,IAAAA,WAAW,EAAElB,0BAA0B,CAAEa,OAAO,EAAEd,KAAX;AADhC,GAAL,GAXJ;AAeA,CAnBM;;;;AAqBA,MAAMoB,6BAA6B,GACzCrB,IAD4C,qBAExCL,UAFwC,qCAKlCK,IAAI,KAAK,kBAAT,GAA8BsB,SAA9B,GAA0C,KALR,2hHAAtC;;;AAQA,MAAMC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAA3B;;;AAKA,MAAMC,kBAAkB,GAAG,uBAAM7B,UAAN,EAC9B,gBAAK;AAAE8B,EAAAA,UAAU,EAAE;AAAd,CAAL,GAD8B,ohHAA3B","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\n\nimport type { Border } from '../border-control/types';\nimport type { Borders } from './types';\n\nexport const borderBoxControl = css``;\n\nexport const linkedBorderControl = () => css`\n\tflex: 1;\n\t${ rtl( { marginRight: '24px' } )() }\n`;\n\nexport const wrapper = css`\n\tposition: relative;\n`;\n\nexport const borderBoxControlLinkedButton = (\n\tsize?: 'default' | '__unstable-large'\n) => {\n\treturn css`\n\t\tposition: absolute;\n\t\ttop: ${ size === '__unstable-large' ? '8px' : '3px' };\n\t\t${ rtl( { right: 0 } )() }\n\t\tline-height: 0;\n\t`;\n};\n\nconst borderBoxStyleWithFallback = ( border?: Border ) => {\n\tconst {\n\t\tcolor = COLORS.gray[ 200 ],\n\t\tstyle = 'solid',\n\t\twidth = CONFIG.borderWidth,\n\t} = border || {};\n\n\tconst clampedWidth =\n\t\twidth !== CONFIG.borderWidth ? `clamp(1px, ${ width }, 10px)` : width;\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn `${ color } ${ borderStyle } ${ clampedWidth }`;\n};\n\nexport const borderBoxControlVisualizer = (\n\tborders?: Borders,\n\tsize?: 'default' | '__unstable-large'\n) => {\n\treturn css`\n\t\tposition: absolute;\n\t\ttop: ${ size === '__unstable-large' ? '20px' : '15px' };\n\t\tright: ${ size === '__unstable-large' ? '39px' : '29px' };\n\t\tbottom: ${ size === '__unstable-large' ? '20px' : '15px' };\n\t\tleft: ${ size === '__unstable-large' ? '39px' : '29px' };\n\t\tborder-top: ${ borderBoxStyleWithFallback( borders?.top ) };\n\t\tborder-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };\n\t\t${ rtl( {\n\t\t\tborderLeft: borderBoxStyleWithFallback( borders?.left ),\n\t\t} )() }\n\t\t${ rtl( {\n\t\t\tborderRight: borderBoxStyleWithFallback( borders?.right ),\n\t\t} )() }\n\t`;\n};\n\nexport const borderBoxControlSplitControls = (\n\tsize?: 'default' | '__unstable-large'\n) => css`\n\tposition: relative;\n\tflex: 1;\n\twidth: ${ size === '__unstable-large' ? undefined : '80%' };\n`;\n\nexport const centeredBorderControl = css`\n\tgrid-column: span 2;\n\tmargin: 0 auto;\n`;\n\nexport const rightBorderControl = () => css`\n\t${ rtl( { marginLeft: 'auto' } )() }\n`;\n"]}

package/build/border-box-control/utils.js

@@ -59,8 +59,7 @@ const isCompleteBorder = border => {
 
 exports.isCompleteBorder = isCompleteBorder;
 
-const hasSplitBorders = function () {
-  let border = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+const hasSplitBorders = (border = {}) => {
   return Object.keys(border).some(side => sides.indexOf(side) !== -1);
 };
 
@@ -71,7 +70,7 @@ const hasMixedBorders = borders => {
     return false;
   }
 
-  const shorthandBorders = sides.map(side => getShorthandBorderStyle(borders === null || borders === void 0 ? void 0 : borders[side]));
+  const shorthandBorders = sides.map(side => getShorthandBorderStyle(borders?.[side]));
   return !shorthandBorders.every(border => border === shorthandBorders[0]);
 };
 
@@ -121,11 +120,9 @@ const getCommonBorder = borders => {
   const styles = [];
   const widths = [];
   sides.forEach(side => {
-    var _borders$side, _borders$side2, _borders$side3;
-
-    colors.push((_borders$side = borders[side]) === null || _borders$side === void 0 ? void 0 : _borders$side.color);
-    styles.push((_borders$side2 = borders[side]) === null || _borders$side2 === void 0 ? void 0 : _borders$side2.style);
-    widths.push((_borders$side3 = borders[side]) === null || _borders$side3 === void 0 ? void 0 : _borders$side3.width);
+    colors.push(borders[side]?.color);
+    styles.push(borders[side]?.style);
+    widths.push(borders[side]?.width);
   });
   const allColorsMatch = colors.every(value => value === colors[0]);
   const allStylesMatch = styles.every(value => value === styles[0]);

package/build/border-box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/utils.ts"],"names":["sides","borderProps","isEmptyBorder","border","some","prop","undefined","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","getMostCommonUnit","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join","values","units","filteredUnits","mode","length","maxCount","currentMode"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { parseCSSUnitValue } from '../utils/unit-values';\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : getMostCommonUnit( widths ),\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst {\n\t\tcolor: fallbackColor,\n\t\tstyle: fallbackStyle,\n\t\twidth: fallbackWidth,\n\t} = fallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n\nexport const getMostCommonUnit = (\n\tvalues: Array< string | number | undefined >\n): string | undefined => {\n\t// Collect all the CSS units.\n\tconst units = values.map( ( value ) =>\n\t\tvalue === undefined ? undefined : parseCSSUnitValue( `${ value }` )[ 1 ]\n\t);\n\n\t// Return the most common unit out of only the defined CSS units.\n\tconst filteredUnits = units.filter( ( value ) => value !== undefined );\n\treturn mode( filteredUnits as string[] );\n};\n\n/**\n * Finds the mode value out of the array passed favouring the first value\n * as a tiebreaker.\n *\n * @param values Values to determine the mode from.\n *\n * @return The mode value.\n */\nfunction mode( values: Array< string > ): string | undefined {\n\tif ( values.length === 0 ) {\n\t\treturn undefined;\n\t}\n\n\tconst map: { [ index: string ]: number } = {};\n\tlet maxCount = 0;\n\tlet currentMode;\n\n\tvalues.forEach( ( value ) => {\n\t\tmap[ value ] = map[ value ] === undefined ? 1 : map[ value ] + 1;\n\n\t\tif ( map[ value ] > maxCount ) {\n\t\t\tcurrentMode = value;\n\t\t\tmaxCount = map[ value ];\n\t\t}\n\t} );\n\n\treturn currentMode;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/utils.ts"],"names":["sides","borderProps","isEmptyBorder","border","some","prop","undefined","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","getMostCommonUnit","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join","values","units","filteredUnits","mode","length","maxCount","currentMode"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { parseCSSUnitValue } from '../utils/unit-values';\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : getMostCommonUnit( widths ),\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst {\n\t\tcolor: fallbackColor,\n\t\tstyle: fallbackStyle,\n\t\twidth: fallbackWidth,\n\t} = fallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n\nexport const getMostCommonUnit = (\n\tvalues: Array< string | number | undefined >\n): string | undefined => {\n\t// Collect all the CSS units.\n\tconst units = values.map( ( value ) =>\n\t\tvalue === undefined ? undefined : parseCSSUnitValue( `${ value }` )[ 1 ]\n\t);\n\n\t// Return the most common unit out of only the defined CSS units.\n\tconst filteredUnits = units.filter( ( value ) => value !== undefined );\n\treturn mode( filteredUnits as string[] );\n};\n\n/**\n * Finds the mode value out of the array passed favouring the first value\n * as a tiebreaker.\n *\n * @param values Values to determine the mode from.\n *\n * @return The mode value.\n */\nfunction mode( values: Array< string > ): string | undefined {\n\tif ( values.length === 0 ) {\n\t\treturn undefined;\n\t}\n\n\tconst map: { [ index: string ]: number } = {};\n\tlet maxCount = 0;\n\tlet currentMode;\n\n\tvalues.forEach( ( value ) => {\n\t\tmap[ value ] = map[ value ] === undefined ? 1 : map[ value ] + 1;\n\n\t\tif ( map[ value ] > maxCount ) {\n\t\t\tcurrentMode = value;\n\t\t\tmaxCount = map[ value ];\n\t\t}\n\t} );\n\n\treturn currentMode;\n}\n"]}

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

@@ -9,8 +9,6 @@ exports.default = exports.BorderControl = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _i18n = require("@wordpress/i18n");
 
 var _borderControlDropdown = _interopRequireDefault(require("../border-control-dropdown"));
@@ -82,11 +80,11 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     __experimentalIsRenderedInSidebar,
     ...otherProps
   } = (0, _hook.useBorderControl)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({
-    as: "fieldset"
-  }, otherProps, {
+  return (0, _element.createElement)(_view.View, {
+    as: "fieldset",
+    ...otherProps,
     ref: forwardedRef
-  }), (0, _element.createElement)(BorderLabel, {
+  }, (0, _element.createElement)(BorderLabel, {
     label: label,
     hideLabelFromVision: hideLabelFromVision
   }), (0, _element.createElement)(_hStack.HStack, {
@@ -110,7 +108,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     hideLabelFromVision: true,
     min: 0,
     onChange: onWidthChange,
-    value: (border === null || border === void 0 ? void 0 : border.width) || '',
+    value: border?.width || '',
     placeholder: placeholder,
     disableUnits: disableUnits,
     __unstableInputWidth: inputWidth,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","width","includes","undefined","BorderControl"],"mappings":"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","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, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","width","includes","undefined","BorderControl"],"mappings":"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","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, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"]}

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

@@ -27,8 +27,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Internal dependencies
  */
 const sanitizeBorder = border => {
-  const hasNoWidth = (border === null || border === void 0 ? void 0 : border.width) === undefined || border.width === '';
-  const hasNoColor = (border === null || border === void 0 ? void 0 : border.color) === undefined; // If width and color are undefined, unset any style selection as well.
+  const hasNoWidth = border?.width === undefined || border.width === '';
+  const hasNoColor = border?.color === undefined; // If width and color are undefined, unset any style selection as well.
 
   if (hasNoWidth && hasNoColor) {
     return undefined;
@@ -52,7 +52,7 @@ function useBorderControl(props) {
     __experimentalIsRenderedInSidebar = false,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'BorderControl');
-  const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border === null || border === void 0 ? void 0 : border.width);
+  const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border?.width);
   const widthUnit = originalWidthUnit || 'px';
   const hadPreviousZeroWidth = widthValue === 0;
   const [colorSelection, setColorSelection] = (0, _element.useState)();
@@ -77,8 +77,8 @@ function useBorderControl(props) {
       // 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 === null || border === void 0 ? void 0 : border.color);
-      setStyleSelection(border === null || border === void 0 ? void 0 : border.style); // Clear the color and style border properties.
+      setColorSelection(border?.color);
+      setStyleSelection(border?.style); // Clear the color and style border properties.
 
       updatedBorder.color = undefined;
       updatedBorder.style = 'none';

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

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

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

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
@@ -50,6 +48,13 @@ var _utils = require("../../color-palette/utils");
 /**
  * Internal dependencies
  */
+const getAriaLabelColorValue = colorValue => {
+  const isHex = colorValue.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+
+  const displayValue = colorValue.replace(/^var\((.+)\)$/, '$1');
+  return isHex ? displayValue.split('').join('-') : displayValue;
+};
+
 const getColorObject = (colorValue, colors) => {
   if (!colorValue || !colors) {
     return;
@@ -76,28 +81,30 @@ const getColorObject = (colorValue, colors) => {
 const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
   if (isStyleEnabled) {
     if (colorObject) {
-      return style ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, colorObject.color, style) : (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
+      return style ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
     }
 
     if (colorValue) {
-      return style ? (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', colorValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:".
-      'Border color and style picker. The currently selected color has a value of "%1$s".', colorValue);
+      const ariaLabelValue = getAriaLabelColorValue(colorValue);
+      return style ? (0, _i18n.sprintf)( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
     }
 
     return (0, _i18n.__)('Border color and style picker.');
   }
 
   if (colorObject) {
-    return (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+    return (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
   }
 
   if (colorValue) {
-    return (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:".
-    'Border color picker. The currently selected color has a value of "%1$s".', colorValue);
+    return (0, _i18n.sprintf)( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
   }
 
   return (0, _i18n.__)('Border color picker.');
@@ -132,72 +139,66 @@ const BorderControlDropdown = (props, forwardedRef) => {
   const showResetButton = color || style && style !== 'none';
   const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
 
-  const renderToggle = _ref => {
-    let {
-      onToggle
-    } = _ref;
-    return (0, _element.createElement)(_button.default, {
-      onClick: onToggle,
-      variant: "tertiary",
-      "aria-label": toggleAriaLabel,
-      tooltipPosition: dropdownPosition,
-      label: (0, _i18n.__)('Border color and style picker'),
-      showTooltip: true
-    }, (0, _element.createElement)("span", {
-      className: indicatorWrapperClassName
-    }, (0, _element.createElement)(_colorIndicator.default, {
-      className: indicatorClassName,
-      colorValue: color
-    })));
-  };
-
-  const renderContent = _ref2 => {
-    let {
-      onClose
-    } = _ref2;
-    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_dropdownContentWrapper.default, {
-      paddingSize: "medium"
-    }, (0, _element.createElement)(_vStack.VStack, {
-      className: popoverControlsClassName,
-      spacing: 6
-    }, showDropdownHeader ? (0, _element.createElement)(_hStack.HStack, null, (0, _element.createElement)(_baseControlStyles.StyledLabel, null, (0, _i18n.__)('Border color')), (0, _element.createElement)(_button.default, {
-      isSmall: true,
-      label: (0, _i18n.__)('Close border color'),
-      icon: _icons.closeSmall,
-      onClick: onClose
-    })) : undefined, (0, _element.createElement)(_colorPalette.default, {
-      className: popoverContentClassName,
-      value: color,
-      onChange: onColorChange,
-      colors,
-      disableCustomColors,
-      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-      clearable: false,
-      enableAlpha: enableAlpha
-    }), enableStyle && (0, _element.createElement)(_borderControlStylePicker.default, {
-      label: (0, _i18n.__)('Style'),
-      value: style,
-      onChange: onStyleChange
-    }))), showResetButton && (0, _element.createElement)(_dropdownContentWrapper.default, {
-      paddingSize: "none"
-    }, (0, _element.createElement)(_button.default, {
-      className: resetButtonClassName,
-      variant: "tertiary",
-      onClick: () => {
-        onReset();
-        onClose();
-      }
-    }, (0, _i18n.__)('Reset to default'))));
-  };
+  const renderToggle = ({
+    onToggle
+  }) => (0, _element.createElement)(_button.default, {
+    onClick: onToggle,
+    variant: "tertiary",
+    "aria-label": toggleAriaLabel,
+    tooltipPosition: dropdownPosition,
+    label: (0, _i18n.__)('Border color and style picker'),
+    showTooltip: true
+  }, (0, _element.createElement)("span", {
+    className: indicatorWrapperClassName
+  }, (0, _element.createElement)(_colorIndicator.default, {
+    className: indicatorClassName,
+    colorValue: color
+  })));
+
+  const renderContent = ({
+    onClose
+  }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_dropdownContentWrapper.default, {
+    paddingSize: "medium"
+  }, (0, _element.createElement)(_vStack.VStack, {
+    className: popoverControlsClassName,
+    spacing: 6
+  }, showDropdownHeader ? (0, _element.createElement)(_hStack.HStack, null, (0, _element.createElement)(_baseControlStyles.StyledLabel, null, (0, _i18n.__)('Border color')), (0, _element.createElement)(_button.default, {
+    isSmall: true,
+    label: (0, _i18n.__)('Close border color'),
+    icon: _icons.closeSmall,
+    onClick: onClose
+  })) : undefined, (0, _element.createElement)(_colorPalette.default, {
+    className: popoverContentClassName,
+    value: color,
+    onChange: onColorChange,
+    colors,
+    disableCustomColors,
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    clearable: false,
+    enableAlpha: enableAlpha
+  }), enableStyle && (0, _element.createElement)(_borderControlStylePicker.default, {
+    label: (0, _i18n.__)('Style'),
+    value: style,
+    onChange: onStyleChange
+  }))), showResetButton && (0, _element.createElement)(_dropdownContentWrapper.default, {
+    paddingSize: "none"
+  }, (0, _element.createElement)(_button.default, {
+    className: resetButtonClassName,
+    variant: "tertiary",
+    onClick: () => {
+      onReset();
+      onClose();
+    }
+  }, (0, _i18n.__)('Reset to default'))));
 
-  return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
+  return (0, _element.createElement)(_dropdown.default, {
     renderToggle: renderToggle,
     renderContent: renderContent,
     popoverProps: { ...__unstablePopoverProps
-    }
-  }, otherProps, {
+    },
+    ...otherProps,
     ref: forwardedRef
-  }));
+  });
 };
 
 const ConnectedBorderControlDropdown = (0, _context.contextConnect)(BorderControlDropdown, 'BorderControlDropdown');

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

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