@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/TreeView/TreeItem/TreeItem.styles.js

@@ -1,72 +1,58 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvTreeItem", {
-  /** Applied to the root element */
-  root: {
-    listStyle: "none",
-    margin: 0,
-    padding: 0,
-    outline: 0
-  },
-  group: {
-    margin: 0,
-    padding: 0,
-    marginLeft: theme.space.sm
-  },
-  content: {
-    padding: theme.spacing(0, 1),
-    minHeight: 32,
-    // TODO: review
-    width: "100%",
-    boxSizing: "border-box",
-    // prevent width + padding to overflow
-    display: "flex",
-    alignItems: "center",
-    cursor: "pointer",
-    WebkitTapHighlightColor: "transparent",
-    "&:hover:not($disabled)": {
-      backgroundColor: theme.colors.bgHover
-    }
-  },
-  expanded: {},
-  selected: {
-    backgroundColor: theme.colors.bgPageSecondary
-  },
-  focused: {
-    backgroundColor: theme.colors.bgHover,
-    "&:focus-visible": {
-      ...outlineStyles
-    }
-  },
-  disabled: {
-    cursor: "not-allowed",
-    color: theme.colors.textDisabled,
-    "& $label": {
-      color: theme.colors.textDisabled
-    }
-  },
-  label: {
-    paddingLeft: 4,
-    width: "100%",
-    boxSizing: "border-box",
-    // fixes overflow
-    minWidth: 0,
-    position: "relative",
-    ...theme.typography.body
-  },
-  iconContainer: {
-    display: "flex",
-    flexShrink: 0,
-    justifyContent: "center",
-    marginRight: 4,
-    width: theme.space.sm,
-    ":empty": {
-      width: theme.space.xs
-    }
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/TreeView/TreeItem/TreeItem.styles.ts
+var { staticClasses, useClasses } = createClasses("HvTreeItem", {
+	/** Applied to the root element */
+	root: {
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+		outline: 0
+	},
+	group: {
+		margin: 0,
+		padding: 0,
+		marginLeft: theme.space.sm
+	},
+	content: {
+		padding: theme.spacing(0, 1),
+		minHeight: 32,
+		width: "100%",
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		cursor: "pointer",
+		WebkitTapHighlightColor: "transparent",
+		"&:hover:not($disabled)": { backgroundColor: theme.colors.bgHover }
+	},
+	expanded: {},
+	selected: { backgroundColor: theme.colors.bgPageSecondary },
+	focused: {
+		backgroundColor: theme.colors.bgHover,
+		"&:focus-visible": { ...outlineStyles }
+	},
+	disabled: {
+		cursor: "not-allowed",
+		color: theme.colors.textDisabled,
+		"& $label": { color: theme.colors.textDisabled }
+	},
+	label: {
+		paddingLeft: 4,
+		width: "100%",
+		boxSizing: "border-box",
+		minWidth: 0,
+		position: "relative",
+		...theme.typography.body
+	},
+	iconContainer: {
+		display: "flex",
+		flexShrink: 0,
+		justifyContent: "center",
+		marginRight: 4,
+		width: theme.space.sm,
+		":empty": { width: theme.space.xs }
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/TreeView/TreeItem/useHvTreeItem.js

@@ -1,57 +1,42 @@
-import { useContext } from "react";
 import { DescendantContext } from "../internals/DescendantProvider.js";
 import { useTreeViewContext } from "../internals/TreeViewProvider.js";
+import { useContext } from "react";
+//#region src/TreeView/TreeItem/useHvTreeItem.ts
 function useHvTreeItem(nodeId) {
-  const { instance, multiSelect } = useTreeViewContext();
-  const { level = 0 } = useContext(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
-  };
+	const { instance, multiSelect } = useTreeViewContext();
+	const { level = 0 } = useContext(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);
+		if (multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey)) 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
+	};
 }
-export {
-  useHvTreeItem
-};
+//#endregion
+export { useHvTreeItem };

package/dist/TreeView/TreeView.js

@@ -1,66 +1,69 @@
-import { jsx } from "react/jsx-runtime";
-import useSlotProps from "@mui/utils/useSlotProps";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvIcon } from "../icons.js";
 import { fixedForwardRef } from "../types/generic.js";
-import { useTreeView } from "./internals/hooks/useTreeView.js";
+import { HvIcon } from "../icons.js";
+import { DEFAULT_TREE_VIEW_PLUGINS } from "./internals/hooks/plugins/defaultPlugins.js";
 import { TreeViewProvider } from "./internals/TreeViewProvider.js";
+import { useTreeView } from "./internals/hooks/useTreeView.js";
 import { useClasses } from "./TreeView.styles.js";
-import { staticClasses } from "./TreeView.styles.js";
-import { DEFAULT_TREE_VIEW_PLUGINS } from "./internals/hooks/plugins/defaultPlugins.js";
-const HvTreeView = fixedForwardRef(function HvTreeView2(props, ref) {
-  const {
-    id,
-    children,
-    classes: classesProp,
-    className,
-    disabledItemsFocusable,
-    multiSelect,
-    expanded,
-    defaultExpanded,
-    selected,
-    defaultSelected,
-    disableSelection,
-    defaultCollapseIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs" }),
-    defaultExpandIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs" }),
-    defaultEndIcon,
-    defaultParentIcon,
-    onNodeSelect,
-    onNodeToggle,
-    onNodeFocus,
-    ...others
-  } = useDefaultProps("HvTreeView", props);
-  const { classes, cx } = useClasses(classesProp);
-  const { getRootProps, contextValue } = useTreeView({
-    disabledItemsFocusable,
-    expanded,
-    defaultExpanded,
-    onNodeToggle,
-    onNodeFocus,
-    disableSelection,
-    defaultSelected,
-    selected,
-    multiSelect,
-    onNodeSelect,
-    id,
-    defaultCollapseIcon,
-    defaultEndIcon,
-    defaultExpandIcon,
-    defaultParentIcon,
-    plugins: DEFAULT_TREE_VIEW_PLUGINS,
-    rootRef: ref
-  });
-  const rootProps = useSlotProps({
-    elementType: "ul",
-    externalSlotProps: {},
-    externalForwardedProps: others,
-    className: classes.root,
-    getSlotProps: getRootProps,
-    ownerState: props
-  });
-  return /* @__PURE__ */ jsx(TreeViewProvider, { value: contextValue, children: /* @__PURE__ */ jsx("ul", { className: cx(classes.root, className), ...rootProps, ...others, children }) });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+import useSlotProps from "@mui/utils/useSlotProps";
+//#region src/TreeView/TreeView.tsx
+/**
+* A Tree View displays hierarchical data and helps users explore nested categories.
+* Tree structures are built using `HvTreeItem` or a custom variation of it.
+*
+* @example
+* ```tsx
+* <HvTreeView>
+*   <HvTreeItem nodeId="1" label="File1" />
+* </HvTreeView>
+* ```
+*/
+var HvTreeView = fixedForwardRef(function HvTreeView(props, ref) {
+	const { id, children, classes: classesProp, className, disabledItemsFocusable, multiSelect, expanded, defaultExpanded, selected, defaultSelected, disableSelection, defaultCollapseIcon = /* @__PURE__ */ jsx(HvIcon, {
+		name: "CaretDown",
+		size: "xs"
+	}), defaultExpandIcon = /* @__PURE__ */ jsx(HvIcon, {
+		name: "CaretRight",
+		size: "xs"
+	}), defaultEndIcon, defaultParentIcon, onNodeSelect, onNodeToggle, onNodeFocus, ...others } = useDefaultProps("HvTreeView", props);
+	const { classes, cx } = useClasses(classesProp);
+	const { getRootProps, contextValue } = useTreeView({
+		disabledItemsFocusable,
+		expanded,
+		defaultExpanded,
+		onNodeToggle,
+		onNodeFocus,
+		disableSelection,
+		defaultSelected,
+		selected,
+		multiSelect,
+		onNodeSelect,
+		id,
+		defaultCollapseIcon,
+		defaultEndIcon,
+		defaultExpandIcon,
+		defaultParentIcon,
+		plugins: DEFAULT_TREE_VIEW_PLUGINS,
+		rootRef: ref
+	});
+	const rootProps = useSlotProps({
+		elementType: "ul",
+		externalSlotProps: {},
+		externalForwardedProps: others,
+		className: classes.root,
+		getSlotProps: getRootProps,
+		ownerState: props
+	});
+	return /* @__PURE__ */ jsx(TreeViewProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: cx(classes.root, className),
+			...rootProps,
+			...others,
+			children
+		})
+	});
 });
-export {
-  HvTreeView,
-  staticClasses as treeView2Classes
-};
+//#endregion
+export { HvTreeView };

package/dist/TreeView/TreeView.styles.js

@@ -1,14 +1,12 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvTreeView", {
-  /** Applied to the root element */
-  root: {
-    padding: 0,
-    margin: 0,
-    listStyle: "none",
-    outline: "none"
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/TreeView/TreeView.styles.ts
+var { staticClasses, useClasses } = createClasses("HvTreeView", { 
+/** Applied to the root element */
+root: {
+	padding: 0,
+	margin: 0,
+	listStyle: "none",
+	outline: "none"
+} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/TreeView/internals/DescendantProvider.js

@@ -1,129 +1,129 @@
-import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { unstable_useEnhancedEffect } from "@mui/material/utils";
+//#region src/TreeView/internals/DescendantProvider.tsx
+/** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
+*  Modified slightly to suit our purposes.
+*/
 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;
+	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 (array[middle].element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) end = middle - 1;
+		else start = middle + 1;
+	}
+	return start;
 }
-const DescendantContext = React.createContext({
-  level: 0
-});
+var DescendantContext = React.createContext({ level: 0 });
 function usePrevious(value) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
 }
-const noop = () => {
-};
+var noop = () => {};
+/**
+* This hook registers our descendant by passing it into an array. We can then
+* search that array by to find its index when registering it in the component.
+* We use this for focus management, keyboard navigation, and typeahead
+* functionality for some components.
+*
+* The hook accepts the element node
+*
+* Our main goals with this are:
+*   1) maximum composability,
+*   2) minimal API friction
+*   3) SSR compatibility*
+*   4) concurrent safe
+*   5) index always up-to-date with the tree despite changes
+*   6) works with memoization of any component in the tree (hopefully)
+*
+* * As for SSR, the good news is that we don't actually need the index on the
+* server for most use-cases, as we are only using it to determine the order of
+* composed descendants for keyboard navigation.
+*/
 function useDescendant(descendant) {
-  const [, forceUpdate] = React.useState();
-  const {
-    registerDescendant = noop,
-    unregisterDescendant = noop,
-    descendants = [],
-    parentId = null,
-    level = 0
-  } = React.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;
-    }
-  );
-  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 [, forceUpdate] = React.useState();
+	const { registerDescendant = noop, unregisterDescendant = noop, descendants = [], parentId = null, level = 0 } = React.useContext(DescendantContext);
+	const index = descendants.findIndex((item) => item.element === descendant.element);
+	const previousDescendants = usePrevious(descendants);
+	unstable_useEnhancedEffect(() => {
+		if (descendant.element) {
+			registerDescendant({
+				...descendant,
+				index
+			});
+			return () => {
+				unregisterDescendant(descendant.element);
+			};
+		}
+		forceUpdate({});
+	}, [
+		registerDescendant,
+		unregisterDescendant,
+		index,
+		descendants.some((newDescendant, position) => {
+			return previousDescendants?.[position] && previousDescendants[position].element !== newDescendant.element;
+		}),
+		descendant
+	]);
+	return {
+		parentId,
+		index,
+		level
+	};
 }
-const DescendantProvider = (props) => {
-  const { children, id, level } = props;
-  const [items, set] = React.useState([]);
-  const registerDescendant = React.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.useCallback((element) => {
-    set((oldItems) => oldItems.filter((item) => element !== item.element));
-  }, []);
-  const value = React.useMemo(
-    () => ({
-      descendants: items,
-      registerDescendant,
-      unregisterDescendant,
-      parentId: id,
-      level
-    }),
-    [items, registerDescendant, unregisterDescendant, id, level]
-  );
-  return /* @__PURE__ */ jsx(DescendantContext.Provider, { value, children });
-};
-export {
-  DescendantContext,
-  DescendantProvider,
-  useDescendant
+var DescendantProvider = (props) => {
+	const { children, id, level } = props;
+	const [items, set] = React.useState([]);
+	const registerDescendant = React.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.useCallback((element) => {
+		set((oldItems) => oldItems.filter((item) => element !== item.element));
+	}, []);
+	const value = React.useMemo(() => ({
+		descendants: items,
+		registerDescendant,
+		unregisterDescendant,
+		parentId: id,
+		level
+	}), [
+		items,
+		registerDescendant,
+		unregisterDescendant,
+		id,
+		level
+	]);
+	return /* @__PURE__ */ jsx(DescendantContext.Provider, {
+		value,
+		children
+	});
 };
+//#endregion
+export { DescendantContext, DescendantProvider, useDescendant };