@instructure/ui-color-picker 8.25.1-snapshot-20

package/lib/ColorMixer/index.js

@@ -0,0 +1,226 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColorMixer = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _emotion = require("@instructure/emotion");
+
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _uiColorUtils = require("@instructure/ui-color-utils");
+
+var _ColorPalette = _interopRequireDefault(require("./ColorPalette"));
+
+var _Slider = _interopRequireDefault(require("./Slider"));
+
+var _RGBAInput = _interopRequireDefault(require("./RGBAInput"));
+
+var _props = require("./props");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+const _excluded = ["disabled", "onChange", "value", "elementRef", "styles", "withAlpha", "rgbRedInputScreenReaderLabel", "rgbGreenInputScreenReaderLabel", "rgbBlueInputScreenReaderLabel", "rgbAlphaInputScreenReaderLabel", "colorSliderNavigationExplanationScreenReaderLabel", "alphaSliderNavigationExplanationScreenReaderLabel", "colorPaletteNavigationExplanationScreenReaderLabel"];
+
+var _dec, _dec2, _class, _class2;
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+let ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ColorMixer extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._width = 272;
+    this._paletteHeight = 160;
+    this._sliderHeight = 8;
+    this._sliderIndicatorRadius = 6;
+    this._paletteIndicatorRadius = 6;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.state = {
+      h: 0,
+      s: 0,
+      v: 0,
+      a: 1
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+
+    if (this.props.value) {
+      this.setState({ ...(0, _uiColorUtils.colorToHsva)(this.props.value)
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    const _this$state = this.state,
+          h = _this$state.h,
+          s = _this$state.s,
+          v = _this$state.v,
+          a = _this$state.a;
+
+    if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
+      this.props.onChange((0, _uiColorUtils.colorToHex8)({
+        h,
+        s,
+        v,
+        a
+      }));
+    }
+
+    if (prevProps.value !== this.props.value && (0, _uiColorUtils.colorToHex8)({
+      h,
+      s,
+      v,
+      a
+    }) !== this.props.value) {
+      this.setState({ ...(0, _uiColorUtils.colorToHsva)(this.props.value)
+      });
+    }
+  }
+
+  render() {
+    const _this$props3 = this.props,
+          disabled = _this$props3.disabled,
+          onChange = _this$props3.onChange,
+          value = _this$props3.value,
+          elementRef = _this$props3.elementRef,
+          styles = _this$props3.styles,
+          withAlpha = _this$props3.withAlpha,
+          rgbRedInputScreenReaderLabel = _this$props3.rgbRedInputScreenReaderLabel,
+          rgbGreenInputScreenReaderLabel = _this$props3.rgbGreenInputScreenReaderLabel,
+          rgbBlueInputScreenReaderLabel = _this$props3.rgbBlueInputScreenReaderLabel,
+          rgbAlphaInputScreenReaderLabel = _this$props3.rgbAlphaInputScreenReaderLabel,
+          colorSliderNavigationExplanationScreenReaderLabel = _this$props3.colorSliderNavigationExplanationScreenReaderLabel,
+          alphaSliderNavigationExplanationScreenReaderLabel = _this$props3.alphaSliderNavigationExplanationScreenReaderLabel,
+          colorPaletteNavigationExplanationScreenReaderLabel = _this$props3.colorPaletteNavigationExplanationScreenReaderLabel,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const _this$state2 = this.state,
+          h = _this$state2.h,
+          s = _this$state2.s,
+          v = _this$state2.v,
+          a = _this$state2.a;
+    return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+      "aria-disabled": disabled,
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.colorMixer
+    }), (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.sliderAndPaletteContainer,
+      "aria-label": `${(0, _uiColorUtils.colorToHex8)({
+        h,
+        s,
+        v,
+        a
+      })}`,
+      "aria-live": "polite"
+    }, (0, _emotion.jsx)(_ColorPalette.default, {
+      disabled: disabled,
+      width: this._width,
+      height: this._paletteHeight,
+      indicatorRadius: this._paletteIndicatorRadius,
+      hue: h,
+      color: {
+        h,
+        s,
+        v
+      },
+      onChange: color => {
+        this.setState({
+          s: color.s,
+          v: color.v
+        });
+      },
+      navigationExplanationScreenReaderLabel: colorPaletteNavigationExplanationScreenReaderLabel
+    }), (0, _emotion.jsx)(_Slider.default, {
+      disabled: disabled,
+      isColorSlider: true,
+      width: this._width,
+      height: this._sliderHeight,
+      indicatorRadius: this._sliderIndicatorRadius,
+      value: h,
+      minValue: 0,
+      maxValue: 359,
+      color: (0, _uiColorUtils.colorToHex8)({
+        h,
+        s,
+        v,
+        a
+      }),
+      onChange: hue => {
+        this.setState({
+          h: hue
+        });
+      },
+      navigationExplanationScreenReaderLabel: colorSliderNavigationExplanationScreenReaderLabel
+    }), withAlpha && (0, _emotion.jsx)(_Slider.default, {
+      disabled: disabled,
+      width: this._width,
+      height: this._sliderHeight,
+      indicatorRadius: this._sliderIndicatorRadius,
+      color: (0, _uiColorUtils.colorToHex8)({
+        h,
+        s,
+        v
+      }),
+      value: a,
+      minValue: 0,
+      maxValue: 1,
+      onChange: opacity => this.setState({
+        a: opacity / 100
+      }),
+      navigationExplanationScreenReaderLabel: alphaSliderNavigationExplanationScreenReaderLabel
+    })), (0, _emotion.jsx)(_RGBAInput.default, {
+      disabled: disabled,
+      label: withAlpha ? 'RGBA' : 'RGB',
+      width: this._width,
+      value: (0, _uiColorUtils.colorToRGB)({
+        h,
+        s,
+        v,
+        a
+      }),
+      onChange: color => this.setState({ ...(0, _uiColorUtils.colorToHsva)(color)
+      }),
+      withAlpha: withAlpha,
+      rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,
+      rgbGreenInputScreenReaderLabel: rgbGreenInputScreenReaderLabel,
+      rgbBlueInputScreenReaderLabel: rgbBlueInputScreenReaderLabel,
+      rgbAlphaInputScreenReaderLabel: rgbAlphaInputScreenReaderLabel
+    }));
+  }
+
+}, _class2.displayName = "ColorMixer", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.componentId = 'ColorMixer', _class2.defaultProps = {
+  withAlpha: false,
+  disabled: false
+}, _class2)) || _class) || _class);
+exports.ColorMixer = ColorMixer;
+var _default = ColorMixer;
+exports.default = _default;

package/lib/ColorMixer/props.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+const propTypes = {
+  disabled: _propTypes.default.bool,
+  elementRef: _propTypes.default.func,
+  value: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  withAlpha: _propTypes.default.bool,
+  rgbRedInputScreenReaderLabel: _propTypes.default.string.isRequired,
+  rgbGreenInputScreenReaderLabel: _propTypes.default.string.isRequired,
+  rgbBlueInputScreenReaderLabel: _propTypes.default.string.isRequired,
+  rgbAlphaInputScreenReaderLabel: _propTypes.default.string.isRequired,
+  colorSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
+  alphaSliderNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired,
+  colorPaletteNavigationExplanationScreenReaderLabel: _propTypes.default.string.isRequired
+};
+exports.propTypes = propTypes;
+const allowedProps = ['disabled', 'elementRef', 'value', 'onChange', 'withAlpha', 'rgbRedInputScreenReaderLabel', 'rgbGreenInputScreenReaderLabel', 'rgbBlueInputScreenReaderLabel', 'rgbAlphaInputScreenReaderLabel', 'colorSliderNavigationExplanationScreenReaderLabel', 'alphaSliderNavigationExplanationScreenReaderLabel', 'colorPaletteNavigationExplanationScreenReaderLabel'];
+exports.allowedProps = allowedProps;

package/lib/ColorMixer/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = () => {
+  return {
+    colorMixer: {
+      label: 'colorMixer',
+      width: '17rem'
+    },
+    sliderAndPaletteContainer: {
+      label: 'colorMixer__sliderAndPaletteContainer',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/ColorMixer/utils/shallowCompare.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+const shallowCompare = (newObj, prevObj) => {
+  for (const key in newObj) {
+    if (newObj[key] !== prevObj[key]) return true;
+  }
+
+  return false;
+};
+
+var _default = shallowCompare;
+exports.default = _default;

package/lib/ColorPicker/ColorPickerLocator.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPickerLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _uiTestUtils = require("@instructure/ui-test-utils");
+
+var _ = require(".");
+
+var _PopoverLocator = require("@instructure/ui-popover/lib/Popover/PopoverLocator");
+
+var _ColorIndicatorLocator = require("../ColorIndicator/ColorIndicatorLocator");
+
+var _ColorMixerLocator = require("../ColorMixer/ColorMixerLocator");
+
+var _ColorPresetLocator = require("../ColorPreset/ColorPresetLocator");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+
+/* eslint-enable no-restricted-imports */
+async function _findColorPreset() {
+  const popoverContent = await _PopoverLocator.PopoverLocator.findContent(...arguments);
+  const colorPreset = await _ColorPresetLocator.ColorPresetLocator.find(popoverContent.getDOMNode());
+  return _ColorIndicatorLocator.ColorIndicatorLocator.findAll(colorPreset.getDOMNode());
+}
+
+const customMethods = {
+  findTextInput: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return (0, _uiTestUtils.find)('[id^=TextInput_]', ...args);
+  },
+  findColorIndicator: function () {
+    return _ColorIndicatorLocator.ColorIndicatorLocator.find(...arguments);
+  },
+  findInputAfterIcon: function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return (0, _uiTestUtils.find)('[class$=-textInput__afterElement]', ...args);
+  },
+  findFormMessages: function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    return (0, _uiTestUtils.findAll)('[class$=-formFieldMessage]', ...args);
+  },
+  findPopoverRoot: function () {
+    return _PopoverLocator.PopoverLocator.find(...arguments);
+  },
+  findPopoverTrigger: function () {
+    return _PopoverLocator.PopoverLocator.findTrigger(...arguments);
+  },
+  findColorMixer: function () {
+    return _ColorMixerLocator.ColorMixerLocator.find(...arguments);
+  },
+  findPopoverContent: function () {
+    const _parseQueryArguments = (0, _uiTestUtils.parseQueryArguments)(...arguments),
+          element = _parseQueryArguments.element,
+          selector = _parseQueryArguments.selector,
+          options = _parseQueryArguments.options;
+
+    return _PopoverLocator.PopoverLocator.findContent(element, selector, { ...options,
+      customMethods: { ...options.customMethods,
+        ...customMethods
+      }
+    });
+  },
+  findRGBAInputs: async function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    const rgbaInputs = await (0, _uiTestUtils.findAll)('[class$=-RGBAInput__rgbInput]', ...args);
+    return Promise.all(rgbaInputs.map(span => span.find('input')));
+  },
+  findPopoverButtonWithText: async function () {
+    let el = await (0, _uiTestUtils.findWithText)(...arguments);
+
+    while (el.getTagName() !== 'button') {
+      const parentNode = el.getParentNode();
+
+      if (!parentNode) {
+        break;
+      }
+
+      el = (0, _uiTestUtils.within)(parentNode);
+    }
+
+    return el;
+  },
+  findColorPreset: async function () {
+    return _findColorPreset(...arguments);
+  },
+  findColorPresetButtons: async function () {
+    const colorPresets = await _findColorPreset(...arguments);
+    const colorPresetButtons = [];
+
+    for (let el of colorPresets) {
+      while (el.getTagName() !== 'button') {
+        const parentNode = el.getParentNode();
+
+        if (!parentNode) {
+          break;
+        }
+
+        el = (0, _uiTestUtils.within)(parentNode);
+      }
+
+      colorPresetButtons.push(el);
+    }
+
+    return colorPresetButtons;
+  }
+}; //@ts-expect-error no selector on class
+
+const ColorPickerLocator = (0, _locator.locator)(_.ColorPicker.selector, customMethods);
+exports.ColorPickerLocator = ColorPickerLocator;