"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "EuiColorPicker", {
  enumerable: true,
  get: function get() {
    return _color_picker.EuiColorPicker;
  }
});
exports.OuiColorPicker = void 0;

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _chromaJs = _interopRequireDefault(require("chroma-js"));

var _accessibility = require("../accessibility");

var _color_picker_swatch = require("./color_picker_swatch");

var _focus_trap = require("../focus_trap");

var _flex = require("../flex");

var _form = require("../form");

var _i18n = require("../i18n");

var _popover = require("../popover");

var _spacer = require("../spacer");

var _services = require("../../services");

var _hue = require("./hue");

var _saturation = require("./saturation");

var _utils = require("./utils");

var _color_picker = require("../../eui_components/color_picker/color_picker");

/*
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/*
 * Licensed to Elasticsearch B.V. under one or more contributor
 * license agreements. See the NOTICE file distributed with
 * this work for additional information regarding copyright
 * ownership. Elasticsearch B.V. licenses this file to you under
 * the Apache License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
function isKeyboardEvent(event) {
  return (0, _typeof2.default)(event) === 'object' && 'key' in event;
}

var getOutput = function getOutput(text) {
  var showAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  var color = (0, _utils.getChromaColor)(text, true);
  var isValid = true;

  if (!showAlpha && color !== null) {
    isValid = color.alpha() === 1;
  } // Note that if a consumer has disallowed opacity,
  // we still return the color with an alpha channel, but mark it as invalid


  return color ? {
    rgba: color.rgba(),
    hex: color.hex(),
    isValid: isValid
  } : {
    rgba: _utils.RGB_FALLBACK,
    hex: _utils.HEX_FALLBACK,
    isValid: false
  };
};

var getHsv = function getHsv(hsv) {
  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  // Chroma's passthrough (RGB) parsing determines that black/white/gray are hue-less and returns `NaN`
  // For our purposes we can process `NaN` as `0` if necessary
  if (!hsv) return _utils.HSV_FALLBACK;
  var hue = isNaN(hsv[0]) ? fallback : hsv[0];
  return [hue, hsv[1], hsv[2]];
};

var OuiColorPicker = function OuiColorPicker(_ref) {
  var _ref8;

  var button = _ref.button,
      className = _ref.className,
      color = _ref.color,
      _ref$compressed = _ref.compressed,
      compressed = _ref$compressed === void 0 ? false : _ref$compressed,
      disabled = _ref.disabled,
      _ref$display = _ref.display,
      display = _ref$display === void 0 ? 'default' : _ref$display,
      _ref$fullWidth = _ref.fullWidth,
      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
      id = _ref.id,
      isInvalid = _ref.isInvalid,
      _ref$mode = _ref.mode,
      mode = _ref$mode === void 0 ? 'default' : _ref$mode,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      onFocus = _ref.onFocus,
      _ref$readOnly = _ref.readOnly,
      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
      _ref$swatches = _ref.swatches,
      swatches = _ref$swatches === void 0 ? _services.VISUALIZATION_COLORS : _ref$swatches,
      popoverZIndex = _ref.popoverZIndex,
      prepend = _ref.prepend,
      append = _ref.append,
      _ref$showAlpha = _ref.showAlpha,
      showAlpha = _ref$showAlpha === void 0 ? false : _ref$showAlpha,
      format = _ref.format,
      _ref$secondaryInputDi = _ref.secondaryInputDisplay,
      secondaryInputDisplay = _ref$secondaryInputDi === void 0 ? 'none' : _ref$secondaryInputDi,
      _ref$isClearable = _ref.isClearable,
      isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
      placeholder = _ref.placeholder,
      dataTestSubj = _ref['data-test-subj'];
  var preferredFormat = (0, _react.useMemo)(function () {
    if (format) return format;
    var parsed = (0, _utils.parseColor)(color);
    return parsed != null && (0, _typeof2.default)(parsed) === 'object' ? 'rgba' : 'hex';
  }, [color, format]);
  var chromaColor = (0, _react.useMemo)(function () {
    return (0, _utils.getChromaColor)(color, showAlpha);
  }, [color, showAlpha]);

  var _useState = (0, _react.useState)('100'),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      alphaRangeValue = _useState2[0],
      setAlphaRangeValue = _useState2[1];

  var alphaChannel = (0, _react.useMemo)(function () {
    return chromaColor ? chromaColor.alpha() : 1;
  }, [chromaColor]);
  (0, _react.useEffect)(function () {
    var percent = (alphaChannel * 100).toFixed();
    setAlphaRangeValue(percent);
  }, [alphaChannel]);

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      isColorSelectorShown = _useState4[0],
      setIsColorSelectorShown = _useState4[1];

  var _useState5 = (0, _react.useState)(null),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      inputRef = _useState6[0],
      setInputRef = _useState6[1]; // Ideally this is uses `useRef`, but `OuiFieldText` isn't ready for that


  var _useState7 = (0, _react.useState)(false),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      popoverShouldOwnFocus = _useState8[0],
      setPopoverShouldOwnFocus = _useState8[1];

  var prevColor = (0, _react.useRef)(chromaColor ? chromaColor.rgba().join() : null);

  var _useState9 = (0, _react.useState)(chromaColor ? getHsv(chromaColor.hsv()) : _utils.HSV_FALLBACK),
      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
      colorAsHsv = _useState10[0],
      setColorAsHsv = _useState10[1];

  var usableHsv = (0, _react.useMemo)(function () {
    if (chromaColor && chromaColor.rgba().join() !== prevColor.current) {
      var _chromaColor$hsv = chromaColor.hsv(),
          _chromaColor$hsv2 = (0, _slicedToArray2.default)(_chromaColor$hsv, 3),
          h = _chromaColor$hsv2[0],
          s = _chromaColor$hsv2[1],
          v = _chromaColor$hsv2[2];

      var hue = isNaN(h) ? colorAsHsv[0] : h;
      return [hue, s, v];
    }

    return colorAsHsv;
  }, [chromaColor, colorAsHsv]);
  var satruationRef = (0, _react.useRef)(null);
  var swatchRef = (0, _react.useRef)(null);
  var testSubjAnchor = (0, _classnames.default)('ouiColorPickerAnchor', dataTestSubj);

  var updateColorAsHsv = function updateColorAsHsv(_ref2) {
    var _ref3 = (0, _slicedToArray2.default)(_ref2, 3),
        h = _ref3[0],
        s = _ref3[1],
        v = _ref3[2];

    setColorAsHsv(getHsv([h, s, v], usableHsv[0]));
  };

  var classes = (0, _classnames.default)('ouiColorPicker', className);
  var popoverClass = 'ouiColorPicker__popoverAnchor';
  var panelClasses = (0, _classnames.default)('ouiColorPicker__popoverPanel', {
    'ouiColorPicker__popoverPanel--pickerOnly': mode === 'picker' && secondaryInputDisplay !== 'bottom',
    'ouiColorPicker__popoverPanel--customButton': button
  });
  var swatchClass = 'ouiColorPicker__swatchSelect';
  var inputClasses = (0, _classnames.default)('ouiColorPicker__input', {
    'ouiColorPicker__input--inGroup': prepend || append
  });

  var handleOnChange = function handleOnChange(text) {
    var output = getOutput(text, showAlpha);

    if (output.isValid) {
      prevColor.current = output.rgba.join();
    }

    onChange(text, output);
  };

  var handleOnBlur = function handleOnBlur() {
    // `onBlur` also gets called when the popover is closing
    // so prevent a second `onBlur` if the popover is open
    if (!isColorSelectorShown && onBlur) {
      onBlur();
    }
  };

  var closeColorSelector = function closeColorSelector() {
    var shouldDelay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

    if (onBlur) {
      onBlur();
    }

    if (shouldDelay) {
      setTimeout(function () {
        return setIsColorSelectorShown(false);
      });
    } else {
      setIsColorSelectorShown(false);
    }
  };

  var showColorSelector = function showColorSelector() {
    var shouldFocusInside = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
    if (isColorSelectorShown || readOnly) return;

    if (onFocus) {
      onFocus();
    }

    setPopoverShouldOwnFocus(shouldFocusInside);
    setIsColorSelectorShown(true);
  };

  var handleToggle = function handleToggle() {
    if (isColorSelectorShown) {
      closeColorSelector();
    } else {
      showColorSelector(true);
    }
  };

  var handleFinalSelection = function handleFinalSelection() {
    // When the trigger is an input, focus the input so you can adjust
    if (inputRef) {
      inputRef.focus();
    }

    closeColorSelector(true);
  };

  var handleOnKeyDown = function handleOnKeyDown(event) {
    if (event.key === _services.keys.ENTER) {
      if (isColorSelectorShown) {
        handleFinalSelection();
      } else {
        showColorSelector();
      }
    }
  };

  var handleInputActivity = function handleInputActivity(event) {
    if (isKeyboardEvent(event)) {
      if (event.key === _services.keys.ENTER) {
        event.preventDefault();
        handleToggle();
      }
    } else {
      showColorSelector();
    }
  };

  var handleToggleOnKeyDown = function handleToggleOnKeyDown(event) {
    if (event.key === _services.keys.ARROW_DOWN) {
      event.preventDefault();

      if (isColorSelectorShown) {
        var nextFocusEl = mode !== 'swatch' ? satruationRef : swatchRef;

        if (nextFocusEl.current) {
          nextFocusEl.current.focus();
        }
      } else {
        showColorSelector(true);
      }
    }
  };

  var handleColorInput = function handleColorInput(event) {
    handleOnChange(event.target.value);
    var newColor = (0, _utils.getChromaColor)(event.target.value, showAlpha);

    if (newColor) {
      updateColorAsHsv(newColor.hsv());
    }
  };

  var handleClearInput = function handleClearInput() {
    handleOnChange('');

    if (secondaryInputDisplay === 'none' && isColorSelectorShown) {
      closeColorSelector();
    }
  };

  var updateWithHsv = function updateWithHsv(hsv) {
    var color = _chromaJs.default.hsv.apply(_chromaJs.default, (0, _toConsumableArray2.default)(hsv)).alpha(alphaChannel);

    var formatted;

    if (preferredFormat === 'rgba') {
      formatted = alphaChannel < 1 ? color.rgba().join(_utils.RGB_JOIN) : color.rgb().join(_utils.RGB_JOIN);
    } else {
      formatted = color.hex();
    }

    handleOnChange(formatted);
    updateColorAsHsv(hsv);
  };

  var handleColorSelection = function handleColorSelection(color) {
    var _usableHsv = (0, _slicedToArray2.default)(usableHsv, 1),
        h = _usableHsv[0];

    var _color = (0, _slicedToArray2.default)(color, 3),
        s = _color[1],
        v = _color[2];

    var newHsv = [h, s, v];
    updateWithHsv(newHsv);
  };

  var handleHueSelection = function handleHueSelection(hue) {
    var _usableHsv2 = (0, _slicedToArray2.default)(usableHsv, 3),
        s = _usableHsv2[1],
        v = _usableHsv2[2];

    var newHsv = [hue, s, v];
    updateWithHsv(newHsv);
  };

  var handleSwatchSelection = function handleSwatchSelection(color) {
    var newColor = (0, _utils.getChromaColor)(color, showAlpha);
    handleOnChange(color);

    if (newColor) {
      updateColorAsHsv(newColor.hsv());
    }

    handleFinalSelection();
  };

  var handleAlphaSelection = function handleAlphaSelection(e, isValid) {
    var target = e.target;
    setAlphaRangeValue(target.value || '');

    if (isValid) {
      var alpha = parseInt(target.value, 10) / 100;
      var newColor = chromaColor ? chromaColor.alpha(alpha) : null;
      var hex = newColor ? newColor.hex() : _utils.HEX_FALLBACK;
      var rgba = newColor ? newColor.rgba() : _utils.RGB_FALLBACK;

      var _text;

      if (preferredFormat === 'rgba') {
        _text = alpha < 1 ? rgba.join(_utils.RGB_JOIN) : rgba.slice(0, 3).join(_utils.RGB_JOIN);
      } else {
        _text = hex;
      }

      onChange(_text, {
        hex: hex,
        rgba: rgba,
        isValid: !!newColor
      });
    }
  };

  var inlineInput = secondaryInputDisplay !== 'none' && /*#__PURE__*/_react.default.createElement(_i18n.OuiI18n, {
    tokens: ['ouiColorPicker.colorLabel', 'ouiColorPicker.colorErrorMessage', 'ouiColorPicker.transparent'],
    defaults: ['Color value', 'Invalid color value', 'Transparent']
  }, function (_ref4) {
    var _ref5 = (0, _slicedToArray2.default)(_ref4, 3),
        colorLabel = _ref5[0],
        colorErrorMessage = _ref5[1],
        transparent = _ref5[2];

    return /*#__PURE__*/_react.default.createElement(_form.OuiFormRow, {
      display: "rowCompressed",
      isInvalid: isInvalid,
      error: isInvalid ? colorErrorMessage : null
    }, /*#__PURE__*/_react.default.createElement(_form.OuiFormControlLayout, {
      clear: isClearable && color && !readOnly && !disabled ? {
        onClick: handleClearInput
      } : undefined,
      readOnly: readOnly,
      compressed: compressed
    }, /*#__PURE__*/_react.default.createElement(_form.OuiFieldText, {
      compressed: true,
      value: color ? color.toUpperCase() : _utils.HEX_FALLBACK,
      placeholder: !color ? placeholder || transparent : undefined,
      onChange: handleColorInput,
      isInvalid: isInvalid,
      disabled: disabled,
      readOnly: readOnly,
      "aria-label": colorLabel,
      autoComplete: "off",
      "data-test-subj": "ouiColorPickerInput_".concat(secondaryInputDisplay)
    })));
  });

  var showSecondaryInputOnly = mode === 'secondaryInput';
  var showPicker = mode !== 'swatch' && !showSecondaryInputOnly;
  var showSwatches = mode !== 'picker' && !showSecondaryInputOnly;

  var composite = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, secondaryInputDisplay === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineInput, /*#__PURE__*/_react.default.createElement(_spacer.OuiSpacer, {
    size: "s"
  })), showPicker && /*#__PURE__*/_react.default.createElement("div", {
    onKeyDown: handleOnKeyDown
  }, /*#__PURE__*/_react.default.createElement(_saturation.OuiSaturation, {
    id: id,
    color: usableHsv,
    hex: chromaColor ? chromaColor.hex() : undefined,
    onChange: handleColorSelection,
    ref: satruationRef
  }), /*#__PURE__*/_react.default.createElement(_hue.OuiHue, {
    id: id,
    hue: usableHsv[0],
    hex: chromaColor ? chromaColor.hex() : undefined,
    onChange: handleHueSelection
  })), showSwatches && /*#__PURE__*/_react.default.createElement(_flex.OuiFlexGroup, {
    wrap: true,
    responsive: false,
    gutterSize: "s",
    role: "listbox"
  }, swatches.map(function (swatch, index) {
    return /*#__PURE__*/_react.default.createElement(_flex.OuiFlexItem, {
      grow: false,
      key: swatch
    }, /*#__PURE__*/_react.default.createElement(_i18n.OuiI18n, {
      token: "ouiColorPicker.swatchAriaLabel",
      values: {
        swatch: swatch
      },
      default: "Select {swatch} as the color"
    }, function (swatchAriaLabel) {
      return /*#__PURE__*/_react.default.createElement(_color_picker_swatch.OuiColorPickerSwatch, {
        className: swatchClass,
        color: swatch,
        onClick: function onClick() {
          return handleSwatchSelection(swatch);
        },
        "aria-label": swatchAriaLabel,
        role: "option",
        ref: index === 0 ? swatchRef : undefined
      });
    }));
  })), secondaryInputDisplay === 'bottom' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mode !== 'picker' && /*#__PURE__*/_react.default.createElement(_spacer.OuiSpacer, {
    size: "s"
  }), inlineInput), showAlpha && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.OuiSpacer, {
    size: "s"
  }), /*#__PURE__*/_react.default.createElement(_i18n.OuiI18n, {
    token: "ouiColorPicker.alphaLabel",
    default: "Alpha channel (opacity) value"
  }, function (alphaLabel) {
    return /*#__PURE__*/_react.default.createElement(_form.OuiRange, {
      className: "ouiColorPicker__alphaRange",
      "data-test-subj": "ouiColorPickerAlpha",
      compressed: true,
      showInput: true,
      max: 100,
      min: 0,
      value: alphaRangeValue,
      append: "%",
      onChange: handleAlphaSelection,
      "aria-label": alphaLabel
    });
  })));

  var buttonOrInput;

  if (button) {
    buttonOrInput = /*#__PURE__*/(0, _react.cloneElement)(button, {
      onClick: handleToggle,
      id: id,
      disabled: disabled,
      'data-test-subj': testSubjAnchor
    });
  } else {
    var colorStyle = chromaColor ? chromaColor.css() : undefined;
    buttonOrInput = /*#__PURE__*/_react.default.createElement(_form.OuiFormControlLayout, {
      icon: !readOnly ? {
        type: 'arrowDown',
        side: 'right'
      } : undefined,
      clear: isClearable && color && !readOnly && !disabled ? {
        onClick: handleClearInput
      } : undefined,
      readOnly: readOnly,
      fullWidth: fullWidth,
      compressed: compressed,
      onKeyDown: handleToggleOnKeyDown,
      prepend: prepend,
      append: append
    }, /*#__PURE__*/_react.default.createElement("div", {
      // Used to pass the chosen color through to form layout SVG using currentColor
      style: {
        color: colorStyle
      }
    }, /*#__PURE__*/_react.default.createElement(_i18n.OuiI18n, {
      tokens: ['ouiColorPicker.openLabel', 'ouiColorPicker.closeLabel', 'ouiColorPicker.transparent'],
      defaults: ['Press the escape key to close the popover', 'Press the down key to open a popover containing color options', 'Transparent']
    }, function (_ref6) {
      var _ref7 = (0, _slicedToArray2.default)(_ref6, 3),
          openLabel = _ref7[0],
          closeLabel = _ref7[1],
          transparent = _ref7[2];

      return /*#__PURE__*/_react.default.createElement(_form.OuiFieldText, {
        className: inputClasses,
        onClick: handleInputActivity,
        onKeyDown: handleInputActivity,
        onBlur: handleOnBlur,
        value: color ? color.toUpperCase() : _utils.HEX_FALLBACK,
        placeholder: !color ? placeholder || transparent : undefined,
        id: id,
        onChange: handleColorInput,
        icon: chromaColor ? 'swatchInput' : 'stopSlash',
        inputRef: setInputRef,
        isInvalid: isInvalid,
        compressed: compressed,
        disabled: disabled,
        readOnly: readOnly,
        fullWidth: fullWidth,
        autoComplete: "off",
        "data-test-subj": testSubjAnchor,
        "aria-label": isColorSelectorShown ? openLabel : closeLabel
      });
    })));
  }

  return display === 'inline' ? /*#__PURE__*/_react.default.createElement("div", {
    className: classes
  }, composite) : /*#__PURE__*/_react.default.createElement(_popover.OuiPopover, {
    ownFocus: popoverShouldOwnFocus,
    initialFocus: (_ref8 = mode !== 'swatch' ? satruationRef.current : swatchRef.current) !== null && _ref8 !== void 0 ? _ref8 : undefined,
    button: buttonOrInput,
    isOpen: isColorSelectorShown,
    closePopover: handleFinalSelection,
    zIndex: popoverZIndex,
    className: popoverClass,
    panelClassName: panelClasses,
    display: button ? 'inlineBlock' : 'block',
    attachToAnchor: button ? false : true,
    anchorPosition: "downLeft",
    panelPaddingSize: "s"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes,
    "data-test-subj": "ouiColorPickerPopover"
  }, /*#__PURE__*/_react.default.createElement(_focus_trap.OuiFocusTrap, {
    clickOutsideDisables: true
  }, /*#__PURE__*/_react.default.createElement(_accessibility.OuiScreenReaderOnly, null, /*#__PURE__*/_react.default.createElement("p", {
    "aria-live": "polite"
  }, /*#__PURE__*/_react.default.createElement(_i18n.OuiI18n, {
    token: "ouiColorPicker.screenReaderAnnouncement",
    default: "A popup with a range of selectable colors opened. Tab forward to cycle through colors choices or press escape to close this popup."
  }))), composite)));
};
/* OUI -> EUI Aliases: Build-Time */


exports.OuiColorPicker = OuiColorPicker;
OuiColorPicker.propTypes = {
  /**
     *  Custom element to use instead of text input
     */
  button: _propTypes.default.element,

  /**
     *  Use the compressed style for OuiFieldText
     */
  compressed: _propTypes.default.bool,
  display: _propTypes.default.oneOf(["default", "inline"]),
  disabled: _propTypes.default.bool,
  fullWidth: _propTypes.default.bool,
  id: _propTypes.default.string,

  /**
     *  Custom validation flag
     */
  isInvalid: _propTypes.default.bool,

  /**
     * Choose between swatches with gradient picker (default), swatches only, gradient picker only, or secondary input only.
     */
  mode: _propTypes.default.oneOf(["default", "swatch", "picker", "secondaryInput"]),

  /**
     *  Custom z-index for the popover
     */
  popoverZIndex: _propTypes.default.number,
  readOnly: _propTypes.default.bool,

  /**
     *  Array of hex strings (3 or 6 character) to use as swatch options. Defaults to OUI visualization colors
     */
  swatches: _propTypes.default.arrayOf(_propTypes.default.string.isRequired),

  /**
     * Creates an input group with element(s) coming before input. It only shows when the `display` is set to `default`.
     * `string` | `ReactElement` or an array of these
     */
  prepend: _propTypes.default.any,

  /**
     * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`.
     * `string` | `ReactElement` or an array of these
     */
  append: _propTypes.default.any,

  /**
     * Whether to render the alpha channel (opacity) value range slider.
     */
  showAlpha: _propTypes.default.bool,

  /**
     * Will format the text input in the provided format when possible (hue and saturation selection)
     * Exceptions: Manual text input and swatches will display as-authored
     * Default is to display the last format entered by the user
     */
  format: _propTypes.default.oneOf(["hex", "rgba"]),

  /**
     * Placement option for a secondary color value input.
     */
  secondaryInputDisplay: _propTypes.default.oneOf(["top", "bottom", "none"]),

  /**
     * Add a button to the primary input to clear its value.
     */
  isClearable: _propTypes.default.bool,

  /**
     * Text to replace the default 'Transparent' placeholder for unset color values.
     */
  placeholder: _propTypes.default.string,
  className: _propTypes.default.string,
  "aria-label": _propTypes.default.string,
  "data-test-subj": _propTypes.default.string,

  /**
     * hex (string)
     * RGB (as comma separated string)
     * RGBa (as comma separated string)
     * Empty string will register as 'transparent'
     */
  color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.oneOf([null])]),
  onBlur: _propTypes.default.func,

  /**
     * text (string, as entered or selected)
     * hex (8-digit hex if alpha < 1, otherwise 6-digit hex)
     * RGBa (as array; values of NaN if color is invalid)
     * isValid (boolean signifying if the input text is a valid color)
     */
  onChange: _propTypes.default.func.isRequired,
  onFocus: _propTypes.default.func
};