@thunderid/react 1.0.8 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (193) hide show
  1. package/dist/api/updateMeCredentials.d.ts +33 -0
  2. package/dist/api/updateMeCredentials.d.ts.map +1 -0
  3. package/dist/api/updateMeCredentials.js +29 -0
  4. package/dist/api/updateMeCredentials.js.map +1 -0
  5. package/dist/cjs/api/updateMeCredentials.cjs +31 -0
  6. package/dist/cjs/api/updateMeCredentials.cjs.map +1 -0
  7. package/dist/cjs/components/presentation/ChangeCredential/BaseChangeCredential.cjs +187 -0
  8. package/dist/cjs/components/presentation/ChangeCredential/BaseChangeCredential.cjs.map +1 -0
  9. package/dist/cjs/components/presentation/ChangeCredential/BaseChangeCredential.styles.cjs +108 -0
  10. package/dist/cjs/components/presentation/ChangeCredential/BaseChangeCredential.styles.cjs.map +1 -0
  11. package/dist/cjs/components/presentation/ChangeCredential/ChangeCredential.cjs +123 -0
  12. package/dist/cjs/components/presentation/ChangeCredential/ChangeCredential.cjs.map +1 -0
  13. package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.cjs +1 -1
  14. package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.cjs +2 -2
  15. package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.cjs.map +1 -1
  16. package/dist/cjs/components/presentation/UserDropdown/UserDropdown.cjs +8 -4
  17. package/dist/cjs/components/presentation/UserDropdown/UserDropdown.cjs.map +1 -1
  18. package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.styles.cjs +2 -0
  19. package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.styles.cjs.map +1 -1
  20. package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs +2 -2
  21. package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs.map +1 -1
  22. package/dist/cjs/contexts/Theme/ThemeProvider.cjs +26 -4
  23. package/dist/cjs/contexts/Theme/ThemeProvider.cjs.map +1 -1
  24. package/dist/cjs/contexts/ThunderID/ThunderIDContext.cjs +2 -0
  25. package/dist/cjs/contexts/ThunderID/ThunderIDContext.cjs.map +1 -1
  26. package/dist/cjs/contexts/ThunderID/ThunderIDProvider.cjs +7 -1
  27. package/dist/cjs/contexts/ThunderID/ThunderIDProvider.cjs.map +1 -1
  28. package/dist/cjs/hooks/agents/useCreateAgent.cjs +26 -0
  29. package/dist/cjs/hooks/agents/useCreateAgent.cjs.map +1 -0
  30. package/dist/cjs/hooks/agents/useDeleteAgent.cjs +26 -0
  31. package/dist/cjs/hooks/agents/useDeleteAgent.cjs.map +1 -0
  32. package/dist/cjs/hooks/agents/useGetAgent.cjs +30 -0
  33. package/dist/cjs/hooks/agents/useGetAgent.cjs.map +1 -0
  34. package/dist/cjs/hooks/agents/useGetAgents.cjs +31 -0
  35. package/dist/cjs/hooks/agents/useGetAgents.cjs.map +1 -0
  36. package/dist/cjs/hooks/agents/useUpdateAgent.cjs +27 -0
  37. package/dist/cjs/hooks/agents/useUpdateAgent.cjs.map +1 -0
  38. package/dist/cjs/hooks/applications/useCreateApplication.cjs +31 -0
  39. package/dist/cjs/hooks/applications/useCreateApplication.cjs.map +1 -0
  40. package/dist/cjs/hooks/applications/useDeleteApplication.cjs +26 -0
  41. package/dist/cjs/hooks/applications/useDeleteApplication.cjs.map +1 -0
  42. package/dist/cjs/hooks/applications/useGetApplication.cjs +35 -0
  43. package/dist/cjs/hooks/applications/useGetApplication.cjs.map +1 -0
  44. package/dist/cjs/hooks/applications/useGetApplications.cjs +36 -0
  45. package/dist/cjs/hooks/applications/useGetApplications.cjs.map +1 -0
  46. package/dist/cjs/hooks/applications/useUpdateApplication.cjs +27 -0
  47. package/dist/cjs/hooks/applications/useUpdateApplication.cjs.map +1 -0
  48. package/dist/cjs/hooks/useManagementEndpoint.cjs +25 -0
  49. package/dist/cjs/hooks/useManagementEndpoint.cjs.map +1 -0
  50. package/dist/cjs/hooks/useResourceMutation.cjs +72 -0
  51. package/dist/cjs/hooks/useResourceMutation.cjs.map +1 -0
  52. package/dist/cjs/hooks/useResourceQuery.cjs +86 -0
  53. package/dist/cjs/hooks/useResourceQuery.cjs.map +1 -0
  54. package/dist/cjs/hooks/users/useCreateUser.cjs +26 -0
  55. package/dist/cjs/hooks/users/useCreateUser.cjs.map +1 -0
  56. package/dist/cjs/hooks/users/useDeleteUser.cjs +26 -0
  57. package/dist/cjs/hooks/users/useDeleteUser.cjs.map +1 -0
  58. package/dist/cjs/hooks/users/useGetUser.cjs +30 -0
  59. package/dist/cjs/hooks/users/useGetUser.cjs.map +1 -0
  60. package/dist/cjs/hooks/users/useGetUsers.cjs +38 -0
  61. package/dist/cjs/hooks/users/useGetUsers.cjs.map +1 -0
  62. package/dist/cjs/hooks/users/useUpdateUser.cjs +27 -0
  63. package/dist/cjs/hooks/users/useUpdateUser.cjs.map +1 -0
  64. package/dist/cjs/index.cjs +144 -0
  65. package/dist/cjs/utils/createAuthenticatedFetcher.cjs +43 -0
  66. package/dist/cjs/utils/createAuthenticatedFetcher.cjs.map +1 -0
  67. package/dist/cjs/utils/createResourceInvalidator.cjs +38 -0
  68. package/dist/cjs/utils/createResourceInvalidator.cjs.map +1 -0
  69. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.d.ts +100 -0
  70. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.d.ts.map +1 -0
  71. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.js +183 -0
  72. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.js.map +1 -0
  73. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.styles.d.ts +10 -0
  74. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.styles.d.ts.map +1 -0
  75. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.styles.js +108 -0
  76. package/dist/components/presentation/ChangeCredential/BaseChangeCredential.styles.js.map +1 -0
  77. package/dist/components/presentation/ChangeCredential/ChangeCredential.d.ts +55 -0
  78. package/dist/components/presentation/ChangeCredential/ChangeCredential.d.ts.map +1 -0
  79. package/dist/components/presentation/ChangeCredential/ChangeCredential.js +119 -0
  80. package/dist/components/presentation/ChangeCredential/ChangeCredential.js.map +1 -0
  81. package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.js +1 -1
  82. package/dist/components/presentation/UserDropdown/BaseUserDropdown.d.ts +5 -0
  83. package/dist/components/presentation/UserDropdown/BaseUserDropdown.d.ts.map +1 -1
  84. package/dist/components/presentation/UserDropdown/BaseUserDropdown.js +2 -2
  85. package/dist/components/presentation/UserDropdown/BaseUserDropdown.js.map +1 -1
  86. package/dist/components/presentation/UserDropdown/UserDropdown.d.ts +12 -0
  87. package/dist/components/presentation/UserDropdown/UserDropdown.d.ts.map +1 -1
  88. package/dist/components/presentation/UserDropdown/UserDropdown.js +8 -4
  89. package/dist/components/presentation/UserDropdown/UserDropdown.js.map +1 -1
  90. package/dist/components/presentation/UserProfile/BaseUserProfile.styles.d.ts.map +1 -1
  91. package/dist/components/presentation/UserProfile/BaseUserProfile.styles.js +2 -0
  92. package/dist/components/presentation/UserProfile/BaseUserProfile.styles.js.map +1 -1
  93. package/dist/components/primitives/PasswordField/PasswordField.d.ts +6 -0
  94. package/dist/components/primitives/PasswordField/PasswordField.d.ts.map +1 -1
  95. package/dist/components/primitives/PasswordField/PasswordField.js +2 -2
  96. package/dist/components/primitives/PasswordField/PasswordField.js.map +1 -1
  97. package/dist/contexts/Theme/ThemeProvider.d.ts +1 -1
  98. package/dist/contexts/Theme/ThemeProvider.d.ts.map +1 -1
  99. package/dist/contexts/Theme/ThemeProvider.js +27 -5
  100. package/dist/contexts/Theme/ThemeProvider.js.map +1 -1
  101. package/dist/contexts/ThunderID/ThunderIDContext.d.ts +12 -1
  102. package/dist/contexts/ThunderID/ThunderIDContext.d.ts.map +1 -1
  103. package/dist/contexts/ThunderID/ThunderIDContext.js +2 -0
  104. package/dist/contexts/ThunderID/ThunderIDContext.js.map +1 -1
  105. package/dist/contexts/ThunderID/ThunderIDProvider.d.ts.map +1 -1
  106. package/dist/contexts/ThunderID/ThunderIDProvider.js +7 -1
  107. package/dist/contexts/ThunderID/ThunderIDProvider.js.map +1 -1
  108. package/dist/hooks/agents/useCreateAgent.d.ts +11 -0
  109. package/dist/hooks/agents/useCreateAgent.d.ts.map +1 -0
  110. package/dist/hooks/agents/useCreateAgent.js +24 -0
  111. package/dist/hooks/agents/useCreateAgent.js.map +1 -0
  112. package/dist/hooks/agents/useDeleteAgent.d.ts +10 -0
  113. package/dist/hooks/agents/useDeleteAgent.d.ts.map +1 -0
  114. package/dist/hooks/agents/useDeleteAgent.js +24 -0
  115. package/dist/hooks/agents/useDeleteAgent.js.map +1 -0
  116. package/dist/hooks/agents/useGetAgent.d.ts +12 -0
  117. package/dist/hooks/agents/useGetAgent.d.ts.map +1 -0
  118. package/dist/hooks/agents/useGetAgent.js +28 -0
  119. package/dist/hooks/agents/useGetAgent.js.map +1 -0
  120. package/dist/hooks/agents/useGetAgents.d.ts +19 -0
  121. package/dist/hooks/agents/useGetAgents.d.ts.map +1 -0
  122. package/dist/hooks/agents/useGetAgents.js +29 -0
  123. package/dist/hooks/agents/useGetAgents.js.map +1 -0
  124. package/dist/hooks/agents/useUpdateAgent.d.ts +18 -0
  125. package/dist/hooks/agents/useUpdateAgent.d.ts.map +1 -0
  126. package/dist/hooks/agents/useUpdateAgent.js +25 -0
  127. package/dist/hooks/agents/useUpdateAgent.js.map +1 -0
  128. package/dist/hooks/applications/useCreateApplication.d.ts +16 -0
  129. package/dist/hooks/applications/useCreateApplication.d.ts.map +1 -0
  130. package/dist/hooks/applications/useCreateApplication.js +29 -0
  131. package/dist/hooks/applications/useCreateApplication.js.map +1 -0
  132. package/dist/hooks/applications/useDeleteApplication.d.ts +10 -0
  133. package/dist/hooks/applications/useDeleteApplication.d.ts.map +1 -0
  134. package/dist/hooks/applications/useDeleteApplication.js +24 -0
  135. package/dist/hooks/applications/useDeleteApplication.js.map +1 -0
  136. package/dist/hooks/applications/useGetApplication.d.ts +17 -0
  137. package/dist/hooks/applications/useGetApplication.d.ts.map +1 -0
  138. package/dist/hooks/applications/useGetApplication.js +33 -0
  139. package/dist/hooks/applications/useGetApplication.js.map +1 -0
  140. package/dist/hooks/applications/useGetApplications.d.ts +24 -0
  141. package/dist/hooks/applications/useGetApplications.d.ts.map +1 -0
  142. package/dist/hooks/applications/useGetApplications.js +34 -0
  143. package/dist/hooks/applications/useGetApplications.js.map +1 -0
  144. package/dist/hooks/applications/useUpdateApplication.d.ts +18 -0
  145. package/dist/hooks/applications/useUpdateApplication.d.ts.map +1 -0
  146. package/dist/hooks/applications/useUpdateApplication.js +25 -0
  147. package/dist/hooks/applications/useUpdateApplication.js.map +1 -0
  148. package/dist/hooks/useManagementEndpoint.d.ts +22 -0
  149. package/dist/hooks/useManagementEndpoint.d.ts.map +1 -0
  150. package/dist/hooks/useManagementEndpoint.js +23 -0
  151. package/dist/hooks/useManagementEndpoint.js.map +1 -0
  152. package/dist/hooks/useResourceMutation.d.ts +51 -0
  153. package/dist/hooks/useResourceMutation.d.ts.map +1 -0
  154. package/dist/hooks/useResourceMutation.js +70 -0
  155. package/dist/hooks/useResourceMutation.js.map +1 -0
  156. package/dist/hooks/useResourceQuery.d.ts +45 -0
  157. package/dist/hooks/useResourceQuery.d.ts.map +1 -0
  158. package/dist/hooks/useResourceQuery.js +83 -0
  159. package/dist/hooks/useResourceQuery.js.map +1 -0
  160. package/dist/hooks/users/useCreateUser.d.ts +11 -0
  161. package/dist/hooks/users/useCreateUser.d.ts.map +1 -0
  162. package/dist/hooks/users/useCreateUser.js +24 -0
  163. package/dist/hooks/users/useCreateUser.js.map +1 -0
  164. package/dist/hooks/users/useDeleteUser.d.ts +10 -0
  165. package/dist/hooks/users/useDeleteUser.d.ts.map +1 -0
  166. package/dist/hooks/users/useDeleteUser.js +24 -0
  167. package/dist/hooks/users/useDeleteUser.js.map +1 -0
  168. package/dist/hooks/users/useGetUser.d.ts +12 -0
  169. package/dist/hooks/users/useGetUser.d.ts.map +1 -0
  170. package/dist/hooks/users/useGetUser.js +28 -0
  171. package/dist/hooks/users/useGetUser.js.map +1 -0
  172. package/dist/hooks/users/useGetUsers.d.ts +17 -0
  173. package/dist/hooks/users/useGetUsers.d.ts.map +1 -0
  174. package/dist/hooks/users/useGetUsers.js +36 -0
  175. package/dist/hooks/users/useGetUsers.js.map +1 -0
  176. package/dist/hooks/users/useUpdateUser.d.ts +18 -0
  177. package/dist/hooks/users/useUpdateUser.d.ts.map +1 -0
  178. package/dist/hooks/users/useUpdateUser.js +25 -0
  179. package/dist/hooks/users/useUpdateUser.js.map +1 -0
  180. package/dist/index.d.ts +29 -0
  181. package/dist/index.d.ts.map +1 -1
  182. package/dist/index.js +20 -2
  183. package/dist/models/config.d.ts +13 -1
  184. package/dist/models/config.d.ts.map +1 -1
  185. package/dist/utils/createAuthenticatedFetcher.d.ts +14 -0
  186. package/dist/utils/createAuthenticatedFetcher.d.ts.map +1 -0
  187. package/dist/utils/createAuthenticatedFetcher.js +41 -0
  188. package/dist/utils/createAuthenticatedFetcher.js.map +1 -0
  189. package/dist/utils/createResourceInvalidator.d.ts +29 -0
  190. package/dist/utils/createResourceInvalidator.d.ts.map +1 -0
  191. package/dist/utils/createResourceInvalidator.js +36 -0
  192. package/dist/utils/createResourceInvalidator.js.map +1 -0
  193. package/package.json +2 -2
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ChangeCredential.js","names":["ChangeCredential: FC<ChangeCredentialProps>","useThunderID","useUser","resolvedDisplayName: string","useTranslation","resolvedPolicy: PasswordPolicy","updateMeCredentials","caughtError: unknown","text: string","BaseChangeCredential"],"sources":["../../../../src/components/presentation/ChangeCredential/ChangeCredential.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n CredentialConstants,\n CredentialUpdateErrorResult,\n PasswordPolicy,\n mapCredentialUpdateError,\n resolveChangeCredentialPolicy,\n resolveResourceEndpoint,\n supportsCredential,\n} from '@thunderid/browser';\nimport {FC, useMemo, useState} from 'react';\nimport BaseChangeCredential, {BaseChangeCredentialProps, ChangePasswordValues} from './BaseChangeCredential';\nimport updateMeCredentials from '../../../api/updateMeCredentials';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useUser from '../../../contexts/User/useUser';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Title-cases a credential attribute name for use as a display-name fallback when the schema\n * declares no `displayName` for it, e.g. `pin` -> `Pin`.\n */\nconst defaultDisplayName = (attribute: string): string => attribute.charAt(0).toUpperCase() + attribute.slice(1);\n\nexport interface ChangeCredentialProps\n extends Omit<\n BaseChangeCredentialProps,\n 'credentialDisplayName' | 'error' | 'fieldErrors' | 'loading' | 'onSubmit' | 'success'\n > {\n /**\n * The credential attribute this instance manages, any attribute the user's entity type\n * schema declares `credential: true` (for example `password` or `pin`). Defaults to\n * `password`. Render the component once per credential to let a user manage more than one,\n * for example `<ChangeCredential />` for the password and\n * `<ChangeCredential attribute=\"pin\" />` for a PIN.\n */\n attribute?: string;\n /**\n * Called after the credential has been changed successfully.\n */\n onSuccess?: () => void;\n}\n\n/**\n * ChangeCredential lets the signed-in user set a new value for one of their own credentials.\n *\n * It collects only a new value and its confirmation. The self-service credential write path\n * does not verify the account's existing value today, so this component does not ask for one;\n * once server-side current-value verification ships, that field returns without a breaking\n * change to this component's public props.\n *\n * It reads the applicable rules from the user schema already resolved by the ThunderID\n * provider, so it adds no network request beyond the write itself, and posts to\n * `/users/me/update-credentials` with the access token attached by the SDK's HTTP client.\n *\n * Defaults to managing the `password` credential. To manage a different one (for example a\n * PIN declared on the user type schema), set `attribute`; render the component once per\n * credential to let a user manage several. Every default label, placeholder and message is\n * built from the attribute's own `displayName` in the schema (`GET /users/me/meta`), so it\n * always matches whatever an admin named the attribute there; when the schema carries no\n * `displayName` for it, it falls back to the attribute name title-cased (`pin` -> `Pin`).\n * Override individual strings via `preferences.i18n` for full control (including other\n * languages) if the schema-derived name isn't the right fit.\n *\n * @example\n * ```tsx\n * // Basic usage, manages the password\n * <ChangeCredential onSuccess={() => toast('Password updated')} />\n *\n * // With an explicit rule instead of the schema-derived policy\n * <ChangeCredential\n * policy={{regex: '^.{12,}$'}}\n * />\n *\n * // Managing a different credential declared on the schema; labels use the schema's own\n * // displayName for it automatically\n * <ChangeCredential attribute=\"pin\" />\n * ```\n */\nconst ChangeCredential: FC<ChangeCredentialProps> = ({\n attribute = CredentialConstants.PASSWORD,\n onSuccess = undefined,\n policy = undefined,\n preferences = undefined,\n ...rest\n}: ChangeCredentialProps) => {\n const {baseUrl, endpoints, instanceId, preferences: contextPreferences} = useThunderID();\n const {userSchema} = useUser();\n const resolvedDisplayName: string = userSchema?.[attribute]?.displayName ?? defaultDisplayName(attribute);\n\n const resolvedPreferences = useMemo(\n () => ({\n ...contextPreferences,\n ...preferences,\n user: {...contextPreferences?.user, ...preferences?.user},\n }),\n [contextPreferences, preferences],\n );\n const {t} = useTranslation(resolvedPreferences?.i18n);\n\n const [error, setError] = useState<string | null>(null);\n const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});\n const [loading, setLoading] = useState<boolean>(false);\n const [success, setSuccess] = useState<boolean>(false);\n\n const resolvedPolicy: PasswordPolicy = useMemo(\n () => resolveChangeCredentialPolicy(userSchema, attribute, policy),\n [userSchema, attribute, policy],\n );\n\n const handleSubmit = async ({newPassword}: ChangePasswordValues): Promise<void> => {\n setError(null);\n setFieldErrors({});\n setSuccess(false);\n setLoading(true);\n\n try {\n await updateMeCredentials({\n baseUrl,\n instanceId,\n payload: {[attribute]: newPassword},\n url: resolveResourceEndpoint('usersMeCredentials', {endpoints}),\n });\n\n setSuccess(true);\n onSuccess?.();\n } catch (caughtError: unknown) {\n const {field, message, messageKey}: CredentialUpdateErrorResult = mapCredentialUpdateError(caughtError);\n const text: string =\n message ?? t(messageKey, {credential: resolvedDisplayName, credentialLower: resolvedDisplayName.toLowerCase()});\n\n if (field) {\n setFieldErrors({[field]: text});\n } else {\n setError(text);\n }\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <BaseChangeCredential\n {...rest}\n credentialDisplayName={resolvedDisplayName}\n error={error}\n fieldErrors={fieldErrors}\n loading={loading}\n policy={resolvedPolicy}\n preferences={resolvedPreferences}\n success={success}\n unavailable={!supportsCredential(userSchema, attribute)}\n onSubmit={(values: ChangePasswordValues): void => {\n void handleSubmit(values);\n }}\n />\n );\n};\n\nexport default ChangeCredential;\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,sBAAsB,cAA8B,UAAU,OAAO,EAAE,CAAC,aAAa,GAAG,UAAU,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDhH,MAAMA,oBAA+C,EACnD,YAAY,oBAAoB,UAChC,YAAY,QACZ,SAAS,QACT,cAAc,OACd,GAAG,WACwB;CAC3B,MAAM,EAAC,SAAS,WAAW,YAAY,aAAa,uBAAsBC,sBAAc;CACxF,MAAM,EAAC,eAAcC,iBAAS;CAC9B,MAAMC,sBAA8B,aAAa,YAAY,eAAe,mBAAmB,UAAU;CAEzG,MAAM,sBAAsB,eACnB;EACL,GAAG;EACH,GAAG;EACH,MAAM;GAAC,GAAG,oBAAoB;GAAM,GAAG,aAAa;GAAK;EAC1D,GACD,CAAC,oBAAoB,YAAY,CAClC;CACD,MAAM,EAAC,MAAKC,uBAAe,qBAAqB,KAAK;CAErD,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAiC,EAAE,CAAC;CAC1E,MAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;CACtD,MAAM,CAAC,SAAS,cAAc,SAAkB,MAAM;CAEtD,MAAMC,iBAAiC,cAC/B,8BAA8B,YAAY,WAAW,OAAO,EAClE;EAAC;EAAY;EAAW;EAAO,CAChC;CAED,MAAM,eAAe,OAAO,EAAC,kBAAsD;AACjF,WAAS,KAAK;AACd,iBAAe,EAAE,CAAC;AAClB,aAAW,MAAM;AACjB,aAAW,KAAK;AAEhB,MAAI;AACF,SAAMC,4BAAoB;IACxB;IACA;IACA,SAAS,GAAE,YAAY,aAAY;IACnC,KAAK,wBAAwB,sBAAsB,EAAC,WAAU,CAAC;IAChE,CAAC;AAEF,cAAW,KAAK;AAChB,gBAAa;WACNC,aAAsB;GAC7B,MAAM,EAAC,OAAO,SAAS,eAA2C,yBAAyB,YAAY;GACvG,MAAMC,OACJ,WAAW,EAAE,YAAY;IAAC,YAAY;IAAqB,iBAAiB,oBAAoB,aAAa;IAAC,CAAC;AAEjH,OAAI,MACF,gBAAe,GAAE,QAAQ,MAAK,CAAC;OAE/B,UAAS,KAAK;YAER;AACR,cAAW,MAAM;;;AAIrB,QACE,oBAACC;EACC,GAAI;EACJ,uBAAuB;EAChB;EACM;EACJ;EACT,QAAQ;EACR,aAAa;EACJ;EACT,aAAa,CAAC,mBAAmB,YAAY,UAAU;EACvD,WAAW,WAAuC;AAChD,GAAK,aAAa,OAAO;;GAE3B;;AAIN,+BAAe"}
@@ -1,7 +1,7 @@
1
1
  import { cx } from "../../../styles/emotion.js";
2
2
  import useTheme_default from "../../../contexts/Theme/useTheme.js";
3
- import BaseLanguageSwitcher_styles_default from "./BaseLanguageSwitcher.styles.js";
4
3
  import Check_default from "../../primitives/Icons/Check.js";
4
+ import BaseLanguageSwitcher_styles_default from "./BaseLanguageSwitcher.styles.js";
5
5
  import ChevronDown_default from "../../primitives/Icons/ChevronDown.js";
6
6
  import { useEffect, useState } from "react";
7
7
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -33,6 +33,11 @@ export interface BaseUserDropdownProps {
33
33
  * Whether the user data is currently loading
34
34
  */
35
35
  isLoading?: boolean;
36
+ /**
37
+ * Label for the "Manage Profile" menu item. Defaults to `'Manage Profile'`; set this
38
+ * to relabel the action (e.g. `'Manage Account'`) without replacing the whole item.
39
+ */
40
+ manageProfileLabel?: string;
36
41
  /**
37
42
  * Menu items to display in the dropdown
38
43
  */
@@ -1 +1 @@
1
- {"version":3,"file":"BaseUserDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserDropdown/BaseUserDropdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAY5D,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,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;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC;CACX;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA2NtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"BaseUserDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserDropdown/BaseUserDropdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAY5D,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,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;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC;CACX;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA4NtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -19,7 +19,7 @@ import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift,
19
19
  * When clicked, it shows a popover with customizable menu items.
20
20
  * This component serves as the base for framework-specific implementations.
21
21
  */
22
- const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = false, portalId = "thunderid-user-dropdown", menuItems = [], showTriggerLabel = false, avatarSize = 32, onManageProfile, onSignOut, attributeMapping = {} }) => {
22
+ const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = false, portalId = "thunderid-user-dropdown", menuItems = [], showTriggerLabel = false, avatarSize = 32, manageProfileLabel = "Manage Profile", onManageProfile, onSignOut, attributeMapping = {} }) => {
23
23
  const { theme, colorScheme } = useTheme_default();
24
24
  const styles = BaseUserDropdown_styles_default(theme, colorScheme);
25
25
  const [isOpen, setIsOpen] = useState(false);
@@ -68,7 +68,7 @@ const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = f
68
68
  width: "16",
69
69
  height: "16"
70
70
  }),
71
- label: "Manage Profile",
71
+ label: manageProfileLabel,
72
72
  onClick: onManageProfile
73
73
  });
74
74
  if (onSignOut) defaultMenuItems.push({
@@ -1 +1 @@
1
- {"version":3,"file":"BaseUserDropdown.js","names":["BaseUserDropdown: FC<BaseUserDropdownProps>","useTheme","styles: Record<string, string>","useStyles","mergedMappings: Record<string, string | string[]>","defaultMenuItems: MenuItem[]","User","LogOut","allMenuItems: MenuItem[]","Button","getMappedUserProfileValue","getDisplayName","Typography"],"sources":["../../../../src/components/presentation/UserDropdown/BaseUserDropdown.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n useFloating,\n autoUpdate,\n offset,\n flip,\n shift,\n useClick,\n useDismiss,\n useRole,\n useInteractions,\n FloatingFocusManager,\n FloatingPortal,\n} from '@floating-ui/react';\nimport {withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState} from 'react';\nimport useStyles from './BaseUserDropdown.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {css, cx} from '../../../styles/emotion';\nimport getDisplayName from '../../../utils/getDisplayName';\nimport getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport LogOut from '../../primitives/Icons/LogOut';\nimport User from '../../primitives/Icons/User';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface MenuItem {\n href?: string;\n icon?: ReactNode;\n label: ReactNode;\n onClick?: () => void;\n}\n\nexport interface BaseUserDropdownProps {\n /**\n * Mapping of component attribute names to identity provider field names.\n * Allows customizing which user profile fields should be used for each attribute.\n */\n attributeMapping?: {\n [key: string]: string | string[] | undefined;\n firstName?: string | string[];\n lastName?: string | string[];\n picture?: string | string[];\n username?: string | string[];\n };\n /**\n * Optional size for the avatar\n */\n avatarSize?: number;\n /**\n * Optional className for the dropdown container.\n */\n className?: string;\n /**\n * Optional element to render when no user is signed in.\n */\n fallback?: ReactElement | null;\n /**\n * Whether the user data is currently loading\n */\n isLoading?: boolean;\n /**\n * Menu items to display in the dropdown\n */\n menuItems?: MenuItem[];\n /**\n * Callback function for \"Manage Profile\" action\n */\n onManageProfile?: () => void;\n /**\n * Callback function for \"Sign Out\" action\n */\n onSignOut?: () => void;\n /**\n * The HTML element ID where the portal should be mounted\n */\n portalId?: string;\n /**\n * Show dropdown header with user information\n */\n showDropdownHeader?: boolean;\n /**\n * Show user's display name next to avatar in the trigger button\n */\n showTriggerLabel?: boolean;\n /**\n * The user object containing profile information\n */\n user: any;\n}\n\n/**\n * BaseUserDropdown component displays a user avatar with a dropdown menu.\n * When clicked, it shows a popover with customizable menu items.\n * This component serves as the base for framework-specific implementations.\n */\nexport const BaseUserDropdown: FC<BaseUserDropdownProps> = ({\n fallback = null,\n className = '',\n user,\n isLoading = false,\n portalId = 'thunderid-user-dropdown',\n menuItems = [],\n showTriggerLabel = false,\n avatarSize = 32,\n onManageProfile,\n onSignOut,\n attributeMapping = {},\n}: BaseUserDropdownProps): ReactElement | null => {\n const {theme, colorScheme} = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const [isOpen, setIsOpen] = useState(false);\n const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);\n\n const {refs, floatingStyles, context} = useFloating({\n middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],\n onOpenChange: setIsOpen,\n open: isOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n\n const click: any = useClick(context);\n const dismiss: any = useDismiss(context);\n const role: any = useRole(context);\n\n const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);\n\n const defaultAttributeMappings: Record<string, string | string[]> = {\n email: ['emails'],\n firstName: ['name.givenName', 'given_name'],\n lastName: ['name.familyName', 'family_name'],\n picture: ['profile', 'profileUrl', 'picture', 'URL'],\n username: ['userName', 'username', 'user_name'],\n };\n\n const mergedMappings: Record<string, string | string[]> = Object.fromEntries(\n Object.entries({...defaultAttributeMappings, ...attributeMapping}).filter(\n (entry): entry is [string, string | string[]] => entry[1] !== undefined,\n ),\n );\n\n if (fallback && !user && !isLoading) {\n return fallback;\n }\n\n const handleMenuItemClick = (item: MenuItem): void => {\n if (item.onClick) {\n item.onClick();\n }\n setIsOpen(false);\n };\n\n const defaultMenuItems: MenuItem[] = [];\n\n if (onManageProfile) {\n defaultMenuItems.push({\n icon: <User width=\"16\" height=\"16\" />,\n label: 'Manage Profile',\n onClick: onManageProfile,\n });\n }\n\n if (onSignOut) {\n defaultMenuItems.push({\n icon: <LogOut width=\"16\" height=\"16\" />,\n label: 'Sign Out',\n onClick: onSignOut,\n });\n }\n\n const allMenuItems: MenuItem[] = [...menuItems];\n\n if (defaultMenuItems.length > 0) {\n if (menuItems.length > 0) {\n allMenuItems.push({label: '', onClick: undefined});\n }\n\n allMenuItems.push(...defaultMenuItems);\n }\n\n return (\n <div className={cx(withVendorCSSClassPrefix('user-dropdown'), className)}>\n <Button\n ref={refs.setReference}\n className={cx(withVendorCSSClassPrefix('user-dropdown__trigger'), styles['trigger'])}\n color=\"tertiary\"\n variant=\"text\"\n size=\"medium\"\n data-testid=\"thunderid-user-dropdown-trigger\"\n startIcon={\n <Avatar\n imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n name={getDisplayName(mergedMappings, user)}\n size={avatarSize}\n alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n />\n }\n {...getReferenceProps()}\n >\n {showTriggerLabel && (\n <Typography\n variant=\"body2\"\n className={cx(withVendorCSSClassPrefix('user-dropdown__trigger-label'), styles['userName'])}\n >\n {getDisplayName(mergedMappings, user)}\n </Typography>\n )}\n </Button>\n\n {isOpen && (\n <FloatingPortal id={portalId}>\n <FloatingFocusManager context={context} modal={false} initialFocus={-1}>\n <div\n ref={refs.setFloating}\n className={cx(\n withVendorCSSClassPrefix('user-dropdown__content'),\n styles['dropdownContent'],\n // Floating UI recomputes the position on every render, so this class is generated\n // fresh each time rather than memoized - Emotion still injects it into the shared,\n // nonce-tagged `<style>` element, so no inline `style` attribute is needed.\n css({\n ...floatingStyles,\n // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.\n // https://floating-ui.com/docs/misc#z-index-stacking\n zIndex: 9999,\n }),\n )}\n {...getFloatingProps()}\n >\n <div className={cx(withVendorCSSClassPrefix('user-dropdown__header'), styles['dropdownHeader'])}>\n <Avatar\n imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n name={getDisplayName(mergedMappings, user)}\n size={avatarSize * 1.25}\n alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n />\n <div className={cx(withVendorCSSClassPrefix('user-dropdown__header-info'), styles['headerInfo'])}>\n <Typography\n noWrap\n className={withVendorCSSClassPrefix('user-dropdown__header-name')}\n variant=\"body1\"\n fontWeight=\"medium\"\n >\n {getDisplayName(mergedMappings, user)}\n </Typography>\n <Typography\n noWrap\n className={withVendorCSSClassPrefix('user-dropdown__header-email')}\n variant=\"caption\"\n color=\"secondary\"\n >\n {getMappedUserProfileValue('username', mergedMappings, user) ||\n getMappedUserProfileValue('email', mergedMappings, user)}\n </Typography>\n </div>\n </div>\n <div className={cx(withVendorCSSClassPrefix('user-dropdown__menu'), styles['dropdownMenu'])}>\n {allMenuItems.map((item: any, index: number) => (\n <div key={index}>\n {((): ReactElement => {\n if (item.label === '') {\n return (\n <div\n className={cx(withVendorCSSClassPrefix('user-dropdown__menu-divider'), styles['divider'])}\n />\n );\n }\n if (item.href) {\n return (\n <a\n href={item.href}\n className={cx(\n withVendorCSSClassPrefix('user-dropdown__menu-item'),\n styles['menuItemAnchor'],\n hoveredItemIndex === index && styles['menuItemHighlighted'],\n )}\n onMouseEnter={(): void => setHoveredItemIndex(index)}\n onMouseLeave={(): void => setHoveredItemIndex(null)}\n onFocus={(): void => setHoveredItemIndex(index)}\n onBlur={(): void => setHoveredItemIndex(null)}\n >\n {item.icon}\n <span>{item.label}</span>\n </a>\n );\n }\n return (\n <Button\n onClick={(): void => handleMenuItemClick(item)}\n className={cx(\n withVendorCSSClassPrefix('user-dropdown__menu-item'),\n styles['menuItem'],\n hoveredItemIndex === index && styles['menuItemHighlighted'],\n )}\n color=\"tertiary\"\n variant=\"text\"\n size=\"small\"\n startIcon={item.icon}\n onMouseEnter={(): void => setHoveredItemIndex(index)}\n onMouseLeave={(): void => setHoveredItemIndex(null)}\n >\n {item.label}\n </Button>\n );\n })()}\n </div>\n ))}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </div>\n );\n};\n\nexport default BaseUserDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmGA,MAAaA,oBAA+C,EAC1D,WAAW,MACX,YAAY,IACZ,MACA,YAAY,OACZ,WAAW,2BACX,YAAY,EAAE,EACd,mBAAmB,OACnB,aAAa,IACb,iBACA,WACA,mBAAmB,EAAE,OAC2B;CAChD,MAAM,EAAC,OAAO,gBAAeC,kBAAU;CACvC,MAAMC,SAAiCC,gCAAU,OAAO,YAAY;CACpE,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,KAAK;CAE7E,MAAM,EAAC,MAAM,gBAAgB,YAAW,YAAY;EAClD,YAAY;GAAC,OAAO,EAAE;GAAE,KAAK,EAAC,2BAA2B,OAAM,CAAC;GAAE,MAAM,EAAC,SAAS,GAAE,CAAC;GAAC;EACtF,cAAc;EACd,MAAM;EACN,WAAW;EACX,sBAAsB;EACvB,CAAC;CAMF,MAAM,EAAC,mBAAmB,qBAAoB,gBAAgB;EAJ3C,SAAS,QAAQ;EACf,WAAW,QAAQ;EACtB,QAAQ,QAAQ;EAEkD,CAAC;CAUrF,MAAMC,iBAAoD,OAAO,YAC/D,OAAO,QAAQ;EARf,OAAO,CAAC,SAAS;EACjB,WAAW,CAAC,kBAAkB,aAAa;EAC3C,UAAU,CAAC,mBAAmB,cAAc;EAC5C,SAAS;GAAC;GAAW;GAAc;GAAW;GAAM;EACpD,UAAU;GAAC;GAAY;GAAY;GAAY;EAIF,GAAG;EAAiB,CAAC,CAAC,QAChE,UAAgD,MAAM,OAAO,OAC/D,CACF;AAED,KAAI,YAAY,CAAC,QAAQ,CAAC,UACxB,QAAO;CAGT,MAAM,uBAAuB,SAAyB;AACpD,MAAI,KAAK,QACP,MAAK,SAAS;AAEhB,YAAU,MAAM;;CAGlB,MAAMC,mBAA+B,EAAE;AAEvC,KAAI,gBACF,kBAAiB,KAAK;EACpB,MAAM,oBAACC;GAAK,OAAM;GAAK,QAAO;IAAO;EACrC,OAAO;EACP,SAAS;EACV,CAAC;AAGJ,KAAI,UACF,kBAAiB,KAAK;EACpB,MAAM,oBAACC;GAAO,OAAM;GAAK,QAAO;IAAO;EACvC,OAAO;EACP,SAAS;EACV,CAAC;CAGJ,MAAMC,eAA2B,CAAC,GAAG,UAAU;AAE/C,KAAI,iBAAiB,SAAS,GAAG;AAC/B,MAAI,UAAU,SAAS,EACrB,cAAa,KAAK;GAAC,OAAO;GAAI,SAAS;GAAU,CAAC;AAGpD,eAAa,KAAK,GAAG,iBAAiB;;AAGxC,QACE,qBAAC;EAAI,WAAW,GAAG,yBAAyB,gBAAgB,EAAE,UAAU;aACtE,oBAACC;GACC,KAAK,KAAK;GACV,WAAW,GAAG,yBAAyB,yBAAyB,EAAE,OAAO,WAAW;GACpF,OAAM;GACN,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WACE,oBAAC;IACC,UAAUC,kCAA0B,WAAW,gBAAgB,KAAK;IACpE,MAAMC,uBAAe,gBAAgB,KAAK;IAC1C,MAAM;IACN,KAAK,GAAGA,uBAAe,gBAAgB,KAAK,CAAC;KAC7C;GAEJ,GAAI,mBAAmB;aAEtB,oBACC,oBAACC;IACC,SAAQ;IACR,WAAW,GAAG,yBAAyB,+BAA+B,EAAE,OAAO,YAAY;cAE1FD,uBAAe,gBAAgB,KAAK;KAC1B;IAER,EAER,UACC,oBAAC;GAAe,IAAI;aAClB,oBAAC;IAA8B;IAAS,OAAO;IAAO,cAAc;cAClE,qBAAC;KACC,KAAK,KAAK;KACV,WAAW,GACT,yBAAyB,yBAAyB,EAClD,OAAO,oBAIP,IAAI;MACF,GAAG;MAGH,QAAQ;MACT,CAAC,CACH;KACD,GAAI,kBAAkB;gBAEtB,qBAAC;MAAI,WAAW,GAAG,yBAAyB,wBAAwB,EAAE,OAAO,kBAAkB;iBAC7F,oBAAC;OACC,UAAUD,kCAA0B,WAAW,gBAAgB,KAAK;OACpE,MAAMC,uBAAe,gBAAgB,KAAK;OAC1C,MAAM,aAAa;OACnB,KAAK,GAAGA,uBAAe,gBAAgB,KAAK,CAAC;QAC7C,EACF,qBAAC;OAAI,WAAW,GAAG,yBAAyB,6BAA6B,EAAE,OAAO,cAAc;kBAC9F,oBAACC;QACC;QACA,WAAW,yBAAyB,6BAA6B;QACjE,SAAQ;QACR,YAAW;kBAEVD,uBAAe,gBAAgB,KAAK;SAC1B,EACb,oBAACC;QACC;QACA,WAAW,yBAAyB,8BAA8B;QAClE,SAAQ;QACR,OAAM;kBAELF,kCAA0B,YAAY,gBAAgB,KAAK,IAC1DA,kCAA0B,SAAS,gBAAgB,KAAK;SAC/C;QACT;OACF,EACN,oBAAC;MAAI,WAAW,GAAG,yBAAyB,sBAAsB,EAAE,OAAO,gBAAgB;gBACxF,aAAa,KAAK,MAAW,UAC5B,oBAAC,0BACuB;AACpB,WAAI,KAAK,UAAU,GACjB,QACE,oBAAC,SACC,WAAW,GAAG,yBAAyB,8BAA8B,EAAE,OAAO,WAAW,GACzF;AAGN,WAAI,KAAK,KACP,QACE,qBAAC;QACC,MAAM,KAAK;QACX,WAAW,GACT,yBAAyB,2BAA2B,EACpD,OAAO,mBACP,qBAAqB,SAAS,OAAO,uBACtC;QACD,oBAA0B,oBAAoB,MAAM;QACpD,oBAA0B,oBAAoB,KAAK;QACnD,eAAqB,oBAAoB,MAAM;QAC/C,cAAoB,oBAAoB,KAAK;mBAE5C,KAAK,MACN,oBAAC,oBAAM,KAAK,QAAa;SACvB;AAGR,cACE,oBAACD;QACC,eAAqB,oBAAoB,KAAK;QAC9C,WAAW,GACT,yBAAyB,2BAA2B,EACpD,OAAO,aACP,qBAAqB,SAAS,OAAO,uBACtC;QACD,OAAM;QACN,SAAQ;QACR,MAAK;QACL,WAAW,KAAK;QAChB,oBAA0B,oBAAoB,MAAM;QACpD,oBAA0B,oBAAoB,KAAK;kBAElD,KAAK;SACC;UAET,IA9CI,MA+CJ,CACN;OACE;MACF;KACe;IACR;GAEf;;AAIV,+BAAe"}
1
+ {"version":3,"file":"BaseUserDropdown.js","names":["BaseUserDropdown: FC<BaseUserDropdownProps>","useTheme","styles: Record<string, string>","useStyles","mergedMappings: Record<string, string | string[]>","defaultMenuItems: MenuItem[]","User","LogOut","allMenuItems: MenuItem[]","Button","getMappedUserProfileValue","getDisplayName","Typography"],"sources":["../../../../src/components/presentation/UserDropdown/BaseUserDropdown.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n useFloating,\n autoUpdate,\n offset,\n flip,\n shift,\n useClick,\n useDismiss,\n useRole,\n useInteractions,\n FloatingFocusManager,\n FloatingPortal,\n} from '@floating-ui/react';\nimport {withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState} from 'react';\nimport useStyles from './BaseUserDropdown.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {css, cx} from '../../../styles/emotion';\nimport getDisplayName from '../../../utils/getDisplayName';\nimport getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport LogOut from '../../primitives/Icons/LogOut';\nimport User from '../../primitives/Icons/User';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface MenuItem {\n href?: string;\n icon?: ReactNode;\n label: ReactNode;\n onClick?: () => void;\n}\n\nexport interface BaseUserDropdownProps {\n /**\n * Mapping of component attribute names to identity provider field names.\n * Allows customizing which user profile fields should be used for each attribute.\n */\n attributeMapping?: {\n [key: string]: string | string[] | undefined;\n firstName?: string | string[];\n lastName?: string | string[];\n picture?: string | string[];\n username?: string | string[];\n };\n /**\n * Optional size for the avatar\n */\n avatarSize?: number;\n /**\n * Optional className for the dropdown container.\n */\n className?: string;\n /**\n * Optional element to render when no user is signed in.\n */\n fallback?: ReactElement | null;\n /**\n * Whether the user data is currently loading\n */\n isLoading?: boolean;\n /**\n * Label for the \"Manage Profile\" menu item. Defaults to `'Manage Profile'`; set this\n * to relabel the action (e.g. `'Manage Account'`) without replacing the whole item.\n */\n manageProfileLabel?: string;\n /**\n * Menu items to display in the dropdown\n */\n menuItems?: MenuItem[];\n /**\n * Callback function for \"Manage Profile\" action\n */\n onManageProfile?: () => void;\n /**\n * Callback function for \"Sign Out\" action\n */\n onSignOut?: () => void;\n /**\n * The HTML element ID where the portal should be mounted\n */\n portalId?: string;\n /**\n * Show dropdown header with user information\n */\n showDropdownHeader?: boolean;\n /**\n * Show user's display name next to avatar in the trigger button\n */\n showTriggerLabel?: boolean;\n /**\n * The user object containing profile information\n */\n user: any;\n}\n\n/**\n * BaseUserDropdown component displays a user avatar with a dropdown menu.\n * When clicked, it shows a popover with customizable menu items.\n * This component serves as the base for framework-specific implementations.\n */\nexport const BaseUserDropdown: FC<BaseUserDropdownProps> = ({\n fallback = null,\n className = '',\n user,\n isLoading = false,\n portalId = 'thunderid-user-dropdown',\n menuItems = [],\n showTriggerLabel = false,\n avatarSize = 32,\n manageProfileLabel = 'Manage Profile',\n onManageProfile,\n onSignOut,\n attributeMapping = {},\n}: BaseUserDropdownProps): ReactElement | null => {\n const {theme, colorScheme} = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const [isOpen, setIsOpen] = useState(false);\n const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);\n\n const {refs, floatingStyles, context} = useFloating({\n middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],\n onOpenChange: setIsOpen,\n open: isOpen,\n placement: 'bottom-end',\n whileElementsMounted: autoUpdate,\n });\n\n const click: any = useClick(context);\n const dismiss: any = useDismiss(context);\n const role: any = useRole(context);\n\n const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);\n\n const defaultAttributeMappings: Record<string, string | string[]> = {\n email: ['emails'],\n firstName: ['name.givenName', 'given_name'],\n lastName: ['name.familyName', 'family_name'],\n picture: ['profile', 'profileUrl', 'picture', 'URL'],\n username: ['userName', 'username', 'user_name'],\n };\n\n const mergedMappings: Record<string, string | string[]> = Object.fromEntries(\n Object.entries({...defaultAttributeMappings, ...attributeMapping}).filter(\n (entry): entry is [string, string | string[]] => entry[1] !== undefined,\n ),\n );\n\n if (fallback && !user && !isLoading) {\n return fallback;\n }\n\n const handleMenuItemClick = (item: MenuItem): void => {\n if (item.onClick) {\n item.onClick();\n }\n setIsOpen(false);\n };\n\n const defaultMenuItems: MenuItem[] = [];\n\n if (onManageProfile) {\n defaultMenuItems.push({\n icon: <User width=\"16\" height=\"16\" />,\n label: manageProfileLabel,\n onClick: onManageProfile,\n });\n }\n\n if (onSignOut) {\n defaultMenuItems.push({\n icon: <LogOut width=\"16\" height=\"16\" />,\n label: 'Sign Out',\n onClick: onSignOut,\n });\n }\n\n const allMenuItems: MenuItem[] = [...menuItems];\n\n if (defaultMenuItems.length > 0) {\n if (menuItems.length > 0) {\n allMenuItems.push({label: '', onClick: undefined});\n }\n\n allMenuItems.push(...defaultMenuItems);\n }\n\n return (\n <div className={cx(withVendorCSSClassPrefix('user-dropdown'), className)}>\n <Button\n ref={refs.setReference}\n className={cx(withVendorCSSClassPrefix('user-dropdown__trigger'), styles['trigger'])}\n color=\"tertiary\"\n variant=\"text\"\n size=\"medium\"\n data-testid=\"thunderid-user-dropdown-trigger\"\n startIcon={\n <Avatar\n imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n name={getDisplayName(mergedMappings, user)}\n size={avatarSize}\n alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n />\n }\n {...getReferenceProps()}\n >\n {showTriggerLabel && (\n <Typography\n variant=\"body2\"\n className={cx(withVendorCSSClassPrefix('user-dropdown__trigger-label'), styles['userName'])}\n >\n {getDisplayName(mergedMappings, user)}\n </Typography>\n )}\n </Button>\n\n {isOpen && (\n <FloatingPortal id={portalId}>\n <FloatingFocusManager context={context} modal={false} initialFocus={-1}>\n <div\n ref={refs.setFloating}\n className={cx(\n withVendorCSSClassPrefix('user-dropdown__content'),\n styles['dropdownContent'],\n // Floating UI recomputes the position on every render, so this class is generated\n // fresh each time rather than memoized - Emotion still injects it into the shared,\n // nonce-tagged `<style>` element, so no inline `style` attribute is needed.\n css({\n ...floatingStyles,\n // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.\n // https://floating-ui.com/docs/misc#z-index-stacking\n zIndex: 9999,\n }),\n )}\n {...getFloatingProps()}\n >\n <div className={cx(withVendorCSSClassPrefix('user-dropdown__header'), styles['dropdownHeader'])}>\n <Avatar\n imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n name={getDisplayName(mergedMappings, user)}\n size={avatarSize * 1.25}\n alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n />\n <div className={cx(withVendorCSSClassPrefix('user-dropdown__header-info'), styles['headerInfo'])}>\n <Typography\n noWrap\n className={withVendorCSSClassPrefix('user-dropdown__header-name')}\n variant=\"body1\"\n fontWeight=\"medium\"\n >\n {getDisplayName(mergedMappings, user)}\n </Typography>\n <Typography\n noWrap\n className={withVendorCSSClassPrefix('user-dropdown__header-email')}\n variant=\"caption\"\n color=\"secondary\"\n >\n {getMappedUserProfileValue('username', mergedMappings, user) ||\n getMappedUserProfileValue('email', mergedMappings, user)}\n </Typography>\n </div>\n </div>\n <div className={cx(withVendorCSSClassPrefix('user-dropdown__menu'), styles['dropdownMenu'])}>\n {allMenuItems.map((item: any, index: number) => (\n <div key={index}>\n {((): ReactElement => {\n if (item.label === '') {\n return (\n <div\n className={cx(withVendorCSSClassPrefix('user-dropdown__menu-divider'), styles['divider'])}\n />\n );\n }\n if (item.href) {\n return (\n <a\n href={item.href}\n className={cx(\n withVendorCSSClassPrefix('user-dropdown__menu-item'),\n styles['menuItemAnchor'],\n hoveredItemIndex === index && styles['menuItemHighlighted'],\n )}\n onMouseEnter={(): void => setHoveredItemIndex(index)}\n onMouseLeave={(): void => setHoveredItemIndex(null)}\n onFocus={(): void => setHoveredItemIndex(index)}\n onBlur={(): void => setHoveredItemIndex(null)}\n >\n {item.icon}\n <span>{item.label}</span>\n </a>\n );\n }\n return (\n <Button\n onClick={(): void => handleMenuItemClick(item)}\n className={cx(\n withVendorCSSClassPrefix('user-dropdown__menu-item'),\n styles['menuItem'],\n hoveredItemIndex === index && styles['menuItemHighlighted'],\n )}\n color=\"tertiary\"\n variant=\"text\"\n size=\"small\"\n startIcon={item.icon}\n onMouseEnter={(): void => setHoveredItemIndex(index)}\n onMouseLeave={(): void => setHoveredItemIndex(null)}\n >\n {item.label}\n </Button>\n );\n })()}\n </div>\n ))}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </div>\n );\n};\n\nexport default BaseUserDropdown;\n"],"mappings":"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"}
@@ -30,6 +30,18 @@ export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManagePr
30
30
  * When provided, this completely replaces the default dropdown rendering.
31
31
  */
32
32
  children?: (props: UserDropdownRenderProps) => ReactNode;
33
+ /**
34
+ * Called instead of opening the built-in "Manage Profile" popup when the "Manage Profile"
35
+ * menu item (see `manageProfileLabel`) is clicked. Use this when the app has its own
36
+ * profile/account page it wants to navigate to instead, for example with a router's
37
+ * `navigate()`.
38
+ *
39
+ * @example
40
+ * ```tsx
41
+ * <UserDropdown manageProfileLabel="Manage Account" onManageProfile={() => navigate('/account')} />
42
+ * ```
43
+ */
44
+ onManageProfile?: () => void;
33
45
  /**
34
46
  * Custom render function for the dropdown content.
35
47
  * When provided, this replaces just the dropdown content while keeping the trigger.
@@ -1 +1 @@
1
- {"version":3,"file":"UserDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserDropdown/UserDropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAW,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAgD,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAIxG;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,aAAa,EAAE,OAAO,CAAC;IACvB,6FAA6F;IAC7F,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClC,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,GAAG,CAAC;CACX;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,iBAAiB,CAAC,GAAG;IACxF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IACzD;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAC/D;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAkFvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"UserDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserDropdown/UserDropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAW,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAgD,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAIxG;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,aAAa,EAAE,OAAO,CAAC;IACvB,6FAA6F;IAC7F,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClC,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,GAAG,CAAC;CACX;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,iBAAiB,CAAC,GAAG;IACxF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IACzD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAC/D;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyFvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -51,10 +51,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
51
51
  * />
52
52
  * ```
53
53
  */
54
- const UserDropdown = ({ children, renderTrigger, renderDropdown, onSignOut,...rest }) => {
54
+ const UserDropdown = ({ children, renderTrigger, renderDropdown, onManageProfile: onManageProfileOverride, onSignOut,...rest }) => {
55
55
  const { user, isLoading, signOut, meta } = useThunderID_default();
56
56
  const [isProfileOpen, setIsProfileOpen] = useState(false);
57
57
  const handleManageProfile = () => {
58
+ if (onManageProfileOverride) {
59
+ onManageProfileOverride();
60
+ return;
61
+ }
58
62
  setIsProfileOpen(true);
59
63
  };
60
64
  const handleSignOut = () => {
@@ -73,7 +77,7 @@ const UserDropdown = ({ children, renderTrigger, renderDropdown, onSignOut,...re
73
77
  signOut: handleSignOut,
74
78
  user
75
79
  };
76
- if (children) return /* @__PURE__ */ jsxs(Fragment, { children: [children(renderProps), /* @__PURE__ */ jsx(UserProfile_default, {
80
+ if (children) return /* @__PURE__ */ jsxs(Fragment, { children: [children(renderProps), !onManageProfileOverride && /* @__PURE__ */ jsx(UserProfile_default, {
77
81
  mode: "popup",
78
82
  open: isProfileOpen,
79
83
  onOpenChange: setIsProfileOpen
@@ -84,7 +88,7 @@ const UserDropdown = ({ children, renderTrigger, renderDropdown, onSignOut,...re
84
88
  onManageProfile: handleManageProfile,
85
89
  onSignOut: handleSignOut,
86
90
  ...rest
87
- }), /* @__PURE__ */ jsx(UserProfile_default, {
91
+ }), !onManageProfileOverride && /* @__PURE__ */ jsx(UserProfile_default, {
88
92
  mode: "popup",
89
93
  open: isProfileOpen,
90
94
  onOpenChange: setIsProfileOpen
@@ -95,7 +99,7 @@ const UserDropdown = ({ children, renderTrigger, renderDropdown, onSignOut,...re
95
99
  onManageProfile: handleManageProfile,
96
100
  onSignOut: handleSignOut,
97
101
  ...rest
98
- }), isProfileOpen && /* @__PURE__ */ jsx(UserProfile_default, {
102
+ }), !onManageProfileOverride && isProfileOpen && /* @__PURE__ */ jsx(UserProfile_default, {
99
103
  mode: "popup",
100
104
  open: isProfileOpen,
101
105
  onOpenChange: setIsProfileOpen
@@ -1 +1 @@
1
- {"version":3,"file":"UserDropdown.js","names":["UserDropdown: FC<UserDropdownProps>","useThunderID","renderProps: UserDropdownRenderProps","UserProfile","BaseUserDropdownComponent"],"sources":["../../../../src/components/presentation/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 * 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 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 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 <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 <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 {isProfileOpen && <UserProfile mode=\"popup\" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}\n </>\n );\n};\n\nexport default UserDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,MAAMA,gBAAuC,EAC3C,UACA,eACA,gBACA,UACA,GAAG,WACkC;CACrC,MAAM,EAAC,MAAM,WAAW,SAAS,SAAQC,sBAAc;CACvD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CAEzD,MAAM,4BAAkC;AACtC,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,4CACG,SAAS,YAAY,EACtB,oBAACC;EAAY,MAAK;EAAQ,MAAM;EAAe,cAAc;GAAoB,IAChF;AAKP,KAAI,iBAAiB,eAGnB,QACE,4CACG,gBACC,cAAc,YAAY,GAE1B,oBAACC;EACO;EACK;EACX,iBAAiB;EACjB,WAAW;EACX,GAAI;GACJ,EAGJ,oBAACD;EAAY,MAAK;EAAQ,MAAM;EAAe,cAAc;GAAoB,IAChF;AAKP,QACE,4CACE,oBAACC;EACO;EACK;EACX,iBAAiB;EACjB,WAAW;EACX,GAAI;GACJ,EACD,iBAAiB,oBAACD;EAAY,MAAK;EAAQ,MAAM;EAAe,cAAc;GAAoB,IAClG;;AAIP,2BAAe"}
1
+ {"version":3,"file":"UserDropdown.js","names":["UserDropdown: FC<UserDropdownProps>","useThunderID","renderProps: UserDropdownRenderProps","UserProfile","BaseUserDropdownComponent"],"sources":["../../../../src/components/presentation/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,4CACG,SAAS,YAAY,EACrB,CAAC,2BAA2B,oBAACC;EAAY,MAAK;EAAQ,MAAM;EAAe,cAAc;GAAoB,IAC7G;AAKP,KAAI,iBAAiB,eAGnB,QACE,4CACG,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,4CACE,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"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseUserProfile.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAA2B,MAAM,oBAAoB,CAAC;AAInE;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA6N3E,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"BaseUserProfile.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAA2B,MAAM,oBAAoB,CAAC;AAInE;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA+N3E,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -30,6 +30,7 @@ const useStyles = (theme, colorScheme) => {
30
30
  display: flex;
31
31
  align-items: center;
32
32
  gap: ${theme.vars.spacing.unit};
33
+ min-width: 0;
33
34
  `;
34
35
  const fieldActions = css`
35
36
  display: flex;
@@ -137,6 +138,7 @@ const useStyles = (theme, colorScheme) => {
137
138
  align-items: center;
138
139
  gap: ${theme.vars.spacing.unit};
139
140
  overflow: hidden;
141
+ min-width: 0;
140
142
  min-height: 28px;
141
143
  line-height: 28px;
142
144
  word-break: break-word;
@@ -1 +1 @@
1
- {"version":3,"file":"BaseUserProfile.styles.js","names":["valuePlaceholder: string","editButton: string","fieldInner: string","fieldActions: string","complexTextarea: string","objectKey: string","objectValue: string","root: string","card: string","header: string","profileInfo: string","name: string","profileSummary: string","sectionRow: string","sectionLabel: string","sectionValue: string","infoContainer: string","info: string","field: string","lastField: string","label: string","value: string","popup: string"],"sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseUserProfile component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> => {\n const valuePlaceholder: string = css`\n font-style: italic;\n opacity: 0.7;\n `;\n\n const editButton: string = css`\n font-style: italic;\n text-decoration: underline;\n opacity: 0.7;\n padding: 0;\n min-height: auto;\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n `;\n\n const fieldInner: string = css`\n flex: 1;\n display: flex;\n align-items: center;\n gap: ${theme.vars.spacing.unit};\n `;\n\n const fieldActions: string = css`\n display: flex;\n gap: calc(${theme.vars.spacing.unit} / 2);\n align-items: center;\n margin-inline-start: calc(${theme.vars.spacing.unit} * 4);\n `;\n\n const complexTextarea: string = css`\n min-height: 60px;\n width: 100%;\n padding: 8px;\n border: 1px solid ${theme.vars.colors.border};\n border-radius: ${theme.vars.borderRadius.small};\n resize: vertical;\n `;\n\n const objectKey: string = css`\n padding: ${theme.vars.spacing.unit};\n vertical-align: top;\n `;\n\n const objectValue: string = css`\n padding: ${theme.vars.spacing.unit};\n vertical-align: top;\n `;\n\n return useMemo(() => {\n const root: string = css`\n padding: calc(${theme.vars.spacing.unit} * 4);\n min-width: 600px;\n margin: 0 auto;\n font-family: ${theme.vars.typography.fontFamily};\n `;\n\n const card: string = css`\n background: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.large};\n `;\n\n const header: string = css`\n display: flex;\n align-items: center;\n gap: calc(${theme.vars.spacing.unit} * 1.5);\n margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n `;\n\n const profileInfo: string = css`\n flex: 1;\n `;\n\n const name: string = css`\n font-size: 1.5rem;\n font-weight: 600;\n margin: 0;\n color: ${theme.vars.colors.text.primary};\n `;\n\n const profileSummary: string = css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n `;\n\n const sectionRow: string = css`\n display: flex;\n align-items: center;\n padding: calc(${theme.vars.spacing.unit} * 1) 0;\n `;\n\n const sectionLabel: string = css`\n font-size: 0.875rem;\n font-weight: 600;\n color: ${theme.vars.colors.text.primary};\n width: 160px;\n flex-shrink: 0;\n `;\n\n const sectionValue: string = css`\n flex: 1;\n display: flex;\n align-items: center;\n gap: calc(${theme.vars.spacing.unit} * 1.5);\n font-size: 0.875rem;\n color: ${theme.vars.colors.text.primary};\n `;\n\n const infoContainer: string = css`\n display: flex;\n flex-direction: column;\n `;\n\n const info: string = css`\n padding: calc(${theme.vars.spacing.unit} * 1.5) 0;\n border-bottom: 1px solid ${theme.vars.colors.border};\n `;\n\n const field: string = css`\n display: flex;\n align-items: center;\n padding: calc(${theme.vars.spacing.unit} / 2) 0;\n min-height: 28px;\n `;\n\n const lastField: string = css`\n border-bottom: none;\n `;\n\n const label: string = css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${theme.vars.colors.text.secondary};\n width: 120px;\n flex-shrink: 0;\n line-height: 28px;\n text-align: start;\n `;\n\n const value: string = css`\n color: ${theme.vars.colors.text.primary};\n flex: 1;\n display: inline-block;\n align-items: center;\n gap: ${theme.vars.spacing.unit};\n overflow: hidden;\n min-height: 28px;\n line-height: 28px;\n word-break: break-word;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 350px;\n text-align: start;\n\n .${withVendorCSSClassPrefix('form-control')} {\n margin-bottom: 0;\n }\n\n input {\n margin: 0;\n }\n\n table {\n background-color: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.medium};\n white-space: normal;\n }\n\n td {\n border-color: ${theme.vars.colors.border};\n }\n `;\n\n const popup: string = css`\n padding: calc(${theme.vars.spacing.unit} * 2);\n `;\n\n const alert: string = css`\n margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n `;\n\n return {\n alert,\n card,\n complexTextarea,\n editButton,\n field,\n fieldActions,\n fieldInner,\n header,\n info,\n infoContainer,\n label,\n lastField,\n name,\n objectKey,\n objectValue,\n popup,\n profileInfo,\n profileSummary,\n root,\n sectionLabel,\n sectionRow,\n sectionValue,\n value,\n valuePlaceholder,\n };\n }, [\n theme.vars.colors.background.surface,\n theme.vars.colors.text.primary,\n theme.vars.colors.text.secondary,\n theme.vars.colors.border,\n theme.vars.borderRadius.large,\n theme.vars.borderRadius.medium,\n theme.vars.spacing.unit,\n theme.vars.typography.fontFamily,\n colorScheme,\n ]);\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,mBAA2B,GAAG;;;;CAKpC,MAAMC,aAAqB,GAAG;;;;;;;;;;;CAY9B,MAAMC,aAAqB,GAAG;;;;WAIrB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,eAAuB,GAAG;;gBAElB,MAAM,KAAK,QAAQ,KAAK;;gCAER,MAAM,KAAK,QAAQ,KAAK;;CAGtD,MAAMC,kBAA0B,GAAG;;;;wBAIb,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;;CAIjD,MAAMC,YAAoB,GAAG;eAChB,MAAM,KAAK,QAAQ,KAAK;;;CAIrC,MAAMC,cAAsB,GAAG;eAClB,MAAM,KAAK,QAAQ,KAAK;;;AAIrC,QAAO,cAAc;EACnB,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;EAGlD,MAAMC,OAAe,GAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;EAGjD,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;EAGhD,MAAMC,cAAsB,GAAG;;;EAI/B,MAAMC,OAAe,GAAG;;;;eAIb,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,iBAAyB,GAAG;;;;;EAMlC,MAAMC,aAAqB,GAAG;;;sBAGZ,MAAM,KAAK,QAAQ,KAAK;;EAG1C,MAAMC,eAAuB,GAAG;;;eAGrB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAK1C,MAAMC,eAAuB,GAAG;;;;kBAIlB,MAAM,KAAK,QAAQ,KAAK;;eAE3B,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,gBAAwB,GAAG;;;;EAKjC,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;EAGtD,MAAMC,QAAgB,GAAG;;;sBAGP,MAAM,KAAK,QAAQ,KAAK;;;EAI1C,MAAMC,YAAoB,GAAG;;;EAI7B,MAAMC,QAAgB,GAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;EAO5C,MAAMC,QAAgB,GAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;;SAU5B,yBAAyB,eAAe,CAAC;;;;;;;;;4BAStB,MAAM,KAAK,OAAO,WAAW,QAAQ;yBACxC,MAAM,KAAK,aAAa,OAAO;;;;;wBAKhC,MAAM,KAAK,OAAO,OAAO;;;EAI7C,MAAMC,QAAgB,GAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,SAAO;GACL,OALoB,GAAG;4BACD,MAAM,KAAK,QAAQ,KAAK;;GAK9C;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD,MAAM,KAAK,OAAO,WAAW;EAC7B,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO;EAClB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,QAAQ;EACnB,MAAM,KAAK,WAAW;EACtB;EACD,CAAC;;AAGJ,qCAAe"}
1
+ {"version":3,"file":"BaseUserProfile.styles.js","names":["valuePlaceholder: string","editButton: string","fieldInner: string","fieldActions: string","complexTextarea: string","objectKey: string","objectValue: string","root: string","card: string","header: string","profileInfo: string","name: string","profileSummary: string","sectionRow: string","sectionLabel: string","sectionValue: string","infoContainer: string","info: string","field: string","lastField: string","label: string","value: string","popup: string"],"sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseUserProfile component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> => {\n const valuePlaceholder: string = css`\n font-style: italic;\n opacity: 0.7;\n `;\n\n const editButton: string = css`\n font-style: italic;\n text-decoration: underline;\n opacity: 0.7;\n padding: 0;\n min-height: auto;\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n `;\n\n const fieldInner: string = css`\n flex: 1;\n display: flex;\n align-items: center;\n gap: ${theme.vars.spacing.unit};\n min-width: 0;\n `;\n\n const fieldActions: string = css`\n display: flex;\n gap: calc(${theme.vars.spacing.unit} / 2);\n align-items: center;\n margin-inline-start: calc(${theme.vars.spacing.unit} * 4);\n `;\n\n const complexTextarea: string = css`\n min-height: 60px;\n width: 100%;\n padding: 8px;\n border: 1px solid ${theme.vars.colors.border};\n border-radius: ${theme.vars.borderRadius.small};\n resize: vertical;\n `;\n\n const objectKey: string = css`\n padding: ${theme.vars.spacing.unit};\n vertical-align: top;\n `;\n\n const objectValue: string = css`\n padding: ${theme.vars.spacing.unit};\n vertical-align: top;\n `;\n\n return useMemo(() => {\n const root: string = css`\n padding: calc(${theme.vars.spacing.unit} * 4);\n min-width: 600px;\n margin: 0 auto;\n font-family: ${theme.vars.typography.fontFamily};\n `;\n\n const card: string = css`\n background: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.large};\n `;\n\n const header: string = css`\n display: flex;\n align-items: center;\n gap: calc(${theme.vars.spacing.unit} * 1.5);\n margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n `;\n\n const profileInfo: string = css`\n flex: 1;\n `;\n\n const name: string = css`\n font-size: 1.5rem;\n font-weight: 600;\n margin: 0;\n color: ${theme.vars.colors.text.primary};\n `;\n\n const profileSummary: string = css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n `;\n\n const sectionRow: string = css`\n display: flex;\n align-items: center;\n padding: calc(${theme.vars.spacing.unit} * 1) 0;\n `;\n\n const sectionLabel: string = css`\n font-size: 0.875rem;\n font-weight: 600;\n color: ${theme.vars.colors.text.primary};\n width: 160px;\n flex-shrink: 0;\n `;\n\n const sectionValue: string = css`\n flex: 1;\n display: flex;\n align-items: center;\n gap: calc(${theme.vars.spacing.unit} * 1.5);\n font-size: 0.875rem;\n color: ${theme.vars.colors.text.primary};\n `;\n\n const infoContainer: string = css`\n display: flex;\n flex-direction: column;\n `;\n\n const info: string = css`\n padding: calc(${theme.vars.spacing.unit} * 1.5) 0;\n border-bottom: 1px solid ${theme.vars.colors.border};\n `;\n\n const field: string = css`\n display: flex;\n align-items: center;\n padding: calc(${theme.vars.spacing.unit} / 2) 0;\n min-height: 28px;\n `;\n\n const lastField: string = css`\n border-bottom: none;\n `;\n\n const label: string = css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${theme.vars.colors.text.secondary};\n width: 120px;\n flex-shrink: 0;\n line-height: 28px;\n text-align: start;\n `;\n\n const value: string = css`\n color: ${theme.vars.colors.text.primary};\n flex: 1;\n display: inline-block;\n align-items: center;\n gap: ${theme.vars.spacing.unit};\n overflow: hidden;\n min-width: 0;\n min-height: 28px;\n line-height: 28px;\n word-break: break-word;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 350px;\n text-align: start;\n\n .${withVendorCSSClassPrefix('form-control')} {\n margin-bottom: 0;\n }\n\n input {\n margin: 0;\n }\n\n table {\n background-color: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.medium};\n white-space: normal;\n }\n\n td {\n border-color: ${theme.vars.colors.border};\n }\n `;\n\n const popup: string = css`\n padding: calc(${theme.vars.spacing.unit} * 2);\n `;\n\n const alert: string = css`\n margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n `;\n\n return {\n alert,\n card,\n complexTextarea,\n editButton,\n field,\n fieldActions,\n fieldInner,\n header,\n info,\n infoContainer,\n label,\n lastField,\n name,\n objectKey,\n objectValue,\n popup,\n profileInfo,\n profileSummary,\n root,\n sectionLabel,\n sectionRow,\n sectionValue,\n value,\n valuePlaceholder,\n };\n }, [\n theme.vars.colors.background.surface,\n theme.vars.colors.text.primary,\n theme.vars.colors.text.secondary,\n theme.vars.colors.border,\n theme.vars.borderRadius.large,\n theme.vars.borderRadius.medium,\n theme.vars.spacing.unit,\n theme.vars.typography.fontFamily,\n colorScheme,\n ]);\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,mBAA2B,GAAG;;;;CAKpC,MAAMC,aAAqB,GAAG;;;;;;;;;;;CAY9B,MAAMC,aAAqB,GAAG;;;;WAIrB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,GAAG;;gBAElB,MAAM,KAAK,QAAQ,KAAK;;gCAER,MAAM,KAAK,QAAQ,KAAK;;CAGtD,MAAMC,kBAA0B,GAAG;;;;wBAIb,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;;CAIjD,MAAMC,YAAoB,GAAG;eAChB,MAAM,KAAK,QAAQ,KAAK;;;CAIrC,MAAMC,cAAsB,GAAG;eAClB,MAAM,KAAK,QAAQ,KAAK;;;AAIrC,QAAO,cAAc;EACnB,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;EAGlD,MAAMC,OAAe,GAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;EAGjD,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;EAGhD,MAAMC,cAAsB,GAAG;;;EAI/B,MAAMC,OAAe,GAAG;;;;eAIb,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,iBAAyB,GAAG;;;;;EAMlC,MAAMC,aAAqB,GAAG;;;sBAGZ,MAAM,KAAK,QAAQ,KAAK;;EAG1C,MAAMC,eAAuB,GAAG;;;eAGrB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAK1C,MAAMC,eAAuB,GAAG;;;;kBAIlB,MAAM,KAAK,QAAQ,KAAK;;eAE3B,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,gBAAwB,GAAG;;;;EAKjC,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;EAGtD,MAAMC,QAAgB,GAAG;;;sBAGP,MAAM,KAAK,QAAQ,KAAK;;;EAI1C,MAAMC,YAAoB,GAAG;;;EAI7B,MAAMC,QAAgB,GAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;EAO5C,MAAMC,QAAgB,GAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;;;SAW5B,yBAAyB,eAAe,CAAC;;;;;;;;;4BAStB,MAAM,KAAK,OAAO,WAAW,QAAQ;yBACxC,MAAM,KAAK,aAAa,OAAO;;;;;wBAKhC,MAAM,KAAK,OAAO,OAAO;;;EAI7C,MAAMC,QAAgB,GAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,SAAO;GACL,OALoB,GAAG;4BACD,MAAM,KAAK,QAAQ,KAAK;;GAK9C;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD,MAAM,KAAK,OAAO,WAAW;EAC7B,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO;EAClB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,QAAQ;EACnB,MAAM,KAAK,WAAW;EACtB;EACD,CAAC;;AAGJ,qCAAe"}
@@ -1,6 +1,12 @@
1
1
  import { FC } from 'react';
2
2
  import { TextFieldProps } from '../TextField/TextField';
3
3
  export interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {
4
+ /**
5
+ * The browser autofill hint. Defaults to `current-password`; set `new-password` on the
6
+ * fields of a change-password or sign-up form so password managers offer to generate and
7
+ * store a new credential instead of filling the existing one.
8
+ */
9
+ autoComplete?: string;
4
10
  /**
5
11
  * Callback function when the field value changes
6
12
  */
@@ -1 +1 @@
1
- {"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,EAAE,EAAqB,MAAM,OAAO,CAAC;AAM1D,OAAkB,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAClH;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,EAAE,EAAqB,MAAM,OAAO,CAAC;AAM1D,OAAkB,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAClH;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -13,7 +13,7 @@ import { jsx } from "react/jsx-runtime";
13
13
  * Password field component with show/hide toggle functionality.
14
14
  * This component extends TextField and adds password visibility toggle functionality.
15
15
  */
16
- const PasswordField = ({ onChange, className, disabled, error,...textFieldProps }) => {
16
+ const PasswordField = ({ autoComplete = "current-password", onChange, className, disabled, error,...textFieldProps }) => {
17
17
  const { theme, colorScheme } = useTheme_default();
18
18
  const [showPassword, setShowPassword] = useState(false);
19
19
  const styles = PasswordField_styles_default(theme, colorScheme, showPassword, !!disabled, !!error);
@@ -26,7 +26,7 @@ const PasswordField = ({ onChange, className, disabled, error,...textFieldProps
26
26
  className: cx(withVendorCSSClassPrefix(bem("password-field")), className),
27
27
  type: showPassword ? "text" : "password",
28
28
  onChange: (e) => onChange(e.target.value),
29
- autoComplete: "current-password",
29
+ autoComplete,
30
30
  disabled,
31
31
  error,
32
32
  endIcon: /* @__PURE__ */ jsx(IconComponent, {
@@ -1 +1 @@
1
- {"version":3,"file":"PasswordField.js","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {\n /**\n * Callback function when the field value changes\n */\n onChange: (value: string) => void;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n onChange,\n className,\n disabled,\n error,\n ...textFieldProps\n}: PasswordFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const [showPassword, setShowPassword] = useState(false);\n const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n const togglePasswordVisibility = (): void => {\n if (!disabled) {\n setShowPassword(!showPassword);\n }\n };\n\n const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n return (\n <TextField\n {...textFieldProps}\n className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n type={showPassword ? 'text' : 'password'}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"current-password\"\n disabled={disabled}\n error={error}\n endIcon={\n <IconComponent\n width={16}\n height={16}\n className={cx(\n withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n styles['toggleIcon'],\n showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n )}\n />\n }\n onEndIconClick={togglePasswordVisibility}\n />\n );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAMA,iBAAyC,EAC7C,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAC9E,cAAa;EACH;EACH;EACP,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}
1
+ {"version":3,"file":"PasswordField.js","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {\n /**\n * The browser autofill hint. Defaults to `current-password`; set `new-password` on the\n * fields of a change-password or sign-up form so password managers offer to generate and\n * store a new credential instead of filling the existing one.\n */\n autoComplete?: string;\n /**\n * Callback function when the field value changes\n */\n onChange: (value: string) => void;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n autoComplete = 'current-password',\n onChange,\n className,\n disabled,\n error,\n ...textFieldProps\n}: PasswordFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const [showPassword, setShowPassword] = useState(false);\n const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n const togglePasswordVisibility = (): void => {\n if (!disabled) {\n setShowPassword(!showPassword);\n }\n };\n\n const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n return (\n <TextField\n {...textFieldProps}\n className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n type={showPassword ? 'text' : 'password'}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete={autoComplete}\n disabled={disabled}\n error={error}\n endIcon={\n <IconComponent\n width={16}\n height={16}\n className={cx(\n withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n styles['toggleIcon'],\n showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n )}\n />\n }\n onEndIconClick={togglePasswordVisibility}\n />\n );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAMA,iBAAyC,EAC7C,eAAe,oBACf,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAChE;EACJ;EACH;EACP,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}
@@ -1,4 +1,4 @@
1
- import { ThemeConfig, ThemeMode, RecursivePartial } from '@thunderid/browser';
1
+ import { RecursivePartial, ThemeConfig, ThemeMode } from '@thunderid/browser';
2
2
  import { FC, PropsWithChildren } from 'react';
3
3
  export interface ThemeProviderProps {
4
4
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/contexts/Theme/ThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAgB,MAAM,oBAAoB,CAAC;AAC/G,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAsE,MAAM,OAAO,CAAC;AAOjH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAsF5D,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/contexts/Theme/ThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAML,gBAAgB,EAEhB,WAAW,EACX,SAAS,EACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAsE,MAAM,OAAO,CAAC;AAOjH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAuH5D,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -3,7 +3,7 @@ import ThemeContext_default from "./ThemeContext.js";
3
3
  import applyThemeToDOM_default from "../../utils/applyThemeToDOM.js";
4
4
  import buildThemeConfigFromFlowMeta_default from "../../utils/buildThemeConfigFromFlowMeta.js";
5
5
  import normalizeThemeConfig_default from "../../utils/normalizeThemeConfig.js";
6
- import { createTheme } from "@thunderid/browser";
6
+ import { createClassObserver, createMediaQueryListener, createTheme, detectThemeMode } from "@thunderid/browser";
7
7
  import { useCallback, useContext, useEffect, useMemo, useState } from "react";
8
8
  import { jsx } from "react/jsx-runtime";
9
9
 
@@ -37,16 +37,38 @@ import { jsx } from "react/jsx-runtime";
37
37
  * </ThemeProvider>
38
38
  * ```
39
39
  */
40
- const ThemeProvider = ({ children, theme: themeOverrideProp }) => {
40
+ const ThemeProvider = ({ children, mode, theme: themeOverrideProp }) => {
41
41
  const themeOverride = normalizeThemeConfig_default(themeOverrideProp);
42
42
  const flowMetaContext = useContext(FlowMetaContext_default);
43
43
  const flowMetaTheme = flowMetaContext?.meta?.design?.theme ?? null;
44
44
  flowMetaContext?.isLoading;
45
45
  flowMetaContext?.error;
46
- const [colorScheme, setColorScheme] = useState(() => flowMetaTheme?.defaultColorScheme ?? "light");
46
+ const getInitialColorScheme = () => {
47
+ if (mode === "light" || mode === "dark") return mode;
48
+ if (mode === "system" || mode === "class") return detectThemeMode(mode);
49
+ return flowMetaTheme?.defaultColorScheme ?? "light";
50
+ };
51
+ const [colorScheme, setColorScheme] = useState(getInitialColorScheme);
52
+ useEffect(() => {
53
+ if (mode === void 0 && flowMetaTheme?.defaultColorScheme) setColorScheme(flowMetaTheme.defaultColorScheme);
54
+ }, [mode, flowMetaTheme?.defaultColorScheme]);
47
55
  useEffect(() => {
48
- if (flowMetaTheme?.defaultColorScheme) setColorScheme(flowMetaTheme.defaultColorScheme);
49
- }, [flowMetaTheme?.defaultColorScheme]);
56
+ if (mode !== "system" && mode !== "class") return void 0;
57
+ const handleThemeChange = (isDark) => {
58
+ setColorScheme(isDark ? "dark" : "light");
59
+ };
60
+ if (mode === "class") {
61
+ if (typeof document === "undefined") return void 0;
62
+ const observer = createClassObserver(document.documentElement, handleThemeChange);
63
+ return () => {
64
+ observer.disconnect();
65
+ };
66
+ }
67
+ const mediaQuery = createMediaQueryListener(handleThemeChange);
68
+ return () => {
69
+ if (mediaQuery?.removeEventListener) mediaQuery.removeEventListener("change", handleThemeChange);
70
+ };
71
+ }, [mode]);
50
72
  const toggleTheme = useCallback(() => {
51
73
  setColorScheme((prev) => prev === "light" ? "dark" : "light");
52
74
  }, []);
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","names":["ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>","themeOverride: RecursivePartial<ThemeConfig> | undefined","normalizeThemeConfig","flowMetaContext: FlowMetaContextValue | null","FlowMetaContext","flowMetaTheme: FlowMetaTheme | null","toggleTheme: () => void","finalThemeConfig: RecursivePartial<ThemeConfig> | undefined","metaConfig: RecursivePartial<ThemeConfig>","buildThemeConfigFromFlowMeta","theme: Theme","direction: 'ltr' | 'rtl'","value: any","ThemeContext"],"sources":["../../../src/contexts/Theme/ThemeProvider.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {createTheme, Theme, ThemeConfig, ThemeMode, RecursivePartial, FlowMetaTheme} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useState} from 'react';\nimport ThemeContext from './ThemeContext';\nimport applyThemeToDOM from '../../utils/applyThemeToDOM';\nimport buildThemeConfigFromFlowMeta from '../../utils/buildThemeConfigFromFlowMeta';\nimport normalizeThemeConfig from '../../utils/normalizeThemeConfig';\nimport FlowMetaContext, {FlowMetaContextValue} from '../FlowMeta/FlowMetaContext';\n\nexport interface ThemeProviderProps {\n /**\n * Initial color scheme override. Overrides the server default when provided.\n */\n mode?: ThemeMode;\n\n /**\n * Optional theme overrides merged on top of the server-side flow meta theme.\n * User-supplied values take highest precedence.\n */\n theme?: RecursivePartial<ThemeConfig>;\n}\n\n/**\n * ThemeProvider is the v2 drop-in replacement for `ThemeProvider`.\n *\n * It reads the design theme from the nearest `FlowMetaContext` (provided by\n * `FlowMetaProvider`) and publishes a resolved `Theme` object through the\n * **same** `ThemeContext` that `useTheme` consumes. This means all existing\n * components that call `useTheme` continue to work without any changes.\n *\n * The `defaultColorScheme` field returned by the server is used to seed the\n * active color scheme; the user can still toggle it locally via the\n * `toggleTheme` value exposed in the context.\n *\n * @example\n * ```tsx\n * <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>\n * <ThemeProvider>\n * <App /> {/* useTheme() works here as usual *\\/}\n * </ThemeProvider>\n * </FlowMetaProvider>\n * ```\n *\n * @example\n * With user theme overrides (user values win over server values):\n * ```tsx\n * <ThemeProvider theme={{ colors: { primary: { main: '#ff0000' } } }}>\n * <App />\n * </ThemeProvider>\n * ```\n */\nconst ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n children,\n theme: themeOverrideProp,\n}: PropsWithChildren<ThemeProviderProps>): ReactElement => {\n const themeOverride: RecursivePartial<ThemeConfig> | undefined = normalizeThemeConfig(themeOverrideProp);\n const flowMetaContext: FlowMetaContextValue | null = useContext(FlowMetaContext);\n\n const flowMetaTheme: FlowMetaTheme | null = flowMetaContext?.meta?.design?.theme ?? null;\n const isLoading: boolean = flowMetaContext?.isLoading ?? false;\n const error: Error | null = flowMetaContext?.error ?? null;\n\n // Seed the color scheme from the server's defaultColorScheme; allow local toggling.\n const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(() => flowMetaTheme?.defaultColorScheme ?? 'light');\n\n // When meta finishes loading, sync the color scheme with the server default.\n useEffect(() => {\n if (flowMetaTheme?.defaultColorScheme) {\n setColorScheme(flowMetaTheme.defaultColorScheme);\n }\n }, [flowMetaTheme?.defaultColorScheme]);\n\n const toggleTheme: () => void = useCallback(() => {\n setColorScheme((prev: 'light' | 'dark') => (prev === 'light' ? 'dark' : 'light'));\n }, []);\n\n // Build the resolved ThemeConfig: flow meta base → user overrides on top.\n const finalThemeConfig: RecursivePartial<ThemeConfig> | undefined = useMemo(() => {\n if (!flowMetaTheme) {\n return themeOverride;\n }\n\n const metaConfig: RecursivePartial<ThemeConfig> = buildThemeConfigFromFlowMeta(flowMetaTheme, colorScheme);\n\n if (!themeOverride) {\n return metaConfig;\n }\n\n return {\n ...metaConfig,\n ...themeOverride,\n borderRadius: {\n ...metaConfig.borderRadius,\n ...themeOverride.borderRadius,\n },\n colors: {\n ...metaConfig.colors,\n ...themeOverride.colors,\n },\n ...(metaConfig.typography || themeOverride.typography\n ? {\n typography: {\n ...(metaConfig as any).typography,\n ...themeOverride.typography,\n },\n }\n : {}),\n };\n }, [flowMetaTheme, colorScheme, themeOverride]);\n\n const theme: Theme = useMemo(\n () => createTheme(finalThemeConfig, colorScheme === 'dark'),\n [finalThemeConfig, colorScheme],\n );\n\n const direction: 'ltr' | 'rtl' = flowMetaTheme?.direction ?? 'ltr';\n\n // Apply CSS variables to the document root.\n useEffect(() => {\n applyThemeToDOM(theme);\n }, [theme]);\n\n // Apply text direction to the document root.\n useEffect(() => {\n if (typeof document !== 'undefined') {\n document.documentElement.dir = direction;\n }\n }, [direction]);\n\n const value: any = {\n colorScheme,\n direction,\n theme,\n toggleTheme,\n };\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n};\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAMA,iBAA4D,EAChE,UACA,OAAO,wBACkD;CACzD,MAAMC,gBAA2DC,6BAAqB,kBAAkB;CACxG,MAAMC,kBAA+C,WAAWC,wBAAgB;CAEhF,MAAMC,gBAAsC,iBAAiB,MAAM,QAAQ,SAAS;AACzD,kBAAiB;AAChB,kBAAiB;CAG7C,MAAM,CAAC,aAAa,kBAAkB,eAAiC,eAAe,sBAAsB,QAAQ;AAGpH,iBAAgB;AACd,MAAI,eAAe,mBACjB,gBAAe,cAAc,mBAAmB;IAEjD,CAAC,eAAe,mBAAmB,CAAC;CAEvC,MAAMC,cAA0B,kBAAkB;AAChD,kBAAgB,SAA4B,SAAS,UAAU,SAAS,QAAS;IAChF,EAAE,CAAC;CAGN,MAAMC,mBAA8D,cAAc;AAChF,MAAI,CAAC,cACH,QAAO;EAGT,MAAMC,aAA4CC,qCAA6B,eAAe,YAAY;AAE1G,MAAI,CAAC,cACH,QAAO;AAGT,SAAO;GACL,GAAG;GACH,GAAG;GACH,cAAc;IACZ,GAAG,WAAW;IACd,GAAG,cAAc;IAClB;GACD,QAAQ;IACN,GAAG,WAAW;IACd,GAAG,cAAc;IAClB;GACD,GAAI,WAAW,cAAc,cAAc,aACvC,EACE,YAAY;IACV,GAAI,WAAmB;IACvB,GAAG,cAAc;IAClB,EACF,GACD,EAAE;GACP;IACA;EAAC;EAAe;EAAa;EAAc,CAAC;CAE/C,MAAMC,QAAe,cACb,YAAY,kBAAkB,gBAAgB,OAAO,EAC3D,CAAC,kBAAkB,YAAY,CAChC;CAED,MAAMC,YAA2B,eAAe,aAAa;AAG7D,iBAAgB;AACd,0BAAgB,MAAM;IACrB,CAAC,MAAM,CAAC;AAGX,iBAAgB;AACd,MAAI,OAAO,aAAa,YACtB,UAAS,gBAAgB,MAAM;IAEhC,CAAC,UAAU,CAAC;CAEf,MAAMC,QAAa;EACjB;EACA;EACA;EACA;EACD;AAED,QAAO,oBAACC,qBAAa;EAAgB;EAAQ;GAAiC;;AAGhF,4BAAe"}
1
+ {"version":3,"file":"ThemeProvider.js","names":["ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>","themeOverride: RecursivePartial<ThemeConfig> | undefined","normalizeThemeConfig","flowMetaContext: FlowMetaContextValue | null","FlowMetaContext","flowMetaTheme: FlowMetaTheme | null","toggleTheme: () => void","finalThemeConfig: RecursivePartial<ThemeConfig> | undefined","metaConfig: RecursivePartial<ThemeConfig>","buildThemeConfigFromFlowMeta","theme: Theme","direction: 'ltr' | 'rtl'","value: any","ThemeContext"],"sources":["../../../src/contexts/Theme/ThemeProvider.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n createClassObserver,\n createMediaQueryListener,\n createTheme,\n detectThemeMode,\n FlowMetaTheme,\n RecursivePartial,\n Theme,\n ThemeConfig,\n ThemeMode,\n} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useState} from 'react';\nimport ThemeContext from './ThemeContext';\nimport applyThemeToDOM from '../../utils/applyThemeToDOM';\nimport buildThemeConfigFromFlowMeta from '../../utils/buildThemeConfigFromFlowMeta';\nimport normalizeThemeConfig from '../../utils/normalizeThemeConfig';\nimport FlowMetaContext, {FlowMetaContextValue} from '../FlowMeta/FlowMetaContext';\n\nexport interface ThemeProviderProps {\n /**\n * Initial color scheme override. Overrides the server default when provided.\n */\n mode?: ThemeMode;\n\n /**\n * Optional theme overrides merged on top of the server-side flow meta theme.\n * User-supplied values take highest precedence.\n */\n theme?: RecursivePartial<ThemeConfig>;\n}\n\n/**\n * ThemeProvider is the v2 drop-in replacement for `ThemeProvider`.\n *\n * It reads the design theme from the nearest `FlowMetaContext` (provided by\n * `FlowMetaProvider`) and publishes a resolved `Theme` object through the\n * **same** `ThemeContext` that `useTheme` consumes. This means all existing\n * components that call `useTheme` continue to work without any changes.\n *\n * The `defaultColorScheme` field returned by the server is used to seed the\n * active color scheme; the user can still toggle it locally via the\n * `toggleTheme` value exposed in the context.\n *\n * @example\n * ```tsx\n * <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>\n * <ThemeProvider>\n * <App /> {/* useTheme() works here as usual *\\/}\n * </ThemeProvider>\n * </FlowMetaProvider>\n * ```\n *\n * @example\n * With user theme overrides (user values win over server values):\n * ```tsx\n * <ThemeProvider theme={{ colors: { primary: { main: '#ff0000' } } }}>\n * <App />\n * </ThemeProvider>\n * ```\n */\nconst ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n children,\n mode,\n theme: themeOverrideProp,\n}: PropsWithChildren<ThemeProviderProps>): ReactElement => {\n const themeOverride: RecursivePartial<ThemeConfig> | undefined = normalizeThemeConfig(themeOverrideProp);\n const flowMetaContext: FlowMetaContextValue | null = useContext(FlowMetaContext);\n\n const flowMetaTheme: FlowMetaTheme | null = flowMetaContext?.meta?.design?.theme ?? null;\n const isLoading: boolean = flowMetaContext?.isLoading ?? false;\n const error: Error | null = flowMetaContext?.error ?? null;\n\n // Seed the color scheme: a fixed mode wins outright, 'system'/'class' detect it from the\n // environment via the same shared utilities Vue's ThemeProvider uses, and no mode falls back\n // to the server's default (unchanged pre-`mode` behavior).\n const getInitialColorScheme = (): 'light' | 'dark' => {\n if (mode === 'light' || mode === 'dark') return mode;\n if (mode === 'system' || mode === 'class') return detectThemeMode(mode);\n return flowMetaTheme?.defaultColorScheme ?? 'light';\n };\n\n const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(getInitialColorScheme);\n\n // When mode is unset, sync the color scheme with the server default once flow meta loads.\n useEffect(() => {\n if (mode === undefined && flowMetaTheme?.defaultColorScheme) {\n setColorScheme(flowMetaTheme.defaultColorScheme);\n }\n }, [mode, flowMetaTheme?.defaultColorScheme]);\n\n // Set up automatic detection listeners for 'system'/'class' modes.\n useEffect(() => {\n if (mode !== 'system' && mode !== 'class') return undefined;\n\n const handleThemeChange = (isDark: boolean): void => {\n setColorScheme(isDark ? 'dark' : 'light');\n };\n\n if (mode === 'class') {\n if (typeof document === 'undefined') return undefined;\n const observer = createClassObserver(document.documentElement, handleThemeChange);\n return () => {\n observer.disconnect();\n };\n }\n\n const mediaQuery = createMediaQueryListener(handleThemeChange);\n return () => {\n if (mediaQuery?.removeEventListener) {\n mediaQuery.removeEventListener('change', handleThemeChange as unknown as EventListener);\n }\n };\n }, [mode]);\n\n const toggleTheme: () => void = useCallback(() => {\n setColorScheme((prev: 'light' | 'dark') => (prev === 'light' ? 'dark' : 'light'));\n }, []);\n\n // Build the resolved ThemeConfig: flow meta base → user overrides on top.\n const finalThemeConfig: RecursivePartial<ThemeConfig> | undefined = useMemo(() => {\n if (!flowMetaTheme) {\n return themeOverride;\n }\n\n const metaConfig: RecursivePartial<ThemeConfig> = buildThemeConfigFromFlowMeta(flowMetaTheme, colorScheme);\n\n if (!themeOverride) {\n return metaConfig;\n }\n\n return {\n ...metaConfig,\n ...themeOverride,\n borderRadius: {\n ...metaConfig.borderRadius,\n ...themeOverride.borderRadius,\n },\n colors: {\n ...metaConfig.colors,\n ...themeOverride.colors,\n },\n ...(metaConfig.typography || themeOverride.typography\n ? {\n typography: {\n ...(metaConfig as any).typography,\n ...themeOverride.typography,\n },\n }\n : {}),\n };\n }, [flowMetaTheme, colorScheme, themeOverride]);\n\n const theme: Theme = useMemo(\n () => createTheme(finalThemeConfig, colorScheme === 'dark'),\n [finalThemeConfig, colorScheme],\n );\n\n const direction: 'ltr' | 'rtl' = flowMetaTheme?.direction ?? 'ltr';\n\n // Apply CSS variables to the document root.\n useEffect(() => {\n applyThemeToDOM(theme);\n }, [theme]);\n\n // Apply text direction to the document root.\n useEffect(() => {\n if (typeof document !== 'undefined') {\n document.documentElement.dir = direction;\n }\n }, [direction]);\n\n const value: any = {\n colorScheme,\n direction,\n theme,\n toggleTheme,\n };\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n};\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,MAAMA,iBAA4D,EAChE,UACA,MACA,OAAO,wBACkD;CACzD,MAAMC,gBAA2DC,6BAAqB,kBAAkB;CACxG,MAAMC,kBAA+C,WAAWC,wBAAgB;CAEhF,MAAMC,gBAAsC,iBAAiB,MAAM,QAAQ,SAAS;AACzD,kBAAiB;AAChB,kBAAiB;CAK7C,MAAM,8BAAgD;AACpD,MAAI,SAAS,WAAW,SAAS,OAAQ,QAAO;AAChD,MAAI,SAAS,YAAY,SAAS,QAAS,QAAO,gBAAgB,KAAK;AACvE,SAAO,eAAe,sBAAsB;;CAG9C,MAAM,CAAC,aAAa,kBAAkB,SAA2B,sBAAsB;AAGvF,iBAAgB;AACd,MAAI,SAAS,UAAa,eAAe,mBACvC,gBAAe,cAAc,mBAAmB;IAEjD,CAAC,MAAM,eAAe,mBAAmB,CAAC;AAG7C,iBAAgB;AACd,MAAI,SAAS,YAAY,SAAS,QAAS,QAAO;EAElD,MAAM,qBAAqB,WAA0B;AACnD,kBAAe,SAAS,SAAS,QAAQ;;AAG3C,MAAI,SAAS,SAAS;AACpB,OAAI,OAAO,aAAa,YAAa,QAAO;GAC5C,MAAM,WAAW,oBAAoB,SAAS,iBAAiB,kBAAkB;AACjF,gBAAa;AACX,aAAS,YAAY;;;EAIzB,MAAM,aAAa,yBAAyB,kBAAkB;AAC9D,eAAa;AACX,OAAI,YAAY,oBACd,YAAW,oBAAoB,UAAU,kBAA8C;;IAG1F,CAAC,KAAK,CAAC;CAEV,MAAMC,cAA0B,kBAAkB;AAChD,kBAAgB,SAA4B,SAAS,UAAU,SAAS,QAAS;IAChF,EAAE,CAAC;CAGN,MAAMC,mBAA8D,cAAc;AAChF,MAAI,CAAC,cACH,QAAO;EAGT,MAAMC,aAA4CC,qCAA6B,eAAe,YAAY;AAE1G,MAAI,CAAC,cACH,QAAO;AAGT,SAAO;GACL,GAAG;GACH,GAAG;GACH,cAAc;IACZ,GAAG,WAAW;IACd,GAAG,cAAc;IAClB;GACD,QAAQ;IACN,GAAG,WAAW;IACd,GAAG,cAAc;IAClB;GACD,GAAI,WAAW,cAAc,cAAc,aACvC,EACE,YAAY;IACV,GAAI,WAAmB;IACvB,GAAG,cAAc;IAClB,EACF,GACD,EAAE;GACP;IACA;EAAC;EAAe;EAAa;EAAc,CAAC;CAE/C,MAAMC,QAAe,cACb,YAAY,kBAAkB,gBAAgB,OAAO,EAC3D,CAAC,kBAAkB,YAAY,CAChC;CAED,MAAMC,YAA2B,eAAe,aAAa;AAG7D,iBAAgB;AACd,0BAAgB,MAAM;IACrB,CAAC,MAAM,CAAC;AAGX,iBAAgB;AACd,MAAI,OAAO,aAAa,YACtB,UAAS,gBAAgB,MAAM;IAEhC,CAAC,UAAU,CAAC;CAEf,MAAMC,QAAa;EACjB;EACA;EACA;EACA;EACD;AAED,QAAO,oBAACC,qBAAa;EAAgB;EAAQ;GAAiC;;AAGhF,4BAAe"}
@@ -1,7 +1,8 @@
1
- import { FlowMetadataResponse, HttpRequestConfig, HttpResponse, IdToken, OIDCDiscoveryApiResponse, SignInOptions, TokenExchangeRequestConfig, TokenResponse, AttributeSchema } from '@thunderid/browser';
1
+ import { ApiFetcher, FlowMetadataResponse, HttpRequestConfig, HttpResponse, IdToken, OIDCDiscoveryApiResponse, SignInOptions, TokenExchangeRequestConfig, TokenResponse, AttributeSchema } from '@thunderid/browser';
2
2
  import { Context } from 'react';
3
3
  import { ThunderIDReactConfig } from '../../models/config';
4
4
  import ThunderIDReactClient from '../../ThunderIDReactClient';
5
+ import { ResourceInvalidator } from '../../utils/createResourceInvalidator';
5
6
  /**
6
7
  * Props interface of {@link ThunderIDContext}
7
8
  */
@@ -66,6 +67,11 @@ export type ThunderIDContextProps = {
66
67
  * @returns A promise that resolves to the HTTP response.
67
68
  */
68
69
  http: {
70
+ /**
71
+ * Transport supplied through `ThunderIDProvider`'s `http.fetcher` prop, used by the management
72
+ * hooks. `undefined` means the hooks fall back to the SDK's authenticated HTTP client.
73
+ */
74
+ fetcher?: ApiFetcher;
69
75
  /**
70
76
  * Makes an HTTP request using the provided configuration.
71
77
  * @param requestConfig - Configuration for the HTTP request.
@@ -79,6 +85,11 @@ export type ThunderIDContextProps = {
79
85
  */
80
86
  requestAll: (requestConfigs?: HttpRequestConfig[]) => Promise<HttpResponse<any>[]>;
81
87
  };
88
+ /**
89
+ * Coordinates refetching between the management hooks: a successful mutation invalidates the
90
+ * queries whose data it changed.
91
+ */
92
+ invalidator?: ResourceInvalidator;
82
93
  /**
83
94
  * Instance ID for multi-instance support.
84
95
  */
@@ -1 +1 @@
1
- {"version":3,"file":"ThunderIDContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ThunderID/ThunderIDContext.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ThunderIDContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ThunderID/ThunderIDContext.ts"],"names":[],"mappings":"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"}
@@ -1,3 +1,4 @@
1
+ import { fallbackResourceInvalidator } from "../../utils/createResourceInvalidator.js";
1
2
  import { VendorConstants } from "@thunderid/browser";
2
3
  import { createContext } from "react";
3
4
 
@@ -24,6 +25,7 @@ const ThunderIDContext = createContext({
24
25
  requestAll: () => null
25
26
  },
26
27
  instanceId: 0,
28
+ invalidator: fallbackResourceInvalidator,
27
29
  isInitialized: false,
28
30
  isLoading: true,
29
31
  isMetaLoading: false,