@hitachivantara/app-shell-shared 2.3.0 → 2.3.2

package/dist/bundles/app-shell-shared.esm.js

@@ -1,302 +1,326 @@
-import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, createElement } from "react";
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useAsync } from "@hitachivantara/app-shell-services";
 import { useLocation } from "react-router-dom";
-const HvAppShellContext = createContext(void 0);
-const useHvAppShellConfig = () => {
-  return useContext(HvAppShellContext);
+//#region src/AppShellContext.tsx
+var HvAppShellContext = createContext(void 0);
+var useHvAppShellConfig = () => {
+	return useContext(HvAppShellContext);
 };
-const HvAppShellModelContext = createContext(void 0);
-const useHvAppShellModel = () => {
-  const context = useContext(HvAppShellModelContext);
-  if (!context) {
-    throw new Error(
-      "useHvAppShellModel must be used within HvAppShellModelContext.Provider"
-    );
-  }
-  return context;
+//#endregion
+//#region src/AppShellModelContext.tsx
+var HvAppShellModelContext = createContext(void 0);
+var useHvAppShellModel = () => {
+	const context = useContext(HvAppShellModelContext);
+	if (!context) throw new Error("useHvAppShellModel must be used within HvAppShellModelContext.Provider");
+	return context;
 };
-const HvAppShellViewContext = createContext(void 0);
-const HvAppShellRuntimeContext = createContext(void 0);
-const useHvAppShellRuntimeContext = () => {
-  const context = useContext(HvAppShellRuntimeContext);
-  if (!context) {
-    throw new Error(
-      "useHvAppShellRuntimeContext must be used within HvAppShellRuntimeContext.Provider"
-    );
-  }
-  return context;
+//#endregion
+//#region src/AppShellViewContext.tsx
+var HvAppShellViewContext = createContext(void 0);
+//#endregion
+//#region src/AppShellRuntimeContext.tsx
+var HvAppShellRuntimeContext = createContext(void 0);
+var useHvAppShellRuntimeContext = () => {
+	const context = useContext(HvAppShellRuntimeContext);
+	if (!context) throw new Error("useHvAppShellRuntimeContext must be used within HvAppShellRuntimeContext.Provider");
+	return context;
 };
-const HvAppShellCombinedProvidersContext = createContext(void 0);
-const useHvAppShellCombinedProviders = () => {
-  return useContext(
-    HvAppShellCombinedProvidersContext
-  );
+//#endregion
+//#region src/AppShellCombinedProvidersContext.tsx
+var HvAppShellCombinedProvidersContext = createContext(void 0);
+var useHvAppShellCombinedProviders = () => {
+	return useContext(HvAppShellCombinedProvidersContext);
 };
-const CONFIG_TRANSLATIONS_NAMESPACE = "app";
-const HvAppShellI18nContext = createContext(void 0);
-const useHvAppShellI18n = () => {
-  const context = useContext(HvAppShellI18nContext);
-  if (!context) {
-    throw new Error(
-      "useHvAppShellI18n must be used within HvAppShellI18nContext.Provider"
-    );
-  }
-  return context;
+//#endregion
+//#region src/i18n/index.ts
+var CONFIG_TRANSLATIONS_NAMESPACE = "app";
+var HvAppShellI18nContext = createContext(void 0);
+/**
+* Gets the App Shell's I18N context.
+*/
+var useHvAppShellI18n = () => {
+	const context = useContext(HvAppShellI18nContext);
+	if (!context) throw new Error("useHvAppShellI18n must be used within HvAppShellI18nContext.Provider");
+	return context;
 };
-const getMenuTargetHref = (menuItem) => {
-  const { target } = menuItem;
-  if (target) {
-    return target;
-  }
-  if (menuItem.submenus) {
-    return getMenuTargetHref(menuItem.submenus[0]);
-  }
-  return "";
+//#endregion
+//#region src/utils/navigationUtils.ts
+/**
+* Compute the target href for menu item.
+*
+* @param menuItem The root target href.
+*
+* @returns The menu item target href. If empty, returns the first child that has it defined or empty string if none.
+*/
+var getMenuTargetHref = (menuItem) => {
+	const { target } = menuItem;
+	if (target) return target;
+	if (menuItem.submenus) return getMenuTargetHref(menuItem.submenus[0]);
+	return "";
 };
-const addPrefixToHref = (href) => {
-  return !href.startsWith(".") ? `.${href}` : href;
+/**
+* Adds a dot to the href to indicate that it is a relative path.
+*/
+var addPrefixToHref = (href) => {
+	return !href.startsWith(".") ? `.${href}` : href;
 };
-const createMenuItems = (t, menuItems, maxDepth, parentMenuItem) => {
-  if (maxDepth !== void 0 && maxDepth <= 0) {
-    return [];
-  }
-  return menuItems?.reduce((accumulator, currentValue, index) => {
-    const navItem = {
-      id: parentMenuItem ? `${parentMenuItem.id}-${index}` : `${index}`,
-      label: t(currentValue.label),
-      href: addPrefixToHref(getMenuTargetHref(currentValue)),
-      icon: currentValue.icon,
-      parent: parentMenuItem
-    };
-    if (currentValue.submenus) {
-      const updatedDepth = maxDepth !== void 0 ? maxDepth - 1 : void 0;
-      const data = createMenuItems(
-        t,
-        currentValue.submenus,
-        updatedDepth,
-        navItem
-      );
-      if (data.length > 0) {
-        navItem.data = data;
-      }
-    }
-    accumulator.push(navItem);
-    return accumulator;
-  }, []) ?? [];
+/**
+* Creates a navigation data structure ({@link MenuItem}) from the provided menu configuration ({@link HvAppShellMenuConfig}).
+*
+* Note: The menu configuration received here has already been filtered based on conditions.
+*
+* @param t Translation function
+* @param menuItems The set of menu items from configuration (already filtered)
+* @param maxDepth The maximum depth up until the recursiveness should occur for the creation of the menu items
+* @param parentMenuItem The parent menu item of the set of menu items
+*
+* @returns An array of {@link MenuItem}
+*/
+var createMenuItems = (t, menuItems, maxDepth, parentMenuItem) => {
+	if (maxDepth !== void 0 && maxDepth <= 0) return [];
+	return menuItems?.reduce((accumulator, currentValue, index) => {
+		const navItem = {
+			id: parentMenuItem ? `${parentMenuItem.id}-${index}` : `${index}`,
+			label: t(currentValue.label),
+			href: addPrefixToHref(getMenuTargetHref(currentValue)),
+			icon: currentValue.icon,
+			parent: parentMenuItem
+		};
+		if (currentValue.submenus) {
+			const updatedDepth = maxDepth !== void 0 ? maxDepth - 1 : void 0;
+			const data = createMenuItems(t, currentValue.submenus, updatedDepth, navItem);
+			if (data.length > 0) navItem.data = data;
+		}
+		accumulator.push(navItem);
+		return accumulator;
+	}, []) ?? [];
 };
-const flatMenuItems = (items) => {
-  return items.reduce((acc, item) => {
-    if (item.data) {
-      acc.push(...flatMenuItems(item.data));
-    } else {
-      acc.push(item);
-    }
-    return acc;
-  }, []);
+/**
+* Removes the items that do not have path and replaces it by its children, recursively.
+*
+* @param items The list of {@link MenuItem}.
+*
+* @returns A flat array of {@link MenuItem}.
+*/
+var flatMenuItems = (items) => {
+	return items.reduce((acc, item) => {
+		if (item.data) acc.push(...flatMenuItems(item.data));
+		else acc.push(item);
+		return acc;
+	}, []);
 };
-const decomposeHrefStringToArray = (normalizedHref) => {
-  const hrefArray = normalizedHref.split("/").reduce((accumulator, currentValue) => {
-    if (currentValue === "") {
-      return accumulator;
-    }
-    const prefix = accumulator.length === 0 ? "" : accumulator[0];
-    const href = currentValue === "." ? currentValue : `${prefix}/${currentValue}`;
-    accumulator.unshift(href);
-    return accumulator;
-  }, []);
-  hrefArray.push("./");
-  return hrefArray;
+/**
+* Helper function that uses a cumulative reduction to derive an array of cumulative hrefs based on the components
+* of the input string.
+* @example
+* // returns ['/', '/app', '/app/details', '/app/details/1']
+* // normalizedHref: "/app/details/1"
+*
+* @param normalizedHref The href string to be reduced.
+*
+* @returns the array of cumulative hrefs.
+*/
+var decomposeHrefStringToArray = (normalizedHref) => {
+	const hrefArray = normalizedHref.split("/").reduce((accumulator, currentValue) => {
+		if (currentValue === "") return accumulator;
+		const prefix = accumulator.length === 0 ? "" : accumulator[0];
+		const href = currentValue === "." ? currentValue : `${prefix}/${currentValue}`;
+		accumulator.unshift(href);
+		return accumulator;
+	}, []);
+	hrefArray.push("./");
+	return hrefArray;
 };
-const searchHrefMatch = (items, normalizedHref, normalizedFullHref) => {
-  let toBeSelectedId;
-  let toBeSelectedHref;
-  const reducedNormalizedHref = decomposeHrefStringToArray(normalizedHref);
-  flatMenuItems(items).some((item) => {
-    let normalizedItemHref;
-    let normalizedItemHrefParams;
-    const idx = item.href?.indexOf("?");
-    if (idx !== -1) {
-      normalizedItemHref = item.href?.slice(0, idx).toLowerCase();
-      normalizedItemHrefParams = item.href?.slice(idx).toLowerCase();
-    } else {
-      normalizedItemHref = item.href?.toLowerCase();
-      normalizedItemHrefParams = "";
-    }
-    if (normalizedItemHref && normalizedItemHref.length > 1 && normalizedItemHref.endsWith("/")) {
-      normalizedItemHref = normalizedItemHref.slice(
-        0,
-        normalizedItemHref.length - 1
-      );
-    }
-    const normalizedFullItemHref = `${normalizedItemHref}${normalizedItemHrefParams}`;
-    if (normalizedFullItemHref === normalizedFullHref) {
-      toBeSelectedId = item.id;
-      return true;
-    }
-    const matchedHref = reducedNormalizedHref.find(
-      (href) => normalizedItemHref === href
-    );
-    if (matchedHref && (!toBeSelectedHref || matchedHref.length > toBeSelectedHref?.length)) {
-      toBeSelectedId = item.id;
-      toBeSelectedHref = matchedHref;
-    }
-    return false;
-  });
-  return toBeSelectedId;
+/**
+* Algorithm implementation of the searchHrefInMenuItems function.
+*
+* @returns An object containing an item id or empty, if no match is found, and a flag to indicate if a
+* full href match was found. If the id is filled but the flag is 'false', then only partial match was found.
+*/
+var searchHrefMatch = (items, normalizedHref, normalizedFullHref) => {
+	let toBeSelectedId;
+	let toBeSelectedHref;
+	const reducedNormalizedHref = decomposeHrefStringToArray(normalizedHref);
+	flatMenuItems(items).some((item) => {
+		let normalizedItemHref;
+		let normalizedItemHrefParams;
+		const idx = item.href?.indexOf("?");
+		if (idx !== -1) {
+			normalizedItemHref = item.href?.slice(0, idx).toLowerCase();
+			normalizedItemHrefParams = item.href?.slice(idx).toLowerCase();
+		} else {
+			normalizedItemHref = item.href?.toLowerCase();
+			normalizedItemHrefParams = "";
+		}
+		if (normalizedItemHref && normalizedItemHref.length > 1 && normalizedItemHref.endsWith("/")) normalizedItemHref = normalizedItemHref.slice(0, normalizedItemHref.length - 1);
+		if (`${normalizedItemHref}${normalizedItemHrefParams}` === normalizedFullHref) {
+			toBeSelectedId = item.id;
+			return true;
+		}
+		const matchedHref = reducedNormalizedHref.find((href) => normalizedItemHref === href);
+		if (matchedHref && (!toBeSelectedHref || matchedHref.length > toBeSelectedHref?.length)) {
+			toBeSelectedId = item.id;
+			toBeSelectedHref = matchedHref;
+		}
+		return false;
+	});
+	return toBeSelectedId;
 };
-const searchHrefInMenuItems = (items, href, parameters) => {
-  if (!href) {
-    return void 0;
-  }
-  const normalizedHref = href.length > 1 && href.endsWith("/") ? href.slice(0, href.length - 1).toLowerCase() : href.toLowerCase();
-  const normalizedFullHref = parameters ? normalizedHref.concat(parameters.toLowerCase()) : normalizedHref;
-  return searchHrefMatch(items, normalizedHref, normalizedFullHref);
+/**
+* Searches for the href and parameters on all the menu items and its children until an exact match is found. If no
+* exact match is found but partial is, then the parent id for the first partial match found is returned.
+* @example
+* // returns '2'
+* // href: '/home', parameters: '?x=y', items: [{id:'1', href:'/home?z=v'},{id:'2', href:'/home'}
+*
+* For consistency purposes and based on the Router behavior, if either the href or the item href
+* (stripped of its query params) ends with a forward slash, then the comparison will ignore it
+* @example
+* // returns '1'
+* // href: '/home/', parameters: <empty>, items: [{id:'1', href:'/home'}]
+*
+* @param items The list of menu items to be searched.
+* @param href The url href after the domain up to the query parameters.
+* @param [parameters] The url query string after pathname.
+*
+* @returns The id of a parent menu item or an empty string.
+*/
+var searchHrefInMenuItems = (items, href, parameters) => {
+	if (!href) return;
+	const normalizedHref = href.length > 1 && href.endsWith("/") ? href.slice(0, href.length - 1).toLowerCase() : href.toLowerCase();
+	return searchHrefMatch(items, normalizedHref, parameters ? normalizedHref.concat(parameters.toLowerCase()) : normalizedHref);
 };
-const getRootIdFromItemId = (menuItemId) => {
-  if (!menuItemId) {
-    return void 0;
-  }
-  return menuItemId.split("-")[0];
+/**
+* Get root menu id from the path (in the format 0-0-0 - id's separated by `-`)
+* @param menuItemId
+* @returns the Id of the first menu or undefined if the provided value is undefined
+*/
+var getRootIdFromItemId = (menuItemId) => {
+	if (!menuItemId) return;
+	return menuItemId.split("-")[0];
 };
-const findItemById = (data, itemId) => {
-  let foundItem = null;
-  data.some((obj) => {
-    const { id: objId, data: childData } = obj;
-    if (objId === itemId) {
-      foundItem = obj;
-      return true;
-    }
-    if (childData && childData.length > 0) {
-      foundItem = findItemById(childData, itemId);
-      return foundItem !== null;
-    }
-    return false;
-  });
-  return foundItem;
+/**
+* Searches for an item with the specified id.
+*
+* @param {MenuItem[]} data - The navigation data structure.
+* @param {string} itemId - The item id.
+* @returns The item with matching id.
+*/
+var findItemById = (data, itemId) => {
+	let foundItem = null;
+	data.some((obj) => {
+		const { id: objId, data: childData } = obj;
+		if (objId === itemId) {
+			foundItem = obj;
+			return true;
+		}
+		if (childData && childData.length > 0) {
+			foundItem = findItemById(childData, itemId);
+			return foundItem !== null;
+		}
+		return false;
+	});
+	return foundItem;
 };
-const findFirstLeafItem = (data) => {
-  let foundItem = null;
-  data.some((obj) => {
-    if (!obj.data || obj.data.length === 0) {
-      foundItem = obj;
-      return true;
-    }
-    foundItem = findFirstLeafItem(obj.data);
-    return foundItem !== null;
-  });
-  return foundItem;
+/**
+* Finds the first leaf item (item with children) inside the received structure.
+*
+* @param {MenuItem[]} data - The navigation data structure.
+* @returns - The first leaf item inside the structure.
+*/
+var findFirstLeafItem = (data) => {
+	let foundItem = null;
+	data.some((obj) => {
+		if (!obj.data || obj.data.length === 0) {
+			foundItem = obj;
+			return true;
+		}
+		foundItem = findFirstLeafItem(obj.data);
+		return foundItem !== null;
+	});
+	return foundItem;
 };
-const MAX_TOP_MENU_DEPTH = 2;
-const useHvMenuItems = () => {
-  const { pathname, search, state: locationState } = useLocation();
-  const { navigationMode, menu } = useHvAppShellModel();
-  useHvAppShellI18n();
-  const { i18n } = useHvAppShellRuntimeContext();
-  const resolvedLanguage = i18n.resolvedLanguage;
-  const tConfig = useMemo(
-    () => i18n.getFixedT(resolvedLanguage ?? null, CONFIG_TRANSLATIONS_NAMESPACE),
-    [i18n, resolvedLanguage]
-  );
-  const items = useMemo(() => {
-    const menuItemsDepth = navigationMode === "ONLY_TOP" ? MAX_TOP_MENU_DEPTH : void 0;
-    return createMenuItems(tConfig, menu, menuItemsDepth);
-  }, [navigationMode, menu, tConfig]);
-  const [selectedMenuItemId, setSelectedMenuItemId] = useState(searchHrefInMenuItems(items, addPrefixToHref(pathname), search));
-  const [rootMenuItemId, setRootMenuItemId] = useState(
-    getRootIdFromItemId(selectedMenuItemId)
-  );
-  useEffect(() => {
-    if (!items.length) {
-      return;
-    }
-    if (locationState?.selectedItemId) {
-      setRootMenuItemId(getRootIdFromItemId(locationState.selectedItemId));
-      const selectedItem = findItemById(items, locationState.selectedItemId);
-      if (selectedItem?.data?.length) {
-        const firstItemToSelect = findFirstLeafItem(selectedItem.data);
-        setSelectedMenuItemId(firstItemToSelect?.id);
-      } else {
-        setSelectedMenuItemId(selectedItem?.id);
-      }
-      return;
-    }
-    const toBeSelected = searchHrefInMenuItems(
-      items,
-      addPrefixToHref(pathname),
-      search
-    );
-    if (toBeSelected) {
-      setRootMenuItemId(getRootIdFromItemId(toBeSelected));
-      setSelectedMenuItemId(toBeSelected);
-      return;
-    }
-    setRootMenuItemId(void 0);
-    setSelectedMenuItemId(void 0);
-  }, [items, locationState, pathname, search]);
-  return {
-    items,
-    selectedMenuItemId,
-    rootMenuItemId
-  };
+//#endregion
+//#region src/hooks/useMenuItems.tsx
+var MAX_TOP_MENU_DEPTH = 2;
+var useHvMenuItems = () => {
+	const { pathname, search, state: locationState } = useLocation();
+	const { navigationMode, menu } = useHvAppShellModel();
+	useHvAppShellI18n();
+	const { i18n } = useHvAppShellRuntimeContext();
+	const resolvedLanguage = i18n.resolvedLanguage;
+	const tConfig = useMemo(() => i18n.getFixedT(resolvedLanguage ?? null, "app"), [i18n, resolvedLanguage]);
+	const items = useMemo(() => {
+		return createMenuItems(tConfig, menu, navigationMode === "ONLY_TOP" ? MAX_TOP_MENU_DEPTH : void 0);
+	}, [
+		navigationMode,
+		menu,
+		tConfig
+	]);
+	const [selectedMenuItemId, setSelectedMenuItemId] = useState(searchHrefInMenuItems(items, addPrefixToHref(pathname), search));
+	const [rootMenuItemId, setRootMenuItemId] = useState(getRootIdFromItemId(selectedMenuItemId));
+	useEffect(() => {
+		if (!items.length) return;
+		if (locationState?.selectedItemId) {
+			setRootMenuItemId(getRootIdFromItemId(locationState.selectedItemId));
+			const selectedItem = findItemById(items, locationState.selectedItemId);
+			if (selectedItem?.data?.length) setSelectedMenuItemId(findFirstLeafItem(selectedItem.data)?.id);
+			else setSelectedMenuItemId(selectedItem?.id);
+			return;
+		}
+		const toBeSelected = searchHrefInMenuItems(items, addPrefixToHref(pathname), search);
+		if (toBeSelected) {
+			setRootMenuItemId(getRootIdFromItemId(toBeSelected));
+			setSelectedMenuItemId(toBeSelected);
+			return;
+		}
+		setRootMenuItemId(void 0);
+		setSelectedMenuItemId(void 0);
+	}, [
+		items,
+		locationState,
+		pathname,
+		search
+	]);
+	return {
+		items,
+		selectedMenuItemId,
+		rootMenuItemId
+	};
 };
-const generateKey = () => {
-  return `hooks-${Date.now()}-${Math.round(1e3 * Math.random())}`;
+//#endregion
+//#region src/components/DynamicHooksEvaluator/DynamicHooksEvaluator.tsx
+var generateKey = () => {
+	return `hooks-${Date.now()}-${Math.round(1e3 * Math.random())}`;
 };
-const DynamicHooksEvaluatorInner = ({
-  hooks,
-  onEvaluate
-}) => {
-  const results = [];
-  for (const { hook, params = [] } of hooks) {
-    const result = hook(...params);
-    results.push(result);
-  }
-  useEffect(() => onEvaluate(results), []);
-  return null;
+var DynamicHooksEvaluatorInner = ({ hooks, onEvaluate }) => {
+	const results = [];
+	for (const { hook, params = [] } of hooks) {
+		const result = hook(...params);
+		results.push(result);
+	}
+	useEffect(() => onEvaluate(results), []);
+	return null;
 };
-const DynamicHooksEvaluator = ({
-  hooks,
-  onEvaluate
-}) => {
-  const skipRenderRef = useRef(false);
-  const keyRef = useRef(generateKey());
-  const hooksRef = useRef(hooks);
-  if (hooksRef.current !== hooks) {
-    skipRenderRef.current = false;
-    hooksRef.current = hooks;
-  }
-  if (skipRenderRef.current) {
-    skipRenderRef.current = false;
-  } else {
-    keyRef.current = generateKey();
-  }
-  const onEvaluateWrapper = useCallback(
-    (results) => {
-      skipRenderRef.current = true;
-      onEvaluate(results);
-    },
-    [onEvaluate]
-  );
-  return createElement(DynamicHooksEvaluatorInner, {
-    key: keyRef.current,
-    hooks,
-    onEvaluate: onEvaluateWrapper
-  });
-};
-export {
-  CONFIG_TRANSLATIONS_NAMESPACE,
-  DynamicHooksEvaluator,
-  HvAppShellCombinedProvidersContext,
-  HvAppShellContext,
-  HvAppShellI18nContext,
-  HvAppShellModelContext,
-  HvAppShellRuntimeContext,
-  HvAppShellViewContext,
-  useAsync,
-  useHvAppShellCombinedProviders,
-  useHvAppShellConfig,
-  useHvAppShellI18n,
-  useHvAppShellModel,
-  useHvAppShellRuntimeContext,
-  useHvMenuItems
+var DynamicHooksEvaluator = ({ hooks, onEvaluate }) => {
+	const skipRenderRef = useRef(false);
+	const keyRef = useRef(generateKey());
+	const hooksRef = useRef(hooks);
+	if (hooksRef.current !== hooks) {
+		skipRenderRef.current = false;
+		hooksRef.current = hooks;
+	}
+	if (skipRenderRef.current) skipRenderRef.current = false;
+	else keyRef.current = generateKey();
+	const onEvaluateWrapper = useCallback((results) => {
+		skipRenderRef.current = true;
+		onEvaluate(results);
+	}, [onEvaluate]);
+	return createElement(DynamicHooksEvaluatorInner, {
+		key: keyRef.current,
+		hooks,
+		onEvaluate: onEvaluateWrapper
+	});
 };
+//#endregion
+export { CONFIG_TRANSLATIONS_NAMESPACE, DynamicHooksEvaluator, HvAppShellCombinedProvidersContext, HvAppShellContext, HvAppShellI18nContext, HvAppShellModelContext, HvAppShellRuntimeContext, HvAppShellViewContext, useAsync, useHvAppShellCombinedProviders, useHvAppShellConfig, useHvAppShellI18n, useHvAppShellModel, useHvAppShellRuntimeContext, useHvMenuItems };