@wordpress/components 18.0.0 → 19.0.3

package/build/circular-option-picker/index.js

@@ -32,13 +32,14 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
 /**
  * Internal dependencies
  */
-function Option({
-  className,
-  isSelected,
-  selectedIconProps,
-  tooltipText,
-  ...additionalProps
-}) {
+function Option(_ref) {
+  let {
+    className,
+    isSelected,
+    selectedIconProps,
+    tooltipText,
+    ...additionalProps
+  } = _ref;
   const optionButton = (0, _element.createElement)(_button.default, (0, _extends2.default)({
     isPressed: isSelected,
     className: (0, _classnames.default)(className, 'components-circular-option-picker__option')
@@ -52,31 +53,36 @@ function Option({
   }, selectedIconProps ? selectedIconProps : {})));
 }
 
-function DropdownLinkAction({
-  buttonProps,
-  className,
-  dropdownProps,
-  linkText
-}) {
+function DropdownLinkAction(_ref2) {
+  let {
+    buttonProps,
+    className,
+    dropdownProps,
+    linkText
+  } = _ref2;
   return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
     className: (0, _classnames.default)('components-circular-option-picker__dropdown-link-action', className),
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => (0, _element.createElement)(_button.default, (0, _extends2.default)({
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: onToggle,
-      variant: "link"
-    }, buttonProps), linkText)
+    renderToggle: _ref3 => {
+      let {
+        isOpen,
+        onToggle
+      } = _ref3;
+      return (0, _element.createElement)(_button.default, (0, _extends2.default)({
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        onClick: onToggle,
+        variant: "link"
+      }, buttonProps), linkText);
+    }
   }, dropdownProps));
 }
 
-function ButtonAction({
-  className,
-  children,
-  ...additionalProps
-}) {
+function ButtonAction(_ref4) {
+  let {
+    className,
+    children,
+    ...additionalProps
+  } = _ref4;
   return (0, _element.createElement)(_button.default, (0, _extends2.default)({
     className: (0, _classnames.default)('components-circular-option-picker__clear', className),
     isSmall: true,
@@ -84,12 +90,13 @@ function ButtonAction({
   }, additionalProps), children);
 }
 
-function CircularOptionPicker({
-  actions,
-  className,
-  options,
-  children
-}) {
+function CircularOptionPicker(_ref5) {
+  let {
+    actions,
+    className,
+    options,
+    children
+  } = _ref5;
   return (0, _element.createElement)("div", {
     className: (0, _classnames.default)('components-circular-option-picker', className)
   }, (0, _element.createElement)("div", {

package/build/circular-option-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,MAAT,CAAiB;AAChBC,EAAAA,SADgB;AAEhBC,EAAAA,UAFgB;AAGhBC,EAAAA,iBAHgB;AAIhBC,EAAAA,WAJgB;AAKhB,KAAGC;AALa,CAAjB,EAMI;AACH,QAAMC,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAG,yBACXD,SADW,EAEX,2CAFW;AAFb,KAMMI,eANN,EADD;AAUA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YAJF,EAMGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK;AADR,KAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAPF,CADD;AAeA;;AAED,SAASK,kBAAT,CAA6B;AAC5BC,EAAAA,WAD4B;AAE5BR,EAAAA,SAF4B;AAG5BS,EAAAA,aAH4B;AAI5BC,EAAAA;AAJ4B,CAA7B,EAKI;AACH,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXV,SAFW,CADb;AAKC,IAAA,YAAY,EAAG,CAAE;AAAEW,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KACd,4BAAC,eAAD;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,SAASI,YAAT,CAAuB;AAAEb,EAAAA,SAAF;AAAac,EAAAA,QAAb;AAAuB,KAAGV;AAA1B,CAAvB,EAAqE;AACpE,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXJ,SAFW,CADb;AAKC,IAAA,OAAO,MALR;AAMC,IAAA,OAAO,EAAC;AANT,KAOMI,eAPN,GASGU,QATH,CADD;AAaA;;AAEc,SAASC,oBAAT,CAA+B;AAC7CC,EAAAA,OAD6C;AAE7ChB,EAAAA,SAF6C;AAG7CiB,EAAAA,OAH6C;AAI7CH,EAAAA;AAJ6C,CAA/B,EAKX;AACH,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXd,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGiB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDD,oBAAoB,CAAChB,MAArB,GAA8BA,MAA9B;AACAgB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","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';\n\nfunction Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n} ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option'\n\t\t\t) }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div className=\"components-circular-option-picker__option-wrapper\">\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\nfunction DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n} ) {\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\nfunction ButtonAction( { className, children, ...additionalProps } ) {\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\tisSmall\n\t\t\tvariant=\"secondary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function CircularOptionPicker( {\n\tactions,\n\tclassName,\n\toptions,\n\tchildren,\n} ) {\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"]}
+{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,MAAT,OAMI;AAAA,MANa;AAChBC,IAAAA,SADgB;AAEhBC,IAAAA,UAFgB;AAGhBC,IAAAA,iBAHgB;AAIhBC,IAAAA,WAJgB;AAKhB,OAAGC;AALa,GAMb;AACH,QAAMC,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAG,yBACXD,SADW,EAEX,2CAFW;AAFb,KAMMI,eANN,EADD;AAUA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YAJF,EAMGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK;AADR,KAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAPF,CADD;AAeA;;AAED,SAASK,kBAAT,QAKI;AAAA,MALyB;AAC5BC,IAAAA,WAD4B;AAE5BR,IAAAA,SAF4B;AAG5BS,IAAAA,aAH4B;AAI5BC,IAAAA;AAJ4B,GAKzB;AACH,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXV,SAFW,CADb;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEW,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,eAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAED,SAASI,YAAT,QAAqE;AAAA,MAA9C;AAAEb,IAAAA,SAAF;AAAac,IAAAA,QAAb;AAAuB,OAAGV;AAA1B,GAA8C;AACpE,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXJ,SAFW,CADb;AAKC,IAAA,OAAO,MALR;AAMC,IAAA,OAAO,EAAC;AANT,KAOMI,eAPN,GASGU,QATH,CADD;AAaA;;AAEc,SAASC,oBAAT,QAKX;AAAA,MAL0C;AAC7CC,IAAAA,OAD6C;AAE7ChB,IAAAA,SAF6C;AAG7CiB,IAAAA,OAH6C;AAI7CH,IAAAA;AAJ6C,GAK1C;AACH,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXd,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGiB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDD,oBAAoB,CAAChB,MAArB,GAA8BA,MAA9B;AACAgB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","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';\n\nfunction Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n} ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option'\n\t\t\t) }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div className=\"components-circular-option-picker__option-wrapper\">\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\nfunction DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n} ) {\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\nfunction ButtonAction( { className, children, ...additionalProps } ) {\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\tisSmall\n\t\t\tvariant=\"secondary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function CircularOptionPicker( {\n\tactions,\n\tclassName,\n\toptions,\n\tchildren,\n} ) {\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"]}

package/build/clipboard-button/index.js

@@ -32,14 +32,15 @@ var _button = _interopRequireDefault(require("../button"));
  */
 const TIMEOUT = 4000;
 
-function ClipboardButton({
-  className,
-  children,
-  onCopy,
-  onFinishCopy,
-  text,
-  ...buttonProps
-}) {
+function ClipboardButton(_ref) {
+  let {
+    className,
+    children,
+    onCopy,
+    onFinishCopy,
+    text,
+    ...buttonProps
+  } = _ref;
   (0, _deprecated.default)('wp.components.ClipboardButton', {
     since: '10.3',
     plugin: 'Gutenberg',

package/build/clipboard-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","plugin","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,IAAhB;;AAEe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,SADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA,MAHwC;AAIxCC,EAAAA,YAJwC;AAKxCC,EAAAA,IALwC;AAMxC,KAAGC;AANqC,CAA1B,EAOX;AACH,2BAAY,+BAAZ,EAA6C;AAC5CC,IAAAA,KAAK,EAAE,MADqC;AAE5CC,IAAAA,MAAM,EAAE,WAFoC;AAG5CC,IAAAA,WAAW,EAAE;AAH+B,GAA7C;AAMA,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,GAAG,GAAG,iCAAoBN,IAApB,EAA0B,MAAM;AAC3CF,IAAAA,MAAM;AACNS,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKT,YAAL,EAAoB;AACnBM,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMV,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAPW,CAAZ;AASA,0BAAW,MAAM;AAChBa,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFD,EAEG,EAFH;AAIA,QAAME,OAAO,GAAG,yBAAY,6BAAZ,EAA2Cd,SAA3C,CAAhB,CArBG,CAuBH;AACA;AACA;AACA;AACA;;AACA,QAAMe,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,4BAAC,eAAD,6BACMb,WADN;AAEC,IAAA,SAAS,EAAGS,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGd,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\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: '10.3',\n\t\tplugin: 'Gutenberg',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\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\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\tconst focusOnCopyEventTarget = ( event ) => {\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"]}
+{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","plugin","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,IAAhB;;AAEe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACH,2BAAY,+BAAZ,EAA6C;AAC5CC,IAAAA,KAAK,EAAE,MADqC;AAE5CC,IAAAA,MAAM,EAAE,WAFoC;AAG5CC,IAAAA,WAAW,EAAE;AAH+B,GAA7C;AAMA,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,GAAG,GAAG,iCAAoBN,IAApB,EAA0B,MAAM;AAC3CF,IAAAA,MAAM;AACNS,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKT,YAAL,EAAoB;AACnBM,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMV,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAPW,CAAZ;AASA,0BAAW,MAAM;AAChBa,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFD,EAEG,EAFH;AAIA,QAAME,OAAO,GAAG,yBAAY,6BAAZ,EAA2Cd,SAA3C,CAAhB,CArBG,CAuBH;AACA;AACA;AACA;AACA;;AACA,QAAMe,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,4BAAC,eAAD,6BACMb,WADN;AAEC,IAAA,SAAS,EAAGS,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGd,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\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: '10.3',\n\t\tplugin: 'Gutenberg',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\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\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\tconst focusOnCopyEventTarget = ( event ) => {\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/color-control/index.native.js

@@ -16,13 +16,14 @@ var _colorCell = _interopRequireDefault(require("../mobile/bottom-sheet/color-ce
 /**
  * Internal dependencies
  */
-function ColorControl({
-  label,
-  onPress,
-  color,
-  withColorIndicator,
-  ...props
-}) {
+function ColorControl(_ref) {
+  let {
+    label,
+    onPress,
+    color,
+    withColorIndicator,
+    ...props
+  } = _ref;
   return (0, _element.createElement)(_colorCell.default, (0, _extends2.default)({
     label: label,
     onPress: onPress,

package/build/color-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-control/index.native.js"],"names":["ColorControl","label","onPress","color","withColorIndicator","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,YAAT,CAAuB;AACtBC,EAAAA,KADsB;AAEtBC,EAAAA,OAFsB;AAGtBC,EAAAA,KAHsB;AAItBC,EAAAA,kBAJsB;AAKtB,KAAGC;AALmB,CAAvB,EAMI;AACH,SACC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,kBAAkB,EAAGC;AAJtB,KAKMC,KALN,EADD;AASA;;eAEcL,Y","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"]}
+{"version":3,"sources":["@wordpress/components/src/color-control/index.native.js"],"names":["ColorControl","label","onPress","color","withColorIndicator","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,YAAT,OAMI;AAAA,MANmB;AACtBC,IAAAA,KADsB;AAEtBC,IAAAA,OAFsB;AAGtBC,IAAAA,KAHsB;AAItBC,IAAAA,kBAJsB;AAKtB,OAAGC;AALmB,GAMnB;AACH,SACC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,kBAAkB,EAAGC;AAJtB,KAKMC,KALN,EADD;AASA;;eAEcL,Y","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/color-edit/index.js

@@ -9,25 +9,37 @@ exports.default = ColorEdit;
 
 var _element = require("@wordpress/element");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
+var _lodash = _interopRequireDefault(require("lodash"));
 
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
-var _dropdown = _interopRequireDefault(require("../dropdown"));
+var _compose = require("@wordpress/compose");
 
-var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));
+var _button = _interopRequireDefault(require("../button"));
 
-var _colorPicker = _interopRequireDefault(require("../color-picker"));
+var _colorPicker = require("../color-picker");
 
-var _button = _interopRequireDefault(require("../button"));
+var _flex = require("../flex");
+
+var _hStack = require("../h-stack");
+
+var _itemGroup = require("../item-group");
+
+var _vStack = require("../v-stack");
+
+var _colorPalette = _interopRequireDefault(require("../color-palette"));
+
+var _dropdownMenu = _interopRequireDefault(require("../dropdown-menu"));
 
-var _textControl = _interopRequireDefault(require("../text-control"));
+var _popover = _interopRequireDefault(require("../popover"));
 
-var _baseControl = _interopRequireDefault(require("../base-control"));
+var _styles = require("./styles");
+
+var _navigableContainer = require("../navigable-container");
 
 /**
  * External dependencies
@@ -40,219 +52,200 @@ var _baseControl = _interopRequireDefault(require("../base-control"));
 /**
  * Internal dependencies
  */
-function DropdownOpenOnMount({
-  shouldOpen,
-  isOpen,
-  onToggle
-}) {
-  (0, _element.useEffect)(() => {
-    if (shouldOpen && !isOpen) {
-      onToggle();
-    }
-  }, []);
-  return null;
+function ColorNameInput(_ref) {
+  let {
+    value,
+    onChange
+  } = _ref;
+  return (0, _element.createElement)(_styles.ColorNameInputControl, {
+    label: (0, _i18n.__)('Color name'),
+    hideLabelFromVision: true,
+    value: value,
+    onChange: onChange
+  });
 }
 
-function ColorOption({
-  color,
-  name,
-  slug,
-  onChange,
-  onRemove,
-  onConfirm,
-  confirmLabel = (0, _i18n.__)('OK'),
-  isEditingNameOnMount = false,
-  isEditingColorOnMount = false,
-  onCancel,
-  immutableColorSlugs = []
-}) {
-  const [isHover, setIsHover] = (0, _element.useState)(false);
-  const [isFocused, setIsFocused] = (0, _element.useState)(false);
-  const [isEditingName, setIsEditingName] = (0, _element.useState)(isEditingNameOnMount);
-  const [isShowingAdvancedPanel, setIsShowingAdvancedPanel] = (0, _element.useState)(false);
-  const isShowingControls = (isHover || isFocused || isEditingName || isShowingAdvancedPanel) && !immutableColorSlugs.includes(slug);
-  return (0, _element.createElement)("div", {
-    tabIndex: 0,
-    className: (0, _classnames.default)('components-color-edit__color-option', {
-      'is-hover': isHover && !isEditingName && !isShowingAdvancedPanel
-    }),
-    onMouseEnter: () => setIsHover(true),
-    onMouseLeave: () => setIsHover(false),
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".
-    (0, _i18n.sprintf)((0, _i18n.__)('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00".
-    (0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color)
-  }, (0, _element.createElement)("div", {
-    className: "components-color-edit__color-option-main-area"
-  }, (0, _element.createElement)(_dropdown.default, {
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(DropdownOpenOnMount, {
-      shouldOpen: isEditingColorOnMount,
-      isOpen: isOpen,
-      onToggle: onToggle
-    }), (0, _element.createElement)(_circularOptionPicker.default.Option, {
-      style: {
-        backgroundColor: color,
-        color
-      },
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: onToggle,
-      "aria-label": (0, _i18n.__)('Edit color value')
-    })),
-    renderContent: () => (0, _element.createElement)(_colorPicker.default, {
-      color: color,
-      onChangeComplete: newColor => onChange({
-        color: newColor.hex,
-        slug,
-        name
-      }),
-      disableAlpha: true
+function ColorOption(_ref2) {
+  let {
+    color,
+    onChange,
+    isEditing,
+    onStartEditing,
+    onRemove,
+    onStopEditing
+  } = _ref2;
+  const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onStopEditing);
+  return (0, _element.createElement)(_styles.ColorItem, (0, _extends2.default)({
+    as: "div",
+    onClick: onStartEditing
+  }, isEditing ? focusOutsideProps : {}), (0, _element.createElement)(_hStack.HStack, {
+    justify: "flex-start"
+  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.ColorIndicatorStyled, {
+    colorValue: color.color
+  })), (0, _element.createElement)(_flex.FlexItem, null, isEditing ? (0, _element.createElement)(ColorNameInput, {
+    value: color.name,
+    onChange: nextName => onChange({ ...color,
+      name: nextName,
+      slug: (0, _lodash.default)(nextName)
     })
-  }), !isEditingName && (0, _element.createElement)("div", {
-    className: "components-color-edit__color-option-color-name"
-  }, name), isEditingName && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_textControl.default, {
-    className: "components-color-edit__color-option-color-name-input",
-    hideLabelFromVision: true,
-    onChange: newColorName => onChange({
-      color,
-      slug: (0, _lodash.kebabCase)(newColorName),
-      name: newColorName
-    }),
-    label: (0, _i18n.__)('Color name'),
-    placeholder: (0, _i18n.__)('Name'),
-    value: name
-  }), (0, _element.createElement)(_button.default, {
-    onClick: () => {
-      setIsEditingName(false);
-      setIsFocused(false);
-
-      if (onConfirm) {
-        onConfirm();
-      }
-    },
-    variant: "primary"
-  }, confirmLabel)), !isEditingName && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
-    className: (0, _classnames.default)({
-      'components-color-edit__hidden-control': !isShowingControls
-    }),
-    icon: _icons.edit,
-    label: (0, _i18n.__)('Edit color name'),
-    onClick: () => setIsEditingName(true)
-  }), (0, _element.createElement)(_button.default, {
-    className: (0, _classnames.default)({
-      'components-color-edit__hidden-control': !isShowingControls
-    }),
-    icon: _icons.close,
+  }) : (0, _element.createElement)(_styles.ColorNameContainer, null, color.name)), isEditing && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.RemoveButton, {
+    isSmall: true,
+    icon: _icons.lineSolid,
     label: (0, _i18n.__)('Remove color'),
     onClick: onRemove
-  })), (0, _element.createElement)(_button.default, {
-    className: (0, _classnames.default)({
-      'components-color-edit__hidden-control': !isShowingControls
-    }),
-    icon: isShowingAdvancedPanel ? _icons.chevronUp : _icons.chevronDown,
-    label: (0, _i18n.__)('Additional color settings'),
-    onClick: () => {
-      if (isShowingAdvancedPanel) {
-        setIsFocused(false);
-      }
-
-      setIsShowingAdvancedPanel(!isShowingAdvancedPanel);
-    },
-    "aria-expanded": isShowingAdvancedPanel
-  })), onCancel && (0, _element.createElement)(_button.default, {
-    className: "components-color-edit__cancel-button",
-    onClick: onCancel
-  }, (0, _i18n.__)('Cancel')), isShowingAdvancedPanel && (0, _element.createElement)(_textControl.default, {
-    className: "components-color-edit__slug-input",
-    onChange: newSlug => onChange({
-      color,
-      slug: newSlug,
-      name
-    }),
-    label: (0, _i18n.__)('Slug'),
-    value: slug
-  }));
-}
-
-function ColorInserter({
-  onInsert,
-  onCancel
-}) {
-  const [color, setColor] = (0, _element.useState)({
-    color: '#fff',
-    name: '',
-    slug: ''
-  });
-  return (0, _element.createElement)(ColorOption, {
+  }))), isEditing && (0, _element.createElement)(_popover.default, {
+    position: "bottom left",
+    className: "components-color-edit__color-popover"
+  }, (0, _element.createElement)(_colorPicker.ColorPicker, {
     color: color.color,
-    name: color.name,
-    slug: color.slug,
-    onChange: setColor,
-    confirmLabel: (0, _i18n.__)('Save'),
-    onConfirm: () => onInsert(color),
-    isEditingNameOnMount: true,
-    isEditingColorOnMount: true,
-    onCancel: onCancel
-  });
+    onChange: newColor => onChange({ ...color,
+      color: newColor
+    })
+  })));
 }
 
-function ColorEdit({
-  colors,
-  onChange,
-  emptyUI,
-  immutableColorSlugs,
-  canReset = true
-}) {
-  const [isInsertingColor, setIsInsertingColor] = (0, _element.useState)(false);
-  return (0, _element.createElement)(_baseControl.default, null, (0, _element.createElement)("fieldset", null, (0, _element.createElement)("div", {
-    className: "components-color-edit__label-and-insert-container"
-  }, (0, _element.createElement)("legend", null, (0, _element.createElement)("div", null, (0, _element.createElement)(_baseControl.default.VisualLabel, null, (0, _i18n.__)('Color palette')))), !isInsertingColor && (0, _element.createElement)(_button.default, {
-    onClick: () => {
-      setIsInsertingColor(true);
-    },
-    className: "components-color-edit__insert-button",
-    icon: _icons.plus
-  })), (0, _element.createElement)("div", null, !(0, _lodash.isEmpty)(colors) && colors.map((color, index) => {
-    return (0, _element.createElement)(ColorOption, {
-      key: index,
-      color: color.color,
-      name: color.name,
-      slug: color.slug,
-      immutableColorSlugs: immutableColorSlugs,
-      onChange: newColor => {
-        onChange(colors.map((currentColor, currentIndex) => {
-          if (currentIndex === index) {
-            return newColor;
-          }
-
-          return currentColor;
-        }));
-      },
-      onRemove: () => {
-        onChange(colors.filter((_currentColor, currentIndex) => {
-          if (currentIndex === index) {
-            return false;
-          }
-
-          return true;
-        }));
+function ColorPaletteEditListView(_ref3) {
+  let {
+    colors,
+    onChange,
+    editingColor,
+    setEditingColor
+  } = _ref3;
+  // When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.
+  const colorReference = (0, _element.useRef)();
+  (0, _element.useEffect)(() => {
+    colorReference.current = colors;
+  }, [colors]);
+  (0, _element.useEffect)(() => {
+    return () => {
+      if (colorReference.current.some(_ref4 => {
+        let {
+          slug
+        } = _ref4;
+        return !slug;
+      })) {
+        const newColors = colorReference.current.filter(_ref5 => {
+          let {
+            slug
+          } = _ref5;
+          return slug;
+        });
+        onChange(newColors.length ? newColors : undefined);
+      }
+    };
+  }, []);
+  return (0, _element.createElement)(_vStack.VStack, {
+    spacing: 3
+  }, (0, _element.createElement)(_itemGroup.ItemGroup, {
+    isBordered: true,
+    isSeparated: true
+  }, colors.map((color, index) => (0, _element.createElement)(ColorOption, {
+    key: index,
+    color: color,
+    onStartEditing: () => {
+      if (editingColor !== index) {
+        setEditingColor(index);
       }
-    });
-  }), isInsertingColor && (0, _element.createElement)(ColorInserter, {
-    onInsert: newColor => {
-      setIsInsertingColor(false);
-      onChange([...(colors || []), newColor]);
     },
-    onCancel: () => setIsInsertingColor(false)
-  }), !isInsertingColor && (0, _lodash.isEmpty)(colors) && emptyUI), !!canReset && (0, _element.createElement)(_button.default, {
+    onChange: newColor => {
+      onChange(colors.map((currentColor, currentIndex) => {
+        if (currentIndex === index) {
+          return newColor;
+        }
+
+        return currentColor;
+      }));
+    },
+    onRemove: () => {
+      setEditingColor(null);
+      const newColors = colors.filter((_currentColor, currentIndex) => {
+        if (currentIndex === index) {
+          return false;
+        }
+
+        return true;
+      });
+      onChange(newColors.length ? newColors : undefined);
+    },
+    isEditing: index === editingColor,
+    onStopEditing: () => {
+      if (index === editingColor) {
+        setEditingColor(null);
+      }
+    }
+  }))));
+}
+
+const EMPTY_ARRAY = [];
+
+function ColorEdit(_ref6) {
+  let {
+    colors = EMPTY_ARRAY,
+    onChange
+  } = _ref6;
+  const [isEditing, setIsEditing] = (0, _element.useState)(false);
+  const [editingColor, setEditingColor] = (0, _element.useState)(null);
+  const isAdding = isEditing && editingColor && colors[editingColor] && !colors[editingColor].slug;
+  const hasColors = colors.length > 0;
+  return (0, _element.createElement)(_styles.ColorEditStyles, null, (0, _element.createElement)(_styles.ColorHStackHeader, null, (0, _element.createElement)(_styles.ColorHeading, null, (0, _i18n.__)('Custom')), (0, _element.createElement)(_styles.ColorActionsContainer, null, isEditing && (0, _element.createElement)(_styles.DoneButton, {
     isSmall: true,
-    variant: "secondary",
-    className: "components-color-edit__reset-button",
-    onClick: () => onChange()
-  }, (0, _i18n.__)('Reset'))));
+    onClick: () => {
+      setIsEditing(false);
+      setEditingColor(null);
+    }
+  }, (0, _i18n.__)('Done')), (0, _element.createElement)(_button.default, {
+    isSmall: true,
+    isPressed: isAdding,
+    icon: _icons.plus,
+    label: (0, _i18n.__)('Add custom color'),
+    onClick: () => {
+      onChange([...colors, {
+        color: '#000',
+        name: '',
+        slug: ''
+      }]);
+      setIsEditing(true);
+      setEditingColor(colors.length);
+    }
+  }), !isEditing && (0, _element.createElement)(_button.default, {
+    disabled: !hasColors,
+    isSmall: true,
+    icon: _icons.moreVertical,
+    label: (0, _i18n.__)('Edit colors'),
+    onClick: () => {
+      setIsEditing(true);
+    }
+  }), isEditing && (0, _element.createElement)(_dropdownMenu.default, {
+    icon: _icons.moreVertical,
+    label: (0, _i18n.__)('Custom color options'),
+    toggleProps: {
+      isSmall: true
+    }
+  }, _ref7 => {
+    let {
+      onClose
+    } = _ref7;
+    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_navigableContainer.NavigableMenu, {
+      role: "menu"
+    }, (0, _element.createElement)(_button.default, {
+      variant: "tertiary",
+      onClick: () => {
+        setEditingColor(null);
+        setIsEditing(false);
+        onChange();
+        onClose();
+      }
+    }, (0, _i18n.__)('Remove all custom colors'))));
+  }))), hasColors && (0, _element.createElement)(_element.Fragment, null, isEditing && (0, _element.createElement)(ColorPaletteEditListView, {
+    colors: colors,
+    onChange: onChange,
+    editingColor: editingColor,
+    setEditingColor: setEditingColor
+  }), !isEditing && (0, _element.createElement)(_colorPalette.default, {
+    colors: colors,
+    onChange: () => {},
+    clearable: false,
+    disableCustomColors: true
+  })), !hasColors && (0, _i18n.__)('Custom colors are empty! Add some colors to create your own color palette.'));
 }
 //# sourceMappingURL=index.js.map