@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

package/dist/esm/components/ColorPicker/ColorPicker.js

@@ -21,115 +21,222 @@ const DEFAULT_LABELS = {
   recommendedColorsLabel: "Recommended colors:",
   customColorsLabel: "Custom colors:"
 };
-const HvColorPicker = forwardRef((props, ref) => {
-  const {
-    id,
-    name,
-    required = false,
-    disabled = false,
-    label,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    description,
-    "aria-describedby": ariaDescribedBy,
-    className,
-    classes: classesProp,
-    value,
-    onChange,
-    onChangeComplete,
-    defaultValue = "",
-    expanded,
-    defaultExpanded = false,
-    recommendedColorsPosition = "top",
-    recommendedColors = ["#95AFE8", "#E89E5D", "#83B8A6", "#70759C", "#C57E7E", "#FADA95", "#ADBFE8", "#E3B386", "#9AC6B7", "#8B90AF", "#CF9797", "#FAE1AA"],
-    showLabels = true,
-    labels: labelsProp,
-    dropdownIcon = "colorPicker",
-    placeholder = "Select color...",
-    iconOnly = false,
-    showSavedColors = true,
-    showCustomColors = true,
-    savedColorsValue,
-    defaultSavedColorsValue = [],
-    onSavedColorAdded,
-    onSavedColorRemoved,
-    deleteSavedColorButtonArialLabel = "Delete saved color",
-    addSavedColorButtonAriaLabel = "Add current color to saved colors"
-  } = useDefaultProps("HvColorPicker", props);
-  const {
-    classes,
-    css,
-    cx
-  } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
-  const [color, setColor] = useControlled(value, defaultValue);
-  const [savedColors, setSavedColors] = useControlled(savedColorsValue, defaultSavedColorsValue);
-  const elementId = useUniqueId(id, "hvdropdown");
-  const hasLabel = label != null;
-  const hasDescription = description != null;
-  const handleToggle = (_, open) => {
-    setIsOpen(open);
-  };
-  const handleSelect = (val) => {
-    onChange?.(val.hex);
-    onChangeComplete?.(val.hex);
-    setColor(val.hex);
-  };
-  const handleOnChange = (val) => {
-    onChange?.(val.hex);
-    setColor(val.hex);
-  };
-  const handleOnChangeComplete = (val) => {
-    onChangeComplete?.(val.hex);
-    setColor(val.hex);
-  };
-  const handleAddColor = () => {
-    const colorToAdd = color || "#000000";
-    onSavedColorAdded?.(colorToAdd);
-    setSavedColors([...savedColors, colorToAdd]);
-  };
-  const handleRemoveColor = (val, position) => {
-    if (savedColors[position] === val) {
-      const sColors = [...savedColors];
-      sColors.splice(position, 1);
-      onSavedColorRemoved?.(val);
-      setSavedColors(sColors);
-    }
-  };
-  const setFocusToContent = (containerRef) => {
-    const inputs = containerRef?.getElementsByTagName("input");
-    if (inputs && inputs.length > 0) {
-      inputs[0].focus();
-    }
-  };
-  return /* @__PURE__ */ jsxs(HvFormElement, { id, name, disabled, required, className: cx(classes.root, className), children: [
-    (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-      hasLabel && /* @__PURE__ */ jsx(HvLabel, { id: setId(elementId, "label"), label, className: classes.label }),
-      hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), className: classes.description, children: description })
-    ] }),
-    /* @__PURE__ */ jsx(HvBaseDropdown, { ref, variableWidth: true, className, expanded: isOpen, onToggle: handleToggle, onContainerCreation: setFocusToContent, classes: {
-      root: cx({
-        [classes.dropdownRootIconOnly]: iconOnly
-      }),
-      selection: cx(iconOnly && css({
-        padding: 0
-      }))
-    }, adornment: iconOnly && color ? /* @__PURE__ */ jsx(Checkbox, { className: classes.headerColorIconOnly, color: [color, "transparent"] }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, { className: classes.colorPickerIcon }) : void 0, placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Checkbox, { className: classes.headerColorIcon, color: [color, "transparent"] }),
-      /* @__PURE__ */ jsx(HvTypography, { className: classes.headerColorValue, variant: "label", children: color })
-    ] }) : placeholder, "aria-label": ariaLabel, "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, children: /* @__PURE__ */ jsx(HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxs("div", { className: classes.colorPicker, children: [
-      recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, { className: classes.recommendedColorsRoot, colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels?.recommendedColorsLabel : void 0 }),
-      showCustomColors && /* @__PURE__ */ jsx(Picker, { classes: {
-        fields: cx({
-          [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
-        })
-      }, title: showLabels ? labels?.customColorsLabel : void 0, color, onChange: handleOnChange, onChangeComplete: handleOnChangeComplete }),
-      showSavedColors && /* @__PURE__ */ jsx(SavedColors, { colors: savedColors, onAddColor: handleAddColor, onClickColor: handleSelect, onRemoveColor: handleRemoveColor, deleteButtonAriaLabel: deleteSavedColorButtonArialLabel, addButtonAriaLabel: addSavedColorButtonAriaLabel }),
-      recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(PresetColors, { colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels?.recommendedColorsLabel : void 0 })
-    ] }) }) })
-  ] });
-});
+const HvColorPicker = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      required = false,
+      disabled = false,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      className,
+      classes: classesProp,
+      value,
+      onChange,
+      onChangeComplete,
+      defaultValue = "",
+      expanded,
+      defaultExpanded = false,
+      recommendedColorsPosition = "top",
+      recommendedColors = [
+        "#95AFE8",
+        "#E89E5D",
+        "#83B8A6",
+        "#70759C",
+        "#C57E7E",
+        "#FADA95",
+        "#ADBFE8",
+        "#E3B386",
+        "#9AC6B7",
+        "#8B90AF",
+        "#CF9797",
+        "#FAE1AA"
+      ],
+      showLabels = true,
+      labels: labelsProp,
+      dropdownIcon = "colorPicker",
+      placeholder = "Select color...",
+      iconOnly = false,
+      showSavedColors = true,
+      showCustomColors = true,
+      savedColorsValue,
+      defaultSavedColorsValue = [],
+      onSavedColorAdded,
+      onSavedColorRemoved,
+      deleteSavedColorButtonArialLabel = "Delete saved color",
+      addSavedColorButtonAriaLabel = "Add current color to saved colors"
+    } = useDefaultProps("HvColorPicker", props);
+    const { classes, css, cx } = useClasses(classesProp);
+    const labels = useLabels(DEFAULT_LABELS, labelsProp);
+    const [isOpen, setIsOpen] = useControlled(
+      expanded,
+      Boolean(defaultExpanded)
+    );
+    const [color, setColor] = useControlled(value, defaultValue);
+    const [savedColors, setSavedColors] = useControlled(
+      savedColorsValue,
+      defaultSavedColorsValue
+    );
+    const elementId = useUniqueId(id, "hvdropdown");
+    const hasLabel = label != null;
+    const hasDescription = description != null;
+    const handleToggle = (_, open) => {
+      setIsOpen(open);
+    };
+    const handleSelect = (val) => {
+      onChange?.(val.hex);
+      onChangeComplete?.(val.hex);
+      setColor(val.hex);
+    };
+    const handleOnChange = (val) => {
+      onChange?.(val.hex);
+      setColor(val.hex);
+    };
+    const handleOnChangeComplete = (val) => {
+      onChangeComplete?.(val.hex);
+      setColor(val.hex);
+    };
+    const handleAddColor = () => {
+      const colorToAdd = color || "#000000";
+      onSavedColorAdded?.(colorToAdd);
+      setSavedColors([...savedColors, colorToAdd]);
+    };
+    const handleRemoveColor = (val, position) => {
+      if (savedColors[position] === val) {
+        const sColors = [...savedColors];
+        sColors.splice(position, 1);
+        onSavedColorRemoved?.(val);
+        setSavedColors(sColors);
+      }
+    };
+    const setFocusToContent = (containerRef) => {
+      const inputs = containerRef?.getElementsByTagName("input");
+      if (inputs && inputs.length > 0) {
+        inputs[0].focus();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        disabled,
+        required,
+        className: cx(classes.root, className),
+        children: [
+          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+            hasLabel && /* @__PURE__ */ jsx(
+              HvLabel,
+              {
+                id: setId(elementId, "label"),
+                label,
+                className: classes.label
+              }
+            ),
+            hasDescription && /* @__PURE__ */ jsx(
+              HvInfoMessage,
+              {
+                id: setId(elementId, "description"),
+                className: classes.description,
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            HvBaseDropdown,
+            {
+              ref,
+              variableWidth: true,
+              className,
+              expanded: isOpen,
+              onToggle: handleToggle,
+              onContainerCreation: setFocusToContent,
+              classes: {
+                root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),
+                selection: cx(iconOnly && css({ padding: 0 }))
+              },
+              adornment: iconOnly && color ? /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  className: classes.headerColorIconOnly,
+                  color: [color, "transparent"]
+                }
+              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, { className: classes.colorPickerIcon }) : void 0,
+              placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    className: classes.headerColorIcon,
+                    color: [color, "transparent"]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  HvTypography,
+                  {
+                    className: classes.headerColorValue,
+                    variant: "label",
+                    children: color
+                  }
+                )
+              ] }) : placeholder,
+              "aria-label": ariaLabel,
+              "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+              "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+              children: /* @__PURE__ */ jsx(HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxs("div", { className: classes.colorPicker, children: [
+                recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(
+                  PresetColors,
+                  {
+                    className: classes.recommendedColorsRoot,
+                    colors: recommendedColors,
+                    onClick: handleSelect,
+                    title: showLabels ? labels?.recommendedColorsLabel : void 0
+                  }
+                ),
+                showCustomColors && /* @__PURE__ */ jsx(
+                  Picker,
+                  {
+                    classes: {
+                      fields: cx({
+                        [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
+                      })
+                    },
+                    title: showLabels ? labels?.customColorsLabel : void 0,
+                    color,
+                    onChange: handleOnChange,
+                    onChangeComplete: handleOnChangeComplete
+                  }
+                ),
+                showSavedColors && /* @__PURE__ */ jsx(
+                  SavedColors,
+                  {
+                    colors: savedColors,
+                    onAddColor: handleAddColor,
+                    onClickColor: handleSelect,
+                    onRemoveColor: handleRemoveColor,
+                    deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
+                    addButtonAriaLabel: addSavedColorButtonAriaLabel
+                  }
+                ),
+                recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(
+                  PresetColors,
+                  {
+                    colors: recommendedColors,
+                    onClick: handleSelect,
+                    title: showLabels ? labels?.recommendedColorsLabel : void 0
+                  }
+                )
+              ] }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 export {
   HvColorPicker,
   staticClasses as colorPickerClasses

package/dist/esm/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ColorState } from \"react-color\";\n\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\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?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A function to be executed whenever the color change is complete. */\n  onChangeComplete?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\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 */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  (props, ref) => {\n    const {\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      className,\n      classes: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\n      defaultValue = \"\",\n      expanded,\n      defaultExpanded = false,\n      recommendedColorsPosition = \"top\",\n      recommendedColors = [\n        \"#95AFE8\",\n        \"#E89E5D\",\n        \"#83B8A6\",\n        \"#70759C\",\n        \"#C57E7E\",\n        \"#FADA95\",\n        \"#ADBFE8\",\n        \"#E3B386\",\n        \"#9AC6B7\",\n        \"#8B90AF\",\n        \"#CF9797\",\n        \"#FAE1AA\",\n      ],\n      showLabels = true,\n      labels: labelsProp,\n      dropdownIcon = \"colorPicker\",\n      placeholder = \"Select color...\",\n      iconOnly = false,\n      showSavedColors = true,\n      showCustomColors = true,\n      savedColorsValue,\n      defaultSavedColorsValue = [],\n      onSavedColorAdded,\n      onSavedColorRemoved,\n      deleteSavedColorButtonArialLabel = \"Delete saved color\",\n      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, css, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue\n    );\n    const elementId = useUniqueId(id, \"hvdropdown\");\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleAddColor = () => {\n      // When no color is provided, react-color sets the picker to #000000.\n      // This is the color that should be added in this case.\n      const colorToAdd = color || \"#000000\";\n\n      onSavedColorAdded?.(colorToAdd);\n      setSavedColors([...savedColors, colorToAdd]);\n    };\n\n    const handleRemoveColor = (val: string, position: number) => {\n      if (savedColors[position] === val) {\n        const sColors = [...savedColors];\n        sColors.splice(position, 1);\n        onSavedColorRemoved?.(val);\n        setSavedColors(sColors);\n      }\n    };\n\n    const setFocusToContent = (containerRef: HTMLElement | null) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && 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={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n            selection: cx(iconOnly && css({ padding: 0 })),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <Checkbox\n                className={classes.headerColorIconOnly}\n                color={[color, \"transparent\"]}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <Checkbox\n                  className={classes.headerColorIcon}\n                  color={[color, \"transparent\"]}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\n                >\n                  {color}\n                </HvTypography>\n              </>\n            ) : (\n              placeholder\n            )\n          }\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n        >\n          <HvPanel className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={\n                    showLabels ? labels?.recommendedColorsLabel : undefined\n                  }\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels?.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\n                />\n              )}\n              {recommendedColorsPosition === \"bottom\" && (\n                <PresetColors\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={\n                    showLabels ? labels?.recommendedColorsLabel : undefined\n                  }\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","forwardRef","props","ref","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","setId","dropdownRootIconOnly","selection","padding","headerColorIconOnly","colorPickerIcon","undefined","headerColorIcon","headerColorValue","join","trim","panel","colorPicker","recommendedColorsRoot","fields","pickerFields"],"mappings":";;;;;;;;;;;;;;;;;;;AAmGA,MAAMA,iBAA+C;AAAA,EACnDC,wBAAwB;AAAA,EACxBC,mBAAmB;AACrB;AAMO,MAAMC,gBAAgBC,WAC3B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,eAAe;AAAA,IACfC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC,4BAA4B;AAAA,IAC5BC,oBAAoB,CAClB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,SAAS;AAAA,IAEXC,aAAa;AAAA,IACbC,QAAQC;AAAAA,IACRC,eAAe;AAAA,IACfC,cAAc;AAAA,IACdC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC,mBAAmB;AAAA,IACnBC;AAAAA,IACAC,0BAA0B,CAAE;AAAA,IAC5BC;AAAAA,IACAC;AAAAA,IACAC,mCAAmC;AAAA,IACnCC,+BAA+B;AAAA,EAAA,IAC7BC,gBAAgB,iBAAiBpC,KAAK;AAEpC,QAAA;AAAA,IAAEY;AAAAA,IAASyB;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAW1B,WAAW;AAE7CU,QAAAA,SAASiB,UAAU7C,gBAAgB6B,UAAU;AAE7C,QAAA,CAACiB,QAAQC,SAAS,IAAIC,cAC1BzB,UACA0B,QAAQzB,eAAe,CACzB;AACA,QAAM,CAAC0B,OAAOC,QAAQ,IAAIH,cAAc7B,OAAOG,YAAY;AAC3D,QAAM,CAAC8B,aAAaC,cAAc,IAAIL,cACpCb,kBACAC,uBACF;AACMkB,QAAAA,YAAYC,YAAYhD,IAAI,YAAY;AAC9C,QAAMiD,WAAW7C,SAAS;AAC1B,QAAM8C,iBAAiB3C,eAAe;AAEhC4C,QAAAA,eAA4CA,CAACC,GAAGC,SAAS;AAC7Db,cAAUa,IAAI;AAAA,EAAA;AAGVC,QAAAA,eAAeA,CACnBC,QACG;AACH1C,eAAW0C,IAAIC,GAAG;AAClB1C,uBAAmByC,IAAIC,GAAG;AAC1BZ,aAASW,IAAIC,GAAG;AAAA,EAAA;AAGZC,QAAAA,iBAAiBA,CACrBF,QACG;AACH1C,eAAW0C,IAAIC,GAAG;AAClBZ,aAASW,IAAIC,GAAG;AAAA,EAAA;AAGZE,QAAAA,yBAAyBA,CAC7BH,QACG;AACHzC,uBAAmByC,IAAIC,GAAG;AAC1BZ,aAASW,IAAIC,GAAG;AAAA,EAAA;AAGlB,QAAMG,iBAAiBA,MAAM;AAG3B,UAAMC,aAAajB,SAAS;AAE5Bb,wBAAoB8B,UAAU;AAC9Bd,mBAAe,CAAC,GAAGD,aAAae,UAAU,CAAC;AAAA,EAAA;AAGvCC,QAAAA,oBAAoBA,CAACN,KAAaO,aAAqB;AACvDjB,QAAAA,YAAYiB,QAAQ,MAAMP,KAAK;AAC3BQ,YAAAA,UAAU,CAAC,GAAGlB,WAAW;AACvBmB,cAAAA,OAAOF,UAAU,CAAC;AAC1B/B,4BAAsBwB,GAAG;AACzBT,qBAAeiB,OAAO;AAAA,IACxB;AAAA,EAAA;AAGIE,QAAAA,oBAAoBA,CAACC,iBAAqC;AACxDC,UAAAA,SAASD,cAAcE,qBAAqB,OAAO;AACrDD,QAAAA,UAAUA,OAAOE,SAAS,GAAG;AACxB,aAAA,CAAC,EAAEC;IACZ;AAAA,EAAA;AAIA,SAAA,qBAAC,eACC,EAAA,IACA,MACA,UACA,UACA,WAAWlC,GAAG1B,QAAQ6D,MAAM9D,SAAS,GAEnCwC,UAAAA;AAAAA,KAAAA,YAAYC,mBACZ,qBAAC,OAAI,EAAA,WAAWxC,QAAQ8D,gBACrBvB,UAAAA;AAAAA,MACC,YAAA,oBAAC,SACC,EAAA,IAAIwB,MAAM1B,WAAW,OAAO,GAC5B,OACA,WAAWrC,QAAQN,MAEtB,CAAA;AAAA,MAEA8C,kBACE,oBAAA,eAAA,EACC,IAAIuB,MAAM1B,WAAW,aAAa,GAClC,WAAWrC,QAAQH,aAElBA,UACH,YAAA,CAAA;AAAA,IAAA,GAEJ;AAAA,IAED,oBAAA,gBAAA,EACC,KACA,eAAa,MACb,WACA,UAAUgC,QACV,UAAUY,cACV,qBAAqBc,mBACrB,SAAS;AAAA,MACPM,MAAMnC,GAAG;AAAA,QAAE,CAAC1B,QAAQgE,oBAAoB,GAAGjD;AAAAA,MAAAA,CAAU;AAAA,MACrDkD,WAAWvC,GAAGX,YAAYU,IAAI;AAAA,QAAEyC,SAAS;AAAA,MAAA,CAAG,CAAC;AAAA,IAAA,GAE/C,WACEnD,YAAYkB,QACT,oBAAA,UAAA,EACC,WAAWjC,QAAQmE,qBACnB,OAAO,CAAClC,OAAO,aAAa,EAAA,KAE5BpB,iBAAiB,gBACnB,oBAAC,aAAY,EAAA,WAAWb,QAAQoE,gBAAAA,CAAgB,IAC9CC,QAEN,aACEtD,WAAWsD,SAAYpC,QAEnB,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,UAAA,EACC,WAAWjC,QAAQsE,iBACnB,OAAO,CAACrC,OAAO,aAAa,GAAE;AAAA,0BAE/B,cACC,EAAA,WAAWjC,QAAQuE,kBACnB,SAAQ,SAEPtC,UACH,OAAA;AAAA,IAAA,GACF,IAEAnB,aAGJ,cAAYnB,WACZ,mBACE,CAACD,SAASqE,MAAM1B,WAAW,OAAO,GAAGzC,cAAc,EAChD4E,KAAK,GAAG,EACRC,KAAK,KAAKJ,QAEf,oBACE,CAACxE,eAAekE,MAAM1B,WAAW,aAAa,GAAGvC,eAAe,EAC7D0E,KAAK,GAAG,EACRC,KAAK,KAAKJ,QAGf,UAAC,oBAAA,SAAA,EAAQ,WAAWrE,QAAQ0E,OAC1B,+BAAC,OAAI,EAAA,WAAW1E,QAAQ2E,aACrBnE,UAAAA;AAAAA,MAAAA,8BAA8B,SAC7B,oBAAC,cACC,EAAA,WAAWR,QAAQ4E,uBACnB,QAAQnE,mBACR,SAASmC,cACT,OACElC,aAAaC,QAAQ3B,yBAAyBqF,QAGnD;AAAA,MACApD,oBACE,oBAAA,QAAA,EACC,SAAS;AAAA,QACP4D,QAAQnD,GAAG;AAAA,UACT,CAAC1B,QAAQ8E,YAAY,GACnBtE,8BAA8B,YAC9BQ;AAAAA,QAAAA,CACH;AAAA,MACH,GACA,OAAON,aAAaC,QAAQ1B,oBAAoBoF,QAChD,OACA,UAAUtB,gBACV,kBAAkBC,uBAErB,CAAA;AAAA,MACAhC,mBACC,oBAAC,aACC,EAAA,QAAQmB,aACR,YAAYc,gBACZ,cAAcL,cACd,eAAeO,mBACf,uBAAuB7B,kCACvB,oBAAoBC,8BAEvB;AAAA,MACAf,8BAA8B,YAC5B,oBAAA,cAAA,EACC,QAAQC,mBACR,SAASmC,cACT,OACElC,aAAaC,QAAQ3B,yBAAyBqF,OAGnD,CAAA;AAAA,IAAA,EACH,CAAA,EACF,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ColorState } from \"react-color\";\n\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\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?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A function to be executed whenever the color change is complete. */\n  onChangeComplete?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\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 */\nexport const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  (props, ref) => {\n    const {\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      className,\n      classes: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\n      defaultValue = \"\",\n      expanded,\n      defaultExpanded = false,\n      recommendedColorsPosition = \"top\",\n      recommendedColors = [\n        \"#95AFE8\",\n        \"#E89E5D\",\n        \"#83B8A6\",\n        \"#70759C\",\n        \"#C57E7E\",\n        \"#FADA95\",\n        \"#ADBFE8\",\n        \"#E3B386\",\n        \"#9AC6B7\",\n        \"#8B90AF\",\n        \"#CF9797\",\n        \"#FAE1AA\",\n      ],\n      showLabels = true,\n      labels: labelsProp,\n      dropdownIcon = \"colorPicker\",\n      placeholder = \"Select color...\",\n      iconOnly = false,\n      showSavedColors = true,\n      showCustomColors = true,\n      savedColorsValue,\n      defaultSavedColorsValue = [],\n      onSavedColorAdded,\n      onSavedColorRemoved,\n      deleteSavedColorButtonArialLabel = \"Delete saved color\",\n      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, css, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue\n    );\n    const elementId = useUniqueId(id, \"hvdropdown\");\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleAddColor = () => {\n      // When no color is provided, react-color sets the picker to #000000.\n      // This is the color that should be added in this case.\n      const colorToAdd = color || \"#000000\";\n\n      onSavedColorAdded?.(colorToAdd);\n      setSavedColors([...savedColors, colorToAdd]);\n    };\n\n    const handleRemoveColor = (val: string, position: number) => {\n      if (savedColors[position] === val) {\n        const sColors = [...savedColors];\n        sColors.splice(position, 1);\n        onSavedColorRemoved?.(val);\n        setSavedColors(sColors);\n      }\n    };\n\n    const setFocusToContent = (containerRef: HTMLElement | null) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && 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={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n            selection: cx(iconOnly && css({ padding: 0 })),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <Checkbox\n                className={classes.headerColorIconOnly}\n                color={[color, \"transparent\"]}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <Checkbox\n                  className={classes.headerColorIcon}\n                  color={[color, \"transparent\"]}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\n                >\n                  {color}\n                </HvTypography>\n              </>\n            ) : (\n              placeholder\n            )\n          }\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n        >\n          <HvPanel className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={\n                    showLabels ? labels?.recommendedColorsLabel : undefined\n                  }\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels?.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\n                />\n              )}\n              {recommendedColorsPosition === \"bottom\" && (\n                <PresetColors\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={\n                    showLabels ? labels?.recommendedColorsLabel : undefined\n                  }\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmGA,MAAM,iBAA+C;AAAA,EACnD,wBAAwB;AAAA,EACxB,mBAAmB;AACrB;AAMO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA,kBAAkB;AAAA,MAClB,4BAA4B;AAAA,MAC5B,oBAAoB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,cAAc;AAAA,MACd,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB;AAAA,MACA,0BAA0B,CAAC;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mCAAmC;AAAA,MACnC,+BAA+B;AAAA,IAAA,IAC7B,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAE7C,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,UAAA,CAAC,QAAQ,SAAS,IAAI;AAAA,MAC1B;AAAA,MACA,QAAQ,eAAe;AAAA,IAAA;AAEzB,UAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,OAAO,YAAY;AACrD,UAAA,CAAC,aAAa,cAAc,IAAI;AAAA,MACpC;AAAA,MACA;AAAA,IAAA;AAEI,UAAA,YAAY,YAAY,IAAI,YAAY;AAC9C,UAAM,WAAW,SAAS;AAC1B,UAAM,iBAAiB,eAAe;AAEhC,UAAA,eAA4C,CAAC,GAAG,SAAS;AAC7D,gBAAU,IAAI;AAAA,IAAA;AAGV,UAAA,eAAe,CACnB,QACG;AACH,iBAAW,IAAI,GAAG;AAClB,yBAAmB,IAAI,GAAG;AAC1B,eAAS,IAAI,GAAG;AAAA,IAAA;AAGZ,UAAA,iBAAiB,CACrB,QACG;AACH,iBAAW,IAAI,GAAG;AAClB,eAAS,IAAI,GAAG;AAAA,IAAA;AAGZ,UAAA,yBAAyB,CAC7B,QACG;AACH,yBAAmB,IAAI,GAAG;AAC1B,eAAS,IAAI,GAAG;AAAA,IAAA;AAGlB,UAAM,iBAAiB,MAAM;AAG3B,YAAM,aAAa,SAAS;AAE5B,0BAAoB,UAAU;AAC9B,qBAAe,CAAC,GAAG,aAAa,UAAU,CAAC;AAAA,IAAA;AAGvC,UAAA,oBAAoB,CAAC,KAAa,aAAqB;AACvD,UAAA,YAAY,QAAQ,MAAM,KAAK;AAC3B,cAAA,UAAU,CAAC,GAAG,WAAW;AACvB,gBAAA,OAAO,UAAU,CAAC;AAC1B,8BAAsB,GAAG;AACzB,uBAAe,OAAO;AAAA,MACxB;AAAA,IAAA;AAGI,UAAA,oBAAoB,CAAC,iBAAqC;AACxD,YAAA,SAAS,cAAc,qBAAqB,OAAO;AACrD,UAAA,UAAU,OAAO,SAAS,GAAG;AACxB,eAAA,CAAC,EAAE;MACZ;AAAA,IAAA;AAIA,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEnC,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,eAAa;AAAA,cACb;AAAA,cACA,UAAU;AAAA,cACV,UAAU;AAAA,cACV,qBAAqB;AAAA,cACrB,SAAS;AAAA,gBACP,MAAM,GAAG,EAAE,CAAC,QAAQ,oBAAoB,GAAG,UAAU;AAAA,gBACrD,WAAW,GAAG,YAAY,IAAI,EAAE,SAAS,EAAA,CAAG,CAAC;AAAA,cAC/C;AAAA,cACA,WACE,YAAY,QACV;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,OAAO,CAAC,OAAO,aAAa;AAAA,gBAAA;AAAA,cAAA,IAE5B,iBAAiB,gBACnB,oBAAC,eAAY,WAAW,QAAQ,iBAAiB,IAC/C;AAAA,cAEN,aACE,WAAW,SAAY,QAEnB,qBAAA,UAAA,EAAA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,QAAQ;AAAA,oBACnB,OAAO,CAAC,OAAO,aAAa;AAAA,kBAAA;AAAA,gBAC9B;AAAA,gBACA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,QAAQ;AAAA,oBACnB,SAAQ;AAAA,oBAEP,UAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA,EAAA,CACF,IAEA;AAAA,cAGJ,cAAY;AAAA,cACZ,mBACE,CAAC,SAAS,MAAM,WAAW,OAAO,GAAG,cAAc,EAChD,KAAK,GAAG,EACR,UAAU;AAAA,cAEf,oBACE,CAAC,eAAe,MAAM,WAAW,aAAa,GAAG,eAAe,EAC7D,KAAK,GAAG,EACR,UAAU;AAAA,cAGf,UAAA,oBAAC,WAAQ,WAAW,QAAQ,OAC1B,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,aACrB,UAAA;AAAA,gBAAA,8BAA8B,SAC7B;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,QAAQ;AAAA,oBACnB,QAAQ;AAAA,oBACR,SAAS;AAAA,oBACT,OACE,aAAa,QAAQ,yBAAyB;AAAA,kBAAA;AAAA,gBAElD;AAAA,gBAED,oBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAS;AAAA,sBACP,QAAQ,GAAG;AAAA,wBACT,CAAC,QAAQ,YAAY,GACnB,8BAA8B,YAC9B;AAAA,sBAAA,CACH;AAAA,oBACH;AAAA,oBACA,OAAO,aAAa,QAAQ,oBAAoB;AAAA,oBAChD;AAAA,oBACA,UAAU;AAAA,oBACV,kBAAkB;AAAA,kBAAA;AAAA,gBACpB;AAAA,gBAED,mBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,QAAQ;AAAA,oBACR,YAAY;AAAA,oBACZ,cAAc;AAAA,oBACd,eAAe;AAAA,oBACf,uBAAuB;AAAA,oBACvB,oBAAoB;AAAA,kBAAA;AAAA,gBACtB;AAAA,gBAED,8BAA8B,YAC7B;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,QAAQ;AAAA,oBACR,SAAS;AAAA,oBACT,OACE,aAAa,QAAQ,yBAAyB;AAAA,kBAAA;AAAA,gBAElD;AAAA,cAAA,EAAA,CAEJ,EACF,CAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/esm/components/ColorPicker/ColorPicker.styles.js

@@ -1,8 +1,5 @@
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvColorPicker", {
+const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   root: {},
   labelContainer: {
     display: "flex",
@@ -44,9 +41,7 @@ const {
     height: 32
   },
   headerColorIconOnly: {},
-  pickerFields: {
-    paddingBottom: 20
-  }
+  pickerFields: { paddingBottom: 20 }
 });
 export {
   staticClasses,

package/dist/esm/components/ColorPicker/ColorPicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\n  description: {},\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: \"266px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"16px\",\n  },\n  colorPicker: {\n    width: \"232px\",\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {\n    \":not(:only-child)\": {\n      paddingBottom: \"24px\",\n    },\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","labelContainer","display","alignItems","label","paddingBottom","cursor","description","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","justifyContent","padding","colorPicker","colorPickerIcon","recommendedColorsRoot","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM,CAAC;AAAA,EACPC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,IACTI,QAAQ;AAAA,EACV;AAAA,EACAC,aAAa,CAAC;AAAA,EACdC,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,UAAU;AAAA,IACVZ,SAAS;AAAA,IACTa,gBAAgB;AAAA,IAChBC,SAAS;AAAA,EACX;AAAA,EACAC,aAAa;AAAA,IACXN,OAAO;AAAA,EACT;AAAA,EACAO,iBAAiB,CAAC;AAAA,EAClBC,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnBd,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAe,sBAAsB;AAAA,IACpBT,OAAO;AAAA,IACPU,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB,CAAC;AAAA,EACtBC,cAAc;AAAA,IAAElB,eAAe;AAAA,EAAG;AACpC,CAAC;"}
+{"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\n  description: {},\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: \"266px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"16px\",\n  },\n  colorPicker: {\n    width: \"232px\",\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {\n    \":not(:only-child)\": {\n      paddingBottom: \"24px\",\n    },\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,cAAc,EAAE,eAAe,GAAG;AACpC,CAAC;"}

package/dist/esm/components/ColorPicker/Fields/Fields.js

@@ -13,10 +13,7 @@ const Fields = (props) => {
     hex,
     classes: classesProp
   } = useDefaultProps("HvColorPickerFields", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const [internalHex, setInternalHex] = useState(hex);
   const [internalRed, setInternalRed] = useState(rgb?.r);
   const [internalGreen, setInternalGreen] = useState(rgb?.g);
@@ -43,24 +40,28 @@ const Fields = (props) => {
   }, [rgb]);
   const handleChange = (data, event) => {
     if (data.hex && color.isValidHex(data.hex)) {
-      onChange({
-        hex: data.hex,
-        source: "hex"
-      }, event);
+      onChange(
+        {
+          hex: data.hex,
+          source: "hex"
+        },
+        event
+      );
     } 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"
-      }, event);
+      onChange(
+        {
+          r: data.r || rgb?.r,
+          g: data.g || rgb?.g,
+          b: data.b || rgb?.b,
+          source: "rgb"
+        },
+        event
+      );
     }
   };
   const onChangeHex = (event, value) => {
     setInternalHex(value);
-    handleChange({
-      hex: value
-    }, event);
+    handleChange({ hex: value }, event);
   };
   const onChangeRbg = (event, value, colorPart) => {
     if (colorPart === "r")
@@ -69,17 +70,64 @@ const Fields = (props) => {
       setInternalGreen(Number(value));
     if (colorPart === "b")
       setInternalBlue(Number(value));
-    handleChange({
-      r: colorPart === "r" ? Number(value) : rgb?.r,
-      g: colorPart === "g" ? Number(value) : rgb?.g,
-      b: colorPart === "b" ? Number(value) : rgb?.b
-    }, event);
+    handleChange(
+      {
+        r: colorPart === "r" ? Number(value) : rgb?.r,
+        g: colorPart === "g" ? Number(value) : rgb?.g,
+        b: colorPart === "b" ? Number(value) : rgb?.b
+      },
+      event
+    );
   };
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.fields, className), children: [
-    /* @__PURE__ */ jsx(HvInput, { ref: hexInputRef, className: classes.double, label: "HEX", value: internalHex?.replace("#", ""), onChange: onChangeHex, onBlur: () => setInternalHex(hex), disableClear: true }),
-    /* @__PURE__ */ jsx(HvInput, { ref: redInputRef, className: classes.single, label: "R", value: `${internalRed}`, onChange: (event, value) => onChangeRbg(event, value, "r"), onBlur: () => setInternalRed(rgb?.r), disableClear: true }),
-    /* @__PURE__ */ jsx(HvInput, { ref: greenInputRef, className: classes.single, label: "G", value: `${internalGreen}`, onChange: (event, value) => onChangeRbg(event, value, "g"), onBlur: () => setInternalGreen(rgb?.g), disableClear: true }),
-    /* @__PURE__ */ jsx(HvInput, { ref: blueInputRef, className: classes.single, label: "B", value: `${internalBlue}`, onChange: (event, value) => onChangeRbg(event, value, "b"), onBlur: () => setInternalBlue(rgb?.b), disableClear: true })
+    /* @__PURE__ */ jsx(
+      HvInput,
+      {
+        ref: hexInputRef,
+        className: classes.double,
+        label: "HEX",
+        value: internalHex?.replace("#", ""),
+        onChange: onChangeHex,
+        onBlur: () => setInternalHex(hex),
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HvInput,
+      {
+        ref: redInputRef,
+        className: classes.single,
+        label: "R",
+        value: `${internalRed}`,
+        onChange: (event, value) => onChangeRbg(event, value, "r"),
+        onBlur: () => setInternalRed(rgb?.r),
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HvInput,
+      {
+        ref: greenInputRef,
+        className: classes.single,
+        label: "G",
+        value: `${internalGreen}`,
+        onChange: (event, value) => onChangeRbg(event, value, "g"),
+        onBlur: () => setInternalGreen(rgb?.g),
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HvInput,
+      {
+        ref: blueInputRef,
+        className: classes.single,
+        label: "B",
+        value: `${internalBlue}`,
+        onChange: (event, value) => onChangeRbg(event, value, "b"),
+        onBlur: () => setInternalBlue(rgb?.b),
+        disableClear: true
+      }
+    )
   ] });
 };
 export {