@hitachivantara/uikit-react-core 5.58.1 → 5.58.3

package/dist/cjs/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useTheme","useClasses","useControlled","jsx","CloseXS","getColor","CheckboxCheck","Checkbox","Chip"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useTheme","useClasses","useControlled","jsx","CloseXS","getColor","CheckboxCheck","Checkbox","Chip"],"mappings":"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"}

package/dist/cjs/Tag/Tag.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.cjs","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    color: theme.colors.base_dark,\n\n    [`& .${chipClasses.avatar}`]: {\n      width: 12,\n      height: 12,\n      marginLeft: 2,\n      marginRight: 0,\n    },\n  },\n\n  chipRoot: {\n    [`&.${chipClasses.root}`]: {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n      \"&:focus-visible\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n      },\n    },\n\n    \"&$disabled\": {\n      opacity: 1,\n      backgroundColor: theme.colors.atmo3,\n      \"& $label\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n\n    [`& .${chipClasses.label}`]: {\n      paddingLeft: 4,\n      paddingRight: 4,\n      ...(theme.typography.caption2 as CSSProperties),\n      color: \"currentcolor\",\n    },\n\n    [`& .${chipClasses.deleteIcon}`]: {\n      margin: 0,\n      width: 16,\n      height: 16,\n      padding: 0,\n      color: \"currentColor\",\n      \"& svg .color0\": {\n        fill: \"currentcolor\",\n      },\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        color: \"unset\",\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  disabled: {},\n\n  clickable: {\n    cursor: \"pointer\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n\n  categorical: {},\n\n  label: {},\n\n  deleteIcon: {},\n\n  // TODO: redundant - use deleteIcon. remove in v6\n  button: {},\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  focusVisible: {},\n  disabledDeleteIcon: {},\n  categoricalFocus: {},\n  categoricalDisabled: {},\n});\n"],"names":["createClasses","theme","chipClasses","outlineStyles"],"mappings":";;;;;;AAUO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAOC,YAAAA,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAMC,iBAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAKA,iBAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAYD,YAAAA,MAAM,WAAW;AAAA,MAC7B,mBAAmB;AAAA,QACjB,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,CAAC,MAAMC,iBAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAID,YAAAA,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAMC,iBAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAGE,WAAA;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGA,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEA,aAAa,CAAC;AAAA,EAEd,OAAO,CAAC;AAAA,EAER,YAAY,CAAC;AAAA;AAAA,EAGb,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,CAAC;AACxB,CAAC;;;"}
+{"version":3,"file":"Tag.styles.cjs","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    color: theme.colors.base_dark,\n\n    [`& .${chipClasses.avatar}`]: {\n      width: 12,\n      height: 12,\n      marginLeft: 2,\n      marginRight: 0,\n    },\n  },\n\n  chipRoot: {\n    [`&.${chipClasses.root}`]: {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n      \"&:focus-visible\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n      },\n    },\n\n    \"&$disabled\": {\n      opacity: 1,\n      backgroundColor: theme.colors.atmo3,\n      \"& $label\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n\n    [`& .${chipClasses.label}`]: {\n      paddingLeft: 4,\n      paddingRight: 4,\n      ...(theme.typography.caption2 as React.CSSProperties),\n      color: \"currentcolor\",\n    },\n\n    [`& .${chipClasses.deleteIcon}`]: {\n      margin: 0,\n      width: 16,\n      height: 16,\n      padding: 0,\n      color: \"currentColor\",\n      \"& svg .color0\": {\n        fill: \"currentcolor\",\n      },\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        color: \"unset\",\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  disabled: {},\n\n  clickable: {\n    cursor: \"pointer\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n\n  categorical: {},\n\n  label: {},\n\n  deleteIcon: {},\n\n  // TODO: redundant - use deleteIcon. remove in v6\n  button: {},\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  focusVisible: {},\n  disabledDeleteIcon: {},\n  categoricalFocus: {},\n  categoricalDisabled: {},\n});\n"],"names":["createClasses","theme","chipClasses","outlineStyles"],"mappings":";;;;;;AAQO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAOC,YAAAA,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAMC,iBAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAKA,iBAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAYD,YAAAA,MAAM,WAAW;AAAA,MAC7B,mBAAmB;AAAA,QACjB,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,CAAC,MAAMC,iBAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAID,YAAAA,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAMC,iBAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAGE,WAAA;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGA,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEA,aAAa,CAAC;AAAA,EAEd,OAAO,CAAC;AAAA,EAER,YAAY,CAAC;AAAA;AAAA,EAGb,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,CAAC;AACxB,CAAC;;;"}

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -66,7 +66,7 @@ const HvTagsInput = React.forwardRef(
       ...others
     } = useDefaultProps.useDefaultProps("HvTagsInput", props);
     const { classes, cx, css } = TagsInput_styles.useClasses(classesProp);
-    const elementId = useUniqueId.useUniqueId(id, "hvTagsInput");
+    const elementId = useUniqueId.useUniqueId(id);
     const hasLabel = textAreaLabel != null;
     const hasDescription = description != null;
     const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);

package/dist/cjs/TagsInput/TagsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.cjs","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { baseInputClasses } from \"../BaseInput\";\nimport { HvInput } from \"../Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLUListElement, HvTagsInputProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly = false,\n      disabled = false,\n      required = false,\n      label: textAreaLabel,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onAdd,\n      onDelete,\n      onBlur,\n      onFocus,\n      placeholder,\n      hideCounter = false,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      autoFocus = false,\n      resizable = true,\n      inputProps = {},\n      countCharProps = {},\n      multiline = false,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur = false,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose = false,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvTagsInput\");\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      validationStates.standBy\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\"\n    );\n\n    const [tagInput, setTagInput] = useState(\"\");\n    const [tagCursorPos, setTagCursorPos] = useState(value.length);\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<any>();\n    const containerRef = useRef<any>();\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>();\n    const materialInputRef = useRef<any>(null);\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\n    const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n    const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n    // suggestions related state\n    const [suggestionValues, setSuggestionValues] = useState<\n      HvTagSuggestion[] | null\n    >(null);\n\n    const isStateInvalid = useMemo(() => {\n      return hasCounter && value.length > maxTagsQuantity;\n    }, [hasCounter, maxTagsQuantity, value.length]);\n\n    const canShowSuggestions = suggestionListCallback != null;\n    const hasSuggestions = !!suggestionValues;\n\n    const errorMessages = useMemo(\n      () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n      [validationMessages]\n    );\n\n    const performValidation = useCallback(\n      (currValue) => {\n        if (\n          maxTagsQuantity !== null &&\n          maxTagsQuantity !== undefined &&\n          currValue.length > maxTagsQuantity\n        ) {\n          setValidationState(validationStates.invalid);\n          setValidationMessage(errorMessages.maxCharError);\n          setStateValid(false);\n        } else {\n          setValidationState(validationStates.valid);\n          setValidationMessage(\"\");\n          setStateValid(true);\n        }\n      },\n      [\n        errorMessages.maxCharError,\n        maxTagsQuantity,\n        setValidationMessage,\n        setValidationState,\n      ]\n    );\n\n    /**\n     * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n     * Also executes the user provided onDelete and onChange events.\n     *\n     * @param {number}  tagPos - the position at which to remove the tag\n     * @param {Event}   event  - the event associated with the delete\n     * @param {boolean} end    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (tagPos, event, end) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ];\n        setValue(newTagsArr);\n        setTagCursorPos(\n          end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n        );\n        inputRef.current?.focus();\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos], tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n    );\n\n    /**\n     * Adds a Tag to the array of tags.\n     * Also executes the user provided onAdd and onDelete events.\n     *\n     * @param {Event}   event  - whatever event triggered adding a tag\n     * @param {string}  tag    - the string for the tag\n     */\n    const addTag = useCallback(\n      (event, tag) => {\n        event.preventDefault();\n        if (tag !== \"\") {\n          const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n          const newTagsArr = [...value, newTag];\n          setValue(newTagsArr);\n          performValidation(newTagsArr);\n          onAdd?.(event, newTag, newTagsArr.length - 1);\n          onChange?.(event, newTagsArr);\n        }\n      },\n      [onAdd, onChange, performValidation, setValue, value]\n    );\n\n    const canShowError =\n      (status !== undefined &&\n        status === \"invalid\" &&\n        statusMessage !== undefined) ||\n      !stateValid;\n\n    useEffect(() => {\n      if (!multiline) {\n        const element = containerRef?.current?.children[tagCursorPos];\n        // this setTimeout is a workaround for Firefox not properly dealing\n        // with setting the scrollLeft value.\n        setTimeout(() => {\n          const container = containerRef.current;\n          if (container == null) return;\n          container.scrollLeft = element\n            ? element.offsetLeft -\n              container.getBoundingClientRect().width / 2 +\n              element.getBoundingClientRect().width / 2\n            : 0;\n        }, 50);\n\n        element?.focus();\n      }\n    }, [multiline, tagCursorPos]);\n\n    useEffect(() => {\n      if (!skipReset.current) {\n        setTagInput(\"\");\n        setTagCursorPos(value.length);\n      }\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    /**\n     * Looks for the node that represent the input inside the material tree and focus it.\n     */\n    const focusInput = () => {\n      materialInputRef.current.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li) => {\n        // TODO Replace with ref\n        const listEl = document.getElementById(\n          setId(elementId, \"suggestions-list\") || \"\"\n        );\n        return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n      },\n      [elementId]\n    );\n\n    /**\n     * Clears the suggestion array.\n     */\n    const suggestionClearHandler = useCallback(() => {\n      if (isMounted.current) {\n        setSuggestionValues(null);\n      }\n    }, [isMounted]);\n\n    /**\n     * Fills of the suggestion array.\n     */\n    const suggestionHandler = useCallback(\n      (val) => {\n        const suggestionsArray = suggestionListCallback?.(val);\n        if (suggestionsArray?.[0]?.label) {\n          setSuggestionValues(suggestionsArray);\n        } else {\n          suggestionClearHandler();\n        }\n      },\n      [suggestionClearHandler, suggestionListCallback]\n    );\n\n    /**\n     * Executes the user callback adds the selection to the state and clears the suggestions.\n     */\n    const suggestionSelectedHandler = (event, item) => {\n      addTag(event, item.value || item.label);\n\n      // set the input value (only when value is uncontrolled)\n      setTagInput(item.value || item.label);\n\n      focusInput();\n      suggestionClearHandler();\n    };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (event) => {\n      if (isKey(event, \"Esc\")) {\n        suggestionClearHandler();\n        focusInput();\n      } else if (isKey(event, \"Tab\")) {\n        suggestionClearHandler();\n      }\n    };\n\n    /**\n     * Handler for the `onChange` event on the tag input\n     */\n    const onChangeHandler = useCallback(\n      (_, input) => {\n        setTagInput(input);\n\n        if (canShowSuggestions) {\n          // an edge case might be a controlled input whose onChange callback\n          // doesn't change the value (or sets another): the suggestionListCallback\n          // callback will still receive the original rejected value.\n          // a refactor is needed so the suggestionListCallback might be called only\n          // when the input is uncontrolled, providing a way to externally control\n          // the suggestion values.\n          suggestionHandler(input);\n        }\n      },\n      [canShowSuggestions, suggestionHandler]\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the form element\n     */\n    const onInputKeyDownHandler = useCallback(\n      (event) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n          addTag(event, tagInput);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn, tagInput]\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event) => {\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n              break;\n            case \"ArrowRight\":\n              setTagCursorPos(\n                tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n              );\n              break;\n            case \"Backspace\":\n              if (isTagSelected) {\n                deleteTag(tagCursorPos, event, false);\n              } else {\n                setTagCursorPos(value.length - 1);\n              }\n              break;\n            case \"Delete\":\n              if (isTagSelected) {\n                deleteTag(tagCursorPos, event, false);\n              }\n              break;\n            default:\n              break;\n          }\n        } else {\n          switch (event.code) {\n            case \"ArrowDown\":\n              getSuggestions(0)?.focus();\n              break;\n            case \"Enter\":\n              if (\n                canShowSuggestions &&\n                suggestionsLoose &&\n                (suggestionValidation?.(tagInput) || !suggestionValidation)\n              ) {\n                addTag(event, tagInput);\n\n                // set the input value (only when value is uncontrolled)\n                setTagInput(tagInput);\n\n                focusInput();\n                suggestionClearHandler();\n              }\n              break;\n            default:\n              break;\n          }\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        getSuggestions,\n        isTagSelected,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        tagCursorPos,\n        tagInput,\n        value.length,\n      ]\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event, i) => {\n        deleteTag(i, event, true);\n        setValidationState(validationStates.standBy);\n      },\n      [deleteTag, setValidationState]\n    );\n\n    /**\n     * Handler for the `onClick` event on the list container\n     */\n    const onContainerClickHandler = useCallback(() => {\n      inputRef.current?.focus();\n      clearTimeout(blurTimeout.current);\n      setTagCursorPos(value.length);\n    }, [value.length]);\n\n    const onBlurHandler = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt, tagInput);\n        }\n        onBlur?.(evt, tagInput);\n      }, 250);\n    };\n\n    const onFocusHandler = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, tagInput);\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={validationState}\n        required={required}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        className={cx(\n          classes.root,\n          { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n          className\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={textAreaLabel}\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={value.length}\n            maxCharQuantity={maxTagsQuantity}\n            {...countCharProps}\n          />\n        )}\n\n        <HvListContainer\n          className={cx(classes.tagsList, {\n            [classes.error]: canShowError,\n            [classes.resizable]: resizable && multiline,\n            [classes.invalid]: isStateInvalid,\n            [classes.singleLine]: !multiline,\n          })}\n          onKeyDown={onKeyDownHandler}\n          onClick={onContainerClickHandler}\n          ref={forkedContainerRef}\n        >\n          {value &&\n            value.map((t, i) => {\n              const tag =\n                typeof t === \"string\"\n                  ? {\n                      label: t,\n                      type: \"semantic\",\n                    }\n                  : t;\n              const { label, type, ...otherProps } = tag;\n              return (\n                <HvListItem\n                  key={`${tag.label}-${i}`}\n                  tabIndex={-1}\n                  className={cx({ [classes.singleLine]: !multiline })}\n                  classes={{\n                    gutters: classes.listItemGutters,\n                    root: classes.listItemRoot,\n                  }}\n                  id={setId(elementId, `tag-${i}`)}\n                >\n                  <HvTag\n                    label={label}\n                    className={cx({\n                      [classes.tagSelected]: i === tagCursorPos,\n                    })}\n                    classes={{\n                      chipRoot: classes.chipRoot,\n                    }}\n                    type={type}\n                    {...(!(readOnly || disabled || type === \"categorical\") && {\n                      onDelete: (event) => onDeleteTagHandler(event, i),\n                    })}\n                    deleteButtonProps={{\n                      tabIndex: -1,\n                    }}\n                    {...otherProps}\n                  />\n                </HvListItem>\n              );\n            })}\n          {!(disabled || readOnly) && (\n            <HvListItem\n              className={cx(\n                {\n                  [classes.singleLine]: !multiline,\n                  [classes.tagInputRootEmpty]: value.length === 0,\n                },\n                !!isTagSelected &&\n                  css({\n                    [`& .${baseInputClasses.inputRoot}`]: {\n                      backgroundColor: theme.colors.atmo1,\n                    },\n                  })\n              )}\n              classes={{\n                root: classes.tagInputContainerRoot,\n                gutters: classes.listItemGutters,\n              }}\n              id={setId(elementId, `tag-${value.length}`)}\n            >\n              <HvInput\n                value={tagInput}\n                disableClear\n                onChange={onChangeHandler}\n                onKeyDown={onInputKeyDownHandler}\n                placeholder={value.length === 0 ? placeholder : \"\"}\n                autoFocus={autoFocus}\n                className={cx({\n                  [classes.singleLine]: !multiline,\n                })}\n                classes={{\n                  root: classes.tagInputRoot,\n                  input: classes.input,\n                  inputBorderContainer: classes.tagInputBorderContainer,\n                  inputRootFocused: classes.tagInputRootFocused,\n                }}\n                disabled={disabled}\n                readOnly={readOnly || isTagSelected}\n                inputProps={{\n                  ref: materialInputRef,\n                  \"aria-label\": ariaLabel,\n                  \"aria-labelledby\": ariaLabelledBy,\n                  \"aria-describedby\":\n                    ariaDescribedBy != null\n                      ? ariaDescribedBy\n                      : (description && setId(elementId, \"description\")) ||\n                        undefined,\n\n                  ...inputProps,\n                }}\n                inputRef={inputRef}\n                {...others}\n              />\n            </HvListItem>\n          )}\n        </HvListContainer>\n        {canShowSuggestions && (\n          <>\n            {hasSuggestions && (\n              <div role=\"presentation\" className={classes.inputExtension} />\n            )}\n            <HvSuggestions\n              id={setId(elementId, \"suggestions\")}\n              classes={{\n                root: classes.suggestionsContainer,\n                list: classes.suggestionList,\n              }}\n              expanded={hasSuggestions}\n              anchorEl={containerRef?.current?.parentElement}\n              onClose={suggestionClearHandler}\n              onKeyDown={onSuggestionKeyDown}\n              onSuggestionSelected={suggestionSelectedHandler}\n              suggestionValues={suggestionValues}\n            />\n          </>\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useUniqueId","useControlled","validationStates","useState","useRef","useForkRef","useMemo","DEFAULT_ERROR_MESSAGES","useCallback","useEffect","useIsMounted","setId","isKey","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvCharCounter","HvListContainer","HvListItem","HvTag","baseInputClasses","theme","HvInput","Fragment","HvSuggestions","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"TagsInput.cjs","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { baseInputClasses } from \"../BaseInput\";\nimport { HvInput } from \"../Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLUListElement, HvTagsInputProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly = false,\n      disabled = false,\n      required = false,\n      label: textAreaLabel,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onAdd,\n      onDelete,\n      onBlur,\n      onFocus,\n      placeholder,\n      hideCounter = false,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      autoFocus = false,\n      resizable = true,\n      inputProps = {},\n      countCharProps = {},\n      multiline = false,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur = false,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose = false,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      validationStates.standBy\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\"\n    );\n\n    const [tagInput, setTagInput] = useState(\"\");\n    const [tagCursorPos, setTagCursorPos] = useState(value.length);\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<any>();\n    const containerRef = useRef<any>();\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>();\n    const materialInputRef = useRef<any>(null);\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\n    const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n    const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n    // suggestions related state\n    const [suggestionValues, setSuggestionValues] = useState<\n      HvTagSuggestion[] | null\n    >(null);\n\n    const isStateInvalid = useMemo(() => {\n      return hasCounter && value.length > maxTagsQuantity;\n    }, [hasCounter, maxTagsQuantity, value.length]);\n\n    const canShowSuggestions = suggestionListCallback != null;\n    const hasSuggestions = !!suggestionValues;\n\n    const errorMessages = useMemo(\n      () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n      [validationMessages]\n    );\n\n    const performValidation = useCallback(\n      (currValue) => {\n        if (\n          maxTagsQuantity !== null &&\n          maxTagsQuantity !== undefined &&\n          currValue.length > maxTagsQuantity\n        ) {\n          setValidationState(validationStates.invalid);\n          setValidationMessage(errorMessages.maxCharError);\n          setStateValid(false);\n        } else {\n          setValidationState(validationStates.valid);\n          setValidationMessage(\"\");\n          setStateValid(true);\n        }\n      },\n      [\n        errorMessages.maxCharError,\n        maxTagsQuantity,\n        setValidationMessage,\n        setValidationState,\n      ]\n    );\n\n    /**\n     * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n     * Also executes the user provided onDelete and onChange events.\n     *\n     * @param {number}  tagPos - the position at which to remove the tag\n     * @param {Event}   event  - the event associated with the delete\n     * @param {boolean} end    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (tagPos, event, end) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ];\n        setValue(newTagsArr);\n        setTagCursorPos(\n          end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n        );\n        inputRef.current?.focus();\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos], tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n    );\n\n    /**\n     * Adds a Tag to the array of tags.\n     * Also executes the user provided onAdd and onDelete events.\n     *\n     * @param {Event}   event  - whatever event triggered adding a tag\n     * @param {string}  tag    - the string for the tag\n     */\n    const addTag = useCallback(\n      (event, tag) => {\n        event.preventDefault();\n        if (tag !== \"\") {\n          const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n          const newTagsArr = [...value, newTag];\n          setValue(newTagsArr);\n          performValidation(newTagsArr);\n          onAdd?.(event, newTag, newTagsArr.length - 1);\n          onChange?.(event, newTagsArr);\n        }\n      },\n      [onAdd, onChange, performValidation, setValue, value]\n    );\n\n    const canShowError =\n      (status !== undefined &&\n        status === \"invalid\" &&\n        statusMessage !== undefined) ||\n      !stateValid;\n\n    useEffect(() => {\n      if (!multiline) {\n        const element = containerRef?.current?.children[tagCursorPos];\n        // this setTimeout is a workaround for Firefox not properly dealing\n        // with setting the scrollLeft value.\n        setTimeout(() => {\n          const container = containerRef.current;\n          if (container == null) return;\n          container.scrollLeft = element\n            ? element.offsetLeft -\n              container.getBoundingClientRect().width / 2 +\n              element.getBoundingClientRect().width / 2\n            : 0;\n        }, 50);\n\n        element?.focus();\n      }\n    }, [multiline, tagCursorPos]);\n\n    useEffect(() => {\n      if (!skipReset.current) {\n        setTagInput(\"\");\n        setTagCursorPos(value.length);\n      }\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    /**\n     * Looks for the node that represent the input inside the material tree and focus it.\n     */\n    const focusInput = () => {\n      materialInputRef.current.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li) => {\n        // TODO Replace with ref\n        const listEl = document.getElementById(\n          setId(elementId, \"suggestions-list\") || \"\"\n        );\n        return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n      },\n      [elementId]\n    );\n\n    /**\n     * Clears the suggestion array.\n     */\n    const suggestionClearHandler = useCallback(() => {\n      if (isMounted.current) {\n        setSuggestionValues(null);\n      }\n    }, [isMounted]);\n\n    /**\n     * Fills of the suggestion array.\n     */\n    const suggestionHandler = useCallback(\n      (val) => {\n        const suggestionsArray = suggestionListCallback?.(val);\n        if (suggestionsArray?.[0]?.label) {\n          setSuggestionValues(suggestionsArray);\n        } else {\n          suggestionClearHandler();\n        }\n      },\n      [suggestionClearHandler, suggestionListCallback]\n    );\n\n    /**\n     * Executes the user callback adds the selection to the state and clears the suggestions.\n     */\n    const suggestionSelectedHandler = (event, item) => {\n      addTag(event, item.value || item.label);\n\n      // set the input value (only when value is uncontrolled)\n      setTagInput(item.value || item.label);\n\n      focusInput();\n      suggestionClearHandler();\n    };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (event) => {\n      if (isKey(event, \"Esc\")) {\n        suggestionClearHandler();\n        focusInput();\n      } else if (isKey(event, \"Tab\")) {\n        suggestionClearHandler();\n      }\n    };\n\n    /**\n     * Handler for the `onChange` event on the tag input\n     */\n    const onChangeHandler = useCallback(\n      (_, input) => {\n        setTagInput(input);\n\n        if (canShowSuggestions) {\n          // an edge case might be a controlled input whose onChange callback\n          // doesn't change the value (or sets another): the suggestionListCallback\n          // callback will still receive the original rejected value.\n          // a refactor is needed so the suggestionListCallback might be called only\n          // when the input is uncontrolled, providing a way to externally control\n          // the suggestion values.\n          suggestionHandler(input);\n        }\n      },\n      [canShowSuggestions, suggestionHandler]\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the form element\n     */\n    const onInputKeyDownHandler = useCallback(\n      (event) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n          addTag(event, tagInput);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn, tagInput]\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event) => {\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n              break;\n            case \"ArrowRight\":\n              setTagCursorPos(\n                tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n              );\n              break;\n            case \"Backspace\":\n              if (isTagSelected) {\n                deleteTag(tagCursorPos, event, false);\n              } else {\n                setTagCursorPos(value.length - 1);\n              }\n              break;\n            case \"Delete\":\n              if (isTagSelected) {\n                deleteTag(tagCursorPos, event, false);\n              }\n              break;\n            default:\n              break;\n          }\n        } else {\n          switch (event.code) {\n            case \"ArrowDown\":\n              getSuggestions(0)?.focus();\n              break;\n            case \"Enter\":\n              if (\n                canShowSuggestions &&\n                suggestionsLoose &&\n                (suggestionValidation?.(tagInput) || !suggestionValidation)\n              ) {\n                addTag(event, tagInput);\n\n                // set the input value (only when value is uncontrolled)\n                setTagInput(tagInput);\n\n                focusInput();\n                suggestionClearHandler();\n              }\n              break;\n            default:\n              break;\n          }\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        getSuggestions,\n        isTagSelected,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        tagCursorPos,\n        tagInput,\n        value.length,\n      ]\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event, i) => {\n        deleteTag(i, event, true);\n        setValidationState(validationStates.standBy);\n      },\n      [deleteTag, setValidationState]\n    );\n\n    /**\n     * Handler for the `onClick` event on the list container\n     */\n    const onContainerClickHandler = useCallback(() => {\n      inputRef.current?.focus();\n      clearTimeout(blurTimeout.current);\n      setTagCursorPos(value.length);\n    }, [value.length]);\n\n    const onBlurHandler = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt, tagInput);\n        }\n        onBlur?.(evt, tagInput);\n      }, 250);\n    };\n\n    const onFocusHandler = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, tagInput);\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={validationState}\n        required={required}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        className={cx(\n          classes.root,\n          { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n          className\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={textAreaLabel}\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={value.length}\n            maxCharQuantity={maxTagsQuantity}\n            {...countCharProps}\n          />\n        )}\n\n        <HvListContainer\n          className={cx(classes.tagsList, {\n            [classes.error]: canShowError,\n            [classes.resizable]: resizable && multiline,\n            [classes.invalid]: isStateInvalid,\n            [classes.singleLine]: !multiline,\n          })}\n          onKeyDown={onKeyDownHandler}\n          onClick={onContainerClickHandler}\n          ref={forkedContainerRef}\n        >\n          {value &&\n            value.map((t, i) => {\n              const tag =\n                typeof t === \"string\"\n                  ? {\n                      label: t,\n                      type: \"semantic\",\n                    }\n                  : t;\n              const { label, type, ...otherProps } = tag;\n              return (\n                <HvListItem\n                  key={`${tag.label}-${i}`}\n                  tabIndex={-1}\n                  className={cx({ [classes.singleLine]: !multiline })}\n                  classes={{\n                    gutters: classes.listItemGutters,\n                    root: classes.listItemRoot,\n                  }}\n                  id={setId(elementId, `tag-${i}`)}\n                >\n                  <HvTag\n                    label={label}\n                    className={cx({\n                      [classes.tagSelected]: i === tagCursorPos,\n                    })}\n                    classes={{\n                      chipRoot: classes.chipRoot,\n                    }}\n                    type={type}\n                    {...(!(readOnly || disabled || type === \"categorical\") && {\n                      onDelete: (event) => onDeleteTagHandler(event, i),\n                    })}\n                    deleteButtonProps={{\n                      tabIndex: -1,\n                    }}\n                    {...otherProps}\n                  />\n                </HvListItem>\n              );\n            })}\n          {!(disabled || readOnly) && (\n            <HvListItem\n              className={cx(\n                {\n                  [classes.singleLine]: !multiline,\n                  [classes.tagInputRootEmpty]: value.length === 0,\n                },\n                !!isTagSelected &&\n                  css({\n                    [`& .${baseInputClasses.inputRoot}`]: {\n                      backgroundColor: theme.colors.atmo1,\n                    },\n                  })\n              )}\n              classes={{\n                root: classes.tagInputContainerRoot,\n                gutters: classes.listItemGutters,\n              }}\n              id={setId(elementId, `tag-${value.length}`)}\n            >\n              <HvInput\n                value={tagInput}\n                disableClear\n                onChange={onChangeHandler}\n                onKeyDown={onInputKeyDownHandler}\n                placeholder={value.length === 0 ? placeholder : \"\"}\n                autoFocus={autoFocus}\n                className={cx({\n                  [classes.singleLine]: !multiline,\n                })}\n                classes={{\n                  root: classes.tagInputRoot,\n                  input: classes.input,\n                  inputBorderContainer: classes.tagInputBorderContainer,\n                  inputRootFocused: classes.tagInputRootFocused,\n                }}\n                disabled={disabled}\n                readOnly={readOnly || isTagSelected}\n                inputProps={{\n                  ref: materialInputRef,\n                  \"aria-label\": ariaLabel,\n                  \"aria-labelledby\": ariaLabelledBy,\n                  \"aria-describedby\":\n                    ariaDescribedBy != null\n                      ? ariaDescribedBy\n                      : (description && setId(elementId, \"description\")) ||\n                        undefined,\n\n                  ...inputProps,\n                }}\n                inputRef={inputRef}\n                {...others}\n              />\n            </HvListItem>\n          )}\n        </HvListContainer>\n        {canShowSuggestions && (\n          <>\n            {hasSuggestions && (\n              <div role=\"presentation\" className={classes.inputExtension} />\n            )}\n            <HvSuggestions\n              id={setId(elementId, \"suggestions\")}\n              classes={{\n                root: classes.suggestionsContainer,\n                list: classes.suggestionList,\n              }}\n              expanded={hasSuggestions}\n              anchorEl={containerRef?.current?.parentElement}\n              onClose={suggestionClearHandler}\n              onKeyDown={onSuggestionKeyDown}\n              onSuggestionSelected={suggestionSelectedHandler}\n              suggestionValues={suggestionValues}\n            />\n          </>\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useUniqueId","useControlled","validationStates","useState","useRef","useForkRef","useMemo","DEFAULT_ERROR_MESSAGES","useCallback","useEffect","useIsMounted","setId","isKey","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvCharCounter","HvListContainer","HvListItem","HvTag","baseInputClasses","theme","HvInput","Fragment","HvSuggestions","HvWarningText"],"mappings":"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"}

package/dist/cjs/TextArea/TextArea.cjs

@@ -56,7 +56,7 @@ const HvTextArea = React.forwardRef((props, ref) => {
     ...others
   } = useDefaultProps.useDefaultProps("HvTextArea", props);
   const { classes, cx } = TextArea_styles.useClasses(classesProp);
-  const elementId = useUniqueId.useUniqueId(id, "hvtextarea");
+  const elementId = useUniqueId.useUniqueId(id);
   const isDirty = React.useRef(false);
   const inputRef = React.useRef(null);
   const forkedRef = utils.useForkRef(ref, inputRefProp, inputRef);

package/dist/cjs/TextArea/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"../Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"../types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"../BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\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<any, HvTextAreaProps>((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 = false,\n    readOnly = false,\n    disabled = false,\n    autoFocus = false,\n    resizable = false,\n    autoScroll = false,\n    hideCounter = false,\n    blockMax = false,\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, \"hvtextarea\");\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      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, 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, 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              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={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":["forwardRef","useDefaultProps","useClasses","useUniqueId","useRef","useForkRef","useState","useControlled","validationStates","isInvalid","useMemo","DEFAULT_ERROR_MESSAGES","useCallback","validateInput","validationTypes","computeValidationState","computeValidationMessage","useEffect","hasBuiltInValidations","setId","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvCharCounter","HvBaseInput","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../src/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport validationStates, {\n  isInvalid,\n} from \"../Forms/FormElement/validationStates\";\nimport { HvValidationMessages } from \"../types/forms\";\nimport {\n  computeValidationMessage,\n  computeValidationState,\n  DEFAULT_ERROR_MESSAGES,\n  hasBuiltInValidations,\n  HvInputValidity,\n  validateInput,\n  validationTypes,\n} from \"../BaseInput/validations\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\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<any, HvTextAreaProps>((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 = false,\n    readOnly = false,\n    disabled = false,\n    autoFocus = false,\n    resizable = false,\n    autoScroll = false,\n    hideCounter = false,\n    blockMax = false,\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      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, 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, 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              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={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":["forwardRef","useDefaultProps","useClasses","useUniqueId","useRef","useForkRef","useState","useControlled","validationStates","isInvalid","useMemo","DEFAULT_ERROR_MESSAGES","useCallback","validateInput","validationTypes","computeValidationState","computeValidationMessage","useEffect","hasBuiltInValidations","setId","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvCharCounter","HvBaseInput","HvWarningText"],"mappings":"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"}

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -66,7 +66,7 @@ const HvTimePicker = React.forwardRef(
       dropdownProps = {},
       ...others
     } = useDefaultProps.useDefaultProps("HvTimePicker", props);
-    const id = useUniqueId.useUniqueId(idProp, "hvtimepicker");
+    const id = useUniqueId.useUniqueId(idProp);
     const { classes, cx } = TimePicker_styles.useClasses(classesProp);
     const timeFieldRef = React.useRef(null);
     const { ref: refProp, ...otherDropdownProps } = dropdownProps;

package/dist/cjs/TimePicker/TimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\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\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\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 show the seconds when using the native time picker */\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   * 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\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  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\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 = \"en\",\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, \"hvtimepicker\");\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: \"second\",\n      hourCycle: getFormat(timeFormat),\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(status, \"standBy\");\n\n    const 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                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","forwardRef","useDefaultProps","useUniqueId","useClasses","useRef","useForkRef","useTimeFieldState","useTimeField","useState","useControlled","useMemo","setId","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvBaseDropdown","Placeholder","TimeIcon","Unit","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\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\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\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 show the seconds when using the native time picker */\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   * 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\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  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\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 = \"en\",\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: \"second\",\n      hourCycle: getFormat(timeFormat),\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(status, \"standBy\");\n\n    const 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                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","forwardRef","useDefaultProps","useUniqueId","useClasses","useRef","useForkRef","useTimeFieldState","useTimeField","useState","useControlled","useMemo","setId","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvBaseDropdown","Placeholder","TimeIcon","Unit","HvWarningText"],"mappings":"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"}

package/dist/cjs/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, ReactElement } from \"react\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport Fade from \"@mui/material/Fade\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["forwardRef","Fade","useDefaultProps","useTheme","useClasses","jsx","Tooltip","getElementById"],"mappings":";;;;;;;;;;;;;AAmEO,MAAM,YAAYA,MAAA,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsBC,cAAA;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAWC,SAAAA;AACnB,QAAM,EAAE,QAAA,IAAYC,eAAA,WAAW,WAAW;AAGxC,SAAAC,2BAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,QACX,WAAWC,SAAAA,eAAe,eAAe,MAAM;AAAA,MACjD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport Fade from \"@mui/material/Fade\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["forwardRef","Fade","useDefaultProps","useTheme","useClasses","jsx","Tooltip","getElementById"],"mappings":";;;;;;;;;;;;;AAmEO,MAAM,YAAYA,MAAA,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsBC,cAAA;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAWC,SAAAA;AACnB,QAAM,EAAE,QAAA,IAAYC,eAAA,WAAW,WAAW;AAGxC,SAAAC,2BAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,QACX,WAAWC,SAAAA,eAAe,eAAe,MAAM;AAAA,MACjD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;;"}

package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultContent.cjs","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, forwardRef } from \"react\";\n\nimport { useCss } from \"../../hooks/useCss\";\nimport { ExtractNames, createClasses } from \"../../utils/classes\";\n\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  }\n);\n"],"names":["createClasses","forwardRef","classes","useCss","useHvTreeItem","jsxs","jsx"],"mappings":";;;;;;;AAOO,MAAM,EAAE,WAAA,IAAeA,QAAA,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiBC,MAAA;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,SAAAC,SAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAOC,OAAAA;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACEC,cAAAA,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEEC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAWH,SAAQ,MAAM;AAAA,YACrC,CAACA,SAAQ,QAAQ,GAAG;AAAA,YACpB,CAACA,SAAQ,QAAQ,GAAG;AAAA,YACpB,CAACA,SAAQ,OAAO,GAAG;AAAA,YACnB,CAACA,SAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAAI,2BAAA,IAAC,OAAI,EAAA,WAAWJ,SAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5CI,2BAAA,IAAA,OAAA,EAAI,WAAWJ,SAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;;;"}
+{"version":3,"file":"DefaultContent.cjs","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useCss } from \"../../hooks/useCss\";\nimport { ExtractNames, createClasses } from \"../../utils/classes\";\n\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  }\n);\n"],"names":["createClasses","forwardRef","classes","useCss","useHvTreeItem","jsxs","jsx"],"mappings":";;;;;;;AAOO,MAAM,EAAE,WAAA,IAAeA,QAAA,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiBC,MAAA;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,SAAAC,SAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAOC,OAAAA;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACEC,cAAAA,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEEC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAWH,SAAQ,MAAM;AAAA,YACrC,CAACA,SAAQ,QAAQ,GAAG;AAAA,YACpB,CAACA,SAAQ,QAAQ,GAAG;AAAA,YACpB,CAACA,SAAQ,OAAO,GAAG;AAAA,YACnB,CAACA,SAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAAI,2BAAA,IAAC,OAAI,EAAA,WAAWJ,SAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5CI,2BAAA,IAAA,OAAA,EAAI,WAAWJ,SAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;;;"}

package/dist/cjs/TreeView/TreeItem/TreeItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.cjs","sources":["../../../../src/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  HTMLAttributes,\n  JSXElementConstructor,\n  ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\n\nexport interface HvTreeItemProps extends HTMLAttributes<HTMLElement> {\n  /** The element id */\n  id?: string;\n  /** The id of the node. */\n  nodeId: string;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeItemClasses;\n  /** If `true`, the node is disabled. */\n  disabled?: boolean;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The component used for the content node. */\n  ContentComponent?: JSXElementConstructor<HvTreeContentProps>;\n  /** Props applied to the content component */\n  ContentProps?: HvTreeContentProps;\n  /** The content of the component. */\n  children?: ReactNode;\n  /** className applied to the root element. */\n  className?: string;\n  /** The icon used to collapse the node. */\n  collapseIcon?: ReactNode;\n  /** The icon displayed next to an end node. */\n  endIcon?: ReactNode;\n  /** The icon used to expand the node. */\n  expandIcon?: ReactNode;\n  /** The component used for the transition. */\n  TransitionComponent?: JSXElementConstructor<TransitionProps>;\n  /** Props applied to the transition component */\n  TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      nodeId,\n      children,\n      classes: classesProp,\n      className,\n      label,\n      disabled: disabledProp,\n      icon,\n      endIcon,\n      expandIcon,\n      collapseIcon,\n      ContentComponent: Component = DefaultContent,\n      TransitionProps: transitionProps,\n      ContentProps: contentProps,\n      ...others\n    } = useDefaultProps(\"HvTreeItem\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const {\n      instance,\n      multiSelect,\n      disabledItemsFocusable,\n      treeId,\n      icons: contextIcons,\n    } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n    const id =\n      idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n    const [treeItemElement, setTreeItemElement] =\n      useState<HTMLLIElement | null>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeItemElement, ref);\n\n    const descendant = useMemo<TreeItemDescendant>(\n      () => ({ element: treeItemElement!, id: nodeId }),\n      [nodeId, treeItemElement]\n    );\n\n    const { index, parentId } = useDescendant(descendant);\n\n    const expandable = !!(Array.isArray(children) ? children.length : children);\n    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n    const focused = instance ? instance.isNodeFocused(nodeId) : false;\n    const selected = instance ? instance.isNodeSelected(nodeId) : false;\n    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n    const expansionIcon = !expanded\n      ? expandIcon || contextIcons.defaultExpandIcon\n      : collapseIcon || contextIcons.defaultCollapseIcon;\n\n    const displayIcon = expandable\n      ? contextIcons.defaultParentIcon\n      : endIcon || contextIcons.defaultEndIcon;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (instance && index !== -1) {\n        instance.updateNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          expandable,\n          disabled: disabledProp,\n        });\n\n        return () => instance.removeNode(nodeId);\n      }\n\n      return undefined;\n    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n    useEffect(() => {\n      if (instance && label) {\n        return instance.mapFirstChar(\n          nodeId,\n          (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n        );\n      }\n      return undefined;\n    }, [instance, nodeId, label]);\n\n    const handleFocus = (event: FocusEvent<HTMLLIElement, any>) => {\n      // DOM focus stays on the tree which manages focus with aria-activedescendant\n      if (event.target === event.currentTarget) {\n        const rootElement: any =\n          typeof event.target.getRootNode === \"function\"\n            ? event.target.getRootNode()\n            : event.target.ownerDocument || document;\n\n        rootElement.getElementById(treeId).focus({ preventScroll: true });\n      }\n\n      const unfocusable = !disabledItemsFocusable && disabled;\n      const canFocus =\n        instance &&\n        !focused &&\n        !disabled &&\n        !unfocusable &&\n        event.currentTarget === event.target;\n\n      if (canFocus) {\n        instance.focusNode(event, nodeId);\n      }\n    };\n\n    return (\n      <li\n        id={id}\n        ref={handleRef}\n        role=\"treeitem\"\n        aria-expanded={expandable ? expanded : undefined}\n        aria-selected={(multiSelect && selected) || selected || undefined}\n        aria-disabled={disabled || undefined}\n        className={cx(classes.root, className)}\n        // @ts-ignore\n        onFocus={handleFocus}\n        tabIndex={-1}\n        {...others}\n      >\n        <Component\n          ref={contentRef}\n          nodeId={nodeId}\n          classes={{\n            root: classes.content,\n            expanded: classes.expanded,\n            selected: classes.selected,\n            focused: classes.focused,\n            disabled: classes.disabled,\n            label: classes.label,\n            iconContainer: classes.iconContainer,\n          }}\n          label={label}\n          icon={icon}\n          expansionIcon={expandable && expansionIcon}\n          displayIcon={displayIcon}\n          {...contentProps}\n        />\n        {children && (\n          <DescendantProvider id={nodeId}>\n            <Collapse\n              component=\"ul\"\n              role=\"group\"\n              unmountOnExit\n              className={classes.group}\n              in={expanded}\n              {...transitionProps}\n            >\n              {children}\n            </Collapse>\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","DefaultContent","useDefaultProps","useClasses","useTreeViewContext","useState","useRef","useForkRef","useMemo","useDescendant","useEffect","jsxs","jsx","DescendantProvider","Collapse"],"mappings":"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"}
+{"version":3,"file":"TreeItem.cjs","sources":["../../../../src/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\nexport interface HvTreeItemProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element id */\n  id?: string;\n  /** The id of the node. */\n  nodeId: string;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeItemClasses;\n  /** If `true`, the node is disabled. */\n  disabled?: boolean;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The component used for the content node. */\n  ContentComponent?: React.JSXElementConstructor<HvTreeContentProps>;\n  /** Props applied to the content component */\n  ContentProps?: HvTreeContentProps;\n  /** The content of the component. */\n  children?: React.ReactNode;\n  /** className applied to the root element. */\n  className?: string;\n  /** The icon used to collapse the node. */\n  collapseIcon?: React.ReactNode;\n  /** The icon displayed next to an end node. */\n  endIcon?: React.ReactNode;\n  /** The icon used to expand the node. */\n  expandIcon?: React.ReactNode;\n  /** The component used for the transition. */\n  TransitionComponent?: React.JSXElementConstructor<TransitionProps>;\n  /** Props applied to the transition component */\n  TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      nodeId,\n      children,\n      classes: classesProp,\n      className,\n      label,\n      disabled: disabledProp,\n      icon,\n      endIcon,\n      expandIcon,\n      collapseIcon,\n      ContentComponent: Component = DefaultContent,\n      TransitionProps: transitionProps,\n      ContentProps: contentProps,\n      ...others\n    } = useDefaultProps(\"HvTreeItem\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const {\n      instance,\n      multiSelect,\n      disabledItemsFocusable,\n      treeId,\n      icons: contextIcons,\n    } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n    const id =\n      idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n    const [treeItemElement, setTreeItemElement] =\n      useState<HTMLLIElement | null>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeItemElement, ref);\n\n    const descendant = useMemo<TreeItemDescendant>(\n      () => ({ element: treeItemElement!, id: nodeId }),\n      [nodeId, treeItemElement]\n    );\n\n    const { index, parentId } = useDescendant(descendant);\n\n    const expandable = !!(Array.isArray(children) ? children.length : children);\n    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n    const focused = instance ? instance.isNodeFocused(nodeId) : false;\n    const selected = instance ? instance.isNodeSelected(nodeId) : false;\n    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n    const expansionIcon = !expanded\n      ? expandIcon || contextIcons.defaultExpandIcon\n      : collapseIcon || contextIcons.defaultCollapseIcon;\n\n    const displayIcon = expandable\n      ? contextIcons.defaultParentIcon\n      : endIcon || contextIcons.defaultEndIcon;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (instance && index !== -1) {\n        instance.updateNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          expandable,\n          disabled: disabledProp,\n        });\n\n        return () => instance.removeNode(nodeId);\n      }\n\n      return undefined;\n    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n    useEffect(() => {\n      if (instance && label) {\n        return instance.mapFirstChar(\n          nodeId,\n          (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n        );\n      }\n      return undefined;\n    }, [instance, nodeId, label]);\n\n    const handleFocus = (event: React.FocusEvent<HTMLLIElement>) => {\n      // DOM focus stays on the tree which manages focus with aria-activedescendant\n      if (event.target === event.currentTarget) {\n        const rootElement: any =\n          typeof event.target.getRootNode === \"function\"\n            ? event.target.getRootNode()\n            : event.target.ownerDocument || document;\n\n        rootElement.getElementById(treeId).focus({ preventScroll: true });\n      }\n\n      const unfocusable = !disabledItemsFocusable && disabled;\n      const canFocus =\n        instance &&\n        !focused &&\n        !disabled &&\n        !unfocusable &&\n        event.currentTarget === event.target;\n\n      if (canFocus) {\n        instance.focusNode(event, nodeId);\n      }\n    };\n\n    return (\n      <li\n        id={id}\n        ref={handleRef}\n        role=\"treeitem\"\n        aria-expanded={expandable ? expanded : undefined}\n        aria-selected={(multiSelect && selected) || selected || undefined}\n        aria-disabled={disabled || undefined}\n        className={cx(classes.root, className)}\n        // @ts-ignore\n        onFocus={handleFocus}\n        tabIndex={-1}\n        {...others}\n      >\n        <Component\n          ref={contentRef}\n          nodeId={nodeId}\n          classes={{\n            root: classes.content,\n            expanded: classes.expanded,\n            selected: classes.selected,\n            focused: classes.focused,\n            disabled: classes.disabled,\n            label: classes.label,\n            iconContainer: classes.iconContainer,\n          }}\n          label={label}\n          icon={icon}\n          expansionIcon={expandable && expansionIcon}\n          displayIcon={displayIcon}\n          {...contentProps}\n        />\n        {children && (\n          <DescendantProvider id={nodeId}>\n            <Collapse\n              component=\"ul\"\n              role=\"group\"\n              unmountOnExit\n              className={classes.group}\n              in={expanded}\n              {...transitionProps}\n            >\n              {children}\n            </Collapse>\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  }\n);\n"],"names":["forwardRef","DefaultContent","useDefaultProps","useClasses","useTreeViewContext","useState","useRef","useForkRef","useMemo","useDescendant","useEffect","jsxs","jsx","DescendantProvider","Collapse"],"mappings":"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"}