@wordpress/components 19.10.0 → 19.13.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.js"],"names":["classnames","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","CheckboxControl","label","className","heading","checked","indeterminate","help","onChange","props","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","instanceId","id","onChangeValue","event","target","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,oBAA5C;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,KAAtB,QAAmC,kBAAnC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AAEA,eAAe,SAASC,eAAT,OASX;AAAA,MATqC;AACxCC,IAAAA,KADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,OAHwC;AAIxCC,IAAAA,OAJwC;AAKxCC,IAAAA,aALwC;AAMxCC,IAAAA,IANwC;AAOxCC,IAAAA,QAPwC;AAQxC,OAAGC;AARqC,GASrC;;AACH,MAAKL,OAAL,EAAe;AACdR,IAAAA,UAAU,CAAE,qCAAF,EAAyC;AAClDc,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,KAAK,EAAE;AAF2C,KAAzC,CAAV;AAIA;;AAED,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0CpB,QAAQ,CAAE,KAAF,CAAxD;AACA,QAAM,CAAEqB,qBAAF,EAAyBC,wBAAzB,IAAsDtB,QAAQ,CACnE,KADmE,CAApE,CATG,CAaH;AACA;;AACA,QAAMuB,GAAG,GAAGrB,YAAY,CACrBsB,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA,KAHU,CAKX;;;AACAA,IAAAA,IAAI,CAACX,aAAL,GAAqB,CAAC,CAAEA,aAAxB;AAEAO,IAAAA,kBAAkB,CAAEI,IAAI,CAACC,OAAL,CAAc,UAAd,CAAF,CAAlB;AACAH,IAAAA,wBAAwB,CAAEE,IAAI,CAACC,OAAL,CAAc,gBAAd,CAAF,CAAxB;AACA,GAXsB,EAYvB,CAAEb,OAAF,EAAWC,aAAX,CAZuB,CAAxB;AAcA,QAAMa,UAAU,GAAGzB,aAAa,CAAEO,eAAF,CAAhC;AACA,QAAMmB,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IAAad,QAAQ,CAAEc,KAAK,CAACC,MAAN,CAAalB,OAAf,CAA3C;;AAEA,SACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGgB,EAFN;AAGC,IAAA,IAAI,EAAGb,IAHR;AAIC,IAAA,SAAS,EAAGf,UAAU,CAAE,6BAAF,EAAiCW,SAAjC;AAJvB,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,GAAG,EAAGa,GADP;AAEC,IAAA,EAAE,EAAGI,EAFN;AAGC,IAAA,SAAS,EAAC,oCAHX;AAIC,IAAA,IAAI,EAAC,UAJN;AAKC,IAAA,KAAK,EAAC,GALP;AAMC,IAAA,QAAQ,EAAGC,aANZ;AAOC,IAAA,OAAO,EAAGhB,OAPX;AAQC,wBAAmB,CAAC,CAAEE,IAAH,GAAUa,EAAE,GAAG,QAAf,GAA0BI;AAR9C,KASMf,KATN,EADD,EAYGK,qBAAqB,GACtB,cAAC,IAAD;AACC,IAAA,IAAI,EAAGf,KADR;AAEC,IAAA,SAAS,EAAC,4CAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADsB,GAMnB,IAlBL,EAmBGa,eAAe,GAChB,cAAC,IAAD;AACC,IAAA,IAAI,EAAGd,KADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADgB,GAMb,IAzBL,CAND,EAiCC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGsB;AAFX,KAIGlB,KAJH,CAjCD,CADD;AA0CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nexport default function CheckboxControl( {\n\tlabel,\n\tclassName,\n\theading,\n\tchecked,\n\tindeterminate,\n\thelp,\n\tonChange,\n\t...props\n} ) {\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] = useState(\n\t\tfalse\n\t);\n\n\t// Run the following callback everytime the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event ) => onChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"names":["classnames","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","CheckboxControl","props","label","className","heading","checked","indeterminate","help","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","instanceId","id","onChangeValue","event","target","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,oBAA5C;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,KAAtB,QAAmC,kBAAnC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAT,EACN;AACA;AACAC,KAHM,EAOL;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,OAHK;AAILC,IAAAA,OAJK;AAKLC,IAAAA,aALK;AAMLC,IAAAA,IANK;AAOLC,IAAAA,QAPK;AAQL,OAAGC;AARE,MASFR,KATJ;;AAWA,MAAKG,OAAL,EAAe;AACdT,IAAAA,UAAU,CAAE,qCAAF,EAAyC;AAClDe,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,KAAK,EAAE;AAF2C,KAAzC,CAAV;AAIA;;AAED,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0CrB,QAAQ,CAAE,KAAF,CAAxD;AACA,QAAM,CAAEsB,qBAAF,EAAyBC,wBAAzB,IACLvB,QAAQ,CAAE,KAAF,CADT,CApBC,CAuBD;AACA;;AACA,QAAMwB,GAAG,GAAGtB,YAAY,CACrBuB,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA,KAHU,CAKX;;;AACAA,IAAAA,IAAI,CAACX,aAAL,GAAqB,CAAC,CAAEA,aAAxB;AAEAO,IAAAA,kBAAkB,CAAEI,IAAI,CAACC,OAAL,CAAc,UAAd,CAAF,CAAlB;AACAH,IAAAA,wBAAwB,CAAEE,IAAI,CAACC,OAAL,CAAc,gBAAd,CAAF,CAAxB;AACA,GAXsB,EAYvB,CAAEb,OAAF,EAAWC,aAAX,CAZuB,CAAxB;AAcA,QAAMa,UAAU,GAAG1B,aAAa,CAAEO,eAAF,CAAhC;AACA,QAAMoB,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IACrBd,QAAQ,CAAEc,KAAK,CAACC,MAAN,CAAalB,OAAf,CADT;;AAGA,SACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGgB,EAFN;AAGC,IAAA,IAAI,EAAGb,IAHR;AAIC,IAAA,SAAS,EAAGhB,UAAU,CAAE,6BAAF,EAAiCY,SAAjC;AAJvB,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,GAAG,EAAGa,GADP;AAEC,IAAA,EAAE,EAAGI,EAFN;AAGC,IAAA,SAAS,EAAC,oCAHX;AAIC,IAAA,IAAI,EAAC,UAJN;AAKC,IAAA,KAAK,EAAC,GALP;AAMC,IAAA,QAAQ,EAAGC,aANZ;AAOC,IAAA,OAAO,EAAGhB,OAPX;AAQC,wBAAmB,CAAC,CAAEE,IAAH,GAAUa,EAAE,GAAG,QAAf,GAA0BI;AAR9C,KASMf,eATN,EADD,EAYGK,qBAAqB,GACtB,cAAC,IAAD;AACC,IAAA,IAAI,EAAGhB,KADR;AAEC,IAAA,SAAS,EAAC,4CAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADsB,GAMnB,IAlBL,EAmBGc,eAAe,GAChB,cAAC,IAAD;AACC,IAAA,IAAI,EAAGf,KADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADgB,GAMb,IAzBL,CAND,EAiCC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGuB;AAFX,KAIGlB,KAJH,CAjCD,CADD;AA0CA;AAED,eAAeF,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\t// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add\n\t// ref forwarding to CheckboxControl.\n\tprops: Omit<\n\t\tWordPressComponentProps< CheckboxControlProps, 'input', false >,\n\t\t'ref'\n\t>\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t/>\n\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"]}

package/build-module/checkbox-control/types.js

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

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

@@ -9,7 +9,6 @@ import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
-import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
@@ -107,20 +106,23 @@ export function CustomColorPickerDropdown(_ref5) {
     ...props
   } = _ref5;
   return createElement(Dropdown, _extends({
-    contentClassName: classnames('components-color-palette__custom-color-dropdown-content', {
-      'is-rendered-in-sidebar': isRenderedInSidebar
-    })
+    contentClassName: "components-color-palette__custom-color-dropdown-content",
+    popoverProps: isRenderedInSidebar ? {
+      placement: 'left-start',
+      offset: 20
+    } : undefined
   }, props));
 }
-
-const extractColorNameFromCurrentValue = function (currentValue) {
+export const extractColorNameFromCurrentValue = function (currentValue) {
   let colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   let showMultiplePalettes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
   if (!currentValue) {
     return '';
-  } // Normalize format of `colors` to simplify the following loop
+  }
 
+  const currentValueIsCssVariable = /^var\(/.test(currentValue);
+  const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : colord(currentValue).toHex(); // Normalize format of `colors` to simplify the following loop
 
   const colorPalettes = showMultiplePalettes ? colors : [{
     colors
@@ -133,7 +135,9 @@ const extractColorNameFromCurrentValue = function (currentValue) {
       name: colorName,
       color: colorValue
     } of paletteColors) {
-      if (colord(currentValue).toHex() === colord(colorValue).toHex()) {
+      const normalizedColorValue = currentValueIsCssVariable ? colorValue : colord(colorValue).toHex();
+
+      if (normalizedCurrentValue === normalizedColorValue) {
         return colorName;
       }
     }
@@ -142,7 +146,6 @@ const extractColorNameFromCurrentValue = function (currentValue) {
 
   return __('Custom');
 };
-
 export default function ColorPalette(_ref6) {
   let {
     clearable = true,
@@ -165,12 +168,6 @@ export default function ColorPalette(_ref6) {
     enableAlpha: enableAlpha
   });
 
-  let dropdownPosition;
-
-  if (__experimentalIsRenderedInSidebar) {
-    dropdownPosition = 'bottom left';
-  }
-
   const colordColor = colord(value);
   const valueWithoutLeadingHash = value !== null && value !== void 0 && value.startsWith('#') ? value.substring(1) : value !== null && value !== void 0 ? value : '';
   const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, showMultiplePalettes), [value, colors, showMultiplePalettes]);
@@ -180,7 +177,6 @@ export default function ColorPalette(_ref6) {
     spacing: 3,
     className: className
   }, !disableCustomColors && createElement(CustomColorPickerDropdown, {
-    position: dropdownPosition,
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
     renderToggle: _ref7 => {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","Flex","FlexItem","Truncate","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","colorPalettes","paletteColors","colorName","colorValue","toHex","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\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 } 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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\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} ) {\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>{ name }</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={ onChange }\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nconst extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tif (\n\t\t\t\tcolord( currentValue ).toHex() === colord( colorValue ).toHex()\n\t\t\t) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = 'bottom left';\n\t}\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\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\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\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 e.g: \"#f00\".\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\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\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<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","Flex","FlexItem","Truncate","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","placement","offset","undefined","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\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} ) {\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>{ name }</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={ onChange }\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={\n\t\t\t\tisRenderedInSidebar\n\t\t\t\t\t? { placement: 'left-start', offset: 20 }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\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\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\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 e.g: \"#f00\".\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\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\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<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

package/build-module/color-palette/index.native.js

@@ -68,7 +68,10 @@ function ColorPalette(_ref) {
           y: 0
         });
       }
-    }
+    } // Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
+    // Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [currentSegment]);
 
   function isSelectedCustom() {

package/build-module/color-palette/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","uniq","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","mergedColors","allColors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","headerText","contentContainer","scaleValue","selected","transform","colorIndicator","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\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<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","uniq","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","mergedColors","allColors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","headerText","contentContainer","scaleValue","selected","transform","colorIndicator","toUpperCase"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,UADD,EAECC,wBAFD,EAGCC,IAHD,EAICC,QAJD,EAKCC,MALD,EAMCC,UAND,EAOCC,QAPD,EAQCC,IARD,QASO,cATP;AAUA,SAASC,GAAT,EAAcC,IAAd,QAA0B,QAA1B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,SAASC,WAAT,QAA4B,gCAA5B;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;AAEA,IAAIC,YAAY,GAAG,CAAnB;AACA,IAAIC,cAAc,GAAG,CAArB;AACA,IAAIC,oBAAoB,GAAG,CAA3B;;AAEA,SAASC,YAAT,OAeI;AAAA,MAfmB;AACtBC,IAAAA,iBAAiB,GAAG,IADE;AAEtBC,IAAAA,QAFsB;AAGtBC,IAAAA,WAHsB;AAItBC,IAAAA,eAJsB;AAKtBC,IAAAA,eALsB;AAMtBC,IAAAA,cANsB;AAOtBC,IAAAA,aAPsB;AAQtBC,IAAAA,6BARsB;AAStBC,IAAAA,+BAA+B,GAAG,IATZ;AAUtBC,IAAAA,qBAAqB,GAAG,IAVF;AAWtBC,IAAAA,iCAAiC,GAAG,IAXd;AAYtBC,IAAAA,0BAZsB;AAatBC,IAAAA,4BAbsB;AActBC,IAAAA;AAdsB,GAenB;AACH,QAAMC,qBAAqB,GAAG,CAC7B,0EAD6B,EAE7B,sEAF6B,EAG7B,sEAH6B,CAA9B;AAMA,QAAMC,aAAa,GAAG1B,MAAM,EAA5B;AACA,QAAM2B,KAAK,GAAGhC,QAAQ,CAACiC,EAAT,KAAgB,KAA9B;AAEA,QAAMC,iBAAiB,GAAGb,cAAc,KAAKX,WAAW,CAACyB,QAAZ,CAAsB,CAAtB,CAA7C;AAEA,QAAMC,KAAK,GAAG/B,MAAM,CAAE,IAAIR,QAAQ,CAACwC,KAAb,CAAoB,CAApB,CAAF,CAAN,CAAkCC,OAAhD;AACA,QAAMC,OAAO,GAAGlC,MAAM,CAAE,IAAIR,QAAQ,CAACwC,KAAb,CAAoB,CAApB,CAAF,CAAN,CAAkCC,OAAlD;AAEA,QAAME,aAAa,GAAGrC,IAAI,CAAED,GAAG,CAAEkB,eAAe,CAACqB,MAAlB,EAA0B,OAA1B,CAAL,CAA1B;AACA,QAAMC,YAAY,GAAGvC,IAAI,CAAED,GAAG,CAAEkB,eAAe,CAACuB,SAAlB,EAA6B,OAA7B,CAAL,CAAzB;AACA,QAAMC,qBAAqB,GAAGzC,IAAI,CACjCD,GAAG,CAAEkB,eAAe,CAACyB,SAAlB,EAA6B,UAA7B,CAD8B,CAAlC;AAGA,QAAMJ,MAAM,GAAGP,iBAAiB,GAAGU,qBAAH,GAA2BJ,aAA3D;AAEA,QAAMM,oBAAoB,GAAGZ,iBAAiB,GAC3ChB,WAD2C,GAE3CY,qBAFH;AAGA,QAAMiB,qBAAqB,GAAG5B,eAAe,IAAI6B,gBAAgB,EAAjE;AACA,QAAMC,yBAAyB,GAC9BjC,iBAAiB,IACjBQ,+BADA,KAEE,CAAEU,iBAAF,IAAuBa,qBAFzB,CADD;AAKA,QAAMG,iBAAiB,GAAGhB,iBAAiB,GACxC9B,EAAE,CAAE,qCAAF,CADsC,GAExCA,EAAE,CAAE,kCAAF,CAFL;;AAGA,QAAM+C,UAAU,GAAG/C,EAAE,CAAE,QAAF,CAArB;;AAEAE,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKyB,aAAa,CAACO,OAAnB,EAA6B;AAC5B,UAAKU,gBAAgB,EAArB,EAA0B;AACzBI,QAAAA,oBAAoB;AACpB,OAFD,MAEO;AACNrB,QAAAA,aAAa,CAACO,OAAd,CAAsBe,QAAtB,CAAgC;AAAEC,UAAAA,CAAC,EAAE,CAAL;AAAQC,UAAAA,CAAC,EAAE;AAAX,SAAhC;AACA;AACD,KAPe,CAQhB;AACA;AACA;;AACA,GAXQ,EAWN,CAAElC,cAAF,CAXM,CAAT;;AAaA,WAAS2B,gBAAT,GAA4B;AAC3B,UAAMQ,cAAc,GACnBtC,WAAW,IAAIwB,YAAf,IAA+BA,YAAY,CAACe,QAAb,CAAuBvC,WAAvB,CADhC;;AAEA,QAAKF,iBAAiB,IAAIE,WAA1B,EAAwC;AACvC,UAAKgB,iBAAL,EAAyB;AACxB,eAAOf,eAAe,IAAI,CAAEqC,cAA5B;AACA;;AACD,aAAO,CAAErC,eAAF,IAAqB,CAAEqC,cAA9B;AACA;;AACD,WAAO,KAAP;AACA;;AAED,WAASE,UAAT,CAAqBC,KAArB,EAA6B;AAC5B,WAAO,CAAEX,gBAAgB,EAAlB,IAAwB9B,WAAW,KAAKyC,KAA/C;AACA;;AAED,WAASC,eAAT,CAA0BC,QAA1B,EAAoCC,OAApC,EAA8C;AAC7C,WAAOjE,QAAQ,CAACkE,MAAT,CAAiBF,QAAjB,EAA2B;AACjCC,MAAAA,OADiC;AAEjCE,MAAAA,QAAQ,EAAErD,kBAFuB;AAGjCsD,MAAAA,MAAM,EAAEnE,MAAM,CAACoE,IAHkB;AAIjCC,MAAAA,eAAe,EAAE;AAJgB,KAA3B,CAAP;AAMA;;AAED,WAASC,gBAAT,CAA2BT,KAA3B,EAAmC;AAClC,QAAK,CAAED,UAAU,CAAEC,KAAF,CAAjB,EAA6B;AAC5BpB,MAAAA,OAAO,CAAC8B,QAAR,CAAkB,CAAlB;AACA;;AAEDxE,IAAAA,QAAQ,CAACyE,QAAT,CAAmB,CAClBV,eAAe,CAAExB,KAAF,EAAS,CAAT,CADG,EAElBwB,eAAe,CAAErB,OAAF,EAAW,CAAX,CAFG,CAAnB,EAGIgC,KAHJ,CAGW,MAAM;AAChBhC,MAAAA,OAAO,CAAC8B,QAAR,CAAkB,CAAlB;AACAjC,MAAAA,KAAK,CAACiC,QAAN,CAAgB,CAAhB;AACA,KAND;AAOA;;AAED,QAAMG,kBAAkB,GAAGpC,KAAK,CAACqC,WAAN,CAAmB;AAC7CC,IAAAA,UAAU,EAAE,CAAE,CAAF,EAAK,GAAL,EAAU,CAAV,CADiC;AAE7CC,IAAAA,WAAW,EAAE,CAAE,CAAF,EAAK,GAAL,EAAU,CAAV;AAFgC,GAAnB,CAA3B;;AAKA,WAASC,sBAAT,GAAkC;AACjC,UAAM;AAAEC,MAAAA;AAAF,QAAY9E,UAAU,CAAC+E,GAAX,CAAgB,QAAhB,CAAlB;AACA,UAAMC,SAAS,GACdnE,YAAY,GAAGC,cAAf,GAAgCC,oBAAhC,GAAuD+D,KADxD;;AAGA,QAAK9B,qBAAL,EAA6B;AAC5B,UAAK,CAAEf,KAAP,EAAe;AACd;AACA;AACA;AACA,YACCe,qBAAqB,IACrBgC,SADA,IAEAhD,aAAa,CAACO,OAHf,EAIE;AACDP,UAAAA,aAAa,CAACO,OAAd,CAAsBe,QAAtB,CAAgC;AAC/BC,YAAAA,CAAC,EAAEzC,cAAc,GAAGC;AADW,WAAhC;AAGA;AACD;AACD;AACD;;AAED,WAASkE,YAAT,CAAuBrB,KAAvB,EAA+B;AAC9BiB,IAAAA,sBAAsB;AACtBR,IAAAA,gBAAgB,CAAET,KAAF,CAAhB;AACA1C,IAAAA,QAAQ,CAAE0C,KAAF,CAAR;AACA;;AAED,WAASsB,mBAAT,CAA8BJ,KAA9B,EAAsC;AACrCjE,IAAAA,YAAY,GAAGiE,KAAf;;AACA,QAAK7B,gBAAgB,MAAMjB,aAAa,CAACO,OAAzC,EAAmD;AAClDc,MAAAA,oBAAoB;AACpB;AACD;;AAED,WAASA,oBAAT,GAAgC;AAC/B,UAAM8B,aAAa,GAAGC,UAAU,CAAE,MAAM;AACvCpD,MAAAA,aAAa,CAACO,OAAd,CAAsB8C,WAAtB;AACA,KAF+B,EAE7BzE,kBAF6B,CAAhC;AAGA,WAAO,MAAM;AACZ0E,MAAAA,YAAY,CAAEH,aAAF,CAAZ;AACA,KAFD;AAGA;;AAED,WAASI,uBAAT,QAAoD;AAAA,QAAlB;AAAEC,MAAAA;AAAF,KAAkB;AACnD,UAAM;AAAEV,MAAAA;AAAF,QAAYU,WAAW,CAACC,MAA9B;;AACA,QAAKX,KAAK,KAAK/D,oBAAf,EAAsC;AACrCA,MAAAA,oBAAoB,GAAG+D,KAAvB;AACA;AACD;;AAED,WAASY,QAAT,QAAqC;AAAA,QAAlB;AAAEF,MAAAA;AAAF,KAAkB;AACpC1E,IAAAA,cAAc,GAAG0E,WAAW,CAACG,aAAZ,CAA0BpC,CAA3C;AACA;;AAED,QAAMqC,sBAAsB,GAAGpF,4BAA4B,CAC1DC,MAAM,CAACoF,iBADmD,EAE1DpF,MAAM,CAACqF,qBAFmD,CAA3D;AAKA,QAAMC,eAAe,GAAGvF,4BAA4B,CACnD,CAAEC,MAAM,CAAC2C,UAAT,EAAqB,CAAEnB,KAAF,IAAWxB,MAAM,CAACuF,iBAAvC,CADmD,EAEnDvF,MAAM,CAACwF,cAF4C,CAApD;AAKA,QAAMC,2BAA2B,GAAG,CACnCzF,MAAM,CAAC0F,sBAD4B,EAEnCtE,4BAFmC,CAApC;AAKA,SACC,8BACGC,KAAK,IACN,cAAC,IAAD;AAAM,IAAA,iBAAiB,EAAC,QAAxB;AAAiC,IAAA,KAAK,EAAGrB,MAAM,CAAC2F;AAAhD,KACGtE,KADH,CAFF,EAOC,cAAC,UAAD;AACC,IAAA,qBAAqB,EAAGrB,MAAM,CAAC4F,gBADhC;AAEC,IAAA,UAAU,MAFX;AAGC,IAAA,8BAA8B,EAAG,KAHlC;AAIC,IAAA,yBAAyB,EAAC,QAJ3B;AAKC,IAAA,6BAA6B,MAL9B;AAMC,IAAA,mBAAmB,EAAG,EANvB;AAOC,IAAA,QAAQ,EAAGX,QAPZ;AAQC,IAAA,mBAAmB,EAAGR,mBARvB;AASC,IAAA,iBAAiB,EAAG,MACnB1D,6BAA6B,CAAE,KAAF,CAV/B;AAYC,IAAA,eAAe,EAAG,MAAMA,6BAA6B,CAAE,IAAF,CAZtD;AAaC,IAAA,GAAG,EAAGQ,aAbP;AAcC,IAAA,MAAM,EAAI,gBAAgBF,KAAK,GAAG,MAAMA,KAAT,GAAiB,EAAI;AAdrD,KAgBGY,MAAM,CAACvC,GAAP,CAAcyD,KAAF,IAAa;AAC1B,UAAM0C,UAAU,GAAG3C,UAAU,CAAEC,KAAF,CAAV,GAChBa,kBADgB,GAEhB,CAFH;AAGA,WACC,cAAC,IAAD;AAAM,MAAA,GAAG,EAAI,GAAGb,KAAO,IAAID,UAAU,CAAEC,KAAF,CAAW;AAAhD,OACC,cAAC,wBAAD;AACC,MAAA,OAAO,EAAG,MAAMqB,YAAY,CAAErB,KAAF,CAD7B;AAEC,MAAA,iBAAiB,EAAG,QAFrB;AAGC,MAAA,kBAAkB,EAAG;AACpB2C,QAAAA,QAAQ,EAAE5C,UAAU,CAAEC,KAAF;AADA,OAHtB;AAMC,MAAA,iBAAiB,EAAGA,KANrB;AAOC,MAAA,MAAM,EAAGA;AAPV,OASC,cAAC,QAAD,CAAU,IAAV;AACC,MAAA,KAAK,EAAG;AACP4C,QAAAA,SAAS,EAAE,CACV;AACCnE,UAAAA,KAAK,EAAEiE;AADR,SADU;AADJ;AADT,OASC,cAAC,cAAD;AACC,MAAA,KAAK,EAAG1C,KADT;AAEC,MAAA,UAAU,EAAGD,UAAU,CAAEC,KAAF,CAFxB;AAGC,MAAA,OAAO,EAAGpB,OAHX;AAIC,MAAA,KAAK,EAAG,CACP/B,MAAM,CAACgG,cADA,EAEP7E,0BAFO;AAJT,MATD,CATD,CADD,CADD;AAiCA,GArCC,CAhBH,EAsDGsB,yBAAyB,IAC1B,cAAC,IAAD;AACC,IAAA,KAAK,EAAGgD,2BADT;AAEC,IAAA,QAAQ,EAAGX;AAFZ,KAIG5D,iCAAiC,IAClC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGiE;AAAd,IALF,EAOC,cAAC,wBAAD;AACC,IAAA,OAAO,EAAGrE,aADX;AAEC,IAAA,iBAAiB,EAAG,QAFrB;AAGC,IAAA,kBAAkB,EAAG;AACpBgF,MAAAA,QAAQ,EAAEtD,gBAAgB;AADN,KAHtB;AAMC,IAAA,iBAAiB,EAAGE;AANrB,KAQC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG+C;AAAd,KACC,cAAC,cAAD;AACC,IAAA,gBAAgB,EAAG,CAAE/D,iBADtB;AAEC,IAAA,KAAK,EAAGY,oBAFT;AAGC,IAAA,UAAU,EAAGE,gBAAgB,EAH9B;AAIC,IAAA,KAAK,EAAG,CACPxC,MAAM,CAACgG,cADA,EAEP7E,0BAFO;AAJT,IADD,EAUGF,qBAAqB,IACtB,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGqE;AAAd,KACG9D,KAAK,GACJmB,UADI,GAEJA,UAAU,CAACsD,WAAX,EAHJ,CAXF,CARD,CAPD,CAvDF,CAPD,CADD;AAsGA;;AAED,eAAe1F,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\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<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"]}

package/build-module/color-picker/color-copy-button.js

@@ -0,0 +1,73 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { copy } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import { CopyButton } from './styles';
+import { Text } from '../text';
+import { Tooltip } from '../ui/tooltip';
+export const ColorCopyButton = props => {
+  const {
+    color,
+    colorType
+  } = props;
+  const [copiedColor, setCopiedColor] = useState(null);
+  const copyTimer = useRef();
+  const copyRef = useCopyToClipboard(() => {
+    switch (colorType) {
+      case 'hsl':
+        {
+          return color.toHslString();
+        }
+
+      case 'rgb':
+        {
+          return color.toRgbString();
+        }
+
+      default:
+      case 'hex':
+        {
+          return color.toHex();
+        }
+    }
+  }, () => {
+    if (copyTimer.current) {
+      clearTimeout(copyTimer.current);
+    }
+
+    setCopiedColor(color.toHex());
+    copyTimer.current = setTimeout(() => {
+      setCopiedColor(null);
+      copyTimer.current = undefined;
+    }, 3000);
+  });
+  useEffect(() => {
+    // Clear copyTimer on component unmount.
+    return () => {
+      if (copyTimer.current) {
+        clearTimeout(copyTimer.current);
+      }
+    };
+  }, []);
+  return createElement(Tooltip, {
+    content: createElement(Text, {
+      color: "white"
+    }, copiedColor === color.toHex() ? __('Copied!') : __('Copy')),
+    placement: "bottom"
+  }, createElement(CopyButton, {
+    isSmall: true,
+    ref: copyRef,
+    icon: copy,
+    showTooltip: false
+  }));
+};
+//# sourceMappingURL=color-copy-button.js.map

package/build-module/color-picker/color-copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","copy","__","CopyButton","Text","Tooltip","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","copyTimer","copyRef","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,kBAAT,QAAmC,oBAAnC;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,MAA9B,QAA4C,oBAA5C;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,UAA3B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,OAAT,QAAwB,eAAxB;AAIA,OAAO,MAAMC,eAAe,GAAKC,KAAF,IAAmC;AACjE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAuBF,KAA7B;AACA,QAAM,CAAEG,WAAF,EAAeC,cAAf,IAAkCb,QAAQ,CAAmB,IAAnB,CAAhD;AACA,QAAMc,SAAS,GAAGZ,MAAM,EAAxB;AACA,QAAMa,OAAO,GAAGhB,kBAAkB,CACjC,MAAM;AACL,YAASY,SAAT;AACC,WAAK,KAAL;AAAY;AACX,iBAAOD,KAAK,CAACM,WAAN,EAAP;AACA;;AACD,WAAK,KAAL;AAAY;AACX,iBAAON,KAAK,CAACO,WAAN,EAAP;AACA;;AACD;AACA,WAAK,KAAL;AAAY;AACX,iBAAOP,KAAK,CAACQ,KAAN,EAAP;AACA;AAVF;AAYA,GAdgC,EAejC,MAAM;AACL,QAAKJ,SAAS,CAACK,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEN,SAAS,CAACK,OAAZ,CAAZ;AACA;;AACDN,IAAAA,cAAc,CAAEH,KAAK,CAACQ,KAAN,EAAF,CAAd;AACAJ,IAAAA,SAAS,CAACK,OAAV,GAAoBE,UAAU,CAAE,MAAM;AACrCR,MAAAA,cAAc,CAAE,IAAF,CAAd;AACAC,MAAAA,SAAS,CAACK,OAAV,GAAoBG,SAApB;AACA,KAH6B,EAG3B,IAH2B,CAA9B;AAIA,GAxBgC,CAAlC;AA0BArB,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA,WAAO,MAAM;AACZ,UAAKa,SAAS,CAACK,OAAf,EAAyB;AACxBC,QAAAA,YAAY,CAAEN,SAAS,CAACK,OAAZ,CAAZ;AACA;AACD,KAJD;AAKA,GAPQ,EAON,EAPM,CAAT;AASA,SACC,cAAC,OAAD;AACC,IAAA,OAAO,EACN,cAAC,IAAD;AAAM,MAAA,KAAK,EAAC;AAAZ,OACGP,WAAW,KAAKF,KAAK,CAACQ,KAAN,EAAhB,GACCd,EAAE,CAAE,SAAF,CADH,GAECA,EAAE,CAAE,MAAF,CAHN,CAFF;AAQC,IAAA,SAAS,EAAC;AARX,KAUC,cAAC,UAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,GAAG,EAAGW,OAFP;AAGC,IAAA,IAAI,EAAGZ,IAHR;AAIC,IAAA,WAAW,EAAG;AAJf,IAVD,CADD;AAmBA,CA1DM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport { Text } from '../text';\nimport { Tooltip } from '../ui/tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t\tplacement=\"bottom\"\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tisSmall\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"]}

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

@@ -11,7 +11,6 @@ import namesPlugin from 'colord/plugins/names';
  */
 
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 /**
@@ -21,8 +20,8 @@ import { __ } from '@wordpress/i18n';
 import { useContextSystem, contextConnect } from '../ui/context';
 import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
-import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, DetailsControlButton } from './styles';
-import { ColorDisplay } from './color-display';
+import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper } from './styles';
+import { ColorCopyButton } from './color-copy-button';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
@@ -60,7 +59,6 @@ const ColorPicker = (props, forwardedRef) => {
   const handleChange = useCallback(nextValue => {
     debouncedSetColor(nextValue.toHex());
   }, [debouncedSetColor]);
-  const [showInputs, setShowInputs] = useState(false);
   const [colorType, setColorType] = useState(copyFormat || 'hex');
   return createElement(ColorfulWrapper, _extends({
     ref: forwardedRef
@@ -70,25 +68,18 @@ const ColorPicker = (props, forwardedRef) => {
     enableAlpha: enableAlpha
   }), createElement(AuxiliaryColorArtefactWrapper, null, createElement(HStack, {
     justify: "space-between"
-  }, showInputs ? createElement(SelectControl, {
+  }, createElement(SelectControl, {
     options: options,
     value: colorType,
     onChange: nextColorType => setColorType(nextColorType),
     label: __('Color format'),
     hideLabelFromVision: true
-  }) : createElement(ColorDisplay, {
+  }), createElement(ColorCopyButton, {
     color: safeColordColor,
-    colorType: copyFormat || colorType,
-    enableAlpha: enableAlpha
-  }), createElement(DetailsControlButton, {
-    isSmall: true,
-    onClick: () => setShowInputs(!showInputs),
-    icon: settings,
-    isPressed: showInputs,
-    label: showInputs ? __('Hide detailed inputs') : __('Show detailed inputs')
+    colorType: copyFormat || colorType
   })), createElement(Spacer, {
     margin: 4
-  }), showInputs && createElement(ColorInput, {
+  }), createElement(ColorInput, {
     colorType: colorType,
     color: safeColordColor,
     onChange: handleChange,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","settings","useDebounce","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","useControlledValue","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"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 { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\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 ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\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 [ showInputs, setShowInputs ] = useState< boolean >( false );\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<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\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) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ConnectedColorPicker"],"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 {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\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 { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\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 ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\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<HStack justify=\"space-between\">\n\t\t\t\t\t<SelectControl\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</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t<ColorInput\n\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}

package/build-module/color-picker/hex-input.js

@@ -31,6 +31,22 @@ export const HexInput = _ref => {
     onChange(colord(hexValue));
   };
 
+  const stateReducer = (state, action) => {
+    var _action$payload, _action$payload$event, _state$value, _state$value2;
+
+    const nativeEvent = (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$event = _action$payload.event) === null || _action$payload$event === void 0 ? void 0 : _action$payload$event.nativeEvent;
+
+    if ('insertFromPaste' !== (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.inputType)) {
+      return { ...state
+      };
+    }
+
+    const value = (_state$value = state.value) !== null && _state$value !== void 0 && _state$value.startsWith('#') ? state.value.slice(1).toUpperCase() : (_state$value2 = state.value) === null || _state$value2 === void 0 ? void 0 : _state$value2.toUpperCase();
+    return { ...state,
+      value
+    };
+  };
+
   return createElement(ColorHexInputControl, {
     prefix: createElement(Spacer, {
       as: Text,
@@ -42,7 +58,8 @@ export const HexInput = _ref => {
     onChange: handleChange,
     maxLength: enableAlpha ? 9 : 7,
     label: __('Hex color'),
-    hideLabelFromVision: true
+    hideLabelFromVision: true,
+    __unstableStateReducer: stateReducer
   });
 };
 //# sourceMappingURL=hex-input.js.map

package/build-module/color-picker/hex-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","Text","Spacer","space","ColorHexInputControl","COLORS","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","ui","theme","toHex","slice","toUpperCase"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,oBAAT,QAAqC,UAArC;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAQA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,YAAY,GAAKC,SAAF,IAAqC;AACzD,QAAK,CAAEA,SAAP,EAAmB;AACnB,UAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAV,CAAsB,GAAtB,IACdF,SADc,GAEd,MAAMA,SAFT;AAIAH,IAAAA,QAAQ,CAAET,MAAM,CAAEa,QAAF,CAAR,CAAR;AACA,GAPD;;AASA,SACC,cAAC,oBAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGX,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,GAAF,CAFnB;AAGC,MAAA,KAAK,EAAGE,MAAM,CAACS,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGR,KAAK,CAACS,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAGR,YAZZ;AAaC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAb/B;AAcC,IAAA,KAAK,EAAGT,EAAE,CAAE,WAAF,CAdX;AAeC,IAAA,mBAAmB;AAfpB,IADD;AAmBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","Text","Spacer","space","ColorHexInputControl","COLORS","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","ui","theme","toHex"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,oBAAT,QAAqC,UAArC;AACA,SAASC,MAAT,QAAuB,wBAAvB;AASA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,YAAY,GAAKC,SAAF,IAAqC;AACzD,QAAK,CAAEA,SAAP,EAAmB;AACnB,UAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAV,CAAsB,GAAtB,IACdF,SADc,GAEd,MAAMA,SAFT;AAIAH,IAAAA,QAAQ,CAAET,MAAM,CAAEa,QAAF,CAAR,CAAR;AACA,GAPD;;AASA,QAAME,YAA0B,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AAAA;;AACvD,UAAMC,WAAW,sBAAGD,MAAM,CAACE,OAAV,6EAAG,gBAAgBC,KAAnB,0DAAG,sBAAuBF,WAA3C;;AAEA,QAAK,uBAAsBA,WAAtB,aAAsBA,WAAtB,uBAAsBA,WAAW,CAAEG,SAAnC,CAAL,EAAoD;AACnD,aAAO,EAAE,GAAGL;AAAL,OAAP;AACA;;AAED,UAAMM,KAAK,GAAG,gBAAAN,KAAK,CAACM,KAAN,sDAAaR,UAAb,CAAyB,GAAzB,IACXE,KAAK,CAACM,KAAN,CAAYC,KAAZ,CAAmB,CAAnB,EAAuBC,WAAvB,EADW,oBAEXR,KAAK,CAACM,KAFK,kDAEX,cAAaE,WAAb,EAFH;AAIA,WAAO,EAAE,GAAGR,KAAL;AAAYM,MAAAA;AAAZ,KAAP;AACA,GAZD;;AAcA,SACC,cAAC,oBAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGpB,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,GAAF,CAFnB;AAGC,MAAA,KAAK,EAAGE,MAAM,CAACmB,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGlB,KAAK,CAACmB,KAAN,GAAcJ,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAGb,YAZZ;AAaC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAb/B;AAcC,IAAA,KAAK,EAAGT,EAAE,CAAE,WAAF,CAdX;AAeC,IAAA,mBAAmB,MAfpB;AAgBC,IAAA,sBAAsB,EAAGc;AAhB1B,IADD;AAoBA,CA5CM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t/>\n\t);\n};\n"]}

package/build-module/color-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/index.native.js"],"names":["View","Text","TouchableWithoutFeedback","Platform","HsvColorPicker","colord","extend","namesPlugin","useState","useEffect","useRef","__","BottomSheet","usePreferredColorSchemeStyle","Icon","check","close","styles","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","didMount","isIOS","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","picker","pickerPointerSize","pickerPointer","pickerWidth","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","currentColor","toHex","current","onButtonPress","onHuePickerChange","onSatValPickerChange","saturation","value","action","width","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport HsvColorPicker from 'react-native-hsv-color-picker';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst didMount = useRef( false );\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst { h: initH, s: initS, v: initV } =\n\t\t! isGradientColor && activeColor\n\t\t\t? colord( activeColor ).toHsv()\n\t\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst currentColor = colord( {\n\t\th: hue,\n\t\ts: sat * 100,\n\t\tv: val * 100,\n\t} ).toHex();\n\n\tuseEffect( () => {\n\t\tif ( ! didMount.current ) {\n\t\t\tdidMount.current = true;\n\t\t\treturn;\n\t\t}\n\t\tsetColor( currentColor );\n\t}, [ currentColor ] );\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t}, [] );\n\n\tfunction onHuePickerChange( { hue: h } ) {\n\t\tsetHue( h );\n\t}\n\n\tfunction onSatValPickerChange( { saturation: s, value: v } ) {\n\t\tsetSaturation( s );\n\t\tsetValue( v );\n\t}\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tonHuePickerDragMove={ onHuePickerChange }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && onHuePickerChange\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ onSatValPickerChange }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && onSatValPickerChange\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/index.native.js"],"names":["View","Text","TouchableWithoutFeedback","Platform","HsvColorPicker","colord","extend","namesPlugin","useState","useEffect","useRef","__","BottomSheet","usePreferredColorSchemeStyle","Icon","check","close","styles","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","didMount","isIOS","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","picker","pickerPointerSize","pickerPointer","pickerWidth","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","currentColor","toHex","current","onButtonPress","onHuePickerChange","onSatValPickerChange","saturation","value","action","width","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport HsvColorPicker from 'react-native-hsv-color-picker';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst didMount = useRef( false );\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst currentColor = colord( {\n\t\th: hue,\n\t\ts: sat * 100,\n\t\tv: val * 100,\n\t} ).toHex();\n\n\tuseEffect( () => {\n\t\tif ( ! didMount.current ) {\n\t\t\tdidMount.current = true;\n\t\t\treturn;\n\t\t}\n\t\tsetColor( currentColor );\n\t}, [ currentColor ] );\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t}, [] );\n\n\tfunction onHuePickerChange( { hue: h } ) {\n\t\tsetHue( h );\n\t}\n\n\tfunction onSatValPickerChange( { saturation: s, value: v } ) {\n\t\tsetSaturation( s );\n\t\tsetValue( v );\n\t}\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tonHuePickerDragMove={ onHuePickerChange }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && onHuePickerChange\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ onSatValPickerChange }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && onSatValPickerChange\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"]}