@hitachivantara/uikit-react-core 5.91.0 → 5.91.2

package/dist/esm/Tag/Tag.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, isValidElement, cloneElement } from "react";
-import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
+import { CloseXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { theme, getColor } from "@hitachivantara/uikit-styles";
+import { HvCheckBoxIcon } from "../BaseCheckBox/CheckBoxIcon.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { isDeleteKey } from "../utils/keyboardUtils.js";
 import { useClasses } from "./Tag.styles.js";
@@ -50,7 +51,6 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     theme.palette[color]?.[600] || getColor(color)
   );
   const isClickable = !!(onClick || onDelete || selectable);
-  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;
   const deleteIcon = deleteIconProp && isValidElement(deleteIconProp) ? cloneElement(deleteIconProp, {
     className: cx(classes.deleteIcon, {
       [classes.disabledDeleteIcon]: disabled
@@ -101,11 +101,11 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
       children: [
         iconProp,
         selectable && showSelectIcon && /* @__PURE__ */ jsx(
-          CheckboxIcon,
+          HvCheckBoxIcon,
           {
             className: classes.icon,
-            color: disabled && ["bgPageSecondary", "textDisabled"] || void 0,
-            size: "XS"
+            variant: isSelected ? "checked" : "default",
+            disabled
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/esm/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport {\n  getColor,\n  theme,\n  type HvColorAny,\n  type HvSize,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\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<\n    HvButtonBaseProps,\n    \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n  > {\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  /** @deprecated */\n  variant?: \"filled\" | \"outlined\";\n  size?: Extract<HvSize, \"xs\" | \"sm\" | \"md\">;\n  icon?: React.ReactNode;\n  /** Whether to show the select icon checkbox. */\n  showSelectIcon?: boolean;\n  /** The color variant of the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon */\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?: React.EventHandler<any>;\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. @deprecated no longer used */\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  /** 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\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 */\nexport const HvTag = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component,\n    style,\n    label,\n    disabled,\n    size = \"xs\",\n    variant,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    showSelectIcon = selectable,\n    color,\n    icon: iconProp,\n    deleteIcon: deleteIconProp,\n    onDelete,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    deleteButtonArialLabel,\n    deleteButtonProps,\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const handleDeleteClick = (event: React.MouseEvent) => {\n    // Stop the event from bubbling up to the tag\n    event.stopPropagation();\n    onDelete?.(event);\n  };\n\n  const tagColor =\n    // backwards-compatibility for `type` prop\n    (type === \"categorical\" && theme.alpha(color || \"cat1\", 0.2)) ||\n    // use the palette color if it matches\n    theme.palette[color as keyof typeof theme.palette]?.[600] ||\n    getColor(color);\n\n  const isClickable = !!(onClick || onDelete || selectable);\n\n  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n  const deleteIcon =\n    deleteIconProp && isValidElement(deleteIconProp) ? (\n      cloneElement<any>(deleteIconProp, {\n        className: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n        onClick: handleDeleteClick,\n      })\n    ) : (\n      <CloseXS\n        size=\"XS\"\n        onClick={handleDeleteClick}\n        className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n        {...deleteButtonProps}\n      />\n    );\n\n  return (\n    <HvButtonBase\n      ref={ref as any}\n      component={isClickable ? HvButtonBase : \"div\"}\n      disabled={disabled}\n      data-color={color}\n      style={mergeStyles(style, {\n        \"--tagColor\": tagColor,\n      })}\n      className={cx(classes.root, classes.chipRoot, classes[size], className, {\n        [classes.hasIcon]: iconProp || (selectable && showSelectIcon),\n        [classes.clickable]: isClickable && !disabled,\n        [classes.selected]: isSelected,\n        [classes.disabled]: disabled,\n        [classes.outlined]: variant === \"outlined\",\n        [classes.categorical]: type === \"categorical\",\n        [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n        [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n      })}\n      onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        // Ignore events from children.\n        if (event.currentTarget === event.target && isDeleteKey(event)) {\n          onDelete?.(event);\n        }\n\n        onKeyUp?.(event);\n      }}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      selected={isClickable && isSelected}\n      {...others}\n    >\n      {iconProp}\n      {selectable && showSelectIcon && (\n        <CheckboxIcon\n          className={classes.icon}\n          color={(disabled && [\"bgPageSecondary\", \"textDisabled\"]) || undefined}\n          size=\"XS\"\n        />\n      )}\n      <HvTypography\n        noWrap\n        variant=\"caption2\"\n        component=\"span\"\n        className={classes.label}\n      >\n        {label}\n      </HvTypography>\n      {onDelete && !disabled && deleteIcon}\n    </HvButtonBase>\n  );\n});\n"],"names":["HvTag"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport {\n  getColor,\n  theme,\n  type HvColorAny,\n  type HvSize,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvCheckBoxIcon } from \"../BaseCheckBox/CheckBoxIcon\";\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\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<\n    HvButtonBaseProps,\n    \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n  > {\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  /** @deprecated */\n  variant?: \"filled\" | \"outlined\";\n  size?: Extract<HvSize, \"xs\" | \"sm\" | \"md\">;\n  icon?: React.ReactNode;\n  /** Whether to show the select icon checkbox. */\n  showSelectIcon?: boolean;\n  /** The color variant of the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon */\n  deleteIcon?: React.ReactElement<any>;\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?: React.EventHandler<any>;\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. @deprecated no longer used */\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  /** 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\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 */\nexport const HvTag = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component,\n    style,\n    label,\n    disabled,\n    size = \"xs\",\n    variant,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    showSelectIcon = selectable,\n    color,\n    icon: iconProp,\n    deleteIcon: deleteIconProp,\n    onDelete,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    deleteButtonArialLabel,\n    deleteButtonProps,\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const handleDeleteClick = (event: React.MouseEvent) => {\n    // Stop the event from bubbling up to the tag\n    event.stopPropagation();\n    onDelete?.(event);\n  };\n\n  const tagColor =\n    // backwards-compatibility for `type` prop\n    (type === \"categorical\" && theme.alpha(color || \"cat1\", 0.2)) ||\n    // use the palette color if it matches\n    theme.palette[color as keyof typeof theme.palette]?.[600] ||\n    getColor(color);\n\n  const isClickable = !!(onClick || onDelete || selectable);\n\n  const deleteIcon =\n    deleteIconProp && isValidElement(deleteIconProp) ? (\n      cloneElement<any>(deleteIconProp, {\n        className: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n        onClick: handleDeleteClick,\n      })\n    ) : (\n      <CloseXS\n        size=\"XS\"\n        onClick={handleDeleteClick}\n        className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n        {...deleteButtonProps}\n      />\n    );\n\n  return (\n    <HvButtonBase\n      ref={ref as any}\n      component={isClickable ? HvButtonBase : \"div\"}\n      disabled={disabled}\n      data-color={color}\n      style={mergeStyles(style, {\n        \"--tagColor\": tagColor,\n      })}\n      className={cx(classes.root, classes.chipRoot, classes[size], className, {\n        [classes.hasIcon]: iconProp || (selectable && showSelectIcon),\n        [classes.clickable]: isClickable && !disabled,\n        [classes.selected]: isSelected,\n        [classes.disabled]: disabled,\n        [classes.outlined]: variant === \"outlined\",\n        [classes.categorical]: type === \"categorical\",\n        [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n        [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n      })}\n      onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        // Ignore events from children.\n        if (event.currentTarget === event.target && isDeleteKey(event)) {\n          onDelete?.(event);\n        }\n\n        onKeyUp?.(event);\n      }}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      selected={isClickable && isSelected}\n      {...others}\n    >\n      {iconProp}\n      {selectable && showSelectIcon && (\n        <HvCheckBoxIcon\n          className={classes.icon}\n          variant={isSelected ? \"checked\" : \"default\"}\n          disabled={disabled}\n        />\n      )}\n      <HvTypography\n        noWrap\n        variant=\"caption2\"\n        component=\"span\"\n        className={classes.label}\n      >\n        {label}\n      </HvTypography>\n      {onDelete && !disabled && deleteIcon}\n    </HvButtonBase>\n  );\n});\n"],"names":["HvTag"],"mappings":"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"}

package/dist/esm/Tag/Tag.styles.js

@@ -75,8 +75,7 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
   },
   // TODO: remove in favour of `hasIcon` once it's no longer needed
   icon: {
-    width: 12,
-    height: 12
+    fontSize: 12
   },
   /** @deprecated use `root` instead */
   chipRoot: {},

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"default\",\n    color: theme.colors.textDark,\n    borderColor: theme.colors.border,\n    borderRadius: 0,\n    maxWidth: 180,\n    whiteSpace: \"nowrap\",\n    transition: \"background-color 0.3s ease\",\n\n    \"&,:hover,:focus-visible\": {\n      backgroundColor: \"var(--tagColor)\",\n    },\n  },\n  hasIcon: {\n    paddingLeft: 2,\n  },\n  /** @deprecated */\n  outlined: {\n    outlineStyle: \"solid\",\n  },\n  /** @deprecated */\n  categorical: {\n    borderRadius: 8,\n    \"& $label\": {\n      color: theme.colors.text,\n    },\n    \"& $icon\": {\n      display: \"none\",\n    },\n  },\n  xs: {\n    height: 16,\n  },\n  sm: {\n    height: 24,\n    \"& $label\": {\n      ...theme.typography.caption1,\n      color: \"inherit\",\n    },\n  },\n  md: {\n    height: 32,\n    \"& $label\": {\n      ...theme.typography.body,\n      color: \"inherit\",\n    },\n  },\n\n  disabled: {\n    \"&,:hover,:focus-visible\": {\n      backgroundColor: theme.colors.bgDisabled,\n    },\n    \"& $label\": {\n      color: theme.colors.textDisabled,\n    },\n  },\n  label: {\n    padding: theme.spacing(0, \"xxs\"),\n    color: \"inherit\",\n  },\n  deleteIcon: {\n    width: 16,\n    height: 16,\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  selected: {},\n  clickable: {\n    cursor: \"pointer\",\n  },\n  // TODO: remove in favour of `hasIcon` once it's no longer needed\n  icon: {\n    width: 12,\n    height: 12,\n  },\n\n  /** @deprecated use `root` instead */\n  chipRoot: {},\n  /** @deprecated unused */\n  // TODO: redundant - use deleteIcon. remove in v6\n  /** @deprecated */\n  button: {},\n  /** @deprecated */\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  /** @deprecated */\n  focusVisible: {},\n  /** @deprecated */\n  disabledDeleteIcon: {},\n  /** @deprecated */\n  categoricalFocus: {},\n  /** @deprecated */\n  categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IAEZ,2BAA2B;AAAA,MACzB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,EACf;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,cAAc;AAAA,EAChB;AAAA;AAAA,EAEA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EAEA,UAAU;AAAA,IACR,2BAA2B;AAAA,MACzB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
+{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"default\",\n    color: theme.colors.textDark,\n    borderColor: theme.colors.border,\n    borderRadius: 0,\n    maxWidth: 180,\n    whiteSpace: \"nowrap\",\n    transition: \"background-color 0.3s ease\",\n\n    \"&,:hover,:focus-visible\": {\n      backgroundColor: \"var(--tagColor)\",\n    },\n  },\n  hasIcon: {\n    paddingLeft: 2,\n  },\n  /** @deprecated */\n  outlined: {\n    outlineStyle: \"solid\",\n  },\n  /** @deprecated */\n  categorical: {\n    borderRadius: 8,\n    \"& $label\": {\n      color: theme.colors.text,\n    },\n    \"& $icon\": {\n      display: \"none\",\n    },\n  },\n  xs: {\n    height: 16,\n  },\n  sm: {\n    height: 24,\n    \"& $label\": {\n      ...theme.typography.caption1,\n      color: \"inherit\",\n    },\n  },\n  md: {\n    height: 32,\n    \"& $label\": {\n      ...theme.typography.body,\n      color: \"inherit\",\n    },\n  },\n\n  disabled: {\n    \"&,:hover,:focus-visible\": {\n      backgroundColor: theme.colors.bgDisabled,\n    },\n    \"& $label\": {\n      color: theme.colors.textDisabled,\n    },\n  },\n  label: {\n    padding: theme.spacing(0, \"xxs\"),\n    color: \"inherit\",\n  },\n  deleteIcon: {\n    width: 16,\n    height: 16,\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  selected: {},\n  clickable: {\n    cursor: \"pointer\",\n  },\n  // TODO: remove in favour of `hasIcon` once it's no longer needed\n  icon: {\n    fontSize: 12,\n  },\n\n  /** @deprecated use `root` instead */\n  chipRoot: {},\n  /** @deprecated unused */\n  // TODO: redundant - use deleteIcon. remove in v6\n  /** @deprecated */\n  button: {},\n  /** @deprecated */\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  /** @deprecated */\n  focusVisible: {},\n  /** @deprecated */\n  disabledDeleteIcon: {},\n  /** @deprecated */\n  categoricalFocus: {},\n  /** @deprecated */\n  categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IAEZ,2BAA2B;AAAA,MACzB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,EACf;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,cAAc;AAAA,EAChB;AAAA;AAAA,EAEA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EAEA,UAAU;AAAA,IACR,2BAA2B;AAAA,MACzB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}

package/dist/esm/TagsInput/TagsInput.js

@@ -77,7 +77,7 @@ const HvTagsInput = forwardRef(
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const skipReset = useRef(false);
-    const blurTimeout = useRef();
+    const blurTimeout = useRef(null);
     const focusUtils = useFocus({ containerRef });
     const forkedContainerRef = useForkRef(ref, containerRef);
     const hasCounter = maxTagsQuantity != null && !hideCounter;

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useFocus } from \"../hooks/useFocus\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport type { HvInputProps, HvInputSuggestion } from \"../Input\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport interface HvTagSuggestion extends HvInputSuggestion {}\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends Omit<\n    HvInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"value\" | \"defaultValue\"\n  > {\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 function that will be executed onChange. */\n  onChange?: (event: React.SyntheticEvent, value: HvTagProps[]) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\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  /** 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  /** 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<HTMLElement, HvTagsInputProps>(\n  function HvTagsInput(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly,\n      disabled,\n      required,\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      endAdornment,\n      hideCounter,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      resizable,\n      inputProps,\n      countCharProps,\n      multiline,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx } = 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<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\",\n    );\n\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>();\n    const focusUtils = useFocus({ containerRef });\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\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: HvTagProps[]) => {\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} refocus    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (tagPos: number, event: React.SyntheticEvent, refocus = false) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ] as HvTagProps[];\n        setValue(newTagsArr);\n        if (refocus) {\n          setTimeout(() => focusUtils.focusChild(tagPos), 10);\n        }\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos] as HvTagProps, tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [focusUtils, onChange, onDelete, performValidation, setValue, 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    const addTag = useCallback(\n      (event: React.SyntheticEvent, tagInput?: string) => {\n        event.preventDefault();\n        const tag = tagInput ?? inputRef.current?.value ?? \"\";\n        if (tag === \"\") return;\n\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag] as HvTagProps[];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n        inputRef.current!.value = \"\";\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 (skipReset.current || !inputRef.current) return;\n      inputRef.current.value = \"\";\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    const focusInput = () => {\n      inputRef.current?.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li: number) => {\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: string) => {\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: HvSuggestionsProps[\"onSuggestionSelected\"] =\n      (event, item) => {\n        addTag(event, item.value || String(item.label));\n\n        focusInput();\n        suggestionClearHandler();\n      };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (\n      event: React.KeyboardEvent<HTMLDivElement>,\n    ) => {\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      (event: React.ChangeEvent<HTMLInputElement>) => {\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(event.target.value);\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: React.KeyboardEvent) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n          addTag(event);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        const tagInput = inputRef.current?.value || \"\";\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              focusUtils.focusPrevious();\n              return;\n            case \"ArrowRight\":\n              focusUtils.focusNext();\n              return;\n            case \"End\":\n              focusUtils.focusLast();\n              return;\n            case \"Home\":\n              focusUtils.focusFirst();\n              return;\n            case \"Backspace\":\n            case \"Delete\": {\n              // if a tag is focused, its onDelete will be called instead\n              if (document.activeElement === inputRef.current) {\n                deleteTag(value.length - 1, event);\n              }\n              return;\n            }\n            default:\n              return;\n          }\n        }\n\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            return;\n          case \"Enter\":\n            if (\n              canShowSuggestions &&\n              suggestionsLoose &&\n              (suggestionValidation?.(tagInput) || !suggestionValidation)\n            ) {\n              addTag(event);\n              focusInput();\n              suggestionClearHandler();\n            }\n            return;\n          default:\n            return;\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        focusUtils,\n        getSuggestions,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        value.length,\n      ],\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event: React.MouseEvent<HTMLElement>, i: number) => {\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    }, []);\n\n    const onBlurHandler: HvFormElementProps[\"onBlur\"] = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt);\n        }\n        onBlur?.(evt, inputRef.current?.value || \"\");\n      }, 10);\n    };\n\n    const onFocusHandler: HvFormElementProps[\"onFocus\"] = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, inputRef.current?.value || \"\");\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          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n          },\n          className,\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={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        {/* eslint-disable jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={forkedContainerRef}\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        >\n          {value?.map((t, i) => {\n            const tag: HvTagProps =\n              typeof t === \"string\" ? { label: t, type: \"semantic\" } : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvTag\n                key={`${label}-${i}`}\n                type={type}\n                label={label}\n                disabled={disabled}\n                tabIndex={-1}\n                className={cx(classes.chipRoot, classes.listItemRoot)}\n                {...(!(readOnly || disabled || type === \"categorical\") && {\n                  onDelete: (event) => onDeleteTagHandler(event, i),\n                })}\n                {...otherProps}\n              />\n            );\n          })}\n          {!disabled && !readOnly && (\n            <input\n              id={setId(elementId, \"input\")}\n              onChange={onChangeHandler}\n              autoComplete=\"off\"\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              className={cx(\n                classes.tagInputContainerRoot,\n                classes.tagInputRoot,\n                classes.input,\n              )}\n              ref={inputRef}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              aria-describedby={\n                ariaDescribedBy ??\n                (description ? setId(elementId, \"description\") : undefined)\n              }\n              {...inputProps}\n              {...others}\n            />\n          )}\n          {!disabled && !readOnly && endAdornment}\n        </div>\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              open={hasSuggestions}\n              anchorEl={containerRef?.current}\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":["HvTagsInput"],"mappings":"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"}
+{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useFocus } from \"../hooks/useFocus\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport type { HvInputProps, HvInputSuggestion } from \"../Input\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport interface HvTagSuggestion extends HvInputSuggestion {}\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends Omit<\n    HvInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"value\" | \"defaultValue\"\n  > {\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 function that will be executed onChange. */\n  onChange?: (event: React.SyntheticEvent, value: HvTagProps[]) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\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  /** 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  /** 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<HTMLElement, HvTagsInputProps>(\n  function HvTagsInput(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly,\n      disabled,\n      required,\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      endAdornment,\n      hideCounter,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      resizable,\n      inputProps,\n      countCharProps,\n      multiline,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx } = 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<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\",\n    );\n\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>(null);\n    const focusUtils = useFocus({ containerRef });\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\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: HvTagProps[]) => {\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} refocus    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (tagPos: number, event: React.SyntheticEvent, refocus = false) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ] as HvTagProps[];\n        setValue(newTagsArr);\n        if (refocus) {\n          setTimeout(() => focusUtils.focusChild(tagPos), 10);\n        }\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos] as HvTagProps, tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [focusUtils, onChange, onDelete, performValidation, setValue, 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    const addTag = useCallback(\n      (event: React.SyntheticEvent, tagInput?: string) => {\n        event.preventDefault();\n        const tag = tagInput ?? inputRef.current?.value ?? \"\";\n        if (tag === \"\") return;\n\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag] as HvTagProps[];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n        inputRef.current!.value = \"\";\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 (skipReset.current || !inputRef.current) return;\n      inputRef.current.value = \"\";\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    const focusInput = () => {\n      inputRef.current?.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li: number) => {\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: string) => {\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: HvSuggestionsProps[\"onSuggestionSelected\"] =\n      (event, item) => {\n        addTag(event, item.value || String(item.label));\n\n        focusInput();\n        suggestionClearHandler();\n      };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (\n      event: React.KeyboardEvent<HTMLDivElement>,\n    ) => {\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      (event: React.ChangeEvent<HTMLInputElement>) => {\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(event.target.value);\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: React.KeyboardEvent) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n          addTag(event);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        const tagInput = inputRef.current?.value || \"\";\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              focusUtils.focusPrevious();\n              return;\n            case \"ArrowRight\":\n              focusUtils.focusNext();\n              return;\n            case \"End\":\n              focusUtils.focusLast();\n              return;\n            case \"Home\":\n              focusUtils.focusFirst();\n              return;\n            case \"Backspace\":\n            case \"Delete\": {\n              // if a tag is focused, its onDelete will be called instead\n              if (document.activeElement === inputRef.current) {\n                deleteTag(value.length - 1, event);\n              }\n              return;\n            }\n            default:\n              return;\n          }\n        }\n\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            return;\n          case \"Enter\":\n            if (\n              canShowSuggestions &&\n              suggestionsLoose &&\n              (suggestionValidation?.(tagInput) || !suggestionValidation)\n            ) {\n              addTag(event);\n              focusInput();\n              suggestionClearHandler();\n            }\n            return;\n          default:\n            return;\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        focusUtils,\n        getSuggestions,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        value.length,\n      ],\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event: React.MouseEvent<HTMLElement>, i: number) => {\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    }, []);\n\n    const onBlurHandler: HvFormElementProps[\"onBlur\"] = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt);\n        }\n        onBlur?.(evt, inputRef.current?.value || \"\");\n      }, 10);\n    };\n\n    const onFocusHandler: HvFormElementProps[\"onFocus\"] = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, inputRef.current?.value || \"\");\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          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n          },\n          className,\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={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        {/* eslint-disable jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={forkedContainerRef}\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        >\n          {value?.map((t, i) => {\n            const tag: HvTagProps =\n              typeof t === \"string\" ? { label: t, type: \"semantic\" } : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvTag\n                key={`${label}-${i}`}\n                type={type}\n                label={label}\n                disabled={disabled}\n                tabIndex={-1}\n                className={cx(classes.chipRoot, classes.listItemRoot)}\n                {...(!(readOnly || disabled || type === \"categorical\") && {\n                  onDelete: (event) => onDeleteTagHandler(event, i),\n                })}\n                {...otherProps}\n              />\n            );\n          })}\n          {!disabled && !readOnly && (\n            <input\n              id={setId(elementId, \"input\")}\n              onChange={onChangeHandler}\n              autoComplete=\"off\"\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              className={cx(\n                classes.tagInputContainerRoot,\n                classes.tagInputRoot,\n                classes.input,\n              )}\n              ref={inputRef}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              aria-describedby={\n                ariaDescribedBy ??\n                (description ? setId(elementId, \"description\") : undefined)\n              }\n              {...inputProps}\n              {...others}\n            />\n          )}\n          {!disabled && !readOnly && endAdornment}\n        </div>\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              open={hasSuggestions}\n              anchorEl={containerRef?.current}\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":["HvTagsInput"],"mappings":"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"}

package/dist/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { getElementById } from \"../utils/document\";\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   * @deprecated tooltips already support multiline and can be styled accordingly.\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<\n  // no-indent\n  unknown,\n  HvTooltipProps\n>(function HvTooltip(props, 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  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\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={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip"],"mappings":";;;;;;;;AAqEO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,OAAO,IAAI,SAAS;AAC5B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EACtC;AAGA,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;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,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { getElementById } from \"../utils/document\";\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   * @deprecated tooltips already support multiline and can be styled accordingly.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement<any>;\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<\n  // no-indent\n  unknown,\n  HvTooltipProps\n>(function HvTooltip(props, 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  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\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={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip"],"mappings":";;;;;;;;AAqEO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,OAAO,IAAI,SAAS;AAC5B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EACtC;AAGA,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;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,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}

package/dist/esm/TreeView/internals/hooks/useInstanceEventHandler.js

@@ -13,7 +13,7 @@ function createUseInstanceEventHandler(registryContainer2) {
       new ObjectToBeRetainedByReact()
     );
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(void 0);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/dist/esm/TreeView/internals/hooks/useInstanceEventHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInstanceEventHandler.js","sources":["../../../../../src/TreeView/internals/hooks/useInstanceEventHandler.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { TreeViewAnyPluginSignature, TreeViewUsedEvents } from \"../types\";\nimport { TreeViewEventListener } from \"../types/events\";\nimport { CleanupTracking, UnregisterToken } from \"../utils/CleanupTracking\";\nimport { FinalizationRegistryBasedCleanupTracking } from \"../utils/FinalizationRegistryBasedCleanupTracking\";\nimport { TimerBasedCleanupTracking } from \"../utils/TimerBasedCleanupTracking\";\nimport { UseTreeViewInstanceEventsInstance } from \"./useTreeViewInstanceEvents.types\";\n\ninterface RegistryContainer {\n  registry: CleanupTracking | null;\n}\n\n// We use class to make it easier to detect in heap snapshots by name\nclass ObjectToBeRetainedByReact {}\n\n// Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts\n// Check https://github.com/facebook/react/issues/15317 to get more information\nexport function createUseInstanceEventHandler(\n  registryContainer: RegistryContainer,\n) {\n  let cleanupTokensCounter = 0;\n\n  return function useInstanceEventHandler<\n    Instance extends UseTreeViewInstanceEventsInstance & {\n      $$signature: TreeViewAnyPluginSignature;\n    },\n    E extends keyof TreeViewUsedEvents<Instance[\"$$signature\"]>,\n  >(\n    instance: Instance,\n    eventName: E,\n    handler: TreeViewEventListener<\n      TreeViewUsedEvents<Instance[\"$$signature\"]>[E]\n    >,\n  ) {\n    type Signature = Instance[\"$$signature\"];\n\n    if (registryContainer.registry === null) {\n      registryContainer.registry =\n        typeof FinalizationRegistry !== \"undefined\"\n          ? new FinalizationRegistryBasedCleanupTracking()\n          : new TimerBasedCleanupTracking();\n    }\n\n    const [objectRetainedByReact] = React.useState(\n      new ObjectToBeRetainedByReact(),\n    );\n    const subscription = React.useRef<(() => void) | null>(null);\n    const handlerRef = React.useRef<\n      TreeViewEventListener<TreeViewUsedEvents<Signature>[E]> | undefined\n    >();\n    handlerRef.current = handler;\n    const cleanupTokenRef = React.useRef<UnregisterToken | null>(null);\n\n    if (!subscription.current && handlerRef.current) {\n      const enhancedHandler: TreeViewEventListener<\n        TreeViewUsedEvents<Signature>[E]\n      > = (params, event) => {\n        if (!event.defaultMuiPrevented) {\n          handlerRef.current?.(params, event);\n        }\n      };\n\n      subscription.current = instance.$$subscribeEvent(\n        eventName as string,\n        enhancedHandler,\n      );\n\n      cleanupTokensCounter += 1;\n      cleanupTokenRef.current = { cleanupToken: cleanupTokensCounter };\n\n      registryContainer.registry.register(\n        objectRetainedByReact, // The callback below will be called once this reference stops being retained\n        () => {\n          subscription.current?.();\n          subscription.current = null;\n          cleanupTokenRef.current = null;\n        },\n        cleanupTokenRef.current,\n      );\n    } else if (!handlerRef.current && subscription.current) {\n      subscription.current();\n      subscription.current = null;\n\n      if (cleanupTokenRef.current) {\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n    }\n\n    React.useEffect(() => {\n      if (!subscription.current && handlerRef.current) {\n        const enhancedHandler: TreeViewEventListener<\n          TreeViewUsedEvents<Signature>[E]\n        > = (params, event) => {\n          if (!event.defaultMuiPrevented) {\n            handlerRef.current?.(params, event);\n          }\n        };\n\n        subscription.current = instance.$$subscribeEvent(\n          eventName as string,\n          enhancedHandler,\n        );\n      }\n\n      if (cleanupTokenRef.current && registryContainer.registry) {\n        // If the effect was called, it means that this render was committed\n        // so we can trust the cleanup function to remove the listener.\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n\n      return () => {\n        subscription.current?.();\n        subscription.current = null;\n      };\n    }, [instance, eventName]);\n  };\n}\n\nconst registryContainer: RegistryContainer = { registry: null };\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const unstable_resetCleanupTracking = () => {\n  registryContainer.registry?.reset();\n  registryContainer.registry = null;\n};\n\nexport const useInstanceEventHandler =\n  createUseInstanceEventHandler(registryContainer);\n"],"names":["registryContainer","useInstanceEventHandler"],"mappings":";;;AAcA,MAAM,0BAA0B;AAAC;AAI1B,SAAS,8BACdA,oBACA;AACA,MAAI,uBAAuB;AAE3B,SAAO,SAASC,yBAMd,UACA,WACA,SAGA;AAGID,QAAAA,mBAAkB,aAAa,MAAM;AACvCA,yBAAkB,WAChB,OAAO,yBAAyB,cAC5B,IAAI,yCAAA,IACJ,IAAI,0BAA0B;AAAA,IAAA;AAGhC,UAAA,CAAC,qBAAqB,IAAI,MAAM;AAAA,MACpC,IAAI,0BAA0B;AAAA,IAChC;AACM,UAAA,eAAe,MAAM,OAA4B,IAAI;AACrD,UAAA,aAAa,MAAM,OAEvB;AACF,eAAW,UAAU;AACf,UAAA,kBAAkB,MAAM,OAA+B,IAAI;AAEjE,QAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,YAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,YAAA,CAAC,MAAM,qBAAqB;AACnB,qBAAA,UAAU,QAAQ,KAAK;AAAA,QAAA;AAAA,MAEtC;AAEA,mBAAa,UAAU,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAEwB,8BAAA;AACR,sBAAA,UAAU,EAAE,cAAc,qBAAqB;AAE/DA,yBAAkB,SAAS;AAAA,QACzB;AAAA;AAAA,QACA,MAAM;AACJ,uBAAa,UAAU;AACvB,uBAAa,UAAU;AACvB,0BAAgB,UAAU;AAAA,QAC5B;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA,IACS,WAAA,CAAC,WAAW,WAAW,aAAa,SAAS;AACtD,mBAAa,QAAQ;AACrB,mBAAa,UAAU;AAEvB,UAAI,gBAAgB,SAAS;AAC3BA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAAA,IAC5B;AAGF,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,cAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,cAAA,CAAC,MAAM,qBAAqB;AACnB,uBAAA,UAAU,QAAQ,KAAK;AAAA,UAAA;AAAA,QAEtC;AAEA,qBAAa,UAAU,SAAS;AAAA,UAC9B;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGE,UAAA,gBAAgB,WAAWA,mBAAkB,UAAU;AAGzDA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAG5B,aAAO,MAAM;AACX,qBAAa,UAAU;AACvB,qBAAa,UAAU;AAAA,MACzB;AAAA,IAAA,GACC,CAAC,UAAU,SAAS,CAAC;AAAA,EAC1B;AACF;AAEA,MAAM,oBAAuC,EAAE,UAAU,KAAK;AAQjD,MAAA,0BACX,8BAA8B,iBAAiB;"}
+{"version":3,"file":"useInstanceEventHandler.js","sources":["../../../../../src/TreeView/internals/hooks/useInstanceEventHandler.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { TreeViewAnyPluginSignature, TreeViewUsedEvents } from \"../types\";\nimport { TreeViewEventListener } from \"../types/events\";\nimport { CleanupTracking, UnregisterToken } from \"../utils/CleanupTracking\";\nimport { FinalizationRegistryBasedCleanupTracking } from \"../utils/FinalizationRegistryBasedCleanupTracking\";\nimport { TimerBasedCleanupTracking } from \"../utils/TimerBasedCleanupTracking\";\nimport { UseTreeViewInstanceEventsInstance } from \"./useTreeViewInstanceEvents.types\";\n\ninterface RegistryContainer {\n  registry: CleanupTracking | null;\n}\n\n// We use class to make it easier to detect in heap snapshots by name\nclass ObjectToBeRetainedByReact {}\n\n// Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts\n// Check https://github.com/facebook/react/issues/15317 to get more information\nexport function createUseInstanceEventHandler(\n  registryContainer: RegistryContainer,\n) {\n  let cleanupTokensCounter = 0;\n\n  return function useInstanceEventHandler<\n    Instance extends UseTreeViewInstanceEventsInstance & {\n      $$signature: TreeViewAnyPluginSignature;\n    },\n    E extends keyof TreeViewUsedEvents<Instance[\"$$signature\"]>,\n  >(\n    instance: Instance,\n    eventName: E,\n    handler: TreeViewEventListener<\n      TreeViewUsedEvents<Instance[\"$$signature\"]>[E]\n    >,\n  ) {\n    type Signature = Instance[\"$$signature\"];\n\n    if (registryContainer.registry === null) {\n      registryContainer.registry =\n        typeof FinalizationRegistry !== \"undefined\"\n          ? new FinalizationRegistryBasedCleanupTracking()\n          : new TimerBasedCleanupTracking();\n    }\n\n    const [objectRetainedByReact] = React.useState(\n      new ObjectToBeRetainedByReact(),\n    );\n    const subscription = React.useRef<(() => void) | null>(null);\n    const handlerRef = React.useRef<\n      TreeViewEventListener<TreeViewUsedEvents<Signature>[E]> | undefined\n    >(undefined);\n    handlerRef.current = handler;\n    const cleanupTokenRef = React.useRef<UnregisterToken | null>(null);\n\n    if (!subscription.current && handlerRef.current) {\n      const enhancedHandler: TreeViewEventListener<\n        TreeViewUsedEvents<Signature>[E]\n      > = (params, event) => {\n        if (!event.defaultMuiPrevented) {\n          handlerRef.current?.(params, event);\n        }\n      };\n\n      subscription.current = instance.$$subscribeEvent(\n        eventName as string,\n        enhancedHandler,\n      );\n\n      cleanupTokensCounter += 1;\n      cleanupTokenRef.current = { cleanupToken: cleanupTokensCounter };\n\n      registryContainer.registry.register(\n        objectRetainedByReact, // The callback below will be called once this reference stops being retained\n        () => {\n          subscription.current?.();\n          subscription.current = null;\n          cleanupTokenRef.current = null;\n        },\n        cleanupTokenRef.current,\n      );\n    } else if (!handlerRef.current && subscription.current) {\n      subscription.current();\n      subscription.current = null;\n\n      if (cleanupTokenRef.current) {\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n    }\n\n    React.useEffect(() => {\n      if (!subscription.current && handlerRef.current) {\n        const enhancedHandler: TreeViewEventListener<\n          TreeViewUsedEvents<Signature>[E]\n        > = (params, event) => {\n          if (!event.defaultMuiPrevented) {\n            handlerRef.current?.(params, event);\n          }\n        };\n\n        subscription.current = instance.$$subscribeEvent(\n          eventName as string,\n          enhancedHandler,\n        );\n      }\n\n      if (cleanupTokenRef.current && registryContainer.registry) {\n        // If the effect was called, it means that this render was committed\n        // so we can trust the cleanup function to remove the listener.\n        registryContainer.registry.unregister(cleanupTokenRef.current);\n        cleanupTokenRef.current = null;\n      }\n\n      return () => {\n        subscription.current?.();\n        subscription.current = null;\n      };\n    }, [instance, eventName]);\n  };\n}\n\nconst registryContainer: RegistryContainer = { registry: null };\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const unstable_resetCleanupTracking = () => {\n  registryContainer.registry?.reset();\n  registryContainer.registry = null;\n};\n\nexport const useInstanceEventHandler =\n  createUseInstanceEventHandler(registryContainer);\n"],"names":["registryContainer","useInstanceEventHandler"],"mappings":";;;AAcA,MAAM,0BAA0B;AAAC;AAI1B,SAAS,8BACdA,oBACA;AACA,MAAI,uBAAuB;AAE3B,SAAO,SAASC,yBAMd,UACA,WACA,SAGA;AAGID,QAAAA,mBAAkB,aAAa,MAAM;AACvCA,yBAAkB,WAChB,OAAO,yBAAyB,cAC5B,IAAI,yCAAA,IACJ,IAAI,0BAA0B;AAAA,IAAA;AAGhC,UAAA,CAAC,qBAAqB,IAAI,MAAM;AAAA,MACpC,IAAI,0BAA0B;AAAA,IAChC;AACM,UAAA,eAAe,MAAM,OAA4B,IAAI;AACrD,UAAA,aAAa,MAAM,OAEvB,MAAS;AACX,eAAW,UAAU;AACf,UAAA,kBAAkB,MAAM,OAA+B,IAAI;AAEjE,QAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,YAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,YAAA,CAAC,MAAM,qBAAqB;AACnB,qBAAA,UAAU,QAAQ,KAAK;AAAA,QAAA;AAAA,MAEtC;AAEA,mBAAa,UAAU,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAEwB,8BAAA;AACR,sBAAA,UAAU,EAAE,cAAc,qBAAqB;AAE/DA,yBAAkB,SAAS;AAAA,QACzB;AAAA;AAAA,QACA,MAAM;AACJ,uBAAa,UAAU;AACvB,uBAAa,UAAU;AACvB,0BAAgB,UAAU;AAAA,QAC5B;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA,IACS,WAAA,CAAC,WAAW,WAAW,aAAa,SAAS;AACtD,mBAAa,QAAQ;AACrB,mBAAa,UAAU;AAEvB,UAAI,gBAAgB,SAAS;AAC3BA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAAA,IAC5B;AAGF,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,aAAa,WAAW,WAAW,SAAS;AACzC,cAAA,kBAEF,CAAC,QAAQ,UAAU;AACjB,cAAA,CAAC,MAAM,qBAAqB;AACnB,uBAAA,UAAU,QAAQ,KAAK;AAAA,UAAA;AAAA,QAEtC;AAEA,qBAAa,UAAU,SAAS;AAAA,UAC9B;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGE,UAAA,gBAAgB,WAAWA,mBAAkB,UAAU;AAGzDA,2BAAkB,SAAS,WAAW,gBAAgB,OAAO;AAC7D,wBAAgB,UAAU;AAAA,MAAA;AAG5B,aAAO,MAAM;AACX,qBAAa,UAAU;AACvB,qBAAa,UAAU;AAAA,MACzB;AAAA,IAAA,GACC,CAAC,UAAU,SAAS,CAAC;AAAA,EAC1B;AACF;AAEA,MAAM,oBAAuC,EAAE,UAAU,KAAK;AAQjD,MAAA,0BACX,8BAA8B,iBAAiB;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.js","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;\n\nexport const useClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T>,\n  handler: (event: HvClickOutsideEvent) => void,\n) => {\n  useEffect(() => {\n    const listener = (event: HvClickOutsideEvent) => {\n      const el = ref?.current;\n      const isKeyUp = event.type === \"keyup\";\n      const isEscape = (event as KeyboardEvent).key === \"Escape\";\n\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return {};\n      }\n\n      return isKeyUp ? (isEscape ? handler(event) : null) : handler(event);\n    };\n\n    document.addEventListener(\"click\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    document.addEventListener(\"keyup\", listener);\n\n    return () => {\n      document.removeEventListener(\"click\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n      document.removeEventListener(\"keyup\", listener);\n    };\n  }, [ref, handler]);\n};\n"],"names":[],"mappings":";AAIa,MAAA,kBAAkB,CAC7B,KACA,YACG;AACH,YAAU,MAAM;AACR,UAAA,WAAW,CAAC,UAA+B;AAC/C,YAAM,KAAK,KAAK;AACV,YAAA,UAAU,MAAM,SAAS;AACzB,YAAA,WAAY,MAAwB,QAAQ;AAElD,UAAI,CAAC,MAAM,GAAG,SAAU,OAAO,UAAmB,IAAI,GAAG;AACvD,eAAO,CAAC;AAAA,MAAA;AAGV,aAAO,UAAW,WAAW,QAAQ,KAAK,IAAI,OAAQ,QAAQ,KAAK;AAAA,IACrE;AAES,aAAA,iBAAiB,SAAS,QAAQ;AAClC,aAAA,iBAAiB,cAAc,QAAQ;AACvC,aAAA,iBAAiB,SAAS,QAAQ;AAE3C,WAAO,MAAM;AACF,eAAA,oBAAoB,SAAS,QAAQ;AACrC,eAAA,oBAAoB,cAAc,QAAQ;AAC1C,eAAA,oBAAoB,SAAS,QAAQ;AAAA,IAChD;AAAA,EAAA,GACC,CAAC,KAAK,OAAO,CAAC;AACnB;"}
+{"version":3,"file":"useClickOutside.js","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;\n\nexport const useClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T | null>,\n  handler: (event: HvClickOutsideEvent) => void,\n) => {\n  useEffect(() => {\n    const listener = (event: HvClickOutsideEvent) => {\n      const el = ref?.current;\n      const isKeyUp = event.type === \"keyup\";\n      const isEscape = (event as KeyboardEvent).key === \"Escape\";\n\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return {};\n      }\n\n      return isKeyUp ? (isEscape ? handler(event) : null) : handler(event);\n    };\n\n    document.addEventListener(\"click\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    document.addEventListener(\"keyup\", listener);\n\n    return () => {\n      document.removeEventListener(\"click\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n      document.removeEventListener(\"keyup\", listener);\n    };\n  }, [ref, handler]);\n};\n"],"names":[],"mappings":";AAIa,MAAA,kBAAkB,CAC7B,KACA,YACG;AACH,YAAU,MAAM;AACR,UAAA,WAAW,CAAC,UAA+B;AAC/C,YAAM,KAAK,KAAK;AACV,YAAA,UAAU,MAAM,SAAS;AACzB,YAAA,WAAY,MAAwB,QAAQ;AAElD,UAAI,CAAC,MAAM,GAAG,SAAU,OAAO,UAAmB,IAAI,GAAG;AACvD,eAAO,CAAC;AAAA,MAAA;AAGV,aAAO,UAAW,WAAW,QAAQ,KAAK,IAAI,OAAQ,QAAQ,KAAK;AAAA,IACrE;AAES,aAAA,iBAAiB,SAAS,QAAQ;AAClC,aAAA,iBAAiB,cAAc,QAAQ;AACvC,aAAA,iBAAiB,SAAS,QAAQ;AAE3C,WAAO,MAAM;AACF,eAAA,oBAAoB,SAAS,QAAQ;AACrC,eAAA,oBAAoB,cAAc,QAAQ;AAC1C,eAAA,oBAAoB,SAAS,QAAQ;AAAA,IAChD;AAAA,EAAA,GACC,CAAC,KAAK,OAAO,CAAC;AACnB;"}

package/dist/esm/types/generic.js.map

@@ -1 +1 @@
-{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends {}\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type extends DeepPartial to allow any extra properties */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & Record<string, any>;\n}> &\n  Record<string, any>;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  // TODO: change `React.ReactElement | null` to `React.ReactNode` in v6 (requires ts@5+)\n  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,\n): (props: P & React.RefAttributes<T>) => React.ReactElement | null {\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70361#issuecomment-2327456092\n  return forwardRef(render as any) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBAEd,QACkE;AAElE,SAAO,WAAW,MAAa;AACjC;"}
+{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends {}\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type extends DeepPartial to allow any extra properties */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & Record<string, any>;\n}> &\n  Record<string, any>;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  // TODO: change `React.ReactElement | null` to `React.ReactNode` in v6 (requires ts@5+)\n  render: (props: P, ref: React.Ref<T>) => React.ReactElement<any> | null,\n): (props: P & React.RefAttributes<T>) => React.ReactElement<any> | null {\n  // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70361#issuecomment-2327456092\n  return forwardRef(render as any) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBAEd,QACuE;AAEvE,SAAO,WAAW,MAAa;AACjC;"}