udp-react-enterprise-component-library 25.16.2-beta.1 → 25.16.2-beta.2

package/dist/Shell-B0HzAa4L.js

@@ -0,0 +1,268 @@
+import { t as useUser } from "./useUser--tP6DN4i.js";
+import { t as useInquiryStore } from "./inquiryStore-Kq3nlMze.js";
+import { n as useShellStore, t as useSetInitialShellVisibility } from "./shellStore-B_6P0cep.js";
+import { r as useBuildEnvironment, t as APP_RIBBON_SPACE } from "./EnvironmentRibbon-CRhI4qRC.js";
+import { t as UtilitySideBar } from "./UtilitySideBar-CTYzpnie.js";
+import { t as PageActionWrapper } from "./PageActionWrapper-BLi6xXdd.js";
+import { c as NavigationSidebar_default, r as SiteHeader_default } from "./FluentProfileMenuCard-CZ00DNnC.js";
+import { t as UtilityBar } from "./UtilityBar-XWmjM6xO.js";
+import { t as FUIAppSwitcher_default } from "./FUIAppSwitcher-Cjr-UgW4.js";
+import { t as getMenuItemsRecursively } from "./menuUtilities-8wivnoDW.js";
+import { t as ActionProvider } from "./ActionProvider-BiNM-ubX.js";
+import { t as ChatBotProvider } from "./ChatBotProvider-BE_DhBqN.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Drawer, makeStyles, useMediaQuery, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+
+//#region src/shell/Shell.jsx
+const MenuTypeEnums = {
+	Left_Menu: 1,
+	Application_Menu: 2,
+	Builders_Menu: 3,
+	Favorites_Menu: 4
+};
+const useStyles = makeStyles((theme) => ({
+	"@global": {
+		html: { minHeight: "100%" },
+		"html, body, #root": {
+			display: "flex",
+			flexDirection: "column"
+		},
+		"body, #root": { flex: 1 }
+	},
+	root: {
+		flex: 1,
+		minHeight: "100vh",
+		display: "grid",
+		gridTemplateAreas: ["sidebar header", "sidebar content"].map((line) => `"${line}"`).join(" "),
+		gridTemplateColumns: "auto 1fr",
+		gridTemplateRows: "auto 1fr"
+	},
+	header: { gridArea: "header" },
+	sidebar: { gridArea: "sidebar" },
+	content: {
+		gridArea: "content",
+		display: "flex",
+		flexDirection: "column",
+		position: "relative",
+		zIndex: 1,
+		height: ({ appRibbonSpace }) => `calc(100vh - ${56 + appRibbonSpace}px)`,
+		overflowY: "auto"
+	},
+	paper: {
+		width: "100%",
+		[theme.breakpoints.up("sm")]: { width: (props) => props.drawerWidth || 520 }
+	}
+}), { name: "Layout" });
+/**
+* Core site layout common to all pages
+*/
+const Shell = (props) => {
+	const buildEnv = useBuildEnvironment();
+	const classes = useStyles({
+		...props,
+		ribbonSpace: buildEnv ? APP_RIBBON_SPACE : 0
+	});
+	const { children, userAvatar, appContent, leftMenu, appSelectorMenus, siteName, className, navRoot, hideToggle, useMockData, mockMenus, user: passedInUser, unityUrl, expander, sidebarTitle, navMenuHoverOn = true, secondExtended, toggleOne, toggleTwo, closePrimary, closeSecondary, panelExpanded, panelExpandedSecondary, setPanelExpanded = false, setPanelExpandedSecondary = false, breadCrumbAltLabelList = [], currentLocation, utilitySidebarResizable, utilitySidebarToggleOverride, onUtilitySidebarToggleExpandClick, hideLayout = false, getAccessToken, switcherData, selectedItem, switcherWidth, languages, utilityBarHasTabsOpen, projectSwitcherColor, getWidget, isValidWidget, appSwitcherHeader, hamburgerMenuAccessRole } = props;
+	const contextUser = useUser();
+	const user = passedInUser ?? contextUser;
+	const { setGetWidget, setIsValidWidget, shellHidden } = useShellStore();
+	const [appSwitcherMobile, setAppSwitcherMobile] = useState(false);
+	const [appSwitcherDesktop, setAppSwitcherDesktop] = useState(false);
+	const { i18n } = useTranslation();
+	const inquiryTitle = useInquiryStore((state) => state.title);
+	useSetInitialShellVisibility();
+	useEffect(() => {
+		setGetWidget(getWidget);
+		return () => setGetWidget(null);
+	}, [getWidget, setGetWidget]);
+	useEffect(() => {
+		setIsValidWidget(isValidWidget);
+		return () => setIsValidWidget(null);
+	}, [isValidWidget, setIsValidWidget]);
+	const getMenuItems = useCallback((menuTypeId, menus$1) => {
+		if (!menus$1 && !useMockData) return [];
+		const foundMenus = (useMockData ? mockMenus : menus$1).filter((menu) => menu.menuTypeId === menuTypeId && menu.active);
+		if (foundMenus) return foundMenus.reduce((menuItemInstanceStructureViews, menu) => {
+			return [...menuItemInstanceStructureViews, ...menu.menuItemInstanceStructureViews];
+		}, []);
+		else return [];
+	}, [useMockData, mockMenus]);
+	const menus = useMemo(() => {
+		return getMenuItemsRecursively(getMenuItems(1, leftMenu), true, user, getAccessToken);
+	}, [
+		getMenuItems,
+		user,
+		leftMenu,
+		getAccessToken
+	]);
+	const mobile = useMediaQuery(useTheme().breakpoints.up("sm"));
+	const handleAppSwitcher = (type, bool) => {
+		if (type === "mobile") setAppSwitcherMobile(bool);
+		else setAppSwitcherDesktop(bool);
+	};
+	const builderMenu = useMemo(() => {
+		return getMenuItemsRecursively(getMenuItems(MenuTypeEnums.Builders_Menu, appSelectorMenus), true, user, getAccessToken);
+	}, [
+		getMenuItems,
+		user,
+		appSelectorMenus,
+		getAccessToken
+	]);
+	const favoriteMenu = useMemo(() => {
+		return getMenuItemsRecursively(getMenuItems(MenuTypeEnums.Favorites_Menu, appSelectorMenus), true, user, getAccessToken);
+	}, [
+		getMenuItems,
+		user,
+		appSelectorMenus,
+		getAccessToken
+	]);
+	const appMenu = useMemo(() => {
+		return getMenuItemsRecursively(getMenuItems(MenuTypeEnums.Application_Menu, appSelectorMenus), true, user, getAccessToken);
+	}, [
+		getMenuItems,
+		user,
+		appSelectorMenus,
+		getAccessToken
+	]);
+	const hideAppMenu = useMemo(() => !appSelectorMenus || hamburgerMenuAccessRole && !user?.roleNames.includes(hamburgerMenuAccessRole), [
+		user,
+		appSelectorMenus,
+		hamburgerMenuAccessRole
+	]);
+	useEffect(() => {
+		i18n.changeLanguage("en-US");
+	}, [i18n]);
+	if (hideLayout) return /* @__PURE__ */ React.createElement("div", null, children);
+	return /* @__PURE__ */ React.createElement(ChatBotProvider, null, /* @__PURE__ */ React.createElement(ActionProvider, null, /* @__PURE__ */ React.createElement("div", { className: classes.root }, !shellHidden && /* @__PURE__ */ React.createElement(SiteHeader_default, {
+		className: classes.header,
+		siteName,
+		appContent,
+		userAvatar,
+		breadCrumbRoot: navRoot,
+		setAppSwitcherOpen: (type, bool) => handleAppSwitcher(type, bool),
+		breadCrumbAltLabelList,
+		currentLocation,
+		switcherData,
+		selectedItem,
+		switcherWidth,
+		hideAppLaunch: hideAppMenu,
+		languages,
+		backgroundColor: projectSwitcherColor
+	}), /* @__PURE__ */ React.createElement("div", {
+		style: { display: "flex" },
+		className: classes.sidebar
+	}, !shellHidden && mobile && /* @__PURE__ */ React.createElement(NavigationSidebar_default, {
+		className: classes.sidebar,
+		data: menus,
+		navMenuHoverOn,
+		user,
+		useGlobalState: true
+	}), expander && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(UtilitySideBar, {
+		title: inquiryTitle || sidebarTitle,
+		resizable: utilitySidebarResizable,
+		utilitySidebarToggleOverride,
+		onUtilitySidebarToggleExpandClick,
+		sidebarHidden: shellHidden,
+		...props
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(UtilityBar, {
+		className: clsx(className),
+		gutters: false,
+		hideToggle,
+		expander,
+		secondExtended,
+		toggleOne,
+		toggleTwo,
+		closePrimary,
+		closeSecondary,
+		expanded: panelExpanded,
+		expandedSecondary: panelExpandedSecondary,
+		setExpanded: setPanelExpanded,
+		setExpandedSecondary: setPanelExpandedSecondary
+	}), /* @__PURE__ */ React.createElement(PageActionWrapper, null, children)), /* @__PURE__ */ React.createElement(Drawer, {
+		variant: "temporary",
+		anchor: "left",
+		open: appSwitcherDesktop,
+		classes: !mobile ? {} : !appSelectorMenus ? {} : { paper: classes.paper },
+		onClose: () => handleAppSwitcher("desktop", false)
+	}, mobile && appSelectorMenus && /* @__PURE__ */ React.createElement(FUIAppSwitcher_default, {
+		onClose: () => handleAppSwitcher("desktop", false),
+		favoriteMenu,
+		builderMenu,
+		appMenu,
+		unityUrl,
+		user,
+		header: appSwitcherHeader
+	}), (!mobile || mobile && !appSelectorMenus) && /* @__PURE__ */ React.createElement(NavigationSidebar_default, {
+		toggle: false,
+		className: classes.sidebar,
+		data: menus,
+		navMenuHoverOn,
+		user,
+		useGlobalState: true
+	})), /* @__PURE__ */ React.createElement(Drawer, {
+		variant: "temporary",
+		anchor: "right",
+		open: appSwitcherMobile,
+		classes: { paper: classes.paper },
+		onClose: () => handleAppSwitcher("mobile", false)
+	}, /* @__PURE__ */ React.createElement(FUIAppSwitcher_default, {
+		onClose: () => handleAppSwitcher("mobile", false),
+		favoriteMenu,
+		builderMenu,
+		appMenu,
+		unityUrl,
+		user,
+		header: appSwitcherHeader
+	})))));
+};
+Shell.propTypes = {
+	switcherData: PropTypes.array,
+	selectedItem: PropTypes.string,
+	switcherWidth: PropTypes.number,
+	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+	siteName: PropTypes.string,
+	userAvatar: PropTypes.element,
+	appContent: PropTypes.element,
+	leftMenu: PropTypes.array,
+	appSelectorMenus: PropTypes.array,
+	className: PropTypes.object,
+	navRoot: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.element,
+		PropTypes.node
+	]),
+	useMockData: PropTypes.bool,
+	mockMenus: PropTypes.array,
+	unityUrl: PropTypes.string,
+	expander: PropTypes.bool,
+	sidebarTitle: PropTypes.string,
+	navMenuHoverOn: PropTypes.bool,
+	toggleOne: PropTypes.bool,
+	toggleTwo: PropTypes.bool,
+	closePrimary: PropTypes.bool,
+	closeSecondary: PropTypes.bool,
+	panelExpanded: PropTypes.bool,
+	panelExpandedSecondary: PropTypes.bool,
+	setPanelExpanded: PropTypes.func,
+	setPanelExpandedSecondary: PropTypes.func,
+	breadCrumbAltLabelList: PropTypes.array,
+	currentLocation: PropTypes.object,
+	utilitySidebarResizable: PropTypes.bool,
+	utilitySidebarToggleOverride: PropTypes.bool,
+	onUtilitySidebarToggleExpandClick: PropTypes.func,
+	hideLayout: PropTypes.bool,
+	languages: PropTypes.arrayOf(PropTypes.object),
+	utilityBarHasTabsOpen: PropTypes.bool,
+	projectSwitcherColor: PropTypes.string,
+	getWidget: PropTypes.func,
+	isValidWidget: PropTypes.func,
+	currentTenant: PropTypes.object,
+	hamburgerMenuAccessRole: PropTypes.string
+};
+
+//#endregion
+export { Shell as t };
+//# sourceMappingURL=Shell-B0HzAa4L.js.map

package/dist/Shell-B0HzAa4L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shell-B0HzAa4L.js","names":["menus","SiteHeader","NavigationSidebar","FUIAppSwitcher"],"sources":["../src/shell/Shell.jsx"],"sourcesContent":["import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { makeStyles, Drawer, useMediaQuery, useTheme } from '@material-ui/core';\nimport NavigationSidebar from './ui/NavigationSidebar';\nimport SiteHeader from './ui/SiteHeader';\nimport { UtilityBar } from '../UI/utilityDisplay/UtilityBar';\nimport { useTranslation } from 'react-i18next';\nimport FUIAppSwitcher from './ui/appSwitcher/FUIAppSwitcher';\nimport { getMenuItemsRecursively } from '../utilities/menus/menuUtilities';\nimport clsx from 'clsx';\nimport { UtilitySideBar } from '../UI/utilityDisplay/UtilitySideBar';\nimport PropTypes from 'prop-types';\nimport { useUser } from '../utilities/auth/useUser';\nimport { ActionProvider } from '../utilities/provider/ActionProvider';\nimport { PageActionWrapper } from '../actions/PageActionWrapper';\nimport { useInquiryStore } from '../stores/inquiryStore';\nimport {\n  useSetInitialShellVisibility,\n  useShellStore\n} from '../stores/shellStore';\n\nimport { useBuildEnvironment, APP_RIBBON_SPACE } from './ui/EnvironmentRibbon';\nimport { ChatBotProvider } from '../utilities/chatBot/ChatBotProvider';\n\nconst MenuTypeEnums = {\n  Left_Menu: 1,\n  Application_Menu: 2,\n  Builders_Menu: 3,\n  Favorites_Menu: 4\n};\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    '@global': {\n      html: {\n        minHeight: '100%'\n      },\n      'html, body, #root': {\n        display: 'flex',\n        flexDirection: 'column'\n      },\n      'body, #root': {\n        flex: 1\n      }\n    },\n    root: {\n      flex: 1,\n      minHeight: '100vh',\n      display: 'grid',\n      gridTemplateAreas: ['sidebar header', 'sidebar content']\n        .map((line) => `\"${line}\"`)\n        .join(' '),\n      gridTemplateColumns: 'auto 1fr',\n      gridTemplateRows: 'auto 1fr'\n    },\n    header: {\n      gridArea: 'header'\n    },\n    sidebar: {\n      gridArea: 'sidebar'\n    },\n    content: {\n      gridArea: 'content',\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'relative',\n      zIndex: 1,\n      height: ({ appRibbonSpace }) => `calc(100vh - ${56 + appRibbonSpace}px)`,\n      overflowY: 'auto'\n    },\n    paper: {\n      width: '100%',\n      [theme.breakpoints.up('sm')]: {\n        width: (props) => props.drawerWidth || 520\n      }\n    }\n  }),\n  { name: 'Layout' }\n);\n\n/**\n * Core site layout common to all pages\n */\nexport const Shell = (props) => {\n  const buildEnv = useBuildEnvironment();\n  const classes = useStyles({\n    ...props,\n    ribbonSpace: buildEnv ? APP_RIBBON_SPACE : 0\n  });\n  const {\n    children,\n    userAvatar,\n    appContent,\n    leftMenu,\n    appSelectorMenus,\n    siteName,\n    className,\n    navRoot,\n    hideToggle,\n    useMockData,\n    mockMenus,\n    user: passedInUser,\n    unityUrl,\n    expander,\n    sidebarTitle,\n    navMenuHoverOn = true,\n    secondExtended,\n    toggleOne,\n    toggleTwo,\n    closePrimary,\n    closeSecondary,\n    panelExpanded,\n    panelExpandedSecondary,\n    setPanelExpanded = false,\n    setPanelExpandedSecondary = false,\n    breadCrumbAltLabelList = [],\n    currentLocation,\n    utilitySidebarResizable,\n    utilitySidebarToggleOverride,\n    onUtilitySidebarToggleExpandClick,\n    hideLayout = false,\n    getAccessToken,\n    switcherData,\n    selectedItem,\n    switcherWidth,\n    languages,\n    utilityBarHasTabsOpen,\n    projectSwitcherColor,\n    getWidget,\n    isValidWidget,\n    appSwitcherHeader,\n    hamburgerMenuAccessRole\n  } = props;\n  const contextUser = useUser();\n  const user = passedInUser ?? contextUser;\n  const { setGetWidget, setIsValidWidget, shellHidden } = useShellStore();\n  const [appSwitcherMobile, setAppSwitcherMobile] = useState(false);\n  const [appSwitcherDesktop, setAppSwitcherDesktop] = useState(false);\n  const { i18n } = useTranslation();\n  const inquiryTitle = useInquiryStore((state) => state.title);\n  useSetInitialShellVisibility();\n\n  useEffect(() => {\n    setGetWidget(getWidget);\n    return () => setGetWidget(null);\n  }, [getWidget, setGetWidget]);\n\n  useEffect(() => {\n    setIsValidWidget(isValidWidget);\n    return () => setIsValidWidget(null);\n  }, [isValidWidget, setIsValidWidget]);\n\n  const getMenuItems = useCallback(\n    (menuTypeId, menus) => {\n      if (!menus && !useMockData) {\n        return [];\n      }\n      const menusToFilter = useMockData ? mockMenus : menus;\n\n      const foundMenus = menusToFilter.filter(\n        (menu) => menu.menuTypeId === menuTypeId && menu.active\n      );\n\n      if (foundMenus) {\n        return foundMenus.reduce((menuItemInstanceStructureViews, menu) => {\n          return [\n            ...menuItemInstanceStructureViews,\n            ...menu.menuItemInstanceStructureViews\n          ];\n        }, []);\n      } else {\n        return [];\n      }\n    },\n    [useMockData, mockMenus]\n  );\n\n  const menus = useMemo(() => {\n    const menuItems = getMenuItems(1, leftMenu);\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, leftMenu, getAccessToken]);\n\n  const theme = useTheme();\n  const mobile = useMediaQuery(theme.breakpoints.up('sm'));\n\n  const handleAppSwitcher = (type, bool) => {\n    if (type === 'mobile') {\n      setAppSwitcherMobile(bool);\n    } else {\n      setAppSwitcherDesktop(bool);\n    }\n  };\n\n  const builderMenu = useMemo(() => {\n    const menuItems = getMenuItems(\n      MenuTypeEnums.Builders_Menu,\n      appSelectorMenus\n    );\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, appSelectorMenus, getAccessToken]);\n\n  const favoriteMenu = useMemo(() => {\n    const menuItems = getMenuItems(\n      MenuTypeEnums.Favorites_Menu,\n      appSelectorMenus\n    );\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, appSelectorMenus, getAccessToken]);\n\n  const appMenu = useMemo(() => {\n    const menuItems = getMenuItems(\n      MenuTypeEnums.Application_Menu,\n      appSelectorMenus\n    );\n    return getMenuItemsRecursively(menuItems, true, user, getAccessToken);\n  }, [getMenuItems, user, appSelectorMenus, getAccessToken]);\n\n  const hideAppMenu = useMemo(\n    () =>\n      !appSelectorMenus ||\n      (hamburgerMenuAccessRole &&\n        !user?.roleNames.includes(hamburgerMenuAccessRole)),\n    [user, appSelectorMenus, hamburgerMenuAccessRole]\n  );\n\n  useEffect(() => {\n    i18n.changeLanguage('en-US');\n  }, [i18n]);\n\n  if (hideLayout) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <ChatBotProvider>\n      <ActionProvider>\n        <div className={classes.root}>\n          {!shellHidden && (\n            <SiteHeader\n              className={classes.header}\n              siteName={siteName}\n              appContent={appContent}\n              userAvatar={userAvatar}\n              breadCrumbRoot={navRoot}\n              setAppSwitcherOpen={(type, bool) => handleAppSwitcher(type, bool)}\n              breadCrumbAltLabelList={breadCrumbAltLabelList}\n              currentLocation={currentLocation}\n              switcherData={switcherData}\n              selectedItem={selectedItem}\n              switcherWidth={switcherWidth}\n              hideAppLaunch={hideAppMenu}\n              languages={languages}\n              backgroundColor={projectSwitcherColor}\n            />\n          )}\n\n          <div style={{ display: 'flex' }} className={classes.sidebar}>\n            {!shellHidden && mobile && (\n              <NavigationSidebar\n                className={classes.sidebar}\n                data={menus}\n                navMenuHoverOn={navMenuHoverOn}\n                user={user}\n                useGlobalState={true}\n              />\n            )}\n            {expander && (\n              <div>\n                <UtilitySideBar\n                  title={inquiryTitle || sidebarTitle}\n                  resizable={utilitySidebarResizable}\n                  utilitySidebarToggleOverride={utilitySidebarToggleOverride}\n                  onUtilitySidebarToggleExpandClick={\n                    onUtilitySidebarToggleExpandClick\n                  }\n                  sidebarHidden={shellHidden}\n                  {...props}\n                />\n              </div>\n            )}\n          </div>\n\n          <div className={classes.content}>\n            <UtilityBar\n              className={clsx(className)}\n              gutters={false}\n              hideToggle={hideToggle}\n              expander={expander}\n              secondExtended={secondExtended}\n              toggleOne={toggleOne}\n              toggleTwo={toggleTwo}\n              closePrimary={closePrimary}\n              closeSecondary={closeSecondary}\n              expanded={panelExpanded}\n              expandedSecondary={panelExpandedSecondary}\n              setExpanded={setPanelExpanded}\n              setExpandedSecondary={setPanelExpandedSecondary}\n            />\n            <PageActionWrapper>{children}</PageActionWrapper>\n          </div>\n          <Drawer\n            variant='temporary'\n            anchor='left'\n            open={appSwitcherDesktop}\n            classes={\n              !mobile ? {} : !appSelectorMenus ? {} : { paper: classes.paper }\n            }\n            onClose={() => handleAppSwitcher('desktop', false)}\n          >\n            {mobile && appSelectorMenus && (\n              <FUIAppSwitcher\n                onClose={() => handleAppSwitcher('desktop', false)}\n                favoriteMenu={favoriteMenu}\n                builderMenu={builderMenu}\n                appMenu={appMenu}\n                unityUrl={unityUrl}\n                user={user}\n                header={appSwitcherHeader}\n              />\n            )}\n            {(!mobile || (mobile && !appSelectorMenus)) && (\n              <NavigationSidebar\n                toggle={false}\n                className={classes.sidebar}\n                data={menus}\n                navMenuHoverOn={navMenuHoverOn}\n                user={user}\n                useGlobalState={true}\n              />\n            )}\n          </Drawer>\n\n          <Drawer\n            variant='temporary'\n            anchor='right'\n            open={appSwitcherMobile}\n            classes={{ paper: classes.paper }}\n            onClose={() => handleAppSwitcher('mobile', false)}\n          >\n            <FUIAppSwitcher\n              onClose={() => handleAppSwitcher('mobile', false)}\n              favoriteMenu={favoriteMenu}\n              builderMenu={builderMenu}\n              appMenu={appMenu}\n              unityUrl={unityUrl}\n              user={user}\n              header={appSwitcherHeader}\n            />\n          </Drawer>\n        </div>\n      </ActionProvider>\n    </ChatBotProvider>\n  );\n};\n\nShell.propTypes = {\n  /**\n   * The newest propTypes have been added but older ones are missing @todo: add missing propTypes for Shell.\n   */\n\n  /**\n   * The array used to map for label and functions to list items.\n   */\n  switcherData: PropTypes.array,\n  /**\n   * The active label displayed.\n   */\n  selectedItem: PropTypes.string,\n  /**\n   *  Provides a method set the selector width. Default is 100.\n   */\n  switcherWidth: PropTypes.number,\n  /**\n   * Children nodes\n   */\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node\n  ]).isRequired,\n\n  /**\n   * Name of site\n   */\n  siteName: PropTypes.string,\n\n  /**\n   * Component to render for the user Avatar\n   */\n  userAvatar: PropTypes.element,\n\n  appContent: PropTypes.element,\n\n  leftMenu: PropTypes.array,\n\n  appSelectorMenus: PropTypes.array,\n\n  className: PropTypes.object,\n\n  navRoot: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),\n\n  /**\n   * Should the shell use mock data\n   */\n  useMockData: PropTypes.bool,\n\n  mockMenus: PropTypes.array,\n\n  unityUrl: PropTypes.string,\n\n  expander: PropTypes.bool,\n\n  sidebarTitle: PropTypes.string,\n\n  navMenuHoverOn: PropTypes.bool,\n\n  toggleOne: PropTypes.bool,\n\n  toggleTwo: PropTypes.bool,\n\n  closePrimary: PropTypes.bool,\n\n  closeSecondary: PropTypes.bool,\n\n  panelExpanded: PropTypes.bool,\n\n  panelExpandedSecondary: PropTypes.bool,\n\n  setPanelExpanded: PropTypes.func,\n\n  setPanelExpandedSecondary: PropTypes.func,\n\n  breadCrumbAltLabelList: PropTypes.array,\n\n  currentLocation: PropTypes.object,\n\n  utilitySidebarResizable: PropTypes.bool,\n\n  utilitySidebarToggleOverride: PropTypes.bool,\n\n  onUtilitySidebarToggleExpandClick: PropTypes.func,\n\n  hideLayout: PropTypes.bool,\n\n  languages: PropTypes.arrayOf(PropTypes.object),\n\n  utilityBarHasTabsOpen: PropTypes.bool,\n  /**\n   * Passes the background color on the project switcher (default: theme secondary)\n   */\n  projectSwitcherColor: PropTypes.string,\n  getWidget: PropTypes.func,\n  isValidWidget: PropTypes.func,\n  currentTenant: PropTypes.object,\n  hamburgerMenuAccessRole: PropTypes.string\n};\n"],"mappings":"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"}

package/dist/ShortcutContentFinder-DZozQTnF.js

@@ -0,0 +1,123 @@
+import { t as useUser } from "./useUser--tP6DN4i.js";
+import { N as UdpEnums, a as EntityAttributeEnums, d as LogicalSearchOperatorEnums } from "./unitySystemEnums-C3qeqk7V.js";
+import { n as useShellStore } from "./shellStore-B_6P0cep.js";
+import { t as useActionState } from "./useActions-V6oRdjcy.js";
+import { r as getSearchObject } from "./SearchUtilities-COTnyxTJ.js";
+import { a as getBaseMethod, t as executeQueryAdHoc } from "./methodUtils-DwkBQ6fj.js";
+import { t as useTenantStore } from "./tenantStore-BCdG8bEr.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Chip, Divider, List, ListItem, ListItemText, TextField, makeStyles } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+
+//#region src/udp/ShortcutContent/ListSearch.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	input: {
+		height: 34,
+		padding: 0
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 },
+	chipContainer: { marginRight: theme.spacing(1) },
+	divider: { width: "100%" }
+}));
+const ListSearch = (props) => {
+	const { items, onClick, contentKey = "content", tagKey = "code", includeTags = "false", searchLabel = "Search", maxHeight = 400 } = props;
+	const [searchText, setSearchText] = useState("");
+	const classes = useStyles(props);
+	const { t } = useTranslation();
+	const filteredItems = useMemo(() => {
+		if (!items.length) return [];
+		return items?.filter((item) => {
+			if (item[contentKey]?.toLowerCase().includes(searchText?.toLowerCase())) return true;
+			if (includeTags && item[tagKey]?.toLowerCase().includes(searchText?.toLowerCase())) return true;
+			return false;
+		});
+	}, [
+		searchText,
+		items,
+		contentKey,
+		tagKey,
+		includeTags
+	]);
+	const handleSearchChange = (event) => {
+		setSearchText(event.target.value);
+	};
+	const handleOnClick = useCallback((value) => {
+		if (onClick) onClick(value);
+	}, [onClick]);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(TextField, {
+		label: t(`${searchLabel}`),
+		value: searchText,
+		onChange: handleSearchChange,
+		fullWidth: true,
+		variant: "outlined",
+		size: "small",
+		margin: "dense",
+		InputProps: { classes: {
+			root: classes?.input,
+			input: classes?.formTextInput
+		} },
+		InputLabelProps: { classes: { root: classes?.labelRoot } }
+	}), /* @__PURE__ */ React.createElement(List, { style: {
+		maxHeight,
+		overflow: "auto",
+		overflowX: "hidden"
+	} }, filteredItems.map((item, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		onClick: () => handleOnClick(item[contentKey]),
+		key: index,
+		disableGutters: true
+	}, includeTags && /* @__PURE__ */ React.createElement("div", { className: classes.chipContainer }, /* @__PURE__ */ React.createElement(Chip, {
+		label: item[tagKey],
+		color: "primary",
+		variant: "outlined"
+	})), /* @__PURE__ */ React.createElement(ListItemText, { primary: item[contentKey] })), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }))))));
+};
+
+//#endregion
+//#region src/udp/ShortcutContent/ShortcutContentFinder.jsx
+const ShortcutContentFinder = (props) => {
+	const { onSelect } = props;
+	const [shortcutContentOptions, setShortCutContentOptions] = useState([]);
+	const { catalogPromotedEntities } = useActionState();
+	const shellHidden = useShellStore((state) => state.shellHidden);
+	const user = useUser();
+	const isProductTenant = useTenantStore((state) => state.isProductTenant);
+	const shortcutContentSearchApiMethod = useMemo(() => {
+		return getBaseMethod(UdpEnums.Udp_Shortcut_Content, "unityBaseSearchMethod", catalogPromotedEntities);
+	}, [catalogPromotedEntities]);
+	useEffect(() => {
+		const getTemplateOptions = async () => {
+			let options = [];
+			if (shortcutContentSearchApiMethod) {
+				const filterElements = [];
+				if (isProductTenant) filterElements.push({
+					searchField: EntityAttributeEnums.Is_Product_ShortcutContent,
+					searchValue: true,
+					searchOperator: "="
+				});
+				const shortcutContentResponse = await executeQueryAdHoc({ data: getSearchObject(filterElements, LogicalSearchOperatorEnums.Or, 200, true) }, shortcutContentSearchApiMethod.apiMethodId);
+				if (shortcutContentResponse?.status === 200) options = shortcutContentResponse.data?.pageList;
+			}
+			setShortCutContentOptions(options);
+		};
+		getTemplateOptions();
+	}, [
+		shortcutContentSearchApiMethod,
+		setShortCutContentOptions,
+		user,
+		isProductTenant
+	]);
+	return /* @__PURE__ */ React.createElement(ListSearch, {
+		items: shortcutContentOptions,
+		onClick: onSelect,
+		searchLabel: "Filter Shortcuts",
+		includeTags: true,
+		maxHeight: `calc(100vh - ${shellHidden ? "614px" : "669px"})`
+	});
+};
+
+//#endregion
+export { ListSearch as n, ShortcutContentFinder as t };
+//# sourceMappingURL=ShortcutContentFinder-DZozQTnF.js.map

package/dist/ShortcutContentFinder-DZozQTnF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutContentFinder-DZozQTnF.js","names":[],"sources":["../src/udp/ShortcutContent/ListSearch.jsx","../src/udp/ShortcutContent/ShortcutContentFinder.jsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport {\n  TextField,\n  List,\n  ListItem,\n  ListItemText,\n  makeStyles,\n  Chip,\n  Divider\n} from '@material-ui/core';\nimport { useTranslation } from 'react-i18next';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  input: {\n    height: 34,\n    padding: 0\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  },\n  chipContainer: {\n    marginRight: theme.spacing(1)\n  },\n  divider: { width: '100%' }\n}));\n\nexport const ListSearch = (props) => {\n  const {\n    items,\n    onClick,\n    contentKey = 'content',\n    tagKey = 'code',\n    includeTags = 'false',\n    searchLabel = 'Search',\n    maxHeight = 400\n  } = props;\n  const [searchText, setSearchText] = useState('');\n  const classes = useStyles(props);\n\n  const { t } = useTranslation();\n\n  const filteredItems = useMemo(() => {\n    if (!items.length) {\n      return [];\n    }\n    return items?.filter((item) => {\n      if (item[contentKey]?.toLowerCase().includes(searchText?.toLowerCase())) {\n        return true;\n      }\n      if (\n        includeTags &&\n        item[tagKey]?.toLowerCase().includes(searchText?.toLowerCase())\n      ) {\n        return true;\n      }\n      return false;\n    });\n  }, [searchText, items, contentKey, tagKey, includeTags]);\n\n  const handleSearchChange = (event) => {\n    setSearchText(event.target.value);\n  };\n\n  const handleOnClick = useCallback(\n    (value) => {\n      if (onClick) {\n        onClick(value);\n      }\n    },\n    [onClick]\n  );\n\n  return (\n    <div className={classes.root}>\n      <TextField\n        label={t(`${searchLabel}`)}\n        value={searchText}\n        onChange={handleSearchChange}\n        fullWidth\n        variant='outlined'\n        size='small'\n        margin='dense'\n        InputProps={{\n          classes: {\n            root: classes?.input,\n            input: classes?.formTextInput\n          }\n        }}\n        InputLabelProps={{\n          classes: {\n            root: classes?.labelRoot\n          }\n        }}\n      />\n      <List\n        style={{ maxHeight: maxHeight, overflow: 'auto', overflowX: 'hidden' }}\n      >\n        {filteredItems.map((item, index) => (\n          <>\n            <ListItem\n              button\n              onClick={() => handleOnClick(item[contentKey])}\n              key={index}\n              disableGutters\n            >\n              {includeTags && (\n                <div className={classes.chipContainer}>\n                  <Chip\n                    label={item[tagKey]}\n                    color='primary'\n                    variant='outlined'\n                  />\n                </div>\n              )}\n              <ListItemText primary={item[contentKey]} />\n            </ListItem>\n            <div className={classes.divider}>\n              <Divider orientation='horizontal' />\n            </div>\n          </>\n        ))}\n      </List>\n    </div>\n  );\n};\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { ListSearch } from './ListSearch';\nimport {\n  EntityAttributeEnums,\n  LogicalSearchOperatorEnums,\n  UdpEnums\n} from '../../enums/unitySystemEnums';\nimport { getBaseMethod, executeQueryAdHoc } from '../utilities/methodUtils';\nimport { useActionState } from '../../hooks/useActions';\nimport { useShellStore } from '../../stores/shellStore';\nimport { useUser } from '../../utilities/auth/useUser';\nimport { getSearchObject } from '../../utilities/search/SearchUtilities';\nimport { useTenantStore } from '../../stores/tenantStore';\n\nexport const ShortcutContentFinder = (props) => {\n  const { onSelect } = props;\n  const [shortcutContentOptions, setShortCutContentOptions] = useState([]);\n  const actionState = useActionState();\n  const { catalogPromotedEntities } = actionState;\n  const shellHidden = useShellStore((state) => state.shellHidden);\n  const user = useUser();\n  const isProductTenant = useTenantStore((state) => state.isProductTenant);\n\n  const shortcutContentSearchApiMethod = useMemo(() => {\n    return getBaseMethod(\n      UdpEnums.Udp_Shortcut_Content,\n      'unityBaseSearchMethod',\n      catalogPromotedEntities\n    );\n  }, [catalogPromotedEntities]);\n\n  useEffect(() => {\n    const getTemplateOptions = async () => {\n      let options = [];\n      if (shortcutContentSearchApiMethod) {\n        const filterElements = [];\n        if (isProductTenant) {\n          filterElements.push({\n            searchField: EntityAttributeEnums.Is_Product_ShortcutContent,\n            searchValue: true,\n            searchOperator: '='\n          });\n        }\n        const searchObject = getSearchObject(\n          filterElements,\n          LogicalSearchOperatorEnums.Or,\n          200,\n          true\n        );\n        const data = { data: searchObject };\n        const shortcutContentResponse = await executeQueryAdHoc(\n          data,\n          shortcutContentSearchApiMethod.apiMethodId\n        );\n        if (shortcutContentResponse?.status === 200) {\n          options = shortcutContentResponse.data?.pageList;\n        }\n      }\n\n      setShortCutContentOptions(options);\n    };\n    getTemplateOptions();\n  }, [\n    shortcutContentSearchApiMethod,\n    setShortCutContentOptions,\n    user,\n    isProductTenant\n  ]);\n\n  return (\n    <ListSearch\n      items={shortcutContentOptions}\n      onClick={onSelect}\n      searchLabel='Filter Shortcuts'\n      includeTags={true}\n      maxHeight={`calc(100vh - ${shellHidden ? '614px' : '669px'})`}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/SideBarTemplate-DQnJKwXP.js

@@ -0,0 +1,128 @@
+import { t as FluentIconButton } from "./FluentIconButton-AN9tZKVl.js";
+import { t as AmbientCard } from "./AmbientCard-Bl34OCRH.js";
+import { n as GridUnit, r as getRatio, t as GridRow } from "./GridRow-CfCj0Upc.js";
+import React, { Children, useState } from "react";
+import { Box, Fade, makeStyles, useTheme } from "@material-ui/core";
+import { ChevronLeftIcon, ChevronRightIcon } from "@fluentui/react-icons";
+
+//#region src/layout/GridGroup.jsx
+const GridGroup = ({ col1, col2, col3, col4, col5, col6, ratio, highlight }) => {
+	const theme = useTheme();
+	const cnt = Children.toArray(col1).length;
+	const cnt2 = Children.toArray(col2).length;
+	const cnt3 = Children.toArray(col3).length;
+	const cnt4 = Children.toArray(col4).length;
+	const cnt5 = Children.toArray(col5).length;
+	const cnt6 = Children.toArray(col6).length;
+	const number = cnt + cnt2 + cnt3 + cnt4 + cnt5 + cnt6;
+	const width = theme.spacing(154) / number / 8;
+	const ratioArr = getRatio(ratio);
+	const staticDisplay = /* @__PURE__ */ React.createElement(GridRow, { highlight }, number >= 1 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col1), number >= 2 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col2), number >= 3 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col3), number >= 4 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col4), number >= 5 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col5), number >= 6 && /* @__PURE__ */ React.createElement(GridUnit, {
+		width: theme.spacing(width),
+		columnPadding: 8 * number - 8,
+		r1: ratioArr[0],
+		r2: ratioArr[1]
+	}, col6));
+	return /* @__PURE__ */ React.createElement("div", null, " ", staticDisplay, " ");
+};
+
+//#endregion
+//#region src/layout/HeaderLayout.jsx
+const HeaderLayout = ({ children }) => {
+	return /* @__PURE__ */ React.createElement(AmbientCard, {
+		style: {
+			marginTop: 0,
+			padding: 0
+		},
+		fullWidth: true
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column"
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		style: { padding: "0px" }
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		style: {
+			padding: "0px",
+			width: "100%",
+			gap: "10px"
+		}
+	}, children))));
+};
+
+//#endregion
+//#region src/layout/templates/SideBarTemplate.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		width: "100%",
+		position: "relative"
+	},
+	column: {
+		display: "flex",
+		flexDirection: "row",
+		flex: 1
+	},
+	content: { flex: 1 },
+	sideBar: {
+		height: "100vh",
+		background: theme.palette.primary.light
+	}
+}));
+const SideBarTemplate = ({ children, sidebar }) => {
+	const classes = useStyles();
+	const [open, setOpen] = useState(true);
+	const toggleSidebar = () => {
+		setOpen(!open);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, children), /* @__PURE__ */ React.createElement("div", { style: {
+		position: "absolute",
+		top: 0,
+		right: open ? 300 : 0
+	} }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: open ? ChevronRightIcon : ChevronLeftIcon,
+		onClick: toggleSidebar
+	})), open && /* @__PURE__ */ React.createElement(Fade, {
+		in: open,
+		timeout: {
+			enter: 1e3,
+			exit: 1e3
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.sideBar }, sidebar))));
+};
+
+//#endregion
+export { HeaderLayout as n, GridGroup as r, SideBarTemplate as t };
+//# sourceMappingURL=SideBarTemplate-DQnJKwXP.js.map

package/dist/SideBarTemplate-DQnJKwXP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarTemplate-DQnJKwXP.js","names":[],"sources":["../src/layout/GridGroup.jsx","../src/layout/HeaderLayout.jsx","../src/layout/templates/SideBarTemplate.jsx"],"sourcesContent":["import React, { Children } from 'react';\nimport { useTheme } from '@material-ui/core';\nimport { GridUnit } from './GridUnit';\nimport { GridRow } from './GridRow';\nimport { getRatio } from './getRatio';\n\nexport const GridGroup = ({\n  col1,\n  col2,\n  col3,\n  col4,\n  col5,\n  col6,\n  ratio,\n  highlight\n}) => {\n  const theme = useTheme();\n\n  const cnt = Children.toArray(col1).length;\n  const cnt2 = Children.toArray(col2).length;\n  const cnt3 = Children.toArray(col3).length;\n  const cnt4 = Children.toArray(col4).length;\n  const cnt5 = Children.toArray(col5).length;\n  const cnt6 = Children.toArray(col6).length;\n\n  const number = cnt + cnt2 + cnt3 + cnt4 + cnt5 + cnt6;\n  const width = theme.spacing(154) / number / 8;\n\n  const ratioArr = getRatio(ratio);\n  const staticDisplay = (\n    <GridRow highlight={highlight}>\n      {number >= 1 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col1}\n        </GridUnit>\n      )}\n\n      {number >= 2 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col2}\n        </GridUnit>\n      )}\n      {number >= 3 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col3}\n        </GridUnit>\n      )}\n      {number >= 4 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col4}\n        </GridUnit>\n      )}\n      {number >= 5 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col5}\n        </GridUnit>\n      )}\n      {number >= 6 && (\n        <GridUnit\n          width={theme.spacing(width)}\n          columnPadding={8 * number - 8}\n          r1={ratioArr[0]}\n          r2={ratioArr[1]}\n        >\n          {col6}\n        </GridUnit>\n      )}\n    </GridRow>\n  );\n\n  return <div> {staticDisplay} </div>;\n};\n","import React from 'react';\nimport { AmbientCard } from '../UI/surfaces/cards/AmbientCard';\nimport { Box } from '@material-ui/core';\n\nexport const HeaderLayout = ({ children }) => {\n  return (\n    <AmbientCard style={{ marginTop: 0, padding: 0 }} fullWidth>\n      <Box display=\"flex\" flexDirection=\"column\">\n        <Box\n          display=\"flex\"\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          style={{\n            padding: '0px',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            style={{\n              padding: '0px',\n              width: '100%',\n              gap: '10px',\n            }}\n          >\n            {children}\n          </Box>\n        </Box>\n      </Box>\n    </AmbientCard>\n  );\n};\n","import React, { useState } from 'react'\nimport { makeStyles, Fade } from '@material-ui/core'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: '100%',\n    position: 'relative'\n  },\n  column: {\n    display: 'flex',\n    flexDirection: 'row',\n    flex: 1\n  },\n  content: {\n    flex: 1\n  },\n  sideBar: {\n    height: '100vh',\n    background: theme.palette.primary.light\n  }\n}))\n\nexport const SideBarTemplate = ({ children, sidebar }) => {\n  const classes = useStyles()\n\n  const [open, setOpen] = useState(true)\n\n  const toggleSidebar = () => {\n    setOpen(!open)\n  }\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.column}>\n        <div className={classes.content}>{children}</div>\n\n        <div style={{ position: 'absolute', top: 0, right: open ? 300 : 0 }}>\n          <FluentIconButton\n            color='primary'\n            icon={open ? ChevronRightIcon : ChevronLeftIcon}\n            onClick={toggleSidebar}\n          />\n        </div>\n\n        {open && (\n          <Fade in={open} timeout={{ enter: 1000, exit: 1000 }}>\n            <div className={classes.sideBar}>{sidebar}</div>\n          </Fade>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}