@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/FilterGroup/LeftPanel/LeftPanel.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const setId = require("../../utils/setId.cjs");
+const FilterGroupContext = require("../FilterGroupContext.cjs");
+const LeftPanel_styles = require("./LeftPanel.styles.cjs");
+const Counter = require("../Counter/Counter.cjs");
+const Panel = require("../../Panel/Panel.cjs");
+const ListContainer = require("../../ListContainer/ListContainer.cjs");
+const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
+const HvFilterGroupLeftPanel = ({
+  id,
+  className,
+  emptyElement,
+  classes: classesProp
+}) => {
+  const { classes } = LeftPanel_styles.useClasses(classesProp);
+  const { filterOptions, activeGroup, setActiveGroup } = React.useContext(FilterGroupContext.HvFilterGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { id: setId.setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { id: setId.setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    ListItem.HvListItem,
+    {
+      className: classes.listItem,
+      onClick: () => setActiveGroup(index),
+      selected: filterOptions[activeGroup].id === group.id,
+      endAdornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, { groupId: group.id }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: group.name })
+    },
+    group.id || group.name
+  )) }) : emptyElement });
+};
+exports.filterGroupLeftPanelClasses = LeftPanel_styles.staticClasses;
+exports.HvFilterGroupLeftPanel = HvFilterGroupLeftPanel;

package/dist/cjs/FilterGroup/RightPanel/RightPanel.cjs

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const CounterLabel = require("../../utils/CounterLabel.cjs");
+const setId = require("../../utils/setId.cjs");
+const FilterGroupContext = require("../FilterGroupContext.cjs");
+const RightPanel_styles = require("./RightPanel.styles.cjs");
+const CheckBox = require("../../CheckBox/CheckBox.cjs");
+const Panel = require("../../Panel/Panel.cjs");
+const Input = require("../../Input/Input.cjs");
+const List = require("../../List/List.cjs");
+const HvFilterGroupRightPanel = ({
+  id,
+  className,
+  labels,
+  emptyElement,
+  classes: classesProp
+}) => {
+  const { classes } = RightPanel_styles.useClasses(classesProp);
+  const [searchStr, setSearchStr] = React.useState("");
+  const [allSelected, setAllSelected] = React.useState(false);
+  const [anySelected, setAnySelected] = React.useState(false);
+  const {
+    filterOptions,
+    filterValues = [],
+    setFilterValues,
+    activeGroup
+  } = React.useContext(FilterGroupContext.HvFilterGroupContext);
+  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } = React.useMemo(() => {
+    const filteredOptions = filterOptions[activeGroup]?.data.filter(
+      (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())
+    );
+    return {
+      all: filteredOptions?.map((option) => option.id) || [],
+      enabled: filteredOptions?.filter((option) => !option.disabled)?.map((option) => option.id) || []
+    };
+  }, [filterOptions, activeGroup, searchStr]);
+  const activeFilterValues = React.useMemo(
+    () => filterValues[activeGroup]?.filter(
+      (value) => allActiveGroupOptions.includes(value)
+    ) || [],
+    [filterValues, allActiveGroupOptions, activeGroup]
+  );
+  const listValues = React.useMemo(
+    () => filterOptions[activeGroup]?.data.map((option) => ({
+      ...option,
+      label: option.name,
+      selected: filterValues[activeGroup]?.includes(option.id),
+      isHidden: option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0
+    })) || [],
+    [filterOptions, filterValues, activeGroup, searchStr]
+  );
+  const updateSelectAll = React.useCallback(() => {
+    const nbrSelected = activeFilterValues?.length;
+    const hasSelection = nbrSelected > 0;
+    const allSelect = nbrSelected === allActiveGroupOptions.length;
+    setAnySelected(hasSelection);
+    setAllSelected(hasSelection && allSelect);
+  }, [activeFilterValues, allActiveGroupOptions]);
+  React.useEffect(() => {
+    updateSelectAll();
+  }, [activeFilterValues, updateSelectAll]);
+  React.useEffect(() => setSearchStr(""), [activeGroup]);
+  const onChangeHandler = (values) => {
+    const newFilterValues = filterOptions.map(
+      (_, i) => activeGroup === i ? values.filter((v) => v.selected).map((v) => v.id) : [...filterValues[i] || []]
+    );
+    setFilterValues(newFilterValues);
+  };
+  const handleSelectAll = React.useCallback(() => {
+    const newFilterValues = structuredClone(filterValues);
+    if (anySelected) {
+      if (searchStr !== "") {
+        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(
+          (value) => !enabledActiveGroupOptions.includes(value)
+        );
+      } else {
+        newFilterValues[activeGroup] = [];
+      }
+    } else {
+      const currentOptions = newFilterValues[activeGroup] || [];
+      newFilterValues[activeGroup] = [
+        ...currentOptions,
+        ...enabledActiveGroupOptions
+      ];
+    }
+    setFilterValues(newFilterValues);
+  }, [
+    activeGroup,
+    enabledActiveGroupOptions,
+    anySelected,
+    filterValues,
+    setFilterValues,
+    searchStr
+  ]);
+  const SelectAll = React.useCallback(() => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      CheckBox.HvCheckBox,
+      {
+        id: setId.setId(id, "select-all"),
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: activeFilterValues?.length,
+            total: allActiveGroupOptions.length,
+            conjunctionLabel: labels?.multiSelectionConjunction
+          }
+        ),
+        onChange: () => handleSelectAll(),
+        className: classes.selectAll,
+        indeterminate: anySelected && !allSelected,
+        checked: allSelected
+      }
+    ) });
+  }, [
+    activeFilterValues?.length,
+    allActiveGroupOptions.length,
+    allSelected,
+    anySelected,
+    handleSelectAll,
+    id,
+    labels,
+    classes?.selectAllContainer,
+    classes?.selectAll
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { id: setId.setId(id, "rightPanel"), className, children: listValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        id: setId.setId(id, "search"),
+        classes: {
+          root: classes.search
+        },
+        type: "search",
+        placeholder: labels?.searchBoxPlaceholder,
+        value: searchStr,
+        onChange: (_, str) => setSearchStr(str)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectAll, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      List.HvList,
+      {
+        id: setId.setId(id, "list"),
+        values: listValues,
+        className: classes.list,
+        multiSelect: true,
+        useSelector: true,
+        showSelectAll: false,
+        onChange: onChangeHandler,
+        selectable: true,
+        condensed: true,
+        hasTooltips: true
+      },
+      activeGroup
+    )
+  ] }) : emptyElement });
+};
+exports.filterGroupRightPanelClasses = RightPanel_styles.staticClasses;
+exports.HvFilterGroupRightPanel = HvFilterGroupRightPanel;

package/dist/cjs/Focus/Focus.cjs

@@ -0,0 +1,346 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const browser = require("../utils/browser.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const Focus_styles = require("./Focus.styles.cjs");
+const utils = require("./utils.cjs");
+const HvFocus = ({
+  classes: classesProp,
+  children,
+  configuration = {},
+  disabledClass = false,
+  selected = false,
+  disabled = false,
+  rootRef = void 0,
+  focusOnClick = false,
+  focusDisabled = true,
+  strategy = "listbox",
+  filterClass,
+  navigationJump = 4
+}) => {
+  const [childFocus, setChildFocus] = React.useState();
+  const [hasRunConfig, setHasRunConfig] = React.useState(false);
+  const { classes, cx } = Focus_styles.useClasses(classesProp);
+  const hasFocusVisible = React.useRef(false);
+  const getFocuses = () => {
+    const focuses = rootRef?.current ? Array.from(
+      rootRef.current.getElementsByClassName(
+        filterClass || Focus_styles.staticClasses.root || "root"
+      )
+    ) : [];
+    return focuses;
+  };
+  const setTabIndex = (el, tabIndex = 0) => {
+    if (!el) return;
+    const elChildFocus = utils.getFocusableChildren(el)[0];
+    if (elChildFocus) {
+      el.tabIndex = -1;
+      elChildFocus.tabIndex = tabIndex;
+    } else {
+      el.tabIndex = tabIndex;
+    }
+  };
+  const setSelectedTabIndex = () => {
+    const focuses = getFocuses();
+    const firstSelected = focuses.find(
+      (focus) => focus.classList.contains(classes.selected || "selected")
+    );
+    if (!firstSelected) return;
+    focuses.forEach((focus) => setTabIndex(focus, -1));
+    setTabIndex(firstSelected, 0);
+  };
+  const clearTabSiblings = (el) => {
+    getFocuses().forEach((focus) => setTabIndex(focus, -1));
+    setTabIndex(el, 0);
+  };
+  const onFocusStrategy = (evt) => {
+    if (strategy === "listbox") {
+      clearTabSiblings(evt.currentTarget);
+    }
+  };
+  const onBlurStrategy = () => {
+    if (strategy === "listbox" && rootRef && rootRef.current && !rootRef.current.contains(document.activeElement)) {
+      setTimeout(() => {
+        setSelectedTabIndex();
+      }, 10);
+    }
+  };
+  const config = (el) => {
+    const { tabIndex } = configuration;
+    if (!el || hasRunConfig) return;
+    if (strategy === "card") {
+      setChildFocus(children);
+      return;
+    }
+    if (strategy === "grid") {
+      return;
+    }
+    const focusableChildren = utils.getFocusableChildren(el);
+    if (focusableChildren.length) {
+      focusableChildren.forEach((child) => setTabIndex(child, -1));
+      setChildFocus(focusableChildren[0]);
+    }
+    if (tabIndex != null) setTabIndex(el, tabIndex);
+    setHasRunConfig(true);
+  };
+  const addFocusClass = (evt) => {
+    if (focusOnClick) {
+      classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    } else {
+      classes.focusedVisible.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    }
+    evt.currentTarget.classList.add("HvIsFocused");
+    classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+  };
+  const removeFocusClass = () => {
+    getFocuses().forEach((element) => {
+      classes.focused.split(" ").forEach((c) => element.classList.remove(c));
+      classes.focusedVisible.split(" ").forEach((c) => element.classList.remove(c));
+      element.classList.remove("HvIsFocused");
+      classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
+    });
+  };
+  const onFocus = (evt) => {
+    hasFocusVisible.current = evt.currentTarget.matches(":focus-visible");
+    addFocusClass(evt);
+    childFocus?.focus?.();
+    onFocusStrategy(evt);
+  };
+  const onBlur = () => {
+    removeFocusClass();
+    onBlurStrategy();
+  };
+  const onMouseDown = (evt) => {
+    const hasCard = !!evt.currentTarget?.querySelector(".HvIsCardGridElement");
+    if (strategy === "grid" && hasCard) return;
+    utils.setFocusTo(evt.currentTarget);
+    setTabIndex(evt.currentTarget, 0);
+  };
+  const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {
+    if (focusesList?.includes(previousFocus)) {
+      setTabIndex(previousFocus, -1);
+    }
+    setTabIndex(nextFocus, 0);
+    utils.setFocusTo(nextFocus);
+  };
+  const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({
+    right: (currentFocusIndex + 1) % jump === 0 || currentFocusIndex + 1 > listSize - 1,
+    left: currentFocusIndex % jump === 0,
+    up: currentFocusIndex - jump < 0,
+    down: currentFocusIndex + jump > listSize || currentFocusIndex + jump > listSize - 1
+  });
+  const onGridKeyDownHandler = (evt, focuses, focusesList, currentFocusIndex, jump) => {
+    const childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
+    if (!keyboardUtils.isOneOfKeys(evt, [
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "Home",
+      "End",
+      "Space",
+      "Enter"
+    ]) || childFocusIsInput && keyboardUtils.isKey(evt, "Enter")) {
+      return;
+    }
+    if (!keyboardUtils.isOneOfKeys(evt, ["Enter", "Space"])) {
+      evt.preventDefault();
+      evt.stopPropagation();
+    }
+    if (!hasFocusVisible.current) {
+      hasFocusVisible.current = true;
+      if (evt.code === "Space" || evt.code === "Enter") {
+        focusAndUpdateIndex(
+          focuses.current || focuses.first,
+          evt.current,
+          focusesList
+        );
+        return;
+      }
+      if (focuses.current === focuses.first) {
+        focuses.previous = void 0;
+        focuses.next = void 0;
+        focuses.jump = void 0;
+        focuses.fall = void 0;
+      }
+    }
+    const blockedKeys = getEnabledKeys(
+      currentFocusIndex,
+      jump,
+      focusesList.length
+    );
+    switch (evt.code) {
+      case "Space":
+      case "Enter":
+        if (browser.isBrowser("firefox")) {
+          evt.target.click();
+        } else {
+          evt.currentTarget.click();
+        }
+        break;
+      case "ArrowUp":
+        if (!blockedKeys.up) {
+          focusAndUpdateIndex(
+            focuses.jump || focuses.last,
+            evt.current,
+            focusesList
+          );
+        }
+        break;
+      case "ArrowDown":
+        if (!blockedKeys.down) {
+          focusAndUpdateIndex(
+            focuses.fall || focuses.first,
+            evt.current,
+            focusesList
+          );
+        }
+        break;
+      case "ArrowLeft":
+        if (!blockedKeys.left) {
+          focusAndUpdateIndex(
+            focuses.previous || focuses.last,
+            evt.current,
+            focusesList
+          );
+        }
+        break;
+      case "ArrowRight":
+        if (!blockedKeys.right) {
+          focusAndUpdateIndex(
+            focuses.next || focuses.first,
+            evt.current,
+            focusesList
+          );
+        }
+        break;
+      case "Home":
+        focusAndUpdateIndex(focuses.first, evt.current, focusesList);
+        break;
+      case "End":
+        focusAndUpdateIndex(focuses.last, evt.current, focusesList);
+        break;
+    }
+  };
+  const onVerticalArrangementHandler = (evt, focuses, focusesList) => {
+    const childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
+    if (!keyboardUtils.isOneOfKeys(evt, [
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End",
+      "Space",
+      "Enter"
+    ]) || childFocusIsInput && keyboardUtils.isKey(evt, "Enter")) {
+      return;
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (!hasFocusVisible.current) {
+      hasFocusVisible.current = true;
+      if (evt.code === "Space" || evt.code === "Enter") {
+        focusAndUpdateIndex(
+          focuses.current || focuses.first,
+          evt.current,
+          focusesList
+        );
+        return;
+      }
+      if (focuses.current === focuses.first) {
+        focuses.previous = void 0;
+        focuses.next = void 0;
+      }
+    }
+    switch (evt.code) {
+      case "Space":
+      case "Enter":
+        evt.target.click();
+        break;
+      case "ArrowUp":
+        focusAndUpdateIndex(
+          focuses.previous || focuses.last,
+          evt.current,
+          focusesList
+        );
+        break;
+      case "ArrowDown":
+        focusAndUpdateIndex(
+          focuses.next || focuses.first,
+          evt.current,
+          focusesList
+        );
+        break;
+      case "Home":
+        focusAndUpdateIndex(focuses.first, evt.current, focusesList);
+        break;
+      case "End":
+        focusAndUpdateIndex(focuses.last, evt.current, focusesList);
+        break;
+    }
+  };
+  const onSingleHandler = (evt) => {
+    const childFocusIsInput = childFocus && childFocus.nodeName === "INPUT";
+    if (!keyboardUtils.isOneOfKeys(evt, ["Space", "Enter"]) || childFocusIsInput && keyboardUtils.isKey(evt, "Enter")) {
+      return;
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+    evt.currentTarget.click();
+  };
+  const onKeyDown = (evt) => {
+    if (rootRef?.current == null) {
+      onSingleHandler(evt);
+      return;
+    }
+    const isDisabledFocusable = strategy === "menu";
+    const focusesList = getFocuses().filter(
+      (el) => isDisabledFocusable || !el.classList.contains(classes?.disabled)
+    );
+    const currentFocus = focusesList.indexOf(evt.currentTarget);
+    const focuses = {
+      first: focusesList[0],
+      last: focusesList[focusesList.length - 1],
+      previous: focusesList[currentFocus - 1],
+      current: focusesList[currentFocus],
+      next: focusesList[currentFocus + 1],
+      fall: focusesList[currentFocus + navigationJump],
+      jump: focusesList[currentFocus - navigationJump]
+    };
+    if (strategy === "grid") {
+      onGridKeyDownHandler(
+        evt,
+        focuses,
+        focusesList,
+        currentFocus,
+        navigationJump
+      );
+      return;
+    }
+    onVerticalArrangementHandler(evt, focuses, focusesList);
+  };
+  const onKeyUp = (evt) => {
+    if (browser.isBrowser("firefox")) evt.preventDefault();
+  };
+  if (disabled) return children;
+  return React.cloneElement(children, {
+    className: cx(
+      [classes.root, filterClass],
+      {
+        [classes.selected]: selected,
+        [classes.disabled]: disabledClass,
+        [classes.focusDisabled]: focusDisabled
+      },
+      children.props.className
+    ),
+    ref: config,
+    onFocus,
+    onBlur,
+    onMouseDown,
+    onKeyDown,
+    onKeyUp,
+    selected
+  });
+};
+exports.focusClasses = Focus_styles.staticClasses;
+exports.HvFocus = HvFocus;

package/dist/cjs/Footer/Footer.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Footer_styles = require("./Footer.styles.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+const HvFooter = React.forwardRef(function HvFooter2(props, ref) {
+  const {
+    name = "Hitachi Vantara",
+    copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
+    links,
+    classes: classesProp,
+    className,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvFooter", props);
+  const muiTheme = styles.useTheme();
+  const { classes, cx } = Footer_styles.useClasses(classesProp);
+  const isSmDown = useMediaQuery__default.default(muiTheme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "footer",
+    {
+      ref,
+      className: cx(classes.root, { [classes.small]: isSmDown }, className),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", className: classes.name, children: name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.rightContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.copyright, children: copyright }),
+          links && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator }),
+          links
+        ] })
+      ]
+    }
+  );
+});
+exports.footerClasses = Footer_styles.staticClasses;
+exports.HvFooter = HvFooter;

package/dist/cjs/FormElement/Adornment/Adornment.cjs

@@ -0,0 +1,54 @@
+"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 context = require("../context.cjs");
+const Adornment_styles = require("./Adornment.styles.cjs");
+const ButtonBase = require("../../ButtonBase/ButtonBase.cjs");
+const HvAdornment = React.forwardRef(function HvAdornment2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    icon,
+    showWhen,
+    onClick,
+    isVisible,
+    tabIndex,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvAdornment", props);
+  const { classes, cx } = Adornment_styles.useClasses(classesProp);
+  const { status, disabled } = React.useContext(context.HvFormElementContext);
+  const { input } = React.useContext(context.HvFormElementDescriptorsContext);
+  const displayIcon = isVisible ?? (showWhen == null || status === showWhen);
+  const Component = onClick ? ButtonBase.HvButtonBase : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      "aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
+      className: cx(
+        classes.root,
+        classes.adornment,
+        classes.icon,
+        onClick ? classes.adornmentButton : classes.adornmentIcon,
+        {
+          [classes.hideIcon]: !displayIcon,
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      ...onClick && {
+        disabled,
+        tabIndex: tabIndex ?? -1,
+        "aria-controls": input?.[0]?.id,
+        onClick,
+        onMouseDown: (event) => event.preventDefault()
+      },
+      ...others,
+      children: icon
+    }
+  );
+});
+exports.adornmentClasses = Adornment_styles.staticClasses;
+exports.HvAdornment = HvAdornment;