npm - @wordpress/components - Versions diffs - 25.1.0 → 25.1.2 - Mend

@wordpress/components 25.1.0 → 25.1.2

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

Files changed (1049) hide show

package/build-module/circular-option-picker/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 /**
@@ -24,17 +23,19 @@ export function Option({
   tooltipText,
   ...additionalProps
 }) {
-  const optionButton = createElement(Button, _extends({
+  const optionButton = createElement(Button, {
     isPressed: isSelected,
-    className: "components-circular-option-picker__option"
-  }, additionalProps));
+    className: "components-circular-option-picker__option",
+    ...additionalProps
+  });
   return createElement("div", {
     className: classnames(className, 'components-circular-option-picker__option-wrapper')
   }, tooltipText ? createElement(Tooltip, {
     text: tooltipText
-  }, optionButton) : optionButton, isSelected && createElement(Icon, _extends({
-    icon: check
-  }, selectedIconProps ? selectedIconProps : {})));
+  }, optionButton) : optionButton, isSelected && createElement(Icon, {
+    icon: check,
+    ...(selectedIconProps ? selectedIconProps : {})
+  }));
 }
 export function DropdownLinkAction({
   buttonProps,
@@ -42,28 +43,31 @@ export function DropdownLinkAction({
   dropdownProps,
   linkText
 }) {
-  return createElement(Dropdown, _extends({
+  return createElement(Dropdown, {
     className: classnames('components-circular-option-picker__dropdown-link-action', className),
     renderToggle: ({
       isOpen,
       onToggle
-    }) => createElement(Button, _extends({
+    }) => createElement(Button, {
       "aria-expanded": isOpen,
       "aria-haspopup": "true",
       onClick: onToggle,
-      variant: "link"
-    }, buttonProps), linkText)
-  }, dropdownProps));
+      variant: "link",
+      ...buttonProps
+    }, linkText),
+    ...dropdownProps
+  });
 }
 export function ButtonAction({
   className,
   children,
   ...additionalProps
 }) {
-  return createElement(Button, _extends({
+  return createElement(Button, {
     className: classnames('components-circular-option-picker__clear', className),
-    variant: "tertiary"
-  }, additionalProps), children);
+    variant: "tertiary",
+    ...additionalProps
+  }, children);
 }
 /**
  *`CircularOptionPicker` is a component that displays a set of options as circular buttons.

package/build-module/circular-option-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"names":["classnames","Icon","check","Button","Dropdown","Tooltip","Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","props","actions","options"],"mappings":"~~;;;~~AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;AASA,OAAO,SAASC,MAAT,CAAiB;AACvBC,EAAAA,SADuB;AAEvBC,EAAAA,UAFuB;AAGvBC,EAAAA,iBAHuB;AAIvBC,EAAAA,WAJuB;AAKvB,KAAGC;AALoB,CAAjB,EAMU;AAChB,QAAMC,YAAY,GACjB,cAAC,MAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;~~AAFX~~,~~KAGMG~~,~~eAHN,EADD~~;AAOA,SACC;AACC,IAAA,SAAS,EAAGX,UAAU,CACrBO,SADqB,EAErB,mDAFqB;AADvB,KAMGG,WAAW,GACZ,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,cAAC,IAAD;AACC,IAAA,IAAI,EAAGN;~~AADR~~,~~KAEQO~~,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,~~EAZF~~,CADD;AAoBA;AAED,OAAO,SAASI,kBAAT,CAA6B;AACnCC,EAAAA,WADmC;AAEnCP,EAAAA,SAFmC;AAGnCQ,EAAAA,aAHmC;AAInCC,EAAAA;AAJmC,CAA7B,EAKsB;AAC5B,SACC,cAAC,QAAD;AACC,IAAA,SAAS,EAAGhB,UAAU,CACrB,yDADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,YAAY,EAAG,CAAE;AAAEU,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KACd,cAAC,MAAD;AACC,uBAAgBD,MADjB;AAEC,uBAAc,MAFf;AAGC,MAAA,OAAO,EAAGC,QAHX;AAIC,MAAA,OAAO,EAAC;~~AAJT~~,~~OAKMJ~~,~~WALN~~,~~GAOGE~~,~~QAPH~~;~~AANF~~,~~KAgBMD~~,~~aAhBN,EADD~~;AAoBA;AAED,OAAO,SAASI,YAAT,CAAuB;AAC7BZ,EAAAA,SAD6B;AAE7Ba,EAAAA,QAF6B;AAG7B,KAAGT;AAH0B,CAAvB,EAI8D;AACpE,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAGX,UAAU,CACrB,0CADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,OAAO,EAAC;~~AALT~~,~~KAMMI~~,~~eANN~~,~~GAQGS,~~QARH,CADD;AAYA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASC,oBAAT,CAA+BC,KAA/B,EAAkE;AACjE,QAAM;AAAEC,IAAAA,OAAF;AAAWhB,IAAAA,SAAX;AAAsBiB,IAAAA,OAAtB;AAA+BJ,IAAAA;AAA/B,MAA4CE,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAGtB,UAAU,CACrB,mCADqB,EAErBO,SAFqB;AADvB,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGiB,OADH,CAND,EASGJ,QATH,EAUGG,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDF,oBAAoB,CAACf,MAArB,GAA8BA,MAA9B;AACAe,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C;AAEA,eAAeQ,oBAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { Icon, check } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\nimport type {\n\tCircularOptionPickerProps,\n\tDropdownLinkActionProps,\n\tOptionProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\n/\n `CircularOptionPicker` is a component that displays a set of options as circular buttons.\n \n ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n \n const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"names":["classnames","Icon","check","Button","Dropdown","Tooltip","Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","props","actions","options"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;AASA,OAAO,SAASC,MAAT,CAAiB;AACvBC,EAAAA,SADuB;AAEvBC,EAAAA,UAFuB;AAGvBC,EAAAA,iBAHuB;AAIvBC,EAAAA,WAJuB;AAKvB,KAAGC;AALoB,CAAjB,EAMU;AAChB,QAAMC,YAAY,GACjB,cAAC,MAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC,2CAFX;AAAA,OAGMG;AAHN,IADD;AAOA,SACC;AACC,IAAA,SAAS,EAAGX,UAAU,CACrBO,SADqB,EAErB,mDAFqB;AADvB,KAMGG,WAAW,GACZ,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,cAAC,IAAD;AACC,IAAA,IAAI,EAAGN,KADR;AAAA,QAEQO,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD;AAAA,IAZF,CADD;AAoBA;AAED,OAAO,SAASI,kBAAT,CAA6B;AACnCC,EAAAA,WADmC;AAEnCP,EAAAA,SAFmC;AAGnCQ,EAAAA,aAHmC;AAInCC,EAAAA;AAJmC,CAA7B,EAKsB;AAC5B,SACC,cAAC,QAAD;AACC,IAAA,SAAS,EAAGhB,UAAU,CACrB,yDADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,YAAY,EAAG,CAAE;AAAEU,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KACd,cAAC,MAAD;AACC,uBAAgBD,MADjB;AAEC,uBAAc,MAFf;AAGC,MAAA,OAAO,EAAGC,QAHX;AAIC,MAAA,OAAO,EAAC,MAJT;AAAA,SAKMJ;AALN,OAOGE,QAPH,CANF;AAAA,OAgBMD;AAhBN,IADD;AAoBA;AAED,OAAO,SAASI,YAAT,CAAuB;AAC7BZ,EAAAA,SAD6B;AAE7Ba,EAAAA,QAF6B;AAG7B,KAAGT;AAH0B,CAAvB,EAI8D;AACpE,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAGX,UAAU,CACrB,0CADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,OAAO,EAAC,UALT;AAAA,OAMMI;AANN,KAQGS,QARH,CADD;AAYA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASC,oBAAT,CAA+BC,KAA/B,EAAkE;AACjE,QAAM;AAAEC,IAAAA,OAAF;AAAWhB,IAAAA,SAAX;AAAsBiB,IAAAA,OAAtB;AAA+BJ,IAAAA;AAA/B,MAA4CE,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAGtB,UAAU,CACrB,mCADqB,EAErBO,SAFqB;AADvB,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGiB,OADH,CAND,EASGJ,QATH,EAUGG,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDF,oBAAoB,CAACf,MAArB,GAA8BA,MAA9B;AACAe,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C;AAEA,eAAeQ,oBAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { Icon, check } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\nimport type {\n\tCircularOptionPickerProps,\n\tDropdownLinkActionProps,\n\tOptionProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\n/\n `CircularOptionPicker` is a component that displays a set of options as circular buttons.\n \n ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n \n const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"]}

package/build-module/clipboard-button/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 /**
@@ -18,15 +17,6 @@ import deprecated from '@wordpress/deprecated';
 import Button from '../button';
 const TIMEOUT = 4000;
-/**
- * @param {Object}                    props
- * @param {string}                    [props.className]
- * @param {import('react').ReactNode} props.children
- * @param {() => void}                props.onCopy
- * @param {() => void}                [props.onFinishCopy]
- * @param {string}                    props.text
- */
 export default function ClipboardButton({
   className,
   children,
@@ -39,21 +29,22 @@ export default function ClipboardButton({
     since: '5.8',
     alternative: 'wp.compose.useCopyToClipboard'
   });
-  /** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
   const timeoutId = useRef();
   const ref = useCopyToClipboard(text, () => {
-    onCopy(); // @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
+    onCopy();
-    clearTimeout(timeoutId.current);
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
     if (onFinishCopy) {
       timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
     }
   });
   useEffect(() => {
-    // @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-    clearTimeout(timeoutId.current);
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
   }, []);
   const classes = classnames('components-clipboard-button', className); // Workaround for inconsistent behavior in Safari, where <textarea> is not
   // the document.activeElement at the moment when the copy event fires.
@@ -61,17 +52,15 @@ export default function ClipboardButton({
   // mistakenly override the ClipboardButton, and copy a serialized string
   // of the current block instead.
-  /** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
   const focusOnCopyEventTarget = event => {
     // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
     event.target.focus();
   };
-  return createElement(Button, _extends({}, buttonProps, {
+  return createElement(Button, { ...buttonProps,
     className: classes,
     ref: ref,
     onCopy: focusOnCopyEventTarget
-  }), children);
+  }, children);
 }
 //# sourceMappingURL=index.js.map

package/build-module/clipboard-button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","~~clearTimeout~~","~~current~~","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":"~~;;;~~AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;~~AAEA~~,MAAMC,OAAO,GAAG,IAAhB;AAEA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA~~,eAAe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,SADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA,MAHwC;AAIxCC,EAAAA,YAJwC;AAKxCC,EAAAA,IALwC;AAMxC,KAAGC;AANqC,CAA1B,~~EAOX~~;~~AACHT~~,EAAAA,UAAU,CAAE,+BAAF,EAAmC;AAC5CU,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAAnC,CAAV;AAKA~~;;AACA~~,QAAMC,SAAS,GAAGf,MAAM,EAAxB;AACA,QAAMgB,GAAG,GAAGd,kBAAkB,CAAES,IAAF,EAAQ,MAAM;AAC3CF,IAAAA,MAAM,~~GADqC~~,~~CAE3C;;AACAQ~~,~~IAAAA~~,YAAY,~~CAAEF~~,SAAS,~~CAACG~~,OAAZ,CAAZ;;~~AAEA~~,~~QAAKR~~,YAAL,EAAoB;AACnBK,MAAAA,SAAS,~~CAACG~~,OAAV,~~GAAoBC~~,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,~~GAR6B~~,CAA9B;~~AAUAJ~~,EAAAA,SAAS,CAAE,MAAM;AAChB;~~AACAgB~~,~~IAAAA~~,YAAY,~~CAAEF~~,SAAS,~~CAACG~~,OAAZ,CAAZ;AACA,~~GAHQ~~,~~EAGN~~,~~EAHM~~,CAAT;~~AAKA~~,~~QAAME~~,OAAO,GAAGrB,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC,CAA1B,~~CAvBG~~,~~CAyBH~~;AACA;AACA;AACA;AACA;;AACA~~;;AACA~~,QAAMc,~~sBAAsB~~,GAAKC,KAAF,IAAa;~~AAC3C~~;AACAA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAHD;;AAKA,SACC,cAAC,MAAD,~~eACMZ~~,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,~~MAMGb~~,QANH,CADD;AAUA","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\~~n\nconst~~ ~~TIMEOUT~~ ~~= 4000;\n\n/\n @param~~ {~~Object} props\n~~ * ~~@param {string~~} ~~[props.className]\n~~ * ~~@param {import(~~'~~react~~'~~).ReactNode}~~ ~~props.children\n~~ * @param {() => ~~void~~} ~~props.onCopy\n~~ * ~~@param~~ ~~{()~~ => ~~void} [props.onFinishCopy]\~~n * @param {string} props.text\~~n /\~~nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\~~t/* @type {import('react').MutableRefObject<ReturnType<setTimeout> \| undefined>} /\n\~~tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\~~t//~~ ~~@ts-expect-error:~~ ~~Should check if~~ .current is ~~defined, but not changing because this component is deprecated.\~~n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\~~t//~~ ~~@ts-expect-error:~~ ~~Should check if~~ .current is ~~defined, but not changing because this component is deprecated.\~~n\t\tclearTimeout( timeoutId.current );\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\t/* ~~@type~~ ~~{import('react')~~.ClipboardEventHandler~~<HTMLButtonElement>}~~ */\n\tconst focusOnCopyEventTarget = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","current","clearTimeout","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAIA,MAAMC,OAAO,GAAG,IAAhB;AAEA,eAAe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,SADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA,MAHwC;AAIxCC,EAAAA,YAJwC;AAKxCC,EAAAA,IALwC;AAMxC,KAAGC;AANqC,CAA1B,EAOuD;AACrET,EAAAA,UAAU,CAAE,+BAAF,EAAmC;AAC5CU,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAAnC,CAAV;AAKA,QAAMC,SAAS,GAAGf,MAAM,EAAxB;AACA,QAAMgB,GAAG,GAAGd,kBAAkB,CAAES,IAAF,EAAQ,MAAM;AAC3CF,IAAAA,MAAM;;AACN,QAAKM,SAAS,CAACE,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEH,SAAS,CAACE,OAAZ,CAAZ;AACA;;AAED,QAAKP,YAAL,EAAoB;AACnBK,MAAAA,SAAS,CAACE,OAAV,GAAoBE,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAT6B,CAA9B;AAWAJ,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKc,SAAS,CAACE,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEH,SAAS,CAACE,OAAZ,CAAZ;AACA;AACD,GAJQ,EAIN,EAJM,CAAT;AAMA,QAAMG,OAAO,GAAGrB,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC,CAA1B,CAxBqE,CA0BrE;AACA;AACA;AACA;AACA;;AACA,QAAMc,sBAAmD,GAAKC,KAAF,IAAa;AACxE;AACAA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAHD;;AAKA,SACC,cAAC,MAAD,OACMZ,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,KAMGb,QANH,CADD;AAUA","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"]}

package/build-module/clipboard-button/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=types.js.map

package/build-module/clipboard-button/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-module/color-control/index.native.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 /**
@@ -13,12 +12,13 @@ function ColorControl({
   withColorIndicator,
   ...props
 }) {
-  return createElement(ColorCell, _extends({
+  return createElement(ColorCell, {
     label: label,
     onPress: onPress,
     color: color,
-    withColorIndicator: withColorIndicator
-  }, props));
+    withColorIndicator: withColorIndicator,
+    ...props
+  });
 }
 export default ColorControl;

package/build-module/color-control/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-control/index.native.js"],"names":["ColorCell","ColorControl","label","onPress","color","withColorIndicator","props"],"mappings":"~~;;;~~AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,mCAAtB;;AAEA,SAASC,YAAT,CAAuB;AACtBC,EAAAA,KADsB;AAEtBC,EAAAA,OAFsB;AAGtBC,EAAAA,KAHsB;AAItBC,EAAAA,kBAJsB;AAKtB,KAAGC;AALmB,CAAvB,EAMI;AACH,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,kBAAkB,EAAGC;~~AAJtB~~,~~KAKMC~~,~~KALN,EADD~~;AASA;;AAED,eAAeL,YAAf","sourcesContent":["/*\n Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-control/index.native.js"],"names":["ColorCell","ColorControl","label","onPress","color","withColorIndicator","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,mCAAtB;;AAEA,SAASC,YAAT,CAAuB;AACtBC,EAAAA,KADsB;AAEtBC,EAAAA,OAFsB;AAGtBC,EAAAA,KAHsB;AAItBC,EAAAA,kBAJsB;AAKtB,KAAGC;AALmB,CAAvB,EAMI;AACH,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,kBAAkB,EAAGC,kBAJtB;AAAA,OAKMC;AALN,IADD;AASA;;AAED,eAAeL,YAAf","sourcesContent":["/*\n Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"]}

package/build-module/color-indicator/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 /**
@@ -20,13 +19,14 @@ function UnforwardedColorIndicator(props, forwardedRef) {
     colorValue,
     ...additionalProps
   } = props;
-  return createElement("span", _extends({
+  return createElement("span", {
     className: classnames('component-color-indicator', className),
     style: {
       background: colorValue
     },
-    ref: forwardedRef
-  }, additionalProps));
+    ref: forwardedRef,
+    ...additionalProps
+  });
 }
 /**
  * ColorIndicator is a React component that renders a specific color in a

package/build-module/color-indicator/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-indicator/index.tsx"],"names":["classnames","forwardRef","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","background","ColorIndicator"],"mappings":"~~;;;~~AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AAIA,SAASC,yBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,MAAgDJ,KAAtD;AAEA,SACC;AACC,IAAA,SAAS,EAAGH,UAAU,CAAE,2BAAF,EAA+BK,SAA/B,CADvB;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd,KAFT;AAGC,IAAA,GAAG,EAAGF;~~AAHP~~,~~KAIMG~~,~~eAJN,EADD~~;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,cAAc,GAAGR,UAAU,CAAEC,yBAAF,CAAjC;AAEP,eAAeO,cAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/\n ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n \n ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n \n const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-indicator/index.tsx"],"names":["classnames","forwardRef","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","background","ColorIndicator"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AAIA,SAASC,yBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,MAAgDJ,KAAtD;AAEA,SACC;AACC,IAAA,SAAS,EAAGH,UAAU,CAAE,2BAAF,EAA+BK,SAA/B,CADvB;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd,KAFT;AAGC,IAAA,GAAG,EAAGF,YAHP;AAAA,OAIMG;AAJN,IADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,cAAc,GAAGR,UAAU,CAAEC,yBAAF,CAAjC;AAEP,eAAeO,cAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/\n ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n \n ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n \n const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"]}

package/build-module/color-palette/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 /**
@@ -123,10 +122,11 @@ export function CustomColorPickerDropdown({
     }),
     ...receivedPopoverProps
   }), [isRenderedInSidebar, receivedPopoverProps]);
-  return createElement(Dropdown, _extends({
+  return createElement(Dropdown, {
     contentClassName: "components-color-palette__custom-color-dropdown-content",
-    popoverProps: popoverProps
-  }, props));
+    popoverProps: popoverProps,
+    ...props
+  });
 }
 function UnforwardedColorPalette(props, forwardedRef) {
@@ -172,10 +172,11 @@ function UnforwardedColorPalette(props, forwardedRef) {
     }, __('Clear')),
     headingLevel
   };
-  return createElement(VStack, _extends({
+  return createElement(VStack, {
     spacing: 3,
-    ref: forwardedRef
-  }, otherProps), !disableCustomColors && createElement(CustomColorPickerDropdown, {
+    ref: forwardedRef,
+    ...otherProps
+  }, !disableCustomColors && createElement(CustomColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
     renderToggle: ({
@@ -204,11 +205,11 @@ function UnforwardedColorPalette(props, forwardedRef) {
         'components-color-palette__custom-color-value--is-hex': isHex
       })
     }, displayValue)))
-  }), hasMultipleColorOrigins ? createElement(MultiplePalettes, _extends({}, paletteCommonProps, {
+  }), hasMultipleColorOrigins ? createElement(MultiplePalettes, { ...paletteCommonProps,
     colors: colors
-  })) : createElement(SinglePalette, _extends({}, paletteCommonProps, {
+  }) : createElement(SinglePalette, { ...paletteCommonProps,
     colors: colors
-  })));
+  }));
 }
 /**
  * Allows the user to pick a color from a list of pre-defined color entries.

package/build-module/color-palette/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","headingLevel","length","colorPalette","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","split","join","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname \|\|\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t...otherProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement \| null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\$(.+)\$$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\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__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tisHex ? displayValue.split( '' ).join( '-' ) : displayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/\n Allows the user to pick a color from a list of pre-defined color entries.\n \n ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","headingLevel","length","colorPalette","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","split","join","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname \|\|\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t...otherProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement \| null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\$(.+)\$$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\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__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tisHex ? displayValue.split( '' ).join( '-' ) : displayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/\n Allows the user to pick a color from a list of pre-defined color entries.\n \n ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"]}

package/build-module/color-picker/color-input.js CHANGED Viewed

@@ -20,14 +20,17 @@ export const ColorInput = ({
   switch (colorType) {
     case 'hsl':
-      return createElement(HslInput, props);
+      return createElement(HslInput, { ...props
+      });
     case 'rgb':
-      return createElement(RgbInput, props);
+      return createElement(RgbInput, { ...props
+      });
     default:
     case 'hex':
-      return createElement(HexInput, props);
+      return createElement(HexInput, { ...props
+      });
   }
 };
 //# sourceMappingURL=color-input.js.map

package/build-module/color-picker/color-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["RgbInput","HslInput","HexInput","ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AAGA,OAAO,MAAMC,UAAU,GAAG,CAAE;AAC3BC,EAAAA,SAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA;AAJ2B,CAAF,KAKF;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,~~EAAeI~~,~~KAAf,CAAP~~;;AACD,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,~~EAAeA~~,~~KAAf,CAAP~~;;AACD;AACA,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,~~EAAeA~~,~~KAAf,CAAP~~;AAPF;AASA,CAhBM","sourcesContent":["/*\n Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport type { ColorInputProps } from './types';\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["RgbInput","HslInput","HexInput","ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AAGA,OAAO,MAAMC,UAAU,GAAG,CAAE;AAC3BC,EAAAA,SAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA;AAJ2B,CAAF,KAKF;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,OAAeI;AAAf,QAAP;;AACD,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,OAAeA;AAAf,QAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,OAAeA;AAAf,QAAP;AAPF;AASA,CAhBM","sourcesContent":["/*\n Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport type { ColorInputProps } from './types';\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}

package/build-module/color-picker/component.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 /**
@@ -58,9 +57,10 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     debouncedSetColor(nextValue.toHex());
   }, [debouncedSetColor]);
   const [colorType, setColorType] = useState(copyFormat || 'hex');
-  return createElement(ColorfulWrapper, _extends({
-    ref: forwardedRef
-  }, divProps), createElement(Picker, {
+  return createElement(ColorfulWrapper, {
+    ref: forwardedRef,
+    ...divProps
+  }, createElement(Picker, {
     onChange: handleChange,
     color: safeColordColor,
     enableAlpha: enableAlpha

package/build-module/color-picker/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ColorPicker"],"mappings":"~~;;;~~AAAA;AACA;AACA;AAEA,SAASA,MAAT,EAAiBC,MAAjB,QAAuC,QAAvC;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,QAAtB,EAAgCC,OAAhC,QAA+C,oBAA/C;AACA,SAASC,WAAT,QAA4B,oBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,EAA2BC,cAA3B,QAAiD,eAAjD;AACA,SACCC,eADD,EAECC,aAFD,EAGCC,6BAHD,EAICC,kCAJD,EAKCC,iBALD,QAMO,UANP;AAOA,SAASC,eAAT,QAAgC,qBAAhC;AACA,SAASC,UAAT,QAA2B,eAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,kBAAT,QAAmC,gBAAnC;AAIAjB,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAEA,MAAMiB,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,sBAAsB,GAAG,CAC9BC,KAD8B,EAE9BC,YAF8B,KAG1B;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOFvB,gBAAgB,CAAEe,KAAF,EAAS,aAAT,CAPpB,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsBd,kBAAkB,CAAE;AAC/CU,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAAF,CAA9C;AAMA,QAAMI,eAAe,GAAG5B,OAAO,CAAE,MAAM;AACtC,WAAOL,MAAM,CAAE0B,KAAK,IAAI,EAAX,CAAb;AACA,GAF8B,EAE5B,CAAEA,KAAF,CAF4B,CAA/B;AAIA,QAAMQ,iBAAiB,GAAG5B,WAAW,CAAE0B,QAAF,CAArC;AAEA,QAAMG,YAAY,GAAGhC,WAAW,CAC7BiC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAH8B,EAI/B,CAAEH,iBAAF,CAJ+B,CAAhC;AAOA,QAAM,CAAEI,SAAF,EAAaC,YAAb,IAA8BnC,QAAQ,CAC3C0B,UAAU,IAAI,KAD6B,CAA5C;AAIA,SACC,cAAC,eAAD;AAAiB,IAAA,GAAG,EAAGN;~~AAAvB~~,~~KAA2CO~~,~~QAA3C~~,~~GACC,~~cAAC,MAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,cAAC,6BAAD,QACC,cAAC,kCAAD;AAAoC,IAAA,OAAO,EAAC;AAA5C,KACC,cAAC,aAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,OAAO,EAAGN,OAFX;AAGC,IAAA,KAAK,EAAGmB,SAHT;AAIC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CALd;AAOC,IAAA,KAAK,EAAGjC,EAAE,CAAE,cAAF,CAPX;AAQC,IAAA,mBAAmB;AARpB,IADD,EAWC,cAAC,eAAD;AACC,IAAA,KAAK,EAAG0B,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIQ;AAF3B,IAXD,CADD,EAiBC,cAAC,iBAAD;AAAmB,IAAA,SAAS,EAAC,QAA7B;AAAsC,IAAA,GAAG,EAAG;AAA5C,KACC,cAAC,UAAD;AACC,IAAA,SAAS,EAAGA,SADb;AAEC,IAAA,KAAK,EAAGL,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IADD,CAjBD,CAND,CADD;AAmCA,CAxED;;AA0EA,OAAO,MAAMgB,WAAW,GAAGhC,cAAc,CACxCa,sBADwC,EAExC,aAFwC,CAAlC;AAKP,eAAemB,WAAf","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../ui/context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color \|\| '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat \|\| 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat \|\| colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ColorPicker"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../ui/context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color \|\| '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat \|\| 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat \|\| colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"]}

package/build-module/color-picker/legacy-adapter.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { createElement } from "@wordpress/element";
 import ColorPicker from './component';
 import { useDeprecatedProps } from './use-deprecated-props';
 export const LegacyAdapter = props => {
-  return createElement(ColorPicker, useDeprecatedProps(props));
+  return createElement(ColorPicker, { ...useDeprecatedProps(props)
+  });
 };
 //# sourceMappingURL=legacy-adapter.js.map

package/build-module/color-picker/legacy-adapter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"names":["ColorPicker","useDeprecatedProps","LegacyAdapter","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,WAAP,MAAwB,aAAxB;AAEA,SAASC,kBAAT,QAAmC,wBAAnC;AAEA,OAAO,MAAMC,aAAa,GAAKC,KAAF,IAAiC;AAC7D,SAAO,cAAC,WAAD,~~EAAkBF~~,kBAAkB,CAAEE,KAAF,~~CAApC,CAAP~~;AACA,CAFM","sourcesContent":["/*\n Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"names":["ColorPicker","useDeprecatedProps","LegacyAdapter","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,WAAP,MAAwB,aAAxB;AAEA,SAASC,kBAAT,QAAmC,wBAAnC;AAEA,OAAO,MAAMC,aAAa,GAAKC,KAAF,IAAiC;AAC7D,SAAO,cAAC,WAAD,OAAkBF,kBAAkB,CAAEE,KAAF;AAApC,IAAP;AACA,CAFM","sourcesContent":["/*\n Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"]}

package/build-module/confirm-dialog/component.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 /**
@@ -9,7 +8,7 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -35,6 +34,8 @@ function ConfirmDialog(props, forwardedRef) {
   } = useContextSystem(props, 'ConfirmDialog');
   const cx = useCx();
   const wrapperClassName = cx(styles.wrapper);
+  const cancelButtonRef = useRef();
+  const confirmButtonRef = useRef();
   const [isOpen, setIsOpen] = useState();
   const [shouldSelfClose, setShouldSelfClose] = useState();
   useEffect(() => {
@@ -54,29 +55,36 @@ function ConfirmDialog(props, forwardedRef) {
     }
   }, [shouldSelfClose, setIsOpen]);
   const handleEnter = useCallback(event => {
-    if (event.key === 'Enter') {
+    // Avoid triggering the 'confirm' action when a button is focused,
+    // as this can cause a double submission.
+    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;
+    if (!isConfirmOrCancelButton && event.key === 'Enter') {
       handleEvent(onConfirm)(event);
     }
   }, [handleEvent, onConfirm]);
   const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : __('Cancel');
   const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : __('OK');
-  return createElement(Fragment, null, isOpen && createElement(Modal, _extends({
+  return createElement(Fragment, null, isOpen && createElement(Modal, {
     onRequestClose: handleEvent(onCancel),
     onKeyDown: handleEnter,
     closeButtonLabel: cancelLabel,
     isDismissible: true,
     ref: forwardedRef,
     overlayClassName: wrapperClassName,
-    __experimentalHideHeader: true
-  }, otherProps), createElement(VStack, {
+    __experimentalHideHeader: true,
+    ...otherProps
+  }, createElement(VStack, {
     spacing: 8
   }, createElement(Text, null, children), createElement(Flex, {
     direction: "row",
     justify: "flex-end"
   }, createElement(Button, {
+    ref: cancelButtonRef,
     variant: "tertiary",
     onClick: handleEvent(onCancel)
   }, cancelLabel), createElement(Button, {
+    ref: confirmButtonRef,
     variant: "primary",
     onClick: handleEvent(onConfirm)
   }, confirmLabel)))));