udp-react-enterprise-component-library 25.18.3 → 25.18.4-beta.2

package/dist/UdpRoutes-C1TP5skF.js

@@ -0,0 +1,228 @@
+import { ConfigService } from "./configService/index.js";
+import { d as getLoginRequest } from "./apiHelpers-CQSnEbMA.js";
+import { n as UdpPageEnums } from "./pageEnums-BAFH7P4f.js";
+import { t as useUser } from "./useUser-B_mCveqm.js";
+import { t as PageLoading } from "./PageLoading-GD6E2uMU.js";
+import { t as useIsUnityAuthenticated } from "./useIsUnityAuthenticated-B31UDioq.js";
+import { r as useRouteRegistry } from "./routeRegistryStore-BS3hcd9s.js";
+import { n as useTheme } from "./systemColors-j8Hqydbg.js";
+import { t as PageForbiddenRoute } from "./PageForbiddenRoute-Bzg9CA7g.js";
+import { s as useMenuContext } from "./TenantProvider-Bx_F9FQi.js";
+import { t as LoadingIndicator } from "./LoadingIndicator-COnc5PwV.js";
+import { o as storeRedirectPath } from "./LocalRedirectUrlStorage-CoKXrY8k.js";
+import { t as PasswordResetRedirect$1 } from "./PasswordResetRedirect-CqWa28HU.js";
+import { t as useTenant } from "./useTenant-6MaSjnVs.js";
+import React, { Suspense, lazy, useEffect, useMemo } from "react";
+import { InteractionType } from "@azure/msal-browser";
+import { Route, Switch, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { MsalAuthenticationTemplate } from "@azure/msal-react";
+
+//#region src/routes/useRegisterRoute.ts
+/**
+* Registers the current route in the registry and keeps the current path in sync.
+* Returns the current location so callers can reuse it without calling useLocation again.
+*/
+const useRegisterRoute = ({ isPublic, attemptSilentAuth }) => {
+	const location = useLocation();
+	const registerRoute = useRouteRegistry((state) => state.registerRoute);
+	const setPath = useRouteRegistry((state) => state.setPath);
+	const syncRouteRegistration = () => {
+		const path = location.pathname;
+		setPath(path);
+		registerRoute(path, {
+			isPublic,
+			...attemptSilentAuth !== void 0 ? { attemptSilentAuth } : {}
+		});
+	};
+	useEffect(syncRouteRegistration, [
+		attemptSilentAuth,
+		isPublic,
+		location.pathname,
+		registerRoute,
+		setPath
+	]);
+	return location;
+};
+
+//#endregion
+//#region src/routes/PrivateRoute.tsx
+const PrivateRoute = ({ rolesMap: propRolesMap, menuActiveMap: propMenuActiveMap, ...routeProps }) => {
+	const location = useRegisterRoute({ isPublic: false });
+	const isAuthenticated = useIsUnityAuthenticated();
+	const user = useUser();
+	const tenant = useTenant();
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const menuContext = useMenuContext?.();
+	const rolesMap = menuContext?.rolesMap ?? propRolesMap;
+	const menuActiveMap = menuContext?.menuActiveMap ?? propMenuActiveMap;
+	const userRoles = useMemo(() => {
+		return Array.isArray(user?.roleIds) ? user.roleIds : [];
+	}, [user]);
+	const userHasAccessToTenant = useMemo(() => {
+		if (user?.tenantIds?.includes(user.currentTenantId)) return true;
+		return false;
+	}, [user]);
+	const userHasRoles = useMemo(() => {
+		if (rolesMap?.size > 0) {
+			if (!rolesMap.has(routeProps.location?.pathname)) return false;
+			const routeRoles = rolesMap.get(routeProps.location?.pathname);
+			if (!routeRoles?.length) return true;
+			return routeRoles.some((element) => userRoles.includes(element));
+		}
+		return true;
+	}, [
+		userRoles,
+		rolesMap,
+		routeProps.location?.pathname
+	]);
+	const menuIsActive = useMemo(() => {
+		if (menuActiveMap?.size > 0 && menuActiveMap.has(routeProps.location?.pathname)) return menuActiveMap.get(routeProps.location?.pathname);
+	}, [menuActiveMap, routeProps.location?.pathname]);
+	const activeTenant = tenant?.activeTenant ?? null;
+	const isUserInitialized = Boolean(user?.id);
+	const isTenantInitialized = Boolean(activeTenant?.tenantId);
+	const isThemeInitialized = Boolean(theme?.isInitialized);
+	if (isAuthenticated && (!isUserInitialized || !isTenantInitialized) || isAuthenticated && !isThemeInitialized) return /* @__PURE__ */ React.createElement(LoadingIndicator, null);
+	if (!isAuthenticated) {
+		storeRedirectPath(location.pathname, location.search);
+		let loginRequest = null;
+		try {
+			loginRequest = getLoginRequest();
+		} catch {
+			loginRequest = null;
+		}
+		if (!loginRequest) return /* @__PURE__ */ React.createElement(LoadingIndicator, null);
+		return /* @__PURE__ */ React.createElement(MsalAuthenticationTemplate, {
+			interactionType: InteractionType.Redirect,
+			authenticationRequest: loginRequest,
+			loadingComponent: () => /* @__PURE__ */ React.createElement(LoadingIndicator, null),
+			errorComponent: (props) => /* @__PURE__ */ React.createElement(PasswordResetRedirect$1, props)
+		}, /* @__PURE__ */ React.createElement(Route, routeProps));
+	}
+	if (!userHasAccessToTenant && user?.statusCode === 200) return /* @__PURE__ */ React.createElement(Route, {
+		path: "*",
+		render: () => /* @__PURE__ */ React.createElement(PageForbiddenRoute, {
+			message: t("You do not have access to this tenant. Please select a different Tenant."),
+			showButton: false
+		})
+	});
+	if (rolesMap?.has(routeProps.location?.pathname) && !menuIsActive) return /* @__PURE__ */ React.createElement(Route, {
+		path: "*",
+		render: () => /* @__PURE__ */ React.createElement(PageForbiddenRoute, {
+			message: t("Trying to access inactive menu. Please check your menu configurations"),
+			showButton: false
+		})
+	});
+	if (!user?.isUnitySystemAdmin && rolesMap?.size > 0 && !userHasRoles) return /* @__PURE__ */ React.createElement(Route, {
+		path: "*",
+		render: () => /* @__PURE__ */ React.createElement(PageForbiddenRoute, {
+			message: t("You do not have the required roles to access this page. Please contact an administrator to get access"),
+			showButton: false
+		})
+	});
+	if (user?.statusCode === 200) return /* @__PURE__ */ React.createElement(Route, routeProps);
+	return /* @__PURE__ */ React.createElement(LoadingIndicator, null);
+};
+
+//#endregion
+//#region src/routes/PublicRoute.tsx
+const PublicRoute = ({ attemptSilentAuth = false, ...props }) => {
+	useRegisterRoute({
+		isPublic: true,
+		attemptSilentAuth
+	});
+	return /* @__PURE__ */ React.createElement(Route, props);
+};
+
+//#endregion
+//#region src/routes/UdpRoutes.jsx
+const VirtualBrowser = lazy(() => import("./VirtualBrowser-athQsk29.js").then((n) => n.n));
+const MenuPage = lazy(() => import("./MenuPage-g6NbH0C7.js").then((n) => n.n));
+const UdpPublicForm = lazy(() => import("./udp/pages/UdpFormsPublicForm/index.js"));
+const WorkflowContainer = lazy(() => import("./WorkflowContainer-oic0TU4N.js").then((n) => n.n));
+const PasswordResetRedirect = lazy(() => import("./PasswordResetRedirect-CqWa28HU.js").then((n) => n.n));
+const MyExportsPage = lazy(() => import("./MyExportsPage-D6cTR0Do.js").then((n) => n.n));
+const PageNotFoundRoute = lazy(() => import("./PageNotFoundRoute-DSpB5lFF.js").then((n) => n.n));
+const UdpMaintenanceConfigPage = lazy(() => import("./udp/pages/UdpMaintenanceConfigPage/index.js"));
+const UdpMaintenanceEnginePage = lazy(() => import("./udp/pages/UdpMaintenanceEnginePage/index.js"));
+const AadCallback = lazy(() => import("./AadCallback-BStaCVo9.js"));
+const UdpTransactionsPage = lazy(() => import("./udp/pages/UdpTransactionsPage/index.js"));
+const UdpTransactionTypesPage = lazy(() => import("./udp/pages/UdpTransactionTypesPage/index.js"));
+const PageContainer = lazy(() => import("./page/PageContainer/index.js").then((module) => ({ default: module.PageContainer })));
+const Reports = lazy(() => import("./Reports-D14a_qHI.js").then((n) => n.t));
+const Inquiry = lazy(() => import("./Inquiry-71TYFqZi.js").then((n) => n.n).then((module) => ({ default: module.Inquiry })));
+const UdpRoutes = (props) => {
+	const { ...other } = props;
+	return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(PageLoading, null) }, /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/virtual/:id",
+		render: (props) => /* @__PURE__ */ React.createElement(VirtualBrowser, {
+			...props,
+			...other
+		})
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/menupage/:id",
+		render: (props) => /* @__PURE__ */ React.createElement(MenuPage, {
+			...props,
+			...other
+		})
+	}), /* @__PURE__ */ React.createElement(PublicRoute, {
+		path: `/page/${UdpPageEnums.Udp_Public_Forms_Page}`,
+		render: (props) => /* @__PURE__ */ React.createElement(UdpPublicForm, {
+			...props,
+			...other
+		})
+	}), /* @__PURE__ */ React.createElement(PublicRoute, {
+		path: `/passwordresetsuccess`,
+		render: (props) => /* @__PURE__ */ React.createElement(PasswordResetRedirect, { props })
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/workflowtask/:id",
+		render: (props) => /* @__PURE__ */ React.createElement(WorkflowContainer, {
+			...props,
+			...other
+		})
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/myexports",
+		render: (props) => /* @__PURE__ */ React.createElement(MyExportsPage, {
+			productId: ConfigService.config.UNITY_PRODUCT_ID,
+			...props,
+			...other
+		})
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/crudbrowser",
+		render: (props) => /* @__PURE__ */ React.createElement(UdpMaintenanceEnginePage, props)
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/tablebrowser",
+		render: (props) => /* @__PURE__ */ React.createElement(UdpMaintenanceConfigPage, props)
+	}), /* @__PURE__ */ React.createElement(Route, {
+		path: "/aad_callback",
+		component: AadCallback
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/transactionsPage",
+		render: (props) => /* @__PURE__ */ React.createElement(UdpTransactionsPage, props)
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/transactionTypesPage",
+		render: (props) => /* @__PURE__ */ React.createElement(UdpTransactionTypesPage, props)
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/reports/:id",
+		exact: true,
+		component: Reports
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/inquiry/:id",
+		render: (props) => /* @__PURE__ */ React.createElement(Inquiry, props)
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "/page/:id",
+		render: (props) => /* @__PURE__ */ React.createElement(PageContainer, {
+			fromMenu: true,
+			...props
+		})
+	}), /* @__PURE__ */ React.createElement(PrivateRoute, {
+		path: "*",
+		component: PageNotFoundRoute
+	})));
+};
+
+//#endregion
+export { PublicRoute as n, PrivateRoute as r, UdpRoutes as t };
+//# sourceMappingURL=UdpRoutes-C1TP5skF.js.map

package/dist/UdpRoutes-C1TP5skF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UdpRoutes-C1TP5skF.js","names":["PasswordResetRedirect"],"sources":["../src/routes/useRegisterRoute.ts","../src/routes/PrivateRoute.tsx","../src/routes/PublicRoute.tsx","../src/routes/UdpRoutes.jsx"],"sourcesContent":["import { useEffect } from 'react';\nimport type { Location } from 'history';\nimport { useLocation } from 'react-router-dom';\nimport { useRouteRegistry } from './routeRegistryStore';\n\ninterface UseRegisterRouteOptions {\n  isPublic: boolean;\n  attemptSilentAuth?: boolean;\n}\n\n/**\n * Registers the current route in the registry and keeps the current path in sync.\n * Returns the current location so callers can reuse it without calling useLocation again.\n */\nexport const useRegisterRoute = ({\n  isPublic,\n  attemptSilentAuth\n}: UseRegisterRouteOptions): Location => {\n  const location = useLocation();\n  const registerRoute = useRouteRegistry((state) => state.registerRoute);\n  const setPath = useRouteRegistry((state) => state.setPath);\n\n  const syncRouteRegistration = () => {\n    const path = location.pathname;\n    setPath(path);\n    registerRoute(path, {\n      isPublic,\n      ...(attemptSilentAuth !== undefined ? { attemptSilentAuth } : {})\n    });\n  };\n\n  useEffect(syncRouteRegistration, [\n    attemptSilentAuth,\n    isPublic,\n    location.pathname,\n    registerRoute,\n    setPath\n  ]);\n\n  return location;\n};\n","import React, { useMemo } from 'react';\nimport { Route, RouteProps } from 'react-router-dom';\nimport { useTheme } from '../utilities/theme';\nimport { useTranslation } from 'react-i18next';\nimport type { RedirectRequest } from '@azure/msal-browser';\nimport { InteractionType } from '@azure/msal-browser';\nimport { MsalAuthenticationTemplate } from '@azure/msal-react';\nimport { useIsUnityAuthenticated } from '../utilities/auth/useIsUnityAuthenticated';\nimport { useUser } from '../utilities/auth/useUser';\nimport { PageForbiddenRoute } from './components/PageForbiddenRoute';\nimport { useMenuContext } from '../utilities/menus/MenuProvider';\nimport { useRegisterRoute } from './useRegisterRoute';\nimport { LoadingIndicator } from '../UI/loading/LoadingIndicator';\nimport { PasswordResetRedirect } from './components/PasswordResetRedirect';\nimport { getLoginRequest } from '../utilities/auth/signInAuthProvider';\nimport { useTenant } from '../utilities/tenant';\nimport { storeRedirectPath } from '../utilities/redirect/LocalRedirectUrlStorage';\n\n/**\n * Route guard for protected pages.\n *\n * - Triggers login redirect when the user is not authenticated.\n * - Blocks rendering until user/tenant/theme are initialized after login.\n * - Enforces tenant membership, menu activation, and role-based access.\n */\nexport interface PrivateRouteProps extends RouteProps {\n  /**\n   * Optional map of pathname -> required role IDs.\n   * If a path is present and has roles, the user must have at least one.\n   */\n  rolesMap?: Map<string, string[]>;\n  /**\n   * Optional map of pathname -> menu active status.\n   * If a path is present and inactive, access is denied.\n   */\n  menuActiveMap?: Map<string, boolean>;\n}\n\nexport const PrivateRoute = ({\n  rolesMap: propRolesMap,\n  menuActiveMap: propMenuActiveMap,\n  ...routeProps\n}: PrivateRouteProps) => {\n  const location = useRegisterRoute({ isPublic: false });\n  const isAuthenticated = useIsUnityAuthenticated();\n  const user = useUser();\n  const tenant = useTenant();\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const menuContext = useMenuContext?.();\n  const rolesMap = menuContext?.rolesMap ?? propRolesMap;\n  const menuActiveMap = menuContext?.menuActiveMap ?? propMenuActiveMap;\n  const userRoles = useMemo(() => {\n    return Array.isArray(user?.roleIds) ? user.roleIds : [];\n  }, [user]);\n\n  const userHasAccessToTenant = useMemo(() => {\n    if (user?.tenantIds?.includes(user.currentTenantId)) {\n      return true;\n    }\n    return false;\n  }, [user]);\n\n  const userHasRoles = useMemo(() => {\n    if (rolesMap?.size > 0) {\n      if (!rolesMap.has(routeProps.location?.pathname)) {\n        return false;\n      }\n      const routeRoles = rolesMap.get(routeProps.location?.pathname);\n      if (!routeRoles?.length) {\n        return true;\n      }\n      return routeRoles.some((element) => userRoles.includes(element));\n    }\n    return true;\n  }, [userRoles, rolesMap, routeProps.location?.pathname]);\n\n  const menuIsActive = useMemo(() => {\n    if (\n      menuActiveMap?.size > 0 &&\n      menuActiveMap.has(routeProps.location?.pathname)\n    ) {\n      return menuActiveMap.get(routeProps.location?.pathname);\n    }\n  }, [menuActiveMap, routeProps.location?.pathname]);\n\n  const activeTenant = tenant?.activeTenant ?? null;\n  const isUserInitialized = Boolean(user?.id);\n  const isTenantInitialized = Boolean(activeTenant?.tenantId);\n  const isThemeInitialized = Boolean(theme?.isInitialized);\n\n  const shouldWaitForProtectedContext =\n    isAuthenticated && (!isUserInitialized || !isTenantInitialized);\n  const shouldWaitForTheme = isAuthenticated && !isThemeInitialized;\n  if (shouldWaitForProtectedContext || shouldWaitForTheme) {\n    return <LoadingIndicator />;\n  }\n\n  if (!isAuthenticated) {\n    storeRedirectPath(location.pathname, location.search);\n    let loginRequest: RedirectRequest | null = null;\n    try {\n      loginRequest = getLoginRequest();\n    } catch {\n      loginRequest = null;\n    }\n\n    if (!loginRequest) {\n      return <LoadingIndicator />;\n    }\n\n    return (\n      <MsalAuthenticationTemplate\n        interactionType={InteractionType.Redirect}\n        authenticationRequest={loginRequest}\n        loadingComponent={() => <LoadingIndicator />}\n        errorComponent={(props) => <PasswordResetRedirect {...props} />}\n      >\n        <Route {...routeProps} />\n      </MsalAuthenticationTemplate>\n    );\n  }\n\n  if (!userHasAccessToTenant && user?.statusCode === 200) {\n    return (\n      <Route\n        path='*'\n        render={() => (\n          <PageForbiddenRoute\n            message={t(\n              'You do not have access to this tenant. Please select a different Tenant.'\n            )}\n            showButton={false}\n          />\n        )}\n      />\n    );\n  }\n\n  if (rolesMap?.has(routeProps.location?.pathname) && !menuIsActive) {\n    return (\n      <Route\n        path='*'\n        render={() => (\n          <PageForbiddenRoute\n            message={t(\n              'Trying to access inactive menu. Please check your menu configurations'\n            )}\n            showButton={false}\n          />\n        )}\n      />\n    );\n  }\n\n  if (!user?.isUnitySystemAdmin && rolesMap?.size > 0 && !userHasRoles) {\n    return (\n      <Route\n        path='*'\n        render={() => (\n          <PageForbiddenRoute\n            message={t(\n              'You do not have the required roles to access this page. Please contact an administrator to get access'\n            )}\n            showButton={false}\n          />\n        )}\n      />\n    );\n  }\n\n  if (user?.statusCode === 200) {\n    return <Route {...routeProps} />;\n  }\n\n  return <LoadingIndicator />;\n};\n","import React from 'react';\nimport { Route, RouteProps } from 'react-router-dom';\nimport { useRegisterRoute } from './useRegisterRoute';\n\n/**\n * Route that is always treated as public.\n * Useful for pages that should bypass auth gating and shell blocking.\n */\nexport interface PublicRouteProps extends RouteProps {\n  /**\n   * When true, allows public pages to attempt silent auth for downstream calls.\n   */\n  attemptSilentAuth?: boolean;\n}\n\nexport const PublicRoute = ({\n  attemptSilentAuth = false,\n  ...props\n}: PublicRouteProps) => {\n  useRegisterRoute({ isPublic: true, attemptSilentAuth });\n\n  // Returns the actual Route component so it works inside Switch (v5) or as a direct route\n  return <Route {...props} />;\n};\n","import React, { Suspense, lazy } from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport { PrivateRoute } from './PrivateRoute';\nimport { UdpPageEnums } from '../enums/pageEnums';\nimport { ConfigService } from '../configService';\nimport { PageLoading } from '../UI/feedback/PageLoading';\nimport { PublicRoute } from './PublicRoute';\n\n// Lazy load route components\nconst VirtualBrowser = lazy(() =>\n  import('../maintenanceEngine/virtualBrowser/VirtualBrowser')\n);\nconst MenuPage = lazy(() => import('../menuPage/MenuPage'));\nconst UdpPublicForm = lazy(() => import('../udp/pages/UdpFormsPublicForm'));\nconst WorkflowContainer = lazy(() => import('../workflow/WorkflowContainer'));\nconst PasswordResetRedirect = lazy(() =>\n  import('./components/PasswordResetRedirect')\n);\nconst MyExportsPage = lazy(() => import('../udp/export/MyExportsPage'));\nconst PageNotFoundRoute = lazy(() => import('./components/PageNotFoundRoute'));\nconst UdpMaintenanceConfigPage = lazy(() =>\n  import('../udp/pages/UdpMaintenanceConfigPage')\n);\nconst UdpMaintenanceEnginePage = lazy(() =>\n  import('../udp/pages/UdpMaintenanceEnginePage')\n);\nconst AadCallback = lazy(() => import('../utilities/auth/AadCallback'));\n\nconst UdpTransactionsPage = lazy(() =>\n  import('../udp/pages/UdpTransactionsPage')\n);\n\nconst UdpTransactionTypesPage = lazy(() =>\n  import('../udp/pages/UdpTransactionTypesPage')\n);\n\nconst PageContainer = lazy(() =>\n  import('../page/PageContainer').then((module) => ({\n    default: module.PageContainer\n  }))\n);\n\nconst Reports = lazy(() => import('../reports/Reports'));\n\nconst Inquiry = lazy(() =>\n  import('../inquiry/Inquiry').then((module) => ({ default: module.Inquiry }))\n);\n\nexport const UdpRoutes = (props) => {\n  const { ...other } = props;\n  return (\n    <Suspense fallback={<PageLoading />}>\n      <Switch>\n        <PrivateRoute\n          path='/virtual/:id'\n          render={(props) => <VirtualBrowser {...props} {...other} />}\n        />\n        <PrivateRoute\n          path='/menupage/:id'\n          render={(props) => <MenuPage {...props} {...other} />}\n        />\n\n        <PublicRoute\n          path={`/page/${UdpPageEnums.Udp_Public_Forms_Page}`}\n          render={(props) => <UdpPublicForm {...props} {...other} />}\n        />\n        <PublicRoute\n          path={`/passwordresetsuccess`}\n          render={(props) => <PasswordResetRedirect props={props} />}\n        />\n        <PrivateRoute\n          path='/workflowtask/:id'\n          render={(props) => <WorkflowContainer {...props} {...other} />}\n        />\n        <PrivateRoute\n          path='/myexports'\n          render={(props) => (\n            <MyExportsPage\n              productId={ConfigService.config.UNITY_PRODUCT_ID}\n              {...props}\n              {...other}\n            />\n          )}\n        />\n        <PrivateRoute\n          path='/crudbrowser'\n          render={(props) => <UdpMaintenanceEnginePage {...props} />}\n        />\n        <PrivateRoute\n          path='/tablebrowser'\n          render={(props) => <UdpMaintenanceConfigPage {...props} />}\n        />\n\n        <Route path='/aad_callback' component={AadCallback} />\n        <PrivateRoute\n          path='/transactionsPage'\n          render={(props) => <UdpTransactionsPage {...props} />}\n        />\n        <PrivateRoute\n          path='/transactionTypesPage'\n          render={(props) => <UdpTransactionTypesPage {...props} />}\n        />\n        <PrivateRoute path='/reports/:id' exact component={Reports} />\n        <PrivateRoute\n          path='/inquiry/:id'\n          render={(props) => <Inquiry {...props} />}\n        />\n        <PrivateRoute\n          path='/page/:id'\n          render={(props) => <PageContainer fromMenu={true} {...props} />}\n        />\n        <PrivateRoute path='*' component={PageNotFoundRoute} />\n      </Switch>\n    </Suspense>\n  );\n};\n"],"mappings":"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"}

package/dist/UdpTabUtility-DpqUyQOO.js

@@ -0,0 +1,49 @@
+import { t as UdpTabs } from "./UdpTabs-Bx5rfGfh.js";
+import React, { useMemo, useState } from "react";
+import { makeStyles } from "@material-ui/core";
+
+//#region src/UI/navigation/tabs/UdpTabPanel.jsx
+const useStyles = makeStyles((theme) => ({
+	activeTabPanel: { display: "block" },
+	inactiveTabPanel: { display: "none" }
+}));
+const UdpTabPanel = (props) => {
+	const classes = useStyles();
+	const { value, index, children, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		className: value === index ? classes.activeTabPanel : classes.inactiveTabPanel,
+		...otherProps
+	}, children);
+};
+
+//#endregion
+//#region src/UI/navigation/tabs/UdpTabUtility.jsx
+const UdpTabUtility = (props) => {
+	const { tabList, menuWidth, menuMaxHeight, menuItemProps, variant } = props;
+	const [selectedTab, setSelectedTab] = useState(0);
+	const currentTabList = useMemo(() => {
+		return tabList?.map((tab, index) => ({
+			id: index,
+			...tab
+		}));
+	}, [tabList]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(UdpTabs, {
+		value: selectedTab,
+		onChange: (e, value) => {
+			setSelectedTab(value);
+		},
+		tabList: currentTabList,
+		menuItemProps,
+		menuWidth,
+		menuMaxHeight,
+		variant
+	}), currentTabList?.map((tab) => /* @__PURE__ */ React.createElement(UdpTabPanel, {
+		key: tab?.id,
+		index: tab?.id,
+		value: selectedTab
+	}, tab?.child)));
+};
+
+//#endregion
+export { UdpTabPanel as n, UdpTabUtility as t };
+//# sourceMappingURL=UdpTabUtility-DpqUyQOO.js.map

package/dist/UdpTabUtility-DpqUyQOO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UdpTabUtility-DpqUyQOO.js","names":[],"sources":["../src/UI/navigation/tabs/UdpTabPanel.jsx","../src/UI/navigation/tabs/UdpTabUtility.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  activeTabPanel: {\n    display: 'block'\n  },\n  inactiveTabPanel: {\n    display: 'none'\n  }\n}));\n\nexport const UdpTabPanel = (props) => {\n  const classes = useStyles();\n  const { value, index, children, ...otherProps } = props;\n\n  return (\n    <div\n      className={\n        value === index ? classes.activeTabPanel : classes.inactiveTabPanel\n      }\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n};\n","import React, { useMemo, useState } from 'react';\nimport { UdpTabs } from './UdpTabs';\nimport { UdpTabPanel } from './UdpTabPanel';\n\nexport const UdpTabUtility = (props) => {\n  const { tabList, menuWidth, menuMaxHeight, menuItemProps, variant } = props;\n  const [selectedTab, setSelectedTab] = useState(0);\n\n  const currentTabList = useMemo(() => {\n    return tabList?.map((tab, index) => ({ id: index, ...tab }));\n  }, [tabList]);\n\n  return (\n    <div>\n      <UdpTabs\n        value={selectedTab}\n        onChange={(e,value) => {\n          setSelectedTab(value);\n        }}\n        tabList={currentTabList}\n        menuItemProps={menuItemProps}\n        menuWidth={menuWidth}\n        menuMaxHeight={menuMaxHeight}\n        variant={variant}\n      />\n      {currentTabList?.map((tab) => (\n        <UdpTabPanel\n          key={tab?.id}\n          index={tab?.id}\n          value={selectedTab}\n        >\n          {tab?.child}\n        </UdpTabPanel>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAGA,MAAM,YAAY,YAAY,WAAW;CACvC,gBAAgB,EACd,SAAS,SACV;CACD,kBAAkB,EAChB,SAAS,QACV;CACF,EAAE;AAEH,MAAa,eAAe,UAAU;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,OAAO,UAAU,GAAG,eAAe;AAElD,QACE,oCAAC;EACC,WACE,UAAU,QAAQ,QAAQ,iBAAiB,QAAQ;EAErD,GAAI;IAEH,SACG;;;;;ACpBV,MAAa,iBAAiB,UAAU;CACtC,MAAM,EAAE,SAAS,WAAW,eAAe,eAAe,YAAY;CACtE,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,MAAM,iBAAiB,cAAc;AACnC,SAAO,SAAS,KAAK,KAAK,WAAW;GAAE,IAAI;GAAO,GAAG;GAAK,EAAE;IAC3D,CAAC,QAAQ,CAAC;AAEb,QACE,oCAAC,aACC,oCAAC;EACC,OAAO;EACP,WAAW,GAAE,UAAU;AACrB,kBAAe,MAAM;;EAEvB,SAAS;EACM;EACJ;EACI;EACN;GACT,EACD,gBAAgB,KAAK,QACpB,oCAAC;EACC,KAAK,KAAK;EACV,OAAO,KAAK;EACZ,OAAO;IAEN,KAAK,MACM,CACd,CACE"}

package/dist/UdpTabs-Bx5rfGfh.js

@@ -0,0 +1,209 @@
+import { t as FluentIcon } from "./FluentIcon-pwGrBtD8.js";
+import React, { createRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Badge, ButtonBase, IconButton, MenuItem, Popover, Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { MoreVerticalIcon } from "@fluentui/react-icons";
+
+//#region src/UI/navigation/tabs/UdpTabs.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		flexSkrink: 0,
+		overflow: "hidden"
+	},
+	tabsWrapper: {
+		display: "flex",
+		gap: (props) => props?.variant === "block" ? theme.spacing(1) : null,
+		flexGrow: 1
+	},
+	tab: {
+		padding: `8px 18px`,
+		flex: 1
+	},
+	blockTab: { backgroundColor: theme.palette.background.paper },
+	activeTab: {
+		borderBottom: (props) => props?.variant === "block" ? null : `2px solid ${theme.palette.secondary.main}`,
+		backgroundColor: (props) => props?.variant === "block" ? theme.palette.secondary.light : null,
+		color: (props) => props?.variant === "block" ? theme.palette.getContrastText(theme.palette.secondary.light) : null
+	},
+	moreButton: {
+		marginTop: theme.spacing(1),
+		width: theme.spacing(1),
+		height: theme.spacing(1),
+		borderRadius: 2
+	},
+	menuItem: {
+		whiteSpace: "normal",
+		width: (props) => props?.menuWidth ? props?.menuWidth : "170px"
+	},
+	popoverWrapper: { maxHeight: (props) => props?.menuMaxHeight ? props?.menuMaxHeight : "250px" }
+}));
+const UdpTabs = (props) => {
+	const { value, onChange, className, menuItemProps, tabList, variant, buttonWidth } = props;
+	const classes = useStyles(props);
+	const tabContainerRef = useRef(null);
+	const innerTabContainerRef = useRef(null);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [visibleTabList, setVisibleTabList] = useState(null);
+	const [menuTabList, setMenuTabList] = useState(null);
+	const [initialTotalTabWidth, setInitialTotalTabWidth] = useState(null);
+	const [initialTabWidth, setInitialTabWidth] = useState();
+	const gapWidth = 8;
+	const open = Boolean(anchorEl);
+	const currentTabList = useMemo(() => {
+		return tabList?.map((tab, index) => ({
+			id: index,
+			...tab,
+			ref: createRef()
+		}));
+	}, [tabList]);
+	const handlePopoverClick = useCallback((event, index) => {
+		setAnchorEl(event.currentTarget);
+	}, []);
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const menuItemSelected = useMemo(() => {
+		return !!menuTabList?.find((tab) => tab?.id === value);
+	}, [value, menuTabList]);
+	const getInitialTabWidth = useCallback((tabsElements, currentTabList) => {
+		let totalTabWidth = 0;
+		let tabWidth = [];
+		if (tabsElements?.length === currentTabList?.length && !initialTotalTabWidth) {
+			for (let i = 0; i < tabsElements.length; i++) {
+				totalTabWidth += tabsElements[i].clientWidth;
+				if (variant === "block") totalTabWidth += gapWidth;
+				tabWidth[i] = tabsElements[i].clientWidth;
+			}
+			setInitialTotalTabWidth(totalTabWidth);
+			setInitialTabWidth(tabWidth);
+			return {
+				totalTabWidth,
+				tabWidth
+			};
+		}
+		return {
+			totalTabWidth: initialTotalTabWidth,
+			tabWidth: initialTabWidth
+		};
+	}, [
+		initialTabWidth,
+		initialTotalTabWidth,
+		variant
+	]);
+	const calculateHiddenTabs = useCallback(() => {
+		if (innerTabContainerRef.current) {
+			const containerWidth = innerTabContainerRef.current.clientWidth;
+			const tabsElements = Array.from(innerTabContainerRef.current.children);
+			const moreBtnWidth = 24;
+			let hiddenTabsArray = [];
+			let visibleTabsArray = Array.from(currentTabList);
+			const { totalTabWidth, tabWidth } = getInitialTabWidth(tabsElements, currentTabList);
+			if (totalTabWidth > containerWidth) {
+				let accumulatedWidth = 0;
+				for (let i = 0; i < tabWidth?.length; i++) {
+					accumulatedWidth += tabWidth[i];
+					if (variant === "block") accumulatedWidth += gapWidth;
+					if (accumulatedWidth > containerWidth - moreBtnWidth) {
+						hiddenTabsArray = Array.from(currentTabList).slice(i);
+						visibleTabsArray = Array.from(currentTabList).slice(0, i);
+						break;
+					}
+				}
+			}
+			setVisibleTabList(visibleTabsArray);
+			setMenuTabList(hiddenTabsArray);
+		}
+	}, [
+		currentTabList,
+		getInitialTabWidth,
+		variant
+	]);
+	useEffect(() => {
+		setVisibleTabList(currentTabList);
+	}, [currentTabList]);
+	useEffect(() => {
+		calculateHiddenTabs();
+		const observer = new ResizeObserver((entries) => {
+			handlePopoverClose();
+			calculateHiddenTabs();
+		});
+		if (tabContainerRef.current) observer.observe(tabContainerRef.current);
+		return () => {
+			observer.disconnect();
+		};
+	}, [calculateHiddenTabs]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.root, className),
+		ref: tabContainerRef
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: classes.tabsWrapper,
+		ref: innerTabContainerRef,
+		style: variant === "spread" ? { justifyContent: "space-between" } : null
+	}, visibleTabList?.map((item, index) => /* @__PURE__ */ React.createElement(ButtonBase, {
+		style: {
+			flex: variant === "spread" && 1,
+			width: !!buttonWidth && buttonWidth
+		},
+		key: index,
+		id: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-"),
+		udprecordid: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-")
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.tab, {
+			[classes.blockTab]: variant === "block",
+			[classes.activeTab]: value === item?.id
+		}),
+		onClick: (e) => {
+			onChange(e, item?.id);
+			if (item?.onClick) item.onClick();
+			setAnchorEl(null);
+		}
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		noWrap: true,
+		style: { fontWeight: variant === "spread" ? "bold" : "normal" }
+	}, item?.label)))), menuTabList?.length > 0 && /* @__PURE__ */ React.createElement(IconButton, {
+		onClick: handlePopoverClick,
+		className: classes.moreButton,
+		color: "primary",
+		id: "udpRecord-UdpTabs-MoreActions",
+		udprecordid: "udpRecord-UdpTabs-MoreActions"
+	}, /* @__PURE__ */ React.createElement(Badge, {
+		color: "secondary",
+		variant: "dot",
+		invisible: menuItemSelected === false
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: MoreVerticalIcon,
+		size: "medium"
+	})))), !!menuTabList?.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Popover, {
+		id: "menuTabList",
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		className: classes.popoverWrapper
+	}, menuTabList?.map((tab) => {
+		return /* @__PURE__ */ React.createElement(MenuItem, {
+			key: tab?.id,
+			id: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
+			udprecordid: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
+			onClick: (e) => {
+				if (tab?.onClick) tab.onClick();
+				if (onChange) onChange(e, tab?.id);
+				setAnchorEl(null);
+			},
+			className: clsx(classes.menuItem, className),
+			selected: tab?.id === value,
+			...menuItemProps
+		}, /* @__PURE__ */ React.createElement(Typography, null, tab?.label));
+	})))));
+};
+
+//#endregion
+export { UdpTabs as t };
+//# sourceMappingURL=UdpTabs-Bx5rfGfh.js.map

package/dist/UdpTabs-Bx5rfGfh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UdpTabs-Bx5rfGfh.js","names":[],"sources":["../src/UI/navigation/tabs/UdpTabs.jsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useRef,\n  createRef\n} from 'react';\nimport {\n  makeStyles,\n  MenuItem,\n  Typography,\n  Popover,\n  ButtonBase,\n  Badge,\n  IconButton\n} from '@material-ui/core';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\nimport clsx from 'clsx';\nimport { MoreVerticalIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    flexSkrink: 0,\n    overflow: 'hidden'\n  },\n  tabsWrapper: {\n    display: 'flex',\n    gap: (props) => (props?.variant === 'block' ? theme.spacing(1) : null),\n    flexGrow: 1\n  },\n  tab: {\n    padding: `8px 18px`,\n    flex: 1\n  },\n  blockTab: {\n    backgroundColor: theme.palette.background.paper\n  },\n  activeTab: {\n    borderBottom: (props) =>\n      props?.variant === 'block'\n        ? null\n        : `2px solid ${theme.palette.secondary.main}`,\n    backgroundColor: (props) =>\n      props?.variant === 'block' ? theme.palette.secondary.light : null,\n    color: (props) =>\n      props?.variant === 'block'\n        ? theme.palette.getContrastText(theme.palette.secondary.light)\n        : null\n  },\n  moreButton: {\n    marginTop: theme.spacing(1),\n    width: theme.spacing(1),\n    height: theme.spacing(1),\n    borderRadius: 2\n  },\n  menuItem: {\n    whiteSpace: 'normal',\n    width: (props) => (props?.menuWidth ? props?.menuWidth : '170px')\n  },\n  popoverWrapper: {\n    maxHeight: (props) =>\n      props?.menuMaxHeight ? props?.menuMaxHeight : '250px'\n  }\n}));\n\nexport const UdpTabs = (props) => {\n  const {\n    value,\n    onChange,\n    className,\n    menuItemProps,\n    tabList,\n    variant,\n    buttonWidth\n  } = props;\n  const classes = useStyles(props);\n  const tabContainerRef = useRef(null);\n  const innerTabContainerRef = useRef(null);\n  const [anchorEl, setAnchorEl] = useState(null);\n  const [visibleTabList, setVisibleTabList] = useState(null);\n  const [menuTabList, setMenuTabList] = useState(null);\n  const [initialTotalTabWidth, setInitialTotalTabWidth] = useState(null);\n  const [initialTabWidth, setInitialTabWidth] = useState();\n  const gapWidth = 8;\n  const open = Boolean(anchorEl);\n\n  const currentTabList = useMemo(() => {\n    return tabList?.map((tab, index) => ({\n      id: index,\n      ...tab,\n      ref: createRef()\n    }));\n  }, [tabList]);\n\n  const handlePopoverClick = useCallback((event, index) => {\n    setAnchorEl(event.currentTarget);\n  }, []);\n\n  const handlePopoverClose = () => {\n    setAnchorEl(null);\n  };\n\n  const menuItemSelected = useMemo(() => {\n    return !!menuTabList?.find((tab) => tab?.id === value);\n  }, [value, menuTabList]);\n\n  const getInitialTabWidth = useCallback(\n    (tabsElements, currentTabList) => {\n      let totalTabWidth = 0;\n      let tabWidth = [];\n\n      if (\n        tabsElements?.length === currentTabList?.length &&\n        !initialTotalTabWidth\n      ) {\n        for (let i = 0; i < tabsElements.length; i++) {\n          totalTabWidth += tabsElements[i].clientWidth;\n          if (variant === 'block') {\n            totalTabWidth += gapWidth;\n          }\n          tabWidth[i] = tabsElements[i].clientWidth;\n        }\n        setInitialTotalTabWidth(totalTabWidth);\n        setInitialTabWidth(tabWidth);\n\n        return { totalTabWidth, tabWidth };\n      }\n\n      return { totalTabWidth: initialTotalTabWidth, tabWidth: initialTabWidth };\n    },\n    [initialTabWidth, initialTotalTabWidth, variant]\n  );\n\n  const calculateHiddenTabs = useCallback(() => {\n    if (innerTabContainerRef.current) {\n      const containerWidth = innerTabContainerRef.current.clientWidth;\n      const tabsElements = Array.from(innerTabContainerRef.current.children);\n      const moreBtnWidth = 24;\n      let hiddenTabsArray = [];\n      let visibleTabsArray = Array.from(currentTabList);\n      const { totalTabWidth, tabWidth } = getInitialTabWidth(\n        tabsElements,\n        currentTabList\n      );\n\n      if (totalTabWidth > containerWidth) {\n        let accumulatedWidth = 0;\n        for (let i = 0; i < tabWidth?.length; i++) {\n          accumulatedWidth += tabWidth[i];\n          if (variant === 'block') {\n            accumulatedWidth += gapWidth;\n          }\n\n          if (accumulatedWidth > containerWidth - moreBtnWidth) {\n            hiddenTabsArray = Array.from(currentTabList).slice(i);\n            visibleTabsArray = Array.from(currentTabList).slice(0, i);\n            break;\n          }\n        }\n      }\n      setVisibleTabList(visibleTabsArray);\n      setMenuTabList(hiddenTabsArray);\n    }\n  }, [currentTabList, getInitialTabWidth, variant]);\n\n  useEffect(() => {\n    // initial visible tab list\n    setVisibleTabList(currentTabList);\n  }, [currentTabList]);\n\n  useEffect(() => {\n    calculateHiddenTabs();\n\n    const observer = new ResizeObserver((entries) => {\n      handlePopoverClose();\n      calculateHiddenTabs();\n    });\n\n    if (tabContainerRef.current) {\n      observer.observe(tabContainerRef.current);\n    }\n\n    // Cleanup observer on component unmount\n    return () => {\n      observer.disconnect();\n    };\n  }, [calculateHiddenTabs]);\n\n  return (\n    <div>\n      <div className={clsx(classes.root, className)} ref={tabContainerRef}>\n        <div\n          className={classes.tabsWrapper}\n          ref={innerTabContainerRef}\n          style={\n            variant === 'spread' ? { justifyContent: 'space-between' } : null\n          }\n        >\n          {visibleTabList?.map((item, index) => (\n            <ButtonBase\n              // style={variant === 'spread' ? { flex: 1 } : null}\n              style={{\n                flex: variant === 'spread' && 1,\n                width: !!buttonWidth && buttonWidth\n              }}\n              key={index}\n              id={\n                'udpRecord-UdpTabs-MenuItem-' + item?.label?.replace(/ /g, '-')\n              }\n              udprecordid={\n                'udpRecord-UdpTabs-MenuItem-' + item?.label?.replace(/ /g, '-')\n              }\n            >\n              <div\n                className={clsx(classes.tab, {\n                  [classes.blockTab]: variant === 'block',\n                  [classes.activeTab]: value === item?.id\n                })}\n                onClick={(e) => {\n                  onChange(e, item?.id);\n                  if (item?.onClick) {\n                    item.onClick();\n                  }\n                  setAnchorEl(null);\n                }}\n              >\n                <Typography\n                  noWrap\n                  style={{\n                    fontWeight: variant === 'spread' ? 'bold' : 'normal'\n                  }}\n                >\n                  {item?.label}\n                </Typography>\n              </div>\n            </ButtonBase>\n          ))}\n          {menuTabList?.length > 0 && (\n            <IconButton\n              onClick={handlePopoverClick}\n              className={classes.moreButton}\n              color='primary'\n              id='udpRecord-UdpTabs-MoreActions'\n              udprecordid='udpRecord-UdpTabs-MoreActions'\n            >\n              <Badge\n                color='secondary'\n                variant='dot'\n                invisible={menuItemSelected === false}\n              >\n                <FluentIcon component={MoreVerticalIcon} size='medium' />\n              </Badge>\n            </IconButton>\n          )}\n        </div>\n\n        {!!menuTabList?.length && (\n          <div>\n            <Popover\n              id='menuTabList'\n              open={open}\n              anchorEl={anchorEl}\n              onClose={handlePopoverClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left'\n              }}\n              transformOrigin={{\n                vertical: 'top',\n                horizontal: 'left'\n              }}\n              className={classes.popoverWrapper}\n            >\n              {menuTabList?.map((tab) => {\n                return (\n                  <MenuItem\n                    key={tab?.id}\n                    id={\n                      'udpRecord-UdpTabs-MenuItem-' +\n                      tab?.label?.replace(/ /g, '-')\n                    }\n                    udprecordid={\n                      'udpRecord-UdpTabs-MenuItem-' +\n                      tab?.label?.replace(/ /g, '-')\n                    }\n                    onClick={(e) => {\n                      if (tab?.onClick) {\n                        tab.onClick();\n                      }\n\n                      if (onChange) {\n                        onChange(e, tab?.id);\n                      }\n                      setAnchorEl(null);\n                    }}\n                    className={clsx(classes.menuItem, className)}\n                    selected={tab?.id === value}\n                    {...menuItemProps}\n                  >\n                    <Typography>{tab?.label}</Typography>\n                  </MenuItem>\n                );\n              })}\n            </Popover>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}