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

package/es/ColorPicker/index.js

@@ -0,0 +1,487 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["checkContrast", "colorMixerSettings", "disabled", "elementRef", "isRequired", "label", "onChange", "placeholderText", "popoverButtonScreenReaderLabel", "renderInvalidColorMessage", "renderIsRequiredMessage", "renderMessages", "tooltip", "value", "width", "withAlpha"];
+
+var _dec, _dec2, _class, _class2, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine, _IconInfoLine;
+
+/*
+ * 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.
+ */
+
+/** @jsx jsx */
+
+/** @jsxFrag React.Fragment */
+import React, { Component } from 'react';
+import { withStyle, jsx } from '@instructure/emotion';
+import { warn } from '@instructure/console';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { testable } from '@instructure/ui-testable';
+import { colorToHex8, isValid, contrast as getContrast } from '@instructure/ui-color-utils';
+import { TextInput } from '@instructure/ui-text-input';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { Button, IconButton } from '@instructure/ui-buttons';
+import { Popover } from '@instructure/ui-popover';
+import { IconCheckDarkLine, IconWarningLine, IconTroubleLine, IconInfoLine } from '@instructure/ui-icons';
+import ColorIndicator from '../ColorIndicator';
+import ColorMixer from '../ColorMixer';
+import ColorContrast from '../ColorContrast';
+import ColorPreset from '../ColorPreset';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
+const acceptedCharactersForHEX = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'A', 'b', 'B', 'c', 'C', 'd', 'D', 'e', 'E', 'f', 'F', null];
+/**
+---
+category: components
+---
+@tsProps
+**/
+
+let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ColorPicker extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.checkSettings = () => {
+      if (this.props.children && this.props.colorMixerSettings) {
+        warn(false, 'You should either use children, colorMixerSettings or neither, not both. In this case, the colorMixerSettings will be ignored', '');
+      }
+    };
+
+    this.stripAlphaIfNeeded = hex => hex.length === 8 && hex.slice(-2) === 'FF' ? hex.slice(0, -2) : hex;
+
+    this.renderPopover = () => {
+      var _this$props$styles;
+
+      return jsx(Popover, {
+        renderTrigger: jsx(IconButton, {
+          disabled: this.props.disabled,
+          screenReaderLabel: this.props.popoverButtonScreenReaderLabel || ''
+        }, jsx(ColorIndicator, {
+          color: `#${this.state.hexCode}`
+        })),
+        isShowingContent: this.state.openColorPicker,
+        onShowContent: () => {
+          this.setState({
+            openColorPicker: true,
+            mixedColor: this.state.hexCode
+          });
+        },
+        onHideContent: () => {
+          this.setState({
+            openColorPicker: false
+          });
+        },
+        on: "click",
+        screenReaderLabel: this.props.popoverScreenReaderLabel || '',
+        shouldContainFocus: true,
+        shouldReturnFocus: true,
+        shouldCloseOnDocumentClick: true,
+        offsetY: "10rem"
+      }, jsx("div", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.popoverContentContainer
+      }, this.isDefaultPopover ? this.renderDefaultPopoverContent() : this.renderCustomPopoverContent()));
+    };
+
+    this.renderCustomPopoverContent = () => {
+      var _this$props$styles2, _this$props, _this$props2;
+
+      return jsx("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.popoverContent
+      }, typeof ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.children) === 'function' && ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.children(this.stripAlphaIfNeeded(this.state.mixedColor), color => {
+        this.setState({
+          mixedColor: color
+        });
+      }, () => {
+        var _this$props3, _this$props3$onChange;
+
+        this.setState({
+          openColorPicker: false,
+          hexCode: `${this.stripAlphaIfNeeded(this.state.mixedColor)}`
+        });
+        (_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$onChange = _this$props3.onChange) === null || _this$props3$onChange === void 0 ? void 0 : _this$props3$onChange.call(_this$props3, `#${this.stripAlphaIfNeeded(this.state.mixedColor.slice(1))}`);
+      }, () => this.setState({
+        openColorPicker: false,
+        mixedColor: this.state.hexCode
+      }))));
+    };
+
+    this.renderDefaultPopoverContent = () => {
+      var _this$props$styles3, _this$props4, _this$props4$colorMix, _this$props5, _this$props5$colorMix, _this$props$styles4, _this$props6, _this$props6$colorMix, _this$props$styles5, _this$props$styles6, _this$props$colorMixe, _this$props$colorMixe2;
+
+      return jsx(React.Fragment, null, jsx("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.popoverContent
+      }, ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$colorMix = _this$props4.colorMixerSettings) === null || _this$props4$colorMix === void 0 ? void 0 : _this$props4$colorMix.colorMixer) && jsx(ColorMixer, {
+        value: `#${this.state.mixedColor}`,
+        onChange: newColor => this.setState({
+          mixedColor: colorToHex8(newColor).slice(1)
+        }),
+        withAlpha: this.props.colorMixerSettings.colorMixer.withAlpha,
+        rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,
+        rgbGreenInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbGreenInputScreenReaderLabel,
+        rgbBlueInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbBlueInputScreenReaderLabel,
+        rgbAlphaInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbAlphaInputScreenReaderLabel,
+        colorSliderNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.colorSliderNavigationExplanationScreenReaderLabel,
+        alphaSliderNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.alphaSliderNavigationExplanationScreenReaderLabel,
+        colorPaletteNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.colorPaletteNavigationExplanationScreenReaderLabel
+      }), ((_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : (_this$props5$colorMix = _this$props5.colorMixerSettings) === null || _this$props5$colorMix === void 0 ? void 0 : _this$props5$colorMix.colorPreset) && jsx("div", {
+        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.popoverContentBlock
+      }, jsx(ColorPreset, {
+        label: this.props.colorMixerSettings.colorPreset.label,
+        colors: this.props.colorMixerSettings.colorPreset.colors,
+        selected: this.state.mixedColor,
+        onSelect: color => this.setState({
+          mixedColor: color.slice(1)
+        })
+      })), ((_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : (_this$props6$colorMix = _this$props6.colorMixerSettings) === null || _this$props6$colorMix === void 0 ? void 0 : _this$props6$colorMix.colorContrast) && jsx("div", {
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.popoverContentBlock
+      }, jsx(ColorContrast, {
+        firstColor: this.props.colorMixerSettings.colorContrast.firstColor,
+        secondColor: `#${this.stripAlphaIfNeeded(this.state.mixedColor)}`,
+        label: this.props.colorMixerSettings.colorContrast.label,
+        successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
+        failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
+        normalTextLabel: this.props.colorMixerSettings.colorContrast.normalTextLabel,
+        largeTextLabel: this.props.colorMixerSettings.colorContrast.largeTextLabel,
+        graphicsTextLabel: this.props.colorMixerSettings.colorContrast.graphicsTextLabel,
+        firstColorLabel: this.props.colorMixerSettings.colorContrast.firstColorLabel,
+        secondColorLabel: this.props.colorMixerSettings.colorContrast.secondColorLabel
+      }))), jsx("div", {
+        css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.popoverFooter
+      }, jsx(Button, {
+        onClick: () => this.setState({
+          openColorPicker: false,
+          mixedColor: this.state.hexCode
+        }),
+        color: "secondary",
+        margin: "xx-small"
+      }, (_this$props$colorMixe = this.props.colorMixerSettings) === null || _this$props$colorMixe === void 0 ? void 0 : _this$props$colorMixe.popoverCloseButtonLabel), jsx(Button, {
+        onClick: () => {
+          if (typeof this.props.onChange === 'function') {
+            this.props.onChange(`#${this.stripAlphaIfNeeded(this.state.mixedColor)}`);
+            this.setState({
+              openColorPicker: false
+            });
+          } else {
+            this.setState({
+              openColorPicker: false,
+              hexCode: `${this.stripAlphaIfNeeded(this.state.mixedColor)}`
+            });
+          }
+        },
+        color: "primary",
+        margin: "xx-small"
+      }, (_this$props$colorMixe2 = this.props.colorMixerSettings) === null || _this$props$colorMixe2 === void 0 ? void 0 : _this$props$colorMixe2.popoverAddButtonLabel)));
+    };
+
+    this.state = {
+      hexCode: '',
+      showHelperErrorMessages: false,
+      openColorPicker: false,
+      mixedColor: ''
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props7, _this$props$value;
+
+    (_this$props$makeStyle = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props7, { ...this.state,
+      isSimple: this.isSimple
+    });
+    this.checkSettings();
+    this.props.value && this.setState({
+      hexCode: (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.slice(1)
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props8;
+
+    (_this$props$makeStyle2 = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props8, { ...this.state,
+      isSimple: this.isSimple
+    });
+
+    if (prevProps.value !== this.props.value) {
+      var _this$props$value2;
+
+      this.setState({
+        showHelperErrorMessages: false,
+        hexCode: ((_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.slice(1)) || ''
+      });
+    }
+
+    this.checkSettings();
+  }
+
+  get renderMode() {
+    if (this.props.children) {
+      return 'customPopover';
+    }
+
+    if (this.props.colorMixerSettings) {
+      return 'defaultPopover';
+    }
+
+    return 'simple';
+  }
+
+  get isSimple() {
+    return this.renderMode === 'simple';
+  }
+
+  get isDefaultPopover() {
+    return this.renderMode === 'defaultPopover';
+  }
+
+  get isCustomPopover() {
+    return this.renderMode === 'customPopover';
+  }
+
+  getMinContrast(strength) {
+    return {
+      min: 3,
+      mid: 4.5,
+      max: 7
+    }[strength];
+  }
+
+  renderMessages() {
+    var _this$props$checkCont;
+
+    const _this$state = this.state,
+          hexCode = _this$state.hexCode,
+          showHelperErrorMessages = _this$state.showHelperErrorMessages;
+    const isValidHex = isValid(hexCode);
+    const _this$props9 = this.props,
+          checkContrast = _this$props9.checkContrast,
+          renderMessages = _this$props9.renderMessages,
+          renderInvalidColorMessage = _this$props9.renderInvalidColorMessage,
+          renderIsRequiredMessage = _this$props9.renderIsRequiredMessage,
+          isRequired = _this$props9.isRequired;
+    const contrast = isValidHex ? getContrast(((_this$props$checkCont = this.props.checkContrast) === null || _this$props$checkCont === void 0 ? void 0 : _this$props$checkCont.contrastAgainst) || '#fff', hexCode, 2) : void 0;
+    const contrastStrength = checkContrast !== null && checkContrast !== void 0 && checkContrast.contrastStrength ? checkContrast.contrastStrength : 'mid';
+    const minContrast = this.getMinContrast(contrastStrength);
+    let invalidColorMessages = [];
+    let isRequiredMessages = [];
+    let generalMessages = [];
+    let contrastMessages = [];
+
+    if (checkContrast && contrast) {
+      const renderContrastSuccessMessage = checkContrast.renderContrastSuccessMessage,
+            renderContrastErrorMessage = checkContrast.renderContrastErrorMessage;
+
+      if (contrast < minContrast) {
+        contrastMessages = typeof renderContrastErrorMessage === 'function' ? renderContrastErrorMessage(contrast, minContrast) : checkContrast.isStrict ? [{
+          type: 'error',
+          text: ''
+        }] : [];
+      } else if (typeof renderContrastSuccessMessage === 'function') {
+        contrastMessages = renderContrastSuccessMessage(contrast, minContrast);
+      }
+    }
+
+    if (showHelperErrorMessages && hexCode !== '' && !isValidHex && typeof renderInvalidColorMessage === 'function') {
+      invalidColorMessages = renderInvalidColorMessage(hexCode);
+    }
+
+    if (isRequired && showHelperErrorMessages && hexCode === '') {
+      isRequiredMessages = typeof renderIsRequiredMessage === 'function' ? renderIsRequiredMessage() : [{
+        type: 'error',
+        text: '*'
+      }];
+    }
+
+    if (typeof renderMessages === 'function') {
+      generalMessages = renderMessages(hexCode, isValidHex, minContrast, contrast);
+    }
+
+    return [...invalidColorMessages, ...isRequiredMessages, ...generalMessages, ...contrastMessages];
+  }
+
+  renderBeforeInput() {
+    const styles = this.props.styles;
+    return jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.simpleColorContainer
+    }, this.isSimple && jsx(ColorIndicator, {
+      color: `#${this.state.hexCode}`
+    }), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.hashMarkContainer
+    }, "#"));
+  }
+
+  renderAfterInput() {
+    const _this$props10 = this.props,
+          checkContrast = _this$props10.checkContrast,
+          styles = _this$props10.styles;
+    const hexCode = this.state.hexCode;
+
+    if (checkContrast && isValid(hexCode)) {
+      const contrast = getContrast(checkContrast.contrastAgainst || '#fff', hexCode, 2);
+      const minContrast = this.getMinContrast(checkContrast.contrastStrength ? checkContrast.contrastStrength : 'mid');
+
+      if (minContrast >= contrast) {
+        return jsx("div", {
+          css: styles === null || styles === void 0 ? void 0 : styles.errorIcons
+        }, checkContrast.isStrict ? _IconTroubleLine || (_IconTroubleLine = jsx(IconTroubleLine, null)) : _IconWarningLine || (_IconWarningLine = jsx(IconWarningLine, null)));
+      }
+
+      return jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.successIcon
+      }, _IconCheckDarkLine || (_IconCheckDarkLine = jsx(IconCheckDarkLine, null)));
+    }
+
+    return null;
+  }
+
+  handleOnChange(_event, value) {
+    const onChange = this.props.onChange;
+
+    if (value.length > (this.props.withAlpha ? 8 : 6) || value.split('').find(char => !acceptedCharactersForHEX.includes(char)) !== void 0) {
+      return;
+    }
+
+    if (typeof onChange === 'function') {
+      onChange(`#${value}`);
+    } else {
+      this.setState({
+        showHelperErrorMessages: false,
+        hexCode: value
+      });
+    }
+  }
+
+  handleOnPaste(event) {
+    const pasted = event.clipboardData.getData('Text');
+    let toPaste = pasted;
+
+    if (pasted[0] && pasted[0] === '#') {
+      toPaste = pasted.slice(1);
+    }
+
+    if (this.props.withAlpha && toPaste.length > 8 || !this.props.withAlpha && toPaste.length > 6) {
+      return event.preventDefault();
+    }
+
+    const newHex = `${this.state.hexCode}${toPaste}`;
+
+    if (isValid(newHex)) {
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(`#${newHex}`);
+      } else {
+        this.setState({
+          showHelperErrorMessages: false,
+          hexCode: newHex
+        });
+      }
+    }
+
+    event.preventDefault();
+  }
+
+  handleOnBlur() {
+    this.setState({
+      showHelperErrorMessages: true
+    });
+  }
+
+  renderLabel() {
+    const _this$props11 = this.props,
+          label = _this$props11.label,
+          tooltip = _this$props11.tooltip,
+          styles = _this$props11.styles;
+    return tooltip ? jsx("div", null, jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.label
+    }, label), jsx("span", null, jsx(Tooltip, {
+      renderTip: tooltip
+    }, _IconInfoLine || (_IconInfoLine = jsx(IconInfoLine, {
+      tabIndex: -1
+    }))))) : label;
+  }
+
+  render() {
+    var _this$props$styles7, _this$props$styles8, _this$props$styles9;
+
+    const _this$props12 = this.props,
+          checkContrast = _this$props12.checkContrast,
+          colorMixerSettings = _this$props12.colorMixerSettings,
+          disabled = _this$props12.disabled,
+          elementRef = _this$props12.elementRef,
+          isRequired = _this$props12.isRequired,
+          label = _this$props12.label,
+          onChange = _this$props12.onChange,
+          placeholderText = _this$props12.placeholderText,
+          popoverButtonScreenReaderLabel = _this$props12.popoverButtonScreenReaderLabel,
+          renderInvalidColorMessage = _this$props12.renderInvalidColorMessage,
+          renderIsRequiredMessage = _this$props12.renderIsRequiredMessage,
+          renderMessages = _this$props12.renderMessages,
+          tooltip = _this$props12.tooltip,
+          value = _this$props12.value,
+          width = _this$props12.width,
+          withAlpha = _this$props12.withAlpha,
+          props = _objectWithoutProperties(_this$props12, _excluded);
+
+    return jsx("div", Object.assign({}, passthroughProps(props), {
+      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorPicker,
+      ref: this.handleRef
+    }), jsx(TextInput, {
+      isRequired: isRequired,
+      disabled: disabled,
+      renderLabel: () => this.renderLabel(),
+      display: "inline-block",
+      width: width,
+      placeholder: placeholderText,
+      themeOverride: {
+        padding: ''
+      },
+      renderAfterInput: this.renderAfterInput(),
+      renderBeforeInput: this.renderBeforeInput(),
+      value: this.state.hexCode,
+      onChange: (event, value) => this.handleOnChange(event, value),
+      onPaste: event => this.handleOnPaste(event),
+      onBlur: () => this.handleOnBlur(),
+      messages: this.renderMessages()
+    }), !this.isSimple && jsx("div", {
+      css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.colorMixerButtonContainer
+    }, jsx("div", {
+      css: (_this$props$styles9 = this.props.styles) === null || _this$props$styles9 === void 0 ? void 0 : _this$props$styles9.colorMixerButtonWrapper
+    }, this.renderPopover())));
+  }
+
+}, _class2.displayName = "ColorPicker", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorPicker', _class2.defaultProps = {
+  elementRef: () => null,
+  disabled: false,
+  label: 'Color',
+  checkContrast: false,
+  width: '22.5rem',
+  withAlpha: false
+}, _class2)) || _class) || _class);
+export { ColorPicker };
+export default ColorPicker;

package/es/ColorPicker/props.js

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+import PropTypes from 'prop-types';
+const propTypes = {
+  checkContrast: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  colorMixerSettings: PropTypes.object,
+  children: PropTypes.func,
+  disabled: PropTypes.bool,
+  elementRef: PropTypes.func,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  onChange: PropTypes.func,
+  placeholderText: PropTypes.string,
+  popoverScreenReaderLabel: PropTypes.string,
+  popoverButtonScreenReaderLabel: PropTypes.string,
+  popoverMaxHeight: PropTypes.string,
+  renderInvalidColorMessage: PropTypes.func,
+  renderIsRequiredMessage: PropTypes.func,
+  renderMessages: PropTypes.func,
+  tooltip: PropTypes.node,
+  value: PropTypes.string,
+  width: PropTypes.string,
+  withAlpha: PropTypes.bool
+};
+const allowedProps = ['checkContrast', 'colorMixerSettings', 'children', 'disabled', 'elementRef', 'isRequired', 'label', 'onChange', 'placeholderText', 'popoverScreenReaderLabel', 'popoverButtonScreenReaderLabel', 'popoverMaxHeight', 'renderInvalidColorMessage', 'renderIsRequiredMessage', 'renderMessages', 'tooltip', 'value', 'width', 'withAlpha'];
+export { propTypes, allowedProps };

package/es/ColorPicker/styles.js

@@ -0,0 +1,119 @@
+/*
+ * 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 = (componentTheme, props, state) => {
+  const hashMarkColor = componentTheme.hashMarkColor,
+        errorIconColor = componentTheme.errorIconColor,
+        warningIconColor = componentTheme.warningIconColor,
+        successIconColor = componentTheme.successIconColor;
+  const checkContrast = props.checkContrast,
+        popoverMaxHeight = props.popoverMaxHeight;
+  const isSimple = state.isSimple;
+  return {
+    colorPicker: {
+      label: 'colorPicker',
+      display: 'flex'
+    },
+    simpleColorContainer: {
+      label: 'colorPicker__simpleColorContainer',
+      display: 'flex',
+      paddingLeft: componentTheme.simpleColorContainerLeftPadding,
+      alignItems: 'center'
+    },
+    hashMarkContainer: {
+      label: 'colorPicker__hashMarkContainer',
+      color: hashMarkColor,
+      display: 'inline-block',
+      fontSize: '1rem',
+      lineHeight: componentTheme.hashMarkContainerLineHeight,
+      ...(isSimple ? {
+        paddingInlineStart: componentTheme.hashMarkContainerLeftPadding,
+        paddingInlineEnd: componentTheme.hashMarkContainerRightPadding
+      } : {})
+    },
+    errorIcons: {
+      label: 'colorPicker__errorIcons',
+      display: 'flex',
+      paddingInlineEnd: componentTheme.errorIconsRightPadding,
+      color: checkContrast !== null && checkContrast !== void 0 && checkContrast.isStrict ? errorIconColor : warningIconColor
+    },
+    successIcon: {
+      label: 'colorPicker__successIcon',
+      display: 'flex',
+      paddingInlineEnd: componentTheme.successIconRightPadding,
+      color: successIconColor
+    },
+    label: {
+      label: 'colorPicker__label',
+      marginInlineEnd: componentTheme.labelRightMargin
+    },
+    popoverContent: {
+      label: 'colorPicker__popoverContent',
+      padding: componentTheme.popoverContentPadding
+    },
+    popoverContentBlock: {
+      label: 'colorPicker__popoverContentBlock',
+      borderTop: 'solid',
+      borderWidth: componentTheme.popoverContentBlockBorderWidth,
+      borderColor: componentTheme.popoverSeparatorColor,
+      marginTop: componentTheme.popoverContentBlockTopMargin,
+      marginBottom: componentTheme.popoverContentBlockBottomMargin
+    },
+    popoverFooter: {
+      label: 'colorPicker__popoverFooter',
+      backgroundColor: componentTheme.popoverFooterColor,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      padding: componentTheme.popoverFooterPadding,
+      borderTop: `solid ${componentTheme.popoverFooterTopBorderWidth}`,
+      borderColor: componentTheme.popoverSeparatorColor
+    },
+    colorMixerButtonContainer: {
+      label: 'colorPicker__colorMixerButtonContainer',
+      alignSelf: 'flex-end',
+      marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
+    },
+    popoverContentContainer: {
+      label: 'colorPicker__popoverContentContainer',
+      maxHeight: popoverMaxHeight || '100vh',
+      overflow: 'scroll'
+    },
+    colorMixerButtonWrapper: {
+      position: 'absolute',
+      top: '2.69rem'
+    }
+  };
+};
+
+export default generateStyle;