@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs

@@ -0,0 +1,74 @@
+"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 useHvTreeItem = require("./useHvTreeItem.cjs");
+const { useClasses } = uikitReactUtils.createClasses("HvTreeContent", {
+  root: {},
+  expanded: {},
+  selected: {},
+  focused: {},
+  disabled: {},
+  iconContainer: {},
+  label: {}
+});
+const DefaultContent = React.forwardRef(
+  function DefaultContent2(props, ref) {
+    const {
+      classes: classesProp,
+      className,
+      displayIcon,
+      expansionIcon,
+      icon: iconProp,
+      label,
+      nodeId,
+      onClick,
+      onMouseDown,
+      ...others
+    } = props;
+    const { classes } = useClasses(classesProp);
+    const { cx } = uikitReactUtils.useCss();
+    const {
+      disabled,
+      expanded,
+      selected,
+      focused,
+      handleExpansion,
+      handleSelection,
+      preventSelection
+    } = useHvTreeItem.useHvTreeItem(nodeId);
+    const icon = iconProp ?? expansionIcon ?? displayIcon;
+    return (
+      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ...others,
+          className: cx(className, classes.root, {
+            [classes.expanded]: expanded,
+            [classes.selected]: selected,
+            [classes.focused]: focused,
+            [classes.disabled]: disabled
+          }),
+          onClick: (event) => {
+            handleExpansion(event);
+            handleSelection(event);
+            onClick?.(event);
+          },
+          onMouseDown: (event) => {
+            preventSelection(event);
+            onMouseDown?.(event);
+          },
+          ref,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
+          ]
+        }
+      )
+    );
+  }
+);
+exports.DefaultContent = DefaultContent;
+exports.useClasses = useClasses;

package/dist/cjs/TreeView/TreeItem/TreeItem.cjs

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Collapse = require("@mui/material/Collapse");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useForkRef = require("../../hooks/useForkRef.cjs");
+const DescendantProvider = require("../internals/DescendantProvider.cjs");
+const TreeViewProvider = require("../internals/TreeViewProvider.cjs");
+const DefaultContent = require("./DefaultContent.cjs");
+const TreeItem_styles = require("./TreeItem.styles.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Collapse__default = /* @__PURE__ */ _interopDefault(Collapse);
+const HvTreeItem = React.forwardRef(
+  function HvTreeItem2(props, ref) {
+    const {
+      id: idProp,
+      nodeId,
+      children,
+      classes: classesProp,
+      className,
+      label,
+      disabled: disabledProp,
+      icon,
+      endIcon,
+      expandIcon,
+      collapseIcon,
+      ContentComponent: Component = DefaultContent.DefaultContent,
+      TransitionProps: transitionProps,
+      ContentProps: contentProps,
+      disableTreeFocus = false,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvTreeItem", props);
+    const { classes, cx } = TreeItem_styles.useClasses(classesProp);
+    const {
+      instance,
+      multiSelect,
+      disabledItemsFocusable,
+      treeId,
+      icons: contextIcons
+    } = TreeViewProvider.useTreeViewContext();
+    const id = idProp || treeId && nodeId && `${treeId}-${nodeId}` || void 0;
+    const [treeItemElement, setTreeItemElement] = React.useState(null);
+    const contentRef = React.useRef(null);
+    const handleRef = useForkRef.useForkRef(setTreeItemElement, ref);
+    const descendant = React.useMemo(
+      () => ({ element: treeItemElement, id: nodeId }),
+      [nodeId, treeItemElement]
+    );
+    const { index, parentId, level } = DescendantProvider.useDescendant(descendant);
+    const expandable = !!(Array.isArray(children) ? children.length : children);
+    const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+    const focused = instance ? instance.isNodeFocused(nodeId) : false;
+    const selected = instance ? instance.isNodeSelected(nodeId) : false;
+    const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
+    const expansionIcon = !expanded ? expandIcon || contextIcons.defaultExpandIcon : collapseIcon || contextIcons.defaultCollapseIcon;
+    const displayIcon = expandable ? contextIcons.defaultParentIcon : endIcon || contextIcons.defaultEndIcon;
+    React.useEffect(() => {
+      if (instance && index !== -1) {
+        instance.updateNode({
+          id: nodeId,
+          idAttribute: id,
+          index,
+          parentId,
+          expandable,
+          disabled: disabledProp
+        });
+        return () => instance.removeNode(nodeId);
+      }
+      return void 0;
+    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
+    React.useEffect(() => {
+      if (instance && label) {
+        return instance.mapFirstChar(
+          nodeId,
+          (contentRef.current?.textContent ?? "").slice(0, 1).toLowerCase()
+        );
+      }
+      return void 0;
+    }, [instance, nodeId, label]);
+    const handleFocus = (event) => {
+      if (event.target === event.currentTarget && !disableTreeFocus) {
+        const rootElement = typeof event.target.getRootNode === "function" ? event.target.getRootNode() : event.target.ownerDocument || document;
+        rootElement.getElementById(treeId).focus({ preventScroll: true });
+      }
+      const unfocusable = !disabledItemsFocusable && disabled;
+      const canFocus = instance && !focused && !disabled && !unfocusable && event.currentTarget === event.target;
+      if (canFocus) {
+        instance.focusNode(event, nodeId);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        id,
+        ref: handleRef,
+        role: "treeitem",
+        "aria-expanded": expandable ? expanded : void 0,
+        "aria-selected": multiSelect && selected || selected || void 0,
+        "aria-disabled": disabled || void 0,
+        className: cx(classes.root, className),
+        onFocus: handleFocus,
+        tabIndex: -1,
+        ...others,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Component,
+            {
+              ref: contentRef,
+              nodeId,
+              classes: {
+                root: classes.content,
+                expanded: classes.expanded,
+                selected: classes.selected,
+                focused: classes.focused,
+                disabled: classes.disabled,
+                label: classes.label,
+                iconContainer: classes.iconContainer
+              },
+              label,
+              icon,
+              expansionIcon: expandable && expansionIcon,
+              displayIcon,
+              ...contentProps
+            }
+          ),
+          children && /* @__PURE__ */ jsxRuntime.jsx(DescendantProvider.DescendantProvider, { id: nodeId, level: level + 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Collapse__default.default,
+            {
+              component: "ul",
+              role: "group",
+              unmountOnExit: true,
+              className: classes.group,
+              in: expanded,
+              ...transitionProps,
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+exports.treeItemClasses = TreeItem_styles.staticClasses;
+exports.HvTreeItem = HvTreeItem;

package/dist/cjs/TreeView/TreeItem/useHvTreeItem.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const DescendantProvider = require("../internals/DescendantProvider.cjs");
+const TreeViewProvider = require("../internals/TreeViewProvider.cjs");
+function useHvTreeItem(nodeId) {
+  const { instance, multiSelect } = TreeViewProvider.useTreeViewContext();
+  const { level = 0 } = React.useContext(DescendantProvider.DescendantContext);
+  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
+  const handleExpansion = (event) => {
+    if (!instance || disabled) return;
+    if (!focused) {
+      instance.focusNode(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
+      instance.toggleNodeExpansion(event, nodeId);
+    }
+  };
+  const handleSelection = (event) => {
+    if (!instance || disabled) return;
+    if (!focused) {
+      instance.focusNode(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (multiple) {
+      if (event.shiftKey) {
+        instance.selectRange(event, { end: nodeId });
+      } else {
+        instance.selectNode(event, nodeId, true);
+      }
+    } else {
+      instance.selectNode(event, nodeId);
+    }
+  };
+  const preventSelection = (event) => {
+    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
+      event.preventDefault();
+    }
+  };
+  return {
+    instance,
+    level,
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  };
+}
+exports.useHvTreeItem = useHvTreeItem;

package/dist/cjs/TreeView/internals/DescendantProvider.cjs

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const utils = require("@mui/material/utils");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+function binaryFindElement(array, element) {
+  let start = 0;
+  let end = array.length - 1;
+  while (start <= end) {
+    const middle = Math.floor((start + end) / 2);
+    if (array[middle].element === element) {
+      return middle;
+    }
+    if (
+      // eslint-disable-next-line no-bitwise
+      array[middle].element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING
+    ) {
+      end = middle - 1;
+    } else {
+      start = middle + 1;
+    }
+  }
+  return start;
+}
+const DescendantContext = React__namespace.createContext({
+  level: 0
+});
+function usePrevious(value) {
+  const ref = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+const noop = () => {
+};
+function useDescendant(descendant) {
+  const [, forceUpdate] = React__namespace.useState();
+  const {
+    registerDescendant = noop,
+    unregisterDescendant = noop,
+    descendants = [],
+    parentId = null,
+    level = 0
+  } = React__namespace.useContext(DescendantContext);
+  const index = descendants.findIndex(
+    (item) => item.element === descendant.element
+  );
+  const previousDescendants = usePrevious(descendants);
+  const someDescendantsHaveChanged = descendants.some(
+    (newDescendant, position) => {
+      return previousDescendants?.[position] && previousDescendants[position].element !== newDescendant.element;
+    }
+  );
+  utils.unstable_useEnhancedEffect(() => {
+    if (descendant.element) {
+      registerDescendant({
+        ...descendant,
+        index
+      });
+      return () => {
+        unregisterDescendant(descendant.element);
+      };
+    }
+    forceUpdate({});
+    return void 0;
+  }, [
+    registerDescendant,
+    unregisterDescendant,
+    index,
+    someDescendantsHaveChanged,
+    descendant
+  ]);
+  return { parentId, index, level };
+}
+const DescendantProvider = (props) => {
+  const { children, id, level } = props;
+  const [items, set] = React__namespace.useState([]);
+  const registerDescendant = React__namespace.useCallback(
+    ({ element, ...other }) => {
+      set((oldItems) => {
+        if (oldItems.length === 0) {
+          return [
+            {
+              ...other,
+              element,
+              index: 0
+            }
+          ];
+        }
+        const index = binaryFindElement(oldItems, element);
+        let newItems;
+        if (oldItems[index] && oldItems[index].element === element) {
+          newItems = oldItems;
+        } else {
+          const newItem = {
+            ...other,
+            element,
+            index
+          };
+          newItems = oldItems.slice();
+          newItems.splice(index, 0, newItem);
+        }
+        newItems.forEach((item, position) => {
+          item.index = position;
+        });
+        return newItems;
+      });
+    },
+    []
+  );
+  const unregisterDescendant = React__namespace.useCallback((element) => {
+    set((oldItems) => oldItems.filter((item) => element !== item.element));
+  }, []);
+  const value = React__namespace.useMemo(
+    () => ({
+      descendants: items,
+      registerDescendant,
+      unregisterDescendant,
+      parentId: id,
+      level
+    }),
+    [items, registerDescendant, unregisterDescendant, id, level]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DescendantContext.Provider, { value, children });
+};
+exports.DescendantContext = DescendantContext;
+exports.DescendantProvider = DescendantProvider;
+exports.useDescendant = useDescendant;

package/dist/cjs/TreeView/internals/TreeViewProvider.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const DescendantProvider = require("./DescendantProvider.cjs");
+const DEFAULT_TREE_VIEW_CONTEXT_VALUE = {
+  instance: null,
+  multiSelect: false,
+  disabledItemsFocusable: false,
+  treeId: void 0,
+  icons: {
+    defaultCollapseIcon: null,
+    defaultExpandIcon: null,
+    defaultParentIcon: null,
+    defaultEndIcon: null
+  }
+};
+const TreeViewContext = React.createContext(
+  DEFAULT_TREE_VIEW_CONTEXT_VALUE
+);
+const TreeViewProvider = (props) => {
+  const { value, children } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(TreeViewContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(DescendantProvider.DescendantProvider, { children }) });
+};
+const useTreeViewContext = () => React.useContext(TreeViewContext);
+exports.DEFAULT_TREE_VIEW_CONTEXT_VALUE = DEFAULT_TREE_VIEW_CONTEXT_VALUE;
+exports.TreeViewContext = TreeViewContext;
+exports.TreeViewProvider = TreeViewProvider;
+exports.useTreeViewContext = useTreeViewContext;

package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewExpansion.cjs

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const utils = require("@mui/material/utils");
+const utils$1 = require("../utils.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const useTreeViewExpansion = ({ instance, params, models }) => {
+  const isNodeExpanded = React__namespace.useCallback(
+    (nodeId) => {
+      return Array.isArray(models.expanded.value) ? models.expanded.value.indexOf(nodeId) !== -1 : false;
+    },
+    [models.expanded.value]
+  );
+  const isNodeExpandable = React__namespace.useCallback(
+    (nodeId) => !!instance.getNode(nodeId)?.expandable,
+    [instance]
+  );
+  const toggleNodeExpansion = utils.useEventCallback(
+    (event, nodeId) => {
+      if (nodeId == null) {
+        return;
+      }
+      let newExpanded;
+      if (models.expanded.value.indexOf(nodeId) !== -1) {
+        newExpanded = models.expanded.value.filter((id) => id !== nodeId);
+      } else {
+        newExpanded = [nodeId].concat(models.expanded.value);
+      }
+      if (params.onNodeToggle) {
+        params.onNodeToggle(event, newExpanded);
+      }
+      models.expanded.setValue(newExpanded);
+    }
+  );
+  const expandAllSiblings = (event, nodeId) => {
+    const node = instance.getNode(nodeId);
+    const siblings = instance.getChildrenIds(node.parentId);
+    const diff = siblings.filter(
+      (child) => instance.isNodeExpandable(child) && !instance.isNodeExpanded(child)
+    );
+    const newExpanded = models.expanded.value.concat(diff);
+    if (diff.length > 0) {
+      models.expanded.setValue(newExpanded);
+      if (params.onNodeToggle) {
+        params.onNodeToggle(event, newExpanded);
+      }
+    }
+  };
+  utils$1.populateInstance(instance, {
+    isNodeExpanded,
+    isNodeExpandable,
+    toggleNodeExpansion,
+    expandAllSiblings
+  });
+};
+useTreeViewExpansion.models = {
+  expanded: {
+    controlledProp: "expanded",
+    defaultProp: "defaultExpanded"
+  }
+};
+const DEFAULT_EXPANDED = [];
+useTreeViewExpansion.getDefaultizedParams = (params) => ({
+  ...params,
+  defaultExpanded: params.defaultExpanded ?? DEFAULT_EXPANDED
+});
+exports.useTreeViewExpansion = useTreeViewExpansion;

package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewFocus.cjs

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const utils = require("@mui/material/utils");
+const useInstanceEventHandler = require("../useInstanceEventHandler.cjs");
+const utils$1 = require("../utils.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const useTreeViewFocus = ({
+  instance,
+  params,
+  state,
+  setState,
+  models,
+  rootRef
+}) => {
+  const setFocusedNodeId = utils.useEventCallback(
+    (nodeId) => {
+      const cleanNodeId = typeof nodeId === "function" ? nodeId(state.focusedNodeId) : nodeId;
+      setState((prevState) => ({ ...prevState, focusedNodeId: cleanNodeId }));
+    }
+  );
+  const isNodeFocused = React__namespace.useCallback(
+    (nodeId) => state.focusedNodeId === nodeId,
+    [state.focusedNodeId]
+  );
+  const focusNode = utils.useEventCallback(
+    (event, nodeId) => {
+      if (nodeId) {
+        setFocusedNodeId(nodeId);
+        if (params.onNodeFocus) {
+          params.onNodeFocus(event, nodeId);
+        }
+      }
+    }
+  );
+  utils$1.populateInstance(instance, {
+    isNodeFocused,
+    focusNode
+  });
+  useInstanceEventHandler.useInstanceEventHandler(instance, "removeNode", ({ id }) => {
+    setFocusedNodeId((oldFocusedNodeId) => {
+      if (oldFocusedNodeId === id && rootRef.current === utils.ownerDocument(rootRef.current).activeElement) {
+        return instance.getChildrenIds(null)[0];
+      }
+      return oldFocusedNodeId;
+    });
+  });
+  const createHandleFocus = (otherHandlers) => (event) => {
+    otherHandlers.onFocus?.(event);
+    if (event.target === event.currentTarget) {
+      const isNodeVisible = (nodeId) => {
+        const node = instance.getNode(nodeId);
+        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+      };
+      let nodeToFocusId;
+      if (Array.isArray(models.selected.value)) {
+        nodeToFocusId = models.selected.value.find(isNodeVisible);
+      } else if (models.selected.value != null && isNodeVisible(models.selected.value)) {
+        nodeToFocusId = models.selected.value;
+      }
+      if (nodeToFocusId == null) {
+        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+      }
+      instance.focusNode(event, nodeToFocusId);
+    }
+  };
+  const createHandleBlur = (otherHandlers) => (event) => {
+    otherHandlers.onBlur?.(event);
+    setFocusedNodeId(null);
+  };
+  const focusedNode = instance.getNode(state.focusedNodeId);
+  const activeDescendant = focusedNode ? focusedNode.idAttribute : null;
+  return {
+    getRootProps: (otherHandlers) => ({
+      onFocus: createHandleFocus(otherHandlers),
+      onBlur: createHandleBlur(otherHandlers),
+      "aria-activedescendant": activeDescendant ?? void 0
+    })
+  };
+};
+useTreeViewFocus.getInitialState = () => ({ focusedNodeId: null });
+useTreeViewFocus.getDefaultizedParams = (params) => ({
+  ...params,
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false
+});
+exports.useTreeViewFocus = useTreeViewFocus;