@hitachivantara/uikit-react-core 5.80.2 → 5.81.0

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    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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n  const selectionKey = item?.id ? \"id\" : \"label\";\n  const selectionElement = item?.[selectionKey];\n  return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list: any[]) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n  const hasLeftIcons = checkIcons(list);\n  const selection = list.filter((elem: any) => elem?.selected);\n  const anySelected = !!selection.length;\n  const allSelected = selection.length === list.length;\n  const anySelectableSelected = list.some(\n    (elem: any) => elem?.selected || elem?.disabled,\n  );\n  const allSelectableSelected = list.every(\n    (elem: any) => elem?.selected || elem?.disabled,\n  );\n\n  return {\n    list,\n    hasLeftIcons,\n    anySelected,\n    allSelected,\n    anySelectableSelected,\n    allSelectableSelected,\n    selection,\n  };\n};\n\nconst parseList = (\n  item: HvListValue | undefined,\n  props: {\n    multiSelect?: boolean;\n    selectable?: boolean;\n    singleSelectionToggle?: boolean;\n  },\n  selectAll: boolean | undefined,\n  list: HvListValue[] = [],\n): HvListValue[] => {\n  const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n  let anySelected = false;\n  const newList = list.map((elem: any) => {\n    const newItem = { ...elem };\n\n    // reset elem item\n    if (!multiSelect) {\n      newItem.selected = false;\n    }\n\n    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n    if (selectItem && selectable) {\n      let selectionState;\n\n      if (multiSelect) {\n        selectionState = item ? !elem?.selected : true;\n      } else {\n        selectionState =\n          !anySelected &&\n          (item && singleSelectionToggle ? !elem?.selected : true);\n      }\n\n      newItem.selected = selectionState;\n      anySelected = true;\n    }\n\n    if (typeof selectAll === \"boolean\" && !elem?.disabled)\n      newItem.selected = selectAll;\n\n    // normalize item selected prop if not provided\n    if (!newItem?.selected) newItem.selected = false;\n\n    return newItem;\n  });\n\n  return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":[],"mappings":"AAEM,MAAA,iBAAiB,CAAC,MAAmB,YAAyB;AAC5D,QAAA,eAAe,MAAM,KAAK,OAAO;AACjC,QAAA,mBAAmB,OAAO,YAAY;AACrC,SAAA,QAAQ,YAAY,MAAM;AACnC;AA2BA,MAAM,YAAY,CAChB,MACA,OAKA,WACA,OAAsB,CAAA,MACJ;AAClB,QAAM,EAAE,aAAa,YAAY,sBAAsB,IAAI,SAAS,CAAA;AAEpE,MAAI,cAAc;AAClB,QAAM,UAAU,KAAK,IAAI,CAAC,SAAc;AAChC,UAAA,UAAU,EAAE,GAAG;AAGrB,QAAI,CAAC,aAAa;AAChB,cAAQ,WAAW;AAAA,IACrB;AAEA,UAAM,aAAa,OAAO,eAAe,MAAM,OAAO,IAAI,MAAM;AAEhE,QAAI,cAAc,YAAY;AACxB,UAAA;AAEJ,UAAI,aAAa;AACE,yBAAA,OAAO,CAAC,MAAM,WAAW;AAAA,MAAA,OACrC;AACL,yBACE,CAAC,gBACA,QAAQ,wBAAwB,CAAC,MAAM,WAAW;AAAA,MACvD;AAEA,cAAQ,WAAW;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAO,cAAc,aAAa,CAAC,MAAM;AAC3C,cAAQ,WAAW;AAGrB,QAAI,CAAC,SAAS,SAAU,SAAQ,WAAW;AAEpC,WAAA;AAAA,EAAA,CACR;AAEM,SAAA;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../src/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n  const selectionKey = item?.id ? \"id\" : \"label\";\n  const selectionElement = item?.[selectionKey];\n  return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list: any[]) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n  const hasLeftIcons = checkIcons(list);\n  const selection = list.filter((elem: any) => elem?.selected);\n  const anySelected = !!selection.length;\n  const allSelected = selection.length === list.length;\n  const anySelectableSelected = list.some(\n    (elem: any) => elem?.selected || elem?.disabled,\n  );\n  const allSelectableSelected = list.every(\n    (elem: any) => elem?.selected || elem?.disabled,\n  );\n\n  return {\n    list,\n    hasLeftIcons,\n    anySelected,\n    allSelected,\n    anySelectableSelected,\n    allSelectableSelected,\n    selection,\n  };\n};\n\nconst parseList = (\n  item: HvListValue | undefined,\n  props: {\n    multiSelect?: boolean;\n    selectable?: boolean;\n    singleSelectionToggle?: boolean;\n  },\n  selectAll: boolean | undefined,\n  list: HvListValue[] = [],\n): HvListValue[] => {\n  const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n  let anySelected = false;\n  const newList = list.map((elem: any) => {\n    const newItem = { ...elem };\n\n    // reset elem item\n    if (!multiSelect) {\n      newItem.selected = false;\n    }\n\n    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n    if (selectItem && selectable) {\n      let selectionState;\n\n      if (multiSelect) {\n        selectionState = item ? !elem?.selected : true;\n      } else {\n        selectionState =\n          !anySelected &&\n          (item && singleSelectionToggle ? !elem?.selected : true);\n      }\n\n      newItem.selected = selectionState;\n      anySelected = true;\n    }\n\n    if (typeof selectAll === \"boolean\" && !elem?.disabled)\n      newItem.selected = selectAll;\n\n    // normalize item selected prop if not provided\n    if (!newItem?.selected) newItem.selected = false;\n\n    return newItem;\n  });\n\n  return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":[],"mappings":"AAEM,MAAA,iBAAiB,CAAC,MAAmB,YAAyB;AAC5D,QAAA,eAAe,MAAM,KAAK,OAAO;AACjC,QAAA,mBAAmB,OAAO,YAAY;AACrC,SAAA,QAAQ,YAAY,MAAM;AACnC;AA2BA,MAAM,YAAY,CAChB,MACA,OAKA,WACA,OAAsB,CAAA,MACJ;AAClB,QAAM,EAAE,aAAa,YAAY,sBAAsB,IAAI,SAAS,CAAC;AAErE,MAAI,cAAc;AAClB,QAAM,UAAU,KAAK,IAAI,CAAC,SAAc;AAChC,UAAA,UAAU,EAAE,GAAG,KAAK;AAG1B,QAAI,CAAC,aAAa;AAChB,cAAQ,WAAW;AAAA,IAAA;AAGrB,UAAM,aAAa,OAAO,eAAe,MAAM,OAAO,IAAI,MAAM;AAEhE,QAAI,cAAc,YAAY;AACxB,UAAA;AAEJ,UAAI,aAAa;AACE,yBAAA,OAAO,CAAC,MAAM,WAAW;AAAA,MAAA,OACrC;AACL,yBACE,CAAC,gBACA,QAAQ,wBAAwB,CAAC,MAAM,WAAW;AAAA,MAAA;AAGvD,cAAQ,WAAW;AACL,oBAAA;AAAA,IAAA;AAGhB,QAAI,OAAO,cAAc,aAAa,CAAC,MAAM;AAC3C,cAAQ,WAAW;AAGrB,QAAI,CAAC,SAAS,SAAU,SAAQ,WAAW;AAEpC,WAAA;AAAA,EAAA,CACR;AAEM,SAAA;AACT;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListContainer.js","sources":["../../../src/ListContainer/ListContainer.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n  /**\n   * If the list items should be focusable and react to mouse over events.\n   * Defaults to true if the list is selectable, false otherwise.\n   */\n  interactive?: boolean;\n  /** If `true` compact the vertical spacing between list items. */\n  condensed?: boolean;\n  /** If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` */\n  selectable?: boolean;\n  /** If `true`, the list items' left and right padding is removed. */\n  disableGutters?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListContainerClasses;\n}\n\n/**\n * A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n  HTMLUListElement,\n  HvListContainerProps\n>(function HvListContainer(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    interactive = false,\n    selectable,\n    condensed,\n    disableGutters,\n    children: childrenProp,\n    ...others\n  } = useDefaultProps(\"HvListContainer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(null);\n\n  const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n  const listContext = useMemo(\n    () => ({\n      topContainerRef: topContainerRef || containerRef,\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting: nesting + 1,\n    }),\n    [\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting,\n      topContainerRef,\n    ],\n  );\n\n  const children = useMemo(() => {\n    if (!interactive) return childrenProp;\n\n    const anySelected = Children.toArray(childrenProp).some(\n      (child) =>\n        isValidElement(child) && child.props.selected && !child.props.disabled,\n    );\n\n    return Children.map(childrenProp, (child: any, i) => {\n      const tabIndex =\n        child.props.tabIndex ||\n        (!anySelected && i === 0) ||\n        (child.props.selected && !child.props.disabled)\n          ? 0\n          : -1;\n\n      return cloneElement(child, {\n        tabIndex,\n        interactive,\n      });\n    });\n  }, [childrenProp, interactive]);\n\n  const handleRef = useForkRef(ref, containerRef);\n\n  return (\n    <HvListContext.Provider value={listContext}>\n      <ul\n        ref={handleRef}\n        id={id}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {children}\n      </ul>\n    </HvListContext.Provider>\n  );\n});\n"],"names":["HvListContainer","HvListContext"],"mappings":";;;;;;;AA4CO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,WAAWC,WAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,WAAW,QAAQ,MAAM;AACzB,QAAA,CAAC,YAAoB,QAAA;AAEzB,UAAM,cAAc,SAAS,QAAQ,YAAY,EAAE;AAAA,MACjD,CAAC,UACC,eAAe,KAAK,KAAK,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;AAAA,IAAA;AAGlE,WAAO,SAAS,IAAI,cAAc,CAAC,OAAY,MAAM;AACnD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEN,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAAC,cAAc,WAAW,CAAC;AAExB,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAAA,YAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"ListContainer.js","sources":["../../../src/ListContainer/ListContainer.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n  /**\n   * If the list items should be focusable and react to mouse over events.\n   * Defaults to true if the list is selectable, false otherwise.\n   */\n  interactive?: boolean;\n  /** If `true` compact the vertical spacing between list items. */\n  condensed?: boolean;\n  /** If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` */\n  selectable?: boolean;\n  /** If `true`, the list items' left and right padding is removed. */\n  disableGutters?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListContainerClasses;\n}\n\n/**\n * A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n  HTMLUListElement,\n  HvListContainerProps\n>(function HvListContainer(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    interactive = false,\n    selectable,\n    condensed,\n    disableGutters,\n    children: childrenProp,\n    ...others\n  } = useDefaultProps(\"HvListContainer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(null);\n\n  const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n  const listContext = useMemo(\n    () => ({\n      topContainerRef: topContainerRef || containerRef,\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting: nesting + 1,\n    }),\n    [\n      condensed,\n      selectable,\n      disableGutters,\n      interactive,\n      nesting,\n      topContainerRef,\n    ],\n  );\n\n  const children = useMemo(() => {\n    if (!interactive) return childrenProp;\n\n    const anySelected = Children.toArray(childrenProp).some(\n      (child) =>\n        isValidElement(child) && child.props.selected && !child.props.disabled,\n    );\n\n    return Children.map(childrenProp, (child: any, i) => {\n      const tabIndex =\n        child.props.tabIndex ||\n        (!anySelected && i === 0) ||\n        (child.props.selected && !child.props.disabled)\n          ? 0\n          : -1;\n\n      return cloneElement(child, {\n        tabIndex,\n        interactive,\n      });\n    });\n  }, [childrenProp, interactive]);\n\n  const handleRef = useForkRef(ref, containerRef);\n\n  return (\n    <HvListContext.Provider value={listContext}>\n      <ul\n        ref={handleRef}\n        id={id}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {children}\n      </ul>\n    </HvListContext.Provider>\n  );\n});\n"],"names":["HvListContainer","HvListContext"],"mappings":";;;;;;;AA4CO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,WAAWC,WAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,WAAW,QAAQ,MAAM;AACzB,QAAA,CAAC,YAAoB,QAAA;AAEzB,UAAM,cAAc,SAAS,QAAQ,YAAY,EAAE;AAAA,MACjD,CAAC,UACC,eAAe,KAAK,KAAK,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;AAAA,IAClE;AAEA,WAAO,SAAS,IAAI,cAAc,CAAC,OAAY,MAAM;AACnD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEN,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAAC,cAAc,WAAW,CAAC;AAExB,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAAA,YAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListContainer.styles.js","sources":["../../../src/ListContainer/ListContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListContainer\", {\n  root: {\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,oBAAoB;AAAA,EACtB;AACF,CAAC;"}
+{"version":3,"file":"ListContainer.styles.js","sources":["../../../src/ListContainer/ListContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListContainer\", {\n  root: {\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,oBAAoB;AAAA,EAAA;AAExB,CAAC;"}

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,EAAE;AAEL,YAAY,cAAc;"}
+{"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;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  useCallback,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** Indicated if the list item is _visually_ selectable */\n  selectable?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element: React.ReactNode,\n  selected: boolean | undefined,\n  disabled: boolean | undefined,\n  onClick: React.MouseEventHandler<HTMLLIElement>,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n    checked: !!selected,\n    disabled,\n    onChange: onClick,\n  });\n};\n\nconst applyClassNameToElement = (\n  element: React.ReactNode,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n  });\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<\n  // no-indent\n  React.ComponentRef<\"li\">,\n  HvListItemProps\n>(function HvListItem(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    selectable: selectableProp,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n    selectable: selectableContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp ?? condensedContext;\n  const disableGutters = disableGuttersProp ?? disableGuttersContext;\n  const interactive = interactiveProp ?? interactiveContext;\n  const selectable = selectableProp ?? selectableContext;\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLLIElement>>(\n    (evt) => {\n      if (disabled) return;\n      onClick?.(evt);\n    },\n    [disabled, onClick],\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleClick,\n      selected,\n      startAdornment,\n    ],\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment],\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n    <li\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive || selectable,\n          [classes.selected]: selected || props[\"aria-selected\"],\n          [classes.disabled]: disabled || props[\"aria-disabled\"],\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className,\n      )}\n      tabIndex={interactive ? undefined : tabIndex}\n      onClick={handleClick}\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["HvListItem","HvListContext"],"mappings":";;;;;;;AAoEA,MAAM,kCAAkC,CACtC,SACA,UACA,UACA,SACA,cACG;AACC,MAAA,WAAW,KAAa,QAAA;AAE5B,SAAO,aAAa,SAAyB;AAAA,IAC3C;AAAA,IACA,SAAS,CAAC,CAAC;AAAA,IACX;AAAA,IACA,UAAU;AAAA,EAAA,CACX;AACH;AAEA,MAAM,0BAA0B,CAC9B,SACA,cACG;AACC,MAAA,WAAW,KAAa,QAAA;AAE5B,SAAO,aAAa,SAAyB;AAAA,IAC3C;AAAA,EAAA,CACD;AACH;AAKO,MAAM,aAAa,WAIxB,SAASA,YAAW,OAAO,KAAK;AAC1B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,IACV,WAAWC,WAAa;AAE5B,QAAM,YAAY,iBAAiB;AACnC,QAAM,iBAAiB,sBAAsB;AAC7C,QAAM,cAAc,mBAAmB;AACvC,QAAM,aAAa,kBAAkB;AAErC,QAAM,cAAc;AAAA,IAClB,CAAC,QAAQ;AACP,UAAI,SAAU;AACd,gBAAU,GAAG;AAAA,IACf;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EAAA;AAGpB,QAAM,uBAAuB;AAAA,IAC3B,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,SAAS;AAAA,QAC/B,eAAe,cAAc,IACzB,eAAe,MAAM,YACrB;AAAA,MACN;AAAA,IACF;AAAA,IACF;AAAA,MACE;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAEF,QAAM,qBAAqB;AAAA,IACzB,MACE;AAAA,MACE;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,SAAS;AAAA,QAC/B,eAAe,YAAY,IACvB,aAAa,MAAM,YACnB;AAAA,MACN;AAAA,IACF;AAAA,IACF,CAAC,IAAI,SAAS,cAAc,SAAS,UAAU,UAAU,YAAY;AAAA,EAAA;AAGvE,QAAM,sBACJ,SAAS,YAAY,SAAS,aAC1B;AAAA,IACE,iBAAiB,YAAY;AAAA,IAC7B,iBAAiB;AAAA,MAEnB;AAEA,QAAA;AAAA;AAAA;AAAA,IAGJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,YACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,WAAW,GAAG,eAAe;AAAA,YACtC,CAAC,QAAQ,QAAQ,GAAG,YAAY,MAAM,eAAe;AAAA,YACrD,CAAC,QAAQ,QAAQ,GAAG,YAAY,MAAM,eAAe;AAAA,YACrD,CAAC,QAAQ,kBAAkB,GAAG,kBAAkB;AAAA,YAChD,CAAC,QAAQ,gBAAgB,GAAG,gBAAgB;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QACA,UAAU,cAAc,SAAY;AAAA,QACpC,SAAS;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA;AAGF,SAAO,cACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA,eAAe,YAAY;AAAA,MAC3B,UAAU,SAAS,WAAW,YAAY;AAAA,MAC1C,SAAS,EAAE,OAAO,QAAQ,MAAM;AAAA,MAChC,eAAe;AAAA,QACb;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,IAAA;AAAA,EAGH,IAAA;AAEJ,CAAC;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  useCallback,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** Indicated if the list item is _visually_ selectable */\n  selectable?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element: React.ReactNode,\n  selected: boolean | undefined,\n  disabled: boolean | undefined,\n  onClick: React.MouseEventHandler<HTMLLIElement>,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n    checked: !!selected,\n    disabled,\n    onChange: onClick,\n  });\n};\n\nconst applyClassNameToElement = (\n  element: React.ReactNode,\n  className?: string,\n) => {\n  if (element == null) return null;\n\n  return cloneElement(element as ReactElement, {\n    className,\n  });\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<\n  // no-indent\n  React.ComponentRef<\"li\">,\n  HvListItemProps\n>(function HvListItem(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    selectable: selectableProp,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n    selectable: selectableContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp ?? condensedContext;\n  const disableGutters = disableGuttersProp ?? disableGuttersContext;\n  const interactive = interactiveProp ?? interactiveContext;\n  const selectable = selectableProp ?? selectableContext;\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLLIElement>>(\n    (evt) => {\n      if (disabled) return;\n      onClick?.(evt);\n    },\n    [disabled, onClick],\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleClick,\n      selected,\n      startAdornment,\n    ],\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined,\n        ),\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment],\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n    <li\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive || selectable,\n          [classes.selected]: selected || props[\"aria-selected\"],\n          [classes.disabled]: disabled || props[\"aria-disabled\"],\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className,\n      )}\n      tabIndex={interactive ? undefined : tabIndex}\n      onClick={handleClick}\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["HvListItem","HvListContext"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n    alignContent: \"center\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IAEd,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n    alignContent: \"center\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IAEd,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ,CAAC;"}

package/dist/esm/Loading/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoadingProps\n>(function HvLoading(props, ref) {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    style,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color && (`${size}Color` as const);\n\n  return (\n    <div\n      ref={ref}\n      hidden={!!hidden}\n      style={mergeStyles(style, {\n        color: getColor(color, small ? \"secondary\" : \"brand\"),\n        \"--customColor\": getColor(color),\n      })}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            className={cx(\n              classes.loadingBar,\n              // TODO: hoist to parent & remove unused `colorVariant` in v6\n              classes[size],\n              classes[colorVariant!],\n            )}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n});\n"],"names":["HvLoading"],"mappings":";;;;;;;;AAiCO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,SAAU,GAAG,IAAI;AAGpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,CAAC;AAAA,MACV,OAAO,YAAY,OAAO;AAAA,QACxB,OAAO,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,QACpD,iBAAiB,SAAS,KAAK;AAAA,MAAA,CAChC;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT,QAAQ;AAAA;AAAA,cAER,QAAQ,IAAI;AAAA,cACZ,QAAQ,YAAa;AAAA,YACvB;AAAA,UAAA;AAAA,UANK;AAAA,QAQR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoadingProps\n>(function HvLoading(props, ref) {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    style,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color && (`${size}Color` as const);\n\n  return (\n    <div\n      ref={ref}\n      hidden={!!hidden}\n      style={mergeStyles(style, {\n        color: getColor(color, small ? \"secondary\" : \"brand\"),\n        \"--customColor\": getColor(color),\n      })}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            className={cx(\n              classes.loadingBar,\n              // TODO: hoist to parent & remove unused `colorVariant` in v6\n              classes[size],\n              classes[colorVariant!],\n            )}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n});\n"],"names":["HvLoading"],"mappings":";;;;;;;;AAiCO,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,SAAU,GAAG,IAAI;AAGpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,CAAC;AAAA,MACV,OAAO,YAAY,OAAO;AAAA,QACxB,OAAO,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,QACpD,iBAAiB,SAAS,KAAK;AAAA,MAAA,CAChC;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT,QAAQ;AAAA;AAAA,cAER,QAAQ,IAAI;AAAA,cACZ,QAAQ,YAAa;AAAA,YAAA;AAAA,UACvB;AAAA,UANK;AAAA,QAQR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Loading.styles.js","sources":["../../../src/Loading/Loading.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n  },\n  barContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n\n    \":has($regular)\": {\n      width: 30,\n      height: 30,\n    },\n\n    \":has($small)\": {\n      \"--height\": \"40%\",\n      width: 18,\n      height: 18,\n    },\n  },\n  loadingBar: {\n    backgroundColor: \"currentcolor\",\n    display: \"inline-block\",\n    animation: \"loading 1s ease-in-out infinite\",\n    // TODO: make this the default when it has better support\n    width: \"round(up, 0.11em, 2px)\",\n    height: \"100%\",\n\n    \"@keyframes loading\": {\n      \"50%\": {\n        height: \"var(--height, 60%)\",\n        backgroundColor: `var(--customColor, ${theme.colors.secondary})`,\n      },\n    },\n\n    \":nth-of-type(2)\": { animationDelay: \"0.22s\" },\n    \":nth-of-type(3)\": { animationDelay: \"0.44s\" },\n  },\n  label: {},\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: {\n    width: 2,\n  },\n  regular: {\n    width: 4,\n  },\n  smallColor: {},\n  regularColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,sBAAsB;AAAA,MACpB,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB,sBAAsB,MAAM,OAAO,SAAS;AAAA,MAC/D;AAAA,IACF;AAAA,IAEA,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,IAC7C,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,EAC/C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,YAAY,CAAC;AAAA,EACb,cAAc,CAAC;AACjB,CAAC;"}
+{"version":3,"file":"Loading.styles.js","sources":["../../../src/Loading/Loading.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n  },\n  barContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n\n    \":has($regular)\": {\n      width: 30,\n      height: 30,\n    },\n\n    \":has($small)\": {\n      \"--height\": \"40%\",\n      width: 18,\n      height: 18,\n    },\n  },\n  loadingBar: {\n    backgroundColor: \"currentcolor\",\n    display: \"inline-block\",\n    animation: \"loading 1s ease-in-out infinite\",\n    // TODO: make this the default when it has better support\n    width: \"round(up, 0.11em, 2px)\",\n    height: \"100%\",\n\n    \"@keyframes loading\": {\n      \"50%\": {\n        height: \"var(--height, 60%)\",\n        backgroundColor: `var(--customColor, ${theme.colors.secondary})`,\n      },\n    },\n\n    \":nth-of-type(2)\": { animationDelay: \"0.22s\" },\n    \":nth-of-type(3)\": { animationDelay: \"0.44s\" },\n  },\n  label: {},\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: {\n    width: 2,\n  },\n  regular: {\n    width: 4,\n  },\n  smallColor: {},\n  regularColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,sBAAsB;AAAA,MACpB,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB,sBAAsB,MAAM,OAAO,SAAS;AAAA,MAAA;AAAA,IAEjE;AAAA,IAEA,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,IAC7C,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,EAC/C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,YAAY,CAAC;AAAA,EACb,cAAc,CAAA;AAChB,CAAC;"}

package/dist/esm/LoadingContainer/LoadingContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingContainer.js","sources":["../../../src/LoadingContainer/LoadingContainer.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvLoading, HvLoadingProps } from \"../Loading\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./LoadingContainer.styles\";\n\nexport { staticClasses as loadingContainerClasses };\n\nexport type HvLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingContainerProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvLoadingProps, \"label\" | \"small\" | \"hidden\"> {\n  opacity?: number;\n  classes?: HvLoadingContainerClasses;\n}\n\n/**\n * A component that wraps `children` with an `HvLoading` component and\n * and an overlay background with opacity.\n *\n * @example\n * <HvLoadingContainer label=\"Loading...\" hidden={!isLoading}>\n *  <MyComponent>\n * </HvLoadingContainer>\n * */\nexport const HvLoadingContainer = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvLoadingContainerProps\n>(function HvLoadingContainer(props, ref) {\n  const {\n    children,\n    className,\n    classes: classesProp,\n    hidden,\n    small,\n    label,\n    \"aria-label\": ariaLabelProp,\n    opacity,\n    ...others\n  } = useDefaultProps(\"HvLoadingContainer\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const ariaLabel =\n    ariaLabelProp || (typeof label === \"string\" && label) || \"Loading\";\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      <HvLoading\n        className={classes.loading}\n        role=\"progressbar\"\n        small={small}\n        label={label}\n        hidden={hidden}\n        aria-label={ariaLabel}\n        style={mergeStyles(undefined, {\n          \"--opacity\": opacity && `${opacity * 100}%`,\n        })}\n      />\n      {children}\n    </div>\n  );\n});\n"],"names":["HvLoadingContainer"],"mappings":";;;;;;AA+BO,MAAM,qBAAqB,WAGhC,SAASA,oBAAmB,OAAO,KAAK;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,YACJ,iBAAkB,OAAO,UAAU,YAAY,SAAU;AAGzD,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,OAAO,YAAY,QAAW;AAAA,UAC5B,aAAa,WAAW,GAAG,UAAU,GAAG;AAAA,QAAA,CACzC;AAAA,MAAA;AAAA,IACH;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"LoadingContainer.js","sources":["../../../src/LoadingContainer/LoadingContainer.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvLoading, HvLoadingProps } from \"../Loading\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./LoadingContainer.styles\";\n\nexport { staticClasses as loadingContainerClasses };\n\nexport type HvLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingContainerProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvLoadingProps, \"label\" | \"small\" | \"hidden\"> {\n  opacity?: number;\n  classes?: HvLoadingContainerClasses;\n}\n\n/**\n * A component that wraps `children` with an `HvLoading` component and\n * and an overlay background with opacity.\n *\n * @example\n * <HvLoadingContainer label=\"Loading...\" hidden={!isLoading}>\n *  <MyComponent>\n * </HvLoadingContainer>\n * */\nexport const HvLoadingContainer = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvLoadingContainerProps\n>(function HvLoadingContainer(props, ref) {\n  const {\n    children,\n    className,\n    classes: classesProp,\n    hidden,\n    small,\n    label,\n    \"aria-label\": ariaLabelProp,\n    opacity,\n    ...others\n  } = useDefaultProps(\"HvLoadingContainer\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const ariaLabel =\n    ariaLabelProp || (typeof label === \"string\" && label) || \"Loading\";\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      <HvLoading\n        className={classes.loading}\n        role=\"progressbar\"\n        small={small}\n        label={label}\n        hidden={hidden}\n        aria-label={ariaLabel}\n        style={mergeStyles(undefined, {\n          \"--opacity\": opacity && `${opacity * 100}%`,\n        })}\n      />\n      {children}\n    </div>\n  );\n});\n"],"names":["HvLoadingContainer"],"mappings":";;;;;;AA+BO,MAAM,qBAAqB,WAGhC,SAASA,oBAAmB,OAAO,KAAK;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,YACJ,iBAAkB,OAAO,UAAU,YAAY,SAAU;AAGzD,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,OAAO,YAAY,QAAW;AAAA,UAC5B,aAAa,WAAW,GAAG,UAAU,GAAG;AAAA,QACzC,CAAA;AAAA,MAAA;AAAA,IACH;AAAA,IACC;AAAA,EAAA,GACH;AAEJ,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n  },\n  loading: {\n    position: \"absolute\",\n    userSelect: \"none\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"atmo1\", \"var(--opacity, 80%)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":[],"mappings":";;AAGA,MAAM,EAAE,eAAe,eAAe,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiB,MAAM,MAAM,SAAS,qBAAqB;AAAA,EAC7D;AACF,CAAC;"}
+{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n  },\n  loading: {\n    position: \"absolute\",\n    userSelect: \"none\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"atmo1\", \"var(--opacity, 80%)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":[],"mappings":";;AAGA,MAAM,EAAE,eAAe,eAAe,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiB,MAAM,MAAM,SAAS,qBAAqB;AAAA,EAAA;AAE/D,CAAC;"}

package/dist/esm/Login/Login.js.map

@@ -1 +1 @@
-{"version":3,"file":"Login.js","sources":["../../../src/Login/Login.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Login.styles\";\n\nexport { staticClasses as loginClasses };\n\nexport type HvLoginClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoginProps extends HvBaseProps {\n  /**\n   *  The path for the background image.\n   */\n  background?: string;\n  /**\n   * Class names to be applied.\n   */\n  classes?: HvLoginClasses;\n}\n\n/**\n * Container layout for the login form.\n */\nexport const HvLogin = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoginProps\n>(function HvLogin(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    background,\n    ...others\n  } = useDefaultProps(\"HvLogin\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(classes.root, className)}\n      style={{\n        backgroundImage: background && `url(${background})`,\n      }}\n      {...others}\n    >\n      <div className={classes.formContainer}>{children}</div>\n    </div>\n  );\n});\n"],"names":["HvLogin"],"mappings":";;;;;AA2BO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,OAAO;AAAA,QACL,iBAAiB,cAAc,OAAO,UAAU;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}
+{"version":3,"file":"Login.js","sources":["../../../src/Login/Login.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Login.styles\";\n\nexport { staticClasses as loginClasses };\n\nexport type HvLoginClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoginProps extends HvBaseProps {\n  /**\n   *  The path for the background image.\n   */\n  background?: string;\n  /**\n   * Class names to be applied.\n   */\n  classes?: HvLoginClasses;\n}\n\n/**\n * Container layout for the login form.\n */\nexport const HvLogin = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvLoginProps\n>(function HvLogin(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    background,\n    ...others\n  } = useDefaultProps(\"HvLogin\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(classes.root, className)}\n      style={{\n        backgroundImage: background && `url(${background})`,\n      }}\n      {...others}\n    >\n      <div className={classes.formContainer}>{children}</div>\n    </div>\n  );\n});\n"],"names":["HvLogin"],"mappings":";;;;;AA2BO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,OAAO;AAAA,QACL,iBAAiB,cAAc,OAAO,UAAU;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,SAAS,CAAA;AAAA,IAAA;AAAA,EACnD;AAEJ,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Login.styles.js","sources":["../../../src/Login/Login.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF,CAAC;"}
+{"version":3,"file":"Login.styles.js","sources":["../../../src/Login/Login.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ,CAAC;"}

package/dist/esm/MultiButton/MultiButton.js

@@ -32,7 +32,7 @@ const HvMultiButton = (props) => {
         classes.root,
         {
           [classes.multiple]: !split,
-          [classes.vertical]: vertical,
+          [classes.vertical]: !split && vertical,
           [classes[variant]]: variant,
           // TODO - remove in v6
           [classes.splitGroup]: split,
@@ -42,16 +42,15 @@ const HvMultiButton = (props) => {
       ),
       ...others,
       children: buttons.map((child, index) => {
-        const childIsSelected = !!child.props.selected;
         return cloneElement(child, {
           key: index,
           variant,
           disabled: disabled || child.props.disabled,
           size,
-          className: cx(child.props.className, classes.button, {
+          className: cx(classes.button, child.props.className, {
             [classes.firstButton]: index === 0,
             [classes.lastButton]: index === buttons.length - 1,
-            [classes.selected]: childIsSelected
+            [classes.selected]: child.props.selected
           })
         });
       })

package/dist/esm/MultiButton/MultiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Filter children: remove invalid and undefined/null\n  const buttons = useMemo(() => {\n    const btns: ReactElement[] = [];\n    Children.forEach(children, (child) => {\n      if (child && isValidElement(child)) {\n        btns.push(child);\n      }\n    });\n    return btns;\n  }, [children]);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.multiple]: !split,\n          [classes.vertical]: vertical,\n          [classes[variant as keyof HvMultiButtonClasses]]: variant, // TODO - remove in v6\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {buttons.map((child, index) => {\n        const childIsSelected = !!child.props.selected;\n        return cloneElement(child, {\n          key: index,\n          variant,\n          disabled: disabled || child.props.disabled,\n          size,\n          className: cx(child.props.className, classes.button, {\n            [classes.firstButton]: index === 0,\n            [classes.lastButton]: index === buttons.length - 1,\n            [classes.selected]: childIsSelected,\n          }),\n        });\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAmCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAGxC,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAA;AACpB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MACjB;AAAA,IAAA,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,cAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AACtC,eAAO,aAAa,OAAO;AAAA,UACzB,KAAK;AAAA,UACL;AAAA,UACA,UAAU,YAAY,MAAM,MAAM;AAAA,UAClC;AAAA,UACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,YACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,YACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,YACjD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,QAAA,CACF;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Button variant to use when in `split` mode */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size when in `split` mode. */\n  size?: HvSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Filter children: remove invalid and undefined/null\n  const buttons = useMemo(() => {\n    const btns: ReactElement[] = [];\n    Children.forEach(children, (child) => {\n      if (child && isValidElement(child)) {\n        btns.push(child);\n      }\n    });\n    return btns;\n  }, [children]);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.multiple]: !split,\n          [classes.vertical]: !split && vertical,\n          [classes[variant as keyof HvMultiButtonClasses]]: variant, // TODO - remove in v6\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {buttons.map((child, index) => {\n        return cloneElement(child, {\n          key: index,\n          variant,\n          disabled: disabled || child.props.disabled,\n          size,\n          className: cx(classes.button, child.props.className, {\n            [classes.firstButton]: index === 0,\n            [classes.lastButton]: index === buttons.length - 1,\n            [classes.selected]: child.props.selected,\n          }),\n        });\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAmCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAGxC,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAC;AACrB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MAAA;AAAA,IACjB,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG,CAAC,SAAS;AAAA,UAC9B,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,eAAO,aAAa,OAAO;AAAA,UACzB,KAAK;AAAA,UACL;AAAA,UACA,UAAU,YAAY,MAAM,MAAM;AAAA,UAClC;AAAA,UACA,WAAW,GAAG,QAAQ,QAAQ,MAAM,MAAM,WAAW;AAAA,YACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,YACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,YACjD,CAAC,QAAQ,QAAQ,GAAG,MAAM,MAAM;AAAA,UACjC,CAAA;AAAA,QAAA,CACF;AAAA,MACF,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/MultiButton/MultiButton.styles.js

@@ -6,105 +6,75 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   root: {
     display: "flex",
     alignItems: "center",
-    transition: "none",
-    position: "relative",
-    zIndex: 0
+    position: "relative"
   },
   multiple: {
-    background: theme.colors.atmo2,
-    // prevent the focus ring to be hidden by sibling hover background
-    "&>.HvIsFocusVisible": {
-      zIndex: 5
-    },
-    "& button$button": {
-      minWidth: "unset",
+    backgroundColor: theme.colors.atmo2,
+    borderWidth: 0,
+    borderColor: `${theme.colors.atmo4} transparent`,
+    borderRadius: theme.radii.base,
+    "& $button": {
+      minWidth: 32,
+      minHeight: 32,
       width: "100%",
       maxWidth: 200,
       padding: 0,
-      transition: "none",
-      flex: "1 0 0px",
-      borderTop: `solid 1px ${theme.colors.atmo4}`,
-      borderBottom: `solid 1px ${theme.colors.atmo4}`,
-      borderLeft: "solid 1px transparent",
-      borderRight: "solid 1px transparent",
+      flex: 1,
+      borderColor: "inherit",
       borderRadius: 0,
       fontWeight: theme.typography.body.fontWeight,
-      fontSize: theme.typography.body.fontSize,
       "&:disabled": {
         color: theme.colors.secondary_60,
-        borderTop: `solid 1px ${theme.colors.atmo4}`,
-        borderBottom: `solid 1px ${theme.colors.atmo4}`,
-        "&:hover": {
-          borderTop: `solid 1px ${theme.colors.atmo4}`,
-          borderBottom: `solid 1px ${theme.colors.atmo4}`,
-          borderLeft: "solid 1px transparent",
-          borderRight: "solid 1px transparent"
-        }
+        borderColor: "inherit"
+      },
+      "&:hover": {
+        borderColor: "inherit"
       },
       "&$firstButton": {
-        borderLeft: `solid 1px ${theme.colors.atmo4}`,
-        borderTopLeftRadius: theme.radii.base,
-        borderBottomLeftRadius: theme.radii.base,
+        borderLeftColor: theme.colors.atmo4,
+        borderTopLeftRadius: "inherit",
+        borderBottomLeftRadius: "inherit",
         "&:disabled": {
-          borderLeft: `solid 1px ${theme.colors.atmo4}`
+          borderLeftColor: theme.colors.atmo4
         }
       },
       "&$lastButton": {
-        borderRight: `solid 1px ${theme.colors.atmo4}`,
-        borderTopRightRadius: theme.radii.base,
-        borderBottomRightRadius: theme.radii.base,
+        borderRightColor: theme.colors.atmo4,
+        borderTopRightRadius: "inherit",
+        borderBottomRightRadius: "inherit",
         "&:disabled": {
-          borderRight: `solid 1px ${theme.colors.atmo4}`
-        },
-        "&:disabled:hover": {
-          borderRight: `solid 1px ${theme.colors.atmo4}`
+          borderRightColor: theme.colors.atmo4
         }
       },
       "&:not($firstButton)": {
         marginLeft: "-1px"
       },
       "&$selected": {
-        background: theme.colors.atmo1,
-        ...theme.typography.label,
-        borderRadius: theme.radii.base,
-        border: `solid 1px ${theme.colors.secondary}`,
+        backgroundColor: theme.colors.atmo1,
+        fontWeight: theme.typography.label.fontWeight,
+        borderRadius: "inherit",
+        borderColor: theme.colors.secondary,
         zIndex: 2,
-        "&:hover": {
-          background: theme.colors.atmo3,
-          "&:not(:disabled)": {
-            border: `solid 1px ${theme.colors.secondary}`
-          },
-          "&:disabled": {
-            border: `solid 1px ${theme.colors.atmo4}`
-          }
-        },
-        // prevent the focus ring to be hidden by sibling hover background
-        // even when selected
-        "&.HvIsFocusVisible": {
-          zIndex: 5
+        "&:hover:not(:disabled),&:focus-visible": {
+          backgroundColor: theme.colors.containerBackgroundHover
         },
         "&:disabled": {
           zIndex: 1,
-          color: theme.colors.secondary_60,
-          background: theme.colors.atmo1,
-          border: `solid 1px ${theme.colors.atmo4}`
+          borderColor: theme.colors.atmo4
         }
       }
     }
   },
   splitGroup: {
     width: "fit-content",
-    background: theme.colors.atmo1,
-    // HvButton, HvDropDownMenu
-    "& button$button:not($firstButton), & $button:not($firstButton) button": {
+    "& $button:not($firstButton)": {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       "&:not([aria-controls])": {
         borderLeftWidth: 0
       }
     },
-    // HvButton, HvDropDownMenu
-    "& button$button:not($lastButton), & $button:not($lastButton) button": {
+    "& $button:not($lastButton)": {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
       "&:not([aria-controls])": {
@@ -119,52 +89,33 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
         height: "auto",
         backgroundColor: "currentcolor"
       }
-    },
-    // HvDropDownMenu
-    [`& .${staticClasses$1.iconSelected}`]: {
-      zIndex: 2
     }
   },
-  splitGroupDisabled: { background: theme.colors.atmo3 },
+  splitGroupDisabled: {},
   button: {
-    position: "relative"
+    position: "relative",
+    // prevent the focus ring to be hidden by sibling hover background
+    [`&:focus-visible, &.${staticClasses$1.iconSelected}`]: {
+      zIndex: 5
+    }
   },
   selected: {},
   vertical: {
     flexDirection: "column",
     height: "auto",
-    "& button$button": {
+    borderColor: `transparent ${theme.colors.atmo4}`,
+    "& $button": {
       minWidth: 32,
       width: "100%",
-      borderLeft: `solid 1px ${theme.colors.atmo4}`,
-      borderRight: `solid 1px ${theme.colors.atmo4}`,
-      borderTop: "solid 1px transparent",
-      borderBottom: "solid 1px transparent",
-      "&:disabled": {
-        color: theme.colors.secondary_60,
-        borderLeft: `solid 1px ${theme.colors.atmo4}`,
-        borderRight: `solid 1px ${theme.colors.atmo4}`,
-        borderTop: "solid 1px transparent",
-        borderBottom: "solid 1px transparent",
-        "&:hover": {
-          borderLeft: `solid 1px ${theme.colors.atmo4}`,
-          borderRight: `solid 1px ${theme.colors.atmo4}`,
-          borderTop: "solid 1px transparent",
-          borderBottom: "solid 1px transparent"
-        }
-      },
       "&$firstButton": {
-        borderTop: `solid 1px ${theme.colors.atmo4}`,
-        borderTopLeftRadius: theme.radii.base,
-        borderTopRightRadius: theme.radii.base
+        borderTopColor: theme.colors.atmo4,
+        borderTopLeftRadius: "inherit",
+        borderTopRightRadius: "inherit"
       },
       "&$lastButton": {
-        borderBottom: `solid 1px ${theme.colors.atmo4}`,
-        borderBottomLeftRadius: theme.radii.base,
-        borderBottomRightRadius: theme.radii.base,
-        "&:disabled:hover": {
-          borderBottom: `solid 1px ${theme.colors.atmo4}`
-        }
+        borderBottomColor: theme.colors.atmo4,
+        borderBottomLeftRadius: "inherit",
+        borderBottomRightRadius: "inherit"
       },
       "&:not($firstButton)": {
         marginLeft: 0,
@@ -172,24 +123,12 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       },
       "&$selected": {
         height: 32,
-        width: `calc(100% + 2px) !important`,
-        background: theme.colors.atmo1,
-        ...theme.typography.label,
-        borderRadius: theme.radii.base,
-        border: `solid 1px ${theme.colors.secondary}`,
-        zIndex: 2,
-        "&:hover, &:focus": {
-          background: theme.colors.atmo3
-        },
-        "&:disabled": {
-          zIndex: 1,
-          color: theme.colors.secondary_60,
-          background: theme.colors.atmo1,
-          border: `solid 1px ${theme.colors.atmo4}`
-        }
+        width: "calc(100% + 2px)",
+        borderColor: theme.colors.secondary
       }
     }
   },
+  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)
   firstButton: {},
   lastButton: {},
   // TODO - review the need for these classes in v6