@wordpress/components 17.0.0 → 19.0.2

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HexInput = void 0;
+
+var _element = require("@wordpress/element");
+
+var _colord = require("colord");
+
+var _i18n = require("@wordpress/i18n");
+
+var _text = require("../text");
+
+var _spacer = require("../spacer");
+
+var _space = require("../ui/utils/space");
+
+var _styles = require("./styles");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const HexInput = _ref => {
+  let {
+    color,
+    onChange,
+    enableAlpha
+  } = _ref;
+
+  const handleValidate = value => {
+    if (!(0, _colord.colord)('#' + value).isValid()) {
+      throw new Error('Invalid hex color input');
+    }
+  };
+
+  return (0, _element.createElement)(_styles.ColorHexInputControl, {
+    prefix: (0, _element.createElement)(_spacer.Spacer, {
+      as: _text.Text,
+      marginLeft: (0, _space.space)(3.5),
+      color: "blue",
+      lineHeight: 1
+    }, "#"),
+    value: color.toHex().slice(1).toUpperCase(),
+    onChange: nextValue => {
+      onChange((0, _colord.colord)('#' + nextValue));
+    },
+    onValidate: handleValidate,
+    maxLength: enableAlpha ? 8 : 6,
+    label: (0, _i18n.__)('Hex color'),
+    hideLabelFromVision: true
+  });
+};
+
+exports.HexInput = HexInput;
+//# sourceMappingURL=hex-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","Text","toHex","slice","toUpperCase","nextValue"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAYO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAE,oBAAQ,MAAMA,KAAd,EAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,4BAAC,4BAAD;AACC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGC,UADN;AAEC,MAAA,UAAU,EAAG,kBAAO,GAAP,CAFd;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGP,KAAK,CAACQ,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3BV,MAAAA,QAAQ,CAAE,oBAAQ,MAAMU,SAAd,CAAF,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGR,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAjBT;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor=\"blue\"\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}

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

@@ -7,6 +7,8 @@ exports.HslInput = void 0;
 
 var _element = require("@wordpress/element");
 
+var _colord = require("colord");
+
 var _inputWithSlider = require("./input-with-slider");
 
 /**
@@ -16,65 +18,74 @@ var _inputWithSlider = require("./input-with-slider");
 /**
  * Internal dependencies
  */
-const HslInput = ({
-  color,
-  onChange,
-  enableAlpha
-}) => {
+const HslInput = _ref => {
+  let {
+    color,
+    onChange,
+    enableAlpha
+  } = _ref;
   const {
     h,
     s,
     l,
     a
-  } = color;
+  } = color.toHsl();
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inputWithSlider.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((0, _colord.colord)({
+        h: nextH,
+        s,
+        l,
+        a
+      }));
+    }
   }), (0, _element.createElement)(_inputWithSlider.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((0, _colord.colord)({
+        h,
+        s: nextS,
+        l,
+        a
+      }));
+    }
   }), (0, _element.createElement)(_inputWithSlider.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((0, _colord.colord)({
+        h,
+        s,
+        l: nextL,
+        a
+      }));
+    }
   }), enableAlpha && (0, _element.createElement)(_inputWithSlider.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((0, _colord.colord)({
+        h,
+        s,
+        l,
+        a: nextA / 100
+      }));
+    }
   }));
 };
 

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"names":["HslInput","color","onChange","enableAlpha","h","s","l","a","toHsl","nextH","nextS","nextL","Math","trunc","nextA"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AASO,MAAMA,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,qDACC,4BAAC,gCAAD;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,CAAE,oBAAQ;AAAEE,QAAAA,CAAC,EAAEK,KAAL;AAAYJ,QAAAA,CAAZ;AAAeC,QAAAA,CAAf;AAAkBC,QAAAA;AAAlB,OAAR,CAAF,CAAR;AACA;AARF,IADD,EAWC,4BAAC,gCAAD;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,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAAC,EAAEK,KAFI;AAGPJ,QAAAA,CAHO;AAIPC,QAAAA;AAJO,OAAR,CADO,CAAR;AAQA;AAfF,IAXD,EA4BC,4BAAC,gCAAD;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,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAAC,EAAEK,KAHI;AAIPJ,QAAAA;AAJO,OAAR,CADO,CAAR;AAQA;AAfF,IA5BD,EA6CGJ,WAAW,IACZ,4BAAC,gCAAD;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,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAHO;AAIPC,QAAAA,CAAC,EAAEO,KAAK,GAAG;AAJJ,OAAR,CADO,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/color-picker/index.js

@@ -1,284 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _lodash = require("lodash");
-
-var _alpha = _interopRequireDefault(require("./alpha"));
-
-var _hue = _interopRequireDefault(require("./hue"));
-
-var _inputs = _interopRequireDefault(require("./inputs"));
-
-var _saturation = _interopRequireDefault(require("./saturation"));
-
-var _utils = require("./utils");
-
-/**
- * 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
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-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 ? (0, _utils.isValidHex)(colors.hex) : (0, _utils.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
-    };
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function () {
+    return _legacyAdapter.LegacyAdapter;
   }
+});
 
-  return {
-    source,
-    ...{ ...oldColors[source],
-      ...{
-        [valueKey]: value
-      }
-    }
-  };
-};
-
-class ColorPicker extends _element.Component {
-  constructor({
-    color = '0071a1'
-  }) {
-    super(...arguments);
-    const colors = (0, _utils.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 = _lodash.noop
-    } = this.props;
-
-    if (isValidColor(data)) {
-      const colors = (0, _utils.colorToState)(data, data.h || oldHue);
-      this.setState({ ...colors,
-        draftHex: toLowerCase(colors.hex),
-        draftHsl: colors.hsl,
-        draftRgb: colors.rgb
-      }, (0, _lodash.debounce)((0, _lodash.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 = (0, _classnames.default)(className, {
-      'components-color-picker': true,
-      'is-alpha-disabled': disableAlpha,
-      'is-alpha-enabled': !disableAlpha
-    });
-    return (0, _element.createElement)("div", {
-      className: classes
-    }, (0, _element.createElement)("div", {
-      className: "components-color-picker__saturation"
-    }, (0, _element.createElement)(_saturation.default, {
-      hsl: hsl,
-      hsv: hsv,
-      onChange: this.commitValues
-    })), (0, _element.createElement)("div", {
-      className: "components-color-picker__body"
-    }, (0, _element.createElement)("div", {
-      className: "components-color-picker__controls"
-    }, (0, _element.createElement)("div", {
-      className: "components-color-picker__swatch"
-    }, (0, _element.createElement)("div", {
-      className: "components-color-picker__active",
-      style: {
-        backgroundColor: color && color.toRgbString()
-      }
-    })), (0, _element.createElement)("div", {
-      className: "components-color-picker__toggles"
-    }, (0, _element.createElement)(_hue.default, {
-      hsl: hsl,
-      onChange: this.commitValues
-    }), disableAlpha ? null : (0, _element.createElement)(_alpha.default, {
-      rgb: rgb,
-      hsl: hsl,
-      onChange: this.commitValues
-    }))), (0, _element.createElement)(_inputs.default, {
-      rgb: draftRgb,
-      hsl: draftHsl,
-      hex: draftHex,
-      onChange: this.handleInputChange,
-      disableAlpha: disableAlpha
-    })));
-  }
-
-}
-
-exports.default = ColorPicker;
+var _legacyAdapter = require("./legacy-adapter");
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/index.js"],"names":["toLowerCase","value","String","isValueEmpty","data","source","hex","undefined","h","s","l","r","g","b","v","a","isValidColor","colors","dataToColors","oldColors","valueKey","ColorPicker","Component","constructor","color","arguments","state","draftHex","draftRgb","rgb","draftHsl","hsl","commitValues","bind","setDraftValues","resetDraftValues","handleInputChange","oldHue","onChangeComplete","noop","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":[],"mappings":";;;;;;;;;;;;AAGA","sourcesContent":["/**\n * Internal dependencies\n */\nexport { LegacyAdapter as ColorPicker } from './legacy-adapter';\n"]}

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ColorPicker = ColorPicker;
 
 var _element = require("@wordpress/element");
 
@@ -13,7 +13,9 @@ var _reactNative = require("react-native");
 
 var _reactNativeHsvColorPicker = _interopRequireDefault(require("react-native-hsv-color-picker"));
 
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _colord = require("colord");
+
+var _names = _interopRequireDefault(require("colord/plugins/names"));
 
 var _i18n = require("@wordpress/i18n");
 
@@ -36,19 +38,22 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
-function ColorPicker({
-  shouldEnableBottomSheetScroll,
-  shouldEnableBottomSheetMaxHeight,
-  isBottomSheetContentScrolling,
-  setColor,
-  activeColor,
-  isGradientColor,
-  onNavigationBack,
-  onHandleClosingBottomSheet,
-  onBottomSheetClosed,
-  onHandleHardwareButtonPress,
-  bottomLabelText
-}) {
+(0, _colord.extend)([_names.default]);
+
+function ColorPicker(_ref) {
+  let {
+    shouldEnableBottomSheetScroll,
+    shouldEnableBottomSheetMaxHeight,
+    isBottomSheetContentScrolling,
+    setColor,
+    activeColor,
+    isGradientColor,
+    onNavigationBack,
+    onHandleClosingBottomSheet,
+    onBottomSheetClosed,
+    onHandleHardwareButtonPress,
+    bottomLabelText
+  } = _ref;
   const didMount = (0, _element.useRef)(false);
   const isIOS = _reactNative.Platform.OS === 'ios';
   const hitSlop = {
@@ -61,14 +66,14 @@ function ColorPicker({
     h: initH,
     s: initS,
     v: initV
-  } = !isGradientColor && activeColor ? (0, _tinycolor.default)(activeColor).toHsv() : {
+  } = !isGradientColor && activeColor ? (0, _colord.colord)(activeColor).toHsv() : {
     h: 0,
-    s: 0.5,
-    v: 0.5
+    s: 50,
+    v: 50
   };
   const [hue, setHue] = (0, _element.useState)(initH);
-  const [sat, setSaturation] = (0, _element.useState)(initS);
-  const [val, setValue] = (0, _element.useState)(initV);
+  const [sat, setSaturation] = (0, _element.useState)(initS / 100);
+  const [val, setValue] = (0, _element.useState)(initV / 100);
   const [savedColor] = (0, _element.useState)(activeColor);
   const {
     paddingLeft: spacing,
@@ -84,7 +89,11 @@ function ColorPicker({
   const colorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.colorText, _style.default.colorTextDark);
   const selectColorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.selectColorText, _style.default.selectColorTextDark);
   const footerStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.footer, _style.default.footerDark);
-  const currentColor = (0, _tinycolor.default)(`hsv ${hue} ${sat} ${val}`).toHexString();
+  const currentColor = (0, _colord.colord)({
+    h: hue,
+    s: sat * 100,
+    v: val * 100
+  }).toHex();
   (0, _element.useEffect)(() => {
     if (!didMount.current) {
       didMount.current = true;
@@ -110,16 +119,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);
   }
@@ -186,7 +197,4 @@ function ColorPicker({
     style: applyButtonStyle
   })))));
 }
-
-var _default = ColorPicker;
-exports.default = _default;
 //# sourceMappingURL=index.native.js.map