@wordpress/components 18.0.0 → 19.0.3

package/build-module/{ui/color-picker → color-picker}/hsl-input.js

@@ -3,70 +3,80 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
  */
-
+import { colord } from 'colord';
 /**
  * Internal dependencies
  */
+
 import { InputWithSlider } from './input-with-slider';
-export const HslInput = ({
-  color,
-  onChange,
-  enableAlpha
-}) => {
+export const HslInput = _ref => {
+  let {
+    color,
+    onChange,
+    enableAlpha
+  } = _ref;
   const {
     h,
     s,
     l,
     a
-  } = color;
+  } = color.toHsl();
   return createElement(Fragment, null, createElement(InputWithSlider, {
-    min: 1,
-    max: 360,
+    min: 0,
+    max: 359,
     label: "Hue",
     abbreviation: "H",
-    value: Math.trunc(h),
-    onChange: nextH => onChange({
-      h: nextH,
-      s,
-      l,
-      a
-    })
+    value: h,
+    onChange: nextH => {
+      onChange(colord({
+        h: nextH,
+        s,
+        l,
+        a
+      }));
+    }
   }), createElement(InputWithSlider, {
     min: 0,
     max: 100,
     label: "Saturation",
     abbreviation: "S",
-    value: s <= 1 ? Math.trunc(100 * s) : s,
-    onChange: nextS => onChange({
-      h,
-      s: nextS / 100,
-      l,
-      a
-    })
+    value: s,
+    onChange: nextS => {
+      onChange(colord({
+        h,
+        s: nextS,
+        l,
+        a
+      }));
+    }
   }), createElement(InputWithSlider, {
     min: 0,
     max: 100,
     label: "Lightness",
     abbreviation: "L",
-    value: l <= 1 ? Math.trunc(100 * l) : l,
-    onChange: nextL => onChange({
-      h,
-      s,
-      l: nextL / 100,
-      a
-    })
+    value: l,
+    onChange: nextL => {
+      onChange(colord({
+        h,
+        s,
+        l: nextL,
+        a
+      }));
+    }
   }), enableAlpha && createElement(InputWithSlider, {
     min: 0,
     max: 100,
     label: "Alpha",
     abbreviation: "A",
     value: Math.trunc(100 * a),
-    onChange: nextA => onChange({
-      h,
-      s,
-      l,
-      a: nextA / 100
-    })
+    onChange: nextA => {
+      onChange(colord({
+        h,
+        s,
+        l,
+        a: nextA / 100
+      }));
+    }
   }));
 };
 //# sourceMappingURL=hsl-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"names":["colord","InputWithSlider","HslInput","color","onChange","enableAlpha","h","s","l","a","toHsl","nextH","nextS","nextL","Math","trunc","nextA"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,eAAT,QAAgC,qBAAhC;AAQA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;AAC9E,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWC,IAAAA;AAAX,MAAiBN,KAAK,CAACO,KAAN,EAAvB;AAEA,SACC,8BACC,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,KAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGJ,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BP,MAAAA,QAAQ,CAAEJ,MAAM,CAAE;AAAEM,QAAAA,CAAC,EAAEK,KAAL;AAAYJ,QAAAA,CAAZ;AAAeC,QAAAA,CAAf;AAAkBC,QAAAA;AAAlB,OAAF,CAAR,CAAR;AACA;AARF,IADD,EAWC,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,YAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGF,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BR,MAAAA,QAAQ,CACPJ,MAAM,CAAE;AACPM,QAAAA,CADO;AAEPC,QAAAA,CAAC,EAAEK,KAFI;AAGPJ,QAAAA,CAHO;AAIPC,QAAAA;AAJO,OAAF,CADC,CAAR;AAQA;AAfF,IAXD,EA4BC,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,WAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGD,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BT,MAAAA,QAAQ,CACPJ,MAAM,CAAE;AACPM,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAAC,EAAEK,KAHI;AAIPJ,QAAAA;AAJO,OAAF,CADC,CAAR;AAQA;AAfF,IA5BD,EA6CGJ,WAAW,IACZ,cAAC,eAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGS,IAAI,CAACC,KAAL,CAAY,MAAMN,CAAlB,CALT;AAMC,IAAA,QAAQ,EAAKO,KAAF,IAAqB;AAC/BZ,MAAAA,QAAQ,CACPJ,MAAM,CAAE;AACPM,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAHO;AAIPC,QAAAA,CAAC,EAAEO,KAAK,GAAG;AAJJ,OAAF,CADC,CAAR;AAQA;AAfF,IA9CF,CADD;AAmEA,CAtEM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\n\ninterface HslInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tonChange( colord( { h: nextH, s, l, a } ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts: nextS,\n\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tl: nextL,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\t\ta: nextA / 100,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"]}

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

@@ -1,268 +1,5 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * Parts of this source were derived and modified from react-color,
- * released under the MIT license.
- *
- * https://github.com/casesandberg/react-color/
- *
- * Copyright (c) 2015 Case Sandberg
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { debounce, noop, partial } from 'lodash';
-/**
- * WordPress dependencies
- */
-
-import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
-import Alpha from './alpha';
-import Hue from './hue';
-import Inputs from './inputs';
-import Saturation from './saturation';
-import { colorToState, simpleCheckForValidColor, isValidHex } from './utils';
-
-const toLowerCase = value => String(value).toLowerCase();
-
-const isValueEmpty = data => {
-  if (data.source === 'hex' && data.hex === undefined) {
-    return true;
-  }
-
-  if (data.source === 'hsl' && (data.h === undefined || data.s === undefined || data.l === undefined)) {
-    return true;
-  }
-  /**
-   * Check that if source is `rgb`:
-   * `r`, `g` or `b` properties are not undefined
-   * OR (||) `h`, `s`, `v` or `a` properties are not undefined
-   * OR (||) `h`, `s`, `l` or `a` properties are not undefined
-   *
-   * before it was checking with NOT(!) statement witch for `0` (bool|int) values returns `true`
-   * this is a typecasting issue only visible for hex values that derive from #000000
-   */
-
-
-  return data.source === 'rgb' && (data.r === undefined || data.g === undefined || data.b === undefined) && (data.h === undefined || data.s === undefined || data.v === undefined || data.a === undefined) && (data.h === undefined || data.s === undefined || data.l === undefined || data.a === undefined);
-};
-
-const isValidColor = colors => colors.hex ? isValidHex(colors.hex) : simpleCheckForValidColor(colors);
-/**
- * Function that creates the new color object
- * from old data and the new value.
- *
- * @param {Object}        oldColors          The old color object.
- * @param {string}        oldColors.hex
- * @param {Object}        oldColors.rgb
- * @param {number}        oldColors.rgb.r
- * @param {number}        oldColors.rgb.g
- * @param {number}        oldColors.rgb.b
- * @param {number}        oldColors.rgb.a
- * @param {Object}        oldColors.hsl
- * @param {number}        oldColors.hsl.h
- * @param {number}        oldColors.hsl.s
- * @param {number}        oldColors.hsl.l
- * @param {number}        oldColors.hsl.a
- * @param {string}        oldColors.draftHex Same format as oldColors.hex
- * @param {Object}        oldColors.draftRgb Same format as oldColors.rgb
- * @param {Object}        oldColors.draftHsl Same format as oldColors.hsl
- * @param {Object}        data               Data containing the new value to update.
- * @param {Object}        data.source        One of `hex`, `rgb`, `hsl`.
- * @param {string|number} data.value         Value to update.
- * @param {string}        data.valueKey      Depends on `data.source` values:
- *                                           - when source = `rgb`, valuKey can be `r`, `g`, `b`, or `a`.
- *                                           - when source = `hsl`, valuKey can be `h`, `s`, `l`, or `a`.
- * @return {Object} A new color object for a specific source. For example:
- * { source: 'rgb', r: 1, g: 2, b:3, a:0 }
- */
-
-
-const dataToColors = (oldColors, {
-  source,
-  valueKey,
-  value
-}) => {
-  if (source === 'hex') {
-    return {
-      source,
-      [source]: value
-    };
-  }
-
-  return {
-    source,
-    ...{ ...oldColors[source],
-      ...{
-        [valueKey]: value
-      }
-    }
-  };
-};
-
-export default class ColorPicker extends Component {
-  constructor({
-    color = '0071a1'
-  }) {
-    super(...arguments);
-    const colors = colorToState(color);
-    this.state = { ...colors,
-      draftHex: toLowerCase(colors.hex),
-      draftRgb: colors.rgb,
-      draftHsl: colors.hsl
-    };
-    this.commitValues = this.commitValues.bind(this);
-    this.setDraftValues = this.setDraftValues.bind(this);
-    this.resetDraftValues = this.resetDraftValues.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-  }
-
-  commitValues(data) {
-    const {
-      oldHue,
-      onChangeComplete = noop
-    } = this.props;
-
-    if (isValidColor(data)) {
-      const colors = colorToState(data, data.h || oldHue);
-      this.setState({ ...colors,
-        draftHex: toLowerCase(colors.hex),
-        draftHsl: colors.hsl,
-        draftRgb: colors.rgb
-      }, debounce(partial(onChangeComplete, colors), 100));
-    }
-  }
-
-  resetDraftValues() {
-    this.setState({
-      draftHex: this.state.hex,
-      draftHsl: this.state.hsl,
-      draftRgb: this.state.rgb
-    });
-  }
-
-  setDraftValues(data) {
-    switch (data.source) {
-      case 'hex':
-        this.setState({
-          draftHex: toLowerCase(data.hex)
-        });
-        break;
-
-      case 'rgb':
-        this.setState({
-          draftRgb: data
-        });
-        break;
-
-      case 'hsl':
-        this.setState({
-          draftHsl: data
-        });
-        break;
-    }
-  }
-
-  handleInputChange(data) {
-    switch (data.state) {
-      case 'reset':
-        this.resetDraftValues();
-        break;
-
-      case 'commit':
-        const colors = dataToColors(this.state, data);
-
-        if (!isValueEmpty(colors)) {
-          this.commitValues(colors);
-        }
-
-        break;
-
-      case 'draft':
-        this.setDraftValues(dataToColors(this.state, data));
-        break;
-    }
-  }
-
-  render() {
-    const {
-      className,
-      disableAlpha
-    } = this.props;
-    const {
-      color,
-      hsl,
-      hsv,
-      rgb,
-      draftHex,
-      draftHsl,
-      draftRgb
-    } = this.state;
-    const classes = classnames(className, {
-      'components-color-picker': true,
-      'is-alpha-disabled': disableAlpha,
-      'is-alpha-enabled': !disableAlpha
-    });
-    return createElement("div", {
-      className: classes
-    }, createElement("div", {
-      className: "components-color-picker__saturation"
-    }, createElement(Saturation, {
-      hsl: hsl,
-      hsv: hsv,
-      onChange: this.commitValues
-    })), createElement("div", {
-      className: "components-color-picker__body"
-    }, createElement("div", {
-      className: "components-color-picker__controls"
-    }, createElement("div", {
-      className: "components-color-picker__swatch"
-    }, createElement("div", {
-      className: "components-color-picker__active",
-      style: {
-        backgroundColor: color && color.toRgbString()
-      }
-    })), createElement("div", {
-      className: "components-color-picker__toggles"
-    }, createElement(Hue, {
-      hsl: hsl,
-      onChange: this.commitValues
-    }), disableAlpha ? null : createElement(Alpha, {
-      rgb: rgb,
-      hsl: hsl,
-      onChange: this.commitValues
-    }))), createElement(Inputs, {
-      rgb: draftRgb,
-      hsl: draftHsl,
-      hex: draftHex,
-      onChange: this.handleInputChange,
-      disableAlpha: disableAlpha
-    })));
-  }
-
-}
+export { LegacyAdapter as ColorPicker } from './legacy-adapter';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/index.js"],"names":["classnames","debounce","noop","partial","Component","Alpha","Hue","Inputs","Saturation","colorToState","simpleCheckForValidColor","isValidHex","toLowerCase","value","String","isValueEmpty","data","source","hex","undefined","h","s","l","r","g","b","v","a","isValidColor","colors","dataToColors","oldColors","valueKey","ColorPicker","constructor","color","arguments","state","draftHex","draftRgb","rgb","draftHsl","hsl","commitValues","bind","setDraftValues","resetDraftValues","handleInputChange","oldHue","onChangeComplete","props","setState","render","className","disableAlpha","hsv","classes","backgroundColor","toRgbString"],"mappings":"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","sourcesContent":["/**\n * Parts of this source were derived and modified from react-color,\n * released under the MIT license.\n *\n * https://github.com/casesandberg/react-color/\n *\n * Copyright (c) 2015 Case Sandberg\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { debounce, noop, partial } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Alpha from './alpha';\nimport Hue from './hue';\nimport Inputs from './inputs';\nimport Saturation from './saturation';\nimport { colorToState, simpleCheckForValidColor, isValidHex } from './utils';\n\nconst toLowerCase = ( value ) => String( value ).toLowerCase();\nconst isValueEmpty = ( data ) => {\n\tif ( data.source === 'hex' && data.hex === undefined ) {\n\t\treturn true;\n\t}\n\n\tif (\n\t\tdata.source === 'hsl' &&\n\t\t( data.h === undefined || data.s === undefined || data.l === undefined )\n\t) {\n\t\treturn true;\n\t}\n\n\t/**\n\t * Check that if source is `rgb`:\n\t * `r`, `g` or `b` properties are not undefined\n\t * OR (||) `h`, `s`, `v` or `a` properties are not undefined\n\t * OR (||) `h`, `s`, `l` or `a` properties are not undefined\n\t *\n\t * before it was checking with NOT(!) statement witch for `0` (bool|int) values returns `true`\n\t * this is a typecasting issue only visible for hex values that derive from #000000\n\t */\n\treturn (\n\t\tdata.source === 'rgb' &&\n\t\t( data.r === undefined ||\n\t\t\tdata.g === undefined ||\n\t\t\tdata.b === undefined ) &&\n\t\t( data.h === undefined ||\n\t\t\tdata.s === undefined ||\n\t\t\tdata.v === undefined ||\n\t\t\tdata.a === undefined ) &&\n\t\t( data.h === undefined ||\n\t\t\tdata.s === undefined ||\n\t\t\tdata.l === undefined ||\n\t\t\tdata.a === undefined )\n\t);\n};\n\nconst isValidColor = ( colors ) =>\n\tcolors.hex ? isValidHex( colors.hex ) : simpleCheckForValidColor( colors );\n\n/**\n * Function that creates the new color object\n * from old data and the new value.\n *\n * @param {Object}        oldColors          The old color object.\n * @param {string}        oldColors.hex\n * @param {Object}        oldColors.rgb\n * @param {number}        oldColors.rgb.r\n * @param {number}        oldColors.rgb.g\n * @param {number}        oldColors.rgb.b\n * @param {number}        oldColors.rgb.a\n * @param {Object}        oldColors.hsl\n * @param {number}        oldColors.hsl.h\n * @param {number}        oldColors.hsl.s\n * @param {number}        oldColors.hsl.l\n * @param {number}        oldColors.hsl.a\n * @param {string}        oldColors.draftHex Same format as oldColors.hex\n * @param {Object}        oldColors.draftRgb Same format as oldColors.rgb\n * @param {Object}        oldColors.draftHsl Same format as oldColors.hsl\n * @param {Object}        data               Data containing the new value to update.\n * @param {Object}        data.source        One of `hex`, `rgb`, `hsl`.\n * @param {string|number} data.value         Value to update.\n * @param {string}        data.valueKey      Depends on `data.source` values:\n *                                           - when source = `rgb`, valuKey can be `r`, `g`, `b`, or `a`.\n *                                           - when source = `hsl`, valuKey can be `h`, `s`, `l`, or `a`.\n * @return {Object} A new color object for a specific source. For example:\n * { source: 'rgb', r: 1, g: 2, b:3, a:0 }\n */\nconst dataToColors = ( oldColors, { source, valueKey, value } ) => {\n\tif ( source === 'hex' ) {\n\t\treturn {\n\t\t\tsource,\n\t\t\t[ source ]: value,\n\t\t};\n\t}\n\treturn {\n\t\tsource,\n\t\t...{ ...oldColors[ source ], ...{ [ valueKey ]: value } },\n\t};\n};\n\nexport default class ColorPicker extends Component {\n\tconstructor( { color = '0071a1' } ) {\n\t\tsuper( ...arguments );\n\t\tconst colors = colorToState( color );\n\t\tthis.state = {\n\t\t\t...colors,\n\t\t\tdraftHex: toLowerCase( colors.hex ),\n\t\t\tdraftRgb: colors.rgb,\n\t\t\tdraftHsl: colors.hsl,\n\t\t};\n\t\tthis.commitValues = this.commitValues.bind( this );\n\t\tthis.setDraftValues = this.setDraftValues.bind( this );\n\t\tthis.resetDraftValues = this.resetDraftValues.bind( this );\n\t\tthis.handleInputChange = this.handleInputChange.bind( this );\n\t}\n\n\tcommitValues( data ) {\n\t\tconst { oldHue, onChangeComplete = noop } = this.props;\n\n\t\tif ( isValidColor( data ) ) {\n\t\t\tconst colors = colorToState( data, data.h || oldHue );\n\t\t\tthis.setState(\n\t\t\t\t{\n\t\t\t\t\t...colors,\n\t\t\t\t\tdraftHex: toLowerCase( colors.hex ),\n\t\t\t\t\tdraftHsl: colors.hsl,\n\t\t\t\t\tdraftRgb: colors.rgb,\n\t\t\t\t},\n\t\t\t\tdebounce( partial( onChangeComplete, colors ), 100 )\n\t\t\t);\n\t\t}\n\t}\n\n\tresetDraftValues() {\n\t\tthis.setState( {\n\t\t\tdraftHex: this.state.hex,\n\t\t\tdraftHsl: this.state.hsl,\n\t\t\tdraftRgb: this.state.rgb,\n\t\t} );\n\t}\n\n\tsetDraftValues( data ) {\n\t\tswitch ( data.source ) {\n\t\t\tcase 'hex':\n\t\t\t\tthis.setState( { draftHex: toLowerCase( data.hex ) } );\n\t\t\t\tbreak;\n\t\t\tcase 'rgb':\n\t\t\t\tthis.setState( { draftRgb: data } );\n\t\t\t\tbreak;\n\t\t\tcase 'hsl':\n\t\t\t\tthis.setState( { draftHsl: data } );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\thandleInputChange( data ) {\n\t\tswitch ( data.state ) {\n\t\t\tcase 'reset':\n\t\t\t\tthis.resetDraftValues();\n\t\t\t\tbreak;\n\t\t\tcase 'commit':\n\t\t\t\tconst colors = dataToColors( this.state, data );\n\t\t\t\tif ( ! isValueEmpty( colors ) ) {\n\t\t\t\t\tthis.commitValues( colors );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'draft':\n\t\t\t\tthis.setDraftValues( dataToColors( this.state, data ) );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { className, disableAlpha } = this.props;\n\t\tconst {\n\t\t\tcolor,\n\t\t\thsl,\n\t\t\thsv,\n\t\t\trgb,\n\t\t\tdraftHex,\n\t\t\tdraftHsl,\n\t\t\tdraftRgb,\n\t\t} = this.state;\n\t\tconst classes = classnames( className, {\n\t\t\t'components-color-picker': true,\n\t\t\t'is-alpha-disabled': disableAlpha,\n\t\t\t'is-alpha-enabled': ! disableAlpha,\n\t\t} );\n\n\t\treturn (\n\t\t\t<div className={ classes }>\n\t\t\t\t<div className=\"components-color-picker__saturation\">\n\t\t\t\t\t<Saturation\n\t\t\t\t\t\thsl={ hsl }\n\t\t\t\t\t\thsv={ hsv }\n\t\t\t\t\t\tonChange={ this.commitValues }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-color-picker__body\">\n\t\t\t\t\t<div className=\"components-color-picker__controls\">\n\t\t\t\t\t\t<div className=\"components-color-picker__swatch\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"components-color-picker__active\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\t\tcolor && color.toRgbString(),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"components-color-picker__toggles\">\n\t\t\t\t\t\t\t<Hue hsl={ hsl } onChange={ this.commitValues } />\n\t\t\t\t\t\t\t{ disableAlpha ? null : (\n\t\t\t\t\t\t\t\t<Alpha\n\t\t\t\t\t\t\t\t\trgb={ rgb }\n\t\t\t\t\t\t\t\t\thsl={ hsl }\n\t\t\t\t\t\t\t\t\tonChange={ this.commitValues }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Inputs\n\t\t\t\t\t\trgb={ draftRgb }\n\t\t\t\t\t\thsl={ draftHsl }\n\t\t\t\t\t\thex={ draftHex }\n\t\t\t\t\t\tonChange={ this.handleInputChange }\n\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/index.ts"],"names":["LegacyAdapter","ColorPicker"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,IAAIC,WAA1B,QAA6C,kBAA7C","sourcesContent":["/**\n * Internal dependencies\n */\nexport { LegacyAdapter as ColorPicker } from './legacy-adapter';\n"]}

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

@@ -5,7 +5,8 @@ import { createElement, Fragment } from "@wordpress/element";
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
 import HsvColorPicker from 'react-native-hsv-color-picker';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
@@ -20,20 +21,22 @@ import { Icon, check, close } from '@wordpress/icons';
  */
 
 import styles from './style.scss';
+extend([namesPlugin]);
 
-function ColorPicker({
-  shouldEnableBottomSheetScroll,
-  shouldEnableBottomSheetMaxHeight,
-  isBottomSheetContentScrolling,
-  setColor,
-  activeColor,
-  isGradientColor,
-  onNavigationBack,
-  onHandleClosingBottomSheet,
-  onBottomSheetClosed,
-  onHandleHardwareButtonPress,
-  bottomLabelText
-}) {
+function ColorPicker(_ref) {
+  let {
+    shouldEnableBottomSheetScroll,
+    shouldEnableBottomSheetMaxHeight,
+    isBottomSheetContentScrolling,
+    setColor,
+    activeColor,
+    isGradientColor,
+    onNavigationBack,
+    onHandleClosingBottomSheet,
+    onBottomSheetClosed,
+    onHandleHardwareButtonPress,
+    bottomLabelText
+  } = _ref;
   const didMount = useRef(false);
   const isIOS = Platform.OS === 'ios';
   const hitSlop = {
@@ -46,14 +49,14 @@ function ColorPicker({
     h: initH,
     s: initS,
     v: initV
-  } = !isGradientColor && activeColor ? tinycolor(activeColor).toHsv() : {
+  } = !isGradientColor && activeColor ? colord(activeColor).toHsv() : {
     h: 0,
-    s: 0.5,
-    v: 0.5
+    s: 50,
+    v: 50
   };
   const [hue, setHue] = useState(initH);
-  const [sat, setSaturation] = useState(initS);
-  const [val, setValue] = useState(initV);
+  const [sat, setSaturation] = useState(initS / 100);
+  const [val, setValue] = useState(initV / 100);
   const [savedColor] = useState(activeColor);
   const {
     paddingLeft: spacing,
@@ -69,7 +72,11 @@ function ColorPicker({
   const colorTextStyle = usePreferredColorSchemeStyle(styles.colorText, styles.colorTextDark);
   const selectColorTextStyle = usePreferredColorSchemeStyle(styles.selectColorText, styles.selectColorTextDark);
   const footerStyle = usePreferredColorSchemeStyle(styles.footer, styles.footerDark);
-  const currentColor = tinycolor(`hsv ${hue} ${sat} ${val}`).toHexString();
+  const currentColor = colord({
+    h: hue,
+    s: sat * 100,
+    v: val * 100
+  }).toHex();
   useEffect(() => {
     if (!didMount.current) {
       didMount.current = true;
@@ -95,16 +102,18 @@ function ColorPicker({
     }
   }, []);
 
-  function onHuePickerChange({
-    hue: h
-  }) {
+  function onHuePickerChange(_ref2) {
+    let {
+      hue: h
+    } = _ref2;
     setHue(h);
   }
 
-  function onSatValPickerChange({
-    saturation: s,
-    value: v
-  }) {
+  function onSatValPickerChange(_ref3) {
+    let {
+      saturation: s,
+      value: v
+    } = _ref3;
     setSaturation(s);
     setValue(v);
   }
@@ -172,5 +181,5 @@ function ColorPicker({
   })))));
 }
 
-export default ColorPicker;
+export { ColorPicker };
 //# sourceMappingURL=index.native.js.map

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","tinycolor","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","toHexString","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 tinycolor from 'tinycolor2';\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\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? tinycolor( activeColor ).toHsv()\n\t\t\t: { h: 0, s: 0.5, v: 0.5 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS );\n\tconst [ val, setValue ] = useState( initV );\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 = tinycolor(\n\t\t`hsv ${ hue } ${ sat } ${ val }`\n\t).toHexString();\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 default 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 { 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"]}

package/build-module/{ui/color-picker → color-picker}/input-with-slider.js

@@ -3,19 +3,20 @@ import { createElement } from "@wordpress/element";
 /**
  * Internal dependencies
  */
-import { HStack } from '../../h-stack';
-import { Text } from '../../text';
-import { Spacer } from '../../spacer';
-import { space } from '../utils/space';
+import { HStack } from '../h-stack';
+import { Text } from '../text';
+import { Spacer } from '../spacer';
+import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
-export const InputWithSlider = ({
-  min,
-  max,
-  label,
-  abbreviation,
-  onChange,
-  value
-}) => {
+export const InputWithSlider = _ref => {
+  let {
+    min,
+    max,
+    label,
+    abbreviation,
+    onChange,
+    value
+  } = _ref;
   return createElement(Spacer, {
     as: HStack,
     spacing: 4

package/build-module/color-picker/input-with-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["HStack","Text","Spacer","space","RangeControl","NumberControlWrapper","InputWithSlider","min","max","label","abbreviation","onChange","value"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,YAAT,EAAuBC,oBAAvB,QAAmD,UAAnD;AAWA,OAAO,MAAMC,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,cAAC,MAAD;AAAQ,IAAA,EAAE,EAAGZ,MAAb;AAAsB,IAAA,OAAO,EAAG;AAAhC,KACC,cAAC,oBAAD;AACC,IAAA,GAAG,EAAGO,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGV,IADN;AAEC,MAAA,WAAW,EAAGE,KAAK,CAAE,GAAF,CAFpB;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGO,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<Spacer as={ HStack } spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 3.5 ) }\n\t\t\t\t\t\tcolor=\"blue\"\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</Spacer>\n\t);\n};\n"]}

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

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