@wordpress/components 18.0.0 → 19.0.3

package/build/color-picker/alpha.js

@@ -1,202 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Alpha = void 0;
-
-var _element = require("@wordpress/element");
-
-var _lodash = require("lodash");
-
-var _i18n = require("@wordpress/i18n");
-
-var _keycodes = require("@wordpress/keycodes");
-
-var _compose = require("@wordpress/compose");
-
-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
- */
-class Alpha extends _element.Component {
-  constructor() {
-    super(...arguments);
-    this.container = (0, _element.createRef)();
-    this.increase = this.increase.bind(this);
-    this.decrease = this.decrease.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.unbindEventListeners();
-  }
-
-  increase(amount = 0.01) {
-    const {
-      hsl,
-      onChange = _lodash.noop
-    } = this.props;
-    amount = parseInt(amount * 100, 10);
-    const change = {
-      h: hsl.h,
-      s: hsl.s,
-      l: hsl.l,
-      a: (parseInt(hsl.a * 100, 10) + amount) / 100,
-      source: 'rgb'
-    };
-    onChange(change);
-  }
-
-  decrease(amount = 0.01) {
-    const {
-      hsl,
-      onChange = _lodash.noop
-    } = this.props;
-    const intValue = parseInt(hsl.a * 100, 10) - parseInt(amount * 100, 10);
-    const change = {
-      h: hsl.h,
-      s: hsl.s,
-      l: hsl.l,
-      a: hsl.a <= amount ? 0 : intValue / 100,
-      source: 'rgb'
-    };
-    onChange(change);
-  }
-
-  handleChange(e) {
-    const {
-      onChange = _lodash.noop
-    } = this.props;
-    const change = (0, _utils.calculateAlphaChange)(e, this.props, this.container.current);
-
-    if (change) {
-      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 = {
-      [_keycodes.UP]: () => this.increase(shiftKey ? 0.1 : 0.01),
-      [_keycodes.RIGHT]: () => this.increase(shiftKey ? 0.1 : 0.01),
-      [_keycodes.PAGEUP]: () => this.increase(0.1),
-      [_keycodes.END]: () => this.increase(1),
-      [_keycodes.DOWN]: () => this.decrease(shiftKey ? 0.1 : 0.01),
-      [_keycodes.LEFT]: () => this.decrease(shiftKey ? 0.1 : 0.01),
-      [_keycodes.PAGEDOWN]: () => this.decrease(0.1),
-      [_keycodes.HOME]: () => this.decrease(1)
-    };
-
-    for (const code in shortcuts) {
-      if (code === String(keyCode)) {
-        shortcuts[keyCode]();
-      }
-    }
-
-    if (keyCode !== _keycodes.TAB) {
-      event.preventDefault();
-    }
-  }
-
-  render() {
-    const {
-      rgb
-    } = this.props;
-    const rgbString = `${rgb.r},${rgb.g},${rgb.b}`;
-    const gradient = {
-      background: `linear-gradient(to right, rgba(${rgbString}, 0) 0%, rgba(${rgbString}, 1) 100%)`
-    };
-    const pointerLocation = {
-      left: `${rgb.a * 100}%`
-    };
-    return (0, _element.createElement)("div", {
-      className: "components-color-picker__alpha"
-    }, (0, _element.createElement)("div", {
-      className: "components-color-picker__alpha-gradient",
-      style: gradient
-    }), (0, _element.createElement)("div", {
-      className: "components-color-picker__alpha-bar",
-      ref: this.container,
-      onMouseDown: this.handleMouseDown,
-      onTouchMove: this.handleChange,
-      onTouchStart: this.handleChange
-    }, (0, _element.createElement)("div", {
-      tabIndex: "0",
-      role: "slider",
-      "aria-valuemax": "1",
-      "aria-valuemin": "0",
-      "aria-valuenow": rgb.a,
-      "aria-orientation": "horizontal",
-      "aria-label": (0, _i18n.__)('Alpha value, from 0 (transparent) to 1 (fully opaque).'),
-      className: "components-color-picker__alpha-pointer",
-      style: pointerLocation,
-      onKeyDown: this.handleKeyDown
-    })));
-  }
-
-}
-
-exports.Alpha = Alpha;
-
-var _default = (0, _compose.pure)(Alpha);
-
-exports.default = _default;
-//# sourceMappingURL=alpha.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/alpha.js"],"names":["Alpha","Component","constructor","arguments","container","increase","bind","decrease","handleChange","handleMouseDown","handleMouseUp","handleKeyDown","componentWillUnmount","unbindEventListeners","amount","hsl","onChange","noop","props","parseInt","change","h","s","l","a","source","intValue","e","current","window","addEventListener","removeEventListener","event","keyCode","shiftKey","shortcuts","UP","RIGHT","PAGEUP","END","DOWN","LEFT","PAGEDOWN","HOME","code","String","TAB","preventDefault","render","rgb","rgbString","r","g","b","gradient","background","pointerLocation","left"],"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 { noop } 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 { pure } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { calculateAlphaChange } from './utils';\n\nexport class Alpha extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.container = createRef();\n\t\tthis.increase = this.increase.bind( this );\n\t\tthis.decrease = this.decrease.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.unbindEventListeners();\n\t}\n\n\tincrease( amount = 0.01 ) {\n\t\tconst { hsl, onChange = noop } = this.props;\n\t\tamount = parseInt( amount * 100, 10 );\n\t\tconst change = {\n\t\t\th: hsl.h,\n\t\t\ts: hsl.s,\n\t\t\tl: hsl.l,\n\t\t\ta: ( parseInt( hsl.a * 100, 10 ) + amount ) / 100,\n\t\t\tsource: 'rgb',\n\t\t};\n\t\tonChange( change );\n\t}\n\n\tdecrease( amount = 0.01 ) {\n\t\tconst { hsl, onChange = noop } = this.props;\n\t\tconst intValue =\n\t\t\tparseInt( hsl.a * 100, 10 ) - parseInt( amount * 100, 10 );\n\t\tconst change = {\n\t\t\th: hsl.h,\n\t\t\ts: hsl.s,\n\t\t\tl: hsl.l,\n\t\t\ta: hsl.a <= amount ? 0 : intValue / 100,\n\t\t\tsource: 'rgb',\n\t\t};\n\t\tonChange( change );\n\t}\n\n\thandleChange( e ) {\n\t\tconst { onChange = noop } = this.props;\n\t\tconst change = calculateAlphaChange(\n\t\t\te,\n\t\t\tthis.props,\n\t\t\tthis.container.current\n\t\t);\n\t\tif ( change ) {\n\t\t\tonChange( change, e );\n\t\t}\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.increase( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ RIGHT ]: () => this.increase( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ PAGEUP ]: () => this.increase( 0.1 ),\n\t\t\t[ END ]: () => this.increase( 1 ),\n\t\t\t[ DOWN ]: () => this.decrease( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ LEFT ]: () => this.decrease( shiftKey ? 0.1 : 0.01 ),\n\t\t\t[ PAGEDOWN ]: () => this.decrease( 0.1 ),\n\t\t\t[ HOME ]: () => this.decrease( 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 { rgb } = this.props;\n\t\tconst rgbString = `${ rgb.r },${ rgb.g },${ rgb.b }`;\n\t\tconst gradient = {\n\t\t\tbackground: `linear-gradient(to right, rgba(${ rgbString }, 0) 0%, rgba(${ rgbString }, 1) 100%)`,\n\t\t};\n\t\tconst pointerLocation = { left: `${ rgb.a * 100 }%` };\n\n\t\treturn (\n\t\t\t<div className=\"components-color-picker__alpha\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-color-picker__alpha-gradient\"\n\t\t\t\t\tstyle={ gradient }\n\t\t\t\t/>\n\t\t\t\t{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-color-picker__alpha-bar\"\n\t\t\t\t\tref={ this.container }\n\t\t\t\t\tonMouseDown={ this.handleMouseDown }\n\t\t\t\t\tonTouchMove={ this.handleChange }\n\t\t\t\t\tonTouchStart={ this.handleChange }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\taria-valuemax=\"1\"\n\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\taria-valuenow={ rgb.a }\n\t\t\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t'Alpha value, from 0 (transparent) to 1 (fully opaque).'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tclassName=\"components-color-picker__alpha-pointer\"\n\t\t\t\t\t\tstyle={ pointerLocation }\n\t\t\t\t\t\tonKeyDown={ this.handleKeyDown }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default pure( Alpha );\n"]}

package/build/color-picker/hue.js

@@ -1,202 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Hue = void 0;
-
-var _element = require("@wordpress/element");
-
-var _lodash = require("lodash");
-
-var _compose = require("@wordpress/compose");
-
-var _i18n = require("@wordpress/i18n");
-
-var _keycodes = require("@wordpress/keycodes");
-
-var _utils = require("./utils");
-
-var _visuallyHidden = require("../visually-hidden");
-
-/**
- * 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
- */
-class Hue extends _element.Component {
-  constructor() {
-    super(...arguments);
-    this.container = (0, _element.createRef)();
-    this.increase = this.increase.bind(this);
-    this.decrease = this.decrease.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.unbindEventListeners();
-  }
-
-  increase(amount = 1) {
-    const {
-      hsl,
-      onChange = _lodash.noop
-    } = this.props;
-    const change = {
-      h: hsl.h + amount >= 359 ? 359 : hsl.h + amount,
-      s: hsl.s,
-      l: hsl.l,
-      a: hsl.a,
-      source: 'rgb'
-    };
-    onChange(change);
-  }
-
-  decrease(amount = 1) {
-    const {
-      hsl,
-      onChange = _lodash.noop
-    } = this.props;
-    const change = {
-      h: hsl.h <= amount ? 0 : hsl.h - amount,
-      s: hsl.s,
-      l: hsl.l,
-      a: hsl.a,
-      source: 'rgb'
-    };
-    onChange(change);
-  }
-
-  handleChange(e) {
-    const {
-      onChange = _lodash.noop
-    } = this.props;
-    const change = (0, _utils.calculateHueChange)(e, this.props, this.container.current);
-
-    if (change) {
-      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 = {
-      [_keycodes.UP]: () => this.increase(shiftKey ? 10 : 1),
-      [_keycodes.RIGHT]: () => this.increase(shiftKey ? 10 : 1),
-      [_keycodes.PAGEUP]: () => this.increase(10),
-      [_keycodes.END]: () => this.increase(359),
-      [_keycodes.DOWN]: () => this.decrease(shiftKey ? 10 : 1),
-      [_keycodes.LEFT]: () => this.decrease(shiftKey ? 10 : 1),
-      [_keycodes.PAGEDOWN]: () => this.decrease(10),
-      [_keycodes.HOME]: () => this.decrease(359)
-    };
-
-    for (const code in shortcuts) {
-      if (code === String(keyCode)) {
-        shortcuts[keyCode]();
-      }
-    }
-
-    if (keyCode !== _keycodes.TAB) {
-      event.preventDefault();
-    }
-  }
-
-  render() {
-    const {
-      hsl = {},
-      instanceId
-    } = this.props;
-    const pointerLocation = {
-      left: `${hsl.h * 100 / 360}%`
-    };
-    return (0, _element.createElement)("div", {
-      className: "components-color-picker__hue"
-    }, (0, _element.createElement)("div", {
-      className: "components-color-picker__hue-gradient"
-    }), (0, _element.createElement)("div", {
-      className: "components-color-picker__hue-bar",
-      ref: this.container,
-      onMouseDown: this.handleMouseDown,
-      onTouchMove: this.handleChange,
-      onTouchStart: this.handleChange
-    }, (0, _element.createElement)("div", {
-      tabIndex: "0",
-      role: "slider",
-      "aria-valuemax": "1",
-      "aria-valuemin": "359",
-      "aria-valuenow": hsl.h,
-      "aria-orientation": "horizontal",
-      "aria-label": (0, _i18n.__)('Hue value in degrees, from 0 to 359.'),
-      "aria-describedby": `components-color-picker__hue-description-${instanceId}`,
-      className: "components-color-picker__hue-pointer",
-      style: pointerLocation,
-      onKeyDown: this.handleKeyDown
-    }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
-      as: "p",
-      id: `components-color-picker__hue-description-${instanceId}`
-    }, (0, _i18n.__)('Move the arrow left or right to change hue.'))));
-  }
-
-}
-
-exports.Hue = Hue;
-
-var _default = (0, _compose.compose)(_compose.pure, _compose.withInstanceId)(Hue);
-
-exports.default = _default;
-//# sourceMappingURL=hue.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hue.js"],"names":["Hue","Component","constructor","arguments","container","increase","bind","decrease","handleChange","handleMouseDown","handleMouseUp","handleKeyDown","componentWillUnmount","unbindEventListeners","amount","hsl","onChange","noop","props","change","h","s","l","a","source","e","current","window","addEventListener","removeEventListener","event","keyCode","shiftKey","shortcuts","UP","RIGHT","PAGEUP","END","DOWN","LEFT","PAGEDOWN","HOME","code","String","TAB","preventDefault","render","instanceId","pointerLocation","left","pure","withInstanceId"],"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 { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { compose, pure, withInstanceId } from '@wordpress/compose';\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';\n\n/**\n * Internal dependencies\n */\nimport { calculateHueChange } from './utils';\nimport { VisuallyHidden } from '../visually-hidden';\n\nexport class Hue extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.container = createRef();\n\t\tthis.increase = this.increase.bind( this );\n\t\tthis.decrease = this.decrease.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.unbindEventListeners();\n\t}\n\n\tincrease( amount = 1 ) {\n\t\tconst { hsl, onChange = noop } = this.props;\n\t\tconst change = {\n\t\t\th: hsl.h + amount >= 359 ? 359 : hsl.h + amount,\n\t\t\ts: hsl.s,\n\t\t\tl: hsl.l,\n\t\t\ta: hsl.a,\n\t\t\tsource: 'rgb',\n\t\t};\n\t\tonChange( change );\n\t}\n\n\tdecrease( amount = 1 ) {\n\t\tconst { hsl, onChange = noop } = this.props;\n\t\tconst change = {\n\t\t\th: hsl.h <= amount ? 0 : hsl.h - amount,\n\t\t\ts: hsl.s,\n\t\t\tl: hsl.l,\n\t\t\ta: hsl.a,\n\t\t\tsource: 'rgb',\n\t\t};\n\t\tonChange( change );\n\t}\n\n\thandleChange( e ) {\n\t\tconst { onChange = noop } = this.props;\n\t\tconst change = calculateHueChange(\n\t\t\te,\n\t\t\tthis.props,\n\t\t\tthis.container.current\n\t\t);\n\t\tif ( change ) {\n\t\t\tonChange( change, e );\n\t\t}\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.increase( shiftKey ? 10 : 1 ),\n\t\t\t[ RIGHT ]: () => this.increase( shiftKey ? 10 : 1 ),\n\t\t\t[ PAGEUP ]: () => this.increase( 10 ),\n\t\t\t[ END ]: () => this.increase( 359 ),\n\t\t\t[ DOWN ]: () => this.decrease( shiftKey ? 10 : 1 ),\n\t\t\t[ LEFT ]: () => this.decrease( shiftKey ? 10 : 1 ),\n\t\t\t[ PAGEDOWN ]: () => this.decrease( 10 ),\n\t\t\t[ HOME ]: () => this.decrease( 359 ),\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 { hsl = {}, instanceId } = this.props;\n\t\tconst pointerLocation = { left: `${ ( hsl.h * 100 ) / 360 }%` };\n\n\t\treturn (\n\t\t\t<div className=\"components-color-picker__hue\">\n\t\t\t\t<div className=\"components-color-picker__hue-gradient\" />\n\t\t\t\t{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-color-picker__hue-bar\"\n\t\t\t\t\tref={ this.container }\n\t\t\t\t\tonMouseDown={ this.handleMouseDown }\n\t\t\t\t\tonTouchMove={ this.handleChange }\n\t\t\t\t\tonTouchStart={ this.handleChange }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\taria-valuemax=\"1\"\n\t\t\t\t\t\taria-valuemin=\"359\"\n\t\t\t\t\t\taria-valuenow={ hsl.h }\n\t\t\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t'Hue value in degrees, from 0 to 359.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\taria-describedby={ `components-color-picker__hue-description-${ instanceId }` }\n\t\t\t\t\t\tclassName=\"components-color-picker__hue-pointer\"\n\t\t\t\t\t\tstyle={ pointerLocation }\n\t\t\t\t\t\tonKeyDown={ this.handleKeyDown }\n\t\t\t\t\t/>\n\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\tid={ `components-color-picker__hue-description-${ instanceId }` }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Move the arrow left or right to change hue.' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</div>\n\t\t\t\t{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default compose( pure, withInstanceId )( Hue );\n"]}