@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

package/dist/cjs/components/ColorPicker/ColorPicker.cjs

@@ -22,115 +22,222 @@ const DEFAULT_LABELS = {
   recommendedColorsLabel: "Recommended colors:",
   customColorsLabel: "Custom colors:"
 };
-const HvColorPicker = React.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.useDefaultProps("HvColorPicker", props);
-  const {
-    classes,
-    css,
-    cx
-  } = ColorPicker_styles.useClasses(classesProp);
-  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const [color, setColor] = useControlled.useControlled(value, defaultValue);
-  const [savedColors, setSavedColors] = useControlled.useControlled(savedColorsValue, defaultSavedColorsValue);
-  const elementId = useUniqueId.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__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, disabled, required, className: cx(classes.root, className), children: [
-    (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-      hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), label, className: classes.label }),
-      hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), className: classes.description, children: description })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.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__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { className: classes.headerColorIconOnly, color: [color, "transparent"] }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, { className: classes.colorPickerIcon }) : void 0, placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { className: classes.headerColorIcon, color: [color, "transparent"] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerColorValue, variant: "label", children: color })
-    ] }) : placeholder, "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.colorPicker, children: [
-      recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, { className: classes.recommendedColorsRoot, colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels?.recommendedColorsLabel : void 0 }),
-      showCustomColors && /* @__PURE__ */ jsxRuntime.jsx(Picker.Picker, { classes: {
-        fields: cx({
-          [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
-        })
-      }, title: showLabels ? labels?.customColorsLabel : void 0, color, onChange: handleOnChange, onChangeComplete: handleOnChangeComplete }),
-      showSavedColors && /* @__PURE__ */ jsxRuntime.jsx(SavedColors.SavedColors, { colors: savedColors, onAddColor: handleAddColor, onClickColor: handleSelect, onRemoveColor: handleRemoveColor, deleteButtonAriaLabel: deleteSavedColorButtonArialLabel, addButtonAriaLabel: addSavedColorButtonAriaLabel }),
-      recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, { colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels?.recommendedColorsLabel : void 0 })
-    ] }) }) })
-  ] });
-});
+const HvColorPicker = React.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.useDefaultProps("HvColorPicker", props);
+    const { classes, css, cx } = ColorPicker_styles.useClasses(classesProp);
+    const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+    const [isOpen, setIsOpen] = useControlled.useControlled(
+      expanded,
+      Boolean(defaultExpanded)
+    );
+    const [color, setColor] = useControlled.useControlled(value, defaultValue);
+    const [savedColors, setSavedColors] = useControlled.useControlled(
+      savedColorsValue,
+      defaultSavedColorsValue
+    );
+    const elementId = useUniqueId.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__ */ jsxRuntime.jsxs(
+      FormElement.HvFormElement,
+      {
+        id,
+        name,
+        disabled,
+        required,
+        className: cx(classes.root, className),
+        children: [
+          (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+            hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
+              Label.HvLabel,
+              {
+                id: setId.setId(elementId, "label"),
+                label,
+                className: classes.label
+              }
+            ),
+            hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
+              InfoMessage.HvInfoMessage,
+              {
+                id: setId.setId(elementId, "description"),
+                className: classes.description,
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BaseDropdown.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__ */ jsxRuntime.jsx(
+                uikitReactIcons.Checkbox,
+                {
+                  className: classes.headerColorIconOnly,
+                  color: [color, "transparent"]
+                }
+              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, { className: classes.colorPickerIcon }) : void 0,
+              placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  uikitReactIcons.Checkbox,
+                  {
+                    className: classes.headerColorIcon,
+                    color: [color, "transparent"]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography.HvTypography,
+                  {
+                    className: classes.headerColorValue,
+                    variant: "label",
+                    children: color
+                  }
+                )
+              ] }) : placeholder,
+              "aria-label": ariaLabel,
+              "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+              "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.colorPicker, children: [
+                recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(
+                  PresetColors.PresetColors,
+                  {
+                    className: classes.recommendedColorsRoot,
+                    colors: recommendedColors,
+                    onClick: handleSelect,
+                    title: showLabels ? labels?.recommendedColorsLabel : void 0
+                  }
+                ),
+                showCustomColors && /* @__PURE__ */ jsxRuntime.jsx(
+                  Picker.Picker,
+                  {
+                    classes: {
+                      fields: cx({
+                        [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
+                      })
+                    },
+                    title: showLabels ? labels?.customColorsLabel : void 0,
+                    color,
+                    onChange: handleOnChange,
+                    onChangeComplete: handleOnChangeComplete
+                  }
+                ),
+                showSavedColors && /* @__PURE__ */ jsxRuntime.jsx(
+                  SavedColors.SavedColors,
+                  {
+                    colors: savedColors,
+                    onAddColor: handleAddColor,
+                    onClickColor: handleSelect,
+                    onRemoveColor: handleRemoveColor,
+                    deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
+                    addButtonAriaLabel: addSavedColorButtonAriaLabel
+                  }
+                ),
+                recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(
+                  PresetColors.PresetColors,
+                  {
+                    colors: recommendedColors,
+                    onClick: handleSelect,
+                    title: showLabels ? labels?.recommendedColorsLabel : void 0
+                  }
+                )
+              ] }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 exports.colorPickerClasses = ColorPicker_styles.staticClasses;
 exports.HvColorPicker = HvColorPicker;
 //# sourceMappingURL=ColorPicker.cjs.map

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","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","jsxs","HvFormElement","root","labelContainer","jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","dropdownRootIconOnly","selection","padding","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","Fragment","headerColorIcon","HvTypography","headerColorValue","join","trim","HvPanel","panel","colorPicker","PresetColors","recommendedColorsRoot","Picker","fields","pickerFields","SavedColors"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.cjs","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":["forwardRef","useDefaultProps","useClasses","useLabels","useControlled","useUniqueId","jsxs","HvFormElement","jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","Checkbox","ColorPicker","Fragment","HvTypography","HvPanel","PresetColors","Picker","SavedColors"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvColorPicker", {
+const { staticClasses, useClasses } = classes.createClasses("HvColorPicker", {
   root: {},
   labelContainer: {
     display: "flex",
@@ -46,9 +43,7 @@ const {
     height: 32
   },
   headerColorIconOnly: {},
-  pickerFields: {
-    paddingBottom: 20
-  }
+  pickerFields: { paddingBottom: 20 }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styles.cjs","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,QAAAA,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.cjs","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":["createClasses"],"mappings":";;;AAEO,MAAM,EAAE,eAAe,eAAeA,QAAAA,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/cjs/components/ColorPicker/Fields/Fields.cjs

@@ -33,10 +33,7 @@ const Fields = (props) => {
     hex,
     classes: classesProp
   } = useDefaultProps.useDefaultProps("HvColorPickerFields", props);
-  const {
-    classes,
-    cx
-  } = Fields_styles.useClasses(classesProp);
+  const { classes, cx } = Fields_styles.useClasses(classesProp);
   const [internalHex, setInternalHex] = React.useState(hex);
   const [internalRed, setInternalRed] = React.useState(rgb?.r);
   const [internalGreen, setInternalGreen] = React.useState(rgb?.g);
@@ -63,24 +60,28 @@ const Fields = (props) => {
   }, [rgb]);
   const handleChange = (data, event) => {
     if (data.hex && color__namespace.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")
@@ -89,17 +90,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__ */ jsxRuntime.jsxs("div", { className: cx(classes.fields, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: hexInputRef, className: classes.double, label: "HEX", value: internalHex?.replace("#", ""), onChange: onChangeHex, onBlur: () => setInternalHex(hex), disableClear: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: redInputRef, className: classes.single, label: "R", value: `${internalRed}`, onChange: (event, value) => onChangeRbg(event, value, "r"), onBlur: () => setInternalRed(rgb?.r), disableClear: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: greenInputRef, className: classes.single, label: "G", value: `${internalGreen}`, onChange: (event, value) => onChangeRbg(event, value, "g"), onBlur: () => setInternalGreen(rgb?.g), disableClear: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { ref: blueInputRef, className: classes.single, label: "B", value: `${internalBlue}`, onChange: (event, value) => onChangeRbg(event, value, "b"), onBlur: () => setInternalBlue(rgb?.b), disableClear: true })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: hexInputRef,
+        className: classes.double,
+        label: "HEX",
+        value: internalHex?.replace("#", ""),
+        onChange: onChangeHex,
+        onBlur: () => setInternalHex(hex),
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: redInputRef,
+        className: classes.single,
+        label: "R",
+        value: `${internalRed}`,
+        onChange: (event, value) => onChangeRbg(event, value, "r"),
+        onBlur: () => setInternalRed(rgb?.r),
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: greenInputRef,
+        className: classes.single,
+        label: "G",
+        value: `${internalGreen}`,
+        onChange: (event, value) => onChangeRbg(event, value, "g"),
+        onBlur: () => setInternalGreen(rgb?.g),
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: blueInputRef,
+        className: classes.single,
+        label: "B",
+        value: `${internalBlue}`,
+        onChange: (event, value) => onChangeRbg(event, value, "b"),
+        onBlur: () => setInternalBlue(rgb?.b),
+        disableClear: true
+      }
+    )
   ] });
 };
 exports.colorPickerFieldsClasses = Fields_styles.staticClasses;