@wordpress/components 18.0.0 → 19.0.3

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

@@ -1,320 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement } from "@wordpress/element";
-
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-/**
- * WordPress dependencies
- */
-
-import { speak } from '@wordpress/a11y';
-import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { DOWN, ENTER, UP } from '@wordpress/keycodes';
-import { pure } from '@wordpress/compose';
-import { chevronDown } from '@wordpress/icons';
-/**
- * Internal dependencies
- */
-
-import Button from '../button';
-import TextControl from '../text-control';
-import { VisuallyHidden } from '../visually-hidden';
-import { isValidHex } from './utils';
-/* Wrapper for TextControl, only used to handle intermediate state while typing. */
-
-export class Input extends Component {
-  constructor() {
-    super(...arguments);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  handleBlur() {
-    const {
-      value,
-      valueKey,
-      onChange,
-      source
-    } = this.props;
-    onChange({
-      source,
-      state: 'commit',
-      value,
-      valueKey
-    });
-  }
-
-  handleChange(value) {
-    const {
-      valueKey,
-      onChange,
-      source
-    } = this.props;
-
-    if (value.length > 4 && isValidHex(value)) {
-      onChange({
-        source,
-        state: 'commit',
-        value,
-        valueKey
-      });
-    } else {
-      onChange({
-        source,
-        state: 'draft',
-        value,
-        valueKey
-      });
-    }
-  }
-
-  handleKeyDown({
-    keyCode
-  }) {
-    if (keyCode !== ENTER && keyCode !== UP && keyCode !== DOWN) {
-      return;
-    }
-
-    const {
-      value,
-      valueKey,
-      onChange,
-      source
-    } = this.props;
-    onChange({
-      source,
-      state: 'commit',
-      value,
-      valueKey
-    });
-  }
-
-  render() {
-    const {
-      label,
-      value,
-      ...props
-    } = this.props;
-    return createElement(TextControl, _extends({
-      className: "components-color-picker__inputs-field",
-      label: label,
-      value: value,
-      onChange: newValue => this.handleChange(newValue),
-      onBlur: this.handleBlur,
-      onKeyDown: this.handleKeyDown
-    }, omit(props, ['onChange', 'valueKey', 'source'])));
-  }
-
-}
-const PureButton = pure(Button);
-export class Inputs extends Component {
-  constructor({
-    hsl
-  }) {
-    super(...arguments);
-    const view = hsl.a === 1 ? 'hex' : 'rgb';
-    this.state = {
-      view
-    };
-    this.toggleViews = this.toggleViews.bind(this);
-    this.resetDraftValues = this.resetDraftValues.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.normalizeValue = this.normalizeValue.bind(this);
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (props.hsl.a !== 1 && state.view === 'hex') {
-      return {
-        view: 'rgb'
-      };
-    }
-
-    return null;
-  }
-
-  toggleViews() {
-    if (this.state.view === 'hex') {
-      this.setState({
-        view: 'rgb'
-      }, this.resetDraftValues);
-      speak(__('RGB mode active'));
-    } else if (this.state.view === 'rgb') {
-      this.setState({
-        view: 'hsl'
-      }, this.resetDraftValues);
-      speak(__('Hue/saturation/lightness mode active'));
-    } else if (this.state.view === 'hsl') {
-      if (this.props.hsl.a === 1) {
-        this.setState({
-          view: 'hex'
-        }, this.resetDraftValues);
-        speak(__('Hex color mode active'));
-      } else {
-        this.setState({
-          view: 'rgb'
-        }, this.resetDraftValues);
-        speak(__('RGB mode active'));
-      }
-    }
-  }
-
-  resetDraftValues() {
-    return this.props.onChange({
-      state: 'reset'
-    });
-  }
-
-  normalizeValue(valueKey, value) {
-    if (valueKey !== 'a') {
-      return value;
-    }
-
-    if (value < 0) {
-      return 0;
-    } else if (value > 1) {
-      return 1;
-    }
-
-    return Math.round(value * 100) / 100;
-  }
-
-  handleChange({
-    source,
-    state,
-    value,
-    valueKey
-  }) {
-    this.props.onChange({
-      source,
-      state,
-      valueKey,
-      value: this.normalizeValue(valueKey, value)
-    });
-  }
-
-  renderFields() {
-    const {
-      disableAlpha = false
-    } = this.props;
-
-    if (this.state.view === 'hex') {
-      return createElement("div", {
-        className: "components-color-picker__inputs-fields"
-      }, createElement(Input, {
-        source: this.state.view,
-        label: __('Color value in hexadecimal'),
-        valueKey: "hex",
-        value: this.props.hex,
-        onChange: this.handleChange
-      }));
-    } else if (this.state.view === 'rgb') {
-      const legend = disableAlpha ? __('Color value in RGB') : __('Color value in RGBA');
-      return createElement("fieldset", null, createElement(VisuallyHidden, {
-        as: "legend"
-      }, legend), createElement("div", {
-        className: "components-color-picker__inputs-fields"
-      }, createElement(Input, {
-        source: this.state.view,
-        label: "r",
-        valueKey: "r",
-        value: this.props.rgb.r,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "255"
-      }), createElement(Input, {
-        source: this.state.view,
-        label: "g",
-        valueKey: "g",
-        value: this.props.rgb.g,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "255"
-      }), createElement(Input, {
-        source: this.state.view,
-        label: "b",
-        valueKey: "b",
-        value: this.props.rgb.b,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "255"
-      }), disableAlpha ? null : createElement(Input, {
-        source: this.state.view,
-        label: "a",
-        valueKey: "a",
-        value: this.props.rgb.a,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "1",
-        step: "0.01"
-      })));
-    } else if (this.state.view === 'hsl') {
-      const legend = disableAlpha ? __('Color value in HSL') : __('Color value in HSLA');
-      return createElement("fieldset", null, createElement(VisuallyHidden, {
-        as: "legend"
-      }, legend), createElement("div", {
-        className: "components-color-picker__inputs-fields"
-      }, createElement(Input, {
-        source: this.state.view,
-        label: "h",
-        valueKey: "h",
-        value: this.props.hsl.h,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "359"
-      }), createElement(Input, {
-        source: this.state.view,
-        label: "s",
-        valueKey: "s",
-        value: this.props.hsl.s,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "100"
-      }), createElement(Input, {
-        source: this.state.view,
-        label: "l",
-        valueKey: "l",
-        value: this.props.hsl.l,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "100"
-      }), disableAlpha ? null : createElement(Input, {
-        source: this.state.view,
-        label: "a",
-        valueKey: "a",
-        value: this.props.hsl.a,
-        onChange: this.handleChange,
-        type: "number",
-        min: "0",
-        max: "1",
-        step: "0.05"
-      })));
-    }
-  }
-
-  render() {
-    return createElement("div", {
-      className: "components-color-picker__inputs-wrapper"
-    }, this.renderFields(), createElement("div", {
-      className: "components-color-picker__inputs-toggle-wrapper"
-    }, createElement(PureButton, {
-      className: "components-color-picker__inputs-toggle",
-      icon: chevronDown,
-      label: __('Change color format'),
-      onClick: this.toggleViews
-    })));
-  }
-
-}
-export default Inputs;
-//# sourceMappingURL=inputs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/inputs.js"],"names":["omit","speak","__","Component","DOWN","ENTER","UP","pure","chevronDown","Button","TextControl","VisuallyHidden","isValidHex","Input","constructor","arguments","handleBlur","bind","handleChange","handleKeyDown","value","valueKey","onChange","source","props","state","length","keyCode","render","label","newValue","PureButton","Inputs","hsl","view","a","toggleViews","resetDraftValues","normalizeValue","getDerivedStateFromProps","setState","Math","round","renderFields","disableAlpha","hex","legend","rgb","r","g","b","h","s","l"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\nimport { Component } from '@wordpress/element';\nimport { DOWN, ENTER, UP } from '@wordpress/keycodes';\nimport { pure } from '@wordpress/compose';\nimport { chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport TextControl from '../text-control';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { isValidHex } from './utils';\n\n/* Wrapper for TextControl, only used to handle intermediate state while typing. */\nexport class Input extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.handleBlur = this.handleBlur.bind( this );\n\t\tthis.handleChange = this.handleChange.bind( this );\n\t\tthis.handleKeyDown = this.handleKeyDown.bind( this );\n\t}\n\n\thandleBlur() {\n\t\tconst { value, valueKey, onChange, source } = this.props;\n\t\tonChange( {\n\t\t\tsource,\n\t\t\tstate: 'commit',\n\t\t\tvalue,\n\t\t\tvalueKey,\n\t\t} );\n\t}\n\n\thandleChange( value ) {\n\t\tconst { valueKey, onChange, source } = this.props;\n\t\tif ( value.length > 4 && isValidHex( value ) ) {\n\t\t\tonChange( {\n\t\t\t\tsource,\n\t\t\t\tstate: 'commit',\n\t\t\t\tvalue,\n\t\t\t\tvalueKey,\n\t\t\t} );\n\t\t} else {\n\t\t\tonChange( {\n\t\t\t\tsource,\n\t\t\t\tstate: 'draft',\n\t\t\t\tvalue,\n\t\t\t\tvalueKey,\n\t\t\t} );\n\t\t}\n\t}\n\n\thandleKeyDown( { keyCode } ) {\n\t\tif ( keyCode !== ENTER && keyCode !== UP && keyCode !== DOWN ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { value, valueKey, onChange, source } = this.props;\n\t\tonChange( {\n\t\t\tsource,\n\t\t\tstate: 'commit',\n\t\t\tvalue,\n\t\t\tvalueKey,\n\t\t} );\n\t}\n\n\trender() {\n\t\tconst { label, value, ...props } = this.props;\n\t\treturn (\n\t\t\t<TextControl\n\t\t\t\tclassName=\"components-color-picker__inputs-field\"\n\t\t\t\tlabel={ label }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ ( newValue ) => this.handleChange( newValue ) }\n\t\t\t\tonBlur={ this.handleBlur }\n\t\t\t\tonKeyDown={ this.handleKeyDown }\n\t\t\t\t{ ...omit( props, [ 'onChange', 'valueKey', 'source' ] ) }\n\t\t\t/>\n\t\t);\n\t}\n}\n\nconst PureButton = pure( Button );\n\nexport class Inputs extends Component {\n\tconstructor( { hsl } ) {\n\t\tsuper( ...arguments );\n\n\t\tconst view = hsl.a === 1 ? 'hex' : 'rgb';\n\t\tthis.state = { view };\n\n\t\tthis.toggleViews = this.toggleViews.bind( this );\n\t\tthis.resetDraftValues = this.resetDraftValues.bind( this );\n\t\tthis.handleChange = this.handleChange.bind( this );\n\t\tthis.normalizeValue = this.normalizeValue.bind( this );\n\t}\n\n\tstatic getDerivedStateFromProps( props, state ) {\n\t\tif ( props.hsl.a !== 1 && state.view === 'hex' ) {\n\t\t\treturn { view: 'rgb' };\n\t\t}\n\t\treturn null;\n\t}\n\n\ttoggleViews() {\n\t\tif ( this.state.view === 'hex' ) {\n\t\t\tthis.setState( { view: 'rgb' }, this.resetDraftValues );\n\n\t\t\tspeak( __( 'RGB mode active' ) );\n\t\t} else if ( this.state.view === 'rgb' ) {\n\t\t\tthis.setState( { view: 'hsl' }, this.resetDraftValues );\n\n\t\t\tspeak( __( 'Hue/saturation/lightness mode active' ) );\n\t\t} else if ( this.state.view === 'hsl' ) {\n\t\t\tif ( this.props.hsl.a === 1 ) {\n\t\t\t\tthis.setState( { view: 'hex' }, this.resetDraftValues );\n\n\t\t\t\tspeak( __( 'Hex color mode active' ) );\n\t\t\t} else {\n\t\t\t\tthis.setState( { view: 'rgb' }, this.resetDraftValues );\n\n\t\t\t\tspeak( __( 'RGB mode active' ) );\n\t\t\t}\n\t\t}\n\t}\n\n\tresetDraftValues() {\n\t\treturn this.props.onChange( {\n\t\t\tstate: 'reset',\n\t\t} );\n\t}\n\n\tnormalizeValue( valueKey, value ) {\n\t\tif ( valueKey !== 'a' ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tif ( value < 0 ) {\n\t\t\treturn 0;\n\t\t} else if ( value > 1 ) {\n\t\t\treturn 1;\n\t\t}\n\t\treturn Math.round( value * 100 ) / 100;\n\t}\n\n\thandleChange( { source, state, value, valueKey } ) {\n\t\tthis.props.onChange( {\n\t\t\tsource,\n\t\t\tstate,\n\t\t\tvalueKey,\n\t\t\tvalue: this.normalizeValue( valueKey, value ),\n\t\t} );\n\t}\n\n\trenderFields() {\n\t\tconst { disableAlpha = false } = this.props;\n\t\tif ( this.state.view === 'hex' ) {\n\t\t\treturn (\n\t\t\t\t<div className=\"components-color-picker__inputs-fields\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\tlabel={ __( 'Color value in hexadecimal' ) }\n\t\t\t\t\t\tvalueKey=\"hex\"\n\t\t\t\t\t\tvalue={ this.props.hex }\n\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else if ( this.state.view === 'rgb' ) {\n\t\t\tconst legend = disableAlpha\n\t\t\t\t? __( 'Color value in RGB' )\n\t\t\t\t: __( 'Color value in RGBA' );\n\t\t\treturn (\n\t\t\t\t<fieldset>\n\t\t\t\t\t<VisuallyHidden as=\"legend\">{ legend }</VisuallyHidden>\n\t\t\t\t\t<div className=\"components-color-picker__inputs-fields\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"r\"\n\t\t\t\t\t\t\tvalueKey=\"r\"\n\t\t\t\t\t\t\tvalue={ this.props.rgb.r }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"255\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"g\"\n\t\t\t\t\t\t\tvalueKey=\"g\"\n\t\t\t\t\t\t\tvalue={ this.props.rgb.g }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"255\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"b\"\n\t\t\t\t\t\t\tvalueKey=\"b\"\n\t\t\t\t\t\t\tvalue={ this.props.rgb.b }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"255\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ disableAlpha ? null : (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\t\tlabel=\"a\"\n\t\t\t\t\t\t\t\tvalueKey=\"a\"\n\t\t\t\t\t\t\t\tvalue={ this.props.rgb.a }\n\t\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\t\tmax=\"1\"\n\t\t\t\t\t\t\t\tstep=\"0.01\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t);\n\t\t} else if ( this.state.view === 'hsl' ) {\n\t\t\tconst legend = disableAlpha\n\t\t\t\t? __( 'Color value in HSL' )\n\t\t\t\t: __( 'Color value in HSLA' );\n\t\t\treturn (\n\t\t\t\t<fieldset>\n\t\t\t\t\t<VisuallyHidden as=\"legend\">{ legend }</VisuallyHidden>\n\t\t\t\t\t<div className=\"components-color-picker__inputs-fields\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"h\"\n\t\t\t\t\t\t\tvalueKey=\"h\"\n\t\t\t\t\t\t\tvalue={ this.props.hsl.h }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"359\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"s\"\n\t\t\t\t\t\t\tvalueKey=\"s\"\n\t\t\t\t\t\t\tvalue={ this.props.hsl.s }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"100\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\tlabel=\"l\"\n\t\t\t\t\t\t\tvalueKey=\"l\"\n\t\t\t\t\t\t\tvalue={ this.props.hsl.l }\n\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\tmax=\"100\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ disableAlpha ? null : (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tsource={ this.state.view }\n\t\t\t\t\t\t\t\tlabel=\"a\"\n\t\t\t\t\t\t\t\tvalueKey=\"a\"\n\t\t\t\t\t\t\t\tvalue={ this.props.hsl.a }\n\t\t\t\t\t\t\t\tonChange={ this.handleChange }\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\t\t\tmax=\"1\"\n\t\t\t\t\t\t\t\tstep=\"0.05\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div className=\"components-color-picker__inputs-wrapper\">\n\t\t\t\t{ this.renderFields() }\n\t\t\t\t<div className=\"components-color-picker__inputs-toggle-wrapper\">\n\t\t\t\t\t<PureButton\n\t\t\t\t\t\tclassName=\"components-color-picker__inputs-toggle\"\n\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\tlabel={ __( 'Change color format' ) }\n\t\t\t\t\t\tonClick={ this.toggleViews }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default Inputs;\n"]}

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

@@ -1,191 +0,0 @@
-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 { clamp, noop, throttle } from 'lodash';
-/**
- * WordPress dependencies
- */
-
-import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { TAB, UP, DOWN, RIGHT, LEFT, PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';
-import { compose, pure, withInstanceId } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-
-import { calculateSaturationChange } from './utils';
-import Button from '../button';
-import { VisuallyHidden } from '../visually-hidden';
-export class Saturation extends Component {
-  constructor(props) {
-    super(props);
-    this.throttle = throttle((fn, data, e) => {
-      fn(data, e);
-    }, 50);
-    this.container = createRef();
-    this.saturate = this.saturate.bind(this);
-    this.brighten = this.brighten.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  componentWillUnmount() {
-    this.throttle.cancel();
-    this.unbindEventListeners();
-  }
-
-  saturate(amount = 0.01) {
-    const {
-      hsv,
-      onChange = noop
-    } = this.props;
-    const intSaturation = clamp(hsv.s + Math.round(amount * 100), 0, 100);
-    const change = {
-      h: hsv.h,
-      s: intSaturation,
-      v: hsv.v,
-      a: hsv.a,
-      source: 'rgb'
-    };
-    onChange(change);
-  }
-
-  brighten(amount = 0.01) {
-    const {
-      hsv,
-      onChange = noop
-    } = this.props;
-    const intValue = clamp(hsv.v + Math.round(amount * 100), 0, 100);
-    const change = {
-      h: hsv.h,
-      s: hsv.s,
-      v: intValue,
-      a: hsv.a,
-      source: 'rgb'
-    };
-    onChange(change);
-  }
-
-  handleChange(e) {
-    const {
-      onChange = noop
-    } = this.props;
-    const change = calculateSaturationChange(e, this.props, this.container.current);
-    this.throttle(onChange, change, e);
-  }
-
-  handleMouseDown(e) {
-    this.handleChange(e);
-    window.addEventListener('mousemove', this.handleChange);
-    window.addEventListener('mouseup', this.handleMouseUp);
-  }
-
-  handleMouseUp() {
-    this.unbindEventListeners();
-  }
-
-  unbindEventListeners() {
-    window.removeEventListener('mousemove', this.handleChange);
-    window.removeEventListener('mouseup', this.handleMouseUp);
-  }
-
-  handleKeyDown(event) {
-    const {
-      keyCode,
-      shiftKey
-    } = event;
-    const shortcuts = {
-      [UP]: () => this.brighten(shiftKey ? 0.1 : 0.01),
-      [PAGEUP]: () => this.brighten(1),
-      [DOWN]: () => this.brighten(shiftKey ? -0.1 : -0.01),
-      [PAGEDOWN]: () => this.brighten(-1),
-      [RIGHT]: () => this.saturate(shiftKey ? 0.1 : 0.01),
-      [END]: () => this.saturate(1),
-      [LEFT]: () => this.saturate(shiftKey ? -0.1 : -0.01),
-      [HOME]: () => this.saturate(-1)
-    };
-
-    for (const code in shortcuts) {
-      if (code === String(keyCode)) {
-        shortcuts[keyCode]();
-      }
-    }
-
-    if (keyCode !== TAB) {
-      event.preventDefault();
-    }
-  }
-
-  render() {
-    const {
-      hsv,
-      hsl,
-      instanceId
-    } = this.props;
-    const pointerLocation = {
-      top: `${-hsv.v + 100}%`,
-      left: `${hsv.s}%`
-    };
-    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
-    return createElement("div", {
-      style: {
-        background: `hsl(${hsl.h},100%, 50%)`
-      },
-      className: "components-color-picker__saturation-color",
-      ref: this.container,
-      onMouseDown: this.handleMouseDown,
-      onTouchMove: this.handleChange,
-      onTouchStart: this.handleChange,
-      role: "application"
-    }, createElement("div", {
-      className: "components-color-picker__saturation-white"
-    }), createElement("div", {
-      className: "components-color-picker__saturation-black"
-    }), createElement(Button, {
-      "aria-label": __('Choose a shade'),
-      "aria-describedby": `color-picker-saturation-${instanceId}`,
-      className: "components-color-picker__saturation-pointer",
-      style: pointerLocation,
-      onKeyDown: this.handleKeyDown
-    }), createElement(VisuallyHidden, {
-      id: `color-picker-saturation-${instanceId}`
-    }, __('Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.')));
-    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-  }
-
-}
-export default compose(pure, withInstanceId)(Saturation);
-//# sourceMappingURL=saturation.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/saturation.js"],"names":["clamp","noop","throttle","__","Component","createRef","TAB","UP","DOWN","RIGHT","LEFT","PAGEUP","PAGEDOWN","HOME","END","compose","pure","withInstanceId","calculateSaturationChange","Button","VisuallyHidden","Saturation","constructor","props","fn","data","e","container","saturate","bind","brighten","handleChange","handleMouseDown","handleMouseUp","handleKeyDown","componentWillUnmount","cancel","unbindEventListeners","amount","hsv","onChange","intSaturation","s","Math","round","change","h","v","a","source","intValue","current","window","addEventListener","removeEventListener","event","keyCode","shiftKey","shortcuts","code","String","preventDefault","render","hsl","instanceId","pointerLocation","top","left","background"],"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 { clamp, noop, throttle } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, createRef } from '@wordpress/element';\nimport {\n\tTAB,\n\tUP,\n\tDOWN,\n\tRIGHT,\n\tLEFT,\n\tPAGEUP,\n\tPAGEDOWN,\n\tHOME,\n\tEND,\n} from '@wordpress/keycodes';\nimport { compose, pure, withInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { calculateSaturationChange } from './utils';\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\n\nexport class Saturation extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.throttle = throttle( ( fn, data, e ) => {\n\t\t\tfn( data, e );\n\t\t}, 50 );\n\n\t\tthis.container = createRef();\n\t\tthis.saturate = this.saturate.bind( this );\n\t\tthis.brighten = this.brighten.bind( this );\n\t\tthis.handleChange = this.handleChange.bind( this );\n\t\tthis.handleMouseDown = this.handleMouseDown.bind( this );\n\t\tthis.handleMouseUp = this.handleMouseUp.bind( this );\n\t\tthis.handleKeyDown = this.handleKeyDown.bind( this );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.throttle.cancel();\n\t\tthis.unbindEventListeners();\n\t}\n\n\tsaturate( amount = 0.01 ) {\n\t\tconst { hsv, onChange = noop } = this.props;\n\t\tconst intSaturation = clamp(\n\t\t\thsv.s + Math.round( amount * 100 ),\n\t\t\t0,\n\t\t\t100\n\t\t);\n\t\tconst change = {\n\t\t\th: hsv.h,\n\t\t\ts: intSaturation,\n\t\t\tv: hsv.v,\n\t\t\ta: hsv.a,\n\t\t\tsource: 'rgb',\n\t\t};\n\n\t\tonChange( change );\n\t}\n\n\tbrighten( amount = 0.01 ) {\n\t\tconst { hsv, onChange = noop } = this.props;\n\t\tconst intValue = clamp( hsv.v + Math.round( amount * 100 ), 0, 100 );\n\t\tconst change = {\n\t\t\th: hsv.h,\n\t\t\ts: hsv.s,\n\t\t\tv: intValue,\n\t\t\ta: hsv.a,\n\t\t\tsource: 'rgb',\n\t\t};\n\n\t\tonChange( change );\n\t}\n\n\thandleChange( e ) {\n\t\tconst { onChange = noop } = this.props;\n\t\tconst change = calculateSaturationChange(\n\t\t\te,\n\t\t\tthis.props,\n\t\t\tthis.container.current\n\t\t);\n\t\tthis.throttle( onChange, change, e );\n\t}\n\n\thandleMouseDown( e ) {\n\t\tthis.handleChange( e );\n\t\twindow.addEventListener( 'mousemove', this.handleChange );\n\t\twindow.addEventListener( 'mouseup', this.handleMouseUp );\n\t}\n\n\thandleMouseUp() {\n\t\tthis.unbindEventListeners();\n\t}\n\n\tunbindEventListeners() {\n\t\twindow.removeEventListener( 'mousemove', this.handleChange );\n\t\twindow.removeEventListener( 'mouseup', this.handleMouseUp );\n\t}\n\n\thandleKeyDown( event ) {\n\t\tconst { keyCode, shiftKey } = event;\n\t\tconst shortcuts = {\n\t\t\t[ UP ]: () => this.brighten( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ PAGEUP ]: () => this.brighten( 1 ),\n\t\t\t[ DOWN ]: () => this.brighten( shiftKey ? -0.1 : -0.01 ),\n\t\t\t[ PAGEDOWN ]: () => this.brighten( -1 ),\n\t\t\t[ RIGHT ]: () => this.saturate( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ END ]: () => this.saturate( 1 ),\n\t\t\t[ LEFT ]: () => this.saturate( shiftKey ? -0.1 : -0.01 ),\n\t\t\t[ HOME ]: () => this.saturate( -1 ),\n\t\t};\n\n\t\tfor ( const code in shortcuts ) {\n\t\t\tif ( code === String( keyCode ) ) {\n\t\t\t\tshortcuts[ keyCode ]();\n\t\t\t}\n\t\t}\n\n\t\tif ( keyCode !== TAB ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { hsv, hsl, instanceId } = this.props;\n\t\tconst pointerLocation = {\n\t\t\ttop: `${ -hsv.v + 100 }%`,\n\t\t\tleft: `${ hsv.s }%`,\n\t\t};\n\n\t\t/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={ { background: `hsl(${ hsl.h },100%, 50%)` } }\n\t\t\t\tclassName=\"components-color-picker__saturation-color\"\n\t\t\t\tref={ this.container }\n\t\t\t\tonMouseDown={ this.handleMouseDown }\n\t\t\t\tonTouchMove={ this.handleChange }\n\t\t\t\tonTouchStart={ this.handleChange }\n\t\t\t\trole=\"application\"\n\t\t\t>\n\t\t\t\t<div className=\"components-color-picker__saturation-white\" />\n\t\t\t\t<div className=\"components-color-picker__saturation-black\" />\n\t\t\t\t<Button\n\t\t\t\t\taria-label={ __( 'Choose a shade' ) }\n\t\t\t\t\taria-describedby={ `color-picker-saturation-${ instanceId }` }\n\t\t\t\t\tclassName=\"components-color-picker__saturation-pointer\"\n\t\t\t\t\tstyle={ pointerLocation }\n\t\t\t\t\tonKeyDown={ this.handleKeyDown }\n\t\t\t\t/>\n\t\t\t\t<VisuallyHidden\n\t\t\t\t\tid={ `color-picker-saturation-${ instanceId }` }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.'\n\t\t\t\t\t) }\n\t\t\t\t</VisuallyHidden>\n\t\t\t</div>\n\t\t);\n\t\t/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */\n\t}\n}\n\nexport default compose( pure, withInstanceId )( Saturation );\n"]}