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

package/dist/UserFormSideSheet-ExBC8Coy.js

@@ -0,0 +1,399 @@
+import { Form as Form$1, FormButtons, SubmitButton } from "./FormButtons-BL9d-T3e.js";
+import { Field as Field$1 } from "./Field-Idoc1A5M.js";
+import { useHandleAxiosSnackbar } from "./apiHelpers-Bju2gkBq.js";
+import { useUser } from "./useUser-Cn88hlN_.js";
+import { apiMutate as apiMutate$1 } from "./useAxiosMutate-BiRO7ZCN.js";
+import { FluentTextFieldAutoComplete } from "./FluentTextFieldAutoComplete-BQvVv8m_.js";
+import { ADUserTypeEnums } from "./unitySystemEnums-DXk8yS3v.js";
+import { SideSheet } from "./SideSheet-BhKZOd2G.js";
+import { useAxiosGet } from "./useAxiosGet-CAH3ZOZ8.js";
+import { useTenant } from "./useTenant-BGWpH8AX.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Checkbox, Divider, FormControlLabel, IconButton, InputAdornment, LinearProgress, Radio, RadioGroup, TextField, makeStyles } from "@material-ui/core";
+import { useForm } from "react-final-form";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { useSnackbar } from "notistack";
+import { cloneDeep } from "lodash";
+import { useTranslation } from "react-i18next";
+import { Visibility, VisibilityOff } from "@material-ui/icons";
+
+//#region src/shell/ui/addUser/PasswordValidator.jsx
+const validatePassword = (password, lengthRestriction = 0, upperCaseRestriction = false, specialCharacterRestriction = false, numberRestriction = false, lowerCaseRestriction = false) => {
+	let issues = [];
+	if (!password) return [];
+	if (lengthRestriction && password.length < lengthRestriction) issues.push(`Password must be at least ${lengthRestriction} characters long.`);
+	if (upperCaseRestriction && !/[A-Z]/.test(password)) issues.push("Password must contain at least one uppercase letter.");
+	if (specialCharacterRestriction && !/[!@#$%^&*(),.?":{}|<>]/.test(password)) issues.push("Password must contain at least one special character.");
+	if (numberRestriction && !/\d/.test(password)) issues.push("Password must contain at least one number.");
+	if (lowerCaseRestriction && !/[a-z]/.test(password)) issues.push("Password must contain at least one lowercase letter.");
+	return issues;
+};
+const isPasswordValid = (password, lengthRestriction = 0, upperCaseRestriction = false, specialCharacterRestriction = false, numberRestriction = false, lowerCaseRestriction = false) => {
+	return validatePassword(password, lengthRestriction, upperCaseRestriction, specialCharacterRestriction, numberRestriction, lowerCaseRestriction).length === 0;
+};
+const PasswordValidator = ({ password, lengthRestriction, upperCaseRestriction, specialCharacterRestriction, numberRestriction, lowerCaseRestriction }) => {
+	const issues = useMemo(() => validatePassword(password, lengthRestriction, upperCaseRestriction, specialCharacterRestriction, numberRestriction, lowerCaseRestriction), [password]);
+	return issues?.length && password?.length ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { style: { color: "red" } }, issues.map((issue, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, issue, /* @__PURE__ */ React.createElement("br", null))))) : null;
+};
+var PasswordValidator_default = PasswordValidator;
+
+//#endregion
+//#region src/shell/ui/addUser/UserFormFields.jsx
+const removeWhiteSpace = (str) => {
+	if (!str) return "";
+	return str.replace(/\s/g, "");
+};
+const useStyles$1 = makeStyles((theme) => ({
+	field: { marginBottom: theme.spacing(2) },
+	selectors: {
+		display: "flex",
+		flexDirection: "row",
+		marginBottom: theme.spacing(1)
+	},
+	alert: {
+		marginTop: theme.spacing(-2),
+		marginBottom: theme.spacing(2)
+	},
+	accountDisabledCheckbox: { height: "auto" },
+	accountDisabledCheckboxLabel: { marginTop: theme.spacing(1) }
+}));
+const UserFormFields = (props) => {
+	const { editedUser, rolesData, showRolesField = true, handlePasswordTypeChange, passwordType } = props;
+	const classes = useStyles$1();
+	const user = useUser();
+	const [showPassword, setShowPassword] = useState(false);
+	const form = useForm();
+	const { t } = useTranslation();
+	const roles = useMemo(() => {
+		if (!rolesData) return [];
+		rolesData.forEach((r) => {
+			r.label = r.name;
+			r.value = r.name;
+		});
+		return rolesData.sort((a, b) => a.label.localeCompare(b.label)).sort((a, b) => a.productName.localeCompare(b.productName));
+	}, [rolesData]);
+	const handleClickShowPassword = useCallback(() => {
+		setShowPassword(!showPassword);
+	}, [showPassword]);
+	useEffect(() => {
+		if (editedUser) {
+			form.change("givenName", editedUser.givenName);
+			form.change("surname", editedUser.surname);
+			form.change("jobTitle", editedUser.jobTitle);
+			form.change("location", editedUser.location);
+			form.change("mobilePhone", editedUser.mobilePhone);
+			form.change("officePhone", editedUser.officePhone);
+		}
+	}, [editedUser, form]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, editedUser && /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Unity ID"),
+		id: "unity-id",
+		udprecordid: "udpRecord-UserFormFields-unity-id",
+		name: "unityId",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		initialValue: editedUser?.userId,
+		disabled: true
+	}), /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("First Name"),
+		id: "first-name",
+		udprecordid: "udpRecord-UserFormFields-first-name",
+		name: "givenName",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		required: true,
+		initialValue: editedUser?.givenName,
+		disabled: !user.can.CAN_MANAGE_USERS
+	}), /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Last Name"),
+		id: "last-name",
+		udprecordid: "udpRecord-UserFormFields-last-name",
+		name: "surname",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		required: true,
+		initialValue: editedUser?.surname,
+		disabled: !user.can.CAN_MANAGE_USERS
+	}), /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Email"),
+		id: "email",
+		udprecordid: "udpRecord-UserFormFields-email",
+		name: "email",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		required: true,
+		initialValue: editedUser?.email,
+		disabled: editedUser && !user.can.CAN_MODIFY_EMAIL,
+		validate: (value) => {
+			if (!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) || 64 < value.split("@")[0].length) return t("Invalid email address");
+		}
+	}), /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Title"),
+		id: "title",
+		udprecordid: "udpRecord-UserFormFields-title",
+		name: "jobTitle",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		initialValue: typeof editedUser?.jobTitle === "string" ? editedUser?.jobTitle.trim() : null,
+		disabled: !user.can.CAN_MANAGE_USERS,
+		parse: (value) => value
+	}), /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Location"),
+		id: "location",
+		udprecordid: "udpRecord-UserFormFields-location",
+		name: "location",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		initialValue: typeof editedUser?.location === "string" ? editedUser?.location.trim() : null,
+		disabled: !user.can.CAN_MANAGE_USERS,
+		parse: (value) => value
+	}), /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Mobile Phone"),
+		id: "mobile-phone",
+		udprecordid: "udpRecord-UserFormFields-mobile-phone",
+		name: "mobilePhone",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		initialValue: removeWhiteSpace(editedUser?.mobilePhone),
+		disabled: !user.can.CAN_MANAGE_USERS || editedUser?.userType === ADUserTypeEnums.Guest,
+		parse: (value) => value
+	}), /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Office Phone"),
+		id: "office-phone",
+		udprecordid: "udpRecord-UserFormFields-office-phone",
+		name: "officePhone",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		initialValue: removeWhiteSpace(editedUser?.officePhone),
+		disabled: !user.can.CAN_MANAGE_USERS || editedUser?.userType === ADUserTypeEnums.Guest,
+		parse: (value) => value
+	}), showRolesField && /* @__PURE__ */ React.createElement(Field$1, {
+		component: FluentTextFieldAutoComplete,
+		label: t("Select Role"),
+		id: "roles",
+		udprecordid: "udpRecord-UserFormFields-roles",
+		name: "roles",
+		fullWidth: true,
+		options: roles || [],
+		textFieldProps: {
+			id: "roles",
+			name: "roles"
+		},
+		optionKey: "label",
+		isMultiple: true,
+		groupBy: (option) => option.productName,
+		required: true
+	}), !editedUser && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RadioGroup, {
+		"aria-labelledby": "password-type",
+		name: "password-type",
+		value: passwordType,
+		onChange: handlePasswordTypeChange
+	}, /* @__PURE__ */ React.createElement(FormControlLabel, {
+		value: "autoGeneratePassword",
+		control: /* @__PURE__ */ React.createElement(Radio, null),
+		label: t("Auto-generate password"),
+		udprecordid: "udpRecord-UserFormFields-auto-generate-password"
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		value: "createPassword",
+		control: /* @__PURE__ */ React.createElement(Radio, null),
+		label: t("Let me create the password"),
+		udprecordid: "udpRecord-UserFormFields-create-password"
+	})), passwordType === "createPassword" && /* @__PURE__ */ React.createElement(Field$1, {
+		component: TextField,
+		label: t("Password"),
+		id: "passwordProfile",
+		udprecordid: "udpRecord-UserFormFields-passwordProfile",
+		name: "passwordProfile",
+		type: showPassword ? "text" : "password",
+		fullWidth: true,
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		autoComplete: "new-password",
+		validate: (value) => !isPasswordValid(value, 8, true, true, true, true) && /* @__PURE__ */ React.createElement(PasswordValidator_default, {
+			password: value,
+			numberRestriction: true,
+			lowerCaseRestriction: true,
+			upperCaseRestriction: true,
+			lengthRestriction: 8,
+			specialCharacterRestriction: true
+		}),
+		InputProps: { endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(IconButton, {
+			"aria-label": "toggle password visibility",
+			onClick: handleClickShowPassword
+		}, showPassword ? /* @__PURE__ */ React.createElement(Visibility, null) : /* @__PURE__ */ React.createElement(VisibilityOff, null))) }
+	})), !editedUser && /* @__PURE__ */ React.createElement(FormControlLabel, {
+		className: classes.accountDisabledCheckboxLabel,
+		label: t("Do not activate account and do not send a welcome email."),
+		control: /* @__PURE__ */ React.createElement(Field$1, {
+			component: Checkbox,
+			id: "account-disabled",
+			udprecordid: "udpRecord-UserFormFields-account-disabled",
+			name: "locked",
+			type: "checkbox",
+			disabled: !user.can.CAN_MANAGE_USERS,
+			classes
+		})
+	}));
+};
+var UserFormFields_default = UserFormFields;
+
+//#endregion
+//#region src/shell/ui/addUser/UserForm.jsx
+const useStyles = makeStyles((theme) => ({
+	divider: {
+		marginTop: theme.spacing(2),
+		marginBottom: theme.spacing(2)
+	},
+	loadingBar: {
+		bottom: theme.spacing(-2),
+		marginLeft: theme.spacing(-2),
+		marginRight: theme.spacing(-2)
+	}
+}));
+const UserForm = (props) => {
+	const { submitUser, editedUser, creatingUser, tenant, updateCreatedUser, showRolesField = true } = props;
+	const classes = useStyles();
+	const user = useUser();
+	const [passwordType, setPasswordType] = useState("autoGeneratePassword");
+	const { t } = useTranslation();
+	const [{ data: rolesData }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `roles?userId=${user.id}&tenantId=${tenant?.tenantId}`, {}, !!!tenant, false);
+	const handlePasswordTypeChange = useCallback((event) => {
+		setPasswordType(event.target.value);
+	}, []);
+	const handleSubmitUser = useCallback((values) => {
+		if (submitUser) {
+			if (passwordType === "autoGeneratePassword") values.passwordProfile = null;
+			updateCreatedUser && editedUser ? updateCreatedUser(values) : submitUser(values);
+		}
+	}, [
+		submitUser,
+		passwordType,
+		updateCreatedUser,
+		editedUser
+	]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Form$1, { onSubmit: handleSubmitUser }, /* @__PURE__ */ React.createElement(UserFormFields_default, {
+		rolesData,
+		editedUser,
+		showRolesField,
+		handlePasswordTypeChange,
+		passwordType
+	}), user.can.CAN_MANAGE_USERS && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(FormButtons, null, /* @__PURE__ */ React.createElement(SubmitButton, {
+		variant: "contained",
+		color: "primary",
+		disablePristine: false,
+		udprecordid: "udpRecord-UserFormFields-submit"
+	}, editedUser ? t("Update") : t("Create"))))), creatingUser && /* @__PURE__ */ React.createElement(LinearProgress, {
+		className: classes.loadingBar,
+		color: "secondary"
+	}));
+};
+var UserForm_default = UserForm;
+
+//#endregion
+//#region src/shell/ui/addUser/UserFormSideSheet.jsx
+const UserFormSideSheet = ({ open, onClose }) => {
+	const [loading, setLoading] = useState(false);
+	const tenant = useTenant();
+	const { t } = useTranslation();
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const getUserByEmail = useCallback(async (email) => {
+		return await apiMutate$1(ConfigService.securityV1ApiUrl, `users/email/${email}`, { method: "get" });
+	}, []);
+	const createUser = useCallback(async (data) => {
+		return await apiMutate$1(ConfigService.securityV1ApiUrl, `users/${tenant?.activeTenant?.tenantId ?? ""}`, { method: "post" }, data);
+	}, [tenant]);
+	const addUserToTenant = useCallback(async (email) => {
+		return await apiMutate$1(ConfigService.tenantV1ApiUrl, `tenants/${tenant?.activeTenant?.tenantId ?? ""}/${email}`, { method: "post" });
+	}, [tenant]);
+	const updateExistingUser = useCallback(async (data) => {
+		return await apiMutate$1(ConfigService.securityV1ApiUrl, `users/aad/${data.id}`, { method: "patch" }, data);
+	}, []);
+	const fillInValues = (oldValues, newValues) => {
+		const invalidFields = [
+			"id",
+			"displayName",
+			"mail",
+			"userType",
+			"email",
+			"accountEnabled",
+			"mailNickname",
+			"identities",
+			"password",
+			"passwordProfile",
+			"unityId",
+			"unityDefaultTenantId"
+		];
+		for (let field in oldValues) if (!invalidFields.includes(field)) {
+			if (!oldValues[field]) oldValues[field] = newValues[field];
+		}
+		return oldValues;
+	};
+	const handleSubmit = useCallback(async (values) => {
+		setLoading(true);
+		try {
+			if (values.email) values.email = values.email.toLowerCase().trim();
+			const userExists = (await getUserByEmail(values.email)).data;
+			if (userExists) {
+				await updateExistingUser({ data: fillInValues(cloneDeep(userExists), values) });
+				await addUserToTenant(values.email);
+				handleSuccessSnackbar(t("User has been updated and added to the tenant"));
+			} else {
+				await createUser({ data: values });
+				handleSuccessSnackbar(t("User has been created successfully"));
+			}
+			onClose();
+		} catch (error) {
+			handleErrorSnackbar(error.message || t("An error occurred, please ensure you are creating a new user"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		getUserByEmail,
+		createUser,
+		addUserToTenant,
+		updateExistingUser,
+		handleErrorSnackbar,
+		handleSuccessSnackbar,
+		onClose
+	]);
+	return /* @__PURE__ */ React.createElement(SideSheet, {
+		open,
+		onClose,
+		title: t("Add User"),
+		width: 600
+	}, /* @__PURE__ */ React.createElement(UserForm_default, {
+		submitUser: handleSubmit,
+		creatingUser: loading,
+		tenant: tenant?.activeTenant
+	}));
+};
+var UserFormSideSheet_default = UserFormSideSheet;
+
+//#endregion
+export { UserFormSideSheet_default, isPasswordValid };
+//# sourceMappingURL=UserFormSideSheet-ExBC8Coy.js.map

package/dist/UserFormSideSheet-ExBC8Coy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserFormSideSheet-ExBC8Coy.js","names":["useStyles","Field","PasswordValidator","Form","UserFormFields","apiMutate","UserForm"],"sources":["../src/shell/ui/addUser/PasswordValidator.jsx","../src/shell/ui/addUser/UserFormFields.jsx","../src/shell/ui/addUser/UserForm.jsx","../src/shell/ui/addUser/UserFormSideSheet.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nconst validatePassword = (\n  password,\n  lengthRestriction = 0,\n  upperCaseRestriction = false,\n  specialCharacterRestriction = false,\n  numberRestriction = false,\n  lowerCaseRestriction = false\n) => {\n  let issues = [];\n  if(!password) return [];\n  if (lengthRestriction && password.length < lengthRestriction) {\n    issues.push(\n      `Password must be at least ${lengthRestriction} characters long.`\n    );\n  }\n  if (upperCaseRestriction && !/[A-Z]/.test(password)) {\n    issues.push('Password must contain at least one uppercase letter.');\n  }\n  if (specialCharacterRestriction && !/[!@#$%^&*(),.?\":{}|<>]/.test(password)) {\n    issues.push('Password must contain at least one special character.');\n  }\n  if (numberRestriction && !/\\d/.test(password)) {\n    issues.push('Password must contain at least one number.');\n  }\n  if (lowerCaseRestriction && !/[a-z]/.test(password)) {\n    issues.push('Password must contain at least one lowercase letter.');\n  }\n  return issues;\n};\nexport const isPasswordValid = (\n  password,\n  lengthRestriction = 0,\n  upperCaseRestriction = false,\n  specialCharacterRestriction = false,\n  numberRestriction = false,\n  lowerCaseRestriction = false\n) => {\n  return (\n    validatePassword(\n      password,\n      lengthRestriction,\n      upperCaseRestriction,\n      specialCharacterRestriction,\n      numberRestriction,\n      lowerCaseRestriction\n    ).length === 0\n  );\n};\nconst PasswordValidator = ({\n  password,\n  lengthRestriction,\n  upperCaseRestriction,\n  specialCharacterRestriction,\n  numberRestriction,\n  lowerCaseRestriction,\n}) => {\n  const issues = useMemo(\n    () =>\n      validatePassword(\n        password,\n        lengthRestriction,\n        upperCaseRestriction,\n        specialCharacterRestriction,\n        numberRestriction,\n        lowerCaseRestriction\n      ),\n    [password]\n  );\n\n  return issues?.length && password?.length ? (\n    <div>\n      <p style={{ color: 'red' }}>\n        {issues.map((issue, index) => (\n          <>\n            {issue}\n            <br />\n          </>\n        ))}\n      </p>\n    </div>\n  ) : null;\n};\n\nexport default PasswordValidator;\n","import {\n  Checkbox,\n  FormControlLabel,\n  makeStyles,\n  TextField,\n  RadioGroup,\n  Radio,\n  InputAdornment,\n  IconButton,\n} from '@material-ui/core';\nimport React, { useState, useMemo, useCallback, useEffect } from 'react';\nimport { ADUserTypeEnums } from '../../../enums/unitySystemEnums';\nimport { useUser } from '../../../utilities/auth/useUser';\nimport { Field } from '../../../utilities/form/Field';\nimport { Visibility, VisibilityOff } from '@material-ui/icons';\nimport { useForm } from 'react-final-form';\nimport PasswordValidator, { isPasswordValid } from './PasswordValidator';\nimport { useTranslation } from 'react-i18next';\nimport { FluentTextFieldAutoComplete } from '../../../UI/inputs/textField/FluentTextFieldAutoComplete';\n\n\nconst removeWhiteSpace = str => {\n  if (!str) {\n    return '';\n  }\n  return str.replace(/\\s/g, '');\n};\n\n\n\nconst useStyles = makeStyles(theme => ({\n  field: {\n    marginBottom: theme.spacing(2),\n  },\n  selectors: {\n    display: 'flex',\n    flexDirection: 'row',\n    marginBottom: theme.spacing(1),\n  },\n  alert: {\n    marginTop: theme.spacing(-2),\n    marginBottom: theme.spacing(2),\n  },\n  accountDisabledCheckbox: {\n    height: 'auto',\n  },\n  accountDisabledCheckboxLabel: {\n    marginTop: theme.spacing(1),\n  },\n}));\n\n\nconst UserFormFields = props => {\n  const {\n    editedUser,\n    rolesData,\n    showRolesField = true,\n    handlePasswordTypeChange,\n    passwordType,\n  } = props;\n  const classes = useStyles();\n  const user = useUser();\n  const [showPassword, setShowPassword] = useState(false);\n  const form = useForm();\n  const { t } = useTranslation();\n\n  const roles = useMemo(() => {\n    if (!rolesData) {\n      return [];\n    }\n    rolesData.forEach(r => {\n      r.label = r.name;\n      r.value = r.name;\n    });\n    return rolesData\n      .sort((a, b) => a.label.localeCompare(b.label))\n      .sort((a, b) => a.productName.localeCompare(b.productName));\n  }, [rolesData]);\n\n\n  const handleClickShowPassword = useCallback(() => {\n    setShowPassword(!showPassword);\n  }, [showPassword]);\n\n  useEffect(() => {\n    if (editedUser) {\n      form.change('givenName', editedUser.givenName);\n      form.change('surname', editedUser.surname);\n      form.change('jobTitle', editedUser.jobTitle);\n      form.change('location', editedUser.location);\n      form.change('mobilePhone', editedUser.mobilePhone);\n      form.change('officePhone', editedUser.officePhone);\n    }\n  }, [editedUser, form]);\n\n  return (\n    <>\n      {editedUser && (\n        <Field\n          component={TextField}\n          label={t(\"Unity ID\")}\n          id=\"unity-id\"\n          udprecordid=\"udpRecord-UserFormFields-unity-id\"\n          name=\"unityId\"\n          fullWidth\n          variant=\"outlined\"\n          margin=\"normal\"\n          size=\"small\"\n          initialValue={\n             editedUser?.userId\n          }\n          disabled={true}\n        />\n      )}\n      <Field\n        component={TextField}\n        label={t(\"First Name\")}\n        id=\"first-name\"\n        udprecordid=\"udpRecord-UserFormFields-first-name\"\n        name=\"givenName\"\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        required\n        initialValue={editedUser?.givenName}\n        disabled={!user.can.CAN_MANAGE_USERS}\n      />\n      <Field\n        component={TextField}\n        label={t(\"Last Name\")}\n        id=\"last-name\"\n        udprecordid=\"udpRecord-UserFormFields-last-name\"\n        name=\"surname\"\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        required\n        initialValue={editedUser?.surname}\n        disabled={!user.can.CAN_MANAGE_USERS}\n      />\n      <Field\n        component={TextField}\n        label={t(\"Email\")}\n        id=\"email\"\n        udprecordid=\"udpRecord-UserFormFields-email\"\n        name=\"email\"\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        required\n        initialValue={editedUser?.email}\n        disabled={editedUser && !user.can.CAN_MODIFY_EMAIL}\n        validate={value => {\n          if (\n            !/^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/.test(\n              value\n            ) ||\n            64 < value.split('@')[0].length\n          ) {\n            return t('Invalid email address');\n          }\n        }}\n      />\n      <Field\n        component={TextField}\n        label={t(\"Title\")}\n        id=\"title\"\n        udprecordid=\"udpRecord-UserFormFields-title\"\n        name=\"jobTitle\"\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        initialValue={\n          typeof editedUser?.jobTitle === 'string'\n            ? editedUser?.jobTitle.trim()\n            : null\n        }\n        disabled={!user.can.CAN_MANAGE_USERS}\n        parse={value => value} // makes empty string values get added to form submission object\n      />\n      <Field\n        component={TextField}\n        label={t(\"Location\")}\n        id=\"location\"\n        udprecordid=\"udpRecord-UserFormFields-location\"\n        name=\"location\"\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        initialValue={\n          typeof editedUser?.location === 'string'\n            ? editedUser?.location.trim()\n            : null\n        }\n        disabled={!user.can.CAN_MANAGE_USERS}\n        parse={value => value}\n      />\n      <Field\n        component={TextField}\n        label={t(\"Mobile Phone\")}\n        id=\"mobile-phone\"\n        udprecordid=\"udpRecord-UserFormFields-mobile-phone\"\n        name=\"mobilePhone\"\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        initialValue={removeWhiteSpace(editedUser?.mobilePhone)}\n        disabled={\n          !user.can.CAN_MANAGE_USERS ||\n          editedUser?.userType === ADUserTypeEnums.Guest\n        }\n        parse={value => value}\n      />\n      <Field\n        component={TextField}\n        label={t(\"Office Phone\")}\n        id=\"office-phone\"\n        udprecordid=\"udpRecord-UserFormFields-office-phone\"\n        name=\"officePhone\"\n        fullWidth\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        initialValue={removeWhiteSpace(editedUser?.officePhone)}\n        disabled={\n          !user.can.CAN_MANAGE_USERS ||\n          editedUser?.userType === ADUserTypeEnums.Guest\n        }\n        parse={value => value}\n      />\n      {showRolesField && (\n        <Field\n          component={FluentTextFieldAutoComplete}\n          label={t(\"Select Role\")}\n          id=\"roles\"\n          udprecordid=\"udpRecord-UserFormFields-roles\"\n          name=\"roles\"\n          fullWidth\n          options={roles || []}\n          textFieldProps={{\n            id: 'roles',\n            name: 'roles',\n          }}\n          optionKey={'label'}\n          isMultiple={true}\n          groupBy={(option) => option.productName}\n          required\n        />\n      )}\n      {!editedUser && (\n        <>\n          <RadioGroup\n            aria-labelledby=\"password-type\"\n            name=\"password-type\"\n            value={passwordType}\n            onChange={handlePasswordTypeChange}\n          >\n            <FormControlLabel\n              value=\"autoGeneratePassword\"\n              control={<Radio />}\n              label={t(\"Auto-generate password\")}\n              udprecordid=\"udpRecord-UserFormFields-auto-generate-password\"\n            />\n            <FormControlLabel\n              value=\"createPassword\"\n              control={<Radio />}\n              label={t(\"Let me create the password\")}\n              udprecordid=\"udpRecord-UserFormFields-create-password\"\n            />\n          </RadioGroup>\n          {passwordType === 'createPassword' && (\n            <Field\n              component={TextField}\n              label={t(\"Password\")}\n              id=\"passwordProfile\"\n              udprecordid=\"udpRecord-UserFormFields-passwordProfile\"\n              name=\"passwordProfile\"\n              type={showPassword ? 'text' : 'password'}\n              fullWidth\n              variant=\"outlined\"\n              margin=\"normal\"\n              size=\"small\"\n              autoComplete=\"new-password\"\n              validate={value =>\n                !isPasswordValid(value, 8, true, true, true, true) && (\n                  <PasswordValidator\n                    password={value}\n                    numberRestriction\n                    lowerCaseRestriction\n                    upperCaseRestriction\n                    lengthRestriction={8}\n                    specialCharacterRestriction\n                  />\n                )\n              }\n              InputProps={{\n                // <-- This is where the toggle button is added.\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    <IconButton\n                      aria-label=\"toggle password visibility\"\n                      onClick={handleClickShowPassword}\n                    >\n                      {showPassword ? <Visibility /> : <VisibilityOff />}\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              }}\n            />\n          )}\n        </>\n      )}\n      {!editedUser && (\n        <FormControlLabel\n          className={classes.accountDisabledCheckboxLabel}\n          label={t('Do not activate account and do not send a welcome email.')}\n          control={\n            <Field\n              component={Checkbox}\n              id=\"account-disabled\"\n              udprecordid=\"udpRecord-UserFormFields-account-disabled\"\n              name={'locked'}\n              type=\"checkbox\"\n              disabled={!user.can.CAN_MANAGE_USERS}\n              classes={classes}\n            />\n          }\n        />\n      )}\n    </>\n  );\n};\nexport default UserFormFields;\n","import { Divider, LinearProgress, makeStyles } from '@material-ui/core';\nimport React, { useCallback, useState } from 'react';\nimport { Form } from '../../../utilities/form/Form';\nimport { FormButtons } from '../../../utilities/form/FormButtons';\nimport { SubmitButton } from '../../../utilities/form/SubmitButton';\nimport { useAxiosGet } from '../../../../src/utilities/useAxiosGet';\nimport { useUser } from '../../../../src/utilities/auth/useUser';\nimport UserFormFields from './UserFormFields';\nimport { useTranslation } from 'react-i18next';\nimport { ConfigService } from 'udp-react-stencil-component-library';\n\n\nconst useStyles = makeStyles(theme => ({\n  divider: {\n    marginTop: theme.spacing(2),\n    marginBottom: theme.spacing(2),\n  },\n  loadingBar: {\n    bottom: theme.spacing(-2),\n    marginLeft: theme.spacing(-2),\n    marginRight: theme.spacing(-2),\n  },\n}));\n\nconst UserForm = props => {\n  const {\n    submitUser,\n    editedUser,\n    creatingUser,\n    tenant,\n    updateCreatedUser,\n    showRolesField = true,\n  } = props;\n  const classes = useStyles();\n  const user = useUser();\n  const [passwordType, setPasswordType] = useState('autoGeneratePassword');\n  const { t } = useTranslation();\n\n\n  // GET list of roles\n  const [{ data: rolesData }] = useAxiosGet(\n    ConfigService.tenantV1ApiUrl,\n    `roles?userId=${user.id}&tenantId=${tenant?.tenantId}`,\n    {},\n    !!!tenant,\n    false\n  );\n\n  const handlePasswordTypeChange = useCallback(event => {\n    setPasswordType(event.target.value);\n  }, []);\n\n  const handleSubmitUser = useCallback(\n    values => {\n      if (submitUser) {\n        if (passwordType === 'autoGeneratePassword') {\n          values.passwordProfile = null;\n        }\n        updateCreatedUser && editedUser\n          ? updateCreatedUser(values)\n          : submitUser(values);\n      }\n    },\n    [submitUser, passwordType, updateCreatedUser, editedUser]\n  );\n\n  return (\n    <>\n      <Form onSubmit={handleSubmitUser}>\n        <UserFormFields\n          rolesData={rolesData}\n          editedUser={editedUser}\n          showRolesField={showRolesField}\n          handlePasswordTypeChange={handlePasswordTypeChange}\n          passwordType={passwordType}\n        />\n        {user.can.CAN_MANAGE_USERS && (\n          <>\n            <div className={classes.divider}>\n              <Divider />\n            </div>\n            <FormButtons>\n              <SubmitButton\n                variant=\"contained\"\n                color=\"primary\"\n                disablePristine={false}\n                udprecordid=\"udpRecord-UserFormFields-submit\"\n              >\n                {editedUser ? t('Update') : t('Create')}\n              </SubmitButton>\n            </FormButtons>\n          </>\n        )}\n      </Form>\n      {creatingUser && (\n        <LinearProgress className={classes.loadingBar} color=\"secondary\" />\n      )}\n    </>\n  );\n};\nexport default UserForm;\n","import React, { useCallback, useState } from 'react';\nimport { SideSheet } from '../../../UI/surfaces/SideSheet';\nimport UserForm from './UserForm';\nimport { useSnackbar } from 'notistack';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { useTenant } from '../../../utilities/tenant/useTenant';\nimport { useHandleAxiosSnackbar } from '../../../utilities/apiHelpers';\nimport { cloneDeep } from 'lodash';\nimport { useTranslation } from 'react-i18next';\nimport { ConfigService } from 'udp-react-stencil-component-library';\n\n\nconst UserFormSideSheet = ({\n  open,\n  onClose,\n}) => {\n  const [loading, setLoading] = useState(false);\n  const tenant = useTenant();\n  const { t } = useTranslation();\n  const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();\n\n  // Helper functions\n  const getUserByEmail = useCallback(\n    async email => {\n      return await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `users/email/${email}`,\n        { method: 'get' }\n      );\n    },\n    []\n  );\n\n  const createUser = useCallback(\n    async data => {\n      return await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `users/${tenant?.activeTenant?.tenantId ?? ''}`,\n        { method: 'post' },\n        data\n      );\n    },\n    [tenant]\n  );\n\n  const addUserToTenant = useCallback(\n    async email => {\n      return await apiMutate(\n        ConfigService.tenantV1ApiUrl,\n        `tenants/${tenant?.activeTenant?.tenantId ?? ''}/${email}`,\n        { method: 'post' }\n      );\n    },\n    [tenant]\n  );\n\n  const updateExistingUser = useCallback(\n    async data => {\n      return await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `users/aad/${data.id}`,\n        { method: 'patch' },\n        data\n      );\n    },\n    []\n  );\n\n  const fillInValues = (oldValues, newValues) => {\n    const invalidFields = [\n      'id', 'displayName', 'mail', 'userType', 'email',\n      'accountEnabled', 'mailNickname', 'identities',\n      'password', 'passwordProfile', 'unityId',\n      'unityDefaultTenantId'\n    ];\n    for (let field in oldValues) {\n      if (!invalidFields.includes(field)) {\n        if (!oldValues[field]) {\n          oldValues[field] = newValues[field];\n        }\n      }\n    }\n    return oldValues;\n  };\n\n  const handleSubmit = useCallback(\n    async values => {\n      setLoading(true);\n      try {\n        if (values.email) {\n          values.email = values.email.toLowerCase().trim();\n        }\n\n        const userExistsResponse = await getUserByEmail(values.email);\n        const userExists = userExistsResponse.data;\n\n        if (userExists) {\n          const existingUser = cloneDeep(userExists);\n          const updatedValues = fillInValues(existingUser, values);\n\n          // Update existing user and add to tenant\n          await updateExistingUser({ data: updatedValues });\n          await addUserToTenant(values.email);\n          handleSuccessSnackbar(t('User has been updated and added to the tenant'))\n        } else {\n          // Create a new user\n          await createUser({ data: values });\n          handleSuccessSnackbar(t('User has been created successfully'))\n        }\n\n        onClose(); // Close the SideSheet after successful submission\n      } catch (error) {\n        handleErrorSnackbar(error.message || t('An error occurred, please ensure you are creating a new user'))\n      } finally {\n        setLoading(false);\n      }\n    },\n    [\n      getUserByEmail,\n      createUser,\n      addUserToTenant,\n      updateExistingUser,\n      handleErrorSnackbar,\n      handleSuccessSnackbar,\n      onClose,\n    ]\n  );\n\n  return (\n    <SideSheet\n      open={open}\n      onClose={onClose}\n      title={t(\"Add User\")}\n      width={600} // Adjust the width as needed\n    >\n      <UserForm\n        submitUser={handleSubmit}\n        creatingUser={loading}\n        tenant={tenant?.activeTenant}\n      />\n    </SideSheet>\n  );\n};\n\nexport default UserFormSideSheet;\n"],"mappings":"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"}

package/dist/UtilityBar-CoBkrOKT.js

@@ -0,0 +1,98 @@
+import { FluentIconButton } from "./FluentIconButton-le92OnEc.js";
+import { useShellStore } from "./shellStore-Bqwtbs_K.js";
+import { useActionState } from "./useActions-C4qJAr_e.js";
+import { InquiryHeaderSecondaryAlertTarget, InquiryHeaderSecondaryTarget } from "./InquiryHeaderSecondaryAlert-BnYD5HYk.js";
+import { SubHeaderActionsTarget } from "./SubHeaderAction-vXEAp3A2.js";
+import { InquiryHeaderControlTarget, InquiryHeaderTitleTarget } from "./InquiryHeaderControl-D8G6OuEN.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" : ""}` }, /* @__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 };
+//# sourceMappingURL=UtilityBar-CoBkrOKT.js.map

package/dist/UtilityBar-CoBkrOKT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityBar-CoBkrOKT.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  // const [expanded, setExpanded] = useState(false)\n  // const [expandedSecondary, setExpandedSecondary] = useState(false)\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' : ''}`}>\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;CAInC,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,QAC9C,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-BZbPE650.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 { UtilityBarInport, UtilityBarInportTarget };
+//# sourceMappingURL=UtilityBarInport-BZbPE650.js.map

package/dist/UtilityBarInport-BZbPE650.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityBarInport-BZbPE650.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,UAAW,GAAG,gBAAgB;AAEhD,QAAO,oCAAC,kBAAkB,cAAQ,SAAoC"}