@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/ColorPicker/Picker/Fields.js

@@ -1,144 +1,128 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo, useState, useRef, useEffect } from "react";
-import { hexToRgba, validHex, rgbToHex } from "@uiw/color-convert";
-import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { HvInput } from "../../Input/Input.js";
-const { useClasses } = createClasses("HvColorPickerFields", {
-  root: {
-    width: "100%",
-    display: "flex",
-    gap: theme.space.xxs
-  },
-  single: {
-    maxWidth: "50px",
-    "& input": {
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  },
-  double: {
-    maxWidth: "82px",
-    paddingRight: theme.space.xxs,
-    "& input": {
-      textTransform: "uppercase",
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { hexToRgba, rgbToHex, validHex } from "@uiw/color-convert";
+//#region src/ColorPicker/Picker/Fields.tsx
+var { useClasses } = createClasses("HvColorPickerFields", {
+	root: {
+		width: "100%",
+		display: "flex",
+		gap: theme.space.xxs
+	},
+	single: {
+		maxWidth: "50px",
+		"& input": {
+			marginLeft: 5,
+			marginRight: 5
+		},
+		"& label": { paddingLeft: 5 }
+	},
+	double: {
+		maxWidth: "82px",
+		paddingRight: theme.space.xxs,
+		"& input": {
+			textTransform: "uppercase",
+			marginLeft: 5,
+			marginRight: 5
+		},
+		"& label": { paddingLeft: 5 }
+	}
 });
-const Fields = (props) => {
-  const {
-    className,
-    onChange,
-    hex,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerFields", props);
-  const { classes, cx } = useClasses(classesProp);
-  const rgb = useMemo(() => hexToRgba(hex), [hex]);
-  const [internalHex, setInternalHex] = useState(hex);
-  const [internalRed, setInternalRed] = useState(rgb?.r);
-  const [internalGreen, setInternalGreen] = useState(rgb?.g);
-  const [internalBlue, setInternalBlue] = useState(rgb?.b);
-  const hexInputRef = useRef(null);
-  const redInputRef = useRef(null);
-  const greenInputRef = useRef(null);
-  const blueInputRef = useRef(null);
-  useEffect(() => {
-    if (document.activeElement !== hexInputRef.current) {
-      setInternalHex(hex);
-    }
-  }, [hex]);
-  useEffect(() => {
-    if (document.activeElement !== redInputRef.current) {
-      setInternalRed(rgb?.r);
-    }
-    if (document.activeElement !== greenInputRef.current) {
-      setInternalGreen(rgb?.g);
-    }
-    if (document.activeElement !== blueInputRef.current) {
-      setInternalBlue(rgb?.b);
-    }
-  }, [rgb]);
-  const handleChange = (hex2) => {
-    if (!validHex(hex2)) return;
-    onChange?.(hex2);
-  };
-  const onChangeRbg = ({ r, g, b }) => {
-    if (r) setInternalRed(Number(r));
-    if (g) setInternalGreen(Number(g));
-    if (b) setInternalBlue(Number(b));
-    handleChange(
-      rgbToHex({
-        r: r ? Number(r) : rgb?.r,
-        g: g ? Number(g) : rgb?.g,
-        b: b ? Number(b) : rgb?.b
-      })
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), children: [
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: hexInputRef,
-        className: classes.double,
-        label: "HEX",
-        value: internalHex?.replace("#", ""),
-        onChange: (event, value) => {
-          setInternalHex(value);
-          handleChange(value);
-        },
-        onBlur: () => setInternalHex(hex),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: redInputRef,
-        className: classes.single,
-        label: "R",
-        value: internalRed,
-        onChange: (event, value) => onChangeRbg({ r: value }),
-        onBlur: () => setInternalRed(rgb?.r),
-        inputProps: { type: "number", min: 0, max: 255 },
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: greenInputRef,
-        className: classes.single,
-        label: "G",
-        value: internalGreen,
-        onChange: (event, value) => onChangeRbg({ g: value }),
-        onBlur: () => setInternalGreen(rgb?.g),
-        inputProps: { type: "number", min: 0, max: 255 },
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: blueInputRef,
-        className: classes.single,
-        label: "B",
-        value: internalBlue,
-        onChange: (event, value) => onChangeRbg({ b: value }),
-        onBlur: () => setInternalBlue(rgb?.b),
-        inputProps: { type: "number", min: 0, max: 255 },
-        disableClear: true
-      }
-    )
-  ] });
-};
-export {
-  Fields
+var Fields = (props) => {
+	const { className, onChange, hex, classes: classesProp } = useDefaultProps("HvColorPickerFields", props);
+	const { classes, cx } = useClasses(classesProp);
+	const rgb = useMemo(() => hexToRgba(hex), [hex]);
+	const [internalHex, setInternalHex] = useState(hex);
+	const [internalRed, setInternalRed] = useState(rgb?.r);
+	const [internalGreen, setInternalGreen] = useState(rgb?.g);
+	const [internalBlue, setInternalBlue] = useState(rgb?.b);
+	const hexInputRef = useRef(null);
+	const redInputRef = useRef(null);
+	const greenInputRef = useRef(null);
+	const blueInputRef = useRef(null);
+	useEffect(() => {
+		if (document.activeElement !== hexInputRef.current) setInternalHex(hex);
+	}, [hex]);
+	useEffect(() => {
+		if (document.activeElement !== redInputRef.current) setInternalRed(rgb?.r);
+		if (document.activeElement !== greenInputRef.current) setInternalGreen(rgb?.g);
+		if (document.activeElement !== blueInputRef.current) setInternalBlue(rgb?.b);
+	}, [rgb]);
+	const handleChange = (newHex) => {
+		if (!validHex(newHex)) return;
+		onChange?.(newHex);
+	};
+	const onChangeRbg = ({ r, g, b }) => {
+		if (r) setInternalRed(Number(r));
+		if (g) setInternalGreen(Number(g));
+		if (b) setInternalBlue(Number(b));
+		handleChange(rgbToHex({
+			r: r ? Number(r) : rgb?.r,
+			g: g ? Number(g) : rgb?.g,
+			b: b ? Number(b) : rgb?.b
+		}));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(classes.root, className),
+		children: [
+			/* @__PURE__ */ jsx(HvInput, {
+				ref: hexInputRef,
+				className: classes.double,
+				label: "HEX",
+				value: internalHex?.replace("#", ""),
+				onChange: (event, value) => {
+					setInternalHex(value);
+					handleChange(value);
+				},
+				onBlur: () => setInternalHex(hex),
+				disableClear: true
+			}),
+			/* @__PURE__ */ jsx(HvInput, {
+				ref: redInputRef,
+				className: classes.single,
+				label: "R",
+				value: internalRed,
+				onChange: (event, value) => onChangeRbg({ r: value }),
+				onBlur: () => setInternalRed(rgb?.r),
+				inputProps: {
+					type: "number",
+					min: 0,
+					max: 255
+				},
+				disableClear: true
+			}),
+			/* @__PURE__ */ jsx(HvInput, {
+				ref: greenInputRef,
+				className: classes.single,
+				label: "G",
+				value: internalGreen,
+				onChange: (event, value) => onChangeRbg({ g: value }),
+				onBlur: () => setInternalGreen(rgb?.g),
+				inputProps: {
+					type: "number",
+					min: 0,
+					max: 255
+				},
+				disableClear: true
+			}),
+			/* @__PURE__ */ jsx(HvInput, {
+				ref: blueInputRef,
+				className: classes.single,
+				label: "B",
+				value: internalBlue,
+				onChange: (event, value) => onChangeRbg({ b: value }),
+				onBlur: () => setInternalBlue(rgb?.b),
+				inputProps: {
+					type: "number",
+					min: 0,
+					max: 255
+				},
+				disableClear: true
+			})
+		]
+	});
 };
+//#endregion
+export { Fields };

package/dist/ColorPicker/Picker/Picker.js

@@ -1,55 +1,56 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { HvTypography } from "../../Typography/Typography.js";
+import { Fields } from "./Fields.js";
+import { useClasses } from "./Picker.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { hexToHsva, hsvaToHex } from "@uiw/color-convert";
 import Hue from "@uiw/react-color-hue";
 import Saturation from "@uiw/react-color-saturation";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { Fields } from "./Fields.js";
-import { useClasses } from "./Picker.styles.js";
-import { HvTypography } from "../../Typography/Typography.js";
-const Picker = (props) => {
-  const {
-    hex: hexProp,
-    onChange,
-    onChangeComplete,
-    title,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerPicker", props);
-  const { classes } = useClasses(classesProp);
-  const hex = hexProp || "#000000";
-  const hsva = useMemo(() => hexToHsva(hex), [hex]);
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
-    /* @__PURE__ */ jsxs("div", { className: classes.pickers, children: [
-      /* @__PURE__ */ jsx(
-        Saturation,
-        {
-          className: classes.saturation,
-          hsva,
-          onChange: (newColor) => {
-            const newHex = hsvaToHex(newColor);
-            onChange?.(newHex);
-            onChangeComplete?.(newHex);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Hue,
-        {
-          className: classes.hue,
-          direction: "horizontal",
-          hue: hsva.h,
-          onChange: ({ h }) => {
-            const newHex = hsvaToHex({ ...hsva, h });
-            onChange?.(newHex);
-            onChangeComplete?.(newHex);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Fields, { hex, onChange })
-    ] })
-  ] });
-};
-export {
-  Picker
+//#region src/ColorPicker/Picker/Picker.tsx
+var Picker = (props) => {
+	const { hex: hexProp, onChange, onChangeComplete, title, classes: classesProp } = useDefaultProps("HvColorPickerPicker", props);
+	const { classes } = useClasses(classesProp);
+	const hex = hexProp || "#000000";
+	const hsva = useMemo(() => hexToHsva(hex || "#000000"), [hex]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.root,
+		children: [title && /* @__PURE__ */ jsx(HvTypography, {
+			className: classes.title,
+			variant: "caption1",
+			children: title
+		}), /* @__PURE__ */ jsxs("div", {
+			className: classes.pickers,
+			children: [
+				/* @__PURE__ */ jsx(Saturation, {
+					className: classes.saturation,
+					hsva,
+					onChange: (newColor) => {
+						const newHex = hsvaToHex(newColor);
+						onChange?.(newHex);
+						onChangeComplete?.(newHex);
+					}
+				}),
+				/* @__PURE__ */ jsx(Hue, {
+					className: classes.hue,
+					direction: "horizontal",
+					hue: hsva.h,
+					onChange: ({ h }) => {
+						const newHex = hsvaToHex({
+							...hsva,
+							h
+						});
+						onChange?.(newHex);
+						onChangeComplete?.(newHex);
+					}
+				}),
+				/* @__PURE__ */ jsx(Fields, {
+					hex,
+					onChange
+				})
+			]
+		})]
+	});
 };
+//#endregion
+export { Picker };

package/dist/ColorPicker/Picker/Picker.styles.js

@@ -1,44 +1,44 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerPicker", {
-  root: {},
-  pickers: {
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.space.sm
-  },
-  saturation: {
-    width: "232px !important",
-    height: "140px !important",
-    position: "relative",
-    overflow: "visible",
-    "& .w-color-saturation-fill": {
-      width: "8px !important",
-      height: "8px !important",
-      boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4) !important`
-    }
-  },
-  hue: {
-    height: "8px !important",
-    width: "232px !important",
-    position: "relative",
-    overflow: "visible",
-    "& .w-color-alpha-fill": {
-      width: "12px !important",
-      height: "12px !important",
-      backgroundColor: "transparent !important",
-      boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
-      marginLeft: "0px",
-      border: "2px solid #fff",
-      borderRadius: theme.radii.full,
-      transform: "translate(-6px, -2px) !important"
-    }
-  },
-  title: {
-    fontWeight: theme.fontWeights.semibold,
-    marginBottom: 8
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/ColorPicker/Picker/Picker.styles.tsx
+var { useClasses } = createClasses("HvColorPickerPicker", {
+	root: {},
+	pickers: {
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.space.sm
+	},
+	saturation: {
+		width: "232px !important",
+		height: "140px !important",
+		position: "relative",
+		overflow: "visible",
+		"& .w-color-saturation-fill": {
+			width: "8px !important",
+			height: "8px !important",
+			boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4) !important`
+		}
+	},
+	hue: {
+		height: "8px !important",
+		width: "232px !important",
+		position: "relative",
+		overflow: "visible",
+		"& .w-color-alpha-fill": {
+			width: "12px !important",
+			height: "12px !important",
+			backgroundColor: "transparent !important",
+			boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
+			marginLeft: "0px",
+			border: "2px solid #fff",
+			borderRadius: theme.radii.full,
+			transform: "translate(-6px, -2px) !important"
+		}
+	},
+	title: {
+		fontWeight: theme.fontWeights.semibold,
+		marginBottom: 8
+	}
 });
-export {
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/ColorPicker/PresetColors/PresetColors.js

@@ -1,31 +1,28 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
+import { HvTypography } from "../../Typography/Typography.js";
 import { Swatch } from "../Swatch.js";
 import { useClasses } from "./PresetColors.styles.js";
-import { HvTypography } from "../../Typography/Typography.js";
-const PresetColors = (props) => {
-  const {
-    onClick,
-    colors,
-    title,
-    className,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerPresetColors", props);
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), children: [
-    title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
-    /* @__PURE__ */ jsx("div", { className: classes.colors, children: colors.map((color, index) => /* @__PURE__ */ jsx(
-      Swatch,
-      {
-        color,
-        style: { backgroundColor: getColor(color) },
-        onClick: () => onClick(color)
-      },
-      `recommended-color-${color}-${index}`
-    )) })
-  ] });
-};
-export {
-  PresetColors
+import { getColor } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ColorPicker/PresetColors/PresetColors.tsx
+var PresetColors = (props) => {
+	const { onClick, colors, title, className, classes: classesProp } = useDefaultProps("HvColorPickerPresetColors", props);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(classes.root, className),
+		children: [title && /* @__PURE__ */ jsx(HvTypography, {
+			className: classes.title,
+			variant: "caption1",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: classes.colors,
+			children: colors.map((color) => /* @__PURE__ */ jsx(Swatch, {
+				color,
+				style: { backgroundColor: getColor(color) },
+				onClick: () => onClick(color)
+			}, color))
+		})]
+	});
 };
+//#endregion
+export { PresetColors };

package/dist/ColorPicker/PresetColors/PresetColors.styles.js

@@ -1,19 +1,19 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerPresetColors", {
-  root: { width: "232px" },
-  colors: {
-    display: "flex",
-    flexWrap: "wrap",
-    position: "relative",
-    gap: theme.space.xs,
-    padding: 0
-  },
-  title: {
-    fontWeight: theme.fontWeights.semibold,
-    marginBottom: 8
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/ColorPicker/PresetColors/PresetColors.styles.tsx
+var { useClasses } = createClasses("HvColorPickerPresetColors", {
+	root: { width: "232px" },
+	colors: {
+		display: "flex",
+		flexWrap: "wrap",
+		position: "relative",
+		gap: theme.space.xs,
+		padding: 0
+	},
+	title: {
+		fontWeight: theme.fontWeights.semibold,
+		marginBottom: 8
+	}
 });
-export {
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/ColorPicker/SavedColors/SavedColors.js

@@ -1,45 +1,41 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
+import { HvIconButton } from "../../IconButton/IconButton.js";
 import { Swatch } from "../Swatch.js";
 import { useClasses } from "./SavedColors.styles.js";
-import { HvIconButton } from "../../IconButton/IconButton.js";
-const SavedColors = (props) => {
-  const {
-    colors,
-    onClickColor,
-    onAddColor,
-    onRemoveColor,
-    deleteButtonAriaLabel,
-    addButtonAriaLabel,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerSavedColors", props);
-  const { classes } = useClasses(classesProp);
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    /* @__PURE__ */ jsx(
-      HvIconButton,
-      {
-        variant: "secondarySubtle",
-        onClick: onAddColor,
-        title: addButtonAriaLabel,
-        children: /* @__PURE__ */ jsx(HvIcon, { name: "Add", compact: true })
-      }
-    ),
-    [...new Set(colors)].map((color, index) => /* @__PURE__ */ jsxs("div", { className: classes.swatchRoot, children: [
-      /* @__PURE__ */ jsx(Swatch, { color, onClick: () => onClickColor(color) }),
-      /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          className: classes.removeButton,
-          variant: "secondarySubtle",
-          onClick: () => onRemoveColor(color, index),
-          title: deleteButtonAriaLabel,
-          children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true, size: "xs" })
-        }
-      )
-    ] }, color))
-  ] });
-};
-export {
-  SavedColors
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ColorPicker/SavedColors/SavedColors.tsx
+var SavedColors = (props) => {
+	const { colors, onClickColor, onAddColor, onRemoveColor, deleteButtonAriaLabel, addButtonAriaLabel, classes: classesProp } = useDefaultProps("HvColorPickerSavedColors", props);
+	const { classes } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.root,
+		children: [/* @__PURE__ */ jsx(HvIconButton, {
+			variant: "secondarySubtle",
+			onClick: onAddColor,
+			title: addButtonAriaLabel,
+			children: /* @__PURE__ */ jsx(HvIcon, {
+				name: "Add",
+				compact: true
+			})
+		}), [...new Set(colors)].map((color, index) => /* @__PURE__ */ jsxs("div", {
+			className: classes.swatchRoot,
+			children: [/* @__PURE__ */ jsx(Swatch, {
+				color,
+				onClick: () => onClickColor(color)
+			}), /* @__PURE__ */ jsx(HvIconButton, {
+				className: classes.removeButton,
+				variant: "secondarySubtle",
+				onClick: () => onRemoveColor(color, index),
+				title: deleteButtonAriaLabel,
+				children: /* @__PURE__ */ jsx(HvIcon, {
+					name: "Close",
+					compact: true,
+					size: "xs"
+				})
+			})]
+		}, color))]
+	});
 };
+//#endregion
+export { SavedColors };