@hitachivantara/uikit-react-core 5.87.3 → 5.88.0

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -3,12 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const date = require("@internationalized/date");
-const utils = require("@mui/material/utils");
+const utils$1 = require("@mui/material/utils");
 const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const utils$1 = require("../Calendar/utils.cjs");
+const utils = require("../Calendar/utils.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
@@ -52,7 +52,7 @@ const HvTimePicker = React.forwardRef(
       timeFormat,
       showSeconds,
       disableExpand,
-      locale = utils$1.DEFAULT_LOCALE,
+      locale = utils.DEFAULT_LOCALE,
       onToggle,
       onChange,
       // misc properties:
@@ -65,7 +65,7 @@ const HvTimePicker = React.forwardRef(
     const { classes, cx } = TimePicker_styles.useClasses(classesProp);
     const timeFieldRef = React.useRef(null);
     const { ref: refProp, ...otherDropdownProps } = dropdownProps;
-    const dropdownForkedRef = utils.useForkRef(ref, refProp);
+    const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
     const stateProps = {
       value: toTime(valueProp),
       defaultValue: toTime(defaultValueProp),
@@ -77,6 +77,7 @@ const HvTimePicker = React.forwardRef(
       granularity: showSeconds === false ? "minute" : "second",
       hourCycle: timeFormat === "12" ? 12 : 24,
       onChange: (value) => {
+        if (!value) return;
         const { hour: hours, minute: minutes, second: seconds } = value;
         onChange?.({ hours, minutes, seconds });
       }

package/dist/cjs/hooks/useFocus.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const document = require("../utils/document.cjs");
+const getActiveEl = () => document.getDocument()?.activeElement || null;
+function makeFocusUtils(containerRef) {
+  function focus(el, checkFocus = true) {
+    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {
+      el?.focus();
+    }
+  }
+  return {
+    focusPrevious() {
+      focus(getActiveEl()?.previousElementSibling);
+    },
+    focusNext() {
+      focus(getActiveEl()?.nextElementSibling);
+    },
+    focusFirst() {
+      focus(getActiveEl()?.parentElement?.firstElementChild);
+    },
+    focusLast() {
+      focus(getActiveEl()?.parentElement?.lastElementChild);
+    },
+    focusChild(index) {
+      focus(containerRef.current?.children[index], false);
+    },
+    focusSibling(index) {
+      focus(getActiveEl()?.parentElement?.children[index]);
+    }
+  };
+}
+function useFocus({
+  containerRef
+}) {
+  return React.useMemo(() => makeFocusUtils(containerRef), [containerRef]);
+}
+exports.useFocus = useFocus;

package/dist/cjs/utils/focusUtils.cjs

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const outlineStyles = {
-  outlineColor: "#52A8EC",
-  outlineStyle: "solid",
-  outlineWidth: "0px",
-  outlineOffset: "-1px",
   boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
 exports.outlineStyles = outlineStyles;

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -5,9 +5,9 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ActionsGeneric.styles.js";
 import { staticClasses } from "./ActionsGeneric.styles.js";
+import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvButton } from "../Button/Button.js";
-import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
   const {
     id: idProp,

package/dist/esm/AvatarGroup/AvatarGroupContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useContext } from "react";
+import { useContext, createContext, useMemo } from "react";
 const HvAvatarGroupContext = createContext(null);
 const HvAvatarGroupProvider = ({
   size,

package/dist/esm/Banner/BannerContent/BannerContent.js

@@ -6,8 +6,8 @@ import { iconVariant } from "../../utils/iconVariant.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./BannerContent.styles.js";
 import { staticClasses } from "./BannerContent.styles.js";
-import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
 import { HvButton } from "../../Button/Button.js";
+import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
 const HvBannerContent = forwardRef(
   function HvBannerContent2(props, ref) {
     const {

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -4,7 +4,7 @@ import MuiCheckbox from "@mui/material/Checkbox";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseCheckBox.styles.js";
 import { staticClasses } from "./BaseCheckBox.styles.js";
-import { Box, Partial, Check } from "./icons.js";
+import { Check, Partial, Box } from "./icons.js";
 const getSelectorIcons = () => {
   return {
     checkbox: /* @__PURE__ */ jsx(Box, {}),

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo, Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElement, Fragment } from "react";
 import { usePopper } from "react-popper";
 import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
@@ -13,7 +13,7 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
 import { BaseDropdownPanel } from "./BaseDropdownPanel.js";
-import { useBaseDropdownContext, BaseDropdownContext } from "./context.js";
+import { BaseDropdownContext, useBaseDropdownContext } from "./context.js";
 import { HvTypography } from "../Typography/Typography.js";
 const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
   const {

package/dist/esm/BaseInput/BaseInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport MuiInputBase, { type InputBaseProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  buildAriaPropsFromContext,\n  buildFormElementPropsFromContext,\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseInputProps\n  extends Omit<\n    InputBaseProps,\n    \"onChange\" | \"classes\" | \"ref\" | \"color\" | \"size\"\n  > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n  // no-indent\n  React.ElementRef<\"input\">,\n  HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline,\n    resizable,\n    invalid: invalidProp,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext,\n  );\n\n  const forkedRef = useForkRef(ref, inputRef);\n\n  const invalid = invalidProp || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext,\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    invalid,\n    id,\n  );\n\n  return (\n    <MuiInputBase\n      id={id}\n      name={formElementProps.name}\n      value={value}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      readOnly={!!formElementProps.readOnly}\n      disabled={formElementProps.disabled}\n      onChange={(event) => onChange?.(event, event.target.value)}\n      className={cx(classes.root, classes.inputRoot, className, {\n        [classes.inputRootMultiline]: multiline,\n        [classes.multiline]: multiline,\n        [classes.inputRootInvalid]: invalid,\n        [classes.invalid]: invalid,\n        [classes.inputRootReadOnly]: formElementProps.readOnly,\n        [classes.readOnly]: formElementProps.readOnly,\n        [classes.inputRootDisabled]: formElementProps.disabled,\n        [classes.disabled]: formElementProps.disabled,\n      })}\n      classes={{\n        focused: cx(classes.focused, classes.inputRootFocused),\n        input: cx(classes.input, {\n          [classes.inputResizable]: !formElementProps.disabled && resizable,\n          [classes.inputDisabled]: formElementProps.disabled,\n          [classes.inputReadOnly]: formElementProps.readOnly,\n        }),\n      }}\n      inputProps={{\n        // Avoid the required attribute at the root node\n        required: formElementProps.required,\n        ...inputProps,\n        ...ariaProps,\n      }}\n      inputRef={forkedRef}\n      multiline={multiline}\n      {...(multiline ? { rows: 10 } : { type })}\n      {...others}\n    />\n  );\n});\n"],"names":["HvBaseInput"],"mappings":";;;;;;;;;AA8DO,MAAM,cAAc,WAIzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,UAAU,eAAe,iBAAiB,WAAW;AAE3D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,iBAAiB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,MAC7B,UAAU,iBAAiB;AAAA,MAC3B,UAAU,CAAC,UAAU,WAAW,OAAO,MAAM,OAAO,KAAK;AAAA,MACzD,WAAW,GAAG,QAAQ,MAAM,QAAQ,WAAW,WAAW;AAAA,QACxD,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAC9B,CAAC,QAAQ,SAAS,GAAG;AAAA,QACrB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,QAC5B,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QACrC,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,MAAA,CACtC;AAAA,MACD,SAAS;AAAA,QACP,SAAS,GAAG,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,QACrD,OAAO,GAAG,QAAQ,OAAO;AAAA,UACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,UACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,UAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,QAC3C,CAAA;AAAA,MACH;AAAA,MACA,YAAY;AAAA;AAAA,QAEV,UAAU,iBAAiB;AAAA,QAC3B,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACC,GAAI,YAAY,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK;AAAA,MACtC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport MuiInputBase, { type InputBaseProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  buildAriaPropsFromContext,\n  buildFormElementPropsFromContext,\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseInputProps\n  extends Omit<\n    InputBaseProps,\n    \"onChange\" | \"classes\" | \"ref\" | \"color\" | \"size\"\n  > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /**\n   * Callback fired when the value is changed.\n   *\n   * You can pull out the new value by accessing `event.target.value` (string),\n   * or using the second callback argument.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n  // no-indent\n  React.ElementRef<\"input\">,\n  HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline,\n    resizable,\n    invalid: invalidProp,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext,\n  );\n\n  const forkedRef = useForkRef(ref, inputRef);\n\n  const invalid = invalidProp || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext,\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    invalid,\n    id,\n  );\n\n  return (\n    <MuiInputBase\n      id={id}\n      name={formElementProps.name}\n      value={value}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      readOnly={!!formElementProps.readOnly}\n      disabled={formElementProps.disabled}\n      onChange={(event) => onChange?.(event, event.target.value)}\n      className={cx(classes.root, classes.inputRoot, className, {\n        [classes.inputRootMultiline]: multiline,\n        [classes.multiline]: multiline,\n        [classes.inputRootInvalid]: invalid,\n        [classes.invalid]: invalid,\n        [classes.inputRootReadOnly]: formElementProps.readOnly,\n        [classes.readOnly]: formElementProps.readOnly,\n        [classes.inputRootDisabled]: formElementProps.disabled,\n        [classes.disabled]: formElementProps.disabled,\n      })}\n      classes={{\n        focused: cx(classes.focused, classes.inputRootFocused),\n        input: cx(classes.input, {\n          [classes.inputResizable]: !formElementProps.disabled && resizable,\n          [classes.inputDisabled]: formElementProps.disabled,\n          [classes.inputReadOnly]: formElementProps.readOnly,\n        }),\n      }}\n      inputProps={{\n        // Avoid the required attribute at the root node\n        required: formElementProps.required,\n        ...inputProps,\n        ...ariaProps,\n      }}\n      inputRef={forkedRef}\n      multiline={multiline}\n      {...(multiline ? { rows: 10 } : { type })}\n      {...others}\n    />\n  );\n});\n"],"names":["HvBaseInput"],"mappings":";;;;;;;;;AAkEO,MAAM,cAAc,WAIzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,UAAU,eAAe,iBAAiB,WAAW;AAE3D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,iBAAiB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,MAC7B,UAAU,iBAAiB;AAAA,MAC3B,UAAU,CAAC,UAAU,WAAW,OAAO,MAAM,OAAO,KAAK;AAAA,MACzD,WAAW,GAAG,QAAQ,MAAM,QAAQ,WAAW,WAAW;AAAA,QACxD,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAC9B,CAAC,QAAQ,SAAS,GAAG;AAAA,QACrB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,QAC5B,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QACrC,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,MAAA,CACtC;AAAA,MACD,SAAS;AAAA,QACP,SAAS,GAAG,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,QACrD,OAAO,GAAG,QAAQ,OAAO;AAAA,UACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,UACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,UAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,QAC3C,CAAA;AAAA,MACH;AAAA,MACA,YAAY;AAAA;AAAA,QAEV,UAAU,iBAAiB;AAAA,QAC3B,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACC,GAAI,YAAY,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK;AAAA,MACtC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -94,7 +94,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     height: "100%",
     marginLeft: theme.space.xs,
     marginRight: theme.space.xs,
-    padding: theme.spacing("5px", 0),
+    padding: 0,
     backgroundColor: "transparent",
     overflow: "hidden",
     textOverflow: "ellipsis",

package/dist/esm/BaseInput/BaseInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n      WebkitTextFillColor: theme.colors.secondary,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.secondary,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.colors.negative_120,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: { borderColor: theme.colors.negative_120 },\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: theme.spacing(\"5px\", 0),\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.secondary_60,\n    WebkitTextFillColor: theme.colors.secondary_60,\n  },\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,MACrD,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,EAAE,aAAa,MAAM,OAAO,aAAa;AAAA;AAAA,EAE3D,mBAAmB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS,MAAM,QAAQ,OAAO,CAAC;AAAA,IAC/B,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}
+{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n      WebkitTextFillColor: theme.colors.secondary,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.secondary,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.colors.negative_120,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: { borderColor: theme.colors.negative_120 },\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.secondary_60,\n    WebkitTextFillColor: theme.colors.secondary_60,\n  },\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,MACrD,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,EAAE,aAAa,MAAM,OAAO,aAAa;AAAA;AAAA,EAE3D,mBAAmB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}

package/dist/esm/BaseInput/validations.js

@@ -47,7 +47,7 @@ const computeValidationMessage = (inputValidity, errorMessages) => {
   }
   return errorMessages.error;
 };
-const validateInput = (input, value, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
+const validateInput = (input, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
   const inputValidity = {
     valid: input?.validity?.valid ?? true,
     badInput: input?.validity?.badInput,
@@ -61,6 +61,7 @@ const validateInput = (input, value, required, minCharQuantity, maxCharQuantity,
     typeMismatch: input?.validity?.typeMismatch,
     valueMissing: input?.validity?.valueMissing
   };
+  const value = input?.value;
   if (!value) {
     if (required) {
       inputValidity.valueMissing = true;

package/dist/esm/BaseInput/validations.js.map

@@ -1 +1 @@
-{"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport { validationStates } from \"../FormElement\";\n\n/** Checks if the value is a number. */\nconst isNumeric = (num: string) =>\n  // to prevent Number( <spaces> ) = 0\n  num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/** Checks if the value is an email */\nconst isEmail = (email: string) => {\n  const regexp =\n    /^[^\\\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;\n  return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n  none: \"none\",\n  number: \"number\",\n  email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. */\nexport const computeValidationType = (type: React.HTMLInputTypeAttribute) => {\n  switch (type) {\n    case \"number\":\n      return validationTypes.number;\n    case \"email\":\n      return validationTypes.email;\n\n    default:\n      return validationTypes.none;\n  }\n};\n\n/**\n * Checks whether any integrated validation, native or not, is active.\n */\nexport const hasBuiltInValidations = (\n  required: boolean | undefined,\n  validationType: React.HTMLInputTypeAttribute,\n  minCharQuantity: number | null | undefined,\n  maxCharQuantity: number | null | undefined,\n  validation?: (value: string) => boolean,\n  inputProps?: InputBaseComponentProps,\n) =>\n  required ||\n  validationType !== validationTypes.none ||\n  minCharQuantity != null ||\n  maxCharQuantity != null ||\n  validation != null ||\n  inputProps?.required != null ||\n  inputProps?.minLength != null ||\n  inputProps?.maxLength != null ||\n  inputProps?.min != null ||\n  inputProps?.max != null ||\n  (inputProps?.type != null &&\n    inputProps?.type !== \"text\" &&\n    inputProps?.type !== \"password\") ||\n  inputProps?.pattern != null;\n\n/** Returns the form element's validation state based in the validity state of the input. */\nexport const computeValidationState = (\n  inputValidity: HvInputValidity,\n  isEmptyValue: boolean,\n) => {\n  // to keep 2.x behaviour,\n  // consider that if the value is empty (and not required) we're returning to the standBy state.\n  // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n  if (inputValidity.valid && isEmptyValue) {\n    return validationStates.standBy;\n  }\n\n  return inputValidity.valid\n    ? validationStates.valid\n    : validationStates.invalid;\n};\n\n/**\n * Returns a error message based in the validity state of the input.\n *\n * Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n *\n * For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n */\nexport const computeValidationMessage = (\n  inputValidity: HvInputValidity,\n  /** The available localized error messages. */\n  errorMessages: Record<string, string>,\n) => {\n  if (inputValidity.valid) {\n    return \"\";\n  }\n\n  if (inputValidity.valueMissing) {\n    return errorMessages.requiredError;\n  }\n  if (inputValidity.tooLong) {\n    return errorMessages.maxCharError;\n  }\n  if (inputValidity.tooShort) {\n    return errorMessages.minCharError;\n  }\n  if (inputValidity.typeMismatch) {\n    return errorMessages.typeMismatchError;\n  }\n\n  return errorMessages.error;\n};\n\n/**\n * Returns a object describing the validity state of the input.\n *\n * It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n  input: HTMLInputElement | HTMLTextAreaElement | null,\n  value: string,\n  required: boolean | undefined,\n  minCharQuantity: any,\n  maxCharQuantity: any,\n  validationType: string,\n  validation?: (value: string) => boolean,\n): HvInputValidity => {\n  // bootstrap validity object using browser's built-in validation\n  const inputValidity: HvInputValidity = {\n    valid: input?.validity?.valid ?? true,\n    badInput: input?.validity?.badInput,\n    customError: input?.validity?.customError,\n    patternMismatch: input?.validity?.patternMismatch,\n    rangeOverflow: input?.validity?.rangeOverflow,\n    rangeUnderflow: input?.validity?.rangeUnderflow,\n    stepMismatch: input?.validity?.stepMismatch,\n    tooLong: input?.validity?.tooLong,\n    tooShort: input?.validity?.tooShort,\n    typeMismatch: input?.validity?.typeMismatch,\n    valueMissing: input?.validity?.valueMissing,\n  };\n\n  if (!value) {\n    if (required) {\n      // this is redundant because we're setting the required property in the native input\n      inputValidity.valueMissing = true;\n      inputValidity.valid = false;\n    }\n  } else {\n    // we're not setting minlength and maxlength in the native input\n    // to avoid different browser's behaviours and keep the user experience consistent\n    if (minCharQuantity !== null && value.length < minCharQuantity) {\n      inputValidity.tooShort = true;\n      inputValidity.valid = false;\n    }\n\n    if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n      inputValidity.tooLong = true;\n      inputValidity.valid = false;\n    }\n\n    // the validationType is used instead of type\n    // for the same reason stated above\n    switch (validationType) {\n      case validationTypes.number:\n        if (!isNumeric(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      case validationTypes.email:\n        if (!isEmail(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      default:\n    }\n\n    if (validation != null && !validation(value)) {\n      inputValidity.customError = true;\n      inputValidity.valid = false;\n    }\n  }\n\n  return inputValidity;\n};\n\ntype Mutable<T> = { -readonly [P in keyof T]: T[P] };\n\nexport interface HvInputValidity extends Partial<Mutable<ValidityState>> {}\n\nexport const DEFAULT_ERROR_MESSAGES = {\n  error: \"Invalid value\",\n  requiredError: \"The value is required\",\n  minCharError: \"The value is too short\",\n  maxCharError: \"The value is too long\",\n  typeMismatchError: \"Invalid value\",\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport { validationStates } from \"../FormElement\";\n\n/** Checks if the value is a number. */\nconst isNumeric = (num: string) =>\n  // to prevent Number( <spaces> ) = 0\n  num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/** Checks if the value is an email */\nconst isEmail = (email: string) => {\n  const regexp =\n    /^[^\\\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;\n  return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n  none: \"none\",\n  number: \"number\",\n  email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. */\nexport const computeValidationType = (type: React.HTMLInputTypeAttribute) => {\n  switch (type) {\n    case \"number\":\n      return validationTypes.number;\n    case \"email\":\n      return validationTypes.email;\n\n    default:\n      return validationTypes.none;\n  }\n};\n\n/**\n * Checks whether any integrated validation, native or not, is active.\n */\nexport const hasBuiltInValidations = (\n  required: boolean | undefined,\n  validationType: React.HTMLInputTypeAttribute,\n  minCharQuantity: number | null | undefined,\n  maxCharQuantity: number | null | undefined,\n  validation?: (value: string) => boolean,\n  inputProps?: InputBaseComponentProps,\n) =>\n  required ||\n  validationType !== validationTypes.none ||\n  minCharQuantity != null ||\n  maxCharQuantity != null ||\n  validation != null ||\n  inputProps?.required != null ||\n  inputProps?.minLength != null ||\n  inputProps?.maxLength != null ||\n  inputProps?.min != null ||\n  inputProps?.max != null ||\n  (inputProps?.type != null &&\n    inputProps?.type !== \"text\" &&\n    inputProps?.type !== \"password\") ||\n  inputProps?.pattern != null;\n\n/** Returns the form element's validation state based in the validity state of the input. */\nexport const computeValidationState = (\n  inputValidity: HvInputValidity,\n  isEmptyValue: boolean,\n) => {\n  // to keep 2.x behaviour,\n  // consider that if the value is empty (and not required) we're returning to the standBy state.\n  // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n  if (inputValidity.valid && isEmptyValue) {\n    return validationStates.standBy;\n  }\n\n  return inputValidity.valid\n    ? validationStates.valid\n    : validationStates.invalid;\n};\n\n/**\n * Returns a error message based in the validity state of the input.\n *\n * Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n *\n * For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n */\nexport const computeValidationMessage = (\n  inputValidity: HvInputValidity,\n  /** The available localized error messages. */\n  errorMessages: Record<string, string>,\n) => {\n  if (inputValidity.valid) {\n    return \"\";\n  }\n\n  if (inputValidity.valueMissing) {\n    return errorMessages.requiredError;\n  }\n  if (inputValidity.tooLong) {\n    return errorMessages.maxCharError;\n  }\n  if (inputValidity.tooShort) {\n    return errorMessages.minCharError;\n  }\n  if (inputValidity.typeMismatch) {\n    return errorMessages.typeMismatchError;\n  }\n\n  return errorMessages.error;\n};\n\n/**\n * Returns a object describing the validity state of the input.\n *\n * It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n  input: HTMLInputElement | HTMLTextAreaElement | null,\n  required: boolean | undefined,\n  minCharQuantity: any,\n  maxCharQuantity: any,\n  validationType: string,\n  validation?: (value: string) => boolean,\n): HvInputValidity => {\n  // bootstrap validity object using browser's built-in validation\n  const inputValidity: HvInputValidity = {\n    valid: input?.validity?.valid ?? true,\n    badInput: input?.validity?.badInput,\n    customError: input?.validity?.customError,\n    patternMismatch: input?.validity?.patternMismatch,\n    rangeOverflow: input?.validity?.rangeOverflow,\n    rangeUnderflow: input?.validity?.rangeUnderflow,\n    stepMismatch: input?.validity?.stepMismatch,\n    tooLong: input?.validity?.tooLong,\n    tooShort: input?.validity?.tooShort,\n    typeMismatch: input?.validity?.typeMismatch,\n    valueMissing: input?.validity?.valueMissing,\n  };\n\n  const value = input?.value;\n\n  if (!value) {\n    if (required) {\n      // this is redundant because we're setting the required property in the native input\n      inputValidity.valueMissing = true;\n      inputValidity.valid = false;\n    }\n  } else {\n    // we're not setting minlength and maxlength in the native input\n    // to avoid different browser's behaviours and keep the user experience consistent\n    if (minCharQuantity !== null && value.length < minCharQuantity) {\n      inputValidity.tooShort = true;\n      inputValidity.valid = false;\n    }\n\n    if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n      inputValidity.tooLong = true;\n      inputValidity.valid = false;\n    }\n\n    // the validationType is used instead of type\n    // for the same reason stated above\n    switch (validationType) {\n      case validationTypes.number:\n        if (!isNumeric(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      case validationTypes.email:\n        if (!isEmail(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      default:\n    }\n\n    if (validation != null && !validation(value)) {\n      inputValidity.customError = true;\n      inputValidity.valid = false;\n    }\n  }\n\n  return inputValidity;\n};\n\ntype Mutable<T> = { -readonly [P in keyof T]: T[P] };\n\nexport interface HvInputValidity extends Partial<Mutable<ValidityState>> {}\n\nexport const DEFAULT_ERROR_MESSAGES = {\n  error: \"Invalid value\",\n  requiredError: \"The value is required\",\n  minCharError: \"The value is too short\",\n  maxCharError: \"The value is too long\",\n  typeMismatchError: \"Invalid value\",\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseRadio/BaseRadio.js

@@ -4,7 +4,7 @@ import MuiRadio from "@mui/material/Radio";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseRadio.styles.js";
 import { staticClasses } from "./BaseRadio.styles.js";
-import { Unselected, Selected } from "./icons.js";
+import { Selected, Unselected } from "./icons.js";
 const getSelectorIcons = () => {
   return {
     radio: /* @__PURE__ */ jsx(Unselected, {}),

package/dist/esm/Button/Button.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { theme, getColor } from "@hitachivantara/uikit-styles";
 import { fixedForwardRef } from "../types/generic.js";
 import { useClasses, getIconSizeStyles, getSizeStyles, getOverrideColors } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js

@@ -3,7 +3,7 @@ import { useContext, useState, useEffect } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
-import { isRange, getLocaleDateFormat, isDate, getFormattedDate, DEFAULT_LOCALE, getStringFromDate, parseDateString, isSameDay } from "../utils.js";
+import { DEFAULT_LOCALE, isRange, getLocaleDateFormat, isDate, getFormattedDate, getStringFromDate, parseDateString, isSameDay } from "../utils.js";
 import { useClasses } from "./CalendarHeader.styles.js";
 import { staticClasses } from "./CalendarHeader.styles.js";
 import { HvInput } from "../../Input/Input.js";

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { CounterLabel } from \"../utils/CounterLabel\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\". @deprecated no longer used\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={\n                <CounterLabel\n                  selected={selectedCount}\n                  total={Children.count(children)}\n                  conjunctionLabel={selectAllConjunctionLabel}\n                />\n              }\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":"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"}
+{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { CounterLabel } from \"../utils/CounterLabel\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\". @deprecated no longer used\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={\n                <CounterLabel\n                  selected={selectedCount}\n                  total={Children.count(children)}\n                  conjunctionLabel={selectAllConjunctionLabel}\n                />\n              }\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":"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"}

package/dist/esm/ColorPicker/ColorPicker.js

@@ -15,8 +15,8 @@ import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
-import { HvTypography } from "../Typography/Typography.js";
 import { HvPanel } from "../Panel/Panel.js";
+import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
   recommendedColorsLabel: "Recommended colors:",
   customColorsLabel: "Custom colors:"

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\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?: Partial<typeof DEFAULT_LABELS>;\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 = {\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  function HvColorPicker(props, ref) {\n    const {\n      id,\n      name,\n      required,\n      disabled,\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, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue,\n    );\n    const elementId = useUniqueId(id);\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                showGutter\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          }}\n          adornment={\n            iconOnly && color ? (\n              <div\n                style={{ backgroundColor: color }}\n                className={cx(\n                  classes.headerColorIcon,\n                  classes.headerColorIconOnly,\n                )}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <div\n                  style={{ backgroundColor: color }}\n                  className={classes.headerColorIcon}\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={showLabels ? labels.recommendedColorsLabel : undefined}\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={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvColorPicker"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { ColorState } from \"react-color\";\nimport { ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { HvDropdownProps } from \"../Dropdown\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { Picker } from \"./Picker\";\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?: Partial<typeof DEFAULT_LABELS>;\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 = {\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  function HvColorPicker(props, ref) {\n    const {\n      id,\n      name,\n      required,\n      disabled,\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, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(expanded, defaultExpanded);\n    const [color, setColor] = useControlled(value, defaultValue);\n    const [savedColors, setSavedColors] = useControlled(\n      savedColorsValue,\n      defaultSavedColorsValue,\n    );\n    const elementId = useUniqueId(id);\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                showGutter\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          }}\n          adornment={\n            iconOnly && color ? (\n              <div\n                style={{ backgroundColor: color }}\n                className={cx(\n                  classes.headerColorIcon,\n                  classes.headerColorIconOnly,\n                )}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <div\n                  style={{ backgroundColor: color }}\n                  className={classes.headerColorIcon}\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={showLabels ? labels.recommendedColorsLabel : undefined}\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={showLabels ? labels.recommendedColorsLabel : undefined}\n                />\n              )}\n            </div>\n          </HvPanel>\n        </HvBaseDropdown>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvColorPicker"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInput } from \"../../Input\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event,\n      );\n    } else if (\n      data.r !== undefined ||\n      data.g !== undefined ||\n      data.b !== undefined\n    ) {\n      onChange(\n        {\n          r: data.r ?? rgb?.r,\n          g: data.g ?? rgb?.g,\n          b: data.b ?? rgb?.b,\n          source: \"rgb\",\n        },\n        event,\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\",\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event,\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={internalRed}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={internalGreen}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={internalBlue}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Fields.js","sources":["../../../../src/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n// @ts-ignore\nimport * as color from \"react-color/lib/helpers/color\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInput } from \"../../Input\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event,\n      );\n    } else if (\n      data.r !== undefined ||\n      data.g !== undefined ||\n      data.b !== undefined\n    ) {\n      onChange(\n        {\n          r: data.r ?? rgb?.r,\n          g: data.g ?? rgb?.g,\n          b: data.b ?? rgb?.b,\n          source: \"rgb\",\n        },\n        event,\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\",\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event,\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={internalRed}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={internalGreen}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={internalBlue}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        inputProps={{ type: \"number\", min: 0, max: 255 }}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}