@hitachivantara/uikit-react-lab 3.38.0

package/dist/ColorPicker/ColorPicker.js

@@ -0,0 +1,260 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.string.trim.js");
+
+require("core-js/modules/es.array.join.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _Picker = _interopRequireDefault(require("./Picker"));
+
+var _PresetColors = _interopRequireDefault(require("./PresetColors"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.
+ * It receives a color string in HEX format and outputs an HEX formatted color.
+ */
+var HvColorPicker = function HvColorPicker(props) {
+  var theme = (0, _core.useTheme)();
+  var id = props.id,
+      name = props.name,
+      _props$required = props.required,
+      required = _props$required === void 0 ? false : _props$required,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      label = props.label,
+      ariaLabel = props["aria-label"],
+      ariaLabelledBy = props["aria-labelledby"],
+      description = props.description,
+      ariaDescribedBy = props["aria-describedby"],
+      className = props.className,
+      classes = props.classes,
+      value = props.value,
+      onChange = props.onChange,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? theme.hv.palette.accent.acce1 : _props$defaultValue,
+      expanded = props.expanded,
+      _props$defaultExpande = props.defaultExpanded,
+      defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande;
+
+  var _useControlled = (0, _uikitReactCore.useControlled)(expanded, Boolean(defaultExpanded)),
+      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+      isOpen = _useControlled2[0],
+      setIsOpen = _useControlled2[1];
+
+  var _useControlled3 = (0, _uikitReactCore.useControlled)(value, defaultValue),
+      _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 2),
+      color = _useControlled4[0],
+      setColor = _useControlled4[1];
+
+  var handleToggle = function handleToggle(_evt, s) {
+    setIsOpen(s);
+  };
+
+  var handleSelect = function handleSelect(val) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(val.hex);
+    setColor(val.hex);
+  };
+
+  var elementId = (0, _uikitReactCore.useUniqueId)(id, "hvdropdown");
+  var hasLabel = label != null;
+  var hasDescription = description != null;
+  var colorArray = (0, _react.useMemo)(function () {
+    return [theme.hv.palette.semantic.sema4, theme.hv.palette.semantic.sema3, "#F6941E", "#8DC63D", theme.hv.palette.semantic.sema1, theme.hv.palette.semantic.sema19, "#05A99C", "#01ADEF", theme.hv.palette.accent.acce2h, "#0155A5", "#2E3192", "#652C90", theme.hv.palette.semantic.sema6, "#EC018B", theme.hv.palette.atmosphere.atmo5, theme.hv.palette.accent.acce1];
+  }, [theme]);
+
+  var setFocusToContent = function setFocusToContent(containerRef) {
+    var inputs = containerRef === null || containerRef === void 0 ? void 0 : containerRef.getElementsByTagName("input");
+
+    if ((inputs === null || inputs === void 0 ? void 0 : inputs.length) > 0) {
+      inputs[0].focus();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvFormElement, {
+    id: id,
+    name: name,
+    disabled: disabled,
+    required: required,
+    className: (0, _clsx.default)(className, classes.root)
+  }, (hasLabel || hasDescription) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvLabel, {
+    id: (0, _uikitReactCore.setId)(elementId, "label"),
+    label: label,
+    className: classes.label
+  }), hasDescription && /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvInfoMessage, {
+    id: (0, _uikitReactCore.setId)(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvBaseDropdown, {
+    className: className,
+    expanded: isOpen,
+    onToggle: handleToggle,
+    onContainerCreation: setFocusToContent,
+    placeholder: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Checkbox, {
+      className: classes.headerColorIcon,
+      color: [color]
+    }), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
+      className: classes.headerColorValue
+    }, color)),
+    "aria-label": ariaLabel,
+    "aria-labelledby": [label && (0, _uikitReactCore.setId)(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
+    "aria-describedby": [description && (0, _uikitReactCore.setId)(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvPanel, {
+    className: classes.panel
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.colorPicker
+  }, /*#__PURE__*/_react.default.createElement(_Picker.default, {
+    color: color,
+    onChange: handleSelect
+  }), /*#__PURE__*/_react.default.createElement(_PresetColors.default, {
+    colors: colorArray,
+    onClick: handleSelect
+  })))));
+};
+
+HvColorPicker.propTypes = {
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The form element name.
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * The label of the form element.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be provided instead.
+   */
+  label: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": _propTypes.default.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: _propTypes.default.bool,
+
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    root: _propTypes.default.string,
+    labelContainer: _propTypes.default.string,
+    label: _propTypes.default.string,
+    description: _propTypes.default.string,
+    headerColorIcon: _propTypes.default.string,
+    headerColorValue: _propTypes.default.string,
+    panel: _propTypes.default.string,
+    colorPicker: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * If `true` the color picker starts opened if `false` it starts closed.
+   */
+  expanded: _propTypes.default.bool,
+
+  /**
+   * When uncontrolled, defines the initial expanded state.
+   */
+  defaultExpanded: _propTypes.default.bool,
+
+  /**
+   * The callback fired when the value changes.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * The value color, in HEX format.
+   */
+  value: _propTypes.default.string,
+
+  /**
+   * When uncontrolled, defines the initial value state.
+   */
+  defaultValue: _propTypes.default.string
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvColorPicker"
+})(HvColorPicker);
+
+exports.default = _default;
+//# sourceMappingURL=ColorPicker.js.map

package/dist/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ColorPicker/ColorPicker.js"],"names":["HvColorPicker","props","theme","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","hv","palette","accent","acce1","expanded","defaultExpanded","Boolean","isOpen","setIsOpen","color","setColor","handleToggle","_evt","s","handleSelect","val","hex","elementId","hasLabel","hasDescription","colorArray","semantic","sema4","sema3","sema1","sema19","acce2h","sema6","atmosphere","atmo5","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","headerColorIcon","headerColorValue","join","trim","undefined","panel","colorPicker","propTypes","PropTypes","string","node","bool","shape","isRequired","func","styles"],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, useTheme } from \"@material-ui/core\";\nimport {\n  HvPanel,\n  HvLabel,\n  HvInfoMessage,\n  HvFormElement,\n  HvBaseDropdown,\n  useControlled,\n  HvTypography,\n  useUniqueId,\n  setId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Checkbox } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\nimport Picker from \"./Picker\";\nimport PresetColors from \"./PresetColors\";\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nconst HvColorPicker = (props) => {\n  const theme = useTheme();\n  const {\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    classes,\n    value,\n    onChange,\n    defaultValue = theme.hv.palette.accent.acce1,\n\n    expanded,\n    defaultExpanded = false,\n  } = props;\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n\n  const handleToggle = (_evt, s) => {\n    setIsOpen(s);\n  };\n\n  const handleSelect = (val) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const colorArray = useMemo(\n    () => [\n      theme.hv.palette.semantic.sema4,\n      theme.hv.palette.semantic.sema3,\n      \"#F6941E\",\n      \"#8DC63D\",\n      theme.hv.palette.semantic.sema1,\n      theme.hv.palette.semantic.sema19,\n      \"#05A99C\",\n      \"#01ADEF\",\n      theme.hv.palette.accent.acce2h,\n      \"#0155A5\",\n      \"#2E3192\",\n      \"#652C90\",\n      theme.hv.palette.semantic.sema6,\n      \"#EC018B\",\n      theme.hv.palette.atmosphere.atmo5,\n      theme.hv.palette.accent.acce1,\n    ],\n    [theme]\n  );\n\n  const setFocusToContent = (containerRef) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs?.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      required={required}\n      className={clsx(className, classes.root)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel id={setId(elementId, \"label\")} label={label} className={classes.label} />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage id={setId(elementId, \"description\")} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        className={className}\n        expanded={isOpen}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        placeholder={\n          <>\n            <Checkbox className={classes.headerColorIcon} color={[color]} />\n            <HvTypography className={classes.headerColorValue}>{color}</HvTypography>\n          </>\n        }\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy].join(\" \").trim() || undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy].join(\" \").trim() ||\n          undefined\n        }\n      >\n        <HvPanel className={classes.panel}>\n          <div className={classes.colorPicker}>\n            <Picker color={color} onChange={handleSelect} />\n            <PresetColors colors={colorArray} onClick={handleSelect} />\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n\nHvColorPicker.propTypes = {\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n    labelContainer: PropTypes.string,\n    label: PropTypes.string,\n    description: PropTypes.string,\n    headerColorIcon: PropTypes.string,\n    headerColorValue: PropTypes.string,\n    panel: PropTypes.string,\n    colorPicker: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * If `true` the color picker starts opened if `false` it starts closed.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * The value color, in HEX format.\n   */\n  value: PropTypes.string,\n\n  /**\n   * When uncontrolled, defines the initial value state.\n   */\n  defaultValue: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvColorPicker\" })(HvColorPicker);\n"],"file":"ColorPicker.js"}

package/dist/ColorPicker/Fields/Fields.js

@@ -0,0 +1,192 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Fields = void 0;
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.replace.js");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var color = _interopRequireWildcard(require("react-color/lib/helpers/color"));
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable no-param-reassign */
+// eslint-disable-next-line react/prop-types
+var Fields = function Fields(_ref) {
+  var onChange = _ref.onChange,
+      rgb = _ref.rgb,
+      hex = _ref.hex;
+  var classes = (0, _styles.default)();
+
+  var _useState = (0, _react.useState)(hex),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      internalHex = _useState2[0],
+      setInternalHex = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(rgb.r),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      internalRed = _useState4[0],
+      setInternalRed = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(rgb.g),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      internalGreen = _useState6[0],
+      setInternalGreen = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(rgb.b),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      internalBlue = _useState8[0],
+      setInternalBlue = _useState8[1];
+
+  var hexInputRef = (0, _react.useRef)();
+  var redInputRef = (0, _react.useRef)();
+  var greenInputRef = (0, _react.useRef)();
+  var blueInputRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (document.activeElement !== hexInputRef.current) {
+      setInternalHex(hex);
+    }
+  }, [hex]);
+  (0, _react.useEffect)(function () {
+    if (document.activeElement !== redInputRef.current) {
+      setInternalRed(rgb.r);
+    }
+
+    if (document.activeElement !== greenInputRef.current) {
+      setInternalGreen(rgb.g);
+    }
+
+    if (document.activeElement !== blueInputRef.current) {
+      setInternalBlue(rgb.b);
+    }
+  }, [rgb]);
+
+  var handleChange = function handleChange(data, e) {
+    if (data.hex && color.isValidHex(data.hex)) {
+      onChange({
+        hex: data.hex,
+        source: "hex"
+      }, e);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || rgb.r,
+        g: data.g || rgb.g,
+        b: data.b || rgb.b,
+        source: "rgb"
+      }, e);
+    }
+  };
+
+  var onChangeHex = function onChangeHex(_evt, value) {
+    setInternalHex(value);
+    handleChange({
+      hex: value
+    }, _evt);
+  };
+
+  var onChangeRbg = function onChangeRbg(_evt, value, colorPart) {
+    if (colorPart === "r") setInternalRed(value);
+    if (colorPart === "g") setInternalGreen(value);
+    if (colorPart === "b") setInternalBlue(value);
+    handleChange({
+      r: colorPart === "r" ? value : rgb.r,
+      g: colorPart === "g" ? value : rgb.g,
+      b: colorPart === "b" ? value : rgb.b
+    }, _evt);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(classes.fields)
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvInput, {
+    inputRef: hexInputRef,
+    className: (0, _clsx.default)(classes.double),
+    label: "HEX",
+    value: internalHex.replace("#", ""),
+    onChange: onChangeHex,
+    onBlur: function onBlur() {
+      return setInternalHex(hex);
+    },
+    disableClear: true
+  }), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvInput, {
+    inputRef: redInputRef,
+    className: (0, _clsx.default)(classes.single),
+    label: "R",
+    value: "".concat(internalRed),
+    onChange: function onChange(_evt, value) {
+      return onChangeRbg(_evt, value, "r");
+    },
+    onBlur: function onBlur() {
+      return setInternalRed(rgb.r);
+    },
+    disableClear: true
+  }), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvInput, {
+    inputRef: greenInputRef,
+    className: (0, _clsx.default)(classes.single),
+    label: "G",
+    value: "".concat(internalGreen),
+    onChange: function onChange(_evt, value) {
+      return onChangeRbg(_evt, value, "g");
+    },
+    onBlur: function onBlur() {
+      return setInternalGreen(rgb.g);
+    },
+    disableClear: true
+  }), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvInput, {
+    inputRef: blueInputRef,
+    className: (0, _clsx.default)(classes.single),
+    label: "B",
+    value: "".concat(internalBlue),
+    onChange: function onChange(_evt, value) {
+      return onChangeRbg(_evt, value, "b");
+    },
+    onBlur: function onBlur() {
+      return setInternalBlue(rgb.b);
+    },
+    disableClear: true
+  }));
+};
+
+exports.Fields = Fields;
+Fields.propTypes = {
+  rgb: _propTypes.default.shape({
+    r: _propTypes.default.number,
+    g: _propTypes.default.number,
+    b: _propTypes.default.number
+  }).isRequired
+};
+var _default = Fields;
+exports.default = _default;
+//# sourceMappingURL=Fields.js.map

package/dist/ColorPicker/Fields/Fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/Fields/Fields.js"],"names":["Fields","onChange","rgb","hex","classes","internalHex","setInternalHex","r","internalRed","setInternalRed","g","internalGreen","setInternalGreen","b","internalBlue","setInternalBlue","hexInputRef","redInputRef","greenInputRef","blueInputRef","document","activeElement","current","handleChange","data","e","color","isValidHex","source","onChangeHex","_evt","value","onChangeRbg","colorPart","fields","double","replace","single","propTypes","PropTypes","shape","number","isRequired"],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport useStyles from \"./styles\";\n\n// eslint-disable-next-line react/prop-types\nexport const Fields = ({ onChange, rgb, hex }) => {\n  const classes = useStyles();\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb.r);\n  const [internalGreen, setInternalGreen] = useState(rgb.g);\n  const [internalBlue, setInternalBlue] = useState(rgb.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (data, e) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        e\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb.r,\n          g: data.g || rgb.g,\n          b: data.b || rgb.b,\n          source: \"rgb\",\n        },\n        e\n      );\n    }\n  };\n\n  const onChangeHex = (_evt, value) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, _evt);\n  };\n\n  const onChangeRbg = (_evt, value, colorPart) => {\n    if (colorPart === \"r\") setInternalRed(value);\n    if (colorPart === \"g\") setInternalGreen(value);\n    if (colorPart === \"b\") setInternalBlue(value);\n    handleChange(\n      {\n        r: colorPart === \"r\" ? value : rgb.r,\n        g: colorPart === \"g\" ? value : rgb.g,\n        b: colorPart === \"b\" ? value : rgb.b,\n      },\n      _evt\n    );\n  };\n\n  return (\n    <div className={clsx(classes.fields)}>\n      <HvInput\n        inputRef={hexInputRef}\n        className={clsx(classes.double)}\n        label=\"HEX\"\n        value={internalHex.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        inputRef={redInputRef}\n        className={clsx(classes.single)}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"r\")}\n        onBlur={() => setInternalRed(rgb.r)}\n        disableClear\n      />\n      <HvInput\n        inputRef={greenInputRef}\n        className={clsx(classes.single)}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb.g)}\n        disableClear\n      />\n      <HvInput\n        inputRef={blueInputRef}\n        className={clsx(classes.single)}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(_evt, value) => onChangeRbg(_evt, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n\nFields.propTypes = {\n  rgb: PropTypes.shape({\n    r: PropTypes.number,\n    g: PropTypes.number,\n    b: PropTypes.number,\n  }).isRequired,\n};\n\nexport default Fields;\n"],"file":"Fields.js"}

package/dist/ColorPicker/Fields/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Fields.default;
+  }
+});
+
+var _Fields = _interopRequireDefault(require("./Fields"));
+//# sourceMappingURL=index.js.map

package/dist/ColorPicker/Fields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/Fields/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./Fields\";\n"],"file":"index.js"}

package/dist/ColorPicker/Fields/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@material-ui/core");
+
+var styles = (0, _core.makeStyles)(function () {
+  return {
+    fields: {
+      width: "100%",
+      display: "flex",
+      paddingTop: 10,
+      paddingBottom: 20,
+      marginRight: 5
+    },
+    single: {
+      width: 40,
+      paddingLeft: 5,
+      "& input": {
+        marginLeft: 5,
+        marginRight: 5
+      },
+      "& label": {
+        paddingLeft: 5
+      }
+    },
+    double: {
+      width: 80,
+      "& input": {
+        textTransform: "uppercase",
+        marginLeft: 5,
+        marginRight: 5
+      },
+      "& label": {
+        paddingLeft: 5
+      },
+      paddingRight: 20
+    }
+  };
+});
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/ColorPicker/Fields/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/Fields/styles.js"],"names":["styles","fields","width","display","paddingTop","paddingBottom","marginRight","single","paddingLeft","marginLeft","double","textTransform","paddingRight"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,MAAM,GAAG,sBAAW;AAAA,SAAO;AAC/BC,IAAAA,MAAM,EAAE;AACNC,MAAAA,KAAK,EAAE,MADD;AAENC,MAAAA,OAAO,EAAE,MAFH;AAGNC,MAAAA,UAAU,EAAE,EAHN;AAINC,MAAAA,aAAa,EAAE,EAJT;AAKNC,MAAAA,WAAW,EAAE;AALP,KADuB;AAQ/BC,IAAAA,MAAM,EAAE;AACNL,MAAAA,KAAK,EAAE,EADD;AAENM,MAAAA,WAAW,EAAE,CAFP;AAGN,iBAAW;AACTC,QAAAA,UAAU,EAAE,CADH;AAETH,QAAAA,WAAW,EAAE;AAFJ,OAHL;AAON,iBAAW;AACTE,QAAAA,WAAW,EAAE;AADJ;AAPL,KARuB;AAmB/BE,IAAAA,MAAM,EAAE;AACNR,MAAAA,KAAK,EAAE,EADD;AAEN,iBAAW;AACTS,QAAAA,aAAa,EAAE,WADN;AAETF,QAAAA,UAAU,EAAE,CAFH;AAGTH,QAAAA,WAAW,EAAE;AAHJ,OAFL;AAON,iBAAW;AACTE,QAAAA,WAAW,EAAE;AADJ,OAPL;AAUNI,MAAAA,YAAY,EAAE;AAVR;AAnBuB,GAAP;AAAA,CAAX,CAAf;eAiCeZ,M","sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles(() => ({\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: 10,\n    paddingBottom: 20,\n    marginRight: 5,\n  },\n  single: {\n    width: 40,\n    paddingLeft: 5,\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    width: 80,\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n    paddingRight: 20,\n  },\n}));\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/ColorPicker/Picker/Picker.js

@@ -0,0 +1,84 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _common = require("react-color/lib/components/common");
+
+var _Fields = _interopRequireDefault(require("../Fields"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable no-param-reassign */
+// eslint-disable-next-line react/prop-types
+var Picker = function Picker(_ref) {
+  var onChange = _ref.onChange,
+      rgb = _ref.rgb,
+      hsl = _ref.hsl,
+      hsv = _ref.hsv,
+      hex = _ref.hex;
+  var classes = (0, _styles.default)();
+  var SaturationPointer = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _clsx.default)(classes.saturationPointer)
+    });
+  }, [classes.saturationPointer]);
+  var HueSlider = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _clsx.default)(classes.hueSlider)
+    });
+  }, [classes.hueSlider]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(classes.pickers)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(classes.saturation)
+  }, /*#__PURE__*/_react.default.createElement(_common.Saturation, {
+    hsl: hsl,
+    hsv: hsv,
+    onChange: onChange,
+    pointer: SaturationPointer
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(classes.hue)
+  }, /*#__PURE__*/_react.default.createElement(_common.Hue, {
+    direction: "vertical",
+    hsl: hsl,
+    onChange: onChange,
+    pointer: HueSlider
+  }))), /*#__PURE__*/_react.default.createElement(_Fields.default, {
+    rgb: rgb,
+    hsl: hsl,
+    hex: hex,
+    onChange: onChange
+  }));
+};
+
+var _default = (0, _common.ColorWrap)(Picker);
+
+exports.default = _default;
+//# sourceMappingURL=Picker.js.map

package/dist/ColorPicker/Picker/Picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ColorPicker/Picker/Picker.js"],"names":["Picker","onChange","rgb","hsl","hsv","hex","classes","SaturationPointer","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAPA;AASA;AACA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAAsC;AAAA,MAAnCC,QAAmC,QAAnCA,QAAmC;AAAA,MAAzBC,GAAyB,QAAzBA,GAAyB;AAAA,MAApBC,GAAoB,QAApBA,GAAoB;AAAA,MAAfC,GAAe,QAAfA,GAAe;AAAA,MAAVC,GAAU,QAAVA,GAAU;AACnD,MAAMC,OAAO,GAAG,sBAAhB;AAEA,MAAMC,iBAAiB,GAAG,wBACxB;AAAA,wBAAM;AAAK,MAAA,SAAS,EAAE,mBAAKD,OAAO,CAACE,iBAAb;AAAhB,MAAN;AAAA,GADwB,EAExB,CAACF,OAAO,CAACE,iBAAT,CAFwB,CAA1B;AAIA,MAAMC,SAAS,GAAG,wBAChB;AAAA,wBAAM;AAAK,MAAA,SAAS,EAAE,mBAAKH,OAAO,CAACI,SAAb;AAAhB,MAAN;AAAA,GADgB,EAEhB,CAACJ,OAAO,CAACI,SAAT,CAFgB,CAAlB;AAKA,sBACE,yEACE;AAAK,IAAA,SAAS,EAAE,mBAAKJ,OAAO,CAACK,OAAb;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAE,mBAAKL,OAAO,CAACM,UAAb;AAAhB,kBACE,6BAAC,kBAAD;AAAY,IAAA,GAAG,EAAET,GAAjB;AAAsB,IAAA,GAAG,EAAEC,GAA3B;AAAgC,IAAA,QAAQ,EAAEH,QAA1C;AAAoD,IAAA,OAAO,EAAEM;AAA7D,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAE,mBAAKD,OAAO,CAACO,GAAb;AAAhB,kBACE,6BAAC,WAAD;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,GAAG,EAAEV,GAA/B;AAAoC,IAAA,QAAQ,EAAEF,QAA9C;AAAwD,IAAA,OAAO,EAAEQ;AAAjE,IADF,CAJF,CADF,eASE,6BAAC,eAAD;AAAQ,IAAA,GAAG,EAAEP,GAAb;AAAkB,IAAA,GAAG,EAAEC,GAAvB;AAA4B,IAAA,GAAG,EAAEE,GAAjC;AAAsC,IAAA,QAAQ,EAAEJ;AAAhD,IATF,CADF;AAaD,CAzBD;;eA2Be,uBAAUD,MAAV,C","sourcesContent":["/* eslint-disable no-param-reassign */\n\nimport clsx from \"clsx\";\nimport React, { useCallback } from \"react\";\nimport { Saturation, ColorWrap, Hue } from \"react-color/lib/components/common\";\n\nimport Fields from \"../Fields\";\nimport useStyles from \"./styles\";\n\n// eslint-disable-next-line react/prop-types\nconst Picker = ({ onChange, rgb, hsl, hsv, hex }) => {\n  const classes = useStyles();\n\n  const SaturationPointer = useCallback(\n    () => <div className={clsx(classes.saturationPointer)} />,\n    [classes.saturationPointer]\n  );\n  const HueSlider = useCallback(\n    () => <div className={clsx(classes.hueSlider)} />,\n    [classes.hueSlider]\n  );\n\n  return (\n    <>\n      <div className={clsx(classes.pickers)}>\n        <div className={clsx(classes.saturation)}>\n          <Saturation hsl={hsl} hsv={hsv} onChange={onChange} pointer={SaturationPointer} />\n        </div>\n        <div className={clsx(classes.hue)}>\n          <Hue direction=\"vertical\" hsl={hsl} onChange={onChange} pointer={HueSlider} />\n        </div>\n      </div>\n      <Fields rgb={rgb} hsl={hsl} hex={hex} onChange={onChange} />\n    </>\n  );\n};\n\nexport default ColorWrap(Picker);\n"],"file":"Picker.js"}