@hitachivantara/uikit-react-core 5.31.0 → 5.33.0

package/dist/cjs/components/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import {\n  AriaRole,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { FixedSizeList } from \"react-window\";\n\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { setId } from \"@core/utils/setId\";\nimport { wrapperTooltip } from \"@core/utils/wrapperTooltip\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvLink } from \"@core/components/Link\";\nimport { HvRadio } from \"@core/components/Radio\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\nimport { HvListLabels, HvListValue } from \"./types\";\n\nexport { staticClasses as listClasses };\n\nexport type HvListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\" | \"onClick\"> {\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - id: The id of the item.\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - isHidden: Is item visible.\n   * - icon: The icon.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   * - path: The path to navigate to.\n   */\n  values: HvListValue[];\n  /** If true renders a multi select list. */\n  multiSelect?: boolean;\n  /**\n   * If true renders select all option for multi selection lists with selectors.\n   * note: It will only be rendered if multiSelect and useSelector props are set to true.\n   */\n  showSelectAll?: boolean;\n  /** An object containing all the labels for the dropdown. */\n  labels?: HvListLabels;\n  /** If true renders list items with radio or checkbox selectors. */\n  useSelector?: boolean;\n  /** Call back fired when list item is selected. Returns selection state. */\n  onChange?: (value: HvListValue[]) => void;\n  /** Call back fired when list item is selected. Returns selected item. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** If `true` the list items will show the selection state. */\n  selectable?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** If `true` the list will be rendered without vertical spacing. */\n  condensed?: boolean;\n  /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n  hasTooltips?: boolean;\n  /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n  height?: number;\n  /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n  virtualized?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListClasses;\n}\n\nconst DEFAULT_LABELS = {\n  selectAll: \"Select All\",\n  selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = (props: HvListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    multiSelect = false,\n    hasTooltips = false,\n    showSelectAll = false,\n    labels = DEFAULT_LABELS,\n    useSelector = false,\n    selectable = true,\n    singleSelectionToggle = true,\n    condensed = false,\n    onChange,\n    onClick,\n    values: valuesProp = [],\n    height,\n    virtualized = false,\n    ...others\n  } = useDefaultProps(\"HvList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [list, setList, selection] = useSelectableList(valuesProp);\n  const listRef = useRef<any>(null);\n\n  useEffect(() => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList: HvListValue[] = parseList(\n      undefined,\n      passedProps,\n      undefined,\n      valuesProp\n    );\n\n    setList(parsedList);\n  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n  const [role, itemRole] = useMemo<[AriaRole, AriaRole]>(() => {\n    // selectors are responsible for the role & selection state\n    if (selectable && useSelector) return [\"list\", \"listitem\"];\n\n    if (selectable) return [\"listbox\", \"option\"];\n    return [\"menu\", \"menuitem\"];\n  }, [selectable, useSelector]);\n\n  const handleSelect = (evt, item) => {\n    if (!item.path) evt.preventDefault();\n    if (item.disabled) return;\n\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList = parseList(item, passedProps, undefined, list);\n    setList(parsedList);\n\n    onClick?.(evt, item);\n    onChange?.(parsedList);\n  };\n\n  const handleSelectAll = () => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const anySelectableSelected = list.some(\n      (elem) => elem.selected || elem.disabled\n    );\n    const parsedList = parseList(\n      undefined,\n      passedProps,\n      !anySelectableSelected,\n      list\n    );\n    setList(parsedList);\n\n    onChange?.(parsedList);\n  };\n\n  const renderLeftIcon = (item) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : item.icon?.({\n          isSelected: item.selected,\n          isDisabled: item.disabled,\n        });\n  };\n\n  const renderSelectAll = () => {\n    const { selectAll, selectionConjunction } = labels;\n\n    const anySelected = !!selection?.length;\n    const allSelected = selection.length === list.length;\n\n    const selectionLabel = (\n      <HvTypography component=\"span\">\n        {!anySelected ? (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        ) : (\n          <>\n            <b>{selection.length}</b>\n            {`\\xa0${selectionConjunction}\\xa0`}\n            {list.length}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <HvCheckBox\n        id={setId(id, \"select-all\")}\n        label={selectionLabel}\n        onChange={handleSelectAll}\n        className={classes.selectAllSelector}\n        indeterminate={anySelected && !allSelected}\n        checked={allSelected}\n      />\n    );\n  };\n\n  const renderItemText = (item) => {\n    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n    return !multiSelect && item.path ? (\n      <HvLink key={item.label} route={item.path} classes={{ a: classes.link }}>\n        <ItemText />\n      </HvLink>\n    ) : (\n      <ItemText />\n    );\n  };\n\n  const renderMultiSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvCheckBox\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          onChange={(evt) => handleSelect(evt, item)}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n\n    return renderItemText(item);\n  };\n\n  const renderSingleSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvRadio\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n    return renderItemText(item);\n  };\n\n  const renderListItem = (item, i, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    let startAdornment = null;\n    if (!useSelector && item.icon) {\n      startAdornment = renderLeftIcon(item);\n    }\n\n    return (\n      <HvListItem\n        key={i}\n        id={itemId}\n        role={itemRole}\n        disabled={item.disabled || undefined}\n        className={classes.item}\n        classes={{\n          selected: cx({\n            [classes.itemSelector]: useSelector || multiSelect,\n          }),\n        }}\n        selected={multiSelect || selected ? selected : undefined}\n        onClick={(evt) => handleSelect(evt, item)}\n        startAdornment={startAdornment}\n        endAdornment={\n          item.showNavIcon && (\n            <DropRightXS className={classes.box} iconSize=\"XS\" />\n          )\n        }\n        {...otherProps}\n      >\n        {multiSelect\n          ? renderMultiSelectItem(item, itemId)\n          : renderSingleSelectItem(item, itemId)}\n      </HvListItem>\n    );\n  };\n\n  const filteredList = list.filter((it) => !it.isHidden);\n  const anySelected = list\n    .map((item) => item.selected && !item.disabled)\n    .reduce((result, selected) => result || selected, false);\n\n  const selectedItemIndex = list.findIndex((item) => item.selected);\n  useEffect(() => {\n    if (selectedItemIndex >= 0 && listRef.current !== null) {\n      listRef.current.scrollToItem(selectedItemIndex);\n    }\n  }, [listRef, selectedItemIndex]);\n\n  const renderVirtualizedListItem = ({ index, style }) => {\n    const item = filteredList[index];\n    const tabIndex =\n      item.tabIndex ||\n      (!anySelected && index === 0) ||\n      (item.selected && !item.disabled)\n        ? 0\n        : -1;\n\n    return renderListItem(item, index, {\n      style: {\n        ...style,\n        top: `${parseFloat(style.top) + 5}px`,\n        left: `${parseFloat(style.left) + 5}px`,\n        width: `calc(${parseFloat(style.width)}% - 10px)`,\n      },\n      tabIndex,\n      interactive: true,\n      condensed,\n      disableGutters: useSelector,\n    });\n  };\n\n  const ariaMultiSelectable = (role === \"listbox\" && multiSelect) || undefined;\n\n  const ListContainer = useMemo(() => {\n    return forwardRef<HTMLUListElement, HvListContainerProps>(\n      ({ ...rest }, ref) => (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          ref={ref}\n          {...rest}\n        />\n      )\n    );\n  }, [\n    cx,\n    id,\n    useSelector,\n    className,\n    classes.root,\n    role,\n    condensed,\n    ariaMultiSelectable,\n  ]);\n\n  // Render nothing if there are no items\n  if (filteredList.length === 0) return null;\n\n  return (\n    <>\n      {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n      {!virtualized ? (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          {...others}\n        >\n          {filteredList.map((item, i) => renderListItem(item, i))}\n        </HvListContainer>\n      ) : (\n        <FixedSizeList\n          ref={listRef}\n          className={classes.virtualizedRoot}\n          height={(height || 0) + 5}\n          width=\"100%\"\n          itemCount={filteredList.length}\n          itemSize={condensed ? 32 : 40}\n          innerElementType={ListContainer}\n          {...others}\n        >\n          {renderVirtualizedListItem}\n        </FixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","selectAll","selectionConjunction","HvList","props","id","classes","classesProp","className","multiSelect","hasTooltips","showSelectAll","labels","useSelector","selectable","singleSelectionToggle","condensed","onChange","onClick","values","valuesProp","height","virtualized","others","useDefaultProps","cx","useClasses","list","setList","selection","useSelectableList","listRef","useRef","useEffect","passedProps","parsedList","parseList","undefined","role","itemRole","useMemo","handleSelect","evt","item","path","preventDefault","disabled","handleSelectAll","anySelectableSelected","some","elem","selected","renderLeftIcon","isValidElement","icon","isSelected","isDisabled","renderSelectAll","anySelected","length","allSelected","selectionLabel","jsx","HvTypography","jsxs","Fragment","HvCheckBox","setId","selectAllSelector","renderItemText","ItemText","wrapperTooltip","label","HvLink","a","link","renderMultiSelectItem","itemId","Selection","root","selectorRoot","container","selectorContainer","truncate","renderSingleSelectItem","HvRadio","renderListItem","i","otherProps","startAdornment","HvListItem","itemSelector","showNavIcon","DropRightXS","box","filteredList","filter","it","isHidden","map","reduce","result","selectedItemIndex","findIndex","current","scrollToItem","renderVirtualizedListItem","index","style","tabIndex","top","parseFloat","left","width","interactive","disableGutters","ariaMultiSelectable","ListContainer","forwardRef","rest","ref","HvListContainer","FixedSizeList","virtualizedRoot"],"mappings":"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"}
+{"version":3,"file":"List.cjs","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import {\n  AriaRole,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { FixedSizeList } from \"react-window\";\n\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { setId } from \"@core/utils/setId\";\nimport { wrapperTooltip } from \"@core/utils/wrapperTooltip\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvLink } from \"@core/components/Link\";\nimport { HvRadio } from \"@core/components/Radio\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\nimport { HvListLabels, HvListValue } from \"./types\";\n\nexport { staticClasses as listClasses };\n\nexport type HvListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\" | \"onClick\"> {\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - id: The id of the item.\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - isHidden: Is item visible.\n   * - icon: The icon.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   * - path: The path to navigate to.\n   */\n  values: HvListValue[];\n  /** If true renders a multi select list. */\n  multiSelect?: boolean;\n  /**\n   * If true renders select all option for multi selection lists with selectors.\n   * note: It will only be rendered if multiSelect and useSelector props are set to true.\n   */\n  showSelectAll?: boolean;\n  /** An object containing all the labels for the dropdown. */\n  labels?: HvListLabels;\n  /** If true renders list items with radio or checkbox selectors. */\n  useSelector?: boolean;\n  /** Call back fired when list item is selected. Returns selection state. */\n  onChange?: (value: HvListValue[]) => void;\n  /** Call back fired when list item is selected. Returns selected item. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** If `true` the list items will show the selection state. */\n  selectable?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** If `true` the list will be rendered without vertical spacing. */\n  condensed?: boolean;\n  /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n  hasTooltips?: boolean;\n  /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n  height?: number;\n  /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n  virtualized?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListClasses;\n}\n\nconst DEFAULT_LABELS = {\n  selectAll: \"Select All\",\n  selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = (props: HvListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    multiSelect = false,\n    hasTooltips = false,\n    showSelectAll = false,\n    labels = DEFAULT_LABELS,\n    useSelector = false,\n    selectable = true,\n    singleSelectionToggle = true,\n    condensed = false,\n    onChange,\n    onClick,\n    values: valuesProp = [],\n    height,\n    virtualized = false,\n    ...others\n  } = useDefaultProps(\"HvList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [list, setList, selection] = useSelectableList(valuesProp);\n  const listRef = useRef<any>(null);\n\n  useEffect(() => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList: HvListValue[] = parseList(\n      undefined,\n      passedProps,\n      undefined,\n      valuesProp\n    );\n\n    setList(parsedList);\n  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n  const [role, itemRole] = useMemo<[AriaRole, AriaRole]>(() => {\n    // selectors are responsible for the role & selection state\n    if (selectable && useSelector) return [\"list\", \"listitem\"];\n\n    if (selectable) return [\"listbox\", \"option\"];\n    return [\"menu\", \"menuitem\"];\n  }, [selectable, useSelector]);\n\n  const handleSelect = (evt, item) => {\n    if (!item.path) evt.preventDefault();\n    if (item.disabled) return;\n\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList = parseList(item, passedProps, undefined, list);\n    setList(parsedList);\n\n    onClick?.(evt, item);\n    onChange?.(parsedList);\n  };\n\n  const handleSelectAll = () => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const anySelectableSelected = list.some(\n      (elem) => elem.selected || elem.disabled\n    );\n    const parsedList = parseList(\n      undefined,\n      passedProps,\n      !anySelectableSelected,\n      list\n    );\n    setList(parsedList);\n\n    onChange?.(parsedList);\n  };\n\n  const renderLeftIcon = (item) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : item.icon?.({\n          isSelected: item.selected,\n          isDisabled: item.disabled,\n        });\n  };\n\n  const renderSelectAll = () => {\n    const { selectAll, selectionConjunction } = labels;\n\n    const anySelected = !!selection?.length;\n    const allSelected = selection.length === list.length;\n\n    const selectionLabel = (\n      <HvTypography component=\"span\">\n        {!anySelected ? (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        ) : (\n          <>\n            <b>{selection.length}</b>\n            {`\\xa0${selectionConjunction}\\xa0`}\n            {list.length}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <HvCheckBox\n        id={setId(id, \"select-all\")}\n        label={selectionLabel}\n        onChange={handleSelectAll}\n        className={classes.selectAllSelector}\n        indeterminate={anySelected && !allSelected}\n        checked={allSelected}\n      />\n    );\n  };\n\n  const renderItemText = (item) => {\n    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n    return !multiSelect && item.path ? (\n      <HvLink key={item.label} route={item.path} classes={{ a: classes.link }}>\n        <ItemText />\n      </HvLink>\n    ) : (\n      <ItemText />\n    );\n  };\n\n  const renderMultiSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvCheckBox\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          onChange={(evt) => handleSelect(evt, item)}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n\n    return renderItemText(item);\n  };\n\n  const renderSingleSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvRadio\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n    return renderItemText(item);\n  };\n\n  const renderListItem = (item, i, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    let startAdornment = null;\n    if (!useSelector && item.icon) {\n      startAdornment = renderLeftIcon(item);\n    }\n\n    return (\n      <HvListItem\n        key={i}\n        id={itemId}\n        role={itemRole}\n        disabled={item.disabled || undefined}\n        className={classes.item}\n        classes={{\n          selected: cx({\n            [classes.itemSelector]: useSelector || multiSelect,\n          }),\n        }}\n        selected={multiSelect || selected ? selected : undefined}\n        onClick={(evt) => handleSelect(evt, item)}\n        startAdornment={startAdornment}\n        endAdornment={\n          item.showNavIcon && (\n            <DropRightXS className={classes.box} iconSize=\"XS\" />\n          )\n        }\n        {...otherProps}\n      >\n        {multiSelect\n          ? renderMultiSelectItem(item, itemId)\n          : renderSingleSelectItem(item, itemId)}\n      </HvListItem>\n    );\n  };\n\n  const filteredList = list.filter((it) => !it.isHidden);\n  const anySelected = list\n    .map((item) => item.selected && !item.disabled)\n    .reduce((result, selected) => result || selected, false);\n\n  const selectedItemIndex = list.findIndex((item) => item.selected);\n  useEffect(() => {\n    if (selectedItemIndex >= 0 && listRef.current !== null) {\n      listRef.current.scrollToItem(selectedItemIndex);\n    }\n  }, [listRef, selectedItemIndex]);\n\n  const renderVirtualizedListItem = ({ index, style }) => {\n    const item = filteredList[index];\n    const tabIndex =\n      item.tabIndex ||\n      (!anySelected && index === 0) ||\n      (item.selected && !item.disabled)\n        ? 0\n        : -1;\n\n    return renderListItem(item, index, {\n      style: {\n        ...style,\n        top: `${parseFloat(style.top) + 5}px`,\n        left: `${parseFloat(style.left) + 5}px`,\n        width: `calc(${parseFloat(style.width)}% - 10px)`,\n      },\n      tabIndex,\n      interactive: true,\n      condensed,\n      disableGutters: useSelector,\n    });\n  };\n\n  const ariaMultiSelectable = (role === \"listbox\" && multiSelect) || undefined;\n\n  const ListContainer = useMemo(() => {\n    return forwardRef<HTMLUListElement, HvListContainerProps>(\n      ({ ...rest }, ref) => (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          ref={ref}\n          {...rest}\n        />\n      )\n    );\n  }, [\n    cx,\n    id,\n    useSelector,\n    className,\n    classes.root,\n    role,\n    condensed,\n    ariaMultiSelectable,\n  ]);\n\n  // Render nothing if there are no items\n  if (filteredList.length === 0) return null;\n\n  return (\n    <>\n      {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n      {!virtualized ? (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          {...others}\n        >\n          {filteredList.map((item, i) => renderListItem(item, i))}\n        </HvListContainer>\n      ) : (\n        <FixedSizeList\n          ref={listRef}\n          className={classes.virtualizedRoot}\n          height={(height || 0) + 5}\n          width=\"100%\"\n          itemCount={filteredList.length}\n          itemSize={condensed ? 32 : 40}\n          innerElementType={ListContainer}\n          {...others}\n        >\n          {renderVirtualizedListItem}\n        </FixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","selectAll","selectionConjunction","HvList","props","id","classes","classesProp","className","multiSelect","hasTooltips","showSelectAll","labels","useSelector","selectable","singleSelectionToggle","condensed","onChange","onClick","values","valuesProp","height","virtualized","others","useDefaultProps","cx","useClasses","list","setList","selection","useSelectableList","listRef","useRef","useEffect","passedProps","parsedList","parseList","undefined","role","itemRole","useMemo","handleSelect","evt","item","path","preventDefault","disabled","handleSelectAll","anySelectableSelected","some","elem","selected","renderLeftIcon","isValidElement","icon","isSelected","isDisabled","renderSelectAll","anySelected","length","allSelected","selectionLabel","jsx","HvTypography","jsxs","Fragment","HvCheckBox","setId","selectAllSelector","renderItemText","ItemText","wrapperTooltip","label","HvLink","a","link","renderMultiSelectItem","itemId","Selection","root","selectorRoot","container","selectorContainer","truncate","renderSingleSelectItem","HvRadio","renderListItem","i","otherProps","startAdornment","HvListItem","itemSelector","showNavIcon","DropRightXS","box","filteredList","filter","it","isHidden","map","reduce","result","selectedItemIndex","findIndex","current","scrollToItem","renderVirtualizedListItem","index","style","tabIndex","top","parseFloat","left","width","interactive","disableGutters","ariaMultiSelectable","ListContainer","forwardRef","rest","ref","HvListContainer","FixedSizeList","virtualizedRoot"],"mappings":"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"}

package/dist/cjs/components/List/utils.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const isItemSelected = (item, newItem) => {
-  const selectionKey = (item == null ? void 0 : item.id) ? "id" : "label";
+  const selectionKey = item?.id ? "id" : "label";
   const selectionElement = item && item[selectionKey];
   return newItem[selectionKey] === selectionElement;
 };
@@ -19,20 +19,20 @@ const parseList = (item, props, selectAll, list = []) => {
     if (!multiSelect) {
       newItem.selected = false;
     }
-    const selectItem = item ? isItemSelected(item, newItem) : elem == null ? void 0 : elem.selected;
+    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;
     if (selectItem && selectable) {
       let selectionState;
       if (multiSelect) {
-        selectionState = item ? !(elem == null ? void 0 : elem.selected) : true;
+        selectionState = item ? !elem?.selected : true;
       } else {
-        selectionState = !anySelected && (item && singleSelectionToggle ? !(elem == null ? void 0 : elem.selected) : true);
+        selectionState = !anySelected && (item && singleSelectionToggle ? !elem?.selected : true);
       }
       newItem.selected = selectionState;
       anySelected = true;
     }
-    if (typeof selectAll === "boolean" && !(elem == null ? void 0 : elem.disabled))
+    if (typeof selectAll === "boolean" && !elem?.disabled)
       newItem.selected = selectAll;
-    if (!(newItem == null ? void 0 : newItem.selected))
+    if (!newItem?.selected)
       newItem.selected = false;
     return newItem;
   });

package/dist/cjs/components/List/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/components/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n  const selectionKey = item?.id ? \"id\" : \"label\";\n  const selectionElement = item && item[selectionKey];\n  return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n  const hasLeftIcons = checkIcons(list);\n  const selection = list.filter((elem: any) => elem?.selected);\n  const anySelected = !!selection.length;\n  const allSelected = selection.length === list.length;\n  const anySelectableSelected = list.some(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n  const allSelectableSelected = list.every(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n\n  return {\n    list,\n    hasLeftIcons,\n    anySelected,\n    allSelected,\n    anySelectableSelected,\n    allSelectableSelected,\n    selection,\n  };\n};\n\nconst parseList = (\n  item: HvListValue | undefined,\n  props: {\n    multiSelect?: boolean;\n    selectable?: boolean;\n    singleSelectionToggle?: boolean;\n  },\n  selectAll: boolean | undefined,\n  list: HvListValue[] = []\n): HvListValue[] => {\n  const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n  let anySelected = false;\n  const newList = list.map((elem: any) => {\n    const newItem = { ...elem };\n\n    // reset elem item\n    if (!multiSelect) {\n      newItem.selected = false;\n    }\n\n    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n    if (selectItem && selectable) {\n      let selectionState;\n\n      if (multiSelect) {\n        selectionState = item ? !elem?.selected : true;\n      } else {\n        selectionState =\n          !anySelected &&\n          (item && singleSelectionToggle ? !elem?.selected : true);\n      }\n\n      newItem.selected = selectionState;\n      anySelected = true;\n    }\n\n    if (typeof selectAll === \"boolean\" && !elem?.disabled)\n      newItem.selected = selectAll;\n\n    // normalize item selected prop if not provided\n    if (!newItem?.selected) newItem.selected = false;\n\n    return newItem;\n  });\n\n  return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":["isItemSelected","item","newItem","selectionKey","id","selectionElement","parseList","props","selectAll","list","multiSelect","selectable","singleSelectionToggle","anySelected","newList","map","elem","selected","selectItem","selectionState","disabled"],"mappings":";;AAEMA,MAAAA,iBAAiBA,CAACC,MAAmBC,YAAyB;AAC5DC,QAAAA,gBAAeF,6BAAMG,MAAK,OAAO;AACjCC,QAAAA,mBAAmBJ,QAAQA,KAAKE,YAAY;AAC3CD,SAAAA,QAAQC,YAAY,MAAME;AACnC;AA2BA,MAAMC,YAAYA,CAChBL,MACAM,OAKAC,WACAC,OAAsB,CAAA,MACJ;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAYC;AAAAA,EAAAA,IAA0BL,SAAS,CAAA;AAEpE,MAAIM,cAAc;AAClB,QAAMC,UAAUL,KAAKM,IAAI,CAACC,SAAc;AACtC,UAAMd,UAAU;AAAA,MAAE,GAAGc;AAAAA,IAAAA;AAGrB,QAAI,CAACN,aAAa;AAChBR,cAAQe,WAAW;AAAA,IACrB;AAEA,UAAMC,aAAajB,OAAOD,eAAeC,MAAMC,OAAO,IAAIc,6BAAMC;AAEhE,QAAIC,cAAcP,YAAY;AACxBQ,UAAAA;AAEJ,UAAIT,aAAa;AACET,yBAAAA,OAAO,EAACe,6BAAMC,YAAW;AAAA,MAAA,OACrC;AACLE,yBACE,CAACN,gBACAZ,QAAQW,wBAAwB,EAACI,6BAAMC,YAAW;AAAA,MACvD;AAEAf,cAAQe,WAAWE;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAOX,cAAc,aAAa,EAACQ,6BAAMI;AAC3ClB,cAAQe,WAAWT;AAGrB,QAAI,EAACN,mCAASe;AAAUf,cAAQe,WAAW;AAEpCf,WAAAA;AAAAA,EAAAA,CACR;AAEMY,SAAAA;AACT;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../../src/components/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n  const selectionKey = item?.id ? \"id\" : \"label\";\n  const selectionElement = item && item[selectionKey];\n  return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n  const hasLeftIcons = checkIcons(list);\n  const selection = list.filter((elem: any) => elem?.selected);\n  const anySelected = !!selection.length;\n  const allSelected = selection.length === list.length;\n  const anySelectableSelected = list.some(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n  const allSelectableSelected = list.every(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n\n  return {\n    list,\n    hasLeftIcons,\n    anySelected,\n    allSelected,\n    anySelectableSelected,\n    allSelectableSelected,\n    selection,\n  };\n};\n\nconst parseList = (\n  item: HvListValue | undefined,\n  props: {\n    multiSelect?: boolean;\n    selectable?: boolean;\n    singleSelectionToggle?: boolean;\n  },\n  selectAll: boolean | undefined,\n  list: HvListValue[] = []\n): HvListValue[] => {\n  const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n  let anySelected = false;\n  const newList = list.map((elem: any) => {\n    const newItem = { ...elem };\n\n    // reset elem item\n    if (!multiSelect) {\n      newItem.selected = false;\n    }\n\n    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n    if (selectItem && selectable) {\n      let selectionState;\n\n      if (multiSelect) {\n        selectionState = item ? !elem?.selected : true;\n      } else {\n        selectionState =\n          !anySelected &&\n          (item && singleSelectionToggle ? !elem?.selected : true);\n      }\n\n      newItem.selected = selectionState;\n      anySelected = true;\n    }\n\n    if (typeof selectAll === \"boolean\" && !elem?.disabled)\n      newItem.selected = selectAll;\n\n    // normalize item selected prop if not provided\n    if (!newItem?.selected) newItem.selected = false;\n\n    return newItem;\n  });\n\n  return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":["isItemSelected","item","newItem","selectionKey","id","selectionElement","parseList","props","selectAll","list","multiSelect","selectable","singleSelectionToggle","anySelected","newList","map","elem","selected","selectItem","selectionState","disabled"],"mappings":";;AAEMA,MAAAA,iBAAiBA,CAACC,MAAmBC,YAAyB;AAC5DC,QAAAA,eAAeF,MAAMG,KAAK,OAAO;AACjCC,QAAAA,mBAAmBJ,QAAQA,KAAKE,YAAY;AAC3CD,SAAAA,QAAQC,YAAY,MAAME;AACnC;AA2BA,MAAMC,YAAYA,CAChBL,MACAM,OAKAC,WACAC,OAAsB,CAAA,MACJ;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAYC;AAAAA,EAAAA,IAA0BL,SAAS,CAAA;AAEpE,MAAIM,cAAc;AAClB,QAAMC,UAAUL,KAAKM,IAAI,CAACC,SAAc;AACtC,UAAMd,UAAU;AAAA,MAAE,GAAGc;AAAAA,IAAAA;AAGrB,QAAI,CAACN,aAAa;AAChBR,cAAQe,WAAW;AAAA,IACrB;AAEA,UAAMC,aAAajB,OAAOD,eAAeC,MAAMC,OAAO,IAAIc,MAAMC;AAEhE,QAAIC,cAAcP,YAAY;AACxBQ,UAAAA;AAEJ,UAAIT,aAAa;AACET,yBAAAA,OAAO,CAACe,MAAMC,WAAW;AAAA,MAAA,OACrC;AACLE,yBACE,CAACN,gBACAZ,QAAQW,wBAAwB,CAACI,MAAMC,WAAW;AAAA,MACvD;AAEAf,cAAQe,WAAWE;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAOX,cAAc,aAAa,CAACQ,MAAMI;AAC3ClB,cAAQe,WAAWT;AAGrB,QAAI,CAACN,SAASe;AAAUf,cAAQe,WAAW;AAEpCf,WAAAA;AAAAA,EAAAA,CACR;AAEMY,SAAAA;AACT;;;"}

package/dist/cjs/components/ListContainer/ListItem/ListItem.cjs

@@ -14,7 +14,7 @@ const applyClassNameAndStateToElement = (element, selected, disabled, onClick, c
       className,
       checked: !!selected,
       disabled,
-      onChange: (evt) => onClick == null ? void 0 : onClick(evt)
+      onChange: (evt) => onClick?.(evt)
     });
   }
   return null;
@@ -61,15 +61,15 @@ const HvListItem = (props) => {
   const interactive = interactiveProp != null ? interactiveProp : interactiveContext;
   const handleOnClick = React.useCallback((evt) => {
     if (!disabled) {
-      onClick == null ? void 0 : onClick(evt);
+      onClick?.(evt);
     }
   }, [disabled, onClick]);
   const clonedStartAdornment = React.useMemo(() => applyClassNameAndStateToElement(startAdornment, selected, disabled, handleOnClick, cx(classes.startAdornment, {
     [classes.disabled]: disabled
-  }, React__default.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]);
+  }, React__default.default.isValidElement(startAdornment) ? startAdornment.props.className : void 0)), [cx, classes?.startAdornment, classes?.disabled, disabled, handleOnClick, selected, startAdornment]);
   const clonedEndAdornment = React.useMemo(() => applyClassNameToElement(endAdornment, cx(classes.endAdornment, {
     [classes.disabled]: disabled
-  }, React__default.default.isValidElement(endAdornment) ? endAdornment.props.className : void 0)), [cx, classes == null ? void 0 : classes.endAdornment, classes == null ? void 0 : classes.disabled, disabled, endAdornment]);
+  }, React__default.default.isValidElement(endAdornment) ? endAdornment.props.className : void 0)), [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
   const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
     "aria-disabled": disabled || void 0,
     "aria-selected": selected

package/dist/cjs/components/ListContainer/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","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","jsxs","root","gutters","withStartAdornment","withEndAdornment","jsx","HvFocus","focus"],"mappings":"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"}
+{"version":3,"file":"ListItem.cjs","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","jsxs","root","gutters","withStartAdornment","withEndAdornment","jsx","HvFocus","focus"],"mappings":"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"}

package/dist/cjs/components/Login/Login.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../../utils/classes.cjs");
 const {
   staticClasses,
   useClasses

package/dist/cjs/components/Login/Login.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Login.styles.cjs","sources":["../../../../src/components/Login/Login.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundRepeat","backgroundPosition","backgroundSize","width","height","padding","margin","formContainer","background","theme","colors","atmo2","marginLeft","maxWidth"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,kBAAkB;AAAA,IAClBC,oBAAoB;AAAA,IACpBC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,EACV;AAAA,EACAC,eAAe;AAAA,IACbC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IACzBC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVT,QAAQ;AAAA,EACV;AACF,CAAC;;;"}
+{"version":3,"file":"Login.styles.cjs","sources":["../../../../src/components/Login/Login.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundRepeat","backgroundPosition","backgroundSize","width","height","padding","margin","formContainer","background","theme","colors","atmo2","marginLeft","maxWidth"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,kBAAkB;AAAA,IAClBC,oBAAoB;AAAA,IACpBC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,EACV;AAAA,EACAC,eAAe;AAAA,IACbC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IACzBC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVT,QAAQ;AAAA,EACV;AACF,CAAC;;;"}

package/dist/cjs/components/MultiButton/MultiButton.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const React = require("react");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const MultiButton_styles = require("./MultiButton.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);

package/dist/cjs/components/MultiButton/MultiButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.cjs","sources":["../../../../src/components/MultiButton/MultiButton.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport React, { cloneElement } from \"react\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return cloneElement(child as React.ReactElement, {\n            variant,\n            disabled: disabled || child.props.disabled,\n            className: cx(child.props.className, classes.button, {\n              [classes.selected]: childIsSelected,\n            }),\n            \"aria-pressed\": childIsSelected,\n          });\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["HvMultiButton","props","className","children","classes","classesProp","disabled","vertical","variant","others","useDefaultProps","cx","useClasses","jsx","root","React","Children","map","child","isValidElement","childIsSelected","selected","cloneElement","button"],"mappings":";;;;;;;;AAqBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBT,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWP,WAAW;AAE9C,SACGQ,2BAAAA,IAAA,OAAA,EACC,WAAWF,GACTP,QAAQU,MACR;AAAA,IACE,CAACV,QAAQG,QAAQ,GAAGA;AAAAA,EAAAA,GAEtBL,SACF,GACA,GAAIO,QAEHM,UAAMC,uBAAAA,SAASC,IAAId,UAAWe,CAAU,UAAA;AACnCH,QAAAA,eAAAA,QAAMI,eAAeD,KAAK,GAAG;AAC/B,YAAME,kBAAkB,CAAC,CAACF,MAAMjB,MAAMoB;AAEtC,aAAOC,MAAAA,aAAaJ,OAA6B;AAAA,QAC/CV;AAAAA,QACAF,UAAUA,YAAYY,MAAMjB,MAAMK;AAAAA,QAClCJ,WAAWS,GAAGO,MAAMjB,MAAMC,WAAWE,QAAQmB,QAAQ;AAAA,UACnD,CAACnB,QAAQiB,QAAQ,GAAGD;AAAAA,QAAAA,CACrB;AAAA,QACD,gBAAgBA;AAAAA,MAAAA,CACjB;AAAA,IACH;AAAA,EACD,CAAA,EACH,CAAA;AAEJ;;;"}
+{"version":3,"file":"MultiButton.cjs","sources":["../../../../src/components/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return cloneElement(child as React.ReactElement, {\n            variant,\n            disabled: disabled || child.props.disabled,\n            className: cx(child.props.className, classes.button, {\n              [classes.selected]: childIsSelected,\n            }),\n            \"aria-pressed\": childIsSelected,\n          });\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["HvMultiButton","props","className","children","classes","classesProp","disabled","vertical","variant","others","useDefaultProps","cx","useClasses","jsx","root","React","Children","map","child","isValidElement","childIsSelected","selected","cloneElement","button"],"mappings":";;;;;;;;AAuBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBT,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWP,WAAW;AAE9C,SACGQ,2BAAAA,IAAA,OAAA,EACC,WAAWF,GACTP,QAAQU,MACR;AAAA,IACE,CAACV,QAAQG,QAAQ,GAAGA;AAAAA,EAAAA,GAEtBL,SACF,GACA,GAAIO,QAEHM,UAAMC,uBAAAA,SAASC,IAAId,UAAWe,CAAU,UAAA;AACnCH,QAAAA,eAAAA,QAAMI,eAAeD,KAAK,GAAG;AAC/B,YAAME,kBAAkB,CAAC,CAACF,MAAMjB,MAAMoB;AAEtC,aAAOC,MAAAA,aAAaJ,OAA6B;AAAA,QAC/CV;AAAAA,QACAF,UAAUA,YAAYY,MAAMjB,MAAMK;AAAAA,QAClCJ,WAAWS,GAAGO,MAAMjB,MAAMC,WAAWE,QAAQmB,QAAQ;AAAA,UACnD,CAACnB,QAAQiB,QAAQ,GAAGD;AAAAA,QAAAA,CACrB;AAAA,QACD,gBAAgBA;AAAAA,MAAAA,CACjB;AAAA,IACH;AAAA,EACD,CAAA,EACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    height: 32,\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      height: 32,\n      width: \"100%\",\n      minWidth: 32,\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\n      ...theme.typography.label,\n      borderRadius: theme.radii.base,\n      border: `solid 1px ${theme.colors.secondary}`,\n      zIndex: 2,\n      \"&:hover\": {\n        background: theme.colors.atmo3,\n      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n\n      // prevent the focus ring to be hidden by sibling hover background\n      // even when selected\n      \"&.HvIsFocusVisible\": {\n        zIndex: 5,\n      },\n    },\n  },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IACzBC,UAAU;AAAA,IACVC,QAAQ;AAAA;AAAA,IAGR,uBAAuB;AAAA,MACrBA,QAAQ;AAAA,IACV;AAAA,IAEA,mBAAmB;AAAA,MACjBR,QAAQ;AAAA,MACRS,OAAO;AAAA,MACPC,UAAU;AAAA,MACVC,UAAU;AAAA,MACVC,SAAS;AAAA,MACTV,YAAY;AAAA,MACZW,MAAM;AAAA,MACNC,WAAY,aAAYV,YAAMC,MAAAA,OAAOU,KAAM;AAAA,MAC3CC,cAAe,aAAYZ,YAAMC,MAAAA,OAAOU,KAAM;AAAA,MAC9CE,YAAY;AAAA,MACZC,aAAa;AAAA,MACbC,cAAc;AAAA,MACd,GAAGf,YAAAA,MAAMgB,WAAWC;AAAAA,MACpB,YAAY;AAAA,QACVC,iBAAkB,GAAElB,YAAAA,MAAMC,OAAOkB,KAAM;AAAA,MACzC;AAAA,MACA,cAAc;AAAA,QACZC,OAAOpB,YAAAA,MAAMC,OAAOoB;AAAAA,QACpBX,WAAY,aAAYV,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC3CC,cAAe,aAAYZ,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC9C,WAAW;AAAA,UACTD,WAAY,aAAYV,YAAMC,MAAAA,OAAOU,KAAM;AAAA,UAC3CC,cAAe,aAAYZ,YAAMC,MAAAA,OAAOU,KAAM;AAAA,UAC9CE,YAAY;AAAA,UACZC,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,mBAAmB;AAAA,QACjBD,YAAa,aAAYb,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC5CW,qBAAqBtB,YAAAA,MAAMuB,MAAMC;AAAAA,QACjCC,wBAAwBzB,YAAAA,MAAMuB,MAAMC;AAAAA,MACtC;AAAA,MACA,kBAAkB;AAAA,QAChBV,aAAc,aAAYd,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC7Ce,sBAAsB1B,YAAAA,MAAMuB,MAAMC;AAAAA,QAClCG,yBAAyB3B,YAAAA,MAAMuB,MAAMC;AAAAA,QACrC,oBAAoB;AAAA,UAClBV,aAAc,aAAYd,YAAAA,MAAMC,OAAOU,KAAM;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,yBAAyB;AAAA,QACvBiB,YAAY;AAAA,MACd;AAAA,MACA,cAAc;AAAA,QACZ,WAAW;AAAA,UACT,oBAAoB;AAAA,YAClBC,QAAS,aAAY7B,YAAMC,MAAAA,OAAO6B,SAAU;AAAA,UAC9C;AAAA,UACA,cAAc;AAAA,YACZD,QAAS,aAAY7B,YAAMC,MAAAA,OAAOU,KAAM;AAAA,UAC1C;AAAA,QACF;AAAA,QACA,cAAc;AAAA,UACZP,QAAQ;AAAA,UACRgB,OAAOpB,YAAAA,MAAMC,OAAOoB;AAAAA,UACpBtB,YAAYC,YAAAA,MAAMC,OAAO8B;AAAAA,UACzBF,QAAS,aAAY7B,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAAA,IACA,4BAA4B;AAAA,MAC1BZ,YAAYC,YAAAA,MAAMC,OAAO8B;AAAAA,MACzBnC,QAAQ;AAAA,MACR,GAAGI,YAAAA,MAAMgB,WAAWgB;AAAAA,MACpBjB,cAAcf,YAAAA,MAAMuB,MAAMC;AAAAA,MAC1BK,QAAS,aAAY7B,YAAMC,MAAAA,OAAO6B,SAAU;AAAA,MAC5C1B,QAAQ;AAAA,MACR,WAAW;AAAA,QACTL,YAAYC,YAAAA,MAAMC,OAAOkB;AAAAA,MAC3B;AAAA,MACA,mCAAmC;AAAA,QACjCU,QAAS,aAAY7B,YAAMC,MAAAA,OAAO6B,SAAU;AAAA,MAC9C;AAAA;AAAA;AAAA,MAIA,sBAAsB;AAAA,QACpB1B,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EACA6B,QAAQ,CAAC;AAAA,EACTC,UAAU,CAAC;AAAA;AAAA,EAEXC,UAAU;AAAA,IACRC,eAAe;AAAA,IACfxC,QAAQ;AAAA,IACRyC,cAAc;AAAA,MACZ5B,MAAM;AAAA,IACR;AAAA,IACA,mBAAmB;AAAA,MACjBJ,OAAO;AAAA,MACPQ,YAAa,aAAYb,YAAMC,MAAAA,OAAOU,KAAM;AAAA,MAC5CG,aAAc,aAAYd,YAAMC,MAAAA,OAAOU,KAAM;AAAA,MAC7CD,WAAW;AAAA,MACXE,cAAc;AAAA,MACd,cAAc;AAAA,QACZQ,OAAOpB,YAAAA,MAAMC,OAAOoB;AAAAA,QACpBR,YAAa,aAAYb,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC5CG,aAAc,aAAYd,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC7CD,WAAW;AAAA,QACXE,cAAc;AAAA,QACd,WAAW;AAAA,UACTC,YAAa,aAAYb,YAAMC,MAAAA,OAAOU,KAAM;AAAA,UAC5CG,aAAc,aAAYd,YAAMC,MAAAA,OAAOU,KAAM;AAAA,UAC7CD,WAAW;AAAA,UACXE,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,MACA,mBAAmB;AAAA,QACjBF,WAAY,aAAYV,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC3CW,qBAAqBtB,YAAAA,MAAMuB,MAAMC;AAAAA,QACjCE,sBAAsB1B,YAAAA,MAAMuB,MAAMC;AAAAA,MACpC;AAAA,MACA,kBAAkB;AAAA,QAChBZ,cAAe,aAAYZ,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC9Cc,wBAAwBzB,YAAAA,MAAMuB,MAAMC;AAAAA,QACpCG,yBAAyB3B,YAAAA,MAAMuB,MAAMC;AAAAA,QACrC,oBAAoB;AAAA,UAClBZ,cAAe,aAAYZ,YAAAA,MAAMC,OAAOU,KAAM;AAAA,QAChD;AAAA,MACF;AAAA,MACA,yBAAyB;AAAA,QACvBiB,YAAY;AAAA,QACZU,WAAW;AAAA,MACb;AAAA,MACA,cAAc;AAAA,QACZ1C,QAAQ;AAAA,QACRS,OAAQ;AAAA,QACRN,YAAYC,YAAAA,MAAMC,OAAO8B;AAAAA,QACzB,GAAG/B,YAAAA,MAAMgB,WAAWgB;AAAAA,QACpBjB,cAAcf,YAAAA,MAAMuB,MAAMC;AAAAA,QAC1BK,QAAS,aAAY7B,YAAMC,MAAAA,OAAO6B,SAAU;AAAA,QAC5C1B,QAAQ;AAAA,QACR,oBAAoB;AAAA,UAClBL,YAAYC,YAAAA,MAAMC,OAAOkB;AAAAA,QAC3B;AAAA,QACA,cAAc;AAAA,UACZf,QAAQ;AAAA,UACRgB,OAAOpB,YAAAA,MAAMC,OAAOoB;AAAAA,UACpBtB,YAAYC,YAAAA,MAAMC,OAAO8B;AAAAA,UACzBF,QAAS,aAAY7B,YAAMC,MAAAA,OAAOU,KAAM;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    height: 32,\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      height: 32,\n      width: \"100%\",\n      minWidth: 32,\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\n      ...theme.typography.label,\n      borderRadius: theme.radii.base,\n      border: `solid 1px ${theme.colors.secondary}`,\n      zIndex: 2,\n      \"&:hover\": {\n        background: theme.colors.atmo3,\n      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n\n      // prevent the focus ring to be hidden by sibling hover background\n      // even when selected\n      \"&.HvIsFocusVisible\": {\n        zIndex: 5,\n      },\n    },\n  },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":"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"}

package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const React = require("react");
 const reactResizeDetector = require("react-resize-detector");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const OverflowTooltip_styles = require("./OverflowTooltip.styles.cjs");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const isParagraph = (children = "") => /\s/.test(children);
 const HvOverflowTooltip = (props) => {
-  var _a;
   const {
     id,
     classes: classesProp,
@@ -34,9 +33,9 @@ const HvOverflowTooltip = (props) => {
     },
     handleHeight: false
   });
-  const scrollWidth = ((_a = ref.current) == null ? void 0 : _a.scrollWidth) || 0;
+  const scrollWidth = ref.current?.scrollWidth || 0;
   const isOverflowing = scrollWidth - width >= 1;
-  const isParag = React.useMemo(() => paragraphOverflow && isParagraph(data == null ? void 0 : data.toString()), [data, paragraphOverflow]);
+  const isParag = React.useMemo(() => paragraphOverflow && isParagraph(data?.toString()), [data, paragraphOverflow]);
   const content = React.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx({
     [classes.tooltipAnchor]: !isParag,
     [classes.tooltipAnchorParagraph]: isParag

package/dist/cjs/components/OverflowTooltip/OverflowTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.cjs","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 (\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      // unset since `content` *is* the label\n      aria-label={null as any}\n      aria-labelledby={null as any}\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\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","tooltipAnchor","tooltipAnchorParagraph","jsx","HvTooltip","HvTypography","tooltipData"],"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,gBAAA,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,uBAAAA,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,sCAAkB;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,MAAAA,QACd,MAAMjB,qBAAqBX,YAAYS,6BAAMoB,UAAU,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,MACd,QAAA,qCACG,OACC,EAAA,KACA,WAAWb,GACT;AAAA,IACE,CAACT,QAAQyB,aAAa,GAAG,CAACJ;AAAAA,IAC1B,CAACrB,QAAQ0B,sBAAsB,GAAGL;AAAAA,EAAAA,GAEpCnB,SACF,GAECC,UAAAA,KAAAA,CACH,GAEF,CACED,WACAF,QAAQyB,eACRzB,QAAQ0B,wBACRjB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAGE,SAAAe,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAACR;AAAAA,MACvB;AAAA,MACA;AAAA,MACA,sCACGS,yBAAa,EAAA,WAAW7B,QAAQ8B,aAAa,SAAQ,QACnD3B,UACH,KAAA,CAAA;AAAA,MAGF,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,GAAII;AAAAA,MAEHiB,UAAAA;AAAAA,IAAAA;AAAAA,EAAAA;AAGP;;;"}
+{"version":3,"file":"OverflowTooltip.cjs","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\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\";\n\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 (\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      // unset since `content` *is* the label\n      aria-label={null as any}\n      aria-labelledby={null as any}\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\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","tooltipAnchor","tooltipAnchorParagraph","jsx","HvTooltip","HvTypography","tooltipData"],"mappings":";;;;;;;;;AAyCA,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,gBAAA,qBAAqBV,KAAK;AACxC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,uBAAAA,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEU,QAAQ;AAAA,IAAGC;AAAAA,MAAQC,sCAAkB;AAAA,IAC3CC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AACKC,QAAAA,cAAcN,IAAIO,SAASD,eAAe;AAE1CE,QAAAA,gBAAgBF,cAAcP,SAAS;AAE7C,QAAMU,UAAUC,MAAAA,QACd,MAAMjB,qBAAqBX,YAAYS,MAAMoB,SAAS,CAAC,GACvD,CAACpB,MAAME,iBAAiB,CAC1B;AAEA,QAAMmB,UAAUF,MACd,QAAA,qCACG,OACC,EAAA,KACA,WAAWb,GACT;AAAA,IACE,CAACT,QAAQyB,aAAa,GAAG,CAACJ;AAAAA,IAC1B,CAACrB,QAAQ0B,sBAAsB,GAAGL;AAAAA,EAAAA,GAEpCnB,SACF,GAECC,UAAAA,KAAAA,CACH,GAEF,CACED,WACAF,QAAQyB,eACRzB,QAAQ0B,wBACRjB,IACAN,MACAkB,SACAT,GAAG,CAEP;AAGE,SAAAe,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAACR;AAAAA,MACvB;AAAA,MACA;AAAA,MACA,sCACGS,yBAAa,EAAA,WAAW7B,QAAQ8B,aAAa,SAAQ,QACnD3B,UACH,KAAA,CAAA;AAAA,MAGF,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,GAAII;AAAAA,MAEHiB,UAAAA;AAAAA,IAAAA;AAAAA,EAAAA;AAGP;;;"}

package/dist/cjs/components/Pagination/Pagination.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const material = require("@mui/material");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const setId = require("../../utils/setId.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const useLabels = require("../../hooks/useLabels.cjs");
@@ -59,7 +59,7 @@ const HvPagination = (props) => {
   } = Pagination_styles.useClasses(classesProp);
   const changePage = React.useCallback((newPage) => {
     const safePage = utils.getSafePage(newPage, page, pages);
-    onPageChange == null ? void 0 : onPageChange(safePage);
+    onPageChange?.(safePage);
     handleInputChange(null, safePage + 1);
   }, [page, pages, onPageChange, handleInputChange]);
   React.useEffect(() => {
@@ -73,30 +73,32 @@ const HvPagination = (props) => {
     }
   }, [handleInputChange, page]);
   const renderPageJump = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { id: setId.setId(id, "currentPage"), labels, inputProps: {
-    "aria-label": labels == null ? void 0 : labels.paginationInputLabel,
+    "aria-label": labels?.paginationInputLabel,
     // We really want the native number input
     type: "number"
   }, classes: {
-    root: classes == null ? void 0 : classes.pageSizeInputContainer,
-    input: classes == null ? void 0 : classes.pageSizeInput,
-    inputRoot: classes == null ? void 0 : classes.pageSizeInputRoot
+    root: classes?.pageSizeInputContainer,
+    input: classes?.pageSizeInput,
+    inputRoot: classes?.pageSizeInputRoot
   }, onChange: (event, value) => handleInputChange(event, Number(value)), value: String(pageInput), onBlur: (evt, value) => changePage(Number(value) - 1), onKeyDown: (evt, value) => keyboardUtils.isKey(evt, "Enter") && changePage(Number(value) - 1), disabled: pageSize === 0, disableClear: true, ...currentPageInputProps }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Hidden, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", className: classes == null ? void 0 : classes.pageSizeTextContainer, children: labels == null ? void 0 : labels.pageSizePrev }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Select.default, { id: setId.setId(id, "pageSize"), disabled: pageSize === 0, className: classes.pageSizeOptionsSelect, "aria-label": labels == null ? void 0 : labels.pageSizeSelectorDescription, onChange: (_, val) => onPageSizeChange == null ? void 0 : onPageSizeChange(val), value: pageSize, children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Option, { value: option, children: option }, option)) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Hidden, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", className: classes.pageSizeTextContainer, children: labels == null ? void 0 : labels.pageSizeEntryName }) })
+      /* @__PURE__ */ jsxRuntime.jsx(material.Hidden, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", className: classes?.pageSizeTextContainer, children: labels?.pageSizePrev }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Select.default, { id: setId.setId(id, "pageSize"), disabled: pageSize === 0, className: classes.pageSizeOptionsSelect, "aria-label": labels?.pageSizeSelectorDescription, onChange: (_, val) => onPageSizeChange?.(val), value: pageSize, classes: {
+        header: classes.pageSizeHeader
+      }, children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Option, { value: option, children: option }, option)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Hidden, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "firstPage-button"), "aria-label": labels == null ? void 0 : labels.firstPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(0), tooltip: labels == null ? void 0 : labels.paginationFirstPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { className: classes.icon, color: utils.setColor(!canPrevious) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "previousPage-button"), "aria-label": labels == null ? void 0 : labels.previousPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(page - 1), tooltip: labels == null ? void 0 : labels.paginationPreviousPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { className: classes.icon, color: utils.setColor(!canPrevious) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "firstPage-button"), "aria-label": labels?.firstPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(0), tooltip: labels?.paginationFirstPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { className: classes.icon, color: utils.setColor(!canPrevious), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "previousPage-button"), "aria-label": labels?.previousPage, className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(page - 1), tooltip: labels?.paginationPreviousPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { className: classes.icon, color: utils.setColor(!canPrevious), iconSize: "XS" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
-        showPageJump ? renderPageJump() : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: `${page + 1}` }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: `${labels == null ? void 0 : labels.pagesSeparator} ` }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", id: setId.setId(id, "totalPages"), children: pages })
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", id: setId.setId(id, "totalPages"), className: classes.totalPagesTextContainer, children: pages })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "nextPage-button"), "aria-label": labels == null ? void 0 : labels.nextPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(page + 1), tooltip: labels == null ? void 0 : labels.paginationNextPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { className: classes.icon, color: utils.setColor(!canNext) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "lastPage-button"), "aria-label": labels == null ? void 0 : labels.lastPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(pages - 1), tooltip: labels == null ? void 0 : labels.paginationLastPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { className: classes.icon, color: utils.setColor(!canNext) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "nextPage-button"), "aria-label": labels?.nextPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(page + 1), tooltip: labels?.paginationNextPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { className: classes.icon, color: utils.setColor(!canNext), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonIconTooltip.default, { id: setId.setId(id, "lastPage-button"), "aria-label": labels?.lastPage, className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(pages - 1), tooltip: labels?.paginationLastPageTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { className: classes.icon, color: utils.setColor(!canNext), iconSize: "XS" }) })
     ] })
   ] });
 };

package/dist/cjs/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Hidden } from \"@mui/material\";\n\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport ButtonIconTooltip from \"./ButtonIconTooltip\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Aria-label of the first page button */\n  firstPage?: string;\n  /** Aria-label of the previous page button */\n  previousPage?: string;\n  /** Aria-label of the next page button */\n  nextPage?: string;\n  /** Aria-label of the last page button */\n  lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <ButtonIconTooltip\n          id={setId(id, \"firstPage-button\")}\n          aria-label={labels?.firstPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          tooltip={labels?.paginationFirstPageTitle}\n        >\n          <Start className={classes.icon} color={setColor(!canPrevious)} />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"previousPage-button\")}\n          aria-label={labels?.previousPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          tooltip={labels?.paginationPreviousPageTitle}\n        >\n          <Backwards className={classes.icon} color={setColor(!canPrevious)} />\n        </ButtonIconTooltip>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography component=\"span\">{`${page + 1}`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography component=\"span\" id={setId(id, \"totalPages\")}>\n            {pages}\n          </HvTypography>\n        </div>\n        <ButtonIconTooltip\n          id={setId(id, \"nextPage-button\")}\n          aria-label={labels?.nextPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          tooltip={labels?.paginationNextPageTitle}\n        >\n          <Forwards className={classes.icon} color={setColor(!canNext)} />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"lastPage-button\")}\n          aria-label={labels?.lastPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          tooltip={labels?.paginationLastPageTitle}\n        >\n          <End className={classes.icon} color={setColor(!canNext)} />\n        </ButtonIconTooltip>\n      </div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","defaultPageSizeOptions","HvPagination","props","classes","classesProp","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useDefaultProps","useLabels","pageInput","handleInputChange","usePageInput","cx","useClasses","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","jsx","pageJump","HvInput","setId","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","event","value","Number","String","evt","isKey","jsxs","Fragment","Hidden","HvTypography","pageSizeTextContainer","HvSelect","pageSizeOptionsSelect","_","val","map","option","Option","pageNavigator","ButtonIconTooltip","iconContainer","Start","icon","setColor","Backwards","pageInfo","Forwards","End"],"mappings":"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"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\n\nimport { Hidden } from \"@mui/material\";\n\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport ButtonIconTooltip from \"./ButtonIconTooltip\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Aria-label of the first page button */\n  firstPage?: string;\n  /** Aria-label of the previous page button */\n  previousPage?: string;\n  /** Aria-label of the next page button */\n  nextPage?: string;\n  /** Aria-label of the last page button */\n  lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{ header: classes.pageSizeHeader }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <ButtonIconTooltip\n          id={setId(id, \"firstPage-button\")}\n          aria-label={labels?.firstPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          tooltip={labels?.paginationFirstPageTitle}\n        >\n          <Start\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"previousPage-button\")}\n          aria-label={labels?.previousPage}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          tooltip={labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <ButtonIconTooltip\n          id={setId(id, \"nextPage-button\")}\n          aria-label={labels?.nextPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          tooltip={labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n        <ButtonIconTooltip\n          id={setId(id, \"lastPage-button\")}\n          aria-label={labels?.lastPage}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          tooltip={labels?.paginationLastPageTitle}\n        >\n          <End\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </ButtonIconTooltip>\n      </div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","defaultPageSizeOptions","HvPagination","props","classes","classesProp","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useDefaultProps","useLabels","pageInput","handleInputChange","usePageInput","cx","useClasses","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","jsx","pageJump","HvInput","setId","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","event","value","Number","String","evt","isKey","jsxs","Fragment","Hidden","HvTypography","pageSizeTextContainer","HvSelect","pageSizeOptionsSelect","_","val","header","pageSizeHeader","map","option","Option","pageNavigator","ButtonIconTooltip","iconContainer","Start","icon","setColor","Backwards","pageInfo","totalPagesTextContainer","Forwards","End"],"mappings":"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"}