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

package/dist/UserProfileMenuWrapper-s_c1h1nw.js

@@ -0,0 +1,215 @@
+import { ConfigService } from "./configService/index.js";
+import { i as storeTenant, t as clearStoredTenant } from "./UnitySessionStorage-BAkY2Zs1.js";
+import { t as useUser } from "./useUser-B_mCveqm.js";
+import { n as useDevicePixelRatio, t as useGravatar } from "./useGravatar-VGvEtaNY.js";
+import { a as TenantSelect, r as useUserActions } from "./TenantProvider-Bx_F9FQi.js";
+import { t as clearStoredPath } from "./LocalRedirectUrlStorage-CoKXrY8k.js";
+import { t as useTenant } from "./useTenant-6MaSjnVs.js";
+import { t as clearStoredExternalPath } from "./ExternalRedirectUrlStorage-Bmxr_Pcy.js";
+import { n as useSingleLogout } from "./useAccessToken-Cs77MTA6.js";
+import React, { cloneElement, forwardRef, useCallback } from "react";
+import { Avatar, Button, CardContent, IconButton, Menu, Typography, makeStyles } from "@material-ui/core";
+import { Link as Link$1, useHistory } from "react-router-dom";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks";
+
+//#region src/shell/ui/profile/MenuOpener.jsx
+/**
+* Helper to handle open a menu when a button is clicked
+*/
+const MenuOpener = ({ MenuComponent = Menu, name, button, menuProps, children }) => {
+	const popupState = usePopupState({
+		variant: "popover",
+		popupId: "useId(name)"
+	});
+	const { close } = popupState;
+	const click = useCallback((e) => {
+		const isButton = e.target.matches("a, button, input[type=\"button\"], input[type=\"image\"], [role=\"button\"], [role=\"link\"], a *, button *, [role=\"button\"] *, [role=\"link\"] *");
+		const isDropdownButton = e.target.matches(".MuiAutocomplete-endAdornment *");
+		if (isButton && !isDropdownButton) close();
+	}, [close]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, cloneElement(button, bindTrigger(popupState)), /* @__PURE__ */ React.createElement(MenuComponent, {
+		...menuProps,
+		...bindMenu(popupState),
+		onClick: click
+	}, children));
+};
+
+//#endregion
+//#region src/shell/ui/profile/UserAvatar.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {},
+	default: {},
+	toolbar: {
+		width: 32,
+		height: 32
+	},
+	large: {
+		width: 80,
+		height: 80
+	}
+}), { name: "UserAvatar" });
+/**
+* Inteligent user Avatar element
+*
+* - Loads a Gravatar based on the email if one exists
+* - Falls back to a text avatar while loading and when a Gravatar does not exist
+* - Automatically chooses image size based on size prop and device pixel density (and updates if device pixel density changes)
+*/
+const UserAvatar = (props) => {
+	const classes = useStyles$2(props);
+	const { name, email, size = "default", className, ...other } = props;
+	const dppx = useDevicePixelRatio();
+	const avatar = useGravatar(email, { size: ({
+		toolbar: 32,
+		large: 80
+	}[size] || 40) * dppx });
+	return /* @__PURE__ */ React.createElement(Avatar, {
+		alt: name,
+		"aria-label": `${name}'s avatar`,
+		...other,
+		className: clsx(className, classes[size]),
+		src: avatar
+	}, name?.trim()?.charAt(0) || "?");
+};
+
+//#endregion
+//#region src/shell/ui/profile/FluentProfileMenuCard.tsx
+const useHistory$1 = useHistory;
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		"& > *": { margin: theme.spacing(1) },
+		"&:last-child": { paddingBottom: theme.spacing(2) }
+	},
+	cardHeader: {
+		display: "flex",
+		marginBottom: theme.spacing(3)
+	},
+	currentTenant: {
+		margin: "auto",
+		width: "85%",
+		marginBottom: theme.spacing(4)
+	},
+	buttonGroup: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center"
+	},
+	basicInfoContainer: { marginLeft: theme.spacing(1) },
+	basicInfo: { paddingLeft: theme.spacing(1) },
+	divider: { height: theme.spacing(3) },
+	avatar: { fontSize: 40 }
+}));
+const FluentProfileMenuCard = forwardRef((props, ref) => {
+	const classes = useStyles$1();
+	const devUnityUrl = "https://unity-dev.univerus.com/";
+	const { userTenants, currentTenant, user, logout, unityUrl = devUnityUrl } = props;
+	const history = useHistory$1();
+	const redirectToHome = useCallback(() => history.push("/"), [history]);
+	const { t } = useTranslation();
+	const { changeTenant } = useUserActions();
+	const handleTenantChange = useCallback((tenant) => {
+		storeTenant(tenant.tenantId);
+		changeTenant(tenant.tenantId);
+		redirectToHome();
+	}, [changeTenant, redirectToHome]);
+	if (!user) return null;
+	return /* @__PURE__ */ React.createElement(CardContent, {
+		ref,
+		className: classes.root
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.cardHeader }, /* @__PURE__ */ React.createElement(UserAvatar, {
+		name: user?.name,
+		email: user?.email,
+		size: "large",
+		className: classes.avatar
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.basicInfoContainer }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.basicInfo,
+		variant: "subtitle2"
+	}, user?.name), /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.basicInfo,
+		variant: "body2"
+	}, user?.email))), userTenants && user && changeTenant && /* @__PURE__ */ React.createElement(TenantSelect, {
+		className: classes.currentTenant,
+		id: "current-tenant",
+		tenants: userTenants,
+		value: currentTenant,
+		onTenantChange: handleTenantChange,
+		label: t("Current Tenant"),
+		recordIdPrefix: "udpRecord-FluentProfileMenuCard"
+	}), /* @__PURE__ */ React.createElement(Button, {
+		id: "udpRecord-FluentProfileMenuCard-SignOut",
+		udprecordid: "udpRecord-FluentProfileMenuCard-SignOut",
+		onClick: () => {
+			clearStoredPath();
+			clearStoredExternalPath();
+			clearStoredTenant();
+			logout();
+		},
+		variant: "outlined",
+		color: "secondary"
+	}, t("Sign out")));
+});
+FluentProfileMenuCard.displayName = "FluentProfileMenuCard";
+
+//#endregion
+//#region src/shell/ui/profile/UserProfileMenuWrapper.tsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	avatar: { background: theme.palette.secondary.main }
+}));
+const UserProfileMenuWrapper = ({ returnTo }) => {
+	const classes = useStyles();
+	const user = useUser();
+	const singleLogout = useSingleLogout();
+	const { setUser } = useUserActions();
+	const tenantContext = useTenant();
+	const currentTenant = tenantContext?.activeTenant ?? null;
+	const availableTenants = tenantContext?.filteredTenantsList ?? tenantContext?.tenantsList ?? [];
+	const enforcedTenantId = ConfigService.config.UNITY_TENANT_ID;
+	const profileMenuTenants = !enforcedTenantId || enforcedTenantId === "" ? availableTenants : availableTenants.filter((option) => option.tenantId === enforcedTenantId);
+	if (!user) {
+		const fallbackPath = returnTo ?? (typeof window !== "undefined" ? window.location.pathname : "/");
+		return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Button, {
+			component: Link$1,
+			to: {
+				pathname: "/login",
+				state: { returnTo: fallbackPath ?? "/" }
+			},
+			color: "inherit"
+		}, "Sign in"));
+	}
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(MenuOpener, {
+		name: "udp-user-profile-popover",
+		button: /* @__PURE__ */ React.createElement(IconButton, null, /* @__PURE__ */ React.createElement(UserAvatar, {
+			name: user?.name,
+			email: user?.email,
+			size: "toolbar",
+			className: classes.avatar
+		})),
+		menuProps: {
+			keepMounted: true,
+			getContentAnchorEl: null,
+			variant: "menu",
+			anchorOrigin: {
+				vertical: "bottom",
+				horizontal: "right"
+			},
+			transformOrigin: {
+				vertical: "top",
+				horizontal: "right"
+			}
+		}
+	}, /* @__PURE__ */ React.createElement(FluentProfileMenuCard, {
+		userTenants: profileMenuTenants,
+		currentTenant,
+		user,
+		setUser,
+		logout: singleLogout,
+		unityUrl: ConfigService.config.UNITY_URL
+	})));
+};
+
+//#endregion
+export { FluentProfileMenuCard as n, UserProfileMenuWrapper as t };
+//# sourceMappingURL=UserProfileMenuWrapper-s_c1h1nw.js.map

package/dist/UserProfileMenuWrapper-s_c1h1nw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfileMenuWrapper-s_c1h1nw.js","names":["useStyles","useHistory","useHistoryNoType","useStyles","Link"],"sources":["../src/shell/ui/profile/MenuOpener.jsx","../src/shell/ui/profile/UserAvatar.jsx","../src/shell/ui/profile/FluentProfileMenuCard.tsx","../src/shell/ui/profile/UserProfileMenuWrapper.tsx"],"sourcesContent":["import { Menu } from '@material-ui/core';\nimport {\n  bindMenu,\n  bindTrigger,\n  usePopupState,\n} from 'material-ui-popup-state/hooks';\nimport React, {\n  cloneElement,\n  ElementType,\n  FC,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from 'react';\n\n/**\n * Helper to handle open a menu when a button is clicked\n */\nexport const MenuOpener = ({\n  MenuComponent = Menu,\n  name,\n  button,\n  menuProps,\n  children,\n}) => {\n  /* @fixme useId as string to bypass error */\n  const popupId = 'useId(name)';\n  const popupState = usePopupState({ variant: 'popover', popupId });\n  const { close } = popupState;\n\n  const click = useCallback(\n    e => {\n      const isButton = e.target.matches(\n        'a, button, input[type=\"button\"], input[type=\"image\"], [role=\"button\"], [role=\"link\"], a *, button *, [role=\"button\"] *, [role=\"link\"] *'\n      );\n      const isDropdownButton = e.target.matches(\n        '.MuiAutocomplete-endAdornment *'\n      );\n\n      const closePopup = isButton && !isDropdownButton;\n\n      if (closePopup) {\n        close();\n      }\n    },\n    [close]\n  );\n\n  return (\n    <>\n      {cloneElement(button, bindTrigger(popupState))}\n      <MenuComponent {...menuProps} {...bindMenu(popupState)} onClick={click}>\n        {children}\n      </MenuComponent>\n    </>\n  );\n};\n\nexport default MenuOpener;\n","import { Avatar, makeStyles } from '@material-ui/core'\nimport clsx from 'clsx'\nimport React from 'react'\nimport useDevicePixelRatio from '../../../utilities/useDevicePixelRatio.ts'\nimport useGravatar from '../../../utilities/useGravatar.ts'\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {},\n    default: {},\n    toolbar: {\n      width: 32,\n      height: 32\n    },\n    large: {\n      width: 80,\n      height: 80\n    }\n  }),\n  { name: 'UserAvatar' }\n)\n\n/**\n * Inteligent user Avatar element\n *\n * - Loads a Gravatar based on the email if one exists\n * - Falls back to a text avatar while loading and when a Gravatar does not exist\n * - Automatically chooses image size based on size prop and device pixel density (and updates if device pixel density changes)\n */\nconst UserAvatar = (props) => {\n  const classes = useStyles(props)\n  const { name, email, size = 'default', className, ...other } = props\n  const dppx = useDevicePixelRatio()\n  const dimension = { toolbar: 32, large: 80 }[size] || 40\n  const avatar = useGravatar(email, { size: dimension * dppx })\n\n  return (\n    <Avatar\n      alt={name}\n      aria-label={`${name}'s avatar`}\n      {...other}\n      className={clsx(className, classes[size])}\n      src={avatar}\n    >\n      {name?.trim()?.charAt(0) || '?'}\n    </Avatar>\n  )\n}\n\nexport default UserAvatar\n","import React, { forwardRef, useCallback } from 'react';\nimport { Button, CardContent, makeStyles, Typography } from '@material-ui/core';\nimport UserAvatar from './UserAvatar';\nimport { clearStoredPath } from '../../../utilities/redirect/LocalRedirectUrlStorage';\nimport { clearStoredExternalPath } from '../../../utilities/redirect/ExternalRedirectUrlStorage';\nimport {\n  clearStoredTenant,\n  storeTenant\n} from '../../../utilities/storage/UnitySessionStorage';\nimport { useTranslation } from 'react-i18next';\nimport { useUserActions } from '../../../utilities/auth/users';\nimport { User } from '../../../utilities/auth';\nimport { useHistory as useHistoryNoType} from 'react-router-dom';\nimport { Tenant } from '../../../utilities';\nimport {History} from 'history';\nimport { TenantSelect } from '../../../utilities/tenant';\n\nconst useHistory = useHistoryNoType as  () => History;\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '& > *': {\n      margin: theme.spacing(1)\n    },\n    '&:last-child': {\n      paddingBottom: theme.spacing(2)\n    }\n  },\n  cardHeader: {\n    display: 'flex',\n    marginBottom: theme.spacing(3)\n  },\n  currentTenant: {\n    margin: 'auto',\n    width: '85%',\n    marginBottom: theme.spacing(4)\n  },\n  buttonGroup: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center'\n  },\n  basicInfoContainer: {\n    marginLeft: theme.spacing(1)\n  },\n  basicInfo: {\n    paddingLeft: theme.spacing(1)\n  },\n  divider: {\n    height: theme.spacing(3)\n  },\n  avatar: {\n    fontSize: 40\n  }\n}));\n\ninterface FluentProfileMenuCardProps {\n  userTenants: Tenant[];\n  currentTenant: Tenant | null;\n  user: User | null;\n  setUser: (user: User | null) => void;\n  logout: () => void;\n  unityUrl?: string;\n  displayProfileButton?: boolean;\n}\n\nexport const FluentProfileMenuCard = forwardRef<HTMLDivElement, FluentProfileMenuCardProps>((props, ref) => {\n  const classes = useStyles();\n  const devUnityUrl = 'https://unity-dev.univerus.com/';\n  const {\n    userTenants,\n    currentTenant,\n    user,\n    logout,\n    unityUrl = devUnityUrl,\n  } = props;\n  const history =  useHistory();\n  const redirectToHome = useCallback(() => history.push('/'), [history]);\n  // eslint-disable-next-line\n  const { t  } = useTranslation() as {t: (key: string) => string};\n  const { changeTenant } = useUserActions();\n\n  const handleTenantChange = useCallback(\n    (tenant: Tenant) => {\n      storeTenant(tenant.tenantId);\n      changeTenant(tenant.tenantId);\n      redirectToHome();\n    },\n    [changeTenant, redirectToHome]\n  );\n\n\n\n  // const handleProfileClick = () => {\n  //   // if this is unity (productid is 1), go to the profile slug, otherwise open the profile page in a new tab\n  //   if(ConfigService.config.UNITY_PRODUCT_ID === '1') history.push('/profile')\n  //   else window.open(unityUrl + '/profile');\n\n  // }\n\n  if (!user) return null;\n\n  return (\n    <CardContent ref={ref} className={classes.root}>\n      <div className={classes.cardHeader}>\n        <UserAvatar\n          name={user?.name}\n          email={user?.email}\n          size='large'\n          className={classes.avatar}\n        />\n        <div className={classes.basicInfoContainer}>\n          <Typography className={classes.basicInfo} variant='subtitle2'>\n            {user?.name}\n          </Typography>\n          <Typography className={classes.basicInfo} variant='body2'>\n            {user?.email}\n          </Typography>\n          {/* {displayProfileButton && (\n            <div className={classes.buttonGroup}>\n              <Button\n                id='udpRecord-FluentProfileMenuCard-MyProfile'\n                udprecordid='udpRecord-FluentProfileMenuCard-MyProfile'\n                onClick={handleProfileClick}\n                target='_blank'\n                color='secondary'\n              >\n                {t('My Profile')}\n              </Button>\n            </div>\n          )} */}\n        </div>\n      </div>\n      {userTenants && user && changeTenant && (\n        <TenantSelect\n          className={classes.currentTenant}\n          id='current-tenant'\n          tenants={userTenants}\n          value={currentTenant}\n          onTenantChange={handleTenantChange}\n          label={t('Current Tenant')}\n          recordIdPrefix='udpRecord-FluentProfileMenuCard'\n        />\n      )}\n      <Button\n        id='udpRecord-FluentProfileMenuCard-SignOut'\n        // @ts-expect-error Custom automation attribute not typed by MUI\n        udprecordid='udpRecord-FluentProfileMenuCard-SignOut'\n        onClick={() => {\n          clearStoredPath();\n          clearStoredExternalPath();\n          clearStoredTenant();\n          logout();\n        }}\n        variant='outlined'\n        color='secondary'\n      >\n        {t('Sign out')}\n      </Button>\n    </CardContent>\n  );\n});\n\nFluentProfileMenuCard.displayName = 'FluentProfileMenuCard';\n","import React, { FC } from 'react';\nimport { Button, makeStyles, IconButton } from '@material-ui/core';\nimport { Link } from 'react-router-dom';\nimport MenuOpener from './MenuOpener';\nimport UserAvatar from './UserAvatar';\nimport { FluentProfileMenuCard } from './FluentProfileMenuCard';\nimport { ConfigService } from '../../../configService';\nimport { useSingleLogout, useUserActions } from '../../../utilities/auth';\nimport { useUser } from '../../../utilities/auth/useUser';\nimport { useTenant } from '../../../utilities/tenant/useTenant';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  avatar: {\n    background: theme.palette.secondary.main\n  }\n}));\n\n\n\nexport interface UserProfileMenuWrapperProps {\n  returnTo?: string;\n}\n\nexport const UserProfileMenuWrapper: FC<UserProfileMenuWrapperProps> = ({\n  returnTo\n}) => {\n  const classes = useStyles();\n  const user = useUser();\n  const singleLogout = useSingleLogout();\n  const { setUser } = useUserActions();\n  const tenantContext = useTenant();\n\n  const currentTenant = tenantContext?.activeTenant ?? null;\n  const availableTenants =\n    tenantContext?.filteredTenantsList ??\n    tenantContext?.tenantsList ??\n    [];\n\n  const enforcedTenantId = ConfigService.config.UNITY_TENANT_ID;\n\n  const profileMenuTenants =\n    !enforcedTenantId || enforcedTenantId === ''\n      ? availableTenants\n      : availableTenants.filter(\n          (option) => option.tenantId === enforcedTenantId\n        );\n\n  if (!user) {\n    const fallbackPath =\n      returnTo ??\n      (typeof window !== 'undefined' ? window.location.pathname : '/');\n\n    return (\n      <div className={classes.root}>\n        <Button\n          component={Link as React.ElementType} // react-router-dom@5 is incompatible with @types/react@18 so we have to assert the type manually\n          to={{\n            pathname: '/login',\n            state: { returnTo: fallbackPath ?? '/' }\n          }}\n          color='inherit'\n        >\n          Sign in\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <div className={classes.root}>\n      <MenuOpener\n       name = \"udp-user-profile-popover\"\n        button={\n          <IconButton>\n            <UserAvatar\n              name={user?.name}\n              email={user?.email}\n              size='toolbar'\n              className={classes.avatar}\n            />\n          </IconButton>\n        }\n        menuProps={{\n          keepMounted: true,\n          getContentAnchorEl: null,\n          variant: 'menu',\n          anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n          transformOrigin: { vertical: 'top', horizontal: 'right' }\n        }}\n      >\n        <FluentProfileMenuCard\n          userTenants={profileMenuTenants}\n          currentTenant={currentTenant}\n          user={user}\n          setUser={setUser}\n          logout={singleLogout}\n          unityUrl={ConfigService.config.UNITY_URL}\n        />\n      </MenuOpener>\n    </div>\n  );\n};\n\nexport default UserProfileMenuWrapper;\n"],"mappings":"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"}

package/dist/UtilityBar-DQyXS0YF.js

@@ -0,0 +1,98 @@
+import { t as FluentIconButton } from "./FluentIconButton-Av4urxc6.js";
+import { n as useShellStore } from "./shellStore-CM3ibypS.js";
+import { t as useActionState } from "./useActions-D1HvluXe.js";
+import { i as InquiryHeaderSecondaryTarget, n as InquiryHeaderSecondaryAlertTarget } from "./InquiryHeaderSecondaryAlert-CgJGr3-f.js";
+import { n as SubHeaderActionsTarget } from "./SubHeaderAction-B02ZXv-L.js";
+import { i as InquiryHeaderTitleTarget, n as InquiryHeaderControlTarget } from "./InquiryHeaderControl-iAutQL9G.js";
+import React from "react";
+import { Card, Collapse, Divider, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronDownIcon, ChevronUpIcon } from "@fluentui/react-icons";
+
+//#region src/UI/utilityDisplay/UtilityBar.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	bar: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	gutters: { paddingLeft: theme.spacing(2) },
+	content: {
+		flex: 1,
+		width: "100%"
+	},
+	collapsed: {
+		height: 0,
+		transition: theme.transitions.create("height", {
+			easing: theme.transitions.easing.easeOut,
+			duration: theme.transitions.duration.leavingScreen
+		})
+	},
+	expanded: { transition: theme.transitions.create("height", {
+		easing: theme.transitions.easing.easeIn,
+		duration: theme.transitions.duration.enteringScreen
+	}) },
+	open: {
+		display: "flex",
+		justifyContent: "flex-end"
+	},
+	toggleButton: {
+		position: "absolute",
+		right: theme.spacing(1),
+		top: theme.spacing(1)
+	},
+	cardRoot: { "&:last-child": { paddingBottom: theme.spacing(1) } },
+	chevronButtonOpen: {
+		display: "flex",
+		justifyContent: "center",
+		marginLeft: 25,
+		zIndex: theme.zIndex.appBar
+	},
+	chevronButtonClosed: {
+		position: "absolute",
+		left: "50%",
+		top: 11,
+		zIndex: theme.zIndex.appBar
+	},
+	chevronButtonClosedLower: {
+		display: "flex",
+		justifyContent: "center",
+		marginLeft: 25,
+		zIndex: theme.zIndex.appBar
+	},
+	inquiryHeader: {
+		display: "flex",
+		flexDirection: "column"
+	}
+}), { name: "UtilityBar" });
+const UtilityBar = (props) => {
+	const classes = useStyles(props);
+	const { className, gutters = true, expander, toggleOne, toggleTwo, closePrimary = false, closeSecondary = false, expanded = true, expandedSecondary, setExpanded, setExpandedSecondary } = props;
+	const { pageSplitScreen } = useActionState() || {};
+	const shaHasChildren = useShellStore((state) => state.subHeaderActionHasChildren);
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.bar, gutters && classes.gutters, className) }, /* @__PURE__ */ React.createElement("div", {
+		className: classes.content,
+		style: { zIndex: pageSplitScreen?.open ? 1100 : "" }
+	}, !expander && /* @__PURE__ */ React.createElement(Card, { variant: `${shaHasChildren ? "outlined" : "elevation"}` }, /* @__PURE__ */ React.createElement(SubHeaderActionsTarget, { className: classes.actions })), expander && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, {
+		className: classes.card,
+		square: true
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(InquiryHeaderTitleTarget, null), /* @__PURE__ */ React.createElement(Collapse, {
+		in: closePrimary,
+		timeout: "auto"
+	}, /* @__PURE__ */ React.createElement(SubHeaderActionsTarget, { className: classes.actions })), toggleOne && /* @__PURE__ */ React.createElement("div", { className: clsx(expanded ? classes.chevronButtonOpen : classes.chevronButtonClosed) }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: setExpanded,
+		icon: expanded ? ChevronUpIcon : ChevronDownIcon,
+		className: classes.icon
+	}))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Collapse, {
+		in: closeSecondary,
+		timeout: "auto"
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.inquiryHeader }, /* @__PURE__ */ React.createElement(InquiryHeaderSecondaryTarget, { className: classes.actions }), /* @__PURE__ */ React.createElement(InquiryHeaderSecondaryAlertTarget, { className: classes.actions }))), /* @__PURE__ */ React.createElement(InquiryHeaderControlTarget, null), toggleTwo && /* @__PURE__ */ React.createElement("div", { className: clsx(expandedSecondary ? classes.chevronButtonOpen : classes.chevronButtonClosedLower) }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: setExpandedSecondary,
+		icon: expandedSecondary ? ChevronUpIcon : ChevronDownIcon,
+		className: classes.icon
+	}))))));
+};
+
+//#endregion
+export { UtilityBar as t };
+//# sourceMappingURL=UtilityBar-DQyXS0YF.js.map

package/dist/UtilityBar-DQyXS0YF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityBar-DQyXS0YF.js","names":[],"sources":["../src/UI/utilityDisplay/UtilityBar.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Card, Collapse, Divider } from '@material-ui/core';\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton';\nimport { ChevronDownIcon, ChevronUpIcon } from '@fluentui/react-icons';\nimport clsx from 'clsx';\nimport { SubHeaderActionsTarget } from '../../utilities/utilityBar/SubHeaderAction';\nimport { InquiryHeaderTitleTarget } from '../../utilities/utilityBar/InquiryHeaderTitle';\nimport { InquiryHeaderControlTarget } from '../../utilities/utilityBar/InquiryHeaderControl';\nimport { InquiryHeaderSecondaryTarget } from '../../utilities/utilityBar/InquiryHeaderSecondary';\nimport { InquiryHeaderSecondaryAlertTarget } from '../../utilities/utilityBar/InquiryHeaderSecondaryAlert';\nimport { useActionState } from '../../hooks/useActions';\nimport { useShellStore } from '../../stores/shellStore';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {},\n    bar: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    gutters: {\n      paddingLeft: theme.spacing(2)\n    },\n    content: {\n      flex: 1,\n      width: '100%'\n    },\n    collapsed: {\n      height: 0,\n      transition: theme.transitions.create('height', {\n        easing: theme.transitions.easing.easeOut,\n        duration: theme.transitions.duration.leavingScreen\n      })\n    },\n    expanded: {\n      transition: theme.transitions.create('height', {\n        easing: theme.transitions.easing.easeIn,\n        duration: theme.transitions.duration.enteringScreen\n      })\n    },\n    open: {\n      display: 'flex',\n      justifyContent: 'flex-end'\n    },\n    toggleButton: {\n      position: 'absolute',\n      right: theme.spacing(1),\n      top: theme.spacing(1)\n    },\n    cardRoot: {\n      '&:last-child': {\n        paddingBottom: theme.spacing(1)\n      }\n    },\n    chevronButtonOpen: {\n      display: 'flex',\n      justifyContent: 'center',\n      marginLeft: 25,\n      zIndex: theme.zIndex.appBar\n    },\n    chevronButtonClosed: {\n      position: 'absolute',\n      left: '50%',\n      top: 11,\n      zIndex: theme.zIndex.appBar\n    },\n    chevronButtonClosedLower: {\n      display: 'flex',\n      justifyContent: 'center',\n      marginLeft: 25,\n      zIndex: theme.zIndex.appBar\n    },\n    inquiryHeader: {\n      display: 'flex',\n      flexDirection: 'column'\n      // alignItems: 'center'\n    }\n  }),\n\n  { name: 'UtilityBar' }\n);\n\nexport const UtilityBar = (props) => {\n\n  const classes = useStyles(props);\n  // const { expanded = true, gutters = true, className } = props\n  const {\n    className,\n    gutters = true,\n    expander,\n    toggleOne,\n    toggleTwo,\n    closePrimary = false,\n    closeSecondary = false,\n    expanded = true,\n    expandedSecondary,\n    setExpanded,\n    setExpandedSecondary\n  } = props;\n\n  const actionState = useActionState();\n  const { pageSplitScreen } = actionState || {};\n\n  const shaHasChildren = useShellStore(\n    (state) => state.subHeaderActionHasChildren\n  );\n\n  return (\n    <div className={clsx(classes.bar, gutters && classes.gutters, className)}>\n      <div\n        className={classes.content}\n        style={{ zIndex: pageSplitScreen?.open ? 1100 : '' }}\n      >\n        {!expander && (\n          <Card variant={`${shaHasChildren ? 'outlined' : 'elevation'}`}>\n            <SubHeaderActionsTarget className={classes.actions} />\n          </Card>\n        )}\n        {expander && (\n          <div>\n            <Card className={classes.card} square>\n              {/* <CardContent classes={{ root: classes.cardRoot }}> */}\n              <div>\n                <InquiryHeaderTitleTarget />\n\n                {/* <Collapse in={expanded || closePrimary} timeout='auto'> */}\n                <Collapse in={closePrimary} timeout='auto'>\n                  <SubHeaderActionsTarget className={classes.actions} />\n                </Collapse>\n\n                {toggleOne && (\n                  <div\n                    className={clsx(\n                      expanded\n                        ? classes.chevronButtonOpen\n                        : classes.chevronButtonClosed\n                    )}\n                  >\n                    <FluentIconButton\n                      // onClick={() => setExpanded(!expanded)}\n                      onClick={setExpanded}\n                      icon={expanded ? ChevronUpIcon : ChevronDownIcon}\n                      className={classes.icon}\n                    // rounded={!expanded}\n                    />\n                  </div>\n                )}\n              </div>\n              <Divider />\n              {/* </CardContent> */}\n              {/* <Collapse in={expandedSecondary || closeSecondary} timeout='auto'> */}\n              <Collapse in={closeSecondary} timeout='auto'>\n                <div className={classes.inquiryHeader}>\n                  <InquiryHeaderSecondaryTarget className={classes.actions} />\n                  <InquiryHeaderSecondaryAlertTarget\n                    className={classes.actions}\n                  />\n                </div>\n              </Collapse>\n              <InquiryHeaderControlTarget />\n              {toggleTwo && (\n                <div\n                  className={clsx(\n                    expandedSecondary\n                      ? classes.chevronButtonOpen\n                      : classes.chevronButtonClosedLower\n                  )}\n                >\n                  <FluentIconButton\n                    // onClick={() => setExpandedSecondary(!expandedSecondary)}\n                    onClick={setExpandedSecondary}\n                    icon={expandedSecondary ? ChevronUpIcon : ChevronDownIcon}\n                    className={classes.icon}\n                  // rounded={!expandedSecondary}\n                  />\n                </div>\n              )}\n            </Card>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAY,YACf,WAAW;CACV,MAAM,EAAE;CACR,KAAK;EACH,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EACP,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,WAAW;EACT,QAAQ;EACR,YAAY,MAAM,YAAY,OAAO,UAAU;GAC7C,QAAQ,MAAM,YAAY,OAAO;GACjC,UAAU,MAAM,YAAY,SAAS;GACtC,CAAC;EACH;CACD,UAAU,EACR,YAAY,MAAM,YAAY,OAAO,UAAU;EAC7C,QAAQ,MAAM,YAAY,OAAO;EACjC,UAAU,MAAM,YAAY,SAAS;EACtC,CAAC,EACH;CACD,MAAM;EACJ,SAAS;EACT,gBAAgB;EACjB;CACD,cAAc;EACZ,UAAU;EACV,OAAO,MAAM,QAAQ,EAAE;EACvB,KAAK,MAAM,QAAQ,EAAE;EACtB;CACD,UAAU,EACR,gBAAgB,EACd,eAAe,MAAM,QAAQ,EAAE,EAChC,EACF;CACD,mBAAmB;EACjB,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,OAAO;EACtB;CACD,qBAAqB;EACnB,UAAU;EACV,MAAM;EACN,KAAK;EACL,QAAQ,MAAM,OAAO;EACtB;CACD,0BAA0B;EACxB,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ,MAAM,OAAO;EACtB;CACD,eAAe;EACb,SAAS;EACT,eAAe;EAEhB;CACF,GAED,EAAE,MAAM,cAAc,CACvB;AAED,MAAa,cAAc,UAAU;CAEnC,MAAM,UAAU,UAAU,MAAM;CAEhC,MAAM,EACJ,WACA,UAAU,MACV,UACA,WACA,WACA,eAAe,OACf,iBAAiB,OACjB,WAAW,MACX,mBACA,aACA,yBACE;CAGJ,MAAM,EAAE,oBADY,gBAAgB,IACO,EAAE;CAE7C,MAAM,iBAAiB,eACpB,UAAU,MAAM,2BAClB;AAED,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,KAAK,WAAW,QAAQ,SAAS,UAAU,IACtE,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,EAAE,QAAQ,iBAAiB,OAAO,OAAO,IAAI;IAEnD,CAAC,YACA,oCAAC,QAAK,SAAS,GAAG,iBAAiB,aAAa,iBAC9C,oCAAC,0BAAuB,WAAW,QAAQ,UAAW,CACjD,EAER,YACC,oCAAC,aACC,oCAAC;EAAK,WAAW,QAAQ;EAAM;IAE7B,oCAAC,aACC,oCAAC,+BAA2B,EAG5B,oCAAC;EAAS,IAAI;EAAc,SAAQ;IAClC,oCAAC,0BAAuB,WAAW,QAAQ,UAAW,CAC7C,EAEV,aACC,oCAAC,SACC,WAAW,KACT,WACI,QAAQ,oBACR,QAAQ,oBACb,IAED,oCAAC;EAEC,SAAS;EACT,MAAM,WAAW,gBAAgB;EACjC,WAAW,QAAQ;GAEnB,CACE,CAEJ,EACN,oCAAC,cAAU,EAGX,oCAAC;EAAS,IAAI;EAAgB,SAAQ;IACpC,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC,gCAA6B,WAAW,QAAQ,UAAW,EAC5D,oCAAC,qCACC,WAAW,QAAQ,UACnB,CACE,CACG,EACX,oCAAC,iCAA6B,EAC7B,aACC,oCAAC,SACC,WAAW,KACT,oBACI,QAAQ,oBACR,QAAQ,yBACb,IAED,oCAAC;EAEC,SAAS;EACT,MAAM,oBAAoB,gBAAgB;EAC1C,WAAW,QAAQ;GAEnB,CACE,CAEH,CACH,CAEJ,CACF"}

package/dist/UtilityBarInport-CYdAfNBd.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { createTeleporter } from "react-teleporter";
+
+//#region src/utilities/utilityBar/UtilityBarInport.jsx
+const UtilityBarInports = createTeleporter({ multiSources: true });
+/**
+* @param {any} props
+*/
+function UtilityBarInportTarget(props) {
+	return /* @__PURE__ */ React.createElement(UtilityBarInports.Target, props);
+}
+/**
+* Places a Control in the App SubHeader
+*/
+const UtilityBarInport = (props) => {
+	const { children, className, ...buttonProps } = props;
+	return /* @__PURE__ */ React.createElement(UtilityBarInports.Source, null, children);
+};
+
+//#endregion
+export { UtilityBarInportTarget as n, UtilityBarInport as t };
+//# sourceMappingURL=UtilityBarInport-CYdAfNBd.js.map

package/dist/UtilityBarInport-CYdAfNBd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityBarInport-CYdAfNBd.js","names":[],"sources":["../src/utilities/utilityBar/UtilityBarInport.jsx"],"sourcesContent":["import React from 'react'\nimport { createTeleporter } from 'react-teleporter'\n\nconst UtilityBarInports = createTeleporter({\n  multiSources: true\n})\n\n/**\n * @param {any} props\n */\nexport function UtilityBarInportTarget(props) {\n  return <UtilityBarInports.Target {...props} />\n}\n\n/**\n * Places a Control in the App SubHeader\n */\nexport const UtilityBarInport = (props) => {\n  const { children, className, ...buttonProps } = props\n\n  return <UtilityBarInports.Source>{children}</UtilityBarInports.Source>\n}\n"],"mappings":";;;;AAGA,MAAM,oBAAoB,iBAAiB,EACzC,cAAc,MACf,CAAC;;;;AAKF,SAAgB,uBAAuB,OAAO;AAC5C,QAAO,oCAAC,kBAAkB,QAAW,MAAS;;;;;AAMhD,MAAa,oBAAoB,UAAU;CACzC,MAAM,EAAE,UAAU,WAAW,GAAG,gBAAgB;AAEhD,QAAO,oCAAC,kBAAkB,cAAQ,SAAoC"}

package/dist/UtilitySearch-CNMjUSMs.js

@@ -0,0 +1,19 @@
+import { t as FluentSearchField } from "./FluentSearchField-6dGDqt0d.js";
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+
+//#region src/UI/utilityDisplay/ui/UtilitySearch.jsx
+const useStyles = makeStyles((theme) => ({ root: {} }));
+const UtilitySearch = ({ handleExpandOptions, toggleOptions, ...otherProps }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(FluentSearchField, {
+		...otherProps,
+		id: "udpRecord-UtilitySearch",
+		udprecordid: "udpRecord-UtilitySearch",
+		toggleOptions
+	}));
+};
+
+//#endregion
+export { UtilitySearch as t };
+//# sourceMappingURL=UtilitySearch-CNMjUSMs.js.map

package/dist/UtilitySearch-CNMjUSMs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitySearch-CNMjUSMs.js","names":[],"sources":["../src/UI/utilityDisplay/ui/UtilitySearch.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { FluentSearchField } from '../../inputs/textField/FluentSearchField'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {}\n}))\n\nexport const UtilitySearch = ({\n  handleExpandOptions,\n  toggleOptions,\n  ...otherProps\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <FluentSearchField {...otherProps}\n        id='udpRecord-UtilitySearch'\n        udprecordid='udpRecord-UtilitySearch'\n        toggleOptions={toggleOptions} \n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EAAE,EACT,EAAE;AAEH,MAAa,iBAAiB,EAC5B,qBACA,eACA,GAAG,iBACC;CACJ,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAkB,GAAI;EACrB,IAAG;EACH,aAAY;EACG;GACf,CACE"}

package/dist/UtilitySideBar-BctiUpCK.js

@@ -0,0 +1,183 @@
+import { t as FluentIconButton } from "./FluentIconButton-Av4urxc6.js";
+import { t as AmbientCard } from "./AmbientCard-D-le1ghN.js";
+import { n as useBuildEnvironment, t as APP_RIBBON_SPACE } from "./useBuildEnvironment-cD_FXewz.js";
+import { n as UtilityBarInportTarget } from "./UtilityBarInport-CYdAfNBd.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronRightIcon } from "@fluentui/react-icons";
+import { useTranslation } from "react-i18next";
+import { ResizableBox } from "react-resizable";
+
+//#region src/shell/ui/SidebarCollapseButton.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		justifyContent: "flex-start",
+		height: 48,
+		width: "100%",
+		paddingLeft: 0
+	},
+	iconButton: {
+		width: 48,
+		height: 48,
+		marginLeft: 16 - 24 / 2
+	},
+	expanded: {},
+	icon: {
+		width: 14,
+		height: 14,
+		margin: 8 / 2,
+		transition: theme?.transitions?.create("transform", {
+			easing: theme?.transitions?.easing?.sharp,
+			duration: theme?.transitions?.duration?.shortest
+		}),
+		"$expanded &": { transform: "scaleX(-1)" }
+	},
+	switch: {
+		margin: 8 / 2,
+		transition: theme?.transitions?.create("transform", {
+			easing: theme?.transitions?.easing?.sharp,
+			duration: theme?.transitions?.duration?.shortest
+		}),
+		"$expanded &": { transform: "scaleX(-1)" }
+	}
+}), { name: "SidebarCollapseButton" });
+/**
+* Custom styled button used for expanding/collapsing sidebars
+*/
+const SidebarCollapseButton = (props) => {
+	const classes = useStyles$1(props);
+	const { expanded, className, id, udprecordid, ...other } = props;
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement("div", {
+		...other,
+		className: clsx(className, classes.root, { [classes.expanded]: expanded })
+	}, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		id,
+		udprecordid,
+		color: "inherit",
+		className: clsx(classes.iconButton, classes.switch),
+		"aria-label": expanded ? t("mainMenuAria.collapseNavigation") : t("mainMenuAria.expandNavigation"),
+		icon: ChevronRightIcon
+	}));
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/UtilitySideBar.jsx
+const EXPANDED_WIDTH = 288;
+const COLLAPSED_WIDTH = 78;
+const MAX_WIDTH = 700;
+const useStyles = makeStyles((theme) => ({
+	resizableBox: {
+		position: "relative",
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0
+	},
+	root: {
+		paddingTop: (props) => props.removePadding || props.sidebarHidden ? 0 : 40,
+		overflow: "hidden",
+		height: "100%",
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0
+	},
+	cardWrapper: {
+		flex: 1,
+		minHeight: 0,
+		display: "flex",
+		flexDirection: "column",
+		height: "100%"
+	},
+	headerToggle: {},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: "100%"
+	},
+	headerContent: {
+		display: (props) => props.hideTitleBar ? "none" : "flex",
+		width: "100%",
+		paddingLeft: 12
+	},
+	title: {
+		flex: 1,
+		width: "100%",
+		paddingTop: 7
+	},
+	expandedWidth: { width: 288 },
+	handle: {
+		top: 0,
+		right: theme.spacing(-.75),
+		width: theme.spacing(.75),
+		zIndex: 1e4,
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		display: "inline-block",
+		position: "absolute",
+		"&:hover": { cursor: "col-resize" }
+	},
+	utilityContent: {
+		flex: 1,
+		minHeight: 0,
+		display: "flex",
+		flexDirection: "column",
+		height: "100%"
+	}
+}));
+const UtilitySideBar = (props) => {
+	const { onUtilitySidebarToggleExpandClick, resizable, title, utilitySidebarToggleOverride, isUsingChildren = false, removeTopLayoutUnit = false, collapsedWidth, children, sidebarHidden, handleResize = null } = props;
+	const buildEnv = useBuildEnvironment();
+	const classes = useStyles({
+		...props,
+		appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0
+	});
+	const [expanded, setExpanded] = useState(true);
+	const [width, setWidth] = useState(EXPANDED_WIDTH);
+	const _collapsedWidth = collapsedWidth ?? COLLAPSED_WIDTH;
+	const onResize = (event, { element, size, handle }) => {
+		setWidth(size.width);
+		if (handleResize) handleResize(size.width);
+	};
+	const handleToggleClick = useCallback(() => {
+		if (onUtilitySidebarToggleExpandClick) onUtilitySidebarToggleExpandClick();
+		setExpanded((expanded) => !expanded);
+	}, [onUtilitySidebarToggleExpandClick]);
+	useEffect(() => {
+		if (typeof utilitySidebarToggleOverride === "boolean") setExpanded(utilitySidebarToggleOverride);
+	}, [utilitySidebarToggleOverride]);
+	return /* @__PURE__ */ React.createElement(ResizableBox, {
+		className: classes.resizableBox,
+		width: expanded ? width : _collapsedWidth,
+		resizeHandles: resizable && expanded ? ["e"] : [],
+		axis: "x",
+		minConstraints: expanded ? [EXPANDED_WIDTH] : [_collapsedWidth],
+		maxConstraints: [MAX_WIDTH],
+		onResize,
+		handle: expanded && /* @__PURE__ */ React.createElement("div", { className: classes.handle })
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: classes.root,
+		style: {
+			width: expanded ? width : _collapsedWidth,
+			height: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.cardWrapper }, /* @__PURE__ */ React.createElement(AmbientCard, {
+		fullWidth: true,
+		cardHeight: "100%",
+		cardContentHeight: "100%",
+		removePadding: true,
+		lastChildBottomPadding: 12,
+		removeTopLayoutUnit: removeTopLayoutUnit || sidebarHidden
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.header }, expanded && /* @__PURE__ */ React.createElement("div", { className: classes.headerContent }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, " ", title, " "))), /* @__PURE__ */ React.createElement("div", { className: classes.headerToggle }, /* @__PURE__ */ React.createElement(SidebarCollapseButton, {
+		id: "udpRecord-UtilitySideBar",
+		udprecordid: "udpRecord-UtilitySideBar",
+		expanded,
+		onClick: handleToggleClick
+	}))), !isUsingChildren && /* @__PURE__ */ React.createElement(UtilityBarInportTarget, null), isUsingChildren && /* @__PURE__ */ React.createElement("div", { className: classes.utilityContent }, children)))));
+};
+
+//#endregion
+export { SidebarCollapseButton as n, UtilitySideBar as t };
+//# sourceMappingURL=UtilitySideBar-BctiUpCK.js.map

package/dist/UtilitySideBar-BctiUpCK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitySideBar-BctiUpCK.js","names":["useStyles"],"sources":["../src/shell/ui/SidebarCollapseButton.jsx","../src/UI/utilityDisplay/UtilitySideBar.jsx"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { ChevronRightIcon } from '@fluentui/react-icons';\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      display: 'flex',\n      justifyContent: 'flex-start',\n      height: 48,\n      width: '100%',\n      paddingLeft: 0\n    },\n    iconButton: {\n      width: 48,\n      height: 48,\n      marginLeft: 16 - (48 - 24) / 2\n    },\n    expanded: {},\n    icon: {\n      width: 14,\n      height: 14,\n      margin: (24 - 16) / 2,\n      transition: theme?.transitions?.create('transform', {\n        easing: theme?.transitions?.easing?.sharp,\n        duration: theme?.transitions?.duration?.shortest\n      }),\n      '$expanded &': {\n        transform: 'scaleX(-1)'\n      }\n    },\n    switch: {\n      margin: (24 - 16) / 2,\n      transition: theme?.transitions?.create('transform', {\n        easing: theme?.transitions?.easing?.sharp,\n        duration: theme?.transitions?.duration?.shortest\n      }),\n      '$expanded &': {\n        transform: 'scaleX(-1)'\n      }\n    }\n  }),\n  { name: 'SidebarCollapseButton' }\n);\n\n/**\n * Custom styled button used for expanding/collapsing sidebars\n */\nexport const SidebarCollapseButton = (props) => {\n  const classes = useStyles(props);\n  const { expanded, className, id, udprecordid, ...other } = props;\n  const { t } = useTranslation();\n\n  return (\n    <div\n      {...other}\n      className={clsx(className, classes.root, {\n        [classes.expanded]: expanded\n      })}\n    >\n      <FluentIconButton\n        id={id}\n        udprecordid={udprecordid}\n        color='inherit'\n        className={clsx(classes.iconButton, classes.switch)}\n        aria-label={\n          expanded\n            ? t('mainMenuAria.collapseNavigation')\n            : t('mainMenuAria.expandNavigation')\n        }\n        icon={ChevronRightIcon}\n      />\n    </div>\n  );\n};\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { AmbientCard } from '../surfaces/cards/AmbientCard';\nimport { SidebarCollapseButton } from '../../shell/ui/SidebarCollapseButton';\nimport { UtilityBarInportTarget } from '../../utilities/utilityBar/UtilityBarInport';\nimport { ResizableBox } from 'react-resizable';\nimport {\n  APP_RIBBON_SPACE,\n  useBuildEnvironment\n} from '../../shell/ui/useBuildEnvironment';\n\nconst EXPANDED_WIDTH = 288;\nconst COLLAPSED_WIDTH = 78;\nconst MAX_WIDTH = 700;\n\nconst useStyles = makeStyles((theme) => ({\n  resizableBox: {\n    position: 'relative',\n    height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 0\n  },\n  root: {\n    paddingTop: (props) =>\n      props.removePadding || props.sidebarHidden ? 0 : 40,\n    overflow: 'hidden',\n    height: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 0\n  },\n  cardWrapper: {\n    flex: 1,\n    minHeight: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  },\n  headerToggle: {\n    // marginTop: 200\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%'\n  },\n  headerContent: {\n    display: (props) => (props.hideTitleBar ? 'none' : 'flex'),\n    width: '100%',\n    paddingLeft: 12\n  },\n  title: {\n    flex: 1,\n    width: '100%',\n    paddingTop: 7\n  },\n  expandedWidth: {\n    width: 288\n  },\n  handle: {\n    top: 0,\n    right: theme.spacing(-0.75),\n    width: theme.spacing(0.75),\n    zIndex: 10000,\n    height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,\n    display: 'inline-block',\n    position: 'absolute',\n    '&:hover': {\n      cursor: 'col-resize'\n    }\n  },\n  utilityContent: {\n    flex: 1,\n    minHeight: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  }\n}));\n\nexport const UtilitySideBar = (props) => {\n  const {\n    onUtilitySidebarToggleExpandClick,\n    resizable,\n    title,\n    utilitySidebarToggleOverride,\n    isUsingChildren = false,\n    removeTopLayoutUnit = false,\n    collapsedWidth,\n    children,\n    sidebarHidden,\n    handleResize = null\n  } = props;\n  const buildEnv = useBuildEnvironment();\n  const classes = useStyles({\n    ...props,\n    appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0\n  });\n  const [expanded, setExpanded] = useState(true);\n  const [width, setWidth] = useState(EXPANDED_WIDTH);\n  const _collapsedWidth = collapsedWidth ?? COLLAPSED_WIDTH;\n\n  const onResize = (event, { element, size, handle }) => {\n    setWidth(size.width);\n    if (handleResize) {\n      handleResize(size.width);\n    }\n  };\n\n  const handleToggleClick = useCallback(() => {\n    if (onUtilitySidebarToggleExpandClick) {\n      onUtilitySidebarToggleExpandClick();\n    }\n    setExpanded((expanded) => !expanded);\n  }, [onUtilitySidebarToggleExpandClick]);\n\n  useEffect(() => {\n    if (typeof utilitySidebarToggleOverride === 'boolean') {\n      setExpanded(utilitySidebarToggleOverride);\n    }\n  }, [utilitySidebarToggleOverride]);\n\n  return (\n    <ResizableBox\n      className={classes.resizableBox}\n      width={expanded ? width : _collapsedWidth}\n      resizeHandles={resizable && expanded ? ['e'] : []}\n      axis='x'\n      minConstraints={expanded ? [EXPANDED_WIDTH] : [_collapsedWidth]}\n      maxConstraints={[MAX_WIDTH]}\n      onResize={onResize}\n      handle={expanded && <div className={classes.handle} />}\n    >\n      <div\n        className={classes.root}\n        style={{ width: expanded ? width : _collapsedWidth, height: '100%' }}\n      >\n        <div className={classes.cardWrapper}>\n          <AmbientCard\n            fullWidth\n            cardHeight='100%'\n            cardContentHeight='100%'\n            removePadding\n            lastChildBottomPadding={12}\n            removeTopLayoutUnit={removeTopLayoutUnit || sidebarHidden}\n          >\n            <div className={classes.header}>\n              {expanded && (\n                <div className={classes.headerContent}>\n                  <div className={classes.title}>\n                    <Typography variant='h6'> {title} </Typography>\n                  </div>\n                  {/* space for subheader */}\n                </div>\n              )}\n\n              <div className={classes.headerToggle}>\n                <SidebarCollapseButton\n                  id={'udpRecord-UtilitySideBar'}\n                  udprecordid={'udpRecord-UtilitySideBar'}\n                  expanded={expanded}\n                  onClick={handleToggleClick}\n                />\n              </div>\n            </div>\n            {!isUsingChildren && <UtilityBarInportTarget />}\n            {isUsingChildren && (\n              <div className={classes.utilityContent}>{children}</div>\n            )}\n          </AmbientCard>\n        </div>\n      </div>\n    </ResizableBox>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAOA,MAAMA,cAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,QAAQ;EACR,OAAO;EACP,aAAa;EACd;CACD,YAAY;EACV,OAAO;EACP,QAAQ;EACR,YAAY,KAAM,KAAW;EAC9B;CACD,UAAU,EAAE;CACZ,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,QAAS,IAAW;EACpB,YAAY,OAAO,aAAa,OAAO,aAAa;GAClD,QAAQ,OAAO,aAAa,QAAQ;GACpC,UAAU,OAAO,aAAa,UAAU;GACzC,CAAC;EACF,eAAe,EACb,WAAW,cACZ;EACF;CACD,QAAQ;EACN,QAAS,IAAW;EACpB,YAAY,OAAO,aAAa,OAAO,aAAa;GAClD,QAAQ,OAAO,aAAa,QAAQ;GACpC,UAAU,OAAO,aAAa,UAAU;GACzC,CAAC;EACF,eAAe,EACb,WAAW,cACZ;EACF;CACF,GACD,EAAE,MAAM,yBAAyB,CAClC;;;;AAKD,MAAa,yBAAyB,UAAU;CAC9C,MAAM,UAAUA,YAAU,MAAM;CAChC,MAAM,EAAE,UAAU,WAAW,IAAI,aAAa,GAAG,UAAU;CAC3D,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC,GAAI;EACJ,WAAW,KAAK,WAAW,QAAQ,MAAM,GACtC,QAAQ,WAAW,UACrB,CAAC;IAEF,oCAAC;EACK;EACS;EACb,OAAM;EACN,WAAW,KAAK,QAAQ,YAAY,QAAQ,OAAO;EACnD,cACE,WACI,EAAE,kCAAkC,GACpC,EAAE,gCAAgC;EAExC,MAAM;GACN,CACE;;;;;AChEV,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,YAAY;AAElB,MAAM,YAAY,YAAY,WAAW;CACvC,cAAc;EACZ,UAAU;EACV,SAAS,EAAE,qBAAqB,gBAAgB,iBAAiB,GAAG;EACpE,SAAS;EACT,eAAe;EACf,WAAW;EACZ;CACD,MAAM;EACJ,aAAa,UACX,MAAM,iBAAiB,MAAM,gBAAgB,IAAI;EACnD,UAAU;EACV,QAAQ;EACR,SAAS;EACT,eAAe;EACf,WAAW;EACZ;CACD,aAAa;EACX,MAAM;EACN,WAAW;EACX,SAAS;EACT,eAAe;EACf,QAAQ;EACT;CACD,cAAc,EAEb;CACD,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,OAAO;EACR;CACD,eAAe;EACb,UAAU,UAAW,MAAM,eAAe,SAAS;EACnD,OAAO;EACP,aAAa;EACd;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACP,YAAY;EACb;CACD,eAAe,EACb,OAAO,KACR;CACD,QAAQ;EACN,KAAK;EACL,OAAO,MAAM,QAAQ,KAAM;EAC3B,OAAO,MAAM,QAAQ,IAAK;EAC1B,QAAQ;EACR,SAAS,EAAE,qBAAqB,gBAAgB,iBAAiB,GAAG;EACpE,SAAS;EACT,UAAU;EACV,WAAW,EACT,QAAQ,cACT;EACF;CACD,gBAAgB;EACd,MAAM;EACN,WAAW;EACX,SAAS;EACT,eAAe;EACf,QAAQ;EACT;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,EACJ,mCACA,WACA,OACA,8BACA,kBAAkB,OAClB,sBAAsB,OACtB,gBACA,UACA,eACA,eAAe,SACb;CACJ,MAAM,WAAW,qBAAqB;CACtC,MAAM,UAAU,UAAU;EACxB,GAAG;EACH,gBAAgB,WAAW,mBAAmB;EAC/C,CAAC;CACF,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,eAAe;CAClD,MAAM,kBAAkB,kBAAkB;CAE1C,MAAM,YAAY,OAAO,EAAE,SAAS,MAAM,aAAa;AACrD,WAAS,KAAK,MAAM;AACpB,MAAI,aACF,cAAa,KAAK,MAAM;;CAI5B,MAAM,oBAAoB,kBAAkB;AAC1C,MAAI,kCACF,oCAAmC;AAErC,eAAa,aAAa,CAAC,SAAS;IACnC,CAAC,kCAAkC,CAAC;AAEvC,iBAAgB;AACd,MAAI,OAAO,iCAAiC,UAC1C,aAAY,6BAA6B;IAE1C,CAAC,6BAA6B,CAAC;AAElC,QACE,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,WAAW,QAAQ;EAC1B,eAAe,aAAa,WAAW,CAAC,IAAI,GAAG,EAAE;EACjD,MAAK;EACL,gBAAgB,WAAW,CAAC,eAAe,GAAG,CAAC,gBAAgB;EAC/D,gBAAgB,CAAC,UAAU;EACjB;EACV,QAAQ,YAAY,oCAAC,SAAI,WAAW,QAAQ,SAAU;IAEtD,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO;GAAE,OAAO,WAAW,QAAQ;GAAiB,QAAQ;GAAQ;IAEpE,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC;EACC;EACA,YAAW;EACX,mBAAkB;EAClB;EACA,wBAAwB;EACxB,qBAAqB,uBAAuB;IAE5C,oCAAC,SAAI,WAAW,QAAQ,UACrB,YACC,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,cAAW,SAAQ,QAAK,KAAE,OAAM,IAAc,CAC3C,CAEF,EAGR,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,IAAI;EACJ,aAAa;EACH;EACV,SAAS;GACT,CACE,CACF,EACL,CAAC,mBAAmB,oCAAC,6BAAyB,EAC9C,mBACC,oCAAC,SAAI,WAAW,QAAQ,kBAAiB,SAAe,CAE9C,CACV,CACF,CACO"}