@hitachivantara/uikit-react-core 5.27.6 → 5.27.7

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const reactWindow = require("react-window");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -9,7 +10,6 @@ const wrapperTooltip = require("../../utils/wrapperTooltip.cjs");
 const List_styles = require("./List.styles.cjs");
 const useSelectableList = require("./useSelectableList.cjs");
 const utils = require("./utils.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Radio = require("../Radio/Radio.cjs");
 const Link = require("../Link/Link.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
@@ -55,6 +55,13 @@ const HvList = (props) => {
     const parsedList = utils.parseList(void 0, passedProps, void 0, valuesProp);
     setList(parsedList);
   }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);
+  const [role, itemRole] = React.useMemo(() => {
+    if (selectable && useSelector)
+      return ["list", "listitem"];
+    if (selectable)
+      return ["listbox", "option"];
+    return ["menu", "menuitem"];
+  }, [selectable, useSelector]);
   const handleSelect = (evt, item) => {
     if (!item.path)
       evt.preventDefault();
@@ -95,68 +102,40 @@ const HvList = (props) => {
     } = labels;
     const anySelected2 = !!(selection == null ? void 0 : selection.length);
     const allSelected = selection.length === list.length;
-    const selectionLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      component: "span",
-      children: !anySelected2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */ jsxRuntime.jsx("b", {
-          children: selectAll
-        }), ` (${list.length})`]
-      }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */ jsxRuntime.jsx("b", {
-          children: selection.length
-        }), ` ${selectionConjunction} `, list.length]
-      })
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, {
-      id: setId.setId(id, "select-all"),
-      label: selectionLabel,
-      onChange: handleSelectAll,
-      className: classes.selectAllSelector,
-      indeterminate: anySelected2 && !allSelected,
-      checked: allSelected
-    });
+    const selectionLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: !anySelected2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectAll }),
+      ` (${list.length})`
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selection.length }),
+      ` ${selectionConjunction} `,
+      list.length
+    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, { id: setId.setId(id, "select-all"), label: selectionLabel, onChange: handleSelectAll, className: classes.selectAllSelector, indeterminate: anySelected2 && !allSelected, checked: allSelected });
   };
   const renderItemText = (item) => {
     const ItemText = wrapperTooltip.wrapperTooltip(hasTooltips, item.label, item.label);
-    return !multiSelect && item.path ? /* @__PURE__ */ jsxRuntime.jsx(Link.HvLink, {
-      route: item.path,
-      classes: {
-        a: classes.link
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {})
-    }, item.label) : /* @__PURE__ */ jsxRuntime.jsx(ItemText, {});
+    return !multiSelect && item.path ? /* @__PURE__ */ jsxRuntime.jsx(Link.HvLink, { route: item.path, classes: {
+      a: classes.link
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {}) }, item.label) : /* @__PURE__ */ jsxRuntime.jsx(ItemText, {});
   };
   const renderMultiSelectItem = (item, itemId) => {
     if (useSelector) {
-      const Selection = wrapperTooltip.wrapperTooltip(hasTooltips, /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, {
-        id: setId.setId(itemId, "selector"),
-        label: item.label,
-        checked: item.selected,
-        disabled: item.disabled,
-        onChange: (evt) => handleSelect(evt, item),
-        classes: {
-          root: classes.selectorRoot,
-          container: classes.selectorContainer,
-          label: classes.truncate
-        }
-      }), item.label);
+      const Selection = wrapperTooltip.wrapperTooltip(hasTooltips, /* @__PURE__ */ jsxRuntime.jsx(CheckBox.HvCheckBox, { id: setId.setId(itemId, "selector"), label: item.label, checked: item.selected, disabled: item.disabled, onChange: (evt) => handleSelect(evt, item), classes: {
+        root: classes.selectorRoot,
+        container: classes.selectorContainer,
+        label: classes.truncate
+      } }), item.label);
       return /* @__PURE__ */ jsxRuntime.jsx(Selection, {});
     }
     return renderItemText(item);
   };
   const renderSingleSelectItem = (item, itemId) => {
     if (useSelector) {
-      const Selection = wrapperTooltip.wrapperTooltip(hasTooltips, /* @__PURE__ */ jsxRuntime.jsx(Radio.HvRadio, {
-        id: setId.setId(itemId, "selector"),
-        label: item.label,
-        checked: item.selected,
-        disabled: item.disabled,
-        classes: {
-          root: classes.selectorRoot,
-          container: classes.selectorContainer,
-          label: classes.truncate
-        }
-      }), item.label);
+      const Selection = wrapperTooltip.wrapperTooltip(hasTooltips, /* @__PURE__ */ jsxRuntime.jsx(Radio.HvRadio, { id: setId.setId(itemId, "selector"), label: item.label, checked: item.selected, disabled: item.disabled, classes: {
+        root: classes.selectorRoot,
+        container: classes.selectorContainer,
+        label: classes.truncate
+      } }), item.label);
       return /* @__PURE__ */ jsxRuntime.jsx(Selection, {});
     }
     return renderItemText(item);
@@ -168,26 +147,11 @@ const HvList = (props) => {
     if (!useSelector && item.icon) {
       startAdornment = renderLeftIcon(item);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
-      id: itemId,
-      role: selectable ? "option" : "menuitem",
-      disabled: item.disabled || void 0,
-      className: classes.item,
-      classes: {
-        selected: cx({
-          [classes.itemSelector]: useSelector || multiSelect
-        })
-      },
-      selected: multiSelect || selected ? selected : void 0,
-      onClick: (evt) => handleSelect(evt, item),
-      startAdornment,
-      endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {
-        className: classes.box,
-        iconSize: "XS"
-      }),
-      ...otherProps,
-      children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId)
-    }, i);
+    return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { id: itemId, role: itemRole, disabled: item.disabled || void 0, className: classes.item, classes: {
+      selected: cx({
+        [classes.itemSelector]: useSelector || multiSelect
+      })
+    }, selected: multiSelect || selected ? selected : void 0, onClick: (evt) => handleSelect(evt, item), startAdornment, endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { className: classes.box, iconSize: "XS" }), ...otherProps, children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId) }, i);
   };
   const filteredList = list.filter((it) => !it.isHidden);
   const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
@@ -197,7 +161,7 @@ const HvList = (props) => {
       listRef.current.scrollToItem(selectedItemIndex);
     }
   }, [listRef, selectedItemIndex]);
-  const ListItem$1 = ({
+  const renderVirtualizedListItem = ({
     index,
     style
   }) => {
@@ -216,44 +180,18 @@ const HvList = (props) => {
       disableGutters: useSelector
     });
   };
-  const renderFixedList = React.useMemo(() => {
+  const ariaMultiSelectable = role === "listbox" && multiSelect || void 0;
+  const ListContainer$1 = React.useMemo(() => {
     return React.forwardRef(({
       ...rest
-    }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
-      id,
-      className: cx(classes.root, className),
-      role: selectable ? "listbox" : "menu",
-      interactive: true,
-      condensed,
-      disableGutters: useSelector,
-      "aria-multiselectable": selectable && multiSelect || void 0,
-      ref,
-      ...rest
-    }));
-  }, [cx, id, useSelector, className, classes, condensed, selectable, multiSelect]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [multiSelect && useSelector && showSelectAll && renderSelectAll(), filteredList.length > 0 && !virtualized && /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
-      id,
-      className: cx(classes.root, className),
-      role: selectable ? "listbox" : "menu",
-      interactive: true,
-      condensed,
-      disableGutters: useSelector,
-      "aria-multiselectable": selectable && multiSelect || void 0,
-      ...others,
-      children: filteredList.map((item, i) => renderListItem(item, i))
-    }), filteredList.length > 0 && virtualized && /* @__PURE__ */ jsxRuntime.jsx(reactWindow.FixedSizeList, {
-      ref: listRef,
-      className: classes.virtualizedRoot,
-      height: (height || 0) + 5,
-      width: "100%",
-      itemCount: filteredList.length,
-      itemSize: condensed ? 32 : 40,
-      innerElementType: renderFixedList,
-      ...others,
-      children: ListItem$1
-    })]
-  });
+    }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { id, className: cx(classes.root, className), role, interactive: true, condensed, disableGutters: useSelector, "aria-multiselectable": ariaMultiSelectable, ref, ...rest }));
+  }, [cx, id, useSelector, className, classes.root, role, condensed, ariaMultiSelectable]);
+  if (filteredList.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    multiSelect && useSelector && showSelectAll && renderSelectAll(),
+    !virtualized ? /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { id, className: cx(classes.root, className), role, interactive: true, condensed, disableGutters: useSelector, "aria-multiselectable": ariaMultiSelectable, ...others, children: filteredList.map((item, i) => renderListItem(item, i)) }) : /* @__PURE__ */ jsxRuntime.jsx(reactWindow.FixedSizeList, { ref: listRef, className: classes.virtualizedRoot, height: (height || 0) + 5, width: "100%", itemCount: filteredList.length, itemSize: condensed ? 32 : 40, innerElementType: ListContainer$1, ...others, children: renderVirtualizedListItem })
+  ] });
 };
 exports.listClasses = List_styles.staticClasses;
 exports.HvList = HvList;

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

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

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useForkRef = require("../../hooks/useForkRef.cjs");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const ListContainer_styles = require("./ListContainer.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ListContext = require("./ListContext/ListContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
@@ -49,16 +49,7 @@ const HvListContainer = React.forwardRef((props, externalRef) => {
     });
   };
   const handleRef = useForkRef.useForkRef(externalRef, containerRef);
-  return /* @__PURE__ */ jsxRuntime.jsx(ListContext.default.Provider, {
-    value: listContext,
-    children: /* @__PURE__ */ jsxRuntime.jsx("ul", {
-      ref: handleRef,
-      id,
-      className: cx(classes.root, className),
-      ...others,
-      children: renderChildren()
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ListContext.default.Provider, { value: listContext, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { ref: handleRef, id, className: cx(classes.root, className), ...others, children: renderChildren() }) });
 });
 exports.listContainerClasses = ListContainer_styles.staticClasses;
 exports.HvListContainer = HvListContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"ListContainer.cjs","sources":["../../../../src/components/ListContainer/ListContainer.tsx"],"sourcesContent":["import React, { useRef, useContext, useMemo, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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' 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  (props: HvListContainerProps, externalRef) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      interactive = false,\n      condensed,\n      disableGutters,\n      children,\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        disableGutters,\n        interactive,\n        nesting: nesting + 1,\n      }),\n      [condensed, disableGutters, interactive, nesting, topContainerRef]\n    );\n\n    const renderChildren = () => {\n      if (!interactive) {\n        return children;\n      }\n\n      const anySelected = React.Children.toArray(children)\n        .map((child: any) => child.props.selected && !child.props.disabled)\n        .reduce((result, selected) => result || selected, false);\n\n      return React.Children.map(children, (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 React.cloneElement(child, {\n          tabIndex,\n          interactive,\n        });\n      });\n    };\n\n    const handleRef = useForkRef(externalRef, 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          {renderChildren()}\n        </ul>\n      </HvListContext.Provider>\n    );\n  }\n);\n"],"names":["HvListContainer","forwardRef","props","externalRef","id","classes","classesProp","className","interactive","condensed","disableGutters","children","others","useDefaultProps","cx","useClasses","containerRef","useRef","topContainerRef","nesting","useContext","HvListContext","listContext","useMemo","renderChildren","anySelected","React","Children","toArray","map","child","selected","disabled","reduce","result","i","tabIndex","cloneElement","handleRef","useForkRef","_jsx","Provider","value","ref","root"],"mappings":";;;;;;;;;;AAiCO,MAAMA,kBAAkBC,MAAAA,WAC7B,CAACC,OAA6BC,gBAAgB;AACtC,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,cAAc;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBX,KAAK;AAEtC,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWT,WAAW;AAExCU,QAAAA,eAAeC,aAAO,IAAI;AAE1B,QAAA;AAAA,IAAEC;AAAAA,IAAiBC,UAAU;AAAA,EAAA,IAAOC,MAAAA,WAAWC,YAAAA,OAAa;AAE5DC,QAAAA,cAAcC,MAAAA,QAClB,OAAO;AAAA,IACLL,iBAAiBA,mBAAmBF;AAAAA,IACpCP;AAAAA,IACAC;AAAAA,IACAF;AAAAA,IACAW,SAASA,UAAU;AAAA,EAAA,IAErB,CAACV,WAAWC,gBAAgBF,aAAaW,SAASD,eAAe,CACnE;AAEA,QAAMM,iBAAiBA,MAAM;AAC3B,QAAI,CAAChB,aAAa;AACTG,aAAAA;AAAAA,IACT;AAEMc,UAAAA,cAAcC,eAAAA,QAAMC,SAASC,QAAQjB,QAAQ,EAChDkB,IAAI,CAACC,UAAeA,MAAM5B,MAAM6B,YAAY,CAACD,MAAM5B,MAAM8B,QAAQ,EACjEC,OAAO,CAACC,QAAQH,aAAaG,UAAUH,UAAU,KAAK;AAEzD,WAAOL,eAAAA,QAAMC,SAASE,IAAIlB,UAAU,CAACmB,OAAYK,MAAM;AACrD,YAAMC,WACJN,MAAM5B,MAAMkC,YACX,CAACX,eAAeU,MAAM,KACtBL,MAAM5B,MAAM6B,YAAY,CAACD,MAAM5B,MAAM8B,WAClC,IACA;AAECN,aAAAA,eAAAA,QAAMW,aAAaP,OAAO;AAAA,QAC/BM;AAAAA,QACA5B;AAAAA,MAAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA;AAGG8B,QAAAA,YAAYC,WAAAA,WAAWpC,aAAaa,YAAY;AAGpDwB,SAAAA,2BAAAA,IAACnB,oBAAcoB,UAAQ;AAAA,IAACC,OAAOpB;AAAAA,IAAYX,yCACzC,MAAA;AAAA,MACEgC,KAAKL;AAAAA,MACLlC;AAAAA,MACAG,WAAWO,GAAGT,QAAQuC,MAAMrC,SAAS;AAAA,MAAE,GACnCK;AAAAA,MAAMD,UAETa,eAAe;AAAA,IAAA,CACd;AAAA,EAAA,CACkB;AAE5B,CACF;;;"}
+{"version":3,"file":"ListContainer.cjs","sources":["../../../../src/components/ListContainer/ListContainer.tsx"],"sourcesContent":["import React, { useRef, useContext, useMemo, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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' 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  (props: HvListContainerProps, externalRef) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      interactive = false,\n      condensed,\n      disableGutters,\n      children,\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        disableGutters,\n        interactive,\n        nesting: nesting + 1,\n      }),\n      [condensed, disableGutters, interactive, nesting, topContainerRef]\n    );\n\n    const renderChildren = () => {\n      if (!interactive) {\n        return children;\n      }\n\n      const anySelected = React.Children.toArray(children)\n        .map((child: any) => child.props.selected && !child.props.disabled)\n        .reduce((result, selected) => result || selected, false);\n\n      return React.Children.map(children, (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 React.cloneElement(child, {\n          tabIndex,\n          interactive,\n        });\n      });\n    };\n\n    const handleRef = useForkRef(externalRef, 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          {renderChildren()}\n        </ul>\n      </HvListContext.Provider>\n    );\n  }\n);\n"],"names":["HvListContainer","forwardRef","props","externalRef","id","classes","classesProp","className","interactive","condensed","disableGutters","children","others","useDefaultProps","cx","useClasses","containerRef","useRef","topContainerRef","nesting","useContext","HvListContext","listContext","useMemo","renderChildren","anySelected","React","Children","toArray","map","child","selected","disabled","reduce","result","i","tabIndex","cloneElement","handleRef","useForkRef","jsx","root"],"mappings":";;;;;;;;;;AAiCO,MAAMA,kBAAkBC,MAAAA,WAC7B,CAACC,OAA6BC,gBAAgB;AACtC,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,cAAc;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBX,KAAK;AAEtC,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWT,WAAW;AAExCU,QAAAA,eAAeC,aAAO,IAAI;AAE1B,QAAA;AAAA,IAAEC;AAAAA,IAAiBC,UAAU;AAAA,EAAA,IAAOC,MAAAA,WAAWC,YAAAA,OAAa;AAE5DC,QAAAA,cAAcC,MAAAA,QAClB,OAAO;AAAA,IACLL,iBAAiBA,mBAAmBF;AAAAA,IACpCP;AAAAA,IACAC;AAAAA,IACAF;AAAAA,IACAW,SAASA,UAAU;AAAA,EAAA,IAErB,CAACV,WAAWC,gBAAgBF,aAAaW,SAASD,eAAe,CACnE;AAEA,QAAMM,iBAAiBA,MAAM;AAC3B,QAAI,CAAChB,aAAa;AACTG,aAAAA;AAAAA,IACT;AAEMc,UAAAA,cAAcC,eAAAA,QAAMC,SAASC,QAAQjB,QAAQ,EAChDkB,IAAI,CAACC,UAAeA,MAAM5B,MAAM6B,YAAY,CAACD,MAAM5B,MAAM8B,QAAQ,EACjEC,OAAO,CAACC,QAAQH,aAAaG,UAAUH,UAAU,KAAK;AAEzD,WAAOL,eAAAA,QAAMC,SAASE,IAAIlB,UAAU,CAACmB,OAAYK,MAAM;AACrD,YAAMC,WACJN,MAAM5B,MAAMkC,YACX,CAACX,eAAeU,MAAM,KACtBL,MAAM5B,MAAM6B,YAAY,CAACD,MAAM5B,MAAM8B,WAClC,IACA;AAECN,aAAAA,eAAAA,QAAMW,aAAaP,OAAO;AAAA,QAC/BM;AAAAA,QACA5B;AAAAA,MAAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA;AAGG8B,QAAAA,YAAYC,WAAAA,WAAWpC,aAAaa,YAAY;AAGpD,SAAAwB,+BAACnB,YAAAA,QAAc,UAAd,EAAuB,OAAOC,aAC7B,UAAAkB,2BAAA,IAAC,QACC,KAAKF,WACL,IACA,WAAWxB,GAAGT,QAAQoC,MAAMlC,SAAS,GACrC,GAAIK,QAEHY,UAAe,iBAClB,CAAA,EACF,CAAA;AAEJ,CACF;;;"}

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const ListItem_styles = require("./ListItem.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ListContext = require("../ListContext/ListContext.cjs");
 const Focus = require("../../Focus/Focus.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -77,40 +77,39 @@ const HvListItem = (props) => {
   const listItem = (
     // For later: this should only have an onClick event if interactive and has the appropriate role.
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ jsxRuntime.jsxs("li", {
-      id,
-      role,
-      value,
-      className: cx(classes.root, {
-        [classes.gutters]: !disableGutters,
-        [classes.condensed]: condensed,
-        [classes.interactive]: interactive,
-        [classes.selected]: !!selected,
-        [classes.disabled]: !!disabled,
-        [classes.withStartAdornment]: startAdornment != null,
-        [classes.withEndAdornment]: endAdornment != null
-      }, className),
-      onClick: handleOnClick,
-      onKeyDown: () => {
-      },
-      ...roleOptionAriaProps,
-      ...others,
-      children: [clonedStartAdornment, children, clonedEndAdornment]
-    })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        id,
+        role,
+        value,
+        className: cx(classes.root, {
+          [classes.gutters]: !disableGutters,
+          [classes.condensed]: condensed,
+          [classes.interactive]: interactive,
+          [classes.selected]: !!selected,
+          [classes.disabled]: !!disabled,
+          [classes.withStartAdornment]: startAdornment != null,
+          [classes.withEndAdornment]: endAdornment != null
+        }, className),
+        onClick: handleOnClick,
+        onKeyDown: () => {
+        },
+        ...roleOptionAriaProps,
+        ...others,
+        children: [
+          clonedStartAdornment,
+          children,
+          clonedEndAdornment
+        ]
+      }
+    )
   );
-  return interactive ? /* @__PURE__ */ jsxRuntime.jsx(Focus.HvFocus, {
-    rootRef: topContainerRef,
-    selected,
-    disabledClass: disabled || void 0,
-    strategy: role === "option" ? "listbox" : "menu",
-    classes: {
-      focus: classes.focus
-    },
-    configuration: {
-      tabIndex
-    },
-    children: listItem
-  }) : listItem;
+  return interactive ? /* @__PURE__ */ jsxRuntime.jsx(Focus.HvFocus, { rootRef: topContainerRef, selected, disabledClass: disabled || void 0, strategy: role === "option" ? "listbox" : "menu", classes: {
+    focus: classes.focus
+  }, configuration: {
+    tabIndex
+  }, children: listItem }) : listItem;
 };
 exports.listItemClasses = ListItem_styles.staticClasses;
 exports.HvListItem = HvListItem;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: string;\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = (props: HvListItemProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n};\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","props","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","onKeyDown","HvFocus","rootRef","disabledClass","strategy","focus","configuration"],"mappings":"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"}
+{"version":3,"file":"ListItem.cjs","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: string;\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = (props: HvListItemProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n};\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","props","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","jsxs","root","gutters","withStartAdornment","withEndAdornment","jsx","HvFocus","focus"],"mappings":";;;;;;;;;;AA6DA,MAAMA,kCAAkCA,CACtCC,SACAC,UACAC,UACAC,SACAC,cACG;AACH,MAAIJ,WAAW,MAAM;AACZK,WAAAA,eAAAA,QAAMC,aAAaN,SAAS;AAAA,MACjCI;AAAAA,MACAG,SAAS,CAAC,CAACN;AAAAA,MACXC;AAAAA,MACAM,UAAWC,CAAQN,QAAAA,mCAAUM;AAAAA,IAAG,CACjC;AAAA,EACH;AAEO,SAAA;AACT;AAEA,MAAMC,0BAA0BA,CAACV,SAASI,cAAc;AACtD,MAAIJ,WAAW,MAAM;AACZK,WAAAA,eAAAA,QAAMC,aAAaN,SAAS;AAAA,MACjCI;AAAAA,IAAAA,CACD;AAAA,EACH;AAEO,SAAA;AACT;AAKaO,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTX;AAAAA,IACAY;AAAAA,IACAC;AAAAA,IACAhB;AAAAA,IACAC;AAAAA,IACAgB,aAAaC;AAAAA,IACbC,WAAWC;AAAAA,IACXC,gBAAgBC;AAAAA,IAChBC;AAAAA,IACAC;AAAAA,IACAtB;AAAAA,IACAuB;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,cAAcjB,KAAK;AAEjC,QAAA;AAAA,IAAEE;AAAAA,IAASgB;AAAAA,EAAAA,IAAOC,gBAAAA,WAAWhB,WAAW;AAExC,QAAA;AAAA,IACJiB;AAAAA,IACAZ,WAAWa;AAAAA,IACXX,gBAAgBY;AAAAA,IAChBhB,aAAaiB;AAAAA,EAAAA,IACXC,MAAAA,WAAWC,YAAAA,OAAa;AAEtBjB,QAAAA,YAAYC,iBAAiB,OAAOA,gBAAgBY;AACpDX,QAAAA,iBACJC,sBAAsB,OAAOA,qBAAqBW;AAC9ChB,QAAAA,cACJC,mBAAmB,OAAOA,kBAAkBgB;AAExCG,QAAAA,gBAAgBC,kBACnB9B,CAAQ,QAAA;AACP,QAAI,CAACP,UAAU;AACbC,yCAAUM;AAAAA,IACZ;AAAA,EAAA,GAEF,CAACP,UAAUC,OAAO,CACpB;AAEMqC,QAAAA,uBAAuBC,MAAAA,QAC3B,MACE1C,gCACEyB,gBACAvB,UACAC,UACAoC,eACAR,GACEhB,QAAQU,gBACR;AAAA,IAAE,CAACV,QAAQZ,QAAQ,GAAGA;AAAAA,EAAAA,GACtBG,uBAAMqC,eAAelB,cAAc,IAC/BA,eAAeZ,MAAMR,YACrBuC,MACN,CACF,GACF,CACEb,IACAhB,mCAASU,gBACTV,mCAASZ,UACTA,UACAoC,eACArC,UACAuB,cAAc,CAElB;AACA,QAAMoB,qBAAqBH,MAAAA,QACzB,MACE/B,wBACEe,cACAK,GACEhB,QAAQW,cACR;AAAA,IAAE,CAACX,QAAQZ,QAAQ,GAAGA;AAAAA,EAAAA,GACtBG,eAAAA,QAAMqC,eAAejB,YAAY,IAC7BA,aAAab,MAAMR,YACnBuC,MACN,CACF,GACF,CAACb,IAAIhB,mCAASW,cAAcX,mCAASZ,UAAUA,UAAUuB,YAAY,CACvE;AAEA,QAAMoB,sBACJ7B,SAAS,YAAYA,SAAS,aAC1B;AAAA,IACE,iBAAiBd,YAAYyC;AAAAA,IAC7B,iBAAiB1C;AAAAA,MAEnB;AAEA6C,QAAAA;AAAAA;AAAAA;AAAAA,IAGJC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAWjB,GACThB,QAAQkC,MACR;AAAA,UACE,CAAClC,QAAQmC,OAAO,GAAG,CAAC3B;AAAAA,UACpB,CAACR,QAAQM,SAAS,GAAGA;AAAAA,UACrB,CAACN,QAAQI,WAAW,GAAGA;AAAAA,UACvB,CAACJ,QAAQb,QAAQ,GAAG,CAAC,CAACA;AAAAA,UACtB,CAACa,QAAQZ,QAAQ,GAAG,CAAC,CAACA;AAAAA,UACtB,CAACY,QAAQoC,kBAAkB,GAAG1B,kBAAkB;AAAA,UAChD,CAACV,QAAQqC,gBAAgB,GAAG1B,gBAAgB;AAAA,WAE9CrB,SACF;AAAA,QACA,SAASkC;AAAAA,QACT,WAAW,MAAM;AAAA,QAAC;AAAA,QAClB,GAAIO;AAAAA,QACJ,GAAIjB;AAAAA,QAEHY,UAAAA;AAAAA,UAAAA;AAAAA,UACAd;AAAAA,UACAkB;AAAAA,QAAAA;AAAAA,MAAAA;AAAAA,IACH;AAAA;AAGF,SAAO1B,cACLkC,2BAAAA,IAACC,MACC,SAAA,EAAA,SAASrB,iBACT,UACA,eAAe9B,YAAYyC,QAC3B,UAAU3B,SAAS,WAAW,YAAY,QAC1C,SAAS;AAAA,IAAEsC,OAAOxC,QAAQwC;AAAAA,KAC1B,eAAe;AAAA,IACb3B;AAAAA,EACF,GAECmB,oBACH,IAEAA;AAEJ;;;"}

package/dist/cjs/components/Loading/Loading.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const range = require("lodash/range");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Loading_styles = require("./Loading.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const range__default = /* @__PURE__ */ _interopDefault(range);
@@ -28,24 +28,12 @@ const HvLoading = (props) => {
   const inline = {
     backgroundColor: uikitStyles.getColor(color, small ? "secondary" : "brand")
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    hidden: !!hidden,
-    className: cx(classes.root, {
-      [classes.hidden]: hidden
-    }, className),
-    ...others,
-    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.barContainer,
-      children: range__default.default(0, 3).map((e) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        style: inline,
-        className: cx(classes.loadingBar, classes[variant])
-      }, e))
-    }), label && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      variant: "caption1",
-      className: classes.label,
-      children: label
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { hidden: !!hidden, className: cx(classes.root, {
+    [classes.hidden]: hidden
+  }, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.barContainer, children: range__default.default(0, 3).map((e) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: inline, className: cx(classes.loadingBar, classes[variant]) }, e)) }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption1", className: classes.label, children: label })
+  ] });
 };
 exports.loadingClasses = Loading_styles.staticClasses;
 exports.HvLoading = HvLoading;

package/dist/cjs/components/Loading/Loading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.cjs","sources":["../../../../src/components/Loading/Loading.tsx"],"sourcesContent":["import { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\n\nimport range from \"lodash/range\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\n\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?: string | 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 = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\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 ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\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(0, 3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\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","props","color","hidden","small","label","classes","classesProp","className","others","useDefaultProps","cx","useClasses","size","colorVariant","variant","inline","backgroundColor","getColor","root","children","_jsx","barContainer","range","map","e","style","loadingBar","HvTypography"],"mappings":";;;;;;;;;;AA+BaA,MAAAA,YAAYA,CAACC,UAA0B;AAC5C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAaT,KAAK;AAEhC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,eAAAA,WAAWL,WAAW;AAExCM,QAAAA,OAAOT,QAAQ,UAAU;AACzBU,QAAAA,eAAeZ,QAAQ,UAAU;AACvC,QAAMa,UAAW,GAAEF,IAAK,GAAEC,YAAa;AAEvC,QAAME,SAAS;AAAA,IACbC,iBAAiBC,YAAAA,SAAShB,OAAOE,QAAQ,cAAc,OAAO;AAAA,EAAA;AAEhE,yCACE,OAAA;AAAA,IACED,QAAQ,CAAC,CAACA;AAAAA,IACVK,WAAWG,GACTL,QAAQa,MACR;AAAA,MACE,CAACb,QAAQH,MAAM,GAAGA;AAAAA,OAEpBK,SACF;AAAA,IAAE,GACEC;AAAAA,IAAMW,WAEVC,2BAAAA,IAAA,OAAA;AAAA,MAAKb,WAAWF,QAAQgB;AAAAA,MAAaF,UAClCG,eAAAA,QAAM,GAAG,CAAC,EAAEC,IAAKC,CAAAA,qCAChB,OAAA;AAAA,QAEEC,OAAOV;AAAAA,QACPR,WAAWG,GAAGL,QAAQqB,YAAYrB,QAAQS,OAAO,CAAC;AAAA,MAAE,GAF/CU,CAGN,CACF;AAAA,IAAA,CACE,GACJpB,SACCgB,2BAAAA,IAACO,yBAAY;AAAA,MAACb,SAAQ;AAAA,MAAWP,WAAWF,QAAQD;AAAAA,MAAMe,UACvDf;AAAAA,IAAAA,CACW,CACf;AAAA,EAAA,CACE;AAET;;;"}
+{"version":3,"file":"Loading.cjs","sources":["../../../../src/components/Loading/Loading.tsx"],"sourcesContent":["import { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\n\nimport range from \"lodash/range\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvTypography } from \"@core/components/Typography\";\n\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?: string | 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 = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\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 ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\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(0, 3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\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","props","color","hidden","small","label","classes","classesProp","className","others","useDefaultProps","cx","useClasses","size","colorVariant","variant","inline","backgroundColor","getColor","jsxs","root","jsx","barContainer","range","map","e","loadingBar","HvTypography"],"mappings":";;;;;;;;;;AA+BaA,MAAAA,YAAYA,CAACC,UAA0B;AAC5C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAaT,KAAK;AAEhC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,eAAAA,WAAWL,WAAW;AAExCM,QAAAA,OAAOT,QAAQ,UAAU;AACzBU,QAAAA,eAAeZ,QAAQ,UAAU;AACvC,QAAMa,UAAW,GAAEF,IAAK,GAAEC,YAAa;AAEvC,QAAME,SAAS;AAAA,IACbC,iBAAiBC,YAAAA,SAAShB,OAAOE,QAAQ,cAAc,OAAO;AAAA,EAAA;AAG9D,SAAAe,2BAAA,KAAC,SACC,QAAQ,CAAC,CAAChB,QACV,WAAWQ,GACTL,QAAQc,MACR;AAAA,IACE,CAACd,QAAQH,MAAM,GAAGA;AAAAA,EAEpBK,GAAAA,SACF,GACA,GAAIC,QAEJ,UAAA;AAAA,IAACY,2BAAAA,IAAA,OAAA,EAAI,WAAWf,QAAQgB,cACrBC,UAAAA,eAAAA,QAAM,GAAG,CAAC,EAAEC,IAAKC,CAAAA,MACfJ,2BAAAA,IAAA,OAAA,EAEC,OAAOL,QACP,WAAWL,GAAGL,QAAQoB,YAAYpB,QAAQS,OAAO,CAAC,EAAA,GAF7CU,EAIR,EACH,CAAA;AAAA,IACCpB,wCACEsB,yBAAa,EAAA,SAAQ,YAAW,WAAWrB,QAAQD,OACjDA,UACH,MAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Login_styles = require("./Login.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvLogin = (props) => {
   const {
     id,
@@ -16,18 +16,9 @@ const HvLogin = (props) => {
     classes,
     cx
   } = Login_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    id,
-    className: cx(classes.root, className),
-    style: {
-      backgroundImage: background && `url(${background})`
-    },
-    ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.formContainer,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: cx(classes.root, className), style: {
+    backgroundImage: background && `url(${background})`
+  }, ...others, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.formContainer, children }) });
 };
 exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = HvLogin;