@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/ColorPicker/ColorPicker.js

@@ -1,229 +1,153 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvLabelContainer } from "../FormElement/LabelContainer.js";
-import { useControlled } from "../hooks/useControlled.js";
-import { useLabels } from "../hooks/useLabels.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { setId } from "../utils/setId.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvIcon } from "../icons.js";
-import { setId } from "../utils/setId.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { HvPanel } from "../Panel/Panel.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
+import { useLabels } from "../hooks/useLabels.js";
 import { useClasses } from "./ColorPicker.styles.js";
-import { staticClasses } from "./ColorPicker.styles.js";
 import { Picker } from "./Picker/Picker.js";
 import { PresetColors } from "./PresetColors/PresetColors.js";
 import { SavedColors } from "./SavedColors/SavedColors.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
-import { HvPanel } from "../Panel/Panel.js";
-import { HvTypography } from "../Typography/Typography.js";
-const DEFAULT_LABELS = {
-  recommendedColorsLabel: "Recommended colors:",
-  customColorsLabel: "Custom colors:"
-};
-const HvColorPicker = forwardRef(
-  function HvColorPicker2(props, ref) {
-    const {
-      id,
-      name,
-      required,
-      disabled,
-      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,
-      deleteSavedColorButtonAriaLabel = "Delete saved color",
-      addSavedColorButtonAriaLabel = "Add current color to saved colors"
-    } = useDefaultProps("HvColorPicker", props);
-    const { classes, cx } = useClasses(classesProp);
-    const labels = useLabels(DEFAULT_LABELS, labelsProp);
-    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);
-    const [color, setColor] = useControlled(value, defaultValue);
-    const [savedColors, setSavedColors] = useControlled(
-      savedColorsValue,
-      defaultSavedColorsValue
-    );
-    const elementId = useUniqueId(id);
-    const handleToggle = (_, open) => {
-      setIsOpen(open);
-    };
-    const handleSelect = (hex) => {
-      onChange?.(hex);
-      onChangeComplete?.(hex);
-      setColor(hex);
-    };
-    const handleOnChange = (hex) => {
-      onChange?.(hex);
-      setColor(hex);
-    };
-    const handleOnChangeComplete = (hex) => {
-      onChangeComplete?.(hex);
-      setColor(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: [
-          /* @__PURE__ */ jsx(
-            HvLabelContainer,
-            {
-              label,
-              description,
-              labelId: setId(elementId, "label"),
-              descriptionId: setId(elementId, "description"),
-              classes: {
-                root: classes.labelContainer,
-                label: classes.label,
-                description: classes.description
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            HvBaseDropdown,
-            {
-              ref,
-              variableWidth: true,
-              className,
-              expanded: isOpen,
-              onToggle: handleToggle,
-              onContainerCreation: setFocusToContent,
-              classes: {
-                root: cx({ [classes.dropdownRootIconOnly]: iconOnly })
-              },
-              adornment: iconOnly && color ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: { backgroundColor: color },
-                  className: cx(
-                    classes.headerColorIcon,
-                    classes.headerColorIconOnly
-                  )
-                }
-              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(HvIcon, { name: "ColorPicker" }) : void 0,
-              placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: { backgroundColor: color },
-                    className: classes.headerColorIcon
-                  }
-                ),
-                /* @__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__ */ jsxs(HvPanel, { className: cx(classes.panel, classes.colorPicker), children: [
-                recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(
-                  PresetColors,
-                  {
-                    colors: recommendedColors,
-                    onClick: handleSelect,
-                    title: showLabels ? labels.recommendedColorsLabel : void 0
-                  }
-                ),
-                showCustomColors && /* @__PURE__ */ jsx(
-                  Picker,
-                  {
-                    title: showLabels ? labels.customColorsLabel : void 0,
-                    hex: color,
-                    onChange: handleOnChange,
-                    onChangeComplete: handleOnChangeComplete
-                  }
-                ),
-                showSavedColors && /* @__PURE__ */ jsx(
-                  SavedColors,
-                  {
-                    colors: savedColors,
-                    onAddColor: handleAddColor,
-                    onClickColor: handleSelect,
-                    onRemoveColor: handleRemoveColor,
-                    deleteButtonAriaLabel: deleteSavedColorButtonAriaLabel,
-                    addButtonAriaLabel: addSavedColorButtonAriaLabel
-                  }
-                ),
-                recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(
-                  PresetColors,
-                  {
-                    colors: recommendedColors,
-                    onClick: handleSelect,
-                    title: showLabels ? labels.recommendedColorsLabel : void 0
-                  }
-                )
-              ] })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  HvColorPicker,
-  staticClasses as colorPickerClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ColorPicker/ColorPicker.tsx
+var DEFAULT_LABELS = {
+	recommendedColorsLabel: "Recommended colors:",
+	customColorsLabel: "Custom colors:"
 };
+/**
+* A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.
+* It receives a color string in HEX format and outputs an HEX formatted color.
+*/
+var HvColorPicker = forwardRef(function HvColorPicker(props, ref) {
+	const { id, name, required, disabled, 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, deleteSavedColorButtonAriaLabel = "Delete saved color", addSavedColorButtonAriaLabel = "Add current color to saved colors" } = useDefaultProps("HvColorPicker", props);
+	const { classes, cx } = useClasses(classesProp);
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);
+	const [color, setColor] = useControlled(value, defaultValue);
+	const [savedColors, setSavedColors] = useControlled(savedColorsValue, defaultSavedColorsValue);
+	const elementId = useUniqueId(id);
+	const handleToggle = (_, open) => {
+		setIsOpen(open);
+	};
+	const handleSelect = (hex) => {
+		onChange?.(hex);
+		onChangeComplete?.(hex);
+		setColor(hex);
+	};
+	const handleOnChange = (hex) => {
+		onChange?.(hex);
+		setColor(hex);
+	};
+	const handleOnChangeComplete = (hex) => {
+		onChangeComplete?.(hex);
+		setColor(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: [/* @__PURE__ */ jsx(HvLabelContainer, {
+			label,
+			description,
+			labelId: setId(elementId, "label"),
+			descriptionId: setId(elementId, "description"),
+			classes: {
+				root: classes.labelContainer,
+				label: classes.label,
+				description: classes.description
+			}
+		}), /* @__PURE__ */ jsx(HvBaseDropdown, {
+			ref,
+			variableWidth: true,
+			className,
+			expanded: isOpen,
+			onToggle: handleToggle,
+			onContainerCreation: setFocusToContent,
+			classes: { root: cx({ [classes.dropdownRootIconOnly]: iconOnly }) },
+			adornment: iconOnly && color ? /* @__PURE__ */ jsx("div", {
+				style: { backgroundColor: color },
+				className: cx(classes.headerColorIcon, classes.headerColorIconOnly)
+			}) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(HvIcon, { name: "ColorPicker" }) : void 0,
+			placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				style: { backgroundColor: color },
+				className: classes.headerColorIcon
+			}), /* @__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__ */ jsxs(HvPanel, {
+				className: cx(classes.panel, classes.colorPicker),
+				children: [
+					recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, {
+						colors: recommendedColors,
+						onClick: handleSelect,
+						title: showLabels ? labels.recommendedColorsLabel : void 0
+					}),
+					showCustomColors && /* @__PURE__ */ jsx(Picker, {
+						title: showLabels ? labels.customColorsLabel : void 0,
+						hex: color,
+						onChange: handleOnChange,
+						onChangeComplete: handleOnChangeComplete
+					}),
+					showSavedColors && /* @__PURE__ */ jsx(SavedColors, {
+						colors: savedColors,
+						onAddColor: handleAddColor,
+						onClickColor: handleSelect,
+						onRemoveColor: handleRemoveColor,
+						deleteButtonAriaLabel: deleteSavedColorButtonAriaLabel,
+						addButtonAriaLabel: addSavedColorButtonAriaLabel
+					}),
+					recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(PresetColors, {
+						colors: recommendedColors,
+						onClick: handleSelect,
+						title: showLabels ? labels.recommendedColorsLabel : void 0
+					})
+				]
+			})
+		})]
+	});
+});
+//#endregion
+export { HvColorPicker };

package/dist/ColorPicker/ColorPicker.styles.js

@@ -1,47 +1,42 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvColorPicker", {
-  root: {},
-  labelContainer: {},
-  label: {},
-  description: {},
-  headerColorValue: {
-    textTransform: "uppercase",
-    minWidth: "8ch",
-    fontVariant: "tabular-nums"
-  },
-  headerColorIcon: {
-    width: 16,
-    height: 16,
-    marginRight: 8,
-    flexShrink: 0
-  },
-  panel: {
-    width: "100%",
-    minWidth: "266px",
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.space.md,
-    justifyContent: "center",
-    padding: "16px",
-    backgroundColor: "transparent"
-  },
-  colorPicker: {},
-  colorPickerIcon: {},
-  dropdownRootIconOnly: {
-    "&,& .HvBaseDropdown-arrowContainer": {
-      width: 32,
-      height: 32
-    },
-    "& .HvBaseDropdown-selection": {
-      padding: 0
-    }
-  },
-  headerColorIconOnly: {
-    margin: 8
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/ColorPicker/ColorPicker.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvColorPicker", {
+	root: {},
+	labelContainer: {},
+	label: {},
+	description: {},
+	headerColorValue: {
+		textTransform: "uppercase",
+		minWidth: "8ch",
+		fontVariant: "tabular-nums"
+	},
+	headerColorIcon: {
+		width: 16,
+		height: 16,
+		marginRight: 8,
+		flexShrink: 0
+	},
+	panel: {
+		width: "100%",
+		minWidth: "266px",
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.space.md,
+		justifyContent: "center",
+		padding: "16px",
+		backgroundColor: "transparent"
+	},
+	colorPicker: {},
+	colorPickerIcon: {},
+	dropdownRootIconOnly: {
+		"&,& .HvBaseDropdown-arrowContainer": {
+			width: 32,
+			height: 32
+		},
+		"& .HvBaseDropdown-selection": { padding: 0 }
+	},
+	headerColorIconOnly: { margin: 8 }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };