@hitachivantara/uikit-react-core 5.106.0 → 6.0.0-next.1

package/dist/cjs/Link/Link.cjs

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const Link_styles = require("./Link.styles.cjs");
-const HvLink = (props) => {
-  const {
-    onClick,
-    classes: classesProp,
-    className,
-    route,
-    data,
-    children,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvLink", props);
-  const { classes, cx } = Link_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "a",
-    {
-      href: route,
-      onClick: (event) => {
-        if (!onClick) return;
-        event.preventDefault();
-        onClick?.(event, data);
-      },
-      className: cx(classes.a, className),
-      ...others,
-      children
-    }
-  );
-};
-exports.linkClasses = Link_styles.staticClasses;
-exports.HvLink = HvLink;

package/dist/cjs/Link/Link.styles.cjs

@@ -1,15 +0,0 @@
-"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("HvLink", {
-  a: {
-    ...uikitStyles.theme.typography.label,
-    textDecoration: "underline",
-    color: uikitStyles.theme.colors.primary,
-    "&:focus-visible": { ...focusUtils.outlineStyles }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/List/List.cjs

@@ -1,252 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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 = React.useRef(null);
-  React.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] = 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();
-    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 React.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" }),
-        separator: item.separator,
-        ...otherProps,
-        children: renderSelectItem(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);
-  const selectedItemIndex = list.findIndex((item) => item.selected);
-  React.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 = React.useMemo(() => {
-    return React.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
-  ]);
-  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/List/List.styles.cjs

@@ -1,51 +0,0 @@
-"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
-    }
-  },
-  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/List/useSelectableList.cjs

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

package/dist/cjs/List/utils.cjs

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

package/dist/cjs/ListContainer/ListContainer.cjs

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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 = React.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 = React.useRef(null);
-  const { topContainerRef, nesting = -1 } = React.useContext(ListContext.default);
-  const listContext = React.useMemo(
-    () => ({
-      topContainerRef: topContainerRef || containerRef,
-      condensed,
-      selectable,
-      disableGutters,
-      interactive,
-      nesting: nesting + 1
-    }),
-    [
-      condensed,
-      selectable,
-      disableGutters,
-      interactive,
-      nesting,
-      topContainerRef
-    ]
-  );
-  const children = React.useMemo(() => {
-    if (!interactive) return childrenProp;
-    const anySelected = React.Children.toArray(childrenProp).some(
-      (child) => React.isValidElement(child) && child.props.selected && !child.props.disabled
-    );
-    return React.Children.map(childrenProp, (child, i) => {
-      const tabIndex = child.props.tabIndex || !anySelected && i === 0 || child.props.selected && !child.props.disabled ? 0 : -1;
-      return React.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/ListContainer/ListContainer.styles.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListContainer", {
-  root: {
-    overflow: "clip",
-    overflowClipMargin: 4
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/ListContainer/ListContext/ListContext.cjs

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

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

@@ -1,137 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = 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 = React.forwardRef(function HvListItem2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    role,
-    value,
-    selected,
-    disabled,
-    selectable: selectableProp,
-    interactive: interactiveProp,
-    condensed: condensedProp,
-    disableGutters: disableGuttersProp,
-    separator,
-    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
-  } = React.useContext(ListContext.default);
-  const condensed = condensedProp ?? condensedContext;
-  const disableGutters = disableGuttersProp ?? disableGuttersContext;
-  const interactive = interactiveProp ?? interactiveContext;
-  const selectable = selectableProp ?? selectableContext;
-  const handleClick = React.useCallback(
-    (evt) => {
-      if (disabled) return;
-      onClick?.(evt);
-    },
-    [disabled, onClick]
-  );
-  const clonedStartAdornment = React.useMemo(() => {
-    if (!React.isValidElement(startAdornment)) return startAdornment;
-    return React.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 = React.useMemo(() => {
-    if (!React.isValidElement(endAdornment)) return endAdornment;
-    return React.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
-        ]
-      }
-    )
-  );
-  const item = 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;
-  if (separator) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      item,
-      /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: classes.separator, "aria-hidden": "true" })
-    ] });
-  }
-  return item;
-});
-exports.listItemClasses = ListItem_styles.staticClasses;
-exports.HvListItem = HvListItem;