@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/VerticalNavigation/TreeView/TreeViewItem.styles.js

@@ -1,146 +1,94 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
 import { staticClasses as staticClasses$1 } from "../../Avatar/Avatar.styles.js";
-import "../../Avatar/Avatar.js";
-const selected = {
-  background: theme.colors.bgPageSecondary,
-  borderLeft: `4px solid ${theme.colors.text}`
-};
-const hover = {
-  background: theme.colors.bgHover
-};
-const { staticClasses, useClasses } = createClasses(
-  "HvVerticalNavigationTreeViewItem",
-  {
-    node: {
-      listStyle: "none",
-      minHeight: "32px",
-      "&:not(:last-child)": {
-        marginBottom: "8px"
-      },
-      "&$collapsed": {
-        "&>$group": {
-          display: "none"
-        }
-      },
-      "&$expanded": {
-        "&>$group": {
-          display: "block"
-        }
-      },
-      "&$link": {
-        textDecoration: "none"
-      },
-      "&$hide": {
-        display: "none"
-      }
-    },
-    content: {
-      width: "100%",
-      display: "flex",
-      justifyContent: "flex-start",
-      alignItems: "center",
-      height: "32px",
-      borderLeft: `4px solid transparent`,
-      paddingRight: theme.space.xs,
-      "&$minimized": {
-        justifyContent: "center",
-        paddingRight: 0
-      },
-      "$expandable>&": {
-        fontWeight: 600
-      },
-      "$selected>&": { ...selected },
-      // hover
-      ":not($disabled>&):not($selected>&):hover": { ...hover },
-      ":not($disabled)$selected>&:hover": {},
-      // focus
-      ":not($disabled>&):not($selected>&):focus-visible": { ...hover },
-      ":not($disabled>&):not($selected>&).focus-visible": { ...hover },
-      "*:focus-visible $focused>&": {
-        ...outlineStyles
-      },
-      ".focus-visible $focused>&": {
-        ...outlineStyles
-      },
-      "$focused>&": {
-        ...hover
-      },
-      "&[disabled], &:active": {
-        outline: "none"
-      },
-      "&:focus": {
-        outline: "none"
-      },
-      "&:focus-visible": {
-        ...outlineStyles
-      },
-      "&.focus-visible": {
-        ...outlineStyles
-      },
-      // cursor
-      cursor: "pointer",
-      "& *": {
-        cursor: "pointer"
-      },
-      "$disabled>&": {
-        cursor: "not-allowed",
-        "& *": {
-          cursor: "not-allowed"
-        }
-      }
-    },
-    link: {},
-    group: {
-      margin: "8px 0 0 0",
-      padding: 0
-    },
-    disabled: {},
-    expandable: {
-      fontWeight: 600
-    },
-    collapsed: {},
-    expanded: {},
-    selectable: {},
-    unselectable: {},
-    selected: {},
-    unselected: {},
-    focused: {},
-    minimized: {},
-    hide: {},
-    label: {
-      display: "flex",
-      flexGrow: 1,
-      maxWidth: "100%"
-    },
-    labelIcon: {
-      maxWidth: "calc(100% - 32px)"
-    },
-    labelExpandable: {
-      maxWidth: "calc(100% - 32px)",
-      "&$labelIcon": {
-        maxWidth: "calc(100% - 64px)"
-      }
-    },
-    icon: {
-      display: "flex",
-      alignItems: "center",
-      "> div:first-of-type": {
-        marginLeft: "var(--icon-margin-left)"
-      },
-      "> div:nth-of-type(2)": {
-        width: "12px",
-        marginLeft: "auto"
-      },
-      [`&& .${staticClasses$1.root}`]: {
-        fontSize: "15px",
-        borderColor: "transparent"
-      }
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx
+var selected = {
+	background: theme.colors.bgPageSecondary,
+	borderLeft: `4px solid ${theme.colors.text}`
 };
+var hover = { background: theme.colors.bgHover };
+var { staticClasses, useClasses } = createClasses("HvVerticalNavigationTreeViewItem", {
+	node: {
+		listStyle: "none",
+		minHeight: "32px",
+		"&:not(:last-child)": { marginBottom: "8px" },
+		"&$collapsed": { "&>$group": { display: "none" } },
+		"&$expanded": { "&>$group": { display: "block" } },
+		"&$link": { textDecoration: "none" },
+		"&$hide": { display: "none" }
+	},
+	content: {
+		width: "100%",
+		display: "flex",
+		justifyContent: "flex-start",
+		alignItems: "center",
+		height: "32px",
+		borderLeft: `4px solid transparent`,
+		paddingRight: theme.space.xs,
+		"&$minimized": {
+			justifyContent: "center",
+			paddingRight: 0
+		},
+		"$expandable>&": { fontWeight: 600 },
+		"$selected>&": { ...selected },
+		":not($disabled>&):not($selected>&):hover": { ...hover },
+		":not($disabled)$selected>&:hover": {},
+		":not($disabled>&):not($selected>&):focus-visible": { ...hover },
+		":not($disabled>&):not($selected>&).focus-visible": { ...hover },
+		"*:focus-visible $focused>&": { ...outlineStyles },
+		".focus-visible $focused>&": { ...outlineStyles },
+		"$focused>&": { ...hover },
+		"&[disabled], &:active": { outline: "none" },
+		"&:focus": { outline: "none" },
+		"&:focus-visible": { ...outlineStyles },
+		"&.focus-visible": { ...outlineStyles },
+		cursor: "pointer",
+		"& *": { cursor: "pointer" },
+		"$disabled>&": {
+			cursor: "not-allowed",
+			"& *": { cursor: "not-allowed" }
+		}
+	},
+	link: {},
+	group: {
+		margin: "8px 0 0 0",
+		padding: 0
+	},
+	disabled: {},
+	expandable: { fontWeight: 600 },
+	collapsed: {},
+	expanded: {},
+	selectable: {},
+	unselectable: {},
+	selected: {},
+	unselected: {},
+	focused: {},
+	minimized: {},
+	hide: {},
+	label: {
+		display: "flex",
+		flexGrow: 1,
+		maxWidth: "100%"
+	},
+	labelIcon: { maxWidth: "calc(100% - 32px)" },
+	labelExpandable: {
+		maxWidth: "calc(100% - 32px)",
+		"&$labelIcon": { maxWidth: "calc(100% - 64px)" }
+	},
+	icon: {
+		display: "flex",
+		alignItems: "center",
+		"> div:first-of-type": { marginLeft: "var(--icon-margin-left)" },
+		"> div:nth-of-type(2)": {
+			width: "12px",
+			marginLeft: "auto"
+		},
+		[`&& .${staticClasses$1.root}`]: {
+			fontSize: "15px",
+			borderColor: "transparent"
+		}
+	}
+});
+//#endregion
+export { staticClasses, useClasses };

package/dist/VerticalNavigation/VerticalNavigation.js

@@ -1,100 +1,73 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useMemo, useCallback } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils.js";
+import { fillDataWithParentId, getNavigationItemById, getParentItemById } from "./NavigationSlider/utils.js";
 import { useClasses } from "./VerticalNavigation.styles.js";
-import { staticClasses } from "./VerticalNavigation.styles.js";
 import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
-const HvVerticalNavigation = forwardRef(function HvVerticalNavigation2(props, ref) {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    children,
-    open = true,
-    slider = false,
-    useIcons = false,
-    ...others
-  } = useDefaultProps("HvVerticalNavigation", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [parentData, setParentData] = useState([]);
-  const [parentSelected, setParentSelected] = useState();
-  const withParentData = useMemo(
-    () => fillDataWithParentId(parentData),
-    [parentData]
-  );
-  const initialParentItem = useMemo(
-    () => getParentItemById(withParentData, parentSelected),
-    [withParentData, parentSelected]
-  );
-  const [parentItem, setParentItem] = useState(initialParentItem);
-  const hasAnyChildWithData = useMemo(
-    () => parentData.some((item) => item.data && item.data.length > 0),
-    [parentData]
-  );
-  const headerTitle = useMemo(() => parentItem?.label, [parentItem]);
-  const navigateToParentHandler = useCallback(() => {
-    setParentItem(getParentItemById(withParentData, parentItem.id));
-  }, [parentItem, withParentData]);
-  const navigateToChildHandler = useCallback(
-    (event, item) => {
-      setParentItem(getNavigationItemById(withParentData, item.id));
-      event.stopPropagation();
-    },
-    [withParentData]
-  );
-  const value = 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__ */ jsx(VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      id,
-      ref,
-      className: cx(
-        classes.root,
-        {
-          [classes.collapsed]: !open,
-          [classes.slider]: slider,
-          [classes.childData]: hasAnyChildWithData
-        },
-        className
-      ),
-      ...others,
-      children
-    }
-  ) });
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/VerticalNavigation/VerticalNavigation.tsx
+/**
+* Use a vertical layout for global navigation on wide screens. treeview mode provides structured hierarchy but overrides standard keyboard navigation.
+*/
+var HvVerticalNavigation = forwardRef(function HvVerticalNavigation(props, ref) {
+	const { id, className, classes: classesProp, children, open = true, slider = false, useIcons = false, ...others } = useDefaultProps("HvVerticalNavigation", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [parentData, setParentData] = useState([]);
+	const [parentSelected, setParentSelected] = useState();
+	const withParentData = useMemo(() => fillDataWithParentId(parentData), [parentData]);
+	const [parentItem, setParentItem] = useState(useMemo(() => getParentItemById(withParentData, parentSelected), [withParentData, parentSelected]));
+	/** Checks if there are any sub items in the NavigationItem data structure. */
+	const hasAnyChildWithData = useMemo(() => parentData.some((item) => item.data && item.data.length > 0), [parentData]);
+	const headerTitle = useMemo(() => parentItem?.label, [parentItem]);
+	const navigateToParentHandler = useCallback(() => {
+		setParentItem(getParentItemById(withParentData, parentItem.id));
+	}, [parentItem, withParentData]);
+	const navigateToChildHandler = useCallback((event, item) => {
+		setParentItem(getNavigationItemById(withParentData, item.id));
+		event.stopPropagation();
+	}, [withParentData]);
+	const value = 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__ */ jsx(VerticalNavigationContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			id,
+			ref,
+			className: cx(classes.root, {
+				[classes.collapsed]: !open,
+				[classes.slider]: slider,
+				[classes.childData]: hasAnyChildWithData
+			}, className),
+			...others,
+			children
+		})
+	});
 });
-export {
-  HvVerticalNavigation,
-  staticClasses as verticalNavigationClasses
-};
+//#endregion
+export { HvVerticalNavigation };

package/dist/VerticalNavigation/VerticalNavigation.styles.js

@@ -1,46 +1,32 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses(
-  "HvVerticalNavigation",
-  {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "flex-start",
-      width: "220px",
-      backgroundColor: theme.colors.bgContainer,
-      boxShadow: theme.colors.shadow,
-      clipPath: "inset(0px -12px 0px 0px)",
-      "& > :only-child": {
-        padding: theme.space.sm
-      },
-      "& > :not(nav:first-of-type)": {
-        borderTop: `3px solid ${theme.colors.borderSubtle}`,
-        padding: theme.spacing("xs", "sm", "sm", "sm")
-      },
-      "& > :first-of-type:not(:last-child)": {
-        borderTop: "none",
-        padding: theme.spacing("sm", "sm", "xs", "sm")
-      }
-    },
-    collapsed: {
-      width: "fit-content",
-      "& > :first-of-type:not(:last-child)": {
-        padding: theme.spacing("sm", "xs", "xs", "xs")
-      },
-      "& > :not(nav:first-of-type)": {
-        padding: theme.spacing("xs", "xs", "sm", "xs")
-      }
-    },
-    slider: {
-      "& > div:first-of-type": {
-        borderBottom: `3px solid ${theme.colors.borderSubtle}`
-      }
-    },
-    childData: {}
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/VerticalNavigation/VerticalNavigation.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvVerticalNavigation", {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start",
+		width: "220px",
+		backgroundColor: theme.colors.bgContainer,
+		boxShadow: theme.colors.shadow,
+		clipPath: "inset(0px -12px 0px 0px)",
+		"& > :only-child": { padding: theme.space.sm },
+		"& > :not(nav:first-of-type)": {
+			borderTop: `3px solid ${theme.colors.borderSubtle}`,
+			padding: theme.spacing("xs", "sm", "sm", "sm")
+		},
+		"& > :first-of-type:not(:last-child)": {
+			borderTop: "none",
+			padding: theme.spacing("sm", "sm", "xs", "sm")
+		}
+	},
+	collapsed: {
+		width: "fit-content",
+		"& > :first-of-type:not(:last-child)": { padding: theme.spacing("sm", "xs", "xs", "xs") },
+		"& > :not(nav:first-of-type)": { padding: theme.spacing("xs", "xs", "sm", "xs") }
+	},
+	slider: { "& > div:first-of-type": { borderBottom: `3px solid ${theme.colors.borderSubtle}` } },
+	childData: {}
+});
+//#endregion
+export { staticClasses, useClasses };

package/dist/VerticalNavigation/VerticalNavigationContext.js

@@ -1,11 +1,9 @@
 import { createContext } from "react";
-const VerticalNavigationContext = createContext(
-  {
-    isOpen: true,
-    useIcons: false,
-    slider: false
-  }
-);
-export {
-  VerticalNavigationContext
-};
+//#region src/VerticalNavigation/VerticalNavigationContext.tsx
+var VerticalNavigationContext = createContext({
+	isOpen: true,
+	useIcons: false,
+	slider: false
+});
+//#endregion
+export { VerticalNavigationContext };

package/dist/hooks/useClickOutside.js

@@ -1,25 +1,23 @@
 import { useEffect } from "react";
-const useClickOutside = (ref, handler) => {
-  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]);
-};
-export {
-  useClickOutside
+//#region src/hooks/useClickOutside.ts
+var useClickOutside = (ref, handler) => {
+	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]);
 };
+//#endregion
+export { useClickOutside };

package/dist/hooks/useComputation.js

@@ -1,15 +1,15 @@
 import { useRef, useState } from "react";
-const useComputation = (valueFn, valueFallback) => {
-  const computed = useRef(null);
-  const [value, setValue] = useState(valueFallback);
-  const computeValue = () => {
-    if (!computed.current) {
-      setValue(valueFn?.());
-      computed.current = true;
-    }
-  };
-  return [value, computeValue];
-};
-export {
-  useComputation
+//#region src/hooks/useComputation.ts
+var useComputation = (valueFn, valueFallback) => {
+	const computed = useRef(null);
+	const [value, setValue] = useState(valueFallback);
+	const computeValue = () => {
+		if (!computed.current) {
+			setValue(valueFn?.());
+			computed.current = true;
+		}
+	};
+	return [value, computeValue];
 };
+//#endregion
+export { useComputation };

package/dist/hooks/useControlled.js

@@ -1,18 +1,11 @@
-import { useRef, useState, useCallback } from "react";
-const useControlled = (controlledProp, initialState) => {
-  const { current: isControlled } = useRef(controlledProp !== void 0);
-  const [valueState, setValue] = useState(initialState);
-  const value = isControlled ? controlledProp : valueState;
-  const setValueIfUncontrolled = useCallback(
-    (newValue) => {
-      if (!isControlled) {
-        setValue(newValue);
-      }
-    },
-    [isControlled]
-  );
-  return [value, setValueIfUncontrolled];
-};
-export {
-  useControlled
+import { useCallback, useRef, useState } from "react";
+//#region src/hooks/useControlled.ts
+var useControlled = (controlledProp, initialState) => {
+	const { current: isControlled } = useRef(controlledProp !== void 0);
+	const [valueState, setValue] = useState(initialState);
+	return [isControlled ? controlledProp : valueState, useCallback((newValue) => {
+		if (!isControlled) setValue(newValue);
+	}, [isControlled])];
 };
+//#endregion
+export { useControlled };

package/dist/hooks/useEnhancedEffect.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect, useEffect } from "react";
-const useEnhancedEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-export {
-  useEnhancedEffect
-};
+import { useEffect, useLayoutEffect } from "react";
+//#region src/hooks/useEnhancedEffect.ts
+var useEnhancedEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+//#endregion
+export { useEnhancedEffect };