@hitachivantara/uikit-react-core 5.102.1 → 5.104.0

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

@@ -1,420 +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 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

@@ -1,99 +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 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

@@ -1,11 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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;