npm - @wordpress/components - Versions diffs - 19.0.1 → 19.0.2 - Mend

@wordpress/components 19.0.1 → 19.0.2

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

Files changed (1321) hide show

package/build/color-edit/styles.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RemoveButton = exports.DoneButton = exports.ColorEditStyles = exports.ColorHStackHeader = exports.ColorActionsContainer = exports.ColorHeading = exports.ColorNameContainer = exports.ColorItem = exports.ColorNameInputControl = exports.ColorIndicatorStyled = void 0;
+exports.RemoveButton = exports.DoneButton = exports.ColorNameInputControl = exports.ColorNameContainer = exports.ColorItem = exports.ColorIndicatorStyled = exports.ColorHeading = exports.ColorHStackHeader = exports.ColorEditStyles = exports.ColorActionsContainer = void 0;
 var _base = _interopRequireDefault(require("@emotion/styled/base"));

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

@@ -16,16 +16,19 @@ var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * External dependencies
  */
-const ColorIndicator = ({
-  className,
-  colorValue,
-  ...props
-}) => (0, _element.createElement)("span", (0, _extends2.default)({
-  className: (0, _classnames.default)('component-color-indicator', className),
-  style: {
-    background: colorValue
-  }
-}, props));
+const ColorIndicator = _ref => {
+  let {
+    className,
+    colorValue,
+    ...props
+  } = _ref;
+  return (0, _element.createElement)("span", (0, _extends2.default)({
+    className: (0, _classnames.default)('component-color-indicator', className),
+    style: {
+      background: colorValue
+    }
+  }, props));
+};
 var _default = ColorIndicator;
 exports.default = _default;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-indicator/index.js"],"names":["ColorIndicator","className","colorValue","props","background"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG,~~CAAE~~;AAAEC,~~EAAAA~~,SAAF;AAAaC,~~EAAAA~~,UAAb;AAAyB,~~KAAGC~~;AAA5B,~~CAAF~~,~~KACtB~~;AACC,~~EAAA~~,SAAS,EAAG,yBAAY,2BAAZ,EAAyCF,SAAzC,CADb;AAEC,~~EAAA~~,KAAK,EAAG;AAAEG,~~IAAAA~~,UAAU,EAAEF;AAAd;AAFT,~~GAGMC~~,KAHN,~~EADD~~;;eAQeH,c","sourcesContent":["/*\n External dependencies\n */\nimport classnames from 'classnames';\n\nconst ColorIndicator = ( { className, colorValue, ...props } ) => (\n\t<span\n\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\tstyle={ { background: colorValue } }\n\t\t{ ...props }\n\t/>\n);\n\nexport default ColorIndicator;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-indicator/index.js"],"names":["ColorIndicator","className","colorValue","props","background"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,GAAF;AAAA,SACtB;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCF,SAAzC,CADb;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd;AAFT,KAGMC,KAHN,EADsB;AAAA,CAAvB;;eAQeH,c","sourcesContent":["/*\n External dependencies\n */\nimport classnames from 'classnames';\n\nconst ColorIndicator = ( { className, colorValue, ...props } ) => (\n\t<span\n\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\tstyle={ { background: colorValue } }\n\t\t{ ...props }\n\t/>\n);\n\nexport default ColorIndicator;\n"]}

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

@@ -32,9 +32,10 @@ var _utils = require("../mobile/color-settings/utils");
 /**
  * Internal dependencies
  */
-function SelectedIcon({
-  opacity
-}) {
+function SelectedIcon(_ref) {
+  let {
+    opacity
+  } = _ref;
   return (0, _element.createElement)(_reactNative.Animated.View, {
     style: [_style.default.selected, {
       opacity
@@ -48,13 +49,14 @@ function SelectedIcon({
   }));
 }
-function ColorIndicator({
-  color,
-  isSelected,
-  withCustomPicker,
-  style,
-  opacity
-}) {
+function ColorIndicator(_ref2) {
+  let {
+    color,
+    isSelected,
+    withCustomPicker,
+    style,
+    opacity
+  } = _ref2;
   const {
     isGradient
   } = _utils.colorsUtils;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-indicator/index.native.js"],"names":["SelectedIcon","opacity","styles","selected","outline","selectedOutline","check","icon","ColorIndicator","color","isSelected","withCustomPicker","style","isGradient","colorsUtils","outlineStyle","outlineDark","circleOption","map","gradientValue","absolute","backgroundColor"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAIA,SAASA,YAAT,~~CAAuB~~;AAAEC,~~EAAAA~~;AAAF,~~CAAvB,EAAqC~~;AACpC,SACC,4BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAG,CAAEC,eAAOC,QAAT,EAAmB;AAAEF,MAAAA;AAAF,KAAnB;AAAvB,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,eAAOE,OAAT,EAAkBF,eAAOG,eAAzB;AAAd,IADD,EAEC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,KAAK,EAAGJ,eAAOK,IAApC;AAA2C,IAAA,IAAI,EAAG;AAAlD,IAFD,CADD;AAMA;;AAED,SAASC,cAAT,~~CAAyB~~;AACxBC,~~EAAAA~~,KADwB;AAExBC,~~EAAAA~~,UAFwB;AAGxBC,~~EAAAA~~,gBAHwB;AAIxBC,~~EAAAA~~,KAJwB;AAKxBX,~~EAAAA~~;AALwB,~~CAAzB,EAMI~~;AACH,QAAM;AAAEY,IAAAA;AAAF,MAAiBC,kBAAvB;AAEA,QAAMC,YAAY,GAAG,2CACpBb,eAAOE,OADa,EAEpBF,eAAOc,WAFa,CAArB;;AAKA,MAAKH,UAAU,CAAEJ,KAAF,CAAf,EAA2B;AAC1B,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAG,CAAEP,eAAOe,YAAT,EAAuBL,KAAvB,CADT;AAEC,MAAA,aAAa,EAAGH;AAFjB,OAIC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGM;AAAd,MAJD,EAKGL,UAAU,IAAI,4BAAC,YAAD;AAAc,MAAA,OAAO,EAAGT;AAAxB,MALjB,CADD;AASA,GAVD,MAUO,IAAKU,gBAAL,EAAwB;AAC9B,WACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAG,CAAET,eAAOe,YAAT,EAAuBL,KAAvB;AAAd,OACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGG;AAAd,MADD,EAEGN,KAAK,CAACS,GAAN,CAAaC,aAAF,IAAqB;AACjC,aACC,4BAAC,oBAAD;AACC,QAAA,aAAa,EAAGA,aADjB;AAEC,QAAA,KAAK,EAAG,CACPjB,eAAOe,YADA,EAEPf,eAAOkB,QAFA,EAGPR,KAHO,CAFT;AAOC,QAAA,GAAG,EAAGO;AAPP,QADD;AAWA,KAZC,CAFH,EAeGT,UAAU,IAAI,4BAAC,YAAD,OAfjB,CADD;AAmBA;;AACD,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CAAER,eAAOe,YAAT,EAAuBL,KAAvB,EAA8B;AAAES,MAAAA,eAAe,EAAEZ;AAAnB,KAA9B;AADT,KAGC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGM;AAAd,IAHD,EAIGL,UAAU,IAAI,4BAAC,YAAD;AAAc,IAAA,OAAO,EAAGT;AAAxB,IAJjB,CADD;AAQA;;eACcO,c","sourcesContent":["/*\n External dependencies\n /\nimport { View, Animated } from 'react-native';\n/\n WordPress dependencies\n /\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-indicator/index.native.js"],"names":["SelectedIcon","opacity","styles","selected","outline","selectedOutline","check","icon","ColorIndicator","color","isSelected","withCustomPicker","style","isGradient","colorsUtils","outlineStyle","outlineDark","circleOption","map","gradientValue","absolute","backgroundColor"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAIA,SAASA,YAAT,OAAqC;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;AACpC,SACC,4BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAG,CAAEC,eAAOC,QAAT,EAAmB;AAAEF,MAAAA;AAAF,KAAnB;AAAvB,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,eAAOE,OAAT,EAAkBF,eAAOG,eAAzB;AAAd,IADD,EAEC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,KAAK,EAAGJ,eAAOK,IAApC;AAA2C,IAAA,IAAI,EAAG;AAAlD,IAFD,CADD;AAMA;;AAED,SAASC,cAAT,QAMI;AAAA,MANqB;AACxBC,IAAAA,KADwB;AAExBC,IAAAA,UAFwB;AAGxBC,IAAAA,gBAHwB;AAIxBC,IAAAA,KAJwB;AAKxBX,IAAAA;AALwB,GAMrB;AACH,QAAM;AAAEY,IAAAA;AAAF,MAAiBC,kBAAvB;AAEA,QAAMC,YAAY,GAAG,2CACpBb,eAAOE,OADa,EAEpBF,eAAOc,WAFa,CAArB;;AAKA,MAAKH,UAAU,CAAEJ,KAAF,CAAf,EAA2B;AAC1B,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAG,CAAEP,eAAOe,YAAT,EAAuBL,KAAvB,CADT;AAEC,MAAA,aAAa,EAAGH;AAFjB,OAIC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGM;AAAd,MAJD,EAKGL,UAAU,IAAI,4BAAC,YAAD;AAAc,MAAA,OAAO,EAAGT;AAAxB,MALjB,CADD;AASA,GAVD,MAUO,IAAKU,gBAAL,EAAwB;AAC9B,WACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAG,CAAET,eAAOe,YAAT,EAAuBL,KAAvB;AAAd,OACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGG;AAAd,MADD,EAEGN,KAAK,CAACS,GAAN,CAAaC,aAAF,IAAqB;AACjC,aACC,4BAAC,oBAAD;AACC,QAAA,aAAa,EAAGA,aADjB;AAEC,QAAA,KAAK,EAAG,CACPjB,eAAOe,YADA,EAEPf,eAAOkB,QAFA,EAGPR,KAHO,CAFT;AAOC,QAAA,GAAG,EAAGO;AAPP,QADD;AAWA,KAZC,CAFH,EAeGT,UAAU,IAAI,4BAAC,YAAD,OAfjB,CADD;AAmBA;;AACD,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CAAER,eAAOe,YAAT,EAAuBL,KAAvB,EAA8B;AAAES,MAAAA,eAAe,EAAEZ;AAAnB,KAA9B;AADT,KAGC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGM;AAAd,IAHD,EAIGL,UAAU,IAAI,4BAAC,YAAD;AAAc,IAAA,OAAO,EAAGT;AAAxB,IAJjB,CADD;AAQA;;eACcO,c","sourcesContent":["/*\n External dependencies\n /\nimport { View, Animated } from 'react-native';\n/\n WordPress dependencies\n /\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"]}

package/build/color-list-picker/index.js CHANGED Viewed

@@ -22,14 +22,15 @@ var _swatch = _interopRequireDefault(require("../swatch"));
 /**
  * Internal dependencies
  */
-function ColorOption({
-  label,
-  value,
-  colors,
-  disableCustomColors,
-  enableAlpha,
-  onChange
-}) {
+function ColorOption(_ref) {
+  let {
+    label,
+    value,
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    onChange
+  } = _ref;
   const [isOpen, setIsOpen] = (0, _element.useState)(false);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
     className: "components-color-list-picker__swatch-button",
@@ -48,14 +49,15 @@ function ColorOption({
   }));
 }
-function ColorListPicker({
-  colors,
-  labels,
-  value = [],
-  disableCustomColors,
-  enableAlpha,
-  onChange
-}) {
+function ColorListPicker(_ref2) {
+  let {
+    colors,
+    labels,
+    value = [],
+    disableCustomColors,
+    enableAlpha,
+    onChange
+  } = _ref2;
   return (0, _element.createElement)("div", {
     className: "components-color-list-picker"
   }, labels.map((label, index) => (0, _element.createElement)(ColorOption, {

package/build/color-list-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-list-picker/index.js"],"names":["ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,WAAT,~~CAAsB~~;AACrBC,~~EAAAA~~,KADqB;AAErBC,~~EAAAA~~,KAFqB;AAGrBC,~~EAAAA~~,MAHqB;AAIrBC,~~EAAAA~~,mBAJqB;AAKrBC,~~EAAAA~~,WALqB;AAMrBC,~~EAAAA~~;AANqB,~~CAAtB,EAOI~~;AACH,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAG,4BAAC,eAAD;AAAQ,MAAA,IAAI,EAAGN;AAAf,MAFR;AAGC,IAAA,OAAO,EAAG,MAAMM,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAH1B,KAKGR,KALH,CADD,EAQGM,MAAM,IACP,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IATF,CADD;AAsBA;;AAED,SAASK,eAAT,~~CAA0B~~;AACzBP,~~EAAAA~~,MADyB;AAEzBQ,~~EAAAA~~,MAFyB;AAGzBT,~~EAAAA~~,KAAK,GAAG,EAHiB;AAIzBE,~~EAAAA~~,mBAJyB;AAKzBC,~~EAAAA~~,WALyB;AAMzBC,~~EAAAA~~;AANyB,~~CAA1B,EAOI~~;AACH,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEX,KAAF,EAASY,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGZ,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEW,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGV,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKS,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGb,KAAK,CAACc,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAR,MAAAA,QAAQ,CAAES,SAAF,CAAR;AACA;AAXF,IADC,CADH,CADD;AAmBA;;eAEcL,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport Swatch from '../swatch';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\ticon={ <Swatch fill={ value } /> }\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n} ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors = value.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-list-picker/index.js"],"names":["ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,WAAT,OAOI;AAAA,MAPkB;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,KAFqB;AAGrBC,IAAAA,MAHqB;AAIrBC,IAAAA,mBAJqB;AAKrBC,IAAAA,WALqB;AAMrBC,IAAAA;AANqB,GAOlB;AACH,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAG,4BAAC,eAAD;AAAQ,MAAA,IAAI,EAAGN;AAAf,MAFR;AAGC,IAAA,OAAO,EAAG,MAAMM,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAH1B,KAKGR,KALH,CADD,EAQGM,MAAM,IACP,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IATF,CADD;AAsBA;;AAED,SAASK,eAAT,QAOI;AAAA,MAPsB;AACzBP,IAAAA,MADyB;AAEzBQ,IAAAA,MAFyB;AAGzBT,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOtB;AACH,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEX,KAAF,EAASY,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGZ,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEW,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGV,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKS,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGb,KAAK,CAACc,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAR,MAAAA,QAAQ,CAAES,SAAF,CAAR;AACA;AAXF,IADC,CADH,CADD;AAmBA;;eAEcL,e","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport Swatch from '../swatch';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\ticon={ <Swatch fill={ value } /> }\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n} ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors = value.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}

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

@@ -42,19 +42,21 @@ var _styles = require("./styles");
  */
 (0, _colord.extend)([_names.default, _a11y.default]);
-function SinglePalette({
-  className,
-  clearColor,
-  colors,
-  onChange,
-  value,
-  actions
-}) {
+function SinglePalette(_ref) {
+  let {
+    className,
+    clearColor,
+    colors,
+    onChange,
+    value,
+    actions
+  } = _ref;
   const colorOptions = (0, _element.useMemo)(() => {
-    return (0, _lodash.map)(colors, ({
-      color,
-      name
-    }) => {
+    return (0, _lodash.map)(colors, _ref2 => {
+      let {
+        color,
+        name
+      } = _ref2;
       const colordColor = (0, _colord.colord)(color);
       return (0, _element.createElement)(_circularOptionPicker.default.Option, {
         key: color,
@@ -82,21 +84,23 @@ function SinglePalette({
   });
 }
-function MultiplePalettes({
-  className,
-  clearColor,
-  colors,
-  onChange,
-  value,
-  actions
-}) {
+function MultiplePalettes(_ref3) {
+  let {
+    className,
+    clearColor,
+    colors,
+    onChange,
+    value,
+    actions
+  } = _ref3;
   return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
-  }, colors.map(({
-    name,
-    colors: colorPalette
-  }, index) => {
+  }, colors.map((_ref4, index) => {
+    let {
+      name,
+      colors: colorPalette
+    } = _ref4;
     return (0, _element.createElement)(_vStack.VStack, {
       spacing: 2,
       key: index
@@ -110,16 +114,17 @@ function MultiplePalettes({
   }));
 }
-function ColorPalette({
-  clearable = true,
-  className,
-  colors,
-  disableCustomColors = false,
-  enableAlpha,
-  onChange,
-  value,
-  __experimentalHasMultipleOrigins = false
-}) {
+function ColorPalette(_ref5) {
+  let {
+    clearable = true,
+    className,
+    colors,
+    disableCustomColors = false,
+    enableAlpha,
+    onChange,
+    value,
+    __experimentalHasMultipleOrigins = false
+  } = _ref5;
   const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
   const Component = __experimentalHasMultipleOrigins ? MultiplePalettes : SinglePalette;
@@ -134,19 +139,22 @@ function ColorPalette({
     className: className
   }, !disableCustomColors && (0, _element.createElement)(_dropdown.default, {
     renderContent: renderCustomColorPicker,
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => (0, _element.createElement)("button", {
-      className: "components-color-palette__custom-color",
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: onToggle,
-      "aria-label": (0, _i18n.__)('Custom color picker'),
-      style: {
-        background: value
-      }
-    }, value)
+    renderToggle: _ref6 => {
+      let {
+        isOpen,
+        onToggle
+      } = _ref6;
+      return (0, _element.createElement)("button", {
+        className: "components-color-palette__custom-color",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        onClick: onToggle,
+        "aria-label": (0, _i18n.__)('Custom color picker'),
+        style: {
+          background: value
+        }
+      }, value);
+    }
   }), (0, _element.createElement)(Component, {
     clearable: clearable,
     clearColor: clearColor,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","~~colorPalette~~","~~index~~","length","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","undefined","Component","renderCustomColorPicker","isOpen","onToggle","background"],"mappings":";;;;;;;;;AAYA;;AATA;;AACA;;AACA;;AACA;;AAKA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AArBA;AACA;AACA;;AAMA;AACA;AACA;;AAIA;AACA;AACA;AAOA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,aAAT,~~CAAwB~~;AACvBC,~~EAAAA~~,SADuB;AAEvBC,~~EAAAA~~,UAFuB;AAGvBC,~~EAAAA~~,MAHuB;AAIvBC,~~EAAAA~~,QAJuB;AAKvBC,~~EAAAA~~,KALuB;AAMvBC,~~EAAAA~~;AANuB,~~CAAxB,EAOI~~;AACH,QAAMC,YAAY,GAAG,sBAAS,MAAM;AACnC,WAAO,iBAAKJ,MAAL,EAAa,~~CAAE~~;AAAEK,~~MAAAA~~,KAAF;AAASC,~~MAAAA~~;AAAT,~~KAAF,KAAuB~~;AAC1C,YAAMC,WAAW,GAAG,oBAAQF,KAAR,CAApB;AACA,aACC,4BAAC,6BAAD,CAAsB,MAAtB;AACC,QAAA,GAAG,EAAGA,KADP;AAEC,QAAA,UAAU,EAAGH,KAAK,KAAKG,KAFxB;AAGC,QAAA,iBAAiB,EAChBH,KAAK,KAAKG,KAAV,GACG;AACAG,UAAAA,IAAI,EACHD,WAAW,CAACE,QAAZ,KACAF,WAAW,CAACE,QAAZ,CAAsB,MAAtB,CADA,GAEG,MAFH,GAGG;AALJ,SADH,GAQG,EAZL;AAcC,QAAA,WAAW,EACVH,IAAI,IACJ;AACA,2BAAS,cAAI,gBAAJ,CAAT,EAAiCD,KAAjC,CAjBF;AAmBC,QAAA,KAAK,EAAG;AAAEK,UAAAA,eAAe,EAAEL,KAAnB;AAA0BA,UAAAA;AAA1B,SAnBT;AAoBC,QAAA,OAAO,EACNH,KAAK,KAAKG,KAAV,GAAkBN,UAAlB,GAA+B,MAAME,QAAQ,CAAEI,KAAF,CArB/C;AAuBC,sBACCC,IAAI,GACD;AACA,2BAAS,cAAI,WAAJ,CAAT,EAA4BA,IAA5B,CAFC,GAGD;AACA,2BAAS,cAAI,gBAAJ,CAAT,EAAiCD,KAAjC;AA5BL,QADD;AAiCA,KAnCM,CAAP;AAoCA,GArCoB,EAqClB,CAAEL,MAAF,EAAUE,KAAV,EAAiBD,QAAjB,EAA2BF,UAA3B,CArCkB,CAArB;AAsCA,SACC,4BAAC,6BAAD;AACC,IAAA,SAAS,EAAGD,SADb;AAEC,IAAA,OAAO,EAAGM,YAFX;AAGC,IAAA,OAAO,EAAGD;AAHX,IADD;AAOA;;AAED,SAASQ,gBAAT,~~CAA2B~~;AAC1Bb,~~EAAAA~~,SAD0B;AAE1BC,~~EAAAA~~,UAF0B;AAG1BC,~~EAAAA~~,MAH0B;AAI1BC,~~EAAAA~~,QAJ0B;AAK1BC,~~EAAAA~~,KAL0B;AAM1BC,~~EAAAA~~;AAN0B,~~CAA3B,EAOI~~;AACH,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,SAAS,EAAGL;AAAlC,KACGE,MAAM,CAACY,GAAP,CAAY,~~CAAE~~;~~AAAEN~~,~~IAAAA~~,IAAF;AAAQN,~~IAAAA~~,MAAM,~~EAAEa~~;AAAhB,~~GAAF,EAAkCC,KAAlC,KAA6C~~;AAC1D,WACC,4BAAC,cAAD;AAAQ,MAAA,OAAO,EAAG,CAAlB;AAAsB,MAAA,GAAG,~~EAAGA~~;AAA5B,OACC,4BAAC,oBAAD,~~QAAgBR~~,IAAhB,CADD,EAEC,4BAAC,aAAD;AACC,MAAA,UAAU,EAAGP,UADd;AAEC,MAAA,MAAM,~~EAAGc~~,YAFV;AAGC,MAAA,QAAQ,~~EAAGZ~~,QAHZ;AAIC,MAAA,KAAK,EAAGC,KAJT;AAKC,MAAA,OAAO,EACNF,MAAM,CAACe,MAAP,~~KAAkBD~~,KAAK,GAAG,CAA1B,~~GAA8BX~~,OAA9B,GAAwC;AAN1C,MAFD,CADD;AAcA,GAfC,CADH,CADD;AAoBA;;AAEc,SAASa,YAAT,~~CAAuB~~;AACrCC,~~EAAAA~~,SAAS,GAAG,IADyB;AAErCnB,~~EAAAA~~,SAFqC;AAGrCE,~~EAAAA~~,MAHqC;AAIrCkB,~~EAAAA~~,mBAAmB,GAAG,KAJe;AAKrCC,~~EAAAA~~,WALqC;AAMrClB,~~EAAAA~~,QANqC;AAOrCC,~~EAAAA~~,KAPqC;AAQrCkB,~~EAAAA~~,gCAAgC,GAAG;AARE,~~CAAvB,EASX~~;AACH,QAAMrB,UAAU,GAAG,0BAAa,MAAME,QAAQ,CAAEoB,SAAF,CAA3B,EAA0C,CAAEpB,QAAF,CAA1C,CAAnB;AACA,QAAMqB,SAAS,GAAGF,gCAAgC,GAC/CT,gBAD+C,GAE/Cd,aAFH;;AAIA,QAAM0B,uBAAuB,GAAG,MAC/B,4BAAC,wBAAD;AACC,IAAA,KAAK,EAAGrB,KADT;AAEC,IAAA,QAAQ,EAAKG,KAAF,IAAaJ,QAAQ,CAAEI,KAAF,CAFjC;AAGC,IAAA,WAAW,EAAGc;AAHf,IADD;;AAQA,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,SAAS,EAAGrB;AAAlC,KACG,CAAEoB,mBAAF,IACD,4BAAC,iBAAD;AACC,IAAA,aAAa,EAAGK,uBADjB;AAEC,IAAA,YAAY,EAAG,~~CAAE~~;AAAEC,~~MAAAA~~,MAAF;AAAUC,~~MAAAA~~;AAAV,~~KAAF~~,~~KACd~~;AACC,~~MAAA~~,SAAS,EAAC,wCADX;AAEC,~~uBAAgBD~~,MAFjB;AAGC,~~uBAAc~~,MAHf;AAIC,~~MAAA~~,OAAO,EAAGC,QAJX;AAKC,~~oBAAa~~,cAAI,qBAAJ,CALd;AAMC,~~MAAA~~,KAAK,EAAG;AAAEC,~~QAAAA~~,UAAU,EAAExB;AAAd;AANT,~~OAQGA~~,KARH;~~AAHF~~,IAFF,EAkBC,4BAAC,SAAD;AACC,IAAA,SAAS,EAAGe,SADb;AAEC,IAAA,UAAU,EAAGlB,UAFd;AAGC,IAAA,MAAM,EAAGC,MAHV;AAIC,IAAA,QAAQ,EAAGC,QAJZ;AAKC,IAAA,KAAK,EAAGC,KALT;AAMC,IAAA,OAAO,EACN,CAAC,CAAEe,SAAH,IACC,4BAAC,6BAAD,CAAsB,YAAtB;AACC,MAAA,OAAO,EAAGlB;AADX,OAGG,cAAI,OAAJ,CAHH;AARH,IAlBD,CADD;AAqCA","sourcesContent":["/*\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 { 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\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 default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: 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\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<Dropdown\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\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={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ { background: value } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","undefined","Component","renderCustomColorPicker","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/*\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 { 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\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 default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: 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\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<Dropdown\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\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={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ { background: value } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\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/color-palette/index.native.js CHANGED Viewed

@@ -39,20 +39,21 @@ let contentWidth = 0;
 let scrollPosition = 0;
 let customIndicatorWidth = 0;
-function ColorPalette({
-  setColor,
-  activeColor,
-  isGradientColor,
-  defaultSettings,
-  currentSegment,
-  onCustomPress,
-  shouldEnableBottomSheetScroll,
-  shouldShowCustomIndicatorOption = true,
-  shouldShowCustomLabel = true,
-  shouldShowCustomVerticalSeparator = true,
-  customColorIndicatorStyles,
-  customIndicatorWrapperStyles
-}) {
+function ColorPalette(_ref) {
+  let {
+    setColor,
+    activeColor,
+    isGradientColor,
+    defaultSettings,
+    currentSegment,
+    onCustomPress,
+    shouldEnableBottomSheetScroll,
+    shouldShowCustomIndicatorOption = true,
+    shouldShowCustomLabel = true,
+    shouldShowCustomVerticalSeparator = true,
+    customColorIndicatorStyles,
+    customIndicatorWrapperStyles
+  } = _ref;
   const customSwatchGradients = ['linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)', 'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)', 'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)'];
   const scrollViewRef = (0, _element.useRef)();
   const isIOS = _reactNative.Platform.OS === 'ios';
@@ -167,9 +168,10 @@ function ColorPalette({
     };
   }
-  function onCustomIndicatorLayout({
-    nativeEvent
-  }) {
+  function onCustomIndicatorLayout(_ref2) {
+    let {
+      nativeEvent
+    } = _ref2;
     const {
       width
     } = nativeEvent.layout;
@@ -179,9 +181,10 @@ function ColorPalette({
     }
   }
-  function onScroll({
-    nativeEvent
-  }) {
+  function onScroll(_ref3) {
+    let {
+      nativeEvent
+    } = _ref3;
     scrollPosition = nativeEvent.contentOffset.x;
   }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","Platform","OS","isGradientSegment","colorsUtils","segments","scale","Animated","Value","current","opacity","defaultColors","colors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","Easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","Dimensions","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","styles","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","contentContainer","container","selected","colorIndicator","toUpperCase","map","scaleValue","transform"],"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\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} ) {\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 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\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 && colors && colors.includes( activeColor );\n\t\tif ( 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<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\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: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\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>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\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</Animated.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} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","Platform","OS","isGradientSegment","colorsUtils","segments","scale","Animated","Value","current","opacity","defaultColors","colors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","Easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","Dimensions","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","styles","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","contentContainer","container","selected","colorIndicator","toUpperCase","map","scaleValue","transform"],"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\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} ) {\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 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\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 && colors && colors.includes( activeColor );\n\t\tif ( 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<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\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: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\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>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\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</Animated.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} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}

package/build/color-picker/color-display.js CHANGED Viewed

@@ -30,22 +30,27 @@ var _space = require("../ui/utils/space");
 /**
  * Internal dependencies
  */
-const ValueDisplay = ({
-  values
-}) => (0, _element.createElement)(_element.Fragment, null, values.map(([value, abbreviation]) => {
-  return (0, _element.createElement)(_flex.FlexItem, {
-    key: abbreviation,
-    isBlock: true,
-    display: "flex"
-  }, (0, _element.createElement)(_text.Text, {
-    color: "blue"
-  }, abbreviation), (0, _element.createElement)(_text.Text, null, value));
-}));
+const ValueDisplay = _ref => {
+  let {
+    values
+  } = _ref;
+  return (0, _element.createElement)(_element.Fragment, null, values.map(_ref2 => {
+    let [value, abbreviation] = _ref2;
+    return (0, _element.createElement)(_flex.FlexItem, {
+      key: abbreviation,
+      isBlock: true,
+      display: "flex"
+    }, (0, _element.createElement)(_text.Text, {
+      color: "blue"
+    }, abbreviation), (0, _element.createElement)(_text.Text, null, value));
+  }));
+};
-const HslDisplay = ({
-  color,
-  enableAlpha
-}) => {
+const HslDisplay = _ref3 => {
+  let {
+    color,
+    enableAlpha
+  } = _ref3;
   const {
     h,
     s,
@@ -63,10 +68,11 @@ const HslDisplay = ({
   });
 };
-const RgbDisplay = ({
-  color,
-  enableAlpha
-}) => {
+const RgbDisplay = _ref4 => {
+  let {
+    color,
+    enableAlpha
+  } = _ref4;
   const {
     r,
     g,
@@ -84,9 +90,10 @@ const RgbDisplay = ({
   });
 };
-const HexDisplay = ({
-  color
-}) => {
+const HexDisplay = _ref5 => {
+  let {
+    color
+  } = _ref5;
   const colorWithoutHash = color.toHex().slice(1).toUpperCase();
   return (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_text.Text, {
     color: "blue"
@@ -107,11 +114,12 @@ const getComponent = colorType => {
   }
 };
-const ColorDisplay = ({
-  color,
-  colorType,
-  enableAlpha
-}) => {
+const ColorDisplay = _ref6 => {
+  let {
+    color,
+    colorType,
+    enableAlpha
+  } = _ref6;
   const [copiedColor, setCopiedColor] = (0, _element.useState)(null);
   const copyTimer = (0, _element.useRef)();
   const props = {