@hitachivantara/uikit-react-core 5.82.3 → 5.82.4

package/dist/esm/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import {\n  AriaRole,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { FixedSizeList } from \"react-window\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport { HvLink } from \"../Link\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvRadio } from \"../Radio\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { HvListLabels, HvListValue } from \"./types\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\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:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<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. @deprecated this is always enabled */\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    // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 = (\n    evt: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>,\n    item: HvListValue,\n  ) => {\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: HvListValue) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : typeof item.icon === \"function\"\n        ? item.icon?.({\n            isSelected: item.selected,\n            isDisabled: item.disabled,\n          })\n        : null;\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: HvListValue) => {\n    return !multiSelect && item.path ? (\n      <HvLink route={item.path} classes={{ a: classes.link }}>\n        <HvOverflowTooltip data={item.label} />\n      </HvLink>\n    ) : (\n      <HvOverflowTooltip data={item.label} />\n    );\n  };\n\n  const renderSelectItem = (item: HvListValue, itemId?: string) => {\n    if (!useSelector) return renderItemText(item);\n\n    const Component = multiSelect ? HvCheckBox : HvRadio;\n\n    return (\n      <Component\n        id={setId(itemId, \"selector\")}\n        label={<HvOverflowTooltip data={item.label} />}\n        checked={item.selected || false}\n        disabled={item.disabled}\n        onChange={multiSelect ? (evt) => handleSelect(evt, item) : undefined}\n        classes={{\n          root: classes.selectorRoot,\n          container: classes.selectorContainer,\n          label: classes.truncate,\n        }}\n      />\n    );\n  };\n\n  const renderListItem = (item: HvListValue, i: number, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    const startAdornment =\n      !useSelector && item.icon ? renderLeftIcon(item) : null;\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        {renderSelectItem(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 = ({\n    index,\n    style,\n  }: {\n    index: number;\n    style: Record<string, any>;\n  }) => {\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 as any)}\n        >\n          {renderVirtualizedListItem}\n        </FixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["anySelected"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import {\n  AriaRole,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { FixedSizeList } from \"react-window\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport { HvLink } from \"../Link\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvRadio } from \"../Radio\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { HvListLabels, HvListValue } from \"./types\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\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:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<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. @deprecated this is always enabled */\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    // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 = (\n    evt: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement>,\n    item: HvListValue,\n  ) => {\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: HvListValue) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : typeof item.icon === \"function\"\n        ? item.icon?.({\n            isSelected: item.selected,\n            isDisabled: item.disabled,\n          })\n        : null;\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: HvListValue) => {\n    return !multiSelect && item.path ? (\n      <HvLink route={item.path} classes={{ a: classes.link }}>\n        <HvOverflowTooltip data={item.label} />\n      </HvLink>\n    ) : (\n      <HvOverflowTooltip data={item.label} />\n    );\n  };\n\n  const renderSelectItem = (item: HvListValue, itemId?: string) => {\n    if (!useSelector) return renderItemText(item);\n\n    const Component = multiSelect ? HvCheckBox : HvRadio;\n\n    return (\n      <Component\n        id={setId(itemId, \"selector\")}\n        label={<HvOverflowTooltip data={item.label} />}\n        checked={item.selected || false}\n        disabled={item.disabled}\n        onChange={multiSelect ? (evt) => handleSelect(evt, item) : undefined}\n        classes={{\n          root: classes.selectorRoot,\n          container: classes.selectorContainer,\n          label: classes.truncate,\n        }}\n      />\n    );\n  };\n\n  const renderListItem = (item: HvListValue, i: number, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    const startAdornment =\n      !useSelector && item.icon ? renderLeftIcon(item) : null;\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        {renderSelectItem(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 = ({\n    index,\n    style,\n  }: {\n    index: number;\n    style: Record<string, any>;\n  }) => {\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    // eslint-disable-next-line react/display-name\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 as any)}\n        >\n          {renderVirtualizedListItem}\n        </FixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["anySelected"],"mappings":";;;;;;;;;;;;;;;;;AAuFA,MAAM,iBAAiB;AAAA,EACrB,WAAW;AAAA,EACX,sBAAsB;AACxB;AAKa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA;AAAA,IAEd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,aAAa;AAAA,IACb,wBAAwB;AAAA,IACxB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,CAAC;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,MAAM,SAAS,SAAS,IAAI,kBAAkB,UAAU;AACzD,QAAA,UAAU,OAAY,IAAI;AAEhC,YAAU,MAAM;AACd,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,aAA4B;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,YAAQ,UAAU;AAAA,EAAA,GACjB,CAAC,YAAY,aAAa,YAAY,uBAAuB,OAAO,CAAC;AAExE,QAAM,CAAC,MAAM,QAAQ,IAAI,QAA8B,MAAM;AAE3D,QAAI,cAAc,YAAoB,QAAA,CAAC,QAAQ,UAAU;AAEzD,QAAI,WAAY,QAAO,CAAC,WAAW,QAAQ;AACpC,WAAA,CAAC,QAAQ,UAAU;AAAA,EAAA,GACzB,CAAC,YAAY,WAAW,CAAC;AAEtB,QAAA,eAAe,CACnB,KACA,SACG;AACH,QAAI,CAAC,KAAK,KAAM,KAAI,eAAe;AACnC,QAAI,KAAK,SAAU;AAEnB,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,aAAa,UAAU,MAAM,aAAa,QAAW,IAAI;AAC/D,YAAQ,UAAU;AAElB,cAAU,KAAK,IAAI;AACnB,eAAW,UAAU;AAAA,EACvB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,wBAAwB,KAAK;AAAA,MACjC,CAAC,SAAS,KAAK,YAAY,KAAK;AAAA,IAClC;AACA,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA,CAAC;AAAA,MACD;AAAA,IACF;AACA,YAAQ,UAAU;AAElB,eAAW,UAAU;AAAA,EACvB;AAEM,QAAA,iBAAiB,CAAC,SAAsB;AACrC,WAAA,eAAe,KAAK,IAAI,IAC3B,KAAK,OACL,OAAO,KAAK,SAAS,aACnB,KAAK,OAAO;AAAA,MACV,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAClB,CAAA,IACD;AAAA,EACR;AAEA,QAAM,kBAAkB,MAAM;AACtB,UAAA,EAAE,WAAW,qBAAA,IAAyB;AAEtCA,UAAAA,eAAc,CAAC,CAAC,WAAW;AAC3B,UAAA,cAAc,UAAU,WAAW,KAAK;AAE9C,UAAM,iBACH,oBAAA,cAAA,EAAa,WAAU,QACrB,UAAA,CAACA,eAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,OAAG,UAAU,UAAA,CAAA;AAAA,MACb,KAAK,KAAK,MAAM;AAAA,IAAA,EAAA,CACnB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,KAAA,EAAG,oBAAU,OAAO,CAAA;AAAA,MACpB,IAAO,oBAAoB;AAAA,MAC3B,KAAK;AAAA,IAAA,EAAA,CACR,EAEJ,CAAA;AAIA,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,YAAY;AAAA,QAC1B,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW,QAAQ;AAAA,QACnB,eAAeA,gBAAe,CAAC;AAAA,QAC/B,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAEM,QAAA,iBAAiB,CAAC,SAAsB;AACrC,WAAA,CAAC,eAAe,KAAK,OAC1B,oBAAC,QAAO,EAAA,OAAO,KAAK,MAAM,SAAS,EAAE,GAAG,QAAQ,QAC9C,UAAA,oBAAC,mBAAkB,EAAA,MAAM,KAAK,MAAO,CAAA,EACvC,CAAA,IAEC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,MAAO,CAAA;AAAA,EAEzC;AAEM,QAAA,mBAAmB,CAAC,MAAmB,WAAoB;AAC/D,QAAI,CAAC,YAAoB,QAAA,eAAe,IAAI;AAEtC,UAAA,YAAY,cAAc,aAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,QAAQ,UAAU;AAAA,QAC5B,OAAO,oBAAC,mBAAkB,EAAA,MAAM,KAAK,OAAO;AAAA,QAC5C,SAAS,KAAK,YAAY;AAAA,QAC1B,UAAU,KAAK;AAAA,QACf,UAAU,cAAc,CAAC,QAAQ,aAAa,KAAK,IAAI,IAAI;AAAA,QAC3D,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,WAAW,QAAQ;AAAA,UACnB,OAAO,QAAQ;AAAA,QAAA;AAAA,MACjB;AAAA,IACF;AAAA,EAEJ;AAEA,QAAM,iBAAiB,CAAC,MAAmB,GAAW,aAAa,CAAA,MAAO;AACxE,UAAM,SAAS,MAAM,IAAI,QAAQ,CAAC;AAC5B,UAAA,WAAW,KAAK,YAAY;AAElC,UAAM,iBACJ,CAAC,eAAe,KAAK,OAAO,eAAe,IAAI,IAAI;AAGnD,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,UAAU,KAAK,YAAY;AAAA,QAC3B,WAAW,QAAQ;AAAA,QACnB,SAAS;AAAA,UACP,UAAU,GAAG;AAAA,YACX,CAAC,QAAQ,YAAY,GAAG,eAAe;AAAA,UACxC,CAAA;AAAA,QACH;AAAA,QACA,UAAU,eAAe,WAAW,WAAW;AAAA,QAC/C,SAAS,CAAC,QAAQ,aAAa,KAAK,IAAI;AAAA,QACxC;AAAA,QACA,cACE,KAAK,eACH,oBAAC,eAAY,WAAW,QAAQ,KAAK,UAAS,KAAK,CAAA;AAAA,QAGtD,GAAG;AAAA,QAEH,UAAA,iBAAiB,MAAM,MAAM;AAAA,MAAA;AAAA,MApBzB;AAAA,IAqBP;AAAA,EAEJ;AAEA,QAAM,eAAe,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,QAAQ;AACrD,QAAM,cAAc,KACjB,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,KAAK,QAAQ,EAC7C,OAAO,CAAC,QAAQ,aAAa,UAAU,UAAU,KAAK;AAEzD,QAAM,oBAAoB,KAAK,UAAU,CAAC,SAAS,KAAK,QAAQ;AAChE,YAAU,MAAM;AACd,QAAI,qBAAqB,KAAK,QAAQ,YAAY,MAAM;AAC9C,cAAA,QAAQ,aAAa,iBAAiB;AAAA,IAAA;AAAA,EAChD,GACC,CAAC,SAAS,iBAAiB,CAAC;AAE/B,QAAM,4BAA4B,CAAC;AAAA,IACjC;AAAA,IACA;AAAA,EAAA,MAII;AACE,UAAA,OAAO,aAAa,KAAK;AAC/B,UAAM,WACJ,KAAK,YACJ,CAAC,eAAe,UAAU,KAC1B,KAAK,YAAY,CAAC,KAAK,WACpB,IACA;AAEC,WAAA,eAAe,MAAM,OAAO;AAAA,MACjC,OAAO;AAAA,QACL,GAAG;AAAA,QACH,KAAK,GAAG,WAAW,MAAM,GAAG,IAAI,CAAC;AAAA,QACjC,MAAM,GAAG,WAAW,MAAM,IAAI,IAAI,CAAC;AAAA,QACnC,OAAO,QAAQ,WAAW,MAAM,KAAK,CAAC;AAAA,MACxC;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,gBAAgB;AAAA,IAAA,CACjB;AAAA,EACH;AAEM,QAAA,sBAAuB,SAAS,aAAa,eAAgB;AAE7D,QAAA,gBAAgB,QAAQ,MAAM;AAE3B,WAAA;AAAA,MACL,CAAC,EAAE,GAAG,QAAQ,QACZ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,UACrC;AAAA,UACA,aAAW;AAAA,UACX;AAAA,UACA,gBAAgB;AAAA,UAChB,wBAAsB;AAAA,UACtB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAAA,EAAA,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGG,MAAA,aAAa,WAAW,EAAU,QAAA;AAEtC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAe,eAAA,eAAe,iBAAiB,gBAAgB;AAAA,IAE/D,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA,gBAAgB;AAAA,QAChB,wBAAsB;AAAA,QACrB,GAAG;AAAA,QAEH,UAAA,aAAa,IAAI,CAAC,MAAM,MAAM,eAAe,MAAM,CAAC,CAAC;AAAA,MAAA;AAAA,IAAA,IAGxD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,SAAS,UAAU,KAAK;AAAA,QACxB,OAAM;AAAA,QACN,WAAW,aAAa;AAAA,QACxB,UAAU,YAAY,KAAK;AAAA,QAC3B,kBAAkB;AAAA,QACjB,GAAI;AAAA,QAEJ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/esm/ListContainer/ListContext/ListContext.js

@@ -1,5 +1,5 @@
-import React__default from "react";
-const ListContext = React__default.createContext({});
+import { createContext } from "react";
+const ListContext = createContext({});
 ListContext.displayName = "ListContext";
 export {
   ListContext as default

package/dist/esm/ListContainer/ListContext/ListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContext.js","sources":["../../../../src/ListContainer/ListContext/ListContext.ts"],"sourcesContent":["import React from \"react\";\n\nconst ListContext = React.createContext<{\n  interactive?: boolean;\n  nesting?: number;\n  condensed?: boolean;\n  selectable?: boolean;\n  disableGutters?: boolean;\n  topContainerRef?: React.MutableRefObject<HTMLUListElement | null>;\n}>({});\n\nListContext.displayName = \"ListContext\";\n\nexport default ListContext;\n"],"names":["React"],"mappings":";AAEA,MAAM,cAAcA,eAAM,cAOvB,CAAE,CAAA;AAEL,YAAY,cAAc;"}
+{"version":3,"file":"ListContext.js","sources":["../../../../src/ListContainer/ListContext/ListContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nconst ListContext = createContext<{\n  interactive?: boolean;\n  nesting?: number;\n  condensed?: boolean;\n  selectable?: boolean;\n  disableGutters?: boolean;\n  topContainerRef?: React.MutableRefObject<HTMLUListElement | null>;\n}>({});\n\nListContext.displayName = \"ListContext\";\n\nexport default ListContext;\n"],"names":[],"mappings":";AAEM,MAAA,cAAc,cAOjB,CAAE,CAAA;AAEL,YAAY,cAAc;"}

package/dist/esm/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport {\n  Backwards,\n  End,\n  Forwards,\n  Start,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  clamp,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n  /** The show label. */\n  pageSizePrev: \"Show\",\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName: \"rows\",\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription: \"Select how many to display\",\n  /** Separator of current page and total pages. */\n  pagesSeparator: \"/\",\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle: \"First page\",\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle: \"Previous page\",\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle: \"Next page\",\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle: \"Last page\",\n  /** Aria-label passed to the page input. */\n  paginationInputLabel: \"Current page\",\n  /** Label of the first page button */\n  firstPage: \"First Page\",\n  /** Label of the previous page button */\n  previousPage: \"Previous Page\",\n  /** Label of the next page button */\n  nextPage: \"Next Page\",\n  /** Label of the last page button */\n  lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\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?: React.HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: React.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\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 = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvPaginationProps\n>(function HvPagination(props, ref) {\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  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const muiTheme = useTheme();\n  const isXsDown = useMediaQuery(muiTheme.breakpoints.down(\"xs\"));\n\n  const [pageInput, setPageInput] = useState(page);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);\n\n      onPageChange?.(safePage);\n      setPageInput(safePage);\n    },\n    [page, pages, onPageChange],\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    setPageInput(page);\n  }, [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        value={String(pageInput + 1)}\n        onChange={(event, value) => setPageInput(Number(value) - 1)}\n        onBlur={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        onEnter={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            )}\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={{\n                header: classes.pageSizeHeader,\n                root: classes.pageSizeRoot,\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            )}\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <HvIconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\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        <HvIconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvPagination"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport {\n  Backwards,\n  End,\n  Forwards,\n  Start,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  clamp,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n  /** The show label. */\n  pageSizePrev: \"Show\",\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName: \"rows\",\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription: \"Select how many to display\",\n  /** Separator of current page and total pages. */\n  pagesSeparator: \"/\",\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle: \"First page\",\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle: \"Previous page\",\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle: \"Next page\",\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle: \"Last page\",\n  /** Aria-label passed to the page input. */\n  paginationInputLabel: \"Current page\",\n  /** Label of the first page button */\n  firstPage: \"First Page\",\n  /** Label of the previous page button */\n  previousPage: \"Previous Page\",\n  /** Label of the next page button */\n  nextPage: \"Next Page\",\n  /** Label of the last page button */\n  lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\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?: React.HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: React.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\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 = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvPaginationProps\n>(function HvPagination(props, ref) {\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  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const muiTheme = useTheme();\n  const isXsDown = useMediaQuery(muiTheme.breakpoints.down(\"xs\"));\n\n  const [pageInput, setPageInput] = useState(page);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);\n\n      onPageChange?.(safePage);\n      setPageInput(safePage);\n    },\n    [page, pages, onPageChange],\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    setPageInput(page);\n  }, [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        value={String(pageInput + 1)}\n        onChange={(event, value) => setPageInput(Number(value) - 1)}\n        onBlur={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        onEnter={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            )}\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={{\n                header: classes.pageSizeHeader,\n                root: classes.pageSizeRoot,\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            {!isXsDown && (\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            )}\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <HvIconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\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        <HvIconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End className={classes.icon} iconSize=\"XS\" />\n        </HvIconButton>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvPagination"],"mappings":"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"}

package/dist/esm/Select/Select.js

@@ -3,7 +3,7 @@ import { useState, useRef } from "react";
 import { Popper } from "@mui/base/Popper";
 import { useSelect, SelectProvider } from "@mui/base/useSelect";
 import { useForkRef, useControlled } from "@mui/material/utils";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { fixedForwardRef } from "../types/generic.js";

package/dist/esm/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n  SelectProvider,\n  useSelect,\n  UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvPanel } from \"../Panel\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null,\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: clsx.ClassValue[]) => clsx(ids) || undefined;\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    >,\n    Pick<HvButtonProps, \"size\" | \"variant\"> {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**  If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. */\n  enablePortal?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>,\n) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    id: idProp,\n    size,\n    variant = \"secondarySubtle\",\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    inputProps,\n    enablePortal,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\n  }\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : (getOptionMetadata(value as OptionValue) ?? null);\n\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvDropdownButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        size={size}\n        variant={variant}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(ariaDescribedBy, {\n          [descriptionId]: description,\n        })}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvDropdownButton>\n      <Popper\n        role=\"none\"\n        open={isOpen}\n        keepMounted\n        disablePortal={!enablePortal}\n        container={enablePortal ? getContainerElement(rootId) : undefined}\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvPanel\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n      <input\n        {...getHiddenInputProps()}\n        autoComplete={autoComplete}\n        {...inputProps}\n      />\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n  SelectProvider,\n  useSelect,\n  UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvPanel } from \"../Panel\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null,\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: ClassValue[]) => clsx(ids) || undefined;\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    >,\n    Pick<HvButtonProps, \"size\" | \"variant\"> {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**  If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. */\n  enablePortal?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>,\n) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    id: idProp,\n    size,\n    variant = \"secondarySubtle\",\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    inputProps,\n    enablePortal,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\n  }\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : (getOptionMetadata(value as OptionValue) ?? null);\n\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvDropdownButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        size={size}\n        variant={variant}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(ariaDescribedBy, {\n          [descriptionId]: description,\n        })}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvDropdownButton>\n      <Popper\n        role=\"none\"\n        open={isOpen}\n        keepMounted\n        disablePortal={!enablePortal}\n        container={enablePortal ? getContainerElement(rootId) : undefined}\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvPanel\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n      <input\n        {...getHiddenInputProps()}\n        autoComplete={autoComplete}\n        {...inputProps}\n      />\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":"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"}

package/dist/esm/Slider/Slider.js

@@ -15,7 +15,7 @@ import { validationStates } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const HvSlider = forwardRef((props, ref) => {
+const HvSlider = forwardRef(function HvSlider2(props, ref) {
   const {
     id,
     className,
@@ -159,7 +159,7 @@ const HvSlider = forwardRef((props, ref) => {
           minPointValue,
           stepValue
         );
-      }, void 0);
+      });
       return {
         knobsPosition: newKnobsPosition,
         knobsValues: knobsValues2

package/dist/esm/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\nimport Tooltip from \"rc-tooltip\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /** The slider name. */\n  name?: string;\n  /** The label of the slider. If not provided, an aria-label or aria-labelledby must be inputted via sliderProps. */\n  label?: React.ReactNode;\n  /** Indicates that the slider is disabled. */\n  disabled?: boolean;\n  /** Indicates that the slider is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user slider is required on the form element. */\n  required?: boolean;\n  /** Error message to render when the value is required. */\n  requiredMessage?: string;\n  /** If `true` the input that controls the slider is hidden. */\n  hideInput?: boolean;\n  /** Attributes applied to the slider element. */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus | HvFormStatus[];\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** The values array to apply to the component */\n  values?: number[];\n  /** The default values array to apply to the component */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /** The object used to set the mark properties individually. */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /** The function executed while a change is occurring in the slider. */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onAfterChange?: (value: number[]) => void;\n  /** The function executed after a blur ocurred in the slider. */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[],\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /** How many subdivisions there are in the slider. */\n  divisionQuantity?: number;\n  /** The value of the first point in the slider from left to right. */\n  minPointValue?: number;\n  /** The value of the last point in the slider from left to right. */\n  maxPointValue?: number;\n  /** Error message to render when the value is higher than maxPointValue or lower than minPointValue. */\n  outOfRangeMessage?: string;\n  /** The max number of decimals if no format function is applied */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /** If `true` the knobs can't have the same value, if `false` knobs can have the same value. */\n  noOverlap?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: HvInputProps[];\n  /** Attributes applied to the knob element. */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /** The classes object to be applied into the root object. */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<SliderRef, HvSliderProps>((props, ref) => {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    outOfRangeMessage = \"The value is out of range\",\n    noOverlap = true,\n    hideInput,\n    required,\n    readOnly,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id);\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue],\n  );\n\n  const inverseStepValue = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        maxPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark,\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      maxPointValue,\n      stepValue,\n    ],\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      // We always show an error when the value(s) are not between maxPointValue and minPointValue; and when required is true (set by user).\n      status === undefined);\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp],\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue,\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp],\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue,\n      ),\n    [defaultValues, inverseStepValue, minPointValue],\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions,\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status],\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n  const knobProperties = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp,\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = useCallback(\n    (\n      knobsCurrentPosition: number[],\n    ): { knobsPosition: number[]; knobsValues: number[] } => {\n      const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n      const knobsValues: number[] = [];\n\n      let duplicatedValue: number | null = null;\n\n      const findDuplicated: number[] = newKnobsPosition.filter(\n        (item, index) => newKnobsPosition.indexOf(item) !== index,\n      );\n\n      if (noOverlap && findDuplicated.length > 0) {\n        [duplicatedValue] = findDuplicated;\n      }\n\n      newKnobsPosition.forEach((position, index, array) => {\n        const newArray: number[] = array;\n        let newPosition: number = position;\n\n        if (noOverlap && newPosition === duplicatedValue) {\n          const previousValue = knobsPositions[index];\n          if (previousValue !== newPosition) {\n            newPosition += newPosition > previousValue ? -1 : 1;\n            newArray[index] = newPosition;\n          }\n        }\n\n        knobsValues[index] = knobsPositionToScaledValue(\n          newPosition,\n          minPointValue,\n          stepValue,\n        );\n      }, this);\n\n      return {\n        knobsPosition: newKnobsPosition,\n        knobsValues,\n      };\n    },\n    [knobsPositions, minPointValue, noOverlap, stepValue],\n  );\n\n  const performValidation = useCallback(() => {\n    let invalid = false;\n    let requiredMsg = false;\n\n    const mappedValues =\n      generateKnobsPositionAndValues(knobsPositions).knobsValues;\n\n    const newValidationState = mappedValues.map((knobValue) => {\n      if (required && (knobValue == null || Number.isNaN(knobValue))) {\n        invalid = true;\n        requiredMsg = true;\n        return validationStates.invalid;\n      }\n\n      if (knobValue < minPointValue || knobValue > maxPointValue) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMsg ? requiredMessage : outOfRangeMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    generateKnobsPositionAndValues,\n    knobsPositions,\n    maxPointValue,\n    minPointValue,\n    outOfRangeMessage,\n    required,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity,\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue,\n        ),\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue,\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue,\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   */\n  const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { style = {}, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue,\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() => getElementById(indexedHandleId)!}\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={classes.handle}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue,\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  const knobsValuesArray = knobsPositionsToKnobsValues(\n    knobsPositions,\n    stepValue,\n    minPointValue,\n  );\n\n  const knobsValues = knobsValuesArray.map((v) =>\n    Number(v.toFixed(markDigits)),\n  );\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className,\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={sliderInputId}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsValues}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        <Slider\n          ref={ref}\n          range={!isSingle}\n          handleRender={createKnob}\n          className={cx(classes.sliderRoot, {\n            [classes.rootRange]: !isSingle,\n          })}\n          min={0}\n          max={divisionQuantity}\n          step={1}\n          marks={marks}\n          dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n          onChange={(singleValue) =>\n            onChangeHandler(Array<number>().concat(singleValue))\n          }\n          onBeforeChange={(singleValue) =>\n            onBeforeChangeHandler(Array<number>().concat(singleValue))\n          }\n          onAfterChange={(singleValue) =>\n            onAfterChangeHandler(Array<number>().concat(singleValue))\n          }\n          value={\n            knobsPositions.length === 0\n              ? undefined\n              : isSingle\n                ? knobsPositions[0]\n                : [...knobsPositions]\n          }\n          allowCross={false}\n          disabled={disabled}\n          count={rangesCount}\n          railStyle={sliderStyles.rail}\n          handleStyle={knobStyles.knobInner}\n          trackStyle={trackStyles}\n          draggableTrack={!readOnly && !isSingle}\n          {...sliderProps}\n        />\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["knobsValues"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\nimport Tooltip from \"rc-tooltip\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /** The slider name. */\n  name?: string;\n  /** The label of the slider. If not provided, an aria-label or aria-labelledby must be inputted via sliderProps. */\n  label?: React.ReactNode;\n  /** Indicates that the slider is disabled. */\n  disabled?: boolean;\n  /** Indicates that the slider is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user slider is required on the form element. */\n  required?: boolean;\n  /** Error message to render when the value is required. */\n  requiredMessage?: string;\n  /** If `true` the input that controls the slider is hidden. */\n  hideInput?: boolean;\n  /** Attributes applied to the slider element. */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus | HvFormStatus[];\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** The values array to apply to the component */\n  values?: number[];\n  /** The default values array to apply to the component */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /** The object used to set the mark properties individually. */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /** The function executed while a change is occurring in the slider. */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onAfterChange?: (value: number[]) => void;\n  /** The function executed after a blur ocurred in the slider. */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[],\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /** How many subdivisions there are in the slider. */\n  divisionQuantity?: number;\n  /** The value of the first point in the slider from left to right. */\n  minPointValue?: number;\n  /** The value of the last point in the slider from left to right. */\n  maxPointValue?: number;\n  /** Error message to render when the value is higher than maxPointValue or lower than minPointValue. */\n  outOfRangeMessage?: string;\n  /** The max number of decimals if no format function is applied */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /** If `true` the knobs can't have the same value, if `false` knobs can have the same value. */\n  noOverlap?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: HvInputProps[];\n  /** Attributes applied to the knob element. */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /** The classes object to be applied into the root object. */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<\n  // no-indent\n  SliderRef,\n  HvSliderProps\n>(function HvSlider(props, ref) {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    outOfRangeMessage = \"The value is out of range\",\n    noOverlap = true,\n    hideInput,\n    required,\n    readOnly,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id);\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue],\n  );\n\n  const inverseStepValue = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        maxPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark,\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      maxPointValue,\n      stepValue,\n    ],\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      // We always show an error when the value(s) are not between maxPointValue and minPointValue; and when required is true (set by user).\n      status === undefined);\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp],\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue,\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp],\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue,\n      ),\n    [defaultValues, inverseStepValue, minPointValue],\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions,\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status],\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n  const knobProperties = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp,\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = useCallback(\n    (\n      knobsCurrentPosition: number[],\n    ): { knobsPosition: number[]; knobsValues: number[] } => {\n      const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n      const knobsValues: number[] = [];\n\n      let duplicatedValue: number | null = null;\n\n      const findDuplicated: number[] = newKnobsPosition.filter(\n        (item, index) => newKnobsPosition.indexOf(item) !== index,\n      );\n\n      if (noOverlap && findDuplicated.length > 0) {\n        [duplicatedValue] = findDuplicated;\n      }\n\n      newKnobsPosition.forEach((position, index, array) => {\n        const newArray: number[] = array;\n        let newPosition: number = position;\n\n        if (noOverlap && newPosition === duplicatedValue) {\n          const previousValue = knobsPositions[index];\n          if (previousValue !== newPosition) {\n            newPosition += newPosition > previousValue ? -1 : 1;\n            newArray[index] = newPosition;\n          }\n        }\n\n        knobsValues[index] = knobsPositionToScaledValue(\n          newPosition,\n          minPointValue,\n          stepValue,\n        );\n      });\n\n      return {\n        knobsPosition: newKnobsPosition,\n        knobsValues,\n      };\n    },\n    [knobsPositions, minPointValue, noOverlap, stepValue],\n  );\n\n  const performValidation = useCallback(() => {\n    let invalid = false;\n    let requiredMsg = false;\n\n    const mappedValues =\n      generateKnobsPositionAndValues(knobsPositions).knobsValues;\n\n    const newValidationState = mappedValues.map((knobValue) => {\n      if (required && (knobValue == null || Number.isNaN(knobValue))) {\n        invalid = true;\n        requiredMsg = true;\n        return validationStates.invalid;\n      }\n\n      if (knobValue < minPointValue || knobValue > maxPointValue) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMsg ? requiredMessage : outOfRangeMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    generateKnobsPositionAndValues,\n    knobsPositions,\n    maxPointValue,\n    minPointValue,\n    outOfRangeMessage,\n    required,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity,\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue,\n        ),\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue,\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue,\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   */\n  const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { style = {}, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue,\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() => getElementById(indexedHandleId)!}\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={classes.handle}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue,\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  const knobsValuesArray = knobsPositionsToKnobsValues(\n    knobsPositions,\n    stepValue,\n    minPointValue,\n  );\n\n  const knobsValues = knobsValuesArray.map((v) =>\n    Number(v.toFixed(markDigits)),\n  );\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className,\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={sliderInputId}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsValues}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        <Slider\n          ref={ref}\n          range={!isSingle}\n          handleRender={createKnob}\n          className={cx(classes.sliderRoot, {\n            [classes.rootRange]: !isSingle,\n          })}\n          min={0}\n          max={divisionQuantity}\n          step={1}\n          marks={marks}\n          dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n          onChange={(singleValue) =>\n            onChangeHandler(Array<number>().concat(singleValue))\n          }\n          onBeforeChange={(singleValue) =>\n            onBeforeChangeHandler(Array<number>().concat(singleValue))\n          }\n          onAfterChange={(singleValue) =>\n            onAfterChangeHandler(Array<number>().concat(singleValue))\n          }\n          value={\n            knobsPositions.length === 0\n              ? undefined\n              : isSingle\n                ? knobsPositions[0]\n                : [...knobsPositions]\n          }\n          allowCross={false}\n          disabled={disabled}\n          count={rangesCount}\n          railStyle={sliderStyles.rail}\n          handleStyle={knobStyles.knobInner}\n          trackStyle={trackStyles}\n          draggableTrack={!readOnly && !isSingle}\n          {...sliderProps}\n        />\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSlider","knobsValues"],"mappings":"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"}

package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.js

@@ -7,7 +7,7 @@ import { setId } from "../../utils/setId.js";
 import { useClasses } from "./SnackbarContent.styles.js";
 import { staticClasses } from "./SnackbarContent.styles.js";
 import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
-const HvSnackbarContent = forwardRef((props, ref) => {
+const HvSnackbarContent = forwardRef(function HvSnackbarContent2(props, ref) {
   const {
     className,
     id,

package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContent.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../../ActionsGeneric\";\nimport { HvButtonVariant } from \"../../Button\";\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { setId } from \"../../utils/setId\";\nimport { HvSnackbarVariant } from \"../types\";\nimport { staticClasses, useClasses } from \"./SnackbarContent.styles\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\"> {\n  /** The message to display. */\n  label?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarContentClasses;\n}\n\nexport const HvSnackbarContent = forwardRef<\n  HTMLDivElement,\n  HvSnackbarContentProps\n>((props: HvSnackbarContentProps, ref) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n    label,\n    variant = \"default\",\n    showIcon,\n    customIcon,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvSnackbarContent\", props);\n\n  const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n  const innerAction: any = isValidElement(action) ? action : [action];\n\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  return (\n    <SnackbarContent\n      ref={ref}\n      id={id}\n      classes={{\n        root: classes.root,\n        message: classes.message,\n      }}\n      className={cx(classes?.[variant], className)}\n      message={\n        <div id={setId(id, \"message\")} className={classes.messageSpan}>\n          {icon && <div className={classes.iconVariant}>{icon}</div>}\n          <div className={classes.messageText}>{label}</div>\n          {action && (\n            <div id={setId(id, \"action\")} className={classes.action}>\n              <HvActionsGeneric\n                id={id}\n                variant={\n                  activeTheme?.snackbar.actionButtonVariant as HvButtonVariant\n                }\n                actions={innerAction}\n                actionsCallback={actionCallback}\n                onAction={onAction}\n              />\n            </div>\n          )}\n        </div>\n      }\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAiDO,MAAM,oBAAoB,WAG/B,CAAC,OAA+B,QAAQ;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,OAAO,cAAe,YAAY,YAAY,SAAS,WAAW;AACxE,QAAM,cAAmB,eAAe,MAAM,IAAI,SAAS,CAAC,MAAM;AAElE,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,YAAY,IAAI,SAAS;AAG/B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,SAAS,QAAQ;AAAA,MACnB;AAAA,MACA,WAAW,GAAG,UAAU,OAAO,GAAG,SAAS;AAAA,MAC3C,SACG,qBAAA,OAAA,EAAI,IAAI,MAAM,IAAI,SAAS,GAAG,WAAW,QAAQ,aAC/C,UAAA;AAAA,QAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAK,MAAA;AAAA,QACnD,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAM,OAAA;AAAA,QAC3C,UACE,oBAAA,OAAA,EAAI,IAAI,MAAM,IAAI,QAAQ,GAAG,WAAW,QAAQ,QAC/C,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SACE,aAAa,SAAS;AAAA,YAExB,SAAS;AAAA,YACT,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA,GAEJ;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"SnackbarContent.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../../ActionsGeneric\";\nimport { HvButtonVariant } from \"../../Button\";\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { setId } from \"../../utils/setId\";\nimport { HvSnackbarVariant } from \"../types\";\nimport { staticClasses, useClasses } from \"./SnackbarContent.styles\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\"> {\n  /** The message to display. */\n  label?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarContentClasses;\n}\n\nexport const HvSnackbarContent = forwardRef<\n  HTMLDivElement,\n  HvSnackbarContentProps\n>(function HvSnackbarContent(props, ref) {\n  const {\n    className,\n    id,\n    classes: classesProp,\n    label,\n    variant = \"default\",\n    showIcon,\n    customIcon,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvSnackbarContent\", props);\n\n  const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n  const innerAction: any = isValidElement(action) ? action : [action];\n\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  return (\n    <SnackbarContent\n      ref={ref}\n      id={id}\n      classes={{\n        root: classes.root,\n        message: classes.message,\n      }}\n      className={cx(classes?.[variant], className)}\n      message={\n        <div id={setId(id, \"message\")} className={classes.messageSpan}>\n          {icon && <div className={classes.iconVariant}>{icon}</div>}\n          <div className={classes.messageText}>{label}</div>\n          {action && (\n            <div id={setId(id, \"action\")} className={classes.action}>\n              <HvActionsGeneric\n                id={id}\n                variant={\n                  activeTheme?.snackbar.actionButtonVariant as HvButtonVariant\n                }\n                actions={innerAction}\n                actionsCallback={actionCallback}\n                onAction={onAction}\n              />\n            </div>\n          )}\n        </div>\n      }\n      {...others}\n    />\n  );\n});\n"],"names":["HvSnackbarContent"],"mappings":";;;;;;;;;AAiDO,MAAM,oBAAoB,WAG/B,SAASA,mBAAkB,OAAO,KAAK;AACjC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,OAAO,cAAe,YAAY,YAAY,SAAS,WAAW;AACxE,QAAM,cAAmB,eAAe,MAAM,IAAI,SAAS,CAAC,MAAM;AAElE,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,YAAY,IAAI,SAAS;AAG/B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,SAAS,QAAQ;AAAA,MACnB;AAAA,MACA,WAAW,GAAG,UAAU,OAAO,GAAG,SAAS;AAAA,MAC3C,SACG,qBAAA,OAAA,EAAI,IAAI,MAAM,IAAI,SAAS,GAAG,WAAW,QAAQ,aAC/C,UAAA;AAAA,QAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAK,MAAA;AAAA,QACnD,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAM,OAAA;AAAA,QAC3C,UACE,oBAAA,OAAA,EAAI,IAAI,MAAM,IAAI,QAAQ,GAAG,WAAW,QAAQ,QAC/C,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SACE,aAAa,SAAS;AAAA,YAExB,SAAS;AAAA,YACT,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA,GAEJ;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}

package/dist/esm/SnackbarProvider/SnackbarProvider.js

@@ -4,7 +4,7 @@ import { SnackbarContent, useSnackbar, SnackbarProvider } from "notistack";
 import { useClasses } from "./SnackbarProvider.styles.js";
 import { staticClasses } from "./SnackbarProvider.styles.js";
 import { HvSnackbarContent } from "../Snackbar/SnackbarContent/SnackbarContent.js";
-const HvNotistackSnackMessage = forwardRef((props, ref) => {
+const HvNotistackSnackMessage = forwardRef(function HvNotistackSnackMessage2(props, ref) {
   const { id, message, variant = "success", snackbarContentProps } = props;
   return /* @__PURE__ */ jsx(SnackbarContent, { ref, children: /* @__PURE__ */ jsx(
     HvSnackbarContent,

package/dist/esm/SnackbarProvider/SnackbarProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport {\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvSnackbarContent,\n  HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: SnackbarProviderProps[\"classes\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  /** Class names to be applied. */\n  className?: string;\n  /** The container the snackbar should slide from. */\n  container?: SnackbarProviderProps[\"domRoot\"];\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** class name to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>((props, ref) => {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const snackbarContext = useSnackbar();\n\n  if (!snackbarContext) {\n    throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n  }\n\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    snackbarContext;\n\n  const enqueueSnackbar = useCallback(\n    (message: React.ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className },\n      );\n    },\n    [enqueueNotistackSnackbar],\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar],\n  );\n};\n\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  container,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { containerRoot, ...otherNotistackClasses } =\n    notistackClassesOverride || {};\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: cx(\n      css({\n        pointerEvents: \"all\",\n        \"& > div > div\": {\n          // Overrides notistack extra padding\n          padding: \"0 !important\",\n          transition: \"all 0s ease 0s !important\",\n        },\n      }),\n      containerRoot,\n    ),\n    ...otherNotistackClasses,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      domRoot={container}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsDA,MAAM,0BAA0B,WAG9B,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,yBAAyB;AAGjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB,YAAY;AAEpC,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAAA;AAG3E,QAAM,EAAE,iBAAiB,0BAA0B,cACjD,IAAA;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAA0B,UAAwC,OAAO;AAClE,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,IACD;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACO,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EACjC;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,eAAe,GAAG,sBAAsB,IAC9C,4BAA4B,CAAC;AAE/B,QAAM,mBAAqD;AAAA,IACzD,eAAe;AAAA,MACb,IAAI;AAAA,QACF,eAAe;AAAA,QACf,iBAAiB;AAAA;AAAA,UAEf,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,MACD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC9C,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport {\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvSnackbarContent,\n  HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: SnackbarProviderProps[\"classes\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  /** Class names to be applied. */\n  className?: string;\n  /** The container the snackbar should slide from. */\n  container?: SnackbarProviderProps[\"domRoot\"];\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** class name to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>(function HvNotistackSnackMessage(props, ref) {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const snackbarContext = useSnackbar();\n\n  if (!snackbarContext) {\n    throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n  }\n\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    snackbarContext;\n\n  const enqueueSnackbar = useCallback(\n    (message: React.ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className },\n      );\n    },\n    [enqueueNotistackSnackbar],\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar],\n  );\n};\n\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  container,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { containerRoot, ...otherNotistackClasses } =\n    notistackClassesOverride || {};\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: cx(\n      css({\n        pointerEvents: \"all\",\n        \"& > div > div\": {\n          // Overrides notistack extra padding\n          padding: \"0 !important\",\n          transition: \"all 0s ease 0s !important\",\n        },\n      }),\n      containerRoot,\n    ),\n    ...otherNotistackClasses,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      domRoot={container}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":["HvNotistackSnackMessage"],"mappings":";;;;;;AAsDA,MAAM,0BAA0B,WAG9B,SAASA,yBAAwB,OAAO,KAAK;AAC7C,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,yBAAyB;AAGjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB,YAAY;AAEpC,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAAA;AAG3E,QAAM,EAAE,iBAAiB,0BAA0B,cACjD,IAAA;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAA0B,UAAwC,OAAO;AAClE,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,IACD;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACO,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EACjC;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,eAAe,GAAG,sBAAsB,IAC9C,4BAA4B,CAAC;AAE/B,QAAM,mBAAqD;AAAA,IACzD,eAAe;AAAA,MACb,IAAI;AAAA,QACF,eAAe;AAAA,QACf,iBAAiB;AAAA;AAAA,UAEf,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,MACD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC9C,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/Table/TableBody/TableBody.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef, Children, isValidElement } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useForkRef } from "../../hooks/useForkRef.js";
 import TableContext from "../TableContext.js";
 import { TableSectionContext } from "../TableSectionContext.js";
@@ -12,14 +13,15 @@ const tableSectionContext = {
 };
 const defaultComponent = "tbody";
 const HvTableBody = forwardRef(
-  ({
-    classes: classesProp,
-    className,
-    component,
-    children,
-    withNavigation = false,
-    ...others
-  }, externalRef) => {
+  function HvTableBody2(props, externalRef) {
+    const {
+      classes: classesProp,
+      className,
+      component,
+      children,
+      withNavigation = false,
+      ...others
+    } = useDefaultProps("HvTableBody", props);
     const { classes, cx } = useClasses(classesProp);
     const tableContext = useContext(TableContext);
     const bodyRef = useRef(null);

package/dist/esm/Table/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n  TableSectionContext,\n  TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"_grid\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  (\n    {\n      classes: classesProp,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    },\n    externalRef,\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(classes.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (isValidElement(element)) {\n                  return (\n                    <HvFocus\n                      id={`my-id-${element.key}`}\n                      rootRef={bodyRef}\n                      key={`row-${element.key}`}\n                      strategy=\"grid\"\n                      filterClass={tableSectionContext.filterClassName}\n                      navigationJump={1}\n                      focusDisabled={false}\n                      selected={element.props.selected}\n                    >\n                      {element}\n                    </HvFocus>\n                  );\n                }\n              })\n            : children}\n        </Component>\n      </TableSectionContext.Provider>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAwCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,KAEL,gBACG;AACH,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAQzB;AAAA,UAAA;AAAA,QAEJ,CACD,IACD;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n  TableSectionContext,\n  TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"_grid\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  function HvTableBody(props, externalRef) {\n    const {\n      classes: classesProp,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    } = useDefaultProps(\"HvTableBody\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(classes.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (isValidElement(element)) {\n                  return (\n                    <HvFocus\n                      id={`my-id-${element.key}`}\n                      rootRef={bodyRef}\n                      key={`row-${element.key}`}\n                      strategy=\"grid\"\n                      filterClass={tableSectionContext.filterClassName}\n                      navigationJump={1}\n                      focusDisabled={false}\n                      selected={element.props.selected}\n                    >\n                      {element}\n                    </HvFocus>\n                  );\n                }\n              })\n            : children}\n        </Component>\n      </TableSectionContext.Provider>\n    );\n  },\n);\n"],"names":["HvTableBody"],"mappings":";;;;;;;;;AA2CA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,aAAa;AACjC,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAQzB;AAAA,UAAA;AAAA,QAEJ,CACD,IACD;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAAA;AAGN;"}

package/dist/esm/Table/TableCell/TableCell.js

@@ -8,7 +8,7 @@ import { useClasses } from "./TableCell.styles.js";
 import { staticClasses } from "./TableCell.styles.js";
 const defaultComponent = "td";
 const HvTableCell = forwardRef(
-  (props, externalRef) => {
+  function HvTableCell2(props, ref) {
     const {
       children,
       component,
@@ -36,7 +36,7 @@ const HvTableCell = forwardRef(
     return /* @__PURE__ */ jsx(
       Component,
       {
-        ref: externalRef,
+        ref,
         role: Component === defaultComponent ? null : "cell",
         style,
         className: cx(