@hitachivantara/uikit-react-core 5.87.3 → 5.88.0

package/dist/esm/TagsInput/TagsInput.styles.js

@@ -1,45 +1,29 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../BaseInput/BaseInput.styles.js";
-import "../BaseInput/BaseInput.js";
-import { staticClasses as staticClasses$2 } from "../FormElement/Suggestions/Suggestions.styles.js";
+import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvTagsInput", {
-  input: {
-    width: "100%",
-    ...theme.typography.caption1
-  },
-  listItemGutters: { padding: "0 5px" },
-  listItemRoot: {
-    marginBottom: 2,
-    height: 24,
-    lineHeight: "24px",
-    "&:not(:last-child)": {
-      marginBottom: 2
-    },
-    "&$singleLine": {
-      display: "table-cell",
-      paddingTop: "2px"
-    }
-  },
+  /** @deprecated unused */
+  listItemGutters: {},
+  /** @deprecated use `chipRoot` */
+  listItemRoot: {},
   root: { display: "inline-block", width: "100%" },
+  // TODO: consider renaming this
   chipRoot: {
     maxWidth: "none"
   },
   disabled: {
     "& $tagsList": {
       backgroundColor: theme.colors.atmo2,
-      border: `1px solid ${theme.colors.atmo4}`,
-      "&:focus-within, &:hover": {
-        border: `1px solid ${theme.colors.atmo4}`
+      "&,:hover": {
+        borderColor: theme.colors.atmo4
       }
     }
   },
   readOnly: {
     "& $tagsList": {
       backgroundColor: theme.colors.atmo2,
-      border: `1px solid ${theme.colors.secondary_60}`,
-      "&:hover": {
-        border: `1px solid ${theme.colors.secondary_60}`
+      "&,:hover": {
+        borderColor: theme.colors.secondary_60
       }
     }
   },
@@ -56,112 +40,67 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
   },
   tagsList: {
     display: "flex",
+    alignItems: "center",
     alignContent: "flex-start",
-    float: "left",
-    clear: "both",
+    gap: theme.spacing("xxs", "xs"),
+    cursor: "text",
     width: "100%",
-    maxWidth: "100%",
-    height: "32px",
-    padding: 5,
+    minHeight: 32,
+    padding: theme.spacing("xxs", "xs"),
     overflow: "auto",
     position: "relative",
     flexDirection: "row",
     flexWrap: "wrap",
     backgroundColor: theme.colors.atmo1,
-    border: `1px solid ${theme.colors.secondary_80}`,
+    borderWidth: 1,
+    borderColor: theme.colors.secondary_80,
     borderRadius: theme.radii.base,
     "&:hover": {
-      cursor: "text",
-      border: `1px solid ${theme.colors.primary}`
-    },
-    [`& .${staticClasses$1.inputRoot}`]: {
-      border: "none"
+      borderColor: theme.colors.primary
     },
-    "&:focus, &:focus-within, &:focus-visible": {
-      outlineColor: "#52A8EC",
-      outlineStyle: "solid",
-      outlineWidth: "0px",
-      outlineOffset: "-1px",
-      boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+    "&:focus-within, &:focus-visible": {
+      ...outlineStyles
     },
     "&$singleLine": {
-      overflowX: "hidden",
-      overflowY: "hidden",
-      height: 32,
-      display: "table-row",
-      paddingTop: 0
+      flexWrap: "nowrap"
     },
     "&$error": {
-      border: `1px solid ${theme.colors.negative_120}`
+      borderColor: theme.colors.negative_120
     },
     "&$invalid": {
-      border: `1px solid ${theme.colors.negative_120}`
+      borderColor: theme.colors.negative_120
     }
   },
-  tagInputContainerRoot: {
+  /** @deprecated use `classes.input` instead */
+  tagInputContainerRoot: {},
+  /** @deprecated use `classes.input` instead */
+  tagInputRoot: {},
+  input: {
     display: "flex",
-    flexGrow: 1,
-    height: 24,
-    lineHeight: "24px",
-    "&$singleLine": {
-      display: "table-cell",
-      minWidth: 60,
-      width: "100%",
-      paddingTop: "3px",
-      verticalAlign: "middle"
-    }
-  },
-  tagInputRoot: {
-    [`& .${staticClasses$1.root}`]: {
-      width: "100%",
-      border: "none"
-    },
-    [`&& .${staticClasses$1.inputRoot}`]: {
-      marginLeft: 0,
-      marginRight: 0,
-      flex: "1 1 auto",
-      height: 24,
-      lineHeight: "24px",
-      padding: 0,
-      border: "none"
-    },
-    [`& .${staticClasses$1.inputRootFocused}`]: {
-      outline: "none",
-      boxShadow: "none"
-    },
-    [`& .${staticClasses$1.root} .${staticClasses$1.inputRootReadOnly}`]: {
-      backgroundColor: "transparent",
-      border: "none",
-      "&:hover": {
-        border: "none"
-      }
-    },
-    [`&& .${staticClasses$1.input}`]: {
-      marginLeft: 0
-    }
-  },
-  tagSelected: {
-    outlineColor: "#52A8EC",
-    outlineStyle: "solid",
-    outlineWidth: "0px",
-    outlineOffset: "-1px",
-    boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+    flex: "1 0 auto",
+    height: "auto",
+    width: 0,
+    minWidth: 60,
+    border: "none",
+    margin: 0,
+    padding: 0,
+    ...theme.typography.caption1,
+    backgroundColor: "transparent",
+    outline: "none",
+    boxShadow: "none"
   },
+  /** @deprecated unused.  use `:focus` or `:focus-visible` instead */
+  tagSelected: {},
   /** @deprecated unused. use `::after` instead */
   tagInputBorderContainer: {},
+  /** @deprecated unused. use `:focus` or `:focus-visible` instead */
   tagInputRootFocused: {},
+  /** @deprecated unused */
   tagInputRootEmpty: {},
   singleLine: {},
   error: { float: "left" },
   inputExtension: {},
-  suggestionsContainer: {
-    width: "100%",
-    position: "relative",
-    top: 59,
-    [`& .${staticClasses$2.root} .${staticClasses$2.list} &`]: {
-      width: "100%"
-    }
-  },
+  suggestionsContainer: {},
   suggestionList: {}
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.styles.js","sources":["../../../src/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseInputClasses } from \"../BaseInput\";\nimport { suggestionsClasses } from \"../FormElement/Suggestions\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTagsInput\", {\n  input: {\n    width: \"100%\",\n    ...theme.typography.caption1,\n  },\n  listItemGutters: { padding: \"0 5px\" },\n  listItemRoot: {\n    marginBottom: 2,\n    height: 24,\n    lineHeight: \"24px\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: 2,\n    },\n\n    \"&$singleLine\": {\n      display: \"table-cell\",\n      paddingTop: \"2px\",\n    },\n  },\n  root: { display: \"inline-block\", width: \"100%\" },\n  chipRoot: {\n    maxWidth: \"none\",\n  },\n  disabled: {\n    \"& $tagsList\": {\n      backgroundColor: theme.colors.atmo2,\n      border: `1px solid ${theme.colors.atmo4}`,\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.colors.atmo4}`,\n      },\n    },\n  },\n  readOnly: {\n    \"& $tagsList\": {\n      backgroundColor: theme.colors.atmo2,\n      border: `1px solid ${theme.colors.secondary_60}`,\n\n      \"&:hover\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n      },\n    },\n  },\n  resizable: { width: \"auto\", resize: \"both\", overflow: \"auto\" },\n  invalid: {},\n  labelContainer: { float: \"left\", display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: { display: \"block\", float: \"left\" },\n  characterCounter: {\n    display: \"block\",\n    float: \"right\",\n    textAlign: \"right\",\n    marginBottom: \"6px\",\n  },\n  tagsList: {\n    display: \"flex\",\n    alignContent: \"flex-start\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    height: \"32px\",\n    padding: 5,\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary_80}`,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      cursor: \"text\",\n      border: `1px solid ${theme.colors.primary}`,\n    },\n\n    [`& .${baseInputClasses.inputRoot}`]: {\n      border: \"none\",\n    },\n\n    \"&:focus, &:focus-within, &:focus-visible\": {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n\n    \"&$singleLine\": {\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      height: 32,\n      display: \"table-row\",\n      paddingTop: 0,\n    },\n\n    \"&$error\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n\n    \"&$invalid\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n  },\n  tagInputContainerRoot: {\n    display: \"flex\",\n    flexGrow: 1,\n    height: 24,\n    lineHeight: \"24px\",\n\n    \"&$singleLine\": {\n      display: \"table-cell\",\n      minWidth: 60,\n      width: \"100%\",\n      paddingTop: \"3px\",\n      verticalAlign: \"middle\",\n    },\n  },\n  tagInputRoot: {\n    [`& .${baseInputClasses.root}`]: {\n      width: \"100%\",\n      border: \"none\",\n    },\n    [`&& .${baseInputClasses.inputRoot}`]: {\n      marginLeft: 0,\n      marginRight: 0,\n      flex: \"1 1 auto\",\n      height: 24,\n      lineHeight: \"24px\",\n      padding: 0,\n      border: \"none\",\n    },\n    [`& .${baseInputClasses.inputRootFocused}`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n    [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n      backgroundColor: \"transparent\",\n      border: \"none\",\n      \"&:hover\": {\n        border: \"none\",\n      },\n    },\n    [`&& .${baseInputClasses.input}`]: {\n      marginLeft: 0,\n    },\n  },\n  tagSelected: {\n    outlineColor: \"#52A8EC\",\n    outlineStyle: \"solid\",\n    outlineWidth: \"0px\",\n    outlineOffset: \"-1px\",\n    boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n  },\n  /** @deprecated unused. use `::after` instead */\n  tagInputBorderContainer: {},\n  tagInputRootFocused: {},\n  tagInputRootEmpty: {},\n  singleLine: {},\n  error: { float: \"left\" },\n  inputExtension: {},\n  suggestionsContainer: {\n    width: \"100%\",\n    position: \"relative\",\n    top: 59,\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  suggestionList: {},\n});\n"],"names":["baseInputClasses","suggestionsClasses"],"mappings":"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"}
+{"version":3,"file":"TagsInput.styles.js","sources":["../../../src/TagsInput/TagsInput.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(\"HvTagsInput\", {\n  /** @deprecated unused */\n  listItemGutters: {},\n  /** @deprecated use `chipRoot` */\n  listItemRoot: {},\n  root: { display: \"inline-block\", width: \"100%\" },\n  // TODO: consider renaming this\n  chipRoot: {\n    maxWidth: \"none\",\n  },\n  disabled: {\n    \"& $tagsList\": {\n      backgroundColor: theme.colors.atmo2,\n      \"&,:hover\": {\n        borderColor: theme.colors.atmo4,\n      },\n    },\n  },\n  readOnly: {\n    \"& $tagsList\": {\n      backgroundColor: theme.colors.atmo2,\n      \"&,:hover\": {\n        borderColor: theme.colors.secondary_60,\n      },\n    },\n  },\n  resizable: { width: \"auto\", resize: \"both\", overflow: \"auto\" },\n  invalid: {},\n  labelContainer: { float: \"left\", display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: { display: \"block\", float: \"left\" },\n  characterCounter: {\n    display: \"block\",\n    float: \"right\",\n    textAlign: \"right\",\n    marginBottom: \"6px\",\n  },\n  tagsList: {\n    display: \"flex\",\n    alignItems: \"center\",\n    alignContent: \"flex-start\",\n    gap: theme.spacing(\"xxs\", \"xs\"),\n    cursor: \"text\",\n    width: \"100%\",\n    minHeight: 32,\n    padding: theme.spacing(\"xxs\", \"xs\"),\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderWidth: 1,\n    borderColor: theme.colors.secondary_80,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      borderColor: theme.colors.primary,\n    },\n\n    \"&:focus-within, &:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    \"&$singleLine\": {\n      flexWrap: \"nowrap\",\n    },\n\n    \"&$error\": {\n      borderColor: theme.colors.negative_120,\n    },\n\n    \"&$invalid\": {\n      borderColor: theme.colors.negative_120,\n    },\n  },\n  /** @deprecated use `classes.input` instead */\n  tagInputContainerRoot: {},\n  /** @deprecated use `classes.input` instead */\n  tagInputRoot: {},\n  input: {\n    display: \"flex\",\n    flex: \"1 0 auto\",\n    height: \"auto\",\n    width: 0,\n    minWidth: 60,\n    border: \"none\",\n    margin: 0,\n    padding: 0,\n    ...theme.typography.caption1,\n    backgroundColor: \"transparent\",\n    outline: \"none\",\n    boxShadow: \"none\",\n  },\n  /** @deprecated unused.  use `:focus` or `:focus-visible` instead */\n  tagSelected: {},\n  /** @deprecated unused. use `::after` instead */\n  tagInputBorderContainer: {},\n  /** @deprecated unused. use `:focus` or `:focus-visible` instead */\n  tagInputRootFocused: {},\n  /** @deprecated unused */\n  tagInputRootEmpty: {},\n  singleLine: {},\n  error: { float: \"left\" },\n  inputExtension: {},\n  suggestionsContainer: {},\n  suggestionList: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA;AAAA,EAExE,iBAAiB,CAAC;AAAA;AAAA,EAElB,cAAc,CAAC;AAAA,EACf,MAAM,EAAE,SAAS,gBAAgB,OAAO,OAAO;AAAA;AAAA,EAE/C,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,aAAa,MAAM,OAAO;AAAA,MAAA;AAAA,IAC5B;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,aAAa,MAAM,OAAO;AAAA,MAAA;AAAA,IAC5B;AAAA,EAEJ;AAAA,EACA,WAAW,EAAE,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,EAC7D,SAAS,CAAC;AAAA,EACV,gBAAgB,EAAE,OAAO,QAAQ,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC3E,OAAO,CAAC;AAAA,EACR,aAAa,EAAE,SAAS,SAAS,OAAO,OAAO;AAAA,EAC/C,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,KAAK,MAAM,QAAQ,OAAO,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS,MAAM,QAAQ,OAAO,IAAI;AAAA,IAClC,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,eAAe;AAAA,IACf,UAAU;AAAA,IAEV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IAEA,mCAAmC;AAAA,MACjC,GAAG;AAAA,IACL;AAAA,IAEA,gBAAgB;AAAA,MACd,UAAU;AAAA,IACZ;AAAA,IAEA,WAAW;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IAEA,aAAa;AAAA,MACX,aAAa,MAAM,OAAO;AAAA,IAAA;AAAA,EAE9B;AAAA;AAAA,EAEA,uBAAuB,CAAC;AAAA;AAAA,EAExB,cAAc,CAAC;AAAA,EACf,OAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG,MAAM,WAAW;AAAA,IACpB,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA;AAAA,EAEA,aAAa,CAAC;AAAA;AAAA,EAEd,yBAAyB,CAAC;AAAA;AAAA,EAE1B,qBAAqB,CAAC;AAAA;AAAA,EAEtB,mBAAmB,CAAC;AAAA,EACpB,YAAY,CAAC;AAAA,EACb,OAAO,EAAE,OAAO,OAAO;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,CAAC;AAAA,EACvB,gBAAgB,CAAA;AAClB,CAAC;"}

package/dist/esm/TextArea/TextArea.js

@@ -82,7 +82,6 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   const performValidation = useCallback(() => {
     const inputValidity = validateInput(
       inputRef.current,
-      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -103,8 +102,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
     required,
     setValidationMessage,
     setValidationState,
-    validation,
-    value
+    validation
   ]);
   const limitValue = (currentValue) => {
     if (currentValue === void 0 || !blockMax) return currentValue;

package/dist/esm/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n  validationStates,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport type { HvValidationMessages } from \"../Input\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TextArea.styles\";\n\nexport { staticClasses as textAreaClasses };\n\nexport type HvTextAreaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTextAreaProps\n  extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\" | \"placeholder\"\n  > {\n  /** The placeholder value of the text area. */\n  placeholder?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\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 `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel?: string;\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages?: HvValidationMessages;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxCharQuantity?: number;\n  /**\n   * The minimum allowed length of the characters, if this value is null no check\n   * will be perform.\n   */\n  minCharQuantity?: number;\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus?: boolean;\n  /**\n   * The number of rows of the text area\n   */\n  rows?: number;\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable?: boolean;\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll?: boolean;\n  /**\n   * If true it isn't possible to pass the `maxCharQuantity`\n   */\n  blockMax?: boolean;\n  /**\n   * If `true` the character counter isn't shown even if maxCharQuantity is set.\n   */\n  hideCounter?: boolean;\n  /**\n   * Props passed to the char count.\n   */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /**\n   * Called back when the value is changed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /**\n   * Called back when the value is changed.\n   */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n    validationState: HvInputValidity,\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<\n  React.ComponentRef<\"textarea\">,\n  HvTextAreaProps\n>(function HvTextArea(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    name,\n    label,\n    description,\n    placeholder,\n    status,\n    statusMessage,\n    validationMessages,\n    maxCharQuantity,\n    minCharQuantity,\n    value: valueProp,\n    inputRef: inputRefProp,\n    rows = 1,\n    defaultValue = \"\",\n    middleCountLabel = \"/\",\n    countCharProps = {},\n    inputProps = {},\n    required,\n    readOnly,\n    disabled,\n    autoFocus,\n    resizable,\n    autoScroll,\n    hideCounter,\n    blockMax,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    validation,\n    onChange,\n    onBlur,\n    onFocus,\n    ...others\n  } = useDefaultProps(\"HvTextArea\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef<boolean>(false);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n  const [focused, setFocused] = useState<boolean>(false);\n\n  const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  const hasCounter = maxCharQuantity != null && !hideCounter;\n\n  // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n  // Dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages],\n  );\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      String(value),\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationTypes.none,\n      validation,\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages),\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    inputRef,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    value,\n  ]);\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   */\n  const limitValue = (currentValue: string) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    const isOverflow =\n      maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;\n\n    return !isOverflow\n      ? currentValue\n      : currentValue.substring(0, maxCharQuantity);\n  };\n\n  /**\n   * Validates the text area updating the state and modifying the warning text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event as any, String(value), inputValidity);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   */\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (\n    event,\n    currentValue,\n  ) => {\n    isDirty.current = true;\n\n    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n    // Set the input value (only when value is uncontrolled)\n    setValue(limitedValue);\n\n    onChange?.(event as any, limitedValue);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event as any, String(value));\n  };\n\n  const isScrolledDown = useCallback(() => {\n    const el = inputRef.current;\n    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n  }, [inputRef]);\n\n  const scrollDown = useCallback(() => {\n    const el = inputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [inputRef]);\n\n  const addScrollListener = useCallback(() => {\n    const scrollHandler = {\n      handleEvent: () => {\n        setAutoScrolling(isScrolledDown());\n      },\n    };\n    inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n  }, [inputRef, isScrolledDown]);\n\n  useEffect(() => {\n    if (autoScroll) {\n      addScrollListener();\n    }\n  }, [autoScroll, addScrollListener]);\n\n  useEffect(() => {\n    if (autoScrolling) {\n      scrollDown();\n    }\n  }, [valueProp, autoScrolling, scrollDown]);\n\n  // Run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\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 any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationTypes.none,\n          minCharQuantity,\n          // If blockMax is true maxCharQuantity will never produce an error\n          // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n          maxCharQuantity != null && (blockMax !== true || value != null)\n            ? maxCharQuantity\n            : null,\n          validation,\n          inputProps,\n        )));\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\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(\n        classes.root,\n        {\n          [classes.resizable]: resizable,\n          [classes.disabled]: disabled,\n          [classes.invalid]: isStateInvalid,\n        },\n        className,\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              showGutter\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              className={classes.description}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={String(value).length}\n          maxCharQuantity={maxCharQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvBaseInput\n        classes={{\n          root: classes.baseInput,\n          input: classes.input,\n          inputResizable: classes.inputResizable,\n        }}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        invalid={isStateInvalid}\n        resizable={resizable}\n        multiline\n        rows={rows}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : (description && setId(elementId, \"description\")) || undefined,\n          \"aria-controls\": maxCharQuantity\n            ? setId(elementId, \"charCounter\")\n            : undefined,\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        {...others}\n      />\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvTextArea"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n  validationStates,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport type { HvValidationMessages } from \"../Input\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TextArea.styles\";\n\nexport { staticClasses as textAreaClasses };\n\nexport type HvTextAreaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTextAreaProps\n  extends Omit<\n    HvBaseInputProps,\n    \"onChange\" | \"onBlur\" | \"rows\" | \"classes\" | \"onFocus\" | \"placeholder\"\n  > {\n  /** The placeholder value of the text area. */\n  placeholder?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\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 `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel?: string;\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages?: HvValidationMessages;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxCharQuantity?: number;\n  /**\n   * The minimum allowed length of the characters, if this value is null no check\n   * will be perform.\n   */\n  minCharQuantity?: number;\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus?: boolean;\n  /**\n   * The number of rows of the text area\n   */\n  rows?: number;\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable?: boolean;\n  /**\n   * Auto-scroll: automatically scroll to the end on value changes.\n   * Will stop if the user scrolls up and resume if scrolled to the bottom.\n   */\n  autoScroll?: boolean;\n  /**\n   * If true it isn't possible to pass the `maxCharQuantity`\n   */\n  blockMax?: boolean;\n  /**\n   * If `true` the character counter isn't shown even if maxCharQuantity is set.\n   */\n  hideCounter?: boolean;\n  /**\n   * Props passed to the char count.\n   */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /**\n   * Called back when the value is changed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /**\n   * Called back when the value is changed.\n   */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n    validationState: HvInputValidity,\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvTextAreaClasses;\n}\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nexport const HvTextArea = forwardRef<\n  React.ComponentRef<\"textarea\">,\n  HvTextAreaProps\n>(function HvTextArea(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    name,\n    label,\n    description,\n    placeholder,\n    status,\n    statusMessage,\n    validationMessages,\n    maxCharQuantity,\n    minCharQuantity,\n    value: valueProp,\n    inputRef: inputRefProp,\n    rows = 1,\n    defaultValue = \"\",\n    middleCountLabel = \"/\",\n    countCharProps = {},\n    inputProps = {},\n    required,\n    readOnly,\n    disabled,\n    autoFocus,\n    resizable,\n    autoScroll,\n    hideCounter,\n    blockMax,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    validation,\n    onChange,\n    onBlur,\n    onFocus,\n    ...others\n  } = useDefaultProps(\"HvTextArea\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef<boolean>(false);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const forkedRef = useForkRef(ref, inputRefProp, inputRef);\n\n  const [focused, setFocused] = useState<boolean>(false);\n\n  const [autoScrolling, setAutoScrolling] = useState(autoScroll);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  const hasLabel = label != null;\n\n  const hasDescription = description != null;\n\n  const hasCounter = maxCharQuantity != null && !hideCounter;\n\n  // ValidationMessages reference tends to change, as users will not memorize/useState for it;\n  // Dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages],\n  );\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationTypes.none,\n      validation,\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages),\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    inputRef,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n  ]);\n\n  /**\n   * Limit the string to the maxCharQuantity length.\n   */\n  const limitValue = (currentValue: string) => {\n    if (currentValue === undefined || !blockMax) return currentValue;\n    const isOverflow =\n      maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;\n\n    return !isOverflow\n      ? currentValue\n      : currentValue.substring(0, maxCharQuantity);\n  };\n\n  /**\n   * Validates the text area updating the state and modifying the warning text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event as any, String(value), inputValidity);\n  };\n\n  /**\n   * Updates the length of the string while is being inputted, also executes the user onChange\n   * allowing the customization of the input if required.\n   */\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (\n    event,\n    currentValue,\n  ) => {\n    isDirty.current = true;\n\n    const limitedValue = blockMax ? limitValue(currentValue) : currentValue;\n\n    // Set the input value (only when value is uncontrolled)\n    setValue(limitedValue);\n\n    onChange?.(event as any, limitedValue);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // Reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event as any, String(value));\n  };\n\n  const isScrolledDown = useCallback(() => {\n    const el = inputRef.current;\n    return el == null || el.offsetHeight + el.scrollTop >= el.scrollHeight;\n  }, [inputRef]);\n\n  const scrollDown = useCallback(() => {\n    const el = inputRef.current;\n    if (el != null) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [inputRef]);\n\n  const addScrollListener = useCallback(() => {\n    const scrollHandler = {\n      handleEvent: () => {\n        setAutoScrolling(isScrolledDown());\n      },\n    };\n    inputRef.current?.addEventListener(\"scroll\", scrollHandler);\n  }, [inputRef, isScrolledDown]);\n\n  useEffect(() => {\n    if (autoScroll) {\n      addScrollListener();\n    }\n  }, [autoScroll, addScrollListener]);\n\n  useEffect(() => {\n    if (autoScrolling) {\n      scrollDown();\n    }\n  }, [valueProp, autoScrolling, scrollDown]);\n\n  // Run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\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 any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationTypes.none,\n          minCharQuantity,\n          // If blockMax is true maxCharQuantity will never produce an error\n          // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity\n          maxCharQuantity != null && (blockMax !== true || value != null)\n            ? maxCharQuantity\n            : null,\n          validation,\n          inputProps,\n        )));\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\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(\n        classes.root,\n        {\n          [classes.resizable]: resizable,\n          [classes.disabled]: disabled,\n          [classes.invalid]: isStateInvalid,\n        },\n        className,\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              showGutter\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              className={classes.description}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={String(value).length}\n          maxCharQuantity={maxCharQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvBaseInput\n        classes={{\n          root: classes.baseInput,\n          input: classes.input,\n          inputResizable: classes.inputResizable,\n        }}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        invalid={isStateInvalid}\n        resizable={resizable}\n        multiline\n        rows={rows}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : (description && setId(elementId, \"description\")) || undefined,\n          \"aria-controls\": maxCharQuantity\n            ? setId(elementId, \"charCounter\")\n            : undefined,\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        {...others}\n      />\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvTextArea"],"mappings":"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"}

package/dist/esm/TimePicker/TimePicker.js

@@ -76,6 +76,7 @@ const HvTimePicker = 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/esm/TimePicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  useTimeFieldState,\n  type TimeFieldStateOptions,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { DEFAULT_LOCALE } from \"../Calendar/utils\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to visually show the seconds control */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  function HvTimePicker(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required,\n      disabled,\n      readOnly,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = DEFAULT_LOCALE,\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: showSeconds === false ? \"minute\" : \"second\",\n      hourCycle: timeFormat === \"12\" ? 12 : 24,\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef,\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n    const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\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 isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                showGutter\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["Time","HvTimePicker","TimeIcon"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  useTimeFieldState,\n  type TimeFieldStateOptions,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { DEFAULT_LOCALE } from \"../Calendar/utils\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to visually show the seconds control */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  function HvTimePicker(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required,\n      disabled,\n      readOnly,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = DEFAULT_LOCALE,\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: showSeconds === false ? \"minute\" : \"second\",\n      hourCycle: timeFormat === \"12\" ? 12 : 24,\n      onChange: (value) => {\n        if (!value) return;\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef,\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n    const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\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 isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                showGutter\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["Time","HvTimePicker","TimeIcon"],"mappings":"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"}

package/dist/esm/TreeView/internals/TreeViewProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { useContext, createContext } from "react";
 import { DescendantProvider } from "./DescendantProvider.js";
 const DEFAULT_TREE_VIEW_CONTEXT_VALUE = {
   instance: null,

package/dist/esm/TreeView/internals/hooks/plugins/useTreeViewKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useTheme } from "@mui/material/styles";
 import { useEventCallback } from "@mui/material/utils";
-import { populateInstance, getFirstNode, getLastNode, getPreviousNode, getNextNode } from "../utils.js";
+import { populateInstance, getLastNode, getFirstNode, getPreviousNode, getNextNode } from "../utils.js";
 function isPrintableCharacter(string) {
   return string && string.length === 1 && string.match(/\S/);
 }

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps\n  extends Omit<HvListContainerProps, \"classes\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** The selected item id. */\n  selected?: string;\n  /** Triggered when the item is clicked. */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /** Triggered when the navigate to child button is clicked. */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    className,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvListContainer\n      interactive\n      className={cx(classes.listContainer, className)}\n      {...others}\n    >\n      {data?.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.root,\n            selected: classes.listItemSelected,\n            focus: classes.listItemFocus,\n            disabled: classes.listItemDisabled,\n          }}\n          onClick={(event) => {\n            onNavigateToTarget?.(event, item);\n          }}\n          aria-label={item.label}\n          aria-current={\n            selected === item.id ? (item.href ? \"page\" : true) : undefined\n          }\n          selected={selected === item.id}\n          startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  onNavigateToChild?.(event, item);\n                }}\n                className={classes.forwardButton}\n                aria-label={forwardButtonAriaLabel}\n              >\n                <DropRightXS color=\"currentcolor\" />\n              </HvButton>\n            ) : undefined\n          }\n        >\n          <HvOverflowTooltip data={item.label} />\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,IACzB,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,UAAU,QAAQ;AAAA,YAClB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,iCAAqB,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,cAAY,KAAK;AAAA,UACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,UAEvD,UAAU,aAAa,KAAK;AAAA,UAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,MAAK,IAAS;AAAA,UACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,SAAS,CAAC,UAAU;AAClB,oCAAoB,OAAO,IAAI;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAY;AAAA,cAEZ,UAAA,oBAAC,aAAY,EAAA,OAAM,eAAe,CAAA;AAAA,YAAA;AAAA,UAElC,IAAA;AAAA,UAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,MAAO,CAAA;AAAA,QAAA;AAAA,QA/BhC,KAAK;AAAA,MAiCb,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps\n  extends Omit<HvListContainerProps, \"classes\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** The selected item id. */\n  selected?: string;\n  /** Triggered when the item is clicked. */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /** Triggered when the navigate to child button is clicked. */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    className,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvListContainer\n      interactive\n      className={cx(classes.listContainer, className)}\n      {...others}\n    >\n      {data?.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.root,\n            selected: classes.listItemSelected,\n            focus: classes.listItemFocus,\n            disabled: classes.listItemDisabled,\n          }}\n          onClick={(event) => {\n            onNavigateToTarget?.(event, item);\n          }}\n          aria-label={item.label}\n          aria-current={\n            selected === item.id ? (item.href ? \"page\" : true) : undefined\n          }\n          selected={selected === item.id}\n          startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  onNavigateToChild?.(event, item);\n                }}\n                className={classes.forwardButton}\n                aria-label={forwardButtonAriaLabel}\n              >\n                <DropRightXS color=\"currentcolor\" />\n              </HvButton>\n            ) : undefined\n          }\n        >\n          <HvOverflowTooltip data={item.label} />\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,IACzB,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,UAAU,QAAQ;AAAA,YAClB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,iCAAqB,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,cAAY,KAAK;AAAA,UACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,UAEvD,UAAU,aAAa,KAAK;AAAA,UAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,KAAK,CAAA,IAAS;AAAA,UACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,SAAS,CAAC,UAAU;AAClB,oCAAoB,OAAO,IAAI;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAY;AAAA,cAEZ,UAAA,oBAAC,aAAY,EAAA,OAAM,eAAe,CAAA;AAAA,YAAA;AAAA,UAAA,IAElC;AAAA,UAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,MAAO,CAAA;AAAA,QAAA;AAAA,QA/BhC,KAAK;AAAA,MAiCb,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/hooks/useFocus.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { getDocument } from "../utils/document.js";
+const getActiveEl = () => 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 useMemo(() => makeFocusUtils(containerRef), [containerRef]);
+}
+export {
+  useFocus
+};

package/dist/esm/hooks/useFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.js","sources":["../../../src/hooks/useFocus.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getDocument } from \"../utils/document\";\n\n/** server-side safe `document.activeElement` wrapper */\nconst getActiveEl = () => getDocument()?.activeElement || null;\n\nfunction makeFocusUtils(containerRef: React.RefObject<HTMLElement>) {\n  function focus(el?: Element | null, checkFocus = true) {\n    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {\n      (el as HTMLElement)?.focus();\n    }\n  }\n\n  return {\n    focusPrevious() {\n      focus(getActiveEl()?.previousElementSibling);\n    },\n    focusNext() {\n      focus(getActiveEl()?.nextElementSibling);\n    },\n    focusFirst() {\n      focus(getActiveEl()?.parentElement?.firstElementChild);\n    },\n    focusLast() {\n      focus(getActiveEl()?.parentElement?.lastElementChild);\n    },\n    focusChild(index: number) {\n      focus(containerRef.current?.children[index], false);\n    },\n    focusSibling(index: number) {\n      focus(getActiveEl()?.parentElement?.children[index]);\n    },\n  };\n}\n\nexport function useFocus({\n  containerRef,\n}: {\n  containerRef: React.RefObject<HTMLElement>;\n}) {\n  return useMemo(() => makeFocusUtils(containerRef), [containerRef]);\n}\n"],"names":[],"mappings":";;AAKA,MAAM,cAAc,MAAM,eAAe,iBAAiB;AAE1D,SAAS,eAAe,cAA4C;AACzD,WAAA,MAAM,IAAqB,aAAa,MAAM;AACrD,QAAI,CAAC,cAAc,aAAa,SAAS,SAAS,YAAA,CAAa,GAAG;AAC/D,UAAoB,MAAM;AAAA,IAAA;AAAA,EAC7B;AAGK,SAAA;AAAA,IACL,gBAAgB;AACR,YAAA,eAAe,sBAAsB;AAAA,IAC7C;AAAA,IACA,YAAY;AACJ,YAAA,eAAe,kBAAkB;AAAA,IACzC;AAAA,IACA,aAAa;AACL,YAAA,YAAA,GAAe,eAAe,iBAAiB;AAAA,IACvD;AAAA,IACA,YAAY;AACJ,YAAA,YAAA,GAAe,eAAe,gBAAgB;AAAA,IACtD;AAAA,IACA,WAAW,OAAe;AACxB,YAAM,aAAa,SAAS,SAAS,KAAK,GAAG,KAAK;AAAA,IACpD;AAAA,IACA,aAAa,OAAe;AAC1B,YAAM,YAAY,GAAG,eAAe,SAAS,KAAK,CAAC;AAAA,IAAA;AAAA,EAEvD;AACF;AAEO,SAAS,SAAS;AAAA,EACvB;AACF,GAEG;AACD,SAAO,QAAQ,MAAM,eAAe,YAAY,GAAG,CAAC,YAAY,CAAC;AACnE;"}

package/dist/esm/hooks/useScrollTo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.js","sources":["../../../src/hooks/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { HvScrollToOption } from \"../types/scroll\";\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"../utils/scroll\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks = false,\n  offset = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number,\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\",\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void,\n  ) => void,\n  HvScrollToOptionWithLink[],\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis) | null>(\n    typeof window !== \"undefined\" ? window : null,\n  );\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      scrollEle.current =\n        (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n      lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n    }\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset,\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange],\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (navigationMode !== \"none\") {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const baseUrl =\n    relativeLinks || typeof window === \"undefined\" || window == null\n      ? \"\"\n      : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl],\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void,\n    ) => {\n      const option = elements.find((o) => o.value === id);\n\n      if (option) {\n        const ele = document.getElementById(id);\n        if (ele) {\n          scrollElement(\n            ele,\n            scrollEle.current,\n            option.offset || offset,\n            direction,\n          );\n        }\n\n        if (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\n        }\n\n        setSelectedIndex(index);\n        wrappedOnChange?.(index);\n\n        // Safari scrolls immediately (no smooth scroll support),\n        // so this ref value must be updated asap\n        selectedIndexRef.current = index;\n      }\n    },\n    [elements, navigationMode, direction, offset],\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useScrollTo.js","sources":["../../../src/hooks/useScrollTo.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { HvScrollToOption } from \"../types/scroll\";\nimport {\n  findFirstVisibleElement,\n  getScrollTop,\n  isScrolledToTheBottom,\n  scrollElement,\n  verticalScrollOffset,\n} from \"../utils/scroll\";\n\ninterface HvScrollToOptionWithLink extends HvScrollToOption {\n  href: string;\n}\n\nexport const useScrollTo = (\n  selectedIndexProp = 0,\n  scrollElementId: string | undefined = undefined,\n  navigationMode: \"push\" | \"replace\" | \"none\" = \"push\",\n  relativeLinks = false,\n  offset = 0,\n  options: HvScrollToOption[] = [],\n  onChange:\n    | ((\n        event:\n          | Event\n          | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n          | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n        index: number,\n      ) => void)\n    | undefined = undefined,\n  direction: \"column\" | \"row\" = \"column\",\n): [\n  number,\n  (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    id: string,\n    index: number,\n    wrappedOnChange?: (index: number) => void,\n  ) => void,\n  HvScrollToOptionWithLink[],\n] => {\n  const RETRY_MAX: number = 5;\n  const [selectedIndex, setSelectedIndex] = useState<number>(selectedIndexProp);\n\n  const scrollEle = useRef<HTMLElement | (Window & typeof globalThis) | null>(\n    typeof window !== \"undefined\" ? window : null,\n  );\n  const requestedAnimationFrame = useRef(0);\n  const lastContainerScrollTop = useRef<number>(0);\n\n  // Ref to use a often-changing value in useCallback, as recommended in\n  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n  const selectedIndexRef = useRef(selectedIndex);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      scrollEle.current =\n        (scrollElementId && document.getElementById(scrollElementId)) || window;\n\n      lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);\n    }\n  }, [scrollElementId]);\n\n  const checkScroll = useCallback(\n    (\n      event:\n        | Event\n        | React.MouseEvent<HTMLDivElement>\n        | React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (\n        requestedAnimationFrame.current === 0 &&\n        window?.requestAnimationFrame\n      ) {\n        requestedAnimationFrame.current = window.requestAnimationFrame(() => {\n          requestedAnimationFrame.current = 0;\n\n          const firstVisibleElementIndex = findFirstVisibleElement(\n            scrollEle.current,\n            options,\n            offset,\n          );\n\n          let newSelectedIndex = firstVisibleElementIndex;\n\n          // select the first element when all elements are bellow the container's top\n          if (firstVisibleElementIndex < 0) {\n            newSelectedIndex = 0;\n          }\n\n          // if the user has reached the bottom of the container, select the first nav item still visible\n          // (usually this selects the last nav item, when it can't reach the top the container)\n          // in theory only needed when scrolling down, but no... because of the Safari bouncing behaviour\n          if (\n            newSelectedIndex < options.length - 1 &&\n            isScrolledToTheBottom(scrollEle.current)\n          ) {\n            newSelectedIndex += 1;\n          }\n\n          const containerScrollTop = getScrollTop(scrollEle.current);\n          const isScrollingDown =\n            containerScrollTop > lastContainerScrollTop.current;\n          lastContainerScrollTop.current = containerScrollTop;\n\n          // only update the selected item if the scroll direction is moving away from it\n          if (isScrollingDown) {\n            if (newSelectedIndex < selectedIndexRef.current) {\n              newSelectedIndex = selectedIndexRef.current;\n            }\n          } else if (newSelectedIndex > selectedIndexRef.current) {\n            newSelectedIndex = selectedIndexRef.current;\n          }\n\n          setSelectedIndex(newSelectedIndex);\n          onChange?.(event, newSelectedIndex);\n        });\n      }\n    },\n    [offset, options, onChange],\n  );\n\n  // Registers and unregisters the scroll listener\n  useEffect(() => {\n    if (scrollEle.current) {\n      scrollEle.current.addEventListener(\"scroll\", checkScroll, false);\n    }\n\n    return () => {\n      if (scrollEle.current) {\n        scrollEle.current.removeEventListener(\"scroll\", checkScroll);\n      }\n\n      if (requestedAnimationFrame.current !== 0) {\n        window.cancelAnimationFrame(requestedAnimationFrame.current);\n        requestedAnimationFrame.current = 0;\n      }\n    };\n  }, [checkScroll]);\n\n  // Waits for the elements to be rendered and scrolls to the one referenced in the URL hash, if any\n  useEffect(() => {\n    let checkRenderedInterval: any;\n\n    if (navigationMode !== \"none\") {\n      const hashValue = document.location.hash.split(\"#\")[1] || \"\";\n\n      const option = options.find((o) => o.value === hashValue);\n\n      if (option) {\n        let retry = 0;\n        checkRenderedInterval = setInterval(() => {\n          const ele = document.getElementById(option.value);\n\n          if (ele) {\n            scrollElement(ele, scrollEle.current, option.offset || offset);\n            clearInterval(checkRenderedInterval);\n          } else {\n            retry += 1;\n            if (retry === RETRY_MAX) {\n              clearInterval(checkRenderedInterval);\n            }\n          }\n        }, 1000);\n      }\n    }\n\n    return () => {\n      clearInterval(checkRenderedInterval);\n    };\n\n    // We really want to run this just in the first load\n    // in fact this doesn't even belong here, the logic should be external\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const baseUrl =\n    relativeLinks || typeof window === \"undefined\" || window == null\n      ? \"\"\n      : window.location.href.split(\"#\")[0];\n\n  const elements = useMemo(\n    () =>\n      options.map((o) => ({\n        ...o,\n        href: `${baseUrl}#${o.value}`,\n      })),\n    [options, baseUrl],\n  );\n\n  const setScrollTo = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n        | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n      id: string,\n      index: number,\n      wrappedOnChange?: (index: number) => void,\n    ) => {\n      const option = elements.find((o) => o.value === id);\n\n      if (option) {\n        const ele = document.getElementById(id);\n        if (ele) {\n          scrollElement(\n            ele,\n            scrollEle.current,\n            option.offset || offset,\n            direction,\n          );\n        }\n\n        if (navigationMode === \"push\") {\n          window.history.pushState({}, \"\", option.href);\n        } else if (navigationMode === \"replace\") {\n          window.history.replaceState({}, \"\", option.href);\n        }\n\n        setSelectedIndex(index);\n        wrappedOnChange?.(index);\n\n        // Safari scrolls immediately (no smooth scroll support),\n        // so this ref value must be updated asap\n        selectedIndexRef.current = index;\n      }\n    },\n    [elements, navigationMode, direction, offset],\n  );\n\n  return [selectedIndex, setScrollTo, elements];\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/utils/document.js.map

@@ -1 +1 @@
-{"version":3,"file":"document.js","sources":["../../../src/utils/document.ts"],"sourcesContent":["export function getDocument() {\n  return typeof window !== \"undefined\" ? document : undefined;\n}\n\n/** Wrapper around `document.getElementById` */\nexport function getElementById(elementId?: string) {\n  return (elementId && getDocument()?.getElementById(elementId)) || undefined;\n}\n\n/** Get a container element by id, falling back to document-body */\nexport function getContainerElement(elementId?: string) {\n  return getElementById(elementId) || getDocument()?.body;\n}\n"],"names":[],"mappings":"AAAO,SAAS,cAAc;AACrB,SAAA,OAAO,WAAW,cAAc,WAAW;AACpD;AAGO,SAAS,eAAe,WAAoB;AACjD,SAAQ,aAAa,YAAe,GAAA,eAAe,SAAS,KAAM;AACpE;AAGO,SAAS,oBAAoB,WAAoB;AACtD,SAAO,eAAe,SAAS,KAAK,YAAe,GAAA;AACrD;"}
+{"version":3,"file":"document.js","sources":["../../../src/utils/document.ts"],"sourcesContent":["export function getDocument() {\n  return typeof window !== \"undefined\" ? document : undefined;\n}\n\n/** Wrapper around `document.getElementById` */\nexport function getElementById(elementId?: string) {\n  return (elementId && getDocument()?.getElementById(elementId)) || undefined;\n}\n\n/** Get a container element by id, falling back to document-body */\nexport function getContainerElement(elementId?: string) {\n  return getElementById(elementId) || getDocument()?.body;\n}\n"],"names":[],"mappings":"AAAO,SAAS,cAAc;AACrB,SAAA,OAAO,WAAW,cAAc,WAAW;AACpD;AAGO,SAAS,eAAe,WAAoB;AACjD,SAAQ,aAAa,YAAA,GAAe,eAAe,SAAS,KAAM;AACpE;AAGO,SAAS,oBAAoB,WAAoB;AACtD,SAAO,eAAe,SAAS,KAAK,YAAe,GAAA;AACrD;"}

package/dist/esm/utils/focusUtils.js

@@ -1,8 +1,4 @@
 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)"
 };
 export {