@hitachivantara/uikit-react-core 5.104.0 → 5.104.1

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -0,0 +1,420 @@
+"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 icons = require("../../icons.cjs");
+const DescendantProvider = require("../../TreeView/internals/DescendantProvider.cjs");
+const setId = require("../../utils/setId.cjs");
+const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
+const TreeViewContext = require("./TreeViewContext.cjs");
+const TreeViewItem_styles = require("./TreeViewItem.styles.cjs");
+const Tooltip = require("../../Tooltip/Tooltip.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const Avatar = require("../../Avatar/Avatar.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
+const preventSelection = (event, disabled) => {
+  if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
+    event.preventDefault();
+  }
+};
+const HvVerticalNavigationTreeViewItem = React.forwardRef(
+  function HvVerticalNavigationTreeViewItem2(props, ref) {
+    const {
+      id: idProp,
+      className,
+      classes: classesProp,
+      disabled: disabledProp = false,
+      selectable: selectableProp,
+      nodeId,
+      icon = null,
+      label,
+      href,
+      target,
+      payload,
+      onClick,
+      onMouseDown,
+      onFocus,
+      children,
+      disableTooltip,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvVerticalNavigationTreeViewItem", props);
+    const { classes, cx } = TreeViewItem_styles.useClasses(classesProp);
+    const treeViewControlContext = React.useContext(TreeViewContext.TreeViewControlContext);
+    const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } = React.useContext(TreeViewContext.TreeViewStateContext);
+    const {
+      treeId,
+      mode,
+      collapsible,
+      toggleExpansion,
+      multiSelect,
+      selectNode,
+      selectRange,
+      disabledItemsFocusable,
+      registerNode,
+      unregisterNode,
+      mapFirstChar,
+      unMapFirstChar,
+      focus
+    } = treeViewControlContext;
+    const treeviewMode = mode === "treeview";
+    let id = null;
+    if (idProp != null) {
+      id = idProp;
+    } else if (treeId && nodeId) {
+      id = `${treeId}-${nodeId}`;
+    }
+    const [treeitemElement, setTreeitemElement] = React.useState();
+    const contentRef = React.useRef(null);
+    const handleRef = useForkRef.useForkRef(setTreeitemElement, ref);
+    const descendant = React.useMemo(
+      () => ({
+        element: treeitemElement,
+        id: nodeId
+      }),
+      [nodeId, treeitemElement]
+    );
+    const { isOpen, useIcons, hasAnyChildWithData } = React.useContext(
+      VerticalNavigationContext.VerticalNavigationContext
+    );
+    const { index, parentId, level } = DescendantProvider.useDescendant(descendant);
+    const expandable = collapsible && Array.isArray(children);
+    const expanded = isExpanded ? isExpanded(nodeId) : false;
+    const focused = isFocused ? isFocused(nodeId) : false;
+    const selected = isSelected ? isSelected(nodeId) : false;
+    const disabled = isDisabled ? isDisabled(nodeId) : false;
+    const selectable = selectableProp != null ? selectableProp : !collapsible || !expandable || !isOpen;
+    React.useEffect(() => {
+      if (registerNode && unregisterNode && index !== -1) {
+        registerNode({
+          id: nodeId,
+          idAttribute: id,
+          index,
+          parentId,
+          selectable,
+          expandable,
+          disabled: disabledProp,
+          onFocus,
+          payload
+        });
+        return () => {
+          unregisterNode(nodeId);
+        };
+      }
+      return void 0;
+    }, [
+      registerNode,
+      unregisterNode,
+      parentId,
+      index,
+      nodeId,
+      expandable,
+      disabledProp,
+      id,
+      selectable,
+      onFocus,
+      payload
+    ]);
+    React.useEffect(() => {
+      if (mapFirstChar && unMapFirstChar && label && contentRef.current?.textContent) {
+        mapFirstChar(
+          nodeId,
+          contentRef.current?.textContent.slice(0, 1).toLowerCase()
+        );
+        return () => {
+          unMapFirstChar(nodeId);
+        };
+      }
+      return void 0;
+    }, [mapFirstChar, unMapFirstChar, nodeId, label]);
+    let ariaSelected;
+    if (multiSelect) {
+      ariaSelected = selected;
+    } else if (selected) {
+      ariaSelected = true;
+    }
+    const handleFocus = React.useCallback(
+      (event) => {
+        if (event.target === event.currentTarget) {
+          (event.target.ownerDocument || document).getElementById(treeId).focus({ preventScroll: true });
+        }
+        const unfocusable = !disabledItemsFocusable && disabled;
+        if (!focused && event.currentTarget === event.target && !unfocusable && focus) {
+          focus(event, nodeId);
+        }
+      },
+      [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId]
+    );
+    const handleExpansion = React.useCallback(
+      (event) => {
+        if (!disabled) {
+          if (treeviewMode && !focused && focus) {
+            focus(event, nodeId);
+          }
+          const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+          if (expandable && isOpen && !(multiple && isExpanded && isExpanded(nodeId))) {
+            if (toggleExpansion) toggleExpansion(event, nodeId);
+          }
+        }
+      },
+      [
+        disabled,
+        expandable,
+        focus,
+        focused,
+        isExpanded,
+        multiSelect,
+        nodeId,
+        toggleExpansion,
+        treeviewMode,
+        isOpen
+      ]
+    );
+    const handleSelection = React.useCallback(
+      (event) => {
+        if (selectable && !disabled) {
+          if (treeviewMode && !focused && focus) {
+            focus(event, nodeId);
+          }
+          const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+          if (multiple) {
+            if (event.shiftKey) {
+              if (selectRange) return selectRange(event, { end: nodeId });
+            } else if (selectNode) return selectNode(event, nodeId, true);
+          } else if (selectNode) return selectNode(event, nodeId);
+        } else {
+          return false;
+        }
+      },
+      [
+        disabled,
+        focus,
+        focused,
+        multiSelect,
+        nodeId,
+        selectNode,
+        selectRange,
+        selectable,
+        treeviewMode
+      ]
+    );
+    const handleMouseDown = React.useCallback(
+      (event) => {
+        preventSelection(event, disabled);
+        if (onMouseDown) {
+          onMouseDown(event);
+        }
+      },
+      [disabled, onMouseDown]
+    );
+    const handleClick = React.useCallback(
+      (event) => {
+        if (!disabled) {
+          if (expandable && isOpen) {
+            handleExpansion(event);
+          }
+          if (selectable) {
+            handleSelection(event);
+          }
+        }
+        if (onClick) {
+          onClick(event);
+        }
+      },
+      [
+        disabled,
+        expandable,
+        handleExpansion,
+        handleSelection,
+        onClick,
+        selectable,
+        isOpen
+      ]
+    );
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        let isEventHandled = false;
+        const { key } = event;
+        if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
+          return;
+        }
+        if (contentRef.current === event.currentTarget) {
+          if (key === "Enter" || key === " ") {
+            if (expandable && isOpen) {
+              isEventHandled = handleExpansion(event);
+            }
+            if (selectable) {
+              isEventHandled = handleSelection(event);
+            }
+          }
+          if (isEventHandled) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      },
+      [expandable, handleExpansion, handleSelection, selectable, isOpen]
+    );
+    const renderedContent = React.useMemo(() => {
+      const buttonLinkProps = {
+        href,
+        target
+      };
+      const hasChildren = !!children;
+      const showTooltip = !hasChildren && !isOpen && !disableTooltip;
+      const isLink = href !== void 0 && !disabled;
+      return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { placement: "right", title: showTooltip && label, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Typography.HvTypography,
+        {
+          id: setId.setId(id, "button"),
+          component: isLink ? "a" : "div",
+          ...isLink ? buttonLinkProps : null,
+          ref: contentRef,
+          classes: {
+            root: cx(classes.content, {
+              [classes.link]: isLink,
+              [classes.minimized]: !isOpen
+            })
+          },
+          variant: "body",
+          disabled,
+          onClick: handleClick,
+          onMouseDown: handleMouseDown,
+          style: {
+            paddingLeft: (useIcons || !isOpen ? 0 : 10) + level * (collapsible ? 16 : 10)
+          },
+          role: isLink ? void 0 : "button",
+          ...treeviewMode ? {
+            tabIndex: -1,
+            onFocus: handleFocus
+          } : {
+            tabIndex: selectable || expandable ? 0 : -1,
+            onKeyDown: handleKeyDown,
+            "aria-current": selectable && selected || !isOpen && isChildSelected?.(nodeId) ? href ? "page" : true : void 0,
+            "aria-expanded": expandable ? expanded : void 0,
+            "aria-controls": isOpen && expandable ? setId.setId(id, "group") : void 0,
+            "aria-label": payload?.label
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: classes.icon,
+                style: uikitReactUtils.mergeStyles(void 0, {
+                  "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
+                }),
+                children: [
+                  !icon && useIcons ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Avatar.HvAvatar,
+                    {
+                      variant: "square",
+                      size: "xs",
+                      backgroundColor: "textSubtle",
+                      children: payload?.label?.slice(0, 1)
+                    }
+                  ) : useIcons && icon,
+                  hasChildren && !isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", size: "xs", compact: true }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                ]
+              }
+            ),
+            isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cx(classes.label, {
+                  [classes.labelIcon]: useIcons,
+                  [classes.labelExpandable]: !!expandable
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: label })
+              }
+            ),
+            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: expanded })
+          ]
+        }
+      ) });
+    }, [
+      href,
+      target,
+      children,
+      isOpen,
+      disableTooltip,
+      disabled,
+      label,
+      id,
+      cx,
+      classes.content,
+      classes.link,
+      classes.minimized,
+      classes.icon,
+      classes.label,
+      classes.labelIcon,
+      classes.labelExpandable,
+      handleClick,
+      handleMouseDown,
+      useIcons,
+      level,
+      collapsible,
+      treeviewMode,
+      handleFocus,
+      selectable,
+      expandable,
+      handleKeyDown,
+      selected,
+      isChildSelected,
+      nodeId,
+      expanded,
+      payload?.label,
+      icon,
+      hasAnyChildWithData
+    ]);
+    const renderedChildren = React.useMemo(
+      () => children && /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          id: setId.setId(id, "group"),
+          className: classes.group,
+          role: treeviewMode ? "group" : void 0,
+          children
+        }
+      ),
+      [children, classes?.group, id, treeviewMode]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ref: handleRef,
+        id: id ?? void 0,
+        className: cx(
+          classes.node,
+          {
+            [classes.expandable]: expandable,
+            [classes.collapsed]: expandable && !expanded,
+            [classes.expanded]: expandable && expanded,
+            [classes.selectable]: selectable && !disabled,
+            [classes.unselectable]: !disabled && !selectable,
+            [classes.selected]: !disabled && selectable && selected || !isOpen && useIcons && isChildSelected && isChildSelected(nodeId),
+            [classes.unselected]: !disabled && selectable && !selected,
+            [classes.focused]: focused,
+            [classes.hide]: !isOpen && !useIcons,
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        "data-hasicon": icon != null ? true : void 0,
+        ...mode === "treeview" && {
+          role: "treeitem",
+          "aria-selected": ariaSelected,
+          "aria-expanded": expandable ? expanded : void 0,
+          "aria-disabled": disabled ? true : void 0
+        },
+        ...others,
+        children: [
+          renderedContent,
+          isOpen && /* @__PURE__ */ jsxRuntime.jsx(DescendantProvider.DescendantProvider, { id: nodeId, level: level + 1, children: renderedChildren })
+        ]
+      }
+    );
+  }
+);
+exports.treeViewItemClasses = TreeViewItem_styles.staticClasses;
+exports.HvVerticalNavigationTreeViewItem = HvVerticalNavigationTreeViewItem;

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -0,0 +1,99 @@
+"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 utils = require("./NavigationSlider/utils.cjs");
+const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
+const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
+const HvVerticalNavigation = React.forwardRef(function HvVerticalNavigation2(props, ref) {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    children,
+    open = true,
+    slider = false,
+    useIcons = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvVerticalNavigation", props);
+  const { classes, cx } = VerticalNavigation_styles.useClasses(classesProp);
+  const [parentData, setParentData] = React.useState([]);
+  const [parentSelected, setParentSelected] = React.useState();
+  const withParentData = React.useMemo(
+    () => utils.fillDataWithParentId(parentData),
+    [parentData]
+  );
+  const initialParentItem = React.useMemo(
+    () => utils.getParentItemById(withParentData, parentSelected),
+    [withParentData, parentSelected]
+  );
+  const [parentItem, setParentItem] = React.useState(initialParentItem);
+  const hasAnyChildWithData = React.useMemo(
+    () => parentData.some((item) => item.data && item.data.length > 0),
+    [parentData]
+  );
+  const headerTitle = React.useMemo(() => parentItem?.label, [parentItem]);
+  const navigateToParentHandler = React.useCallback(() => {
+    setParentItem(utils.getParentItemById(withParentData, parentItem.id));
+  }, [parentItem, withParentData]);
+  const navigateToChildHandler = React.useCallback(
+    (event, item) => {
+      setParentItem(utils.getNavigationItemById(withParentData, item.id));
+      event.stopPropagation();
+    },
+    [withParentData]
+  );
+  const value = React.useMemo(
+    () => ({
+      isOpen: open,
+      useIcons,
+      slider,
+      headerTitle,
+      parentItem,
+      setParentItem,
+      withParentData,
+      navigateToChildHandler,
+      navigateToParentHandler,
+      parentData,
+      setParentData,
+      parentSelected,
+      setParentSelected,
+      hasAnyChildWithData
+    }),
+    [
+      open,
+      useIcons,
+      slider,
+      headerTitle,
+      parentItem,
+      setParentItem,
+      withParentData,
+      navigateToChildHandler,
+      navigateToParentHandler,
+      hasAnyChildWithData,
+      parentData,
+      parentSelected
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id,
+      ref,
+      className: cx(
+        classes.root,
+        {
+          [classes.collapsed]: !open,
+          [classes.slider]: slider,
+          [classes.childData]: hasAnyChildWithData
+        },
+        className
+      ),
+      ...others,
+      children
+    }
+  ) });
+});
+exports.verticalNavigationClasses = VerticalNavigation_styles.staticClasses;
+exports.HvVerticalNavigation = HvVerticalNavigation;

package/dist/cjs/VerticalNavigation/VerticalNavigationContext.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const VerticalNavigationContext = React.createContext(
+  {
+    isOpen: true,
+    useIcons: false,
+    slider: false
+  }
+);
+exports.VerticalNavigationContext = VerticalNavigationContext;

package/dist/cjs/hooks/useClickOutside.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useClickOutside = (ref, handler) => {
+  React.useEffect(() => {
+    const listener = (event) => {
+      const el = ref?.current;
+      const isKeyUp = event.type === "keyup";
+      const isEscape = event.key === "Escape";
+      if (!el || el.contains(event?.target || null)) {
+        return {};
+      }
+      return isKeyUp ? isEscape ? handler(event) : null : handler(event);
+    };
+    document.addEventListener("click", listener);
+    document.addEventListener("touchstart", listener);
+    document.addEventListener("keyup", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+      document.removeEventListener("touchstart", listener);
+      document.removeEventListener("keyup", listener);
+    };
+  }, [ref, handler]);
+};
+exports.useClickOutside = useClickOutside;

package/dist/cjs/hooks/useComputation.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useComputation = (valueFn, valueFallback) => {
+  const computed = React.useRef(null);
+  const [value, setValue] = React.useState(valueFallback);
+  const computeValue = () => {
+    if (!computed.current) {
+      setValue(valueFn?.());
+      computed.current = true;
+    }
+  };
+  return [value, computeValue];
+};
+exports.useComputation = useComputation;

package/dist/cjs/hooks/useControlled.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useControlled = (controlledProp, initialState) => {
+  const { current: isControlled } = React.useRef(controlledProp !== void 0);
+  const [valueState, setValue] = React.useState(initialState);
+  const value = isControlled ? controlledProp : valueState;
+  const setValueIfUncontrolled = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setValue(newValue);
+      }
+    },
+    [isControlled]
+  );
+  return [value, setValueIfUncontrolled];
+};
+exports.useControlled = useControlled;

package/dist/cjs/hooks/useEnhancedEffect.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+exports.useEnhancedEffect = useEnhancedEffect;

package/dist/cjs/hooks/useFocus.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const document = require("../utils/document.cjs");
+const getActiveEl = () => document.getDocument()?.activeElement || null;
+function makeFocusUtils(containerRef) {
+  function focus(el, checkFocus = true) {
+    if (!checkFocus || containerRef.current?.contains(getActiveEl())) {
+      el?.focus();
+    }
+  }
+  return {
+    focusPrevious() {
+      focus(getActiveEl()?.previousElementSibling);
+    },
+    focusNext() {
+      focus(getActiveEl()?.nextElementSibling);
+    },
+    focusFirst() {
+      focus(getActiveEl()?.parentElement?.firstElementChild);
+    },
+    focusLast() {
+      focus(getActiveEl()?.parentElement?.lastElementChild);
+    },
+    focusChild(index) {
+      focus(containerRef.current?.children[index], false);
+    },
+    focusSibling(index) {
+      focus(getActiveEl()?.parentElement?.children[index]);
+    }
+  };
+}
+function useFocus({
+  containerRef
+}) {
+  return React.useMemo(() => makeFocusUtils(containerRef), [containerRef]);
+}
+exports.useFocus = useFocus;

package/dist/cjs/hooks/useForkRef.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const setRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+};
+const useForkRef = (refA, refB) => {
+  return React.useMemo(() => {
+    if (refA == null && refB == null) {
+      return null;
+    }
+    return (refValue) => {
+      setRef(refA, refValue);
+      setRef(refB, refValue);
+    };
+  }, [refA, refB]);
+};
+exports.useForkRef = useForkRef;

package/dist/cjs/hooks/useImageLoaded.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useImageLoaded = (src, srcSet) => {
+  const [imageLoaded, setImageLoaded] = React.useState(false);
+  React.useEffect(() => {
+    if (!src && !srcSet) return;
+    setImageLoaded(false);
+    let active = true;
+    const image = new Image();
+    image.src = src || "";
+    image.srcset = srcSet || "";
+    image.onload = () => {
+      if (!active) return;
+      setImageLoaded("loaded");
+    };
+    image.onerror = () => {
+      if (!active) return;
+      setImageLoaded("error");
+    };
+    return () => {
+      active = false;
+    };
+  }, [src, srcSet]);
+  return imageLoaded;
+};
+exports.useImageLoaded = useImageLoaded;