@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/hooks/useExpandable.js

@@ -1,33 +1,26 @@
-import { useId, useCallback } from "react";
 import { useControlled } from "./useControlled.js";
-function useExpandable({
-  disabled,
-  expanded,
-  defaultExpanded
-}) {
-  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
-  const buttonId = useId();
-  const regionId = useId();
-  const toggleOpen = useCallback(
-    (newOpen) => setIsOpen((o) => newOpen ?? !o),
-    [setIsOpen]
-  );
-  return {
-    isOpen,
-    toggleOpen,
-    buttonProps: {
-      id: buttonId,
-      "aria-disabled": disabled,
-      "aria-expanded": isOpen,
-      "aria-controls": isOpen ? regionId : void 0
-    },
-    regionProps: {
-      id: regionId,
-      role: "region",
-      "aria-labelledby": buttonId
-    }
-  };
+import { useCallback, useId } from "react";
+//#region src/hooks/useExpandable.ts
+/** expandable hook that handles a11y & open state for accordions, etc. */
+function useExpandable({ disabled, expanded, defaultExpanded }) {
+	const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
+	const buttonId = useId();
+	const regionId = useId();
+	return {
+		isOpen,
+		toggleOpen: useCallback((newOpen) => setIsOpen((o) => newOpen ?? !o), [setIsOpen]),
+		buttonProps: {
+			id: buttonId,
+			"aria-disabled": disabled,
+			"aria-expanded": isOpen,
+			"aria-controls": isOpen ? regionId : void 0
+		},
+		regionProps: {
+			id: regionId,
+			role: "region",
+			"aria-labelledby": buttonId
+		}
+	};
 }
-export {
-  useExpandable
-};
+//#endregion
+export { useExpandable };

package/dist/hooks/useFocus.js

@@ -1,38 +1,35 @@
-import { useMemo } from "react";
 import { getDocument } from "../utils/document.js";
-const getActiveEl = () => getDocument()?.activeElement || null;
+import { useMemo } from "react";
+//#region src/hooks/useFocus.ts
+/** server-side safe `document.activeElement` wrapper */
+var getActiveEl = () => 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 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 useMemo(() => makeFocusUtils(containerRef), [containerRef]);
+function useFocus({ containerRef }) {
+	return useMemo(() => makeFocusUtils(containerRef), [containerRef]);
 }
-export {
-  useFocus
-};
+//#endregion
+export { useFocus };

package/dist/hooks/useForkRef.js

@@ -1,22 +1,22 @@
 import { useMemo } from "react";
-const setRef = (ref, value) => {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
+//#region src/hooks/useForkRef.ts
+var setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
 };
-const useForkRef = (refA, refB) => {
-  return useMemo(() => {
-    if (refA == null && refB == null) {
-      return null;
-    }
-    return (refValue) => {
-      setRef(refA, refValue);
-      setRef(refB, refValue);
-    };
-  }, [refA, refB]);
-};
-export {
-  useForkRef
+var useForkRef = (refA, refB) => {
+	/**
+	* This will create a new function if the ref props change and are defined.
+	* This means react will call the old forkRef with `null` and the new forkRef
+	* with the ref. Cleanup naturally emerges from this behavior.
+	*/
+	return useMemo(() => {
+		if (refA == null && refB == null) return null;
+		return (refValue) => {
+			setRef(refA, refValue);
+			setRef(refB, refValue);
+		};
+	}, [refA, refB]);
 };
+//#endregion
+export { useForkRef };

package/dist/hooks/useImageLoaded.js

@@ -1,27 +1,27 @@
-import { useState, useEffect } from "react";
-const useImageLoaded = (src, srcSet) => {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  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;
-};
-export {
-  useImageLoaded
+import { useEffect, useState } from "react";
+//#region src/hooks/useImageLoaded.ts
+var useImageLoaded = (src, srcSet) => {
+	const [imageLoaded, setImageLoaded] = useState(false);
+	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;
 };
+//#endregion
+export { useImageLoaded };

package/dist/hooks/useIsMounted.js

@@ -1,14 +1,14 @@
-import { useRef, useEffect } from "react";
-const useIsMounted = () => {
-  const isMounted = useRef(false);
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-  return isMounted;
-};
-export {
-  useIsMounted
+import { useEffect, useRef } from "react";
+//#region src/hooks/useIsMounted.ts
+var useIsMounted = () => {
+	const isMounted = useRef(false);
+	useEffect(() => {
+		isMounted.current = true;
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
+	return isMounted;
 };
+//#endregion
+export { useIsMounted };

package/dist/hooks/useLabels.js

@@ -1,10 +1,10 @@
-import { useMemo } from "react";
 import { deepMerge } from "../utils/deepMerge.js";
+import { useMemo } from "react";
+//#region src/hooks/useLabels.ts
 function useLabels(defaultLabels, labels) {
-  return useMemo(() => {
-    return deepMerge(defaultLabels, labels);
-  }, [defaultLabels, labels]);
+	return useMemo(() => {
+		return deepMerge(defaultLabels, labels);
+	}, [defaultLabels, labels]);
 }
-export {
-  useLabels
-};
+//#endregion
+export { useLabels };

package/dist/hooks/useScrollTo.js

@@ -1,131 +1,102 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import { verticalScrollOffset, findFirstVisibleElement, isScrolledToTheBottom, getScrollTop, scrollElement } from "../utils/scroll.js";
-const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigationMode = "push", relativeLinks = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
-  const RETRY_MAX = 5;
-  const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
-  const scrollEle = useRef(
-    typeof window !== "undefined" ? window : null
-  );
-  const requestedAnimationFrame = useRef(0);
-  const lastContainerScrollTop = useRef(0);
-  const selectedIndexRef = useRef(selectedIndex);
-  useEffect(() => {
-    selectedIndexRef.current = selectedIndex;
-  }, [selectedIndex]);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
-      lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
-    }
-  }, [scrollElementId]);
-  const checkScroll = useCallback(
-    (event) => {
-      if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) {
-        requestedAnimationFrame.current = window.requestAnimationFrame(() => {
-          requestedAnimationFrame.current = 0;
-          const firstVisibleElementIndex = findFirstVisibleElement(
-            scrollEle.current,
-            options,
-            offset
-          );
-          let newSelectedIndex = firstVisibleElementIndex;
-          if (firstVisibleElementIndex < 0) {
-            newSelectedIndex = 0;
-          }
-          if (newSelectedIndex < options.length - 1 && isScrolledToTheBottom(scrollEle.current)) {
-            newSelectedIndex += 1;
-          }
-          const containerScrollTop = getScrollTop(scrollEle.current);
-          const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
-          lastContainerScrollTop.current = containerScrollTop;
-          if (isScrollingDown) {
-            if (newSelectedIndex < selectedIndexRef.current) {
-              newSelectedIndex = selectedIndexRef.current;
-            }
-          } else if (newSelectedIndex > selectedIndexRef.current) {
-            newSelectedIndex = selectedIndexRef.current;
-          }
-          setSelectedIndex(newSelectedIndex);
-          onChange?.(event, newSelectedIndex);
-        });
-      }
-    },
-    [offset, options, onChange]
-  );
-  useEffect(() => {
-    if (scrollEle.current) {
-      scrollEle.current.addEventListener("scroll", checkScroll, false);
-    }
-    return () => {
-      if (scrollEle.current) {
-        scrollEle.current.removeEventListener("scroll", checkScroll);
-      }
-      if (requestedAnimationFrame.current !== 0) {
-        window.cancelAnimationFrame(requestedAnimationFrame.current);
-        requestedAnimationFrame.current = 0;
-      }
-    };
-  }, [checkScroll]);
-  useEffect(() => {
-    let checkRenderedInterval;
-    if (navigationMode !== "none") {
-      const hashValue = document.location.hash.split("#")[1] || "";
-      const option = options.find((o) => o.value === hashValue);
-      if (option) {
-        let retry = 0;
-        checkRenderedInterval = setInterval(() => {
-          const ele = document.getElementById(option.value);
-          if (ele) {
-            scrollElement(ele, scrollEle.current, option.offset || offset);
-            clearInterval(checkRenderedInterval);
-          } else {
-            retry += 1;
-            if (retry === RETRY_MAX) {
-              clearInterval(checkRenderedInterval);
-            }
-          }
-        }, 1e3);
-      }
-    }
-    return () => {
-      clearInterval(checkRenderedInterval);
-    };
-  }, []);
-  const baseUrl = relativeLinks || typeof window === "undefined" || window == null ? "" : window.location.href.split("#")[0];
-  const elements = useMemo(
-    () => options.map((o) => ({
-      ...o,
-      href: `${baseUrl}#${o.value}`
-    })),
-    [options, baseUrl]
-  );
-  const setScrollTo = useCallback(
-    (event, id, index, wrappedOnChange) => {
-      const option = elements.find((o) => o.value === id);
-      if (option) {
-        const ele = document.getElementById(id);
-        if (ele) {
-          scrollElement(
-            ele,
-            scrollEle.current,
-            option.offset || offset,
-            direction
-          );
-        }
-        if (navigationMode === "push") {
-          window.history.pushState({}, "", option.href);
-        } else if (navigationMode === "replace") {
-          window.history.replaceState({}, "", option.href);
-        }
-        setSelectedIndex(index);
-        wrappedOnChange?.(index);
-        selectedIndexRef.current = index;
-      }
-    },
-    [elements, navigationMode, direction, offset]
-  );
-  return [selectedIndex, setScrollTo, elements];
-};
-export {
-  useScrollTo
+import { findFirstVisibleElement, getScrollTop, isScrolledToTheBottom, scrollElement, verticalScrollOffset } from "../utils/scroll.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/hooks/useScrollTo.ts
+var useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigationMode = "push", relativeLinks = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
+	const RETRY_MAX = 5;
+	const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
+	const scrollEle = useRef(typeof window !== "undefined" ? window : null);
+	const requestedAnimationFrame = useRef(0);
+	const lastContainerScrollTop = useRef(0);
+	const selectedIndexRef = useRef(selectedIndex);
+	useEffect(() => {
+		selectedIndexRef.current = selectedIndex;
+	}, [selectedIndex]);
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
+			lastContainerScrollTop.current = verticalScrollOffset(scrollEle.current);
+		}
+	}, [scrollElementId]);
+	const checkScroll = useCallback((event) => {
+		if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) requestedAnimationFrame.current = window.requestAnimationFrame(() => {
+			requestedAnimationFrame.current = 0;
+			const firstVisibleElementIndex = findFirstVisibleElement(scrollEle.current, options, offset);
+			let newSelectedIndex = firstVisibleElementIndex;
+			if (firstVisibleElementIndex < 0) newSelectedIndex = 0;
+			if (newSelectedIndex < options.length - 1 && isScrolledToTheBottom(scrollEle.current)) newSelectedIndex += 1;
+			const containerScrollTop = getScrollTop(scrollEle.current);
+			const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
+			lastContainerScrollTop.current = containerScrollTop;
+			if (isScrollingDown) {
+				if (newSelectedIndex < selectedIndexRef.current) newSelectedIndex = selectedIndexRef.current;
+			} else if (newSelectedIndex > selectedIndexRef.current) newSelectedIndex = selectedIndexRef.current;
+			setSelectedIndex(newSelectedIndex);
+			onChange?.(event, newSelectedIndex);
+		});
+	}, [
+		offset,
+		options,
+		onChange
+	]);
+	useEffect(() => {
+		if (scrollEle.current) scrollEle.current.addEventListener("scroll", checkScroll, false);
+		return () => {
+			if (scrollEle.current) scrollEle.current.removeEventListener("scroll", checkScroll);
+			if (requestedAnimationFrame.current !== 0) {
+				window.cancelAnimationFrame(requestedAnimationFrame.current);
+				requestedAnimationFrame.current = 0;
+			}
+		};
+	}, [checkScroll]);
+	useEffect(() => {
+		let checkRenderedInterval;
+		if (navigationMode !== "none") {
+			const hashValue = document.location.hash.split("#")[1] || "";
+			const option = options.find((o) => o.value === hashValue);
+			if (option) {
+				let retry = 0;
+				checkRenderedInterval = setInterval(() => {
+					const ele = document.getElementById(option.value);
+					if (ele) {
+						scrollElement(ele, scrollEle.current, option.offset || offset);
+						clearInterval(checkRenderedInterval);
+					} else {
+						retry += 1;
+						if (retry === RETRY_MAX) clearInterval(checkRenderedInterval);
+					}
+				}, 1e3);
+			}
+		}
+		return () => {
+			clearInterval(checkRenderedInterval);
+		};
+	}, []);
+	const baseUrl = relativeLinks || typeof window === "undefined" || window == null ? "" : window.location.href.split("#")[0];
+	const elements = useMemo(() => options.map((o) => ({
+		...o,
+		href: `${baseUrl}#${o.value}`
+	})), [options, baseUrl]);
+	return [
+		selectedIndex,
+		useCallback((event, id, index, wrappedOnChange) => {
+			const option = elements.find((o) => o.value === id);
+			if (option) {
+				const ele = document.getElementById(id);
+				if (ele) scrollElement(ele, scrollEle.current, option.offset || offset, direction);
+				if (navigationMode === "push") window.history.pushState({}, "", option.href);
+				else if (navigationMode === "replace") window.history.replaceState({}, "", option.href);
+				setSelectedIndex(index);
+				wrappedOnChange?.(index);
+				selectedIndexRef.current = index;
+			}
+		}, [
+			elements,
+			navigationMode,
+			direction,
+			offset
+		]),
+		elements
+	];
 };
+//#endregion
+export { useScrollTo };

package/dist/hooks/useUniqueId.js

@@ -1,8 +1,8 @@
 import { useId } from "react";
-const useUniqueId = (deterministicId) => {
-  const id = useId();
-  return deterministicId ?? id;
-};
-export {
-  useUniqueId
+//#region src/hooks/useUniqueId.ts
+var useUniqueId = (deterministicId) => {
+	const id = useId();
+	return deterministicId ?? id;
 };
+//#endregion
+export { useUniqueId };

package/dist/hooks/useWidth.js

@@ -1,16 +1,13 @@
+import { theme } from "@hitachivantara/uikit-styles";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { theme } from "@hitachivantara/uikit-styles";
-const useWidth = () => {
-  const muiTheme = useTheme();
-  const keys = Object.keys(
-    theme.breakpoints.values
-  ).toReversed();
-  return keys.reduce((output, key) => {
-    const matches = useMediaQuery(muiTheme.breakpoints.up(key));
-    return !output && matches ? key : output;
-  }, null) || "xs";
-};
-export {
-  useWidth
+//#region src/hooks/useWidth.ts
+var useWidth = () => {
+	const muiTheme = useTheme();
+	return Object.keys(theme.breakpoints.values).toReversed().reduce((output, key) => {
+		const matches = useMediaQuery(muiTheme.breakpoints.up(key));
+		return !output && matches ? key : output;
+	}, null) || "xs";
 };
+//#endregion
+export { useWidth };