@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

package/build-module/components/colors/utils.js

@@ -1,39 +1,15 @@
-/**
- * External dependencies
- */
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-import a11yPlugin from 'colord/plugins/a11y';
-
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
+import a11yPlugin from "colord/plugins/a11y";
+import { privateApis as componentsPrivateApis } from "@wordpress/components";
+import { unlock } from "../../lock-unlock";
 extend([namesPlugin, a11yPlugin]);
-const {
-  kebabCase
-} = unlock(componentsPrivateApis);
-
-/**
- * Provided an array of color objects as set by the theme or by the editor defaults,
- * and the values of the defined color or custom color returns a color object describing the color.
- *
- * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.
- * @param {?string} definedColor A string containing the color slug.
- * @param {?string} customColor  A string containing the customColor value.
- *
- * @return {?Object} If definedColor is passed and the name is found in colors,
- *                   the color object exactly as set by the theme or editor defaults is returned.
- *                   Otherwise, an object that just sets the color is defined.
- */
-export const getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
+const { kebabCase } = unlock(componentsPrivateApis);
+const getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
   if (definedColor) {
-    const colorObj = colors?.find(color => color.slug === definedColor);
+    const colorObj = colors?.find(
+      (color) => color.slug === definedColor
+    );
     if (colorObj) {
       return colorObj;
     }
@@ -42,50 +18,25 @@ export const getColorObjectByAttributeValues = (colors, definedColor, customColo
     color: customColor
   };
 };
-
-/**
- * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.
- *
- * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.
- * @param {?string} colorValue A string containing the color value.
- *
- * @return {?Object} Color object included in the colors array whose color property equals colorValue.
- *                   Returns undefined if no color object matches this requirement.
- */
-export const getColorObjectByColorValue = (colors, colorValue) => {
-  return colors?.find(color => color.color === colorValue);
+const getColorObjectByColorValue = (colors, colorValue) => {
+  return colors?.find((color) => color.color === colorValue);
 };
-
-/**
- * Returns a class based on the context a color is being used and its slug.
- *
- * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...
- * @param {string} colorSlug        Slug of the color.
- *
- * @return {?string} String with the class corresponding to the color in the provided context.
- *                   Returns undefined if either colorContextName or colorSlug are not provided.
- */
-export function getColorClassName(colorContextName, colorSlug) {
+function getColorClassName(colorContextName, colorSlug) {
   if (!colorContextName || !colorSlug) {
-    return undefined;
+    return void 0;
   }
   return `has-${kebabCase(colorSlug)}-${colorContextName}`;
 }
-
-/**
- * Given an array of color objects and a color value returns the color value of the most readable color in the array.
- *
- * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.
- * @param {?string} colorValue A string containing the color value.
- *
- * @return {string} String with the color value of the most readable color.
- */
-export function getMostReadableColor(colors, colorValue) {
+function getMostReadableColor(colors, colorValue) {
   const colordColor = colord(colorValue);
-  const getColorContrast = ({
-    color
-  }) => colordColor.contrast(color);
+  const getColorContrast = ({ color }) => colordColor.contrast(color);
   const maxContrast = Math.max(...colors.map(getColorContrast));
-  return colors.find(color => getColorContrast(color) === maxContrast).color;
+  return colors.find((color) => getColorContrast(color) === maxContrast).color;
 }
-//# sourceMappingURL=utils.js.map
+export {
+  getColorClassName,
+  getColorObjectByAttributeValues,
+  getColorObjectByColorValue,
+  getMostReadableColor
+};
+//# sourceMappingURL=utils.js.map

package/build-module/components/colors/utils.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","privateApis","componentsPrivateApis","unlock","kebabCase","getColorObjectByAttributeValues","colors","definedColor","customColor","colorObj","find","color","slug","getColorObjectByColorValue","colorValue","getColorClassName","colorContextName","colorSlug","undefined","getMostReadableColor","colordColor","getColorContrast","contrast","maxContrast","Math","max","map"],"sources":["@wordpress/block-editor/src/components/colors/utils.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn colors?.find( ( color ) => color.color === colorValue );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,OAAOC,UAAU,MAAM,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,WAAW,IAAIC,qBAAqB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1CL,MAAM,CAAE,CAAEC,WAAW,EAAEC,UAAU,CAAG,CAAC;AAErC,MAAM;EAAEI;AAAU,CAAC,GAAGD,MAAM,CAAED,qBAAsB,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,+BAA+B,GAAGA,CAC9CC,MAAM,EACNC,YAAY,EACZC,WAAW,KACP;EACJ,IAAKD,YAAY,EAAG;IACnB,MAAME,QAAQ,GAAGH,MAAM,EAAEI,IAAI,CAC1BC,KAAK,IAAMA,KAAK,CAACC,IAAI,KAAKL,YAC7B,CAAC;IAED,IAAKE,QAAQ,EAAG;MACf,OAAOA,QAAQ;IAChB;EACD;EACA,OAAO;IACNE,KAAK,EAAEH;EACR,CAAC;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,0BAA0B,GAAGA,CAAEP,MAAM,EAAEQ,UAAU,KAAM;EACnE,OAAOR,MAAM,EAAEI,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACA,KAAK,KAAKG,UAAW,CAAC;AAC/D,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAEC,gBAAgB,EAAEC,SAAS,EAAG;EAChE,IAAK,CAAED,gBAAgB,IAAI,CAAEC,SAAS,EAAG;IACxC,OAAOC,SAAS;EACjB;EAEA,OAAO,OAAQd,SAAS,CAAEa,SAAU,CAAC,IAAMD,gBAAgB,EAAG;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,oBAAoBA,CAAEb,MAAM,EAAEQ,UAAU,EAAG;EAC1D,MAAMM,WAAW,GAAGvB,MAAM,CAAEiB,UAAW,CAAC;EACxC,MAAMO,gBAAgB,GAAGA,CAAE;IAAEV;EAAM,CAAC,KAAMS,WAAW,CAACE,QAAQ,CAAEX,KAAM,CAAC;EAEvE,MAAMY,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAE,GAAGnB,MAAM,CAACoB,GAAG,CAAEL,gBAAiB,CAAE,CAAC;EACjE,OAAOf,MAAM,CAACI,IAAI,CAAIC,KAAK,IAAMU,gBAAgB,CAAEV,KAAM,CAAC,KAAKY,WAAY,CAAC,CAC1EZ,KAAK;AACR","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/colors/utils.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults,\n * and the values of the defined color or custom color returns a color object describing the color.\n *\n * @param {Array}   colors       Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} definedColor A string containing the color slug.\n * @param {?string} customColor  A string containing the customColor value.\n *\n * @return {?Object} If definedColor is passed and the name is found in colors,\n *                   the color object exactly as set by the theme or editor defaults is returned.\n *                   Otherwise, an object that just sets the color is defined.\n */\nexport const getColorObjectByAttributeValues = (\n\tcolors,\n\tdefinedColor,\n\tcustomColor\n) => {\n\tif ( definedColor ) {\n\t\tconst colorObj = colors?.find(\n\t\t\t( color ) => color.slug === definedColor\n\t\t);\n\n\t\tif ( colorObj ) {\n\t\t\treturn colorObj;\n\t\t}\n\t}\n\treturn {\n\t\tcolor: customColor,\n\t};\n};\n\n/**\n * Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {?Object} Color object included in the colors array whose color property equals colorValue.\n *                   Returns undefined if no color object matches this requirement.\n */\nexport const getColorObjectByColorValue = ( colors, colorValue ) => {\n\treturn colors?.find( ( color ) => color.color === colorValue );\n};\n\n/**\n * Returns a class based on the context a color is being used and its slug.\n *\n * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...\n * @param {string} colorSlug        Slug of the color.\n *\n * @return {?string} String with the class corresponding to the color in the provided context.\n *                   Returns undefined if either colorContextName or colorSlug are not provided.\n */\nexport function getColorClassName( colorContextName, colorSlug ) {\n\tif ( ! colorContextName || ! colorSlug ) {\n\t\treturn undefined;\n\t}\n\n\treturn `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;\n}\n\n/**\n * Given an array of color objects and a color value returns the color value of the most readable color in the array.\n *\n * @param {Array}   colors     Array of color objects as set by the theme or by the editor defaults.\n * @param {?string} colorValue A string containing the color value.\n *\n * @return {string} String with the color value of the most readable color.\n */\nexport function getMostReadableColor( colors, colorValue ) {\n\tconst colordColor = colord( colorValue );\n\tconst getColorContrast = ( { color } ) => colordColor.contrast( color );\n\n\tconst maxContrast = Math.max( ...colors.map( getColorContrast ) );\n\treturn colors.find( ( color ) => getColorContrast( color ) === maxContrast )\n\t\t.color;\n}\n"],
+  "mappings": "AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AAKvB,SAAS,eAAe,6BAA6B;AAKrD,SAAS,cAAc;AAEvB,OAAQ,CAAE,aAAa,UAAW,CAAE;AAEpC,MAAM,EAAE,UAAU,IAAI,OAAQ,qBAAsB;AAc7C,MAAM,kCAAkC,CAC9C,QACA,cACA,gBACI;AACJ,MAAK,cAAe;AACnB,UAAM,WAAW,QAAQ;AAAA,MACxB,CAAE,UAAW,MAAM,SAAS;AAAA,IAC7B;AAEA,QAAK,UAAW;AACf,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO;AAAA,IACN,OAAO;AAAA,EACR;AACD;AAWO,MAAM,6BAA6B,CAAE,QAAQ,eAAgB;AACnE,SAAO,QAAQ,KAAM,CAAE,UAAW,MAAM,UAAU,UAAW;AAC9D;AAWO,SAAS,kBAAmB,kBAAkB,WAAY;AAChE,MAAK,CAAE,oBAAoB,CAAE,WAAY;AACxC,WAAO;AAAA,EACR;AAEA,SAAO,OAAQ,UAAW,SAAU,CAAE,IAAK,gBAAiB;AAC7D;AAUO,SAAS,qBAAsB,QAAQ,YAAa;AAC1D,QAAM,cAAc,OAAQ,UAAW;AACvC,QAAM,mBAAmB,CAAE,EAAE,MAAM,MAAO,YAAY,SAAU,KAAM;AAEtE,QAAM,cAAc,KAAK,IAAK,GAAG,OAAO,IAAK,gBAAiB,CAAE;AAChE,SAAO,OAAO,KAAM,CAAE,UAAW,iBAAkB,KAAM,MAAM,WAAY,EACzE;AACH;",
+  "names": []
+}

package/build-module/components/colors/with-colors.js

@@ -1,201 +1,153 @@
-/**
- * WordPress dependencies
- */
-import { useMemo, Component } from '@wordpress/element';
-import { compose, createHigherOrderComponent } from '@wordpress/compose';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues, getMostReadableColor } from './utils';
-import { useSettings } from '../use-settings';
-import { unlock } from '../../lock-unlock';
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  kebabCase
-} = unlock(componentsPrivateApis);
-
-/**
- * Capitalizes the first letter in a string.
- *
- * @param {string} str The string whose first letter the function will capitalize.
- *
- * @return {string} Capitalized string.
- */
-const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join('');
-
-/**
- * Higher order component factory for injecting the `colorsArray` argument as
- * the colors prop in the `withCustomColors` HOC.
- *
- * @param {Array} colorsArray An array of color objects.
- *
- * @return {Function} The higher order component.
- */
-const withCustomColorPalette = colorsArray => createHigherOrderComponent(WrappedComponent => props => /*#__PURE__*/_jsx(WrappedComponent, {
-  ...props,
-  colors: colorsArray
-}), 'withCustomColorPalette');
-
-/**
- * Higher order component factory for injecting the editor colors as the
- * `colors` prop in the `withColors` HOC.
- *
- * @return {Function} The higher order component.
- */
-const withEditorColorPalette = () => createHigherOrderComponent(WrappedComponent => props => {
-  const [userPalette, themePalette, defaultPalette] = useSettings('color.palette.custom', 'color.palette.theme', 'color.palette.default');
-  const allColors = useMemo(() => [...(userPalette || []), ...(themePalette || []), ...(defaultPalette || [])], [userPalette, themePalette, defaultPalette]);
-  return /*#__PURE__*/_jsx(WrappedComponent, {
-    ...props,
-    colors: allColors
-  });
-}, 'withEditorColorPalette');
-
-/**
- * Helper function used with `createHigherOrderComponent` to create
- * higher order components for managing color logic.
- *
- * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).
- * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.
- *
- * @return {Component} The component that can be used as a HOC.
- */
+import { jsx } from "react/jsx-runtime";
+import { useMemo, Component } from "@wordpress/element";
+import { compose, createHigherOrderComponent } from "@wordpress/compose";
+import { privateApis as componentsPrivateApis } from "@wordpress/components";
+import {
+  getColorClassName,
+  getColorObjectByColorValue,
+  getColorObjectByAttributeValues,
+  getMostReadableColor
+} from "./utils";
+import { useSettings } from "../use-settings";
+import { unlock } from "../../lock-unlock";
+const { kebabCase } = unlock(componentsPrivateApis);
+const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join("");
+const withCustomColorPalette = (colorsArray) => createHigherOrderComponent(
+  (WrappedComponent) => (props) => /* @__PURE__ */ jsx(WrappedComponent, { ...props, colors: colorsArray }),
+  "withCustomColorPalette"
+);
+const withEditorColorPalette = () => createHigherOrderComponent(
+  (WrappedComponent) => (props) => {
+    const [userPalette, themePalette, defaultPalette] = useSettings(
+      "color.palette.custom",
+      "color.palette.theme",
+      "color.palette.default"
+    );
+    const allColors = useMemo(
+      () => [
+        ...userPalette || [],
+        ...themePalette || [],
+        ...defaultPalette || []
+      ],
+      [userPalette, themePalette, defaultPalette]
+    );
+    return /* @__PURE__ */ jsx(WrappedComponent, { ...props, colors: allColors });
+  },
+  "withEditorColorPalette"
+);
 function createColorHOC(colorTypes, withColorPalette) {
   const colorMap = colorTypes.reduce((colorObject, colorType) => {
     return {
       ...colorObject,
-      ...(typeof colorType === 'string' ? {
-        [colorType]: kebabCase(colorType)
-      } : colorType)
+      ...typeof colorType === "string" ? { [colorType]: kebabCase(colorType) } : colorType
     };
   }, {});
-  return compose([withColorPalette, WrappedComponent => {
-    return class extends Component {
-      constructor(props) {
-        super(props);
-        this.setters = this.createSetters();
-        this.colorUtils = {
-          getMostReadableColor: this.getMostReadableColor.bind(this)
-        };
-        this.state = {};
-      }
-      getMostReadableColor(colorValue) {
-        const {
-          colors
-        } = this.props;
-        return getMostReadableColor(colors, colorValue);
-      }
-      createSetters() {
-        return Object.keys(colorMap).reduce((settersAccumulator, colorAttributeName) => {
-          const upperFirstColorAttributeName = upperFirst(colorAttributeName);
-          const customColorAttributeName = `custom${upperFirstColorAttributeName}`;
-          settersAccumulator[`set${upperFirstColorAttributeName}`] = this.createSetColor(colorAttributeName, customColorAttributeName);
-          return settersAccumulator;
-        }, {});
-      }
-      createSetColor(colorAttributeName, customColorAttributeName) {
-        return colorValue => {
-          const colorObject = getColorObjectByColorValue(this.props.colors, colorValue);
-          this.props.setAttributes({
-            [colorAttributeName]: colorObject && colorObject.slug ? colorObject.slug : undefined,
-            [customColorAttributeName]: colorObject && colorObject.slug ? undefined : colorValue
-          });
-        };
-      }
-      static getDerivedStateFromProps({
-        attributes,
-        colors
-      }, previousState) {
-        return Object.entries(colorMap).reduce((newState, [colorAttributeName, colorContext]) => {
-          const colorObject = getColorObjectByAttributeValues(colors, attributes[colorAttributeName], attributes[`custom${upperFirst(colorAttributeName)}`]);
-          const previousColorObject = previousState[colorAttributeName];
-          const previousColor = previousColorObject?.color;
-          /**
-           * The "and previousColorObject" condition checks that a previous color object was already computed.
-           * At the start previousColorObject and colorValue are both equal to undefined
-           * bus as previousColorObject does not exist we should compute the object.
-           */
-          if (previousColor === colorObject.color && previousColorObject) {
-            newState[colorAttributeName] = previousColorObject;
-          } else {
-            newState[colorAttributeName] = {
-              ...colorObject,
-              class: getColorClassName(colorContext, colorObject.slug)
-            };
-          }
-          return newState;
-        }, {});
-      }
-      render() {
-        return /*#__PURE__*/_jsx(WrappedComponent, {
-          ...this.props,
-          colors: undefined,
-          ...this.state,
-          ...this.setters,
-          colorUtils: this.colorUtils
-        });
-      }
-    };
-  }]);
+  return compose([
+    withColorPalette,
+    (WrappedComponent) => {
+      return class extends Component {
+        constructor(props) {
+          super(props);
+          this.setters = this.createSetters();
+          this.colorUtils = {
+            getMostReadableColor: this.getMostReadableColor.bind(this)
+          };
+          this.state = {};
+        }
+        getMostReadableColor(colorValue) {
+          const { colors } = this.props;
+          return getMostReadableColor(colors, colorValue);
+        }
+        createSetters() {
+          return Object.keys(colorMap).reduce(
+            (settersAccumulator, colorAttributeName) => {
+              const upperFirstColorAttributeName = upperFirst(colorAttributeName);
+              const customColorAttributeName = `custom${upperFirstColorAttributeName}`;
+              settersAccumulator[`set${upperFirstColorAttributeName}`] = this.createSetColor(
+                colorAttributeName,
+                customColorAttributeName
+              );
+              return settersAccumulator;
+            },
+            {}
+          );
+        }
+        createSetColor(colorAttributeName, customColorAttributeName) {
+          return (colorValue) => {
+            const colorObject = getColorObjectByColorValue(
+              this.props.colors,
+              colorValue
+            );
+            this.props.setAttributes({
+              [colorAttributeName]: colorObject && colorObject.slug ? colorObject.slug : void 0,
+              [customColorAttributeName]: colorObject && colorObject.slug ? void 0 : colorValue
+            });
+          };
+        }
+        static getDerivedStateFromProps({ attributes, colors }, previousState) {
+          return Object.entries(colorMap).reduce(
+            (newState, [colorAttributeName, colorContext]) => {
+              const colorObject = getColorObjectByAttributeValues(
+                colors,
+                attributes[colorAttributeName],
+                attributes[`custom${upperFirst(
+                  colorAttributeName
+                )}`]
+              );
+              const previousColorObject = previousState[colorAttributeName];
+              const previousColor = previousColorObject?.color;
+              if (previousColor === colorObject.color && previousColorObject) {
+                newState[colorAttributeName] = previousColorObject;
+              } else {
+                newState[colorAttributeName] = {
+                  ...colorObject,
+                  class: getColorClassName(
+                    colorContext,
+                    colorObject.slug
+                  )
+                };
+              }
+              return newState;
+            },
+            {}
+          );
+        }
+        render() {
+          return /* @__PURE__ */ jsx(
+            WrappedComponent,
+            {
+              ...{
+                ...this.props,
+                colors: void 0,
+                ...this.state,
+                ...this.setters,
+                colorUtils: this.colorUtils
+              }
+            }
+          );
+        }
+      };
+    }
+  ]);
 }
-
-/**
- * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic
- * for class generation color value, retrieval and color attribute setting.
- *
- * Use this higher-order component to work with a custom set of colors.
- *
- * @example
- *
- * ```jsx
- * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];
- * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );
- * // ...
- * export default compose(
- *     withCustomColors( 'backgroundColor', 'borderColor' ),
- *     MyColorfulComponent,
- * );
- * ```
- *
- * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).
- *
- * @return {Function} Higher-order component.
- */
-export function createCustomColorsHOC(colorsArray) {
+function createCustomColorsHOC(colorsArray) {
   return (...colorTypes) => {
     const withColorPalette = withCustomColorPalette(colorsArray);
-    return createHigherOrderComponent(createColorHOC(colorTypes, withColorPalette), 'withCustomColors');
+    return createHigherOrderComponent(
+      createColorHOC(colorTypes, withColorPalette),
+      "withCustomColors"
+    );
   };
 }
-
-/**
- * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.
- *
- * For use with the default editor/theme color palette.
- *
- * @example
- *
- * ```jsx
- * export default compose(
- *     withColors( 'backgroundColor', { textColor: 'color' } ),
- *     MyColorfulComponent,
- * );
- * ```
- *
- * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,
- *                                        it should contain the color attribute name as key and the color context as value.
- *                                        If the argument is a string the value should be the color attribute name,
- *                                        the color context is computed by applying a kebab case transform to the value.
- *                                        Color context represents the context/place where the color is going to be used.
- *                                        The class name of the color is generated using 'has' followed by the color name
- *                                        and ending with the color context all in kebab case e.g: has-green-background-color.
- *
- * @return {Function} Higher-order component.
- */
-export default function withColors(...colorTypes) {
+function withColors(...colorTypes) {
   const withColorPalette = withEditorColorPalette();
-  return createHigherOrderComponent(createColorHOC(colorTypes, withColorPalette), 'withColors');
+  return createHigherOrderComponent(
+    createColorHOC(colorTypes, withColorPalette),
+    "withColors"
+  );
 }
-//# sourceMappingURL=with-colors.js.map
+export {
+  createCustomColorsHOC,
+  withColors as default
+};
+//# sourceMappingURL=with-colors.js.map

package/build-module/components/colors/with-colors.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useMemo","Component","compose","createHigherOrderComponent","privateApis","componentsPrivateApis","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","getMostReadableColor","useSettings","unlock","jsx","_jsx","kebabCase","upperFirst","firstLetter","rest","toUpperCase","join","withCustomColorPalette","colorsArray","WrappedComponent","props","colors","withEditorColorPalette","userPalette","themePalette","defaultPalette","allColors","createColorHOC","colorTypes","withColorPalette","colorMap","reduce","colorObject","colorType","constructor","setters","createSetters","colorUtils","bind","state","colorValue","Object","keys","settersAccumulator","colorAttributeName","upperFirstColorAttributeName","customColorAttributeName","createSetColor","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","entries","newState","colorContext","previousColorObject","previousColor","color","class","render","createCustomColorsHOC","withColors"],"sources":["@wordpress/block-editor/src/components/colors/with-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t\t\t'color.palette.custom',\n\t\t\t\t'color.palette.theme',\n\t\t\t\t'color.palette.default'\n\t\t\t);\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\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);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\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}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/colors/with-colors.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, Component } from '@wordpress/element';\nimport { compose, createHigherOrderComponent } from '@wordpress/compose';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tgetMostReadableColor,\n} from './utils';\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { kebabCase } = unlock( componentsPrivateApis );\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher order component factory for injecting the `colorsArray` argument as\n * the colors prop in the `withCustomColors` HOC.\n *\n * @param {Array} colorsArray An array of color objects.\n *\n * @return {Function} The higher order component.\n */\nconst withCustomColorPalette = ( colorsArray ) =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => (\n\t\t\t<WrappedComponent { ...props } colors={ colorsArray } />\n\t\t),\n\t\t'withCustomColorPalette'\n\t);\n\n/**\n * Higher order component factory for injecting the editor colors as the\n * `colors` prop in the `withColors` HOC.\n *\n * @return {Function} The higher order component.\n */\nconst withEditorColorPalette = () =>\n\tcreateHigherOrderComponent(\n\t\t( WrappedComponent ) => ( props ) => {\n\t\t\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t\t\t'color.palette.custom',\n\t\t\t\t'color.palette.theme',\n\t\t\t\t'color.palette.default'\n\t\t\t);\n\t\t\tconst allColors = useMemo(\n\t\t\t\t() => [\n\t\t\t\t\t...( userPalette || [] ),\n\t\t\t\t\t...( themePalette || [] ),\n\t\t\t\t\t...( defaultPalette || [] ),\n\t\t\t\t],\n\t\t\t\t[ userPalette, themePalette, defaultPalette ]\n\t\t\t);\n\t\t\treturn <WrappedComponent { ...props } colors={ allColors } />;\n\t\t},\n\t\t'withEditorColorPalette'\n\t);\n\n/**\n * Helper function used with `createHigherOrderComponent` to create\n * higher order components for managing color logic.\n *\n * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).\n * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.\n *\n * @return {Component} The component that can be used as a HOC.\n */\nfunction createColorHOC( colorTypes, withColorPalette ) {\n\tconst colorMap = colorTypes.reduce( ( colorObject, colorType ) => {\n\t\treturn {\n\t\t\t...colorObject,\n\t\t\t...( typeof colorType === 'string'\n\t\t\t\t? { [ colorType ]: kebabCase( colorType ) }\n\t\t\t\t: colorType ),\n\t\t};\n\t}, {} );\n\n\treturn compose( [\n\t\twithColorPalette,\n\t\t( WrappedComponent ) => {\n\t\t\treturn class extends Component {\n\t\t\t\tconstructor( props ) {\n\t\t\t\t\tsuper( props );\n\n\t\t\t\t\tthis.setters = this.createSetters();\n\t\t\t\t\tthis.colorUtils = {\n\t\t\t\t\t\tgetMostReadableColor:\n\t\t\t\t\t\t\tthis.getMostReadableColor.bind( this ),\n\t\t\t\t\t};\n\n\t\t\t\t\tthis.state = {};\n\t\t\t\t}\n\n\t\t\t\tgetMostReadableColor( colorValue ) {\n\t\t\t\t\tconst { colors } = this.props;\n\t\t\t\t\treturn getMostReadableColor( colors, colorValue );\n\t\t\t\t}\n\n\t\t\t\tcreateSetters() {\n\t\t\t\t\treturn Object.keys( colorMap ).reduce(\n\t\t\t\t\t\t( settersAccumulator, colorAttributeName ) => {\n\t\t\t\t\t\t\tconst upperFirstColorAttributeName =\n\t\t\t\t\t\t\t\tupperFirst( colorAttributeName );\n\t\t\t\t\t\t\tconst customColorAttributeName = `custom${ upperFirstColorAttributeName }`;\n\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t`set${ upperFirstColorAttributeName }`\n\t\t\t\t\t\t\t] = this.createSetColor(\n\t\t\t\t\t\t\t\tcolorAttributeName,\n\t\t\t\t\t\t\t\tcustomColorAttributeName\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcreateSetColor( colorAttributeName, customColorAttributeName ) {\n\t\t\t\t\treturn ( colorValue ) => {\n\t\t\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\t\t\tthis.props.colors,\n\t\t\t\t\t\t\tcolorValue\n\t\t\t\t\t\t);\n\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t[ colorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? colorObject.slug\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t[ customColorAttributeName ]:\n\t\t\t\t\t\t\t\tcolorObject && colorObject.slug\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: colorValue,\n\t\t\t\t\t\t} );\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t{ attributes, colors },\n\t\t\t\t\tpreviousState\n\t\t\t\t) {\n\t\t\t\t\treturn Object.entries( colorMap ).reduce(\n\t\t\t\t\t\t( newState, [ colorAttributeName, colorContext ] ) => {\n\t\t\t\t\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\tattributes[ colorAttributeName ],\n\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t`custom${ upperFirst(\n\t\t\t\t\t\t\t\t\t\tcolorAttributeName\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);\n\n\t\t\t\t\t\t\tconst previousColorObject =\n\t\t\t\t\t\t\t\tpreviousState[ colorAttributeName ];\n\t\t\t\t\t\t\tconst previousColor = previousColorObject?.color;\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * The \"and previousColorObject\" condition checks that a previous color object was already computed.\n\t\t\t\t\t\t\t * At the start previousColorObject and colorValue are both equal to undefined\n\t\t\t\t\t\t\t * bus as previousColorObject does not exist we should compute the object.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tpreviousColor === colorObject.color &&\n\t\t\t\t\t\t\t\tpreviousColorObject\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] =\n\t\t\t\t\t\t\t\t\tpreviousColorObject;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tnewState[ colorAttributeName ] = {\n\t\t\t\t\t\t\t\t\t...colorObject,\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\tcolorContext,\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\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}\n\t\t\t\t\t\t\treturn newState;\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{}\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\trender() {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\tcolors: undefined,\n\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\tcolorUtils: this.colorUtils,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t] );\n}\n\n/**\n * A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic\n * for class generation color value, retrieval and color attribute setting.\n *\n * Use this higher-order component to work with a custom set of colors.\n *\n * @example\n *\n * ```jsx\n * const CUSTOM_COLORS = [ { name: 'Red', slug: 'red', color: '#ff0000' }, { name: 'Blue', slug: 'blue', color: '#0000ff' } ];\n * const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );\n * // ...\n * export default compose(\n *     withCustomColors( 'backgroundColor', 'borderColor' ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {Array} colorsArray The array of color objects (name, slug, color, etc... ).\n *\n * @return {Function} Higher-order component.\n */\nexport function createCustomColorsHOC( colorsArray ) {\n\treturn ( ...colorTypes ) => {\n\t\tconst withColorPalette = withCustomColorPalette( colorsArray );\n\t\treturn createHigherOrderComponent(\n\t\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t\t'withCustomColors'\n\t\t);\n\t};\n}\n\n/**\n * A higher-order component, which handles color logic for class generation color value, retrieval and color attribute setting.\n *\n * For use with the default editor/theme color palette.\n *\n * @example\n *\n * ```jsx\n * export default compose(\n *     withColors( 'backgroundColor', { textColor: 'color' } ),\n *     MyColorfulComponent,\n * );\n * ```\n *\n * @param {...(Object|string)} colorTypes The arguments can be strings or objects. If the argument is an object,\n *                                        it should contain the color attribute name as key and the color context as value.\n *                                        If the argument is a string the value should be the color attribute name,\n *                                        the color context is computed by applying a kebab case transform to the value.\n *                                        Color context represents the context/place where the color is going to be used.\n *                                        The class name of the color is generated using 'has' followed by the color name\n *                                        and ending with the color context all in kebab case e.g: has-green-background-color.\n *\n * @return {Function} Higher-order component.\n */\nexport default function withColors( ...colorTypes ) {\n\tconst withColorPalette = withEditorColorPalette();\n\treturn createHigherOrderComponent(\n\t\tcreateColorHOC( colorTypes, withColorPalette ),\n\t\t'withColors'\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}