@hitachivantara/uikit-react-core 5.103.0 → 5.104.0

package/dist/cjs/packages/core/src/List/List.cjs

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const reactWindow = require("react-window");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const CounterLabel = require("../utils/CounterLabel.cjs");
+const setId = require("../utils/setId.cjs");
+const List_styles = require("./List.styles.cjs");
+const useSelectableList = require("./useSelectableList.cjs");
+const utils = require("./utils.cjs");
+const CheckBox = require("../CheckBox/CheckBox.cjs");
+const Radio = require("../Radio/Radio.cjs");
+const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
+const Link = require("../Link/Link.cjs");
+const ListContainer = require("../ListContainer/ListContainer.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
+const DEFAULT_LABELS = {
+  /** The label used for the All checkbox action. @deprecated no longer used */
+  selectAll: "Select All",
+  /** The label used in the middle of the multi-selection count. */
+  selectionConjunction: "/"
+};
+const HvList = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    multiSelect = false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    hasTooltips = false,
+    showSelectAll = false,
+    labels = DEFAULT_LABELS,
+    useSelector = false,
+    selectable = true,
+    singleSelectionToggle = true,
+    condensed = false,
+    onChange,
+    onClick,
+    values: valuesProp = [],
+    height,
+    virtualized = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvList", props);
+  const { classes, cx } = List_styles.useClasses(classesProp);
+  const [list, setList, selection] = useSelectableList.useSelectableList(valuesProp);
+  const listRef = a.useRef(null);
+  a.useEffect(() => {
+    const passedProps = { multiSelect, selectable, singleSelectionToggle };
+    const parsedList = utils.parseList(
+      void 0,
+      passedProps,
+      void 0,
+      valuesProp
+    );
+    setList(parsedList);
+  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);
+  const [role, itemRole] = a.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();
+    if (item.disabled) return;
+    const passedProps = { multiSelect, selectable, singleSelectionToggle };
+    const parsedList = utils.parseList(item, passedProps, void 0, list);
+    setList(parsedList);
+    onClick?.(evt, item);
+    onChange?.(parsedList);
+  };
+  const handleSelectAll = () => {
+    const passedProps = { multiSelect, selectable, singleSelectionToggle };
+    const anySelectableSelected = list.some(
+      (elem) => elem.selected || elem.disabled
+    );
+    const parsedList = utils.parseList(
+      void 0,
+      passedProps,
+      !anySelectableSelected,
+      list
+    );
+    setList(parsedList);
+    onChange?.(parsedList);
+  };
+  const renderLeftIcon = (item) => {
+    return a.isValidElement(item.icon) ? item.icon : typeof item.icon === "function" ? item.icon?.({
+      isSelected: item.selected,
+      isDisabled: item.disabled
+    }) : null;
+  };
+  const renderSelectAll = () => {
+    const anySelected2 = !!selection?.length;
+    const allSelected = selection.length === list.length;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CheckBox.HvCheckBox,
+      {
+        id: setId.setId(id, "select-all"),
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: selection.length,
+            total: list.length,
+            conjunctionLabel: labels.selectionConjunction
+          }
+        ),
+        onChange: handleSelectAll,
+        className: classes.selectAllSelector,
+        indeterminate: anySelected2 && !allSelected,
+        checked: allSelected
+      }
+    );
+  };
+  const renderItemText = (item) => {
+    return !multiSelect && item.path ? /* @__PURE__ */ jsxRuntime.jsx(Link.HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label }) }) : /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label });
+  };
+  const renderSelectItem = (item, itemId) => {
+    if (!useSelector) return renderItemText(item);
+    const Component = multiSelect ? CheckBox.HvCheckBox : Radio.HvRadio;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        id: setId.setId(itemId, "selector"),
+        label: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label }),
+        checked: item.selected || false,
+        disabled: item.disabled,
+        onChange: multiSelect ? (evt) => handleSelect(evt, item) : void 0,
+        classes: {
+          root: classes.selectorRoot,
+          container: classes.selectorContainer,
+          label: classes.truncate
+        }
+      }
+    );
+  };
+  const renderListItem = (item, i, otherProps = {}) => {
+    const itemId = setId.setId(id, "item", i);
+    const selected = item.selected || false;
+    const startAdornment = !useSelector && item.icon ? renderLeftIcon(item) : null;
+    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(icons.HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
+        ...otherProps,
+        children: renderSelectItem(item, itemId)
+      },
+      i
+    );
+  };
+  const renderSeparator = (index) => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: classes.separator }, `separator-${index}`);
+  const filteredList = list.filter((it) => !it.isHidden);
+  const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
+  const selectedItemIndex = list.findIndex((item) => item.selected);
+  a.useEffect(() => {
+    if (selectedItemIndex >= 0 && listRef.current !== null) {
+      listRef.current.scrollToItem(selectedItemIndex);
+    }
+  }, [listRef, selectedItemIndex]);
+  const renderVirtualizedListItem = ({
+    index,
+    style
+  }) => {
+    const item = filteredList[index];
+    const tabIndex = item.tabIndex || !anySelected && index === 0 || item.selected && !item.disabled ? 0 : -1;
+    return renderListItem(item, index, {
+      style: {
+        ...style,
+        top: `${Number.parseFloat(style.top) + 5}px`,
+        left: `${Number.parseFloat(style.left) + 5}px`,
+        width: `calc(${Number.parseFloat(style.width)}% - 10px)`
+      },
+      tabIndex,
+      interactive: true,
+      condensed,
+      disableGutters: useSelector
+    });
+  };
+  const ariaMultiSelectable = role === "listbox" && multiSelect || void 0;
+  const ListContainer$1 = a.useMemo(() => {
+    return a.forwardRef(
+      ({ ...rest }, 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
+  ]);
+  const renderListWithSeparators = () => {
+    const items = [];
+    filteredList.forEach((item, i) => {
+      items.push(renderListItem(item, i));
+      if (item.separator && i < filteredList.length - 1) {
+        items.push(renderSeparator(i));
+      }
+    });
+    return items;
+  };
+  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: renderListWithSeparators()
+      }
+    ) : /* @__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/packages/core/src/List/List.styles.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvList", {
+  root: {},
+  virtualizedRoot: { marginBottom: 5 },
+  selectorRoot: { width: "100%", zIndex: 0 },
+  selectorContainer: {
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    "&:focus-within": {
+      backgroundColor: "transparent",
+      outline: "none",
+      boxShadow: "none"
+    }
+  },
+  box: { width: "32px", height: "32px", marginLeft: "auto" },
+  truncate: {
+    display: "inline-block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  item: {},
+  itemSelector: {
+    "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
+    }
+  },
+  separator: {
+    height: 1,
+    backgroundColor: uikitStyles.theme.colors.border,
+    margin: `${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.sm} * -1)`,
+    border: "none"
+  },
+  link: {
+    ...uikitStyles.theme.typography.body,
+    textDecoration: "none",
+    "&:focus": {
+      boxShadow: "unset !important"
+    }
+  },
+  selectAllSelector: {
+    width: "100%",
+    margin: "0 0 2px 0",
+    position: "relative",
+    zIndex: 0,
+    // prevent the focus ring to be hidden by sibling hover background
+    "&:focus-within": {
+      zIndex: 1
+    }
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/packages/core/src/List/useSelectableList.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const useSelectableList = (defaultList = []) => {
+  const [list, setList] = a.useState(defaultList);
+  const selection = a.useMemo(() => list.filter((elem) => elem.selected), [list]);
+  return [list, setList, selection];
+};
+exports.useSelectableList = useSelectableList;

package/dist/cjs/packages/core/src/ListContainer/ListContainer.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useForkRef = require("../hooks/useForkRef.cjs");
+const ListContainer_styles = require("./ListContainer.styles.cjs");
+const ListContext = require("./ListContext/ListContext.cjs");
+const HvListContainer = a.forwardRef(function HvListContainer2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    interactive = false,
+    selectable,
+    condensed,
+    disableGutters,
+    children: childrenProp,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvListContainer", props);
+  const { classes, cx } = ListContainer_styles.useClasses(classesProp);
+  const containerRef = a.useRef(null);
+  const { topContainerRef, nesting = -1 } = a.useContext(ListContext.default);
+  const listContext = a.useMemo(
+    () => ({
+      topContainerRef: topContainerRef || containerRef,
+      condensed,
+      selectable,
+      disableGutters,
+      interactive,
+      nesting: nesting + 1
+    }),
+    [
+      condensed,
+      selectable,
+      disableGutters,
+      interactive,
+      nesting,
+      topContainerRef
+    ]
+  );
+  const children = a.useMemo(() => {
+    if (!interactive) return childrenProp;
+    const anySelected = a.Children.toArray(childrenProp).some(
+      (child) => a.isValidElement(child) && child.props.selected && !child.props.disabled
+    );
+    return a.Children.map(childrenProp, (child, i) => {
+      const tabIndex = child.props.tabIndex || !anySelected && i === 0 || child.props.selected && !child.props.disabled ? 0 : -1;
+      return a.cloneElement(child, {
+        tabIndex,
+        interactive
+      });
+    });
+  }, [childrenProp, interactive]);
+  const handleRef = useForkRef.useForkRef(ref, 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
+    }
+  ) });
+});
+exports.listContainerClasses = ListContainer_styles.staticClasses;
+exports.HvListContainer = HvListContainer;

package/dist/cjs/packages/core/src/ListContainer/ListContext/ListContext.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const a = require("react");
+const ListContext = a.createContext({});
+ListContext.displayName = "ListContext";
+exports.default = ListContext;

package/dist/cjs/packages/core/src/ListContainer/ListItem/ListItem.cjs

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const ListItem_styles = require("./ListItem.styles.cjs");
+const ListContext = require("../ListContext/ListContext.cjs");
+const Focus = require("../../Focus/Focus.cjs");
+const HvListItem = a.forwardRef(function HvListItem2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    role,
+    value,
+    selected,
+    disabled,
+    selectable: selectableProp,
+    interactive: interactiveProp,
+    condensed: condensedProp,
+    disableGutters: disableGuttersProp,
+    startAdornment,
+    endAdornment,
+    onClick,
+    children,
+    tabIndex,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvListItem", props);
+  const { classes, cx } = ListItem_styles.useClasses(classesProp);
+  const {
+    topContainerRef,
+    condensed: condensedContext,
+    disableGutters: disableGuttersContext,
+    interactive: interactiveContext,
+    selectable: selectableContext
+  } = a.useContext(ListContext.default);
+  const condensed = condensedProp ?? condensedContext;
+  const disableGutters = disableGuttersProp ?? disableGuttersContext;
+  const interactive = interactiveProp ?? interactiveContext;
+  const selectable = selectableProp ?? selectableContext;
+  const handleClick = a.useCallback(
+    (evt) => {
+      if (disabled) return;
+      onClick?.(evt);
+    },
+    [disabled, onClick]
+  );
+  const clonedStartAdornment = a.useMemo(() => {
+    if (!a.isValidElement(startAdornment)) return startAdornment;
+    return a.cloneElement(startAdornment, {
+      className: cx(classes.startAdornment, startAdornment.props.className, {
+        // TODO: remove 👇 props below
+        [classes.disabled]: disabled
+      }),
+      checked: !!selected,
+      disabled,
+      onChange: handleClick
+    });
+  }, [
+    cx,
+    classes?.startAdornment,
+    classes?.disabled,
+    disabled,
+    handleClick,
+    selected,
+    startAdornment
+  ]);
+  const clonedEndAdornment = a.useMemo(() => {
+    if (!a.isValidElement(endAdornment)) return endAdornment;
+    return a.cloneElement(endAdornment, {
+      className: cx(classes.endAdornment, endAdornment.props.className, {
+        [classes.disabled]: disabled
+      })
+    });
+  }, [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
+  const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
+    "aria-disabled": disabled || void 0,
+    "aria-selected": selected
+  } : {};
+  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, jsx-a11y/click-events-have-key-events
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ref,
+        role,
+        value,
+        className: cx(
+          classes.root,
+          {
+            [classes.gutters]: !disableGutters,
+            [classes.condensed]: condensed,
+            [classes.interactive]: interactive || selectable,
+            [classes.selected]: selected || props["aria-selected"],
+            [classes.disabled]: disabled || props["aria-disabled"],
+            [classes.withStartAdornment]: startAdornment != null,
+            [classes.withEndAdornment]: endAdornment != null
+          },
+          className
+        ),
+        tabIndex: interactive ? void 0 : tabIndex,
+        onClick: handleClick,
+        ...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;
+});
+exports.listItemClasses = ListItem_styles.staticClasses;
+exports.HvListItem = HvListItem;

package/dist/cjs/packages/core/src/ListContainer/ListItem/ListItem.styles.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const focusUtils = require("../../utils/focusUtils.cjs");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem", {
+  root: {
+    ...uikitStyles.theme.typography.body,
+    padding: 0,
+    display: "block",
+    height: "32px",
+    lineHeight: "32px",
+    listStyleType: "none",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    position: "relative",
+    alignContent: "center",
+    "&:not(:last-child)": {
+      marginBottom: "8px"
+    },
+    "&$condensed": {
+      marginBottom: 0
+    },
+    "&.HvIsFocused:focus-visible": {
+      ...focusUtils.outlineStyles,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+      zIndex: 2
+    }
+  },
+  focus: {
+    "&:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+      zIndex: 2
+    }
+  },
+  gutters: {
+    padding: `0 ${uikitStyles.theme.space.xs}`,
+    ":has($startAdornment)": {
+      paddingLeft: 0
+    },
+    ":has($endAdornment)": {
+      paddingRight: 0
+    }
+  },
+  condensed: {},
+  interactive: {
+    cursor: "pointer",
+    "&:not($disabled):not($selected):hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
+    },
+    "&$disabled": {
+      cursor: "not-allowed"
+    }
+  },
+  selected: { backgroundColor: uikitStyles.theme.colors.bgHover },
+  disabled: {
+    color: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled
+  },
+  startAdornment: {
+    float: "left"
+  },
+  endAdornment: {
+    float: "right"
+  },
+  /** @deprecated use `:has($startAdornment)` instead */
+  withStartAdornment: {},
+  /** @deprecated use `:has($endAdornment)` instead */
+  withEndAdornment: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/packages/core/src/Loading/Loading.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const helpers = require("../utils/helpers.cjs");
+const Loading_styles = require("./Loading.styles.cjs");
+const HvLoading = a.forwardRef(function HvLoading2(props, ref) {
+  const {
+    color,
+    hidden,
+    small,
+    label,
+    classes: classesProp,
+    style,
+    className,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvLoading", props);
+  const { classes, cx } = Loading_styles.useClasses(classesProp);
+  const size = small ? "small" : "regular";
+  const colorVariant = color && `${size}Color`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      hidden: !!hidden,
+      "data-size": size,
+      style: uikitReactUtils.mergeStyles(style, {
+        color: uikitStyles.getColor(color, small ? "text" : "brand"),
+        "--customColor": uikitStyles.getColor(color)
+      }),
+      className: cx(
+        classes.root,
+        {
+          [classes.hidden]: hidden
+        },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.barContainer, children: helpers.range(3).map((e) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cx(
+              classes.loadingBar,
+              // TODO: hoist to parent & remove unused `colorVariant` in v6
+              classes[size],
+              classes[colorVariant]
+            )
+          },
+          e
+        )) }),
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
+      ]
+    }
+  );
+});
+exports.loadingClasses = Loading_styles.staticClasses;
+exports.HvLoading = HvLoading;