@hitachivantara/uikit-react-core 5.24.2 → 5.24.4

package/dist/esm/components/ListContainer/ListItem/ListItem.js

@@ -1,15 +1,14 @@
-import { clsx } from "clsx";
 import React__default, { useContext, useCallback, useMemo } from "react";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
-import { StyledListItem, StyledFocus } from "./ListItem.styles.js";
-import listItemClasses from "./listItemClasses.js";
+import { useClasses } from "./ListItem.styles.js";
+import { staticClasses } from "./ListItem.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import HvListContext from "../ListContext/ListContext.js";
-const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className, externalClassname) => {
-  var _a;
+import { HvFocus } from "../../Focus/Focus.js";
+const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className) => {
   if (element != null) {
     return React__default.cloneElement(element, {
-      className: clsx(className, externalClassname, (_a = element == null ? void 0 : element.props) == null ? void 0 : _a.className),
+      className,
       checked: !!selected,
       disabled,
       onChange: (evt) => onClick == null ? void 0 : onClick(evt)
@@ -17,11 +16,10 @@ const applyClassNameAndStateToElement = (element, selected, disabled, onClick, c
   }
   return null;
 };
-const applyClassNameToElement = (element, className, externalClassname) => {
-  var _a;
+const applyClassNameToElement = (element, className) => {
   if (element != null) {
     return React__default.cloneElement(element, {
-      className: clsx(className, externalClassname, (_a = element == null ? void 0 : element.props) == null ? void 0 : _a.className)
+      className
     });
   }
   return null;
@@ -29,7 +27,7 @@ const applyClassNameToElement = (element, className, externalClassname) => {
 const HvListItem = (props) => {
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     role,
     value,
@@ -45,6 +43,10 @@ const HvListItem = (props) => {
     tabIndex,
     ...others
   } = useDefaultProps("HvListItem", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     topContainerRef,
     condensed: condensedContext,
@@ -59,37 +61,47 @@ const HvListItem = (props) => {
       onClick == null ? void 0 : onClick(evt);
     }
   }, [disabled, onClick]);
-  const clonedStartAdornment = useMemo(() => applyClassNameAndStateToElement(startAdornment, selected, disabled, handleOnClick, clsx(listItemClasses.startAdornment, disabled && listItemClasses.disabled), clsx(classes == null ? void 0 : classes.startAdornment, disabled && (classes == null ? void 0 : classes.disabled))), [classes == null ? void 0 : classes.startAdornment, classes == null ? void 0 : classes.disabled, disabled, handleOnClick, selected, startAdornment]);
-  const clonedEndAdornment = useMemo(() => applyClassNameToElement(endAdornment, clsx(listItemClasses.endAdornment, disabled && listItemClasses.disabled), clsx(classes == null ? void 0 : classes.endAdornment, disabled && (classes == null ? void 0 : classes.disabled))), [classes == null ? void 0 : classes.endAdornment, classes == null ? void 0 : classes.disabled, disabled, endAdornment]);
+  const clonedStartAdornment = useMemo(() => applyClassNameAndStateToElement(startAdornment, selected, disabled, handleOnClick, cx(classes.startAdornment, {
+    [classes.disabled]: disabled
+  }, React__default.isValidElement(startAdornment) ? startAdornment.props.className : void 0)), [cx, classes == null ? void 0 : classes.startAdornment, classes == null ? void 0 : classes.disabled, disabled, handleOnClick, selected, startAdornment]);
+  const clonedEndAdornment = useMemo(() => applyClassNameToElement(endAdornment, cx(classes.endAdornment, {
+    [classes.disabled]: disabled
+  }, React__default.isValidElement(endAdornment) ? endAdornment.props.className : void 0)), [cx, classes == null ? void 0 : classes.endAdornment, classes == null ? void 0 : classes.disabled, disabled, endAdornment]);
   const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
     "aria-disabled": disabled || void 0,
     "aria-selected": selected
   } : {};
-  const listItem = /* @__PURE__ */ jsxs(StyledListItem, {
-    id,
-    role,
-    value,
-    onClick: handleOnClick,
-    onKeyDown: () => {
-    },
-    className: clsx(className, listItemClasses.root, classes == null ? void 0 : classes.root, !disableGutters && clsx(listItemClasses.gutters, classes == null ? void 0 : classes.gutters), condensed && clsx(listItemClasses.condensed, classes == null ? void 0 : classes.condensed), interactive && clsx(listItemClasses.interactive, classes == null ? void 0 : classes.interactive), selected && clsx(listItemClasses.selected, classes == null ? void 0 : classes.selected), disabled && clsx(listItemClasses.disabled, classes == null ? void 0 : classes.disabled), startAdornment != null && clsx(listItemClasses.withStartAdornment, classes == null ? void 0 : classes.withStartAdornment), endAdornment != null && clsx(listItemClasses.withEndAdornment, classes == null ? void 0 : classes.withEndAdornment)),
-    $gutters: !disableGutters,
-    $interactive: interactive,
-    $disabled: disabled || false,
-    $selected: selected || false,
-    $startAdornment: startAdornment != null,
-    $endAdornment: endAdornment != null,
-    ...roleOptionAriaProps,
-    ...others,
-    children: [clonedStartAdornment, children, clonedEndAdornment]
-  });
-  return interactiveProp ? /* @__PURE__ */ jsx(StyledFocus, {
+  const listItem = (
+    // For later: this should only have an onClick event if interactive and has the appropriate role.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsxs("li", {
+      id,
+      role,
+      value,
+      className: cx(classes.root, {
+        [classes.gutters]: !disableGutters,
+        [classes.condensed]: condensed,
+        [classes.interactive]: interactive,
+        [classes.selected]: !!selected,
+        [classes.disabled]: !!disabled,
+        [classes.withStartAdornment]: startAdornment != null,
+        [classes.withEndAdornment]: endAdornment != null
+      }, className),
+      onClick: handleOnClick,
+      onKeyDown: () => {
+      },
+      ...roleOptionAriaProps,
+      ...others,
+      children: [clonedStartAdornment, children, clonedEndAdornment]
+    })
+  );
+  return interactive ? /* @__PURE__ */ jsx(HvFocus, {
     rootRef: topContainerRef,
     selected,
     disabledClass: disabled || void 0,
     strategy: role === "option" ? "listbox" : "menu",
     classes: {
-      focus: clsx(classes == null ? void 0 : classes.focus, listItemClasses.focus)
+      focus: classes.focus
     },
     configuration: {
       tabIndex
@@ -98,6 +110,7 @@ const HvListItem = (props) => {
   }) : listItem;
 };
 export {
-  HvListItem
+  HvListItem,
+  staticClasses as listItemClasses
 };
 //# sourceMappingURL=ListItem.js.map

package/dist/esm/components/ListContainer/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport HvListContext from \"../ListContext\";\nimport { StyledListItem, StyledFocus } from \"./ListItem.styles\";\nimport listItemClasses, { HvListItemClasses } from \"./listItemClasses\";\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   * It defaults to \"option\" if unspecified and the container list role is \"listbox\".\n   */\n  role?: string;\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className,\n  externalClassname\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className: clsx(className, externalClassname, element?.props?.className),\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className, externalClassname) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className: clsx(className, externalClassname, element?.props?.className),\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = (props: HvListItemProps) => {\n  const {\n    id,\n    classes,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext<any>(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        clsx(\n          listItemClasses.startAdornment,\n          disabled && listItemClasses.disabled\n        ),\n        clsx(classes?.startAdornment, disabled && classes?.disabled)\n      ),\n    [\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        clsx(\n          listItemClasses.endAdornment,\n          disabled && listItemClasses.disabled\n        ),\n        clsx(classes?.endAdornment, disabled && classes?.disabled)\n      ),\n    [classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    <StyledListItem\n      id={id}\n      role={role}\n      value={value}\n      onClick={handleOnClick}\n      onKeyDown={() => {}}\n      className={clsx(\n        className,\n        listItemClasses.root,\n        classes?.root,\n        !disableGutters && clsx(listItemClasses.gutters, classes?.gutters),\n        condensed && clsx(listItemClasses.condensed, classes?.condensed),\n        interactive && clsx(listItemClasses.interactive, classes?.interactive),\n        selected && clsx(listItemClasses.selected, classes?.selected),\n        disabled && clsx(listItemClasses.disabled, classes?.disabled),\n        startAdornment != null &&\n          clsx(listItemClasses.withStartAdornment, classes?.withStartAdornment),\n        endAdornment != null &&\n          clsx(listItemClasses.withEndAdornment, classes?.withEndAdornment)\n      )}\n      $gutters={!disableGutters}\n      $interactive={interactive}\n      $disabled={disabled || false}\n      $selected={selected || false}\n      $startAdornment={startAdornment != null}\n      $endAdornment={endAdornment != null}\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </StyledListItem>\n  );\n\n  return interactiveProp ? (\n    <StyledFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: clsx(classes?.focus, listItemClasses.focus) }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </StyledFocus>\n  ) : (\n    listItem\n  );\n};\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","externalClassname","React","cloneElement","clsx","props","checked","onChange","evt","applyClassNameToElement","HvListItem","id","classes","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","listItemClasses","clonedEndAdornment","roleOptionAriaProps","undefined","listItem","StyledListItem","onKeyDown","root","gutters","withStartAdornment","withEndAdornment","$gutters","$interactive","$disabled","$selected","$startAdornment","$endAdornment","StyledFocus","rootRef","disabledClass","strategy","focus","configuration"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: string;\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = (props: HvListItemProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n};\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","props","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","onKeyDown","HvFocus","rootRef","disabledClass","strategy","focus","configuration"],"mappings":"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"}

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js

@@ -1,78 +1,66 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../../utils/transientOptions.js";
 import { outlineStyles } from "../../../utils/focusUtils.js";
-import listItemClasses from "./listItemClasses.js";
-import { HvFocus } from "../../Focus/Focus.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvListItem", {
+  root: {
+    ...theme.typography.body,
+    padding: 0,
+    display: "block",
+    height: "32px",
+    lineHeight: "32px",
+    listStyleType: "none",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    position: "relative",
+    "&:not(:last-child)": {
+      marginBottom: "8px"
+    },
+    "&$condensed": {
+      marginBottom: 0
+    },
+    "&.HvIsFocused": {
+      ...outlineStyles,
+      backgroundColor: theme.colors.atmo3,
+      zIndex: 2
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledListItem = /* @__PURE__ */ _styled("li", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1palmq41"
-}, transientOptions) : _extends({}, {
-  target: "e1palmq41",
-  label: "StyledListItem"
-}, transientOptions))(({
-  $gutters,
-  $interactive,
-  $selected,
-  $disabled,
-  $startAdornment,
-  $endAdornment
-}) => ({
-  ...theme.typography.body,
-  padding: 0,
-  display: "block",
-  height: "32px",
-  lineHeight: "32px",
-  listStyleType: "none",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  position: "relative",
-  "&:not(:last-child)": {
-    marginBottom: "8px"
   },
-  [`&.${listItemClasses.condensed}`]: {
-    marginBottom: 0
+  focus: {
+    backgroundColor: theme.colors.atmo3,
+    zIndex: 2
   },
-  ...$gutters && {
+  startAdornment: {},
+  endAdornment: {},
+  gutters: {
     padding: `0 ${theme.space.xs}`,
-    [`&.${listItemClasses.withStartAdornment}`]: {
+    "&$withStartAdornment": {
       paddingLeft: 0
     },
-    [`&.${listItemClasses.withEndAdornment}`]: {
+    "&$withEndAdornment": {
       paddingRight: 0
     }
   },
-  ...$interactive && {
+  condensed: {},
+  interactive: {
     cursor: "pointer",
-    [`&:not(.${listItemClasses.disabled}):not(.${listItemClasses.selected}):hover`]: {
+    "&:not($disabled):not($selected):hover": {
       backgroundColor: theme.list.hoverColor
     },
-    [`&.${listItemClasses.disabled}`]: {
+    "&$disabled": {
       cursor: "not-allowed"
     }
   },
-  ...$selected && {
+  selected: {
     backgroundColor: theme.list.hoverColor
   },
-  ...$disabled && {
+  disabled: {
     color: theme.colors.secondary_60,
     backgroundColor: theme.list.disabledBackgroundColor
   },
-  ...$startAdornment && {
+  withStartAdornment: {
     "& > div": {
       float: "left"
     },
@@ -80,11 +68,11 @@ const StyledListItem = /* @__PURE__ */ _styled("li", process.env.NODE_ENV === "p
       boxShadow: "none !important",
       outline: "none !important"
     },
-    [`.${listItemClasses.disabled} > svg *.color0`]: {
+    "$disabled > svg *.color0": {
       fill: theme.colors.secondary_60
     }
   },
-  ...$endAdornment && {
+  withEndAdornment: {
     "& > div": {
       float: "right"
     },
@@ -92,27 +80,13 @@ const StyledListItem = /* @__PURE__ */ _styled("li", process.env.NODE_ENV === "p
       boxShadow: "none !important",
       outline: "none !important"
     },
-    [`.${listItemClasses.disabled} > svg *.color0`]: {
+    "$disabled > svg *.color0": {
       fill: theme.colors.secondary_60
     }
-  },
-  "&.HvIsFocused": {
-    ...outlineStyles,
-    backgroundColor: theme.colors.atmo3,
-    zIndex: 2
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGlzdENvbnRhaW5lci9MaXN0SXRlbS9MaXN0SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0xpc3RDb250YWluZXIvTGlzdEl0ZW0vTGlzdEl0ZW0uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBDU1NQcm9wZXJ0aWVzIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBIdkZvY3VzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvRm9jdXNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5pbXBvcnQgbGlzdEl0ZW1DbGFzc2VzIGZyb20gXCIuL2xpc3RJdGVtQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGlzdEl0ZW0gPSBzdHlsZWQoXG4gIFwibGlcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkZ3V0dGVycyxcbiAgICAkaW50ZXJhY3RpdmUsXG4gICAgJHNlbGVjdGVkLFxuICAgICRkaXNhYmxlZCxcbiAgICAkc3RhcnRBZG9ybm1lbnQsXG4gICAgJGVuZEFkb3JubWVudCxcbiAgfToge1xuICAgICRndXR0ZXJzOiBib29sZWFuO1xuICAgICRpbnRlcmFjdGl2ZTogYm9vbGVhbjtcbiAgICAkc2VsZWN0ZWQ6IGJvb2xlYW47XG4gICAgJGRpc2FibGVkOiBib29sZWFuO1xuICAgICRzdGFydEFkb3JubWVudDogYm9vbGVhbjtcbiAgICAkZW5kQWRvcm5tZW50OiBib29sZWFuO1xuICB9KSA9PiAoe1xuICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmJvZHkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgcGFkZGluZzogMCxcbiAgICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gICAgaGVpZ2h0OiBcIjMycHhcIixcbiAgICBsaW5lSGVpZ2h0OiBcIjMycHhcIixcbiAgICBsaXN0U3R5bGVUeXBlOiBcIm5vbmVcIixcbiAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICB0ZXh0T3ZlcmZsb3c6IFwiZWxsaXBzaXNcIixcbiAgICB3aGl0ZVNwYWNlOiBcIm5vd3JhcFwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG5cbiAgICBcIiY6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gICAgfSxcbiAgICBbYCYuJHtsaXN0SXRlbUNsYXNzZXMuY29uZGVuc2VkfWBdOiB7XG4gICAgICBtYXJnaW5Cb3R0b206IDAsXG4gICAgfSxcblxuICAgIC4uLigkZ3V0dGVycyAmJiB7XG4gICAgICBwYWRkaW5nOiBgMCAke3RoZW1lLnNwYWNlLnhzfWAsXG5cbiAgICAgIFtgJi4ke2xpc3RJdGVtQ2xhc3Nlcy53aXRoU3RhcnRBZG9ybm1lbnR9YF06IHtcbiAgICAgICAgcGFkZGluZ0xlZnQ6IDAsXG4gICAgICB9LFxuICAgICAgW2AmLiR7bGlzdEl0ZW1DbGFzc2VzLndpdGhFbmRBZG9ybm1lbnR9YF06IHtcbiAgICAgICAgcGFkZGluZ1JpZ2h0OiAwLFxuICAgICAgfSxcbiAgICB9KSxcbiAgICAuLi4oJGludGVyYWN0aXZlICYmIHtcbiAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgICBbYCY6bm90KC4ke2xpc3RJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0pOm5vdCguJHtsaXN0SXRlbUNsYXNzZXMuc2VsZWN0ZWR9KTpob3ZlcmBdOlxuICAgICAgICB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5saXN0LmhvdmVyQ29sb3IsXG4gICAgICAgIH0sXG4gICAgICBbYCYuJHtsaXN0SXRlbUNsYXNzZXMuZGlzYWJsZWR9YF06IHtcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkc2VsZWN0ZWQgJiYge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5saXN0LmhvdmVyQ29sb3IsXG4gICAgfSksXG4gICAgLi4uKCRkaXNhYmxlZCAmJiB7XG4gICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUubGlzdC5kaXNhYmxlZEJhY2tncm91bmRDb2xvcixcbiAgICB9KSxcbiAgICAuLi4oJHN0YXJ0QWRvcm5tZW50ICYmIHtcbiAgICAgIFwiJiA+IGRpdlwiOiB7XG4gICAgICAgIGZsb2F0OiBcImxlZnRcIixcbiAgICAgIH0sXG5cbiAgICAgIFwiJiBzdmdcIjoge1xuICAgICAgICBib3hTaGFkb3c6IFwibm9uZSAhaW1wb3J0YW50XCIsXG4gICAgICAgIG91dGxpbmU6IFwibm9uZSAhaW1wb3J0YW50XCIsXG4gICAgICB9LFxuICAgICAgW2AuJHtsaXN0SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gc3ZnICouY29sb3IwYF06IHtcbiAgICAgICAgZmlsbDogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRlbmRBZG9ybm1lbnQgJiYge1xuICAgICAgXCImID4gZGl2XCI6IHsgZmxvYXQ6IFwicmlnaHRcIiB9LFxuXG4gICAgICBcIiYgc3ZnXCI6IHtcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgICBvdXRsaW5lOiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgfSxcbiAgICAgIFtgLiR7bGlzdEl0ZW1DbGFzc2VzLmRpc2FibGVkfSA+IHN2ZyAqLmNvbG9yMGBdOiB7XG4gICAgICAgIGZpbGw6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIFwiJi5IdklzRm9jdXNlZFwiOiB7XG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICB6SW5kZXg6IDIsXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb2N1cyA9IHN0eWxlZChIdkZvY3VzKSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICB6SW5kZXg6IDIsXG59KTtcbiJdfQ== */");
-const StyledFocus = /* @__PURE__ */ _styled(HvFocus, process.env.NODE_ENV === "production" ? {
-  target: "e1palmq40"
-} : {
-  target: "e1palmq40",
-  label: "StyledFocus"
-})({
-  backgroundColor: theme.colors.atmo3,
-  zIndex: 2
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvTGlzdENvbnRhaW5lci9MaXN0SXRlbS9MaXN0SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRHMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9MaXN0Q29udGFpbmVyL0xpc3RJdGVtL0xpc3RJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQ1NTUHJvcGVydGllcyB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgSHZGb2N1cyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0ZvY3VzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcblxuaW1wb3J0IGxpc3RJdGVtQ2xhc3NlcyBmcm9tIFwiLi9saXN0SXRlbUNsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExpc3RJdGVtID0gc3R5bGVkKFxuICBcImxpXCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJGd1dHRlcnMsXG4gICAgJGludGVyYWN0aXZlLFxuICAgICRzZWxlY3RlZCxcbiAgICAkZGlzYWJsZWQsXG4gICAgJHN0YXJ0QWRvcm5tZW50LFxuICAgICRlbmRBZG9ybm1lbnQsXG4gIH06IHtcbiAgICAkZ3V0dGVyczogYm9vbGVhbjtcbiAgICAkaW50ZXJhY3RpdmU6IGJvb2xlYW47XG4gICAgJHNlbGVjdGVkOiBib29sZWFuO1xuICAgICRkaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkc3RhcnRBZG9ybm1lbnQ6IGJvb2xlYW47XG4gICAgJGVuZEFkb3JubWVudDogYm9vbGVhbjtcbiAgfSkgPT4gKHtcbiAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5ib2R5IGFzIENTU1Byb3BlcnRpZXMpLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIGhlaWdodDogXCIzMnB4XCIsXG4gICAgbGluZUhlaWdodDogXCIzMnB4XCIsXG4gICAgbGlzdFN0eWxlVHlwZTogXCJub25lXCIsXG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gICAgd2hpdGVTcGFjZTogXCJub3dyYXBcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuXG4gICAgXCImOm5vdCg6bGFzdC1jaGlsZClcIjoge1xuICAgICAgbWFyZ2luQm90dG9tOiBcIjhweFwiLFxuICAgIH0sXG4gICAgW2AmLiR7bGlzdEl0ZW1DbGFzc2VzLmNvbmRlbnNlZH1gXToge1xuICAgICAgbWFyZ2luQm90dG9tOiAwLFxuICAgIH0sXG5cbiAgICAuLi4oJGd1dHRlcnMgJiYge1xuICAgICAgcGFkZGluZzogYDAgJHt0aGVtZS5zcGFjZS54c31gLFxuXG4gICAgICBbYCYuJHtsaXN0SXRlbUNsYXNzZXMud2l0aFN0YXJ0QWRvcm5tZW50fWBdOiB7XG4gICAgICAgIHBhZGRpbmdMZWZ0OiAwLFxuICAgICAgfSxcbiAgICAgIFtgJi4ke2xpc3RJdGVtQ2xhc3Nlcy53aXRoRW5kQWRvcm5tZW50fWBdOiB7XG4gICAgICAgIHBhZGRpbmdSaWdodDogMCxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgLi4uKCRpbnRlcmFjdGl2ZSAmJiB7XG4gICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgW2AmOm5vdCguJHtsaXN0SXRlbUNsYXNzZXMuZGlzYWJsZWR9KTpub3QoLiR7bGlzdEl0ZW1DbGFzc2VzLnNlbGVjdGVkfSk6aG92ZXJgXTpcbiAgICAgICAge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUubGlzdC5ob3ZlckNvbG9yLFxuICAgICAgICB9LFxuICAgICAgW2AmLiR7bGlzdEl0ZW1DbGFzc2VzLmRpc2FibGVkfWBdOiB7XG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgfSxcbiAgICB9KSxcbiAgICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUubGlzdC5ob3ZlckNvbG9yLFxuICAgIH0pLFxuICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmxpc3QuZGlzYWJsZWRCYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSksXG4gICAgLi4uKCRzdGFydEFkb3JubWVudCAmJiB7XG4gICAgICBcIiYgPiBkaXZcIjoge1xuICAgICAgICBmbG9hdDogXCJsZWZ0XCIsXG4gICAgICB9LFxuXG4gICAgICBcIiYgc3ZnXCI6IHtcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgICBvdXRsaW5lOiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgfSxcbiAgICAgIFtgLiR7bGlzdEl0ZW1DbGFzc2VzLmRpc2FibGVkfSA+IHN2ZyAqLmNvbG9yMGBdOiB7XG4gICAgICAgIGZpbGw6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgICB9LFxuICAgIH0pLFxuICAgIC4uLigkZW5kQWRvcm5tZW50ICYmIHtcbiAgICAgIFwiJiA+IGRpdlwiOiB7IGZsb2F0OiBcInJpZ2h0XCIgfSxcblxuICAgICAgXCImIHN2Z1wiOiB7XG4gICAgICAgIGJveFNoYWRvdzogXCJub25lICFpbXBvcnRhbnRcIixcbiAgICAgICAgb3V0bGluZTogXCJub25lICFpbXBvcnRhbnRcIixcbiAgICAgIH0sXG4gICAgICBbYC4ke2xpc3RJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0gPiBzdmcgKi5jb2xvcjBgXToge1xuICAgICAgICBmaWxsOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgfSxcbiAgICB9KSxcbiAgICBcIiYuSHZJc0ZvY3VzZWRcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgekluZGV4OiAyLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRm9jdXMgPSBzdHlsZWQoSHZGb2N1cykoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgekluZGV4OiAyLFxufSk7XG4iXX0= */");
+});
 export {
-  StyledFocus,
-  StyledListItem
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=ListItem.styles.js.map

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport listItemClasses from \"./listItemClasses\";\n\nexport const StyledListItem = styled(\n  \"li\",\n  transientOptions\n)(\n  ({\n    $gutters,\n    $interactive,\n    $selected,\n    $disabled,\n    $startAdornment,\n    $endAdornment,\n  }: {\n    $gutters: boolean;\n    $interactive: boolean;\n    $selected: boolean;\n    $disabled: boolean;\n    $startAdornment: boolean;\n    $endAdornment: boolean;\n  }) => ({\n    ...(theme.typography.body as CSSProperties),\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n    [`&.${listItemClasses.condensed}`]: {\n      marginBottom: 0,\n    },\n\n    ...($gutters && {\n      padding: `0 ${theme.space.xs}`,\n\n      [`&.${listItemClasses.withStartAdornment}`]: {\n        paddingLeft: 0,\n      },\n      [`&.${listItemClasses.withEndAdornment}`]: {\n        paddingRight: 0,\n      },\n    }),\n    ...($interactive && {\n      cursor: \"pointer\",\n      [`&:not(.${listItemClasses.disabled}):not(.${listItemClasses.selected}):hover`]:\n        {\n          backgroundColor: theme.list.hoverColor,\n        },\n      [`&.${listItemClasses.disabled}`]: {\n        cursor: \"not-allowed\",\n      },\n    }),\n    ...($selected && {\n      backgroundColor: theme.list.hoverColor,\n    }),\n    ...($disabled && {\n      color: theme.colors.secondary_60,\n      backgroundColor: theme.list.disabledBackgroundColor,\n    }),\n    ...($startAdornment && {\n      \"& > div\": {\n        float: \"left\",\n      },\n\n      \"& svg\": {\n        boxShadow: \"none !important\",\n        outline: \"none !important\",\n      },\n      [`.${listItemClasses.disabled} > svg *.color0`]: {\n        fill: theme.colors.secondary_60,\n      },\n    }),\n    ...($endAdornment && {\n      \"& > div\": { float: \"right\" },\n\n      \"& svg\": {\n        boxShadow: \"none !important\",\n        outline: \"none !important\",\n      },\n      [`.${listItemClasses.disabled} > svg *.color0`]: {\n        fill: theme.colors.secondary_60,\n      },\n    }),\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  })\n);\n\nexport const StyledFocus = styled(HvFocus)({\n  backgroundColor: theme.colors.atmo3,\n  zIndex: 2,\n});\n"],"names":["StyledListItem","process","env","NODE_ENV","_extends","target","transientOptions","label","$gutters","$interactive","$selected","$disabled","$startAdornment","$endAdornment","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","listItemClasses","condensed","space","xs","withStartAdornment","paddingLeft","withEndAdornment","paddingRight","cursor","disabled","selected","backgroundColor","list","hoverColor","color","colors","secondary_60","disabledBackgroundColor","float","boxShadow","outline","fill","outlineStyles","atmo3","zIndex","StyledFocus","HvFocus"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYaA,MAAAA,yCACX,MAAIC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACJC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAQF,OAAO;AAAA,EACL,GAAIC,MAAMC,WAAWC;AAAAA,EACrBC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,YAAY;AAAA,EACZC,eAAe;AAAA,EACfC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,YAAY;AAAA,EACZC,UAAU;AAAA,EAEV,sBAAsB;AAAA,IACpBC,cAAc;AAAA,EAChB;AAAA,EACA,CAAE,KAAIC,gBAAgBC,WAAW,GAAG;AAAA,IAClCF,cAAc;AAAA,EAChB;AAAA,EAEA,GAAIlB,YAAY;AAAA,IACdS,SAAU,KAAIH,MAAMe,MAAMC;AAAAA,IAE1B,CAAE,KAAIH,gBAAgBI,oBAAoB,GAAG;AAAA,MAC3CC,aAAa;AAAA,IACf;AAAA,IACA,CAAE,KAAIL,gBAAgBM,kBAAkB,GAAG;AAAA,MACzCC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,GAAIzB,gBAAgB;AAAA,IAClB0B,QAAQ;AAAA,IACR,CAAE,UAASR,gBAAgBS,kBAAkBT,gBAAgBU,iBAAiB,GAC5E;AAAA,MACEC,iBAAiBxB,MAAMyB,KAAKC;AAAAA,IAC9B;AAAA,IACF,CAAE,KAAIb,gBAAgBS,UAAU,GAAG;AAAA,MACjCD,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,GAAIzB,aAAa;AAAA,IACf4B,iBAAiBxB,MAAMyB,KAAKC;AAAAA,EAC9B;AAAA,EACA,GAAI7B,aAAa;AAAA,IACf8B,OAAO3B,MAAM4B,OAAOC;AAAAA,IACpBL,iBAAiBxB,MAAMyB,KAAKK;AAAAA,EAC9B;AAAA,EACA,GAAIhC,mBAAmB;AAAA,IACrB,WAAW;AAAA,MACTiC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,CAAE,IAAGpB,gBAAgBS,yBAAyB,GAAG;AAAA,MAC/CY,MAAMlC,MAAM4B,OAAOC;AAAAA,IACrB;AAAA,EACF;AAAA,EACA,GAAI9B,iBAAiB;AAAA,IACnB,WAAW;AAAA,MAAEgC,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,CAAE,IAAGpB,gBAAgBS,yBAAyB,GAAG;AAAA,MAC/CY,MAAMlC,MAAM4B,OAAOC;AAAAA,IACrB;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,GAAGM;AAAAA,IACHX,iBAAiBxB,MAAM4B,OAAOQ;AAAAA,IAC9BC,QAAQ;AAAA,EACV;AACF,IAAElD,QAAAC,IAAAC,stIACJ;AAEO,MAAMiD,cAAqBC,wBAAAA,SAAOpD,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAAE;AAAA,EACzC+B,iBAAiBxB,MAAM4B,OAAOQ;AAAAA,EAC9BC,QAAQ;AACV,GAAClD,QAAAC,IAAAC,aAAC,eAAA,KAAA,qrIAAA;"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.list.hoverColor,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.list.hoverColor },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.list.disabledBackgroundColor,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","outlineStyles","backgroundColor","colors","atmo3","zIndex","focus","startAdornment","endAdornment","gutters","space","xs","paddingLeft","paddingRight","condensed","interactive","cursor","list","hoverColor","selected","disabled","color","secondary_60","disabledBackgroundColor","withStartAdornment","float","boxShadow","outline","fill","withEndAdornment"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,MAAMC,WAAWC;AAAAA,IACpBC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACbA,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAGC;AAAAA,MACHC,iBAAiBd,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,MAAMsB,MAAMC;AAAAA,IAE1B,wBAAwB;AAAA,MACtBC,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,aAAa;AAAA,IACXC,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvCd,iBAAiBd,MAAM6B,KAAKC;AAAAA,IAC9B;AAAA,IACA,cAAc;AAAA,MACZF,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAG,UAAU;AAAA,IAAEjB,iBAAiBd,MAAM6B,KAAKC;AAAAA,EAAW;AAAA,EACnDE,UAAU;AAAA,IACRC,OAAOjC,MAAMe,OAAOmB;AAAAA,IACpBpB,iBAAiBd,MAAM6B,KAAKM;AAAAA,EAC9B;AAAA,EACAC,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AAAA,EACAO,kBAAkB;AAAA,IAChB,WAAW;AAAA,MAAEJ,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js

@@ -1,9 +1,8 @@
-import { clsx } from "clsx";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useMemo } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { StyledDataContainer } from "./OverflowTooltip.styles.js";
-import overflowTooltipClasses from "./overflowTooltipClasses.js";
+import { useClasses } from "./OverflowTooltip.styles.js";
+import { staticClasses } from "./OverflowTooltip.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -12,7 +11,7 @@ const HvOverflowTooltip = (props) => {
   var _a;
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     data,
     open,
@@ -20,6 +19,10 @@ const HvOverflowTooltip = (props) => {
     placement = "top-start",
     tooltipsProps
   } = useDefaultProps("HvOverflowTooltip", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     width = 0,
     ref
@@ -33,19 +36,21 @@ const HvOverflowTooltip = (props) => {
   const scrollWidth = ((_a = ref.current) == null ? void 0 : _a.scrollWidth) || 0;
   const isOverflowing = scrollWidth - width >= 1;
   const isParag = useMemo(() => paragraphOverflow && isParagraph(data == null ? void 0 : data.toString()), [data, paragraphOverflow]);
-  const content = useMemo(() => /* @__PURE__ */ jsx(StyledDataContainer, {
+  const content = useMemo(() => /* @__PURE__ */ jsx("div", {
     ref,
-    className: clsx(className, !isParag && clsx(overflowTooltipClasses.tooltipAnchor, classes == null ? void 0 : classes.tooltipAnchor), isParag && clsx(overflowTooltipClasses.tooltipAnchorParagraph, classes == null ? void 0 : classes.tooltipAnchorParagraph)),
-    $isParag: isParag,
+    className: cx({
+      [classes.tooltipAnchor]: !isParag,
+      [classes.tooltipAnchorParagraph]: isParag
+    }, className),
     children: data
-  }), [className, classes == null ? void 0 : classes.tooltipAnchor, classes == null ? void 0 : classes.tooltipAnchorParagraph, data, isParag, ref]);
+  }), [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, cx, data, isParag, ref]);
   return open || isOverflowing ? /* @__PURE__ */ jsx(HvTooltip, {
     id,
     disableHoverListener: !isOverflowing,
     open,
     placement,
     title: /* @__PURE__ */ jsx(HvTypography, {
-      className: clsx(overflowTooltipClasses.tooltipData, classes == null ? void 0 : classes.tooltipData),
+      className: classes.tooltipData,
       variant: "body",
       children: data
     }),
@@ -54,6 +59,7 @@ const HvOverflowTooltip = (props) => {
   }) : content;
 };
 export {
-  HvOverflowTooltip
+  HvOverflowTooltip,
+  staticClasses as overflowTooltipClasses
 };
 //# sourceMappingURL=OverflowTooltip.js.map

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useMemo } from \"react\";\n\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { StyledDataContainer } from \"./OverflowTooltip.styles\";\nimport overflowTooltipClasses, {\n  HvOverflowTooltipClasses,\n} from \"./overflowTooltipClasses\";\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true` the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n\n  const { width = 0, ref } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n  const scrollWidth = ref.current?.scrollWidth || 0;\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = scrollWidth - width >= 1;\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  const content = useMemo(\n    () => (\n      <StyledDataContainer\n        ref={ref}\n        className={clsx(\n          className,\n          !isParag &&\n            clsx(overflowTooltipClasses.tooltipAnchor, classes?.tooltipAnchor),\n          isParag &&\n            clsx(\n              overflowTooltipClasses.tooltipAnchorParagraph,\n              classes?.tooltipAnchorParagraph\n            )\n        )}\n        $isParag={isParag}\n      >\n        {data}\n      </StyledDataContainer>\n    ),\n    [\n      className,\n      classes?.tooltipAnchor,\n      classes?.tooltipAnchorParagraph,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return open || isOverflowing ? (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography\n          className={clsx(\n            overflowTooltipClasses.tooltipData,\n            classes?.tooltipData\n          )}\n          variant=\"body\"\n        >\n          {data}\n        </HvTypography>\n      }\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  ) : (\n    content\n  );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","_jsx","StyledDataContainer","clsx","overflowTooltipClasses","tooltipAnchor","tooltipAnchorParagraph","$isParag","HvTooltip","disableHoverListener","title","HvTypography","tooltipData","variant"],"mappings":";;;;;;;;;AA2CA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,qBAAqBT,KAAK;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,kBAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,gBAAcN,SAAIO,YAAJP,mBAAaM,gBAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,QACd,MAAMf,qBAAqBV,YAAYQ,6BAAMkB,UAAU,GACvD,CAAClB,MAAME,iBAAiB,CAC1B;AAEA,QAAMiB,UAAUF,QACd,MACEG,oBAACC,qBAAmB;AAAA,IAClBd;AAAAA,IACAR,WAAWuB,KACTvB,WACA,CAACiB,WACCM,KAAKC,uBAAuBC,eAAe1B,mCAAS0B,aAAa,GACnER,WACEM,KACEC,uBAAuBE,wBACvB3B,mCAAS2B,sBACX,CACJ;AAAA,IACAC,UAAUV;AAAAA,IAAQvB,UAEjBO;AAAAA,EACkB,CAAA,GAEvB,CACED,WACAD,mCAAS0B,eACT1B,mCAAS2B,wBACTzB,MACAgB,SACAT,GAAG,CAEP;AAEON,SAAAA,QAAQc,gBACbK,oBAACO,WAAS;AAAA,IACR9B;AAAAA,IACA+B,sBAAsB,CAACb;AAAAA,IACvBd;AAAAA,IACAE;AAAAA,IACA0B,2BACGC,cAAY;AAAA,MACX/B,WAAWuB,KACTC,uBAAuBQ,aACvBjC,mCAASiC,WACX;AAAA,MACAC,SAAQ;AAAA,MAAMvC,UAEbO;AAAAA,IAAAA,CACW;AAAA,IACf,GACGI;AAAAA,IAAaX,UAEhB0B;AAAAA,EACQ,CAAA,IAEXA;AAEJ;"}
+{"version":3,"file":"OverflowTooltip.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true` the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { width = 0, ref } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n  const scrollWidth = ref.current?.scrollWidth || 0;\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = scrollWidth - width >= 1;\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return open || isOverflowing ? (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  ) : (\n    content\n  );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","scrollWidth","current","isOverflowing","isParag","useMemo","toString","content","_jsx","tooltipAnchor","tooltipAnchorParagraph","HvTooltip","disableHoverListener","title","HvTypography","tooltipData","variant"],"mappings":";;;;;;;;AAuCA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,kBAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,gBAAcN,SAAIO,YAAJP,mBAAaM,gBAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,QACd,MACEG,oBAAA,OAAA;AAAA,IACEb;AAAAA,IACAV,WAAWO,GACT;AAAA,MACE,CAACT,QAAQ0B,aAAa,GAAG,CAACL;AAAAA,MAC1B,CAACrB,QAAQ2B,sBAAsB,GAAGN;AAAAA,OAEpCnB,SACF;AAAA,IAAEP,UAEDQ;AAAAA,EACE,CAAA,GAEP,CACED,WACAF,QAAQ0B,eACR1B,QAAQ2B,wBACRlB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAEOR,SAAAA,QAAQgB,gBACbK,oBAACG,WAAS;AAAA,IACR7B;AAAAA,IACA8B,sBAAsB,CAACT;AAAAA,IACvBhB;AAAAA,IACAE;AAAAA,IACAwB,2BACGC,cAAY;AAAA,MAAC7B,WAAWF,QAAQgC;AAAAA,MAAaC,SAAQ;AAAA,MAAMtC,UACzDQ;AAAAA,IAAAA,CACW;AAAA,IACf,GACGI;AAAAA,IAAaZ,UAEhB6B;AAAAA,EACQ,CAAA,IAEXA;AAEJ;"}

package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js

@@ -1,40 +1,23 @@
-import _styled from "@emotion/styled/base";
-import { transientOptions } from "../../utils/transientOptions.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledDataContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e199gfye0"
-}, transientOptions) : _extends({}, {
-  target: "e199gfye0",
-  label: "StyledDataContainer"
-}, transientOptions))(({
-  $isParag
-}) => ({
-  ...$isParag && {
-    overflow: "hidden",
-    display: "-webkit-box"
-    // "-webkit-line-clamp": "2",
-    // "-webkit-box-orient": "vertical",
-  },
-  ...!$isParag && {
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvOverflowTooltip", {
+  tooltipData: {},
+  tooltipAnchor: {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis"
+  },
+  tooltipAnchorParagraph: {
+    overflow: "hidden",
+    display: "-webkit-box",
+    "-webkit-line-clamp": 2,
+    "-webkit-box-orient": "vertical"
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvT3ZlcmZsb3dUb29sdGlwL092ZXJmbG93VG9vbHRpcC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdtQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL092ZXJmbG93VG9vbHRpcC9PdmVyZmxvd1Rvb2x0aXAuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWREYXRhQ29udGFpbmVyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRpc1BhcmFnIH06IHsgJGlzUGFyYWc/OiBib29sZWFuIH0pID0+ICh7XG4gIC4uLigkaXNQYXJhZyAmJiB7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgZGlzcGxheTogXCItd2Via2l0LWJveFwiLFxuICAgIC8vIFwiLXdlYmtpdC1saW5lLWNsYW1wXCI6IFwiMlwiLFxuICAgIC8vIFwiLXdlYmtpdC1ib3gtb3JpZW50XCI6IFwidmVydGljYWxcIixcbiAgfSksXG4gIC4uLighJGlzUGFyYWcgJiYge1xuICAgIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gIH0pLFxufSkpO1xuIl19 */");
+});
 export {
-  StyledDataContainer
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=OverflowTooltip.styles.js.map

package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.styles.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledDataContainer = styled(\n  \"div\",\n  transientOptions\n)(({ $isParag }: { $isParag?: boolean }) => ({\n  ...($isParag && {\n    overflow: \"hidden\",\n    display: \"-webkit-box\",\n    // \"-webkit-line-clamp\": \"2\",\n    // \"-webkit-box-orient\": \"vertical\",\n  }),\n  ...(!$isParag && {\n    whiteSpace: \"nowrap\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n  }),\n}));\n"],"names":["StyledDataContainer","process","env","NODE_ENV","_extends","target","transientOptions","label","$isParag","overflow","display","whiteSpace","textOverflow"],"mappings":";;;;;;;;;;;;;;;;AAGaA,MAAAA,8CACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAiC,OAAO;AAAA,EAC3C,GAAIA,YAAY;AAAA,IACdC,UAAU;AAAA,IACVC,SAAS;AAAA;AAAA;AAAA,EAGX;AAAA,EACA,GAAI,CAACF,YAAY;AAAA,IACfG,YAAY;AAAA,IACZF,UAAU;AAAA,IACVG,cAAc;AAAA,EAChB;AACF,IAAEX,QAAAC,IAAAC,aAAC,eAAA,KAAA,6rCAAA;"}
+{"version":3,"file":"OverflowTooltip.styles.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvOverflowTooltip\",\n  {\n    tooltipData: {},\n    tooltipAnchor: {\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    tooltipAnchorParagraph: {\n      overflow: \"hidden\",\n      display: \"-webkit-box\",\n      \"-webkit-line-clamp\": 2,\n      \"-webkit-box-orient\": \"vertical\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,qBACA;AAAA,EACEC,aAAa,CAAC;AAAA,EACdC,eAAe;AAAA,IACbC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,cAAc;AAAA,EAChB;AAAA,EACAC,wBAAwB;AAAA,IACtBF,UAAU;AAAA,IACVG,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,sBAAsB;AAAA,EACxB;AACF,CACF;"}

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -103,10 +103,10 @@ const HvScrollToHorizontal = (props) => {
       marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
       marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
       backgroundColor: hexToRgbA(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-    }), className, classes.root, {
+    }), classes.root, {
       [classes.positionSticky]: position === "sticky",
       [classes.positionFixed]: position === "fixed"
-    }),
+    }, className),
     id: elementId,
     ...others,
     children: tabs