@thunderid/react 1.5.0 → 1.7.0

package/dist/components/account/UserDropdown/UserDropdown.js

@@ -0,0 +1,112 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import UserProfile_default from "../UserProfile/UserProfile.js";
+import { BaseUserDropdown } from "./BaseUserDropdown.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/account/UserDropdown/UserDropdown.tsx
+/**
+* UserDropdown component displays a user avatar with a dropdown menu.
+* When clicked, it shows a popover with customizable menu items.
+* This component is the React-specific implementation that uses the BaseUserDropdown
+* and automatically retrieves the user data from ThunderID context.
+*
+* Supports render props for complete customization of the dropdown appearance and behavior.
+*
+* @example
+* ```tsx
+* // Basic usage - will use user from ThunderID context
+* <UserDropdown menuItems={[
+*   { label: 'Profile', onClick: () => {} },
+*   { label: 'Settings', href: '/settings' },
+*   { label: 'Sign Out', onClick: () => {} }
+* ]} />
+*
+* // With custom configuration
+* <UserDropdown
+*   showTriggerLabel={true}
+*   avatarSize={40}
+*   fallback={<div>Please sign in</div>}
+* />
+*
+* // Using render props for complete customization
+* <UserDropdown>
+*   {({ user, isLoading, openProfile, signOut }) => (
+*     <div>
+*       <button onClick={openProfile}>
+*         {user?.name || 'Loading...'}
+*       </button>
+*       <button onClick={signOut}>Logout</button>
+*     </div>
+*   )}
+* </UserDropdown>
+*
+* // Using partial render props
+* <UserDropdown
+*   renderTrigger={({ user, openProfile }) => (
+*     <button onClick={openProfile} className="custom-trigger">
+*       Welcome, {user?.name}!
+*     </button>
+*   )}
+* />
+* ```
+*/
+const UserDropdown = ({ children, renderTrigger, renderDropdown, onManageProfile: onManageProfileOverride, onSignOut,...rest }) => {
+	const { user, isLoading, signOut, meta } = useThunderID_default();
+	const [isProfileOpen, setIsProfileOpen] = useState(false);
+	const handleManageProfile = () => {
+		if (onManageProfileOverride) {
+			onManageProfileOverride();
+			return;
+		}
+		setIsProfileOpen(true);
+	};
+	const handleSignOut = () => {
+		signOut();
+		if (onSignOut) onSignOut();
+	};
+	const closeProfile = () => {
+		setIsProfileOpen(false);
+	};
+	const renderProps = {
+		closeProfile,
+		isLoading,
+		isProfileOpen,
+		meta,
+		openProfile: handleManageProfile,
+		signOut: handleSignOut,
+		user
+	};
+	if (children) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(renderProps), !onManageProfileOverride && /* @__PURE__ */ jsx(UserProfile_default, {
+		mode: "popup",
+		open: isProfileOpen,
+		onOpenChange: setIsProfileOpen
+	})] });
+	if (renderTrigger || renderDropdown) return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx(BaseUserDropdown, {
+		user,
+		isLoading,
+		onManageProfile: handleManageProfile,
+		onSignOut: handleSignOut,
+		...rest
+	}), !onManageProfileOverride && /* @__PURE__ */ jsx(UserProfile_default, {
+		mode: "popup",
+		open: isProfileOpen,
+		onOpenChange: setIsProfileOpen
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BaseUserDropdown, {
+		user,
+		isLoading,
+		onManageProfile: handleManageProfile,
+		onSignOut: handleSignOut,
+		...rest
+	}), !onManageProfileOverride && isProfileOpen && /* @__PURE__ */ jsx(UserProfile_default, {
+		mode: "popup",
+		open: isProfileOpen,
+		onOpenChange: setIsProfileOpen
+	})] });
+};
+var UserDropdown_default = UserDropdown;
+
+//#endregion
+export { UserDropdown_default as default };
+//# sourceMappingURL=UserDropdown.js.map

package/dist/components/account/UserDropdown/UserDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDropdown.js","names":["UserDropdown: FC<UserDropdownProps>","useThunderID","renderProps: UserDropdownRenderProps","UserProfile","BaseUserDropdownComponent"],"sources":["../../../../src/components/account/UserDropdown/UserDropdown.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FlowMetadataResponse} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState} from 'react';\nimport {BaseUserDropdown as BaseUserDropdownComponent, BaseUserDropdownProps} from './BaseUserDropdown';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport UserProfile from '../UserProfile/UserProfile';\n\n/**\n * Render props data passed to the children function\n */\nexport interface UserDropdownRenderProps {\n  /** Function to close the profile dialog */\n  closeProfile: () => void;\n  /** Whether user data is currently loading */\n  isLoading: boolean;\n  /** Whether the profile dialog is currently open */\n  isProfileOpen: boolean;\n  /** Flow metadata returned by the platform (v2 only). `null` while loading or unavailable. */\n  meta: FlowMetadataResponse | null;\n  /** Function to open the user profile dialog */\n  openProfile: () => void;\n  /** Function to sign out the user */\n  signOut: () => void;\n  /** The authenticated user object */\n  user: any;\n}\n\n/**\n * Props for the UserDropdown component.\n * Extends BaseUserDropdownProps but excludes user, onManageProfile, and onSignOut since they're handled internally\n */\nexport type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile'> & {\n  /**\n   * Render prop function that receives user state and actions.\n   * When provided, this completely replaces the default dropdown rendering.\n   */\n  children?: (props: UserDropdownRenderProps) => ReactNode;\n  /**\n   * Called instead of opening the built-in \"Manage Profile\" popup when the \"Manage Profile\"\n   * menu item (see `manageProfileLabel`) is clicked. Use this when the app has its own\n   * profile/account page it wants to navigate to instead, for example with a router's\n   * `navigate()`.\n   *\n   * @example\n   * ```tsx\n   * <UserDropdown manageProfileLabel=\"Manage Account\" onManageProfile={() => navigate('/account')} />\n   * ```\n   */\n  onManageProfile?: () => void;\n  /**\n   * Custom render function for the dropdown content.\n   * When provided, this replaces just the dropdown content while keeping the trigger.\n   */\n  renderDropdown?: (props: UserDropdownRenderProps) => ReactNode;\n  /**\n   * Custom render function for the trigger button.\n   * When provided, this replaces just the trigger button while keeping the dropdown.\n   */\n  renderTrigger?: (props: UserDropdownRenderProps) => ReactNode;\n};\n\n/**\n * UserDropdown component displays a user avatar with a dropdown menu.\n * When clicked, it shows a popover with customizable menu items.\n * This component is the React-specific implementation that uses the BaseUserDropdown\n * and automatically retrieves the user data from ThunderID context.\n *\n * Supports render props for complete customization of the dropdown appearance and behavior.\n *\n * @example\n * ```tsx\n * // Basic usage - will use user from ThunderID context\n * <UserDropdown menuItems={[\n *   { label: 'Profile', onClick: () => {} },\n *   { label: 'Settings', href: '/settings' },\n *   { label: 'Sign Out', onClick: () => {} }\n * ]} />\n *\n * // With custom configuration\n * <UserDropdown\n *   showTriggerLabel={true}\n *   avatarSize={40}\n *   fallback={<div>Please sign in</div>}\n * />\n *\n * // Using render props for complete customization\n * <UserDropdown>\n *   {({ user, isLoading, openProfile, signOut }) => (\n *     <div>\n *       <button onClick={openProfile}>\n *         {user?.name || 'Loading...'}\n *       </button>\n *       <button onClick={signOut}>Logout</button>\n *     </div>\n *   )}\n * </UserDropdown>\n *\n * // Using partial render props\n * <UserDropdown\n *   renderTrigger={({ user, openProfile }) => (\n *     <button onClick={openProfile} className=\"custom-trigger\">\n *       Welcome, {user?.name}!\n *     </button>\n *   )}\n * />\n * ```\n */\nconst UserDropdown: FC<UserDropdownProps> = ({\n  children,\n  renderTrigger,\n  renderDropdown,\n  onManageProfile: onManageProfileOverride,\n  onSignOut,\n  ...rest\n}: UserDropdownProps): ReactElement => {\n  const {user, isLoading, signOut, meta} = useThunderID();\n  const [isProfileOpen, setIsProfileOpen] = useState(false);\n\n  const handleManageProfile = (): void => {\n    if (onManageProfileOverride) {\n      onManageProfileOverride();\n      return;\n    }\n    setIsProfileOpen(true);\n  };\n\n  const handleSignOut = (): void => {\n    signOut();\n    if (onSignOut) {\n      onSignOut();\n    }\n  };\n\n  const closeProfile = (): void => {\n    setIsProfileOpen(false);\n  };\n\n  // Prepare render props data\n  const renderProps: UserDropdownRenderProps = {\n    closeProfile,\n    isLoading: isLoading,\n    isProfileOpen,\n    meta,\n    openProfile: handleManageProfile,\n    signOut: handleSignOut,\n    user,\n  };\n\n  // If children render prop is provided, use it for complete customization\n  if (children) {\n    return (\n      <>\n        {children(renderProps)}\n        {!onManageProfileOverride && <UserProfile mode=\"popup\" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}\n      </>\n    );\n  }\n\n  // If partial render props are provided, customize specific parts\n  if (renderTrigger || renderDropdown) {\n    // This would require significant changes to BaseUserDropdown to support partial customization\n    // For now, we'll provide a simple implementation that shows how it could work\n    return (\n      <>\n        {renderTrigger ? (\n          renderTrigger(renderProps)\n        ) : (\n          <BaseUserDropdownComponent\n            user={user}\n            isLoading={isLoading}\n            onManageProfile={handleManageProfile}\n            onSignOut={handleSignOut}\n            {...rest}\n          />\n        )}\n        {/* Note: renderDropdown would need BaseUserDropdown modifications to implement properly */}\n        {!onManageProfileOverride && <UserProfile mode=\"popup\" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}\n      </>\n    );\n  }\n\n  // Default behavior - use BaseUserDropdown as before\n  return (\n    <>\n      <BaseUserDropdownComponent\n        user={user}\n        isLoading={isLoading}\n        onManageProfile={handleManageProfile}\n        onSignOut={handleSignOut}\n        {...rest}\n      />\n      {!onManageProfileOverride && isProfileOpen && (\n        <UserProfile mode=\"popup\" open={isProfileOpen} onOpenChange={setIsProfileOpen} />\n      )}\n    </>\n  );\n};\n\nexport default UserDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GA,MAAMA,gBAAuC,EAC3C,UACA,eACA,gBACA,iBAAiB,yBACjB,UACA,GAAG,WACkC;CACrC,MAAM,EAAC,MAAM,WAAW,SAAS,SAAQC,sBAAc;CACvD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CAEzD,MAAM,4BAAkC;AACtC,MAAI,yBAAyB;AAC3B,4BAAyB;AACzB;;AAEF,mBAAiB,KAAK;;CAGxB,MAAM,sBAA4B;AAChC,WAAS;AACT,MAAI,UACF,YAAW;;CAIf,MAAM,qBAA2B;AAC/B,mBAAiB,MAAM;;CAIzB,MAAMC,cAAuC;EAC3C;EACW;EACX;EACA;EACA,aAAa;EACb,SAAS;EACT;EACD;AAGD,KAAI,SACF,QACE,8CACG,SAAS,YAAY,EACrB,CAAC,2BAA2B,oBAACC;EAAY,MAAK;EAAQ,MAAM;EAAe,cAAc;GAAoB,IAC7G;AAKP,KAAI,iBAAiB,eAGnB,QACE,8CACG,gBACC,cAAc,YAAY,GAE1B,oBAACC;EACO;EACK;EACX,iBAAiB;EACjB,WAAW;EACX,GAAI;GACJ,EAGH,CAAC,2BAA2B,oBAACD;EAAY,MAAK;EAAQ,MAAM;EAAe,cAAc;GAAoB,IAC7G;AAKP,QACE,8CACE,oBAACC;EACO;EACK;EACX,iBAAiB;EACjB,WAAW;EACX,GAAI;GACJ,EACD,CAAC,2BAA2B,iBAC3B,oBAACD;EAAY,MAAK;EAAQ,MAAM;EAAe,cAAc;GAAoB,IAElF;;AAIP,2BAAe"}

package/dist/components/account/UserProfile/BaseUserProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/BaseUserProfile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,IAAI,EAAiC,WAAW,EAAa,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAChH,OAAO,EAAC,EAAE,EAAE,YAAY,EAAmC,MAAM,OAAO,CAAC;AAyCzE,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,CAAC,EAAE;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;QAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KAC9B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACrD;AA+BD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAopB7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/account/UserProfile/BaseUserProfile.js

@@ -0,0 +1,501 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
+import Card_default from "../../primitives/Card/Card.js";
+import Checkbox_default from "../../primitives/Checkbox/Checkbox.js";
+import DatePicker_default from "../../primitives/DatePicker/DatePicker.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import Divider_default from "../../primitives/Divider/Divider.js";
+import BaseUserProfile_styles_default from "./BaseUserProfile.styles.js";
+import getMappedUserProfileValue_default from "../../../utils/getMappedUserProfileValue.js";
+import getDisplayName_default from "../../../utils/getDisplayName.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import Dialog_default from "../../primitives/Dialog/Dialog.js";
+import MultiInput_default from "../../primitives/MultiInput/MultiInput.js";
+import { bem, startCase, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useCallback, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/account/UserProfile/BaseUserProfile.tsx
+const fieldsToSkip = [
+	"roles.default",
+	"active",
+	"groups",
+	"accountLocked",
+	"accountDisabled",
+	"oneTimePassword",
+	"userSourceId",
+	"idpType",
+	"localCredentialExists",
+	"active",
+	"ResourceType",
+	"ExternalID",
+	"MetaData",
+	"verifiedMobileNumbers",
+	"verifiedEmailAddresses",
+	"phoneNumbers.mobile",
+	"emailAddresses",
+	"preferredMFAOption",
+	"attributes",
+	"picture",
+	"isReadOnly",
+	"isReadonly"
+];
+const readonlyFields = [
+	"attributes",
+	"id",
+	"isReadOnly",
+	"ouId",
+	"username",
+	"sub"
+];
+const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, profile, flattenedProfile, userSchema, mode = "inline", title, attributeMapping = {}, editable = true, onOpenChange, onUpdate, open = false, error = null, isLoading = false, preferences, showFields = [], hideFields = [], displayNameAttributes = [] }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const [editedUser, setEditedUser] = useState(flattenedProfile || profile);
+	const [editingFields, setEditingFields] = useState({});
+	const [fieldErrors, setFieldErrors] = useState({});
+	const { t } = useTranslation_default(preferences?.i18n);
+	useEffect(() => {
+		const nextUser = flattenedProfile ?? profile;
+		if (!nextUser) return;
+		setEditedUser((prev) => {
+			if (!prev) return nextUser;
+			const updated = { ...nextUser };
+			Object.keys(prev).forEach((key) => {
+				if (editingFields[key]) updated[key] = prev[key];
+			});
+			return updated;
+		});
+	}, [
+		flattenedProfile,
+		profile,
+		editingFields
+	]);
+	/**
+	* Determines if a field should be visible based on showFields, hideFields, and fallback fieldsToSkip arrays.
+	* When isSchemaBased is true, fieldsToSkip is bypassed so schema-defined fields render dynamically.
+	*/
+	const shouldShowField = useCallback((fieldName, isSchemaBased = false) => {
+		if (!isSchemaBased && fieldsToSkip.includes(fieldName)) return false;
+		if (hideFields.length > 0 && hideFields.includes(fieldName)) return false;
+		if (showFields.length > 0) return showFields.includes(fieldName);
+		return true;
+	}, [showFields, hideFields]);
+	const PencilIcon = () => /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+	});
+	const toggleFieldEdit = useCallback((fieldName) => {
+		setEditingFields((prev) => ({
+			...prev,
+			[fieldName]: !prev[fieldName]
+		}));
+	}, []);
+	const getFieldPlaceholder = useCallback((schema) => {
+		const { type, displayName, description, name } = schema;
+		const fieldLabel = displayName || description || name || "value";
+		switch (type) {
+			case "DATE_TIME":
+			case "STRING":
+			default: return t("elements.fields.generic.placeholder", { field: fieldLabel.toLowerCase() });
+		}
+	}, [t]);
+	const formatLabel = useCallback((key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "), []);
+	const styles = BaseUserProfile_styles_default(theme, colorScheme);
+	const ObjectDisplay = ({ data }) => {
+		if (!data || typeof data !== "object") return null;
+		return /* @__PURE__ */ jsx("table", {
+			className: styles.value,
+			children: /* @__PURE__ */ jsx("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+				className: styles.objectKey,
+				children: /* @__PURE__ */ jsxs("strong", { children: [formatLabel(key), ":"] })
+			}), /* @__PURE__ */ jsx("td", {
+				className: styles.objectValue,
+				children: typeof value === "object" ? /* @__PURE__ */ jsx(ObjectDisplay, { data: value }) : String(value)
+			})] }, key)) })
+		});
+	};
+	function set(obj, path, value) {
+		const keys = path.split(".");
+		let current = obj;
+		for (let i = 0; i < keys.length; i += 1) {
+			const key = keys[i];
+			if (i === keys.length - 1) current[key] = value;
+			else {
+				if (!current[key] || typeof current[key] !== "object") current[key] = {};
+				current = current[key];
+			}
+		}
+	}
+	const handleFieldSave = useCallback((schema) => {
+		if (!onUpdate || !schema.name) return;
+		const fieldName = schema.name;
+		const currentUser$1 = flattenedProfile || profile;
+		let fieldValue;
+		if (editedUser && fieldName && editedUser[fieldName] !== void 0) fieldValue = editedUser[fieldName];
+		else if (currentUser$1?.attributes?.[fieldName] !== void 0) fieldValue = currentUser$1.attributes[fieldName];
+		else if (flattenedProfile?.[fieldName] !== void 0) fieldValue = flattenedProfile[fieldName];
+		else fieldValue = "";
+		if (Array.isArray(fieldValue)) fieldValue = fieldValue.filter((v) => v !== void 0 && v !== null && v !== "");
+		const strVal = String(fieldValue ?? "").trim();
+		schema.displayName || schema.name && startCase(schema.name);
+		if (schema.required && !strVal) {
+			setFieldErrors((prev) => ({
+				...prev,
+				[fieldName]: t("validations.required.field.error")
+			}));
+			return;
+		}
+		if (schema.regex && strVal) try {
+			if (!new RegExp(schema.regex).test(strVal)) {
+				setFieldErrors((prev) => ({
+					...prev,
+					[fieldName]: t("validation.pattern.invalid")
+				}));
+				return;
+			}
+		} catch (e) {}
+		setFieldErrors((prev) => {
+			const next = { ...prev };
+			delete next[fieldName];
+			return next;
+		});
+		let payload = {};
+		set(payload, fieldName, fieldValue);
+		onUpdate(payload);
+		toggleFieldEdit(fieldName);
+	}, [
+		editedUser,
+		flattenedProfile,
+		profile,
+		onUpdate,
+		toggleFieldEdit,
+		t
+	]);
+	const handleFieldCancel = useCallback((fieldName) => {
+		const currentUser$1 = flattenedProfile || profile;
+		const initialVal = currentUser$1?.attributes?.[fieldName] ?? currentUser$1?.[fieldName];
+		setEditedUser((prev) => ({
+			...prev,
+			[fieldName]: initialVal
+		}));
+		setFieldErrors((prev) => {
+			const next = { ...prev };
+			delete next[fieldName];
+			return next;
+		});
+		toggleFieldEdit(fieldName);
+	}, [
+		flattenedProfile,
+		profile,
+		toggleFieldEdit
+	]);
+	const mergedMappings = Object.fromEntries(Object.entries({
+		email: ["emails", "email"],
+		firstName: ["name.givenName", "given_name"],
+		lastName: ["name.familyName", "family_name"],
+		picture: [
+			"profile",
+			"profileUrl",
+			"picture",
+			"URL"
+		],
+		username: [
+			"userName",
+			"username",
+			"user_name"
+		],
+		...attributeMapping
+	}).filter((entry) => entry[1] !== void 0));
+	const renderSchemaField = (schema, isEditing, onEditValue, onStartEdit) => {
+		if (!schema) return null;
+		const { value, displayName, description, name, type, required, mutability, subAttributes, multiValued } = schema;
+		const label = displayName || description || (name ? startCase(name) : "");
+		if (subAttributes && Array.isArray(subAttributes)) return /* @__PURE__ */ jsx(Fragment$1, { children: subAttributes.map((subAttr, index) => {
+			let displayValue$1;
+			if (Array.isArray(subAttr.value)) displayValue$1 = subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+			else if (typeof subAttr.value === "object") displayValue$1 = JSON.stringify(subAttr.value);
+			else displayValue$1 = String(subAttr.value);
+			return /* @__PURE__ */ jsxs("div", {
+				className: styles.field,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: styles.label,
+					children: subAttr.displayName || subAttr.description || ""
+				}), /* @__PURE__ */ jsx("div", {
+					className: styles.value,
+					children: displayValue$1
+				})]
+			}, index);
+		}) });
+		if (Array.isArray(value) || multiValued) {
+			const hasValues = Array.isArray(value) ? value.length > 0 : value !== void 0 && value !== null && value !== "";
+			const isEditable$1 = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+			if (isEditing && onEditValue && isEditable$1) {
+				let currentValue;
+				if (editedUser && name && editedUser[name] !== void 0) currentValue = editedUser[name];
+				else if (flattenedProfile && name && flattenedProfile[name] !== void 0) currentValue = flattenedProfile[name];
+				else currentValue = value;
+				let fieldValues;
+				if (Array.isArray(currentValue)) fieldValues = currentValue.map(String);
+				else if (currentValue !== void 0 && currentValue !== null && currentValue !== "") fieldValues = [String(currentValue)];
+				else fieldValues = [];
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: styles.label,
+					children: label
+				}), /* @__PURE__ */ jsx("div", {
+					className: styles.value,
+					children: /* @__PURE__ */ jsx(MultiInput_default, {
+						values: fieldValues,
+						onChange: (newValues) => {
+							if (multiValued || Array.isArray(currentValue)) onEditValue(newValues);
+							else onEditValue(newValues[0] || "");
+						},
+						placeholder: getFieldPlaceholder(schema),
+						fieldType: type,
+						type: type === "DATE_TIME" ? "date" : "text",
+						required
+					})
+				})] });
+			}
+			let displayValue$1;
+			if (hasValues) if (Array.isArray(value)) displayValue$1 = value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+			else displayValue$1 = String(value);
+			else if (isEditable$1) displayValue$1 = getFieldPlaceholder(schema);
+			else displayValue$1 = "-";
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: styles.label,
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: cx(styles.value, !hasValues ? styles.valuePlaceholder : ""),
+				children: !hasValues && isEditable$1 && onStartEdit ? /* @__PURE__ */ jsx(Button_default, {
+					onClick: onStartEdit,
+					variant: "text",
+					color: "secondary",
+					size: "small",
+					title: "Click to edit",
+					className: styles.editButton,
+					children: displayValue$1
+				}) : displayValue$1
+			})] });
+		}
+		if (type === "COMPLEX" && typeof value === "object") return /* @__PURE__ */ jsx(ObjectDisplay, { data: value });
+		if (isEditing && onEditValue && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "")) {
+			let fieldValue;
+			if (editedUser && name && editedUser[name] !== void 0) fieldValue = editedUser[name];
+			else if (flattenedProfile && name && flattenedProfile[name] !== void 0) fieldValue = flattenedProfile[name];
+			else fieldValue = value || "";
+			const commonProps = {
+				label: void 0,
+				onChange: (e) => onEditValue(e.target ? e.target.value : e),
+				placeholder: getFieldPlaceholder(schema),
+				required,
+				value: fieldValue
+			};
+			let field;
+			switch (type) {
+				case "STRING":
+					field = /* @__PURE__ */ jsx(TextField_default, { ...commonProps });
+					break;
+				case "DATE_TIME":
+					field = /* @__PURE__ */ jsx(DatePicker_default, { ...commonProps });
+					break;
+				case "BOOLEAN":
+					field = /* @__PURE__ */ jsx(Checkbox_default, {
+						...commonProps,
+						checked: !!fieldValue,
+						onChange: (e) => {
+							onEditValue(e.target.checked);
+						}
+					});
+					break;
+				case "COMPLEX":
+					field = /* @__PURE__ */ jsx("textarea", {
+						value: fieldValue,
+						onChange: (e) => onEditValue(e.target.value),
+						placeholder: getFieldPlaceholder(schema),
+						required,
+						className: styles.complexTextarea
+					});
+					break;
+				default: field = /* @__PURE__ */ jsx(TextField_default, { ...commonProps });
+			}
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: styles.label,
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: styles.value,
+				children: field
+			})] });
+		}
+		const hasValue = value !== void 0 && value !== null && value !== "";
+		const isEditable = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+		let displayValue;
+		if (hasValue) displayValue = String(value);
+		else if (isEditable) displayValue = getFieldPlaceholder(schema);
+		else displayValue = "-";
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: styles.label,
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(styles.value, !hasValue ? styles.valuePlaceholder : ""),
+			children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx(Button_default, {
+				onClick: onStartEdit,
+				variant: "text",
+				color: "secondary",
+				size: "small",
+				title: "Click to edit",
+				className: styles.editButton,
+				children: displayValue
+			}) : displayValue
+		})] });
+	};
+	const renderUserInfo = (schema) => {
+		if (!schema?.name) return null;
+		const hasValue = schema.value !== void 0 && schema.value !== "" && schema.value !== null;
+		const isFieldEditing = editingFields[schema.name];
+		const isReadonlyField = readonlyFields.includes(schema.name);
+		if (!(hasValue || isFieldEditing || editable && schema.mutability === "READ_WRITE")) return null;
+		return /* @__PURE__ */ jsxs("div", {
+			className: styles.field,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: styles.fieldInner,
+				children: [renderSchemaField(schema, isFieldEditing, (value) => {
+					const tempEditedUser = { ...editedUser };
+					tempEditedUser[schema.name] = value;
+					setEditedUser(tempEditedUser);
+				}, () => toggleFieldEdit(schema.name)), fieldErrors[schema.name] && /* @__PURE__ */ jsx("div", {
+					style: {
+						color: "#d32f2f",
+						fontSize: "0.8rem",
+						marginTop: "4px",
+						fontWeight: 500
+					},
+					children: fieldErrors[schema.name]
+				})]
+			}), editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs("div", {
+				className: styles.fieldActions,
+				children: [isFieldEditing && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button_default, {
+					size: "small",
+					color: "primary",
+					variant: "solid",
+					onClick: () => handleFieldSave(schema),
+					children: "Save"
+				}), /* @__PURE__ */ jsx(Button_default, {
+					size: "small",
+					color: "secondary",
+					variant: "solid",
+					onClick: () => handleFieldCancel(schema.name),
+					children: "Cancel"
+				})] }), !isFieldEditing && hasValue && /* @__PURE__ */ jsx(Button_default, {
+					size: "small",
+					color: "tertiary",
+					variant: "icon",
+					onClick: () => toggleFieldEdit(schema.name),
+					title: "Edit",
+					className: styles.editButton,
+					children: /* @__PURE__ */ jsx(PencilIcon, {})
+				})]
+			})]
+		});
+	};
+	if (!profile && !flattenedProfile) return fallback;
+	const containerClasses = cx(styles.root, cardLayout ? styles.card : "", withVendorCSSClassPrefix("user-profile"), className);
+	const currentUser = flattenedProfile || profile;
+	const renderProfileContent = () => {
+		if (!currentUser) return null;
+		const displayName = getDisplayName_default(mergedMappings, profile, displayNameAttributes);
+		let schemaItems = [];
+		if (userSchema && typeof userSchema === "object" && Object.keys(userSchema).length > 0) schemaItems = Object.entries(userSchema).filter(([key, metaAttr]) => {
+			if (metaAttr?.credential) return false;
+			return shouldShowField(key, true);
+		}).map(([key, metaAttr]) => {
+			const val = editedUser?.[key] ?? currentUser?.attributes?.[key] ?? currentUser?.[key] ?? "";
+			const isReadonly = metaAttr.readOnly === true || metaAttr.mutability === "READ_ONLY" || readonlyFields.includes(key);
+			return {
+				name: key,
+				displayName: metaAttr.displayName ?? (key ? startCase(key) : ""),
+				type: (metaAttr.type ?? "STRING").toUpperCase(),
+				regex: metaAttr.regex,
+				required: !!metaAttr.required,
+				mutability: isReadonly ? "READ_ONLY" : "READ_WRITE",
+				value: val
+			};
+		});
+		else schemaItems = Object.entries(currentUser).filter(([key, value]) => {
+			if (!shouldShowField(key)) return false;
+			return value !== void 0 && value !== "" && value !== null;
+		}).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => {
+			const isReadonly = readonlyFields.includes(key);
+			return {
+				name: key,
+				displayName: startCase(key),
+				mutability: isReadonly ? "READ_ONLY" : "READ_WRITE",
+				value
+			};
+		});
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.profileSummary,
+				children: [
+					/* @__PURE__ */ jsx(Avatar, {
+						imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
+						name: displayName,
+						size: 70,
+						alt: `${displayName}'s avatar`,
+						isLoading
+					}),
+					/* @__PURE__ */ jsx(Typography_default, {
+						variant: "h3",
+						fontWeight: "medium",
+						children: displayName
+					}),
+					getMappedUserProfileValue_default("email", mergedMappings, currentUser) && /* @__PURE__ */ jsx(Typography_default, {
+						variant: "body2",
+						color: "textSecondary",
+						children: getMappedUserProfileValue_default("email", mergedMappings, currentUser)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Divider_default, {}),
+			schemaItems.map((schemaWithValue) => /* @__PURE__ */ jsx("div", {
+				className: styles.info,
+				children: renderUserInfo(schemaWithValue)
+			}, schemaWithValue.name))
+		] });
+	};
+	const profileContent = /* @__PURE__ */ jsxs(Card_default, {
+		className: containerClasses,
+		children: [error && /* @__PURE__ */ jsxs(Alert_default, {
+			variant: "error",
+			className: cx(withVendorCSSClassPrefix(bem("user-profile", "alert")), styles.alert),
+			children: [/* @__PURE__ */ jsx(Alert_default.Title, { children: t("errors.heading") || "Error" }), /* @__PURE__ */ jsx(Alert_default.Description, { children: error })]
+		}), /* @__PURE__ */ jsx("div", {
+			className: styles.infoContainer,
+			children: renderProfileContent()
+		})]
+	});
+	if (mode === "popup") return /* @__PURE__ */ jsx(Dialog_default, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog_default.Content, { children: [/* @__PURE__ */ jsx(Dialog_default.Heading, { children: title ?? t("user.profile.heading") }), /* @__PURE__ */ jsx("div", {
+			className: styles.popup,
+			children: profileContent
+		})] })
+	});
+	return profileContent;
+};
+var BaseUserProfile_default = BaseUserProfile;
+
+//#endregion
+export { BaseUserProfile_default as default };
+//# sourceMappingURL=BaseUserProfile.js.map