@hitachivantara/uikit-react-core 6.0.0-next.1 → 6.0.0-next.10

package/dist/ActionBar/ActionBar.styles.js

@@ -4,7 +4,7 @@ const { staticClasses, useClasses } = createClasses("HvActionBar", {
   root: {
     width: "100%",
     padding: theme.space.sm,
-    borderTop: `1px solid ${theme.colors.border}`,
+    borderTop: `1px solid ${theme.colors.borderSubtle}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/BaseDropdown/BaseDropdownPanel.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { ClickAwayListener } from "@mui/base/ClickAwayListener";
-import { Portal } from "@mui/base/Portal";
+import { Portal, ClickAwayListener } from "@mui/base";
 import { useCss, useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../utils/document.js";
 import { useBaseDropdownContext } from "./context.js";

package/dist/Button/Button.js

@@ -7,10 +7,10 @@ import { useClasses, getIconSizeStyles, getSizeStyles } from "./Button.styles.js
 import { staticClasses } from "./Button.styles.js";
 function parseVariant(variant) {
   if (variant === "semantic") return ["inherit", "ghost"];
-  if (variant === "secondary") return ["secondary", "subtle"];
+  if (variant === "secondary") return ["text", "subtle"];
   if (variant === "ghost") return ["primary", "ghost"];
   if (variant === "contained" || variant === "subtle") {
-    return ["secondary", variant];
+    return ["text", variant];
   }
   const result = variant.split(/(?=[A-Z])/);
   if (!result[1]) return [result[0], "contained"];

package/dist/CheckBox/CheckBox.js

@@ -138,6 +138,7 @@ const HvCheckBox = forwardRef(
         readOnly,
         className: cx(
           classes.root,
+          classes[labelPosition],
           { [classes.focusVisible]: !!(focusVisible && label) },
           className
         ),
@@ -145,7 +146,7 @@ const HvCheckBox = forwardRef(
           hasLabel ? /* @__PURE__ */ jsxs(
             "div",
             {
-              className: cx(classes.container, classes[labelPosition], {
+              className: cx(classes.container, {
                 [classes.invalidContainer]: isStateInvalid,
                 [classes.disabled]: disabled
               }),

package/dist/CheckBox/CheckBox.styles.js

@@ -14,13 +14,6 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     },
     ":where(:has($label)) $checkbox": {
       borderRadius: "inherit"
-    },
-    "&$left": {
-      flexDirection: "row-reverse",
-      justifyContent: "flex-end"
-    },
-    "&$right": {
-      flexDirection: "row"
     }
   },
   invalidContainer: {},
@@ -38,18 +31,24 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     verticalAlign: "middle",
     ...theme.typography.body,
     cursor: "pointer",
-    lineHeight: "32px"
+    lineHeight: "32px",
+    flex: 1
   },
   checked: {},
   indeterminate: {},
   semantic: {},
   left: {
-    "& .HvCheckBox-label": {
-      paddingLeft: theme.space.xs
+    "& $label": {
+      paddingLeft: theme.space.xs,
+      textAlign: "right"
+    },
+    "& $container": {
+      flexDirection: "row-reverse"
+      // justifyContent: "flex-end",
     }
   },
   right: {
-    "& .HvCheckBox-label": {
+    "& $label": {
       paddingRight: theme.space.xs
     }
   }

package/dist/ColorPicker/ColorPicker.js

@@ -9,8 +9,8 @@ import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ColorPicker.styles.js";
 import { staticClasses } from "./ColorPicker.styles.js";
-import { PresetColors } from "./PresetColors/PresetColors.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";
@@ -81,18 +81,18 @@ const HvColorPicker = forwardRef(
     const handleToggle = (_, open) => {
       setIsOpen(open);
     };
-    const handleSelect = (val) => {
-      onChange?.(val.hex);
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
+    const handleSelect = (hex) => {
+      onChange?.(hex);
+      onChangeComplete?.(hex);
+      setColor(hex);
     };
-    const handleOnChange = (val) => {
-      onChange?.(val.hex);
-      setColor(val.hex);
+    const handleOnChange = (hex) => {
+      onChange?.(hex);
+      setColor(hex);
     };
-    const handleOnChangeComplete = (val) => {
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
+    const handleOnChangeComplete = (hex) => {
+      onChangeComplete?.(hex);
+      setColor(hex);
     };
     const handleAddColor = () => {
       const colorToAdd = color || "#000000";
@@ -157,7 +157,7 @@ const HvColorPicker = forwardRef(
                     classes.headerColorIconOnly
                   )
                 }
-              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(HvIcon, { name: "ColorPicker", className: classes.colorPickerIcon }) : void 0,
+              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(HvIcon, { name: "ColorPicker" }) : void 0,
               placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "div",
@@ -178,11 +178,10 @@ const HvColorPicker = forwardRef(
               "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: [
+              children: /* @__PURE__ */ jsxs(HvPanel, { className: cx(classes.panel, classes.colorPicker), children: [
                 recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(
                   PresetColors,
                   {
-                    className: classes.recommendedColorsRoot,
                     colors: recommendedColors,
                     onClick: handleSelect,
                     title: showLabels ? labels.recommendedColorsLabel : void 0
@@ -191,13 +190,8 @@ const HvColorPicker = forwardRef(
                 showCustomColors && /* @__PURE__ */ jsx(
                   Picker,
                   {
-                    classes: {
-                      fields: cx({
-                        [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
-                      })
-                    },
                     title: showLabels ? labels.customColorsLabel : void 0,
-                    color,
+                    hex: color,
                     onChange: handleOnChange,
                     onChangeComplete: handleOnChangeComplete
                   }
@@ -221,7 +215,7 @@ const HvColorPicker = forwardRef(
                     title: showLabels ? labels.recommendedColorsLabel : void 0
                   }
                 )
-              ] }) })
+              ] })
             }
           )
         ]

package/dist/ColorPicker/ColorPicker.styles.js

@@ -1,4 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   root: {},
   labelContainer: {},
@@ -19,19 +20,14 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
     width: "100%",
     minWidth: "266px",
     display: "flex",
+    flexDirection: "column",
+    gap: theme.space.md,
     justifyContent: "center",
     padding: "16px",
     backgroundColor: "transparent"
   },
-  colorPicker: {
-    width: "232px"
-  },
+  colorPicker: {},
   colorPickerIcon: {},
-  recommendedColorsRoot: {
-    ":not(:only-child)": {
-      paddingBottom: "24px"
-    }
-  },
   dropdownRootIconOnly: {
     "&,& .HvBaseDropdown-arrowContainer": {
       width: 32,
@@ -43,8 +39,7 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   },
   headerColorIconOnly: {
     margin: 8
-  },
-  pickerFields: { paddingBottom: 20 }
+  }
 });
 export {
   staticClasses,

package/dist/ColorPicker/{Fields → Picker}/Fields.js

@@ -1,18 +1,47 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import * as color from "react-color/lib/helpers/color";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Fields.styles.js";
+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
+    }
+  }
+});
 const Fields = (props) => {
   const {
     className,
     onChange,
-    rgb,
     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);
@@ -37,45 +66,23 @@ const Fields = (props) => {
       setInternalBlue(rgb?.b);
     }
   }, [rgb]);
-  const handleChange = (data, event) => {
-    if (data.hex && color.isValidHex(data.hex)) {
-      onChange(
-        {
-          hex: data.hex,
-          source: "hex"
-        },
-        event
-      );
-    } else if (data.r !== void 0 || data.g !== void 0 || data.b !== void 0) {
-      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);
+  const handleChange = (hex2) => {
+    if (!validHex(hex2)) return;
+    onChange?.(hex2);
   };
-  const onChangeRbg = (event, value, colorPart) => {
-    if (colorPart === "r") setInternalRed(Number(value));
-    if (colorPart === "g") setInternalGreen(Number(value));
-    if (colorPart === "b") setInternalBlue(Number(value));
+  const onChangeRbg = ({ r, g, b }) => {
+    if (r) setInternalRed(Number(r));
+    if (g) setInternalGreen(Number(g));
+    if (b) setInternalBlue(Number(b));
     handleChange(
-      {
-        r: colorPart === "r" ? Number(value) : rgb?.r,
-        g: colorPart === "g" ? Number(value) : rgb?.g,
-        b: colorPart === "b" ? Number(value) : rgb?.b
-      },
-      event
+      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.fields, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), children: [
     /* @__PURE__ */ jsx(
       HvInput,
       {
@@ -83,7 +90,10 @@ const Fields = (props) => {
         className: classes.double,
         label: "HEX",
         value: internalHex?.replace("#", ""),
-        onChange: onChangeHex,
+        onChange: (event, value) => {
+          setInternalHex(value);
+          handleChange(value);
+        },
         onBlur: () => setInternalHex(hex),
         disableClear: true
       }
@@ -95,7 +105,7 @@ const Fields = (props) => {
         className: classes.single,
         label: "R",
         value: internalRed,
-        onChange: (event, value) => onChangeRbg(event, value, "r"),
+        onChange: (event, value) => onChangeRbg({ r: value }),
         onBlur: () => setInternalRed(rgb?.r),
         inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
@@ -108,7 +118,7 @@ const Fields = (props) => {
         className: classes.single,
         label: "G",
         value: internalGreen,
-        onChange: (event, value) => onChangeRbg(event, value, "g"),
+        onChange: (event, value) => onChangeRbg({ g: value }),
         onBlur: () => setInternalGreen(rgb?.g),
         inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true
@@ -121,7 +131,7 @@ const Fields = (props) => {
         className: classes.single,
         label: "B",
         value: internalBlue,
-        onChange: (event, value) => onChangeRbg(event, value, "b"),
+        onChange: (event, value) => onChangeRbg({ b: value }),
         onBlur: () => setInternalBlue(rgb?.b),
         inputProps: { type: "number", min: 0, max: 255 },
         disableClear: true

package/dist/ColorPicker/Picker/Picker.js

@@ -1,64 +1,55 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { CustomPicker } from "react-color";
-import { Saturation, Hue } from "react-color/lib/components/common";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+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 { Fields } from "../Fields/Fields.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const Component = (props) => {
+const Picker = (props) => {
   const {
+    hex: hexProp,
     onChange,
-    rgb,
-    hsl,
-    hsv,
-    hex,
+    onChangeComplete,
     title,
     classes: classesProp
   } = useDefaultProps("HvColorPickerPicker", props);
   const { classes } = useClasses(classesProp);
-  const SaturationPointer = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }),
-    [classes?.saturationPointer]
-  );
-  const HueSlider = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.hueSlider }),
-    [classes?.hueSlider]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  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("div", { className: classes.saturation, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         Saturation,
         {
-          hsl,
-          hsv,
-          onChange,
-          pointer: SaturationPointer
+          className: classes.saturation,
+          hsva,
+          onChange: (newColor) => {
+            const newHex = hsvaToHex(newColor);
+            onChange?.(newHex);
+            onChangeComplete?.(newHex);
+          }
         }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsx(
+      ),
+      /* @__PURE__ */ jsx(
         Hue,
         {
+          className: classes.hue,
           direction: "horizontal",
-          hsl,
-          onChange,
-          pointer: HueSlider
+          hue: hsva.h,
+          onChange: ({ h }) => {
+            const newHex = hsvaToHex({ ...hsva, h });
+            onChange?.(newHex);
+            onChangeComplete?.(newHex);
+          }
         }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Fields,
-      {
-        className: classes.fields,
-        rgb,
-        hex,
-        onChange
-      }
-    )
+      ),
+      /* @__PURE__ */ jsx(Fields, { hex, onChange })
+    ] })
   ] });
 };
-const Picker = CustomPicker(Component);
 export {
   Picker
 };

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

@@ -1,59 +1,43 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { useClasses } = createClasses("HvColorPickerPicker", {
+  root: {},
   pickers: {
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    gap: theme.space.sm
   },
   saturation: {
-    width: "232px",
-    height: "140px",
-    marginRight: "0px",
+    width: "232px !important",
+    height: "140px !important",
     position: "relative",
     overflow: "visible",
-    "& > div": {
-      borderRadius: theme.radii.base,
-      "& .saturation-white": {
-        borderRadius: theme.radii.base,
-        "& .saturation-black": {
-          borderRadius: theme.radii.base
-        }
-      }
+    "& .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`
     }
   },
-  saturationPointer: {
-    width: "8px",
-    height: "8px",
-    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)`,
-    borderRadius: theme.radii.full,
-    transform: "translate(-3px, -3px)"
-  },
   hue: {
-    height: "8px",
-    width: "232px",
+    height: "8px !important",
+    width: "232px !important",
     position: "relative",
     overflow: "visible",
-    marginTop: "18px",
-    "& .hue-horizontal": {
-      borderRadius: `calc(2*${theme.radii.base})`
+    "& .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"
     }
   },
-  hueSlider: {
-    width: "12px",
-    height: "12px",
-    background: "transparent",
-    boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
-    marginLeft: "0px",
-    border: "2px solid #fff",
-    borderRadius: theme.radii.full,
-    transform: "translate(-6px, -2px)"
-  },
   title: {
     fontWeight: theme.fontWeights.semibold,
     marginBottom: 8
-  },
-  fields: {}
+  }
 });
 export {
   useClasses

package/dist/ColorPicker/PresetColors/PresetColors.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Swatch } from "react-color/lib/components/common";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
+import { Swatch } from "../Swatch.js";
 import { useClasses } from "./PresetColors.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const PresetColors = (props) => {
@@ -13,29 +13,14 @@ const PresetColors = (props) => {
     classes: classesProp
   } = useDefaultProps("HvColorPickerPresetColors", props);
   const { classes, cx } = useClasses(classesProp);
-  const handleClick = (hex) => {
-    onClick({
-      hex,
-      source: "hex"
-    });
-  };
   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(
-      "div",
+      Swatch,
       {
-        className: classes.swatchWrap,
-        children: /* @__PURE__ */ jsx(
-          Swatch,
-          {
-            color,
-            style: { backgroundColor: getColor(color) },
-            onClick: handleClick,
-            focusStyle: {
-              boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
-            }
-          }
-        )
+        color,
+        style: { backgroundColor: getColor(color) },
+        onClick: () => onClick(color)
       },
       `recommended-color-${color}-${index}`
     )) })

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

@@ -6,21 +6,12 @@ const { useClasses } = createClasses("HvColorPickerPresetColors", {
     display: "flex",
     flexWrap: "wrap",
     position: "relative",
-    width: "calc(100% + 8px)",
-    margin: "-4px -4px",
+    gap: theme.space.xs,
     padding: 0
   },
   title: {
     fontWeight: theme.fontWeights.semibold,
     marginBottom: 8
-  },
-  swatchWrap: {
-    width: "32px",
-    height: "32px",
-    margin: theme.space.xxs,
-    "& > span > div": {
-      borderRadius: theme.radii.base
-    }
   }
 });
 export {