npm - @thunderid/react - Versions diffs - 1.12.0 → 1.14.0 - Mend

@thunderid/react 1.12.0 → 1.14.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 (79) hide show

package/dist/components/account/UserProfile/BaseUserProfile.styles.js CHANGED Viewed

@@ -168,10 +168,37 @@ const useStyles = (theme, colorScheme) => {
 		const popup = css`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-		return {
-			alert: css`
+		const alert = css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 3);
-    `,
+    `;
+		const verificationStatus = css`
+      display: inline-flex;
+      flex-shrink: 0;
+      gap: calc(${theme.vars.spacing.unit} / 2);
+      align-items: center;
+      padding: 0 ${theme.vars.spacing.unit};
+      border-radius: 999px;
+      font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 22px;
+      white-space: nowrap;
+    `;
+		const verified = css`
+      color: ${theme.vars.colors.success.dark ?? theme.vars.colors.success.main};
+      background: color-mix(in srgb, ${theme.vars.colors.success.main} 12%, transparent);
+    `;
+		const unverified = css`
+      color: ${theme.vars.colors.warning.contrastText};
+      background: color-mix(in srgb, ${theme.vars.colors.warning.main} 14%, transparent);
+    `;
+		const verification = css`
+      padding: ${theme.vars.spacing.unit} 0;
+    `;
+		const verificationInline = css`
+      margin-inline-start: calc(120px + ${theme.vars.spacing.unit});
+    `;
+		return {
+			alert,
 			card,
 			complexTextarea,
 			editButton,
@@ -193,15 +220,41 @@ const useStyles = (theme, colorScheme) => {
 			sectionLabel,
 			sectionRow,
 			sectionValue,
+			unverified,
 			value,
-			valuePlaceholder
+			valuePlaceholder,
+			verification,
+			verificationDialog: css`
+      box-sizing: border-box;
+      width: min(448px, calc(100vw - calc(${theme.vars.spacing.unit} * 4)));
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `,
+			verificationInline,
+			verificationStatus,
+			verified,
+			visuallyHidden: css`
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    `
 		};
 	}, [
 		theme.vars.colors.background.surface,
 		theme.vars.colors.text.primary,
 		theme.vars.colors.text.secondary,
 		theme.vars.colors.border,
+		theme.vars.colors.success.main,
+		theme.vars.colors.success.dark,
+		theme.vars.colors.warning.contrastText,
+		theme.vars.colors.warning.main,
 		theme.vars.borderRadius.large,
+		theme.vars.borderRadius.small,
 		theme.vars.borderRadius.medium,
 		theme.vars.spacing.unit,
 		theme.vars.typography.fontFamily,

package/dist/components/account/UserProfile/BaseUserProfile.styles.js.map CHANGED Viewed

	@@ -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/account/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	+ {"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","alert: string","verificationStatus: string","verified: string","unverified: string","verification: string","verificationInline: string"],"sources":["../../../../src/components/account/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 const verificationStatus: string = css`\n display: inline-flex;\n flex-shrink: 0;\n gap: calc(${theme.vars.spacing.unit} / 2);\n align-items: center;\n padding: 0 ${theme.vars.spacing.unit};\n border-radius: 999px;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 22px;\n white-space: nowrap;\n `;\n\n const verified: string = css`\n color: ${theme.vars.colors.success.dark ?? theme.vars.colors.success.main};\n background: color-mix(in srgb, ${theme.vars.colors.success.main} 12%, transparent);\n `;\n\n // Amber marks an action the user can take.\n const unverified: string = css`\n color: ${theme.vars.colors.warning.contrastText};\n background: color-mix(in srgb, ${theme.vars.colors.warning.main} 14%, transparent);\n `;\n\n const verification: string = css`\n padding: ${theme.vars.spacing.unit} 0;\n `;\n\n // Starts where the value column starts: the label's width plus the row gap.\n const verificationInline: string = css`\n margin-inline-start: calc(120px + ${theme.vars.spacing.unit});\n `;\n\n const verificationDialog: string = css`\n box-sizing: border-box;\n width: min(448px, calc(100vw - calc(${theme.vars.spacing.unit} * 4)));\n padding: calc(${theme.vars.spacing.unit} * 2);\n `;\n\n // Hidden from sight, read by assistive technology.\n const visuallyHidden: string = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\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 unverified,\n value,\n valuePlaceholder,\n verification,\n verificationDialog,\n verificationInline,\n verificationStatus,\n verified,\n visuallyHidden,\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.colors.success.main,\n theme.vars.colors.success.dark,\n theme.vars.colors.warning.contrastText,\n theme.vars.colors.warning.main,\n theme.vars.borderRadius.large,\n theme.vars.borderRadius.small,\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":"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"}

package/dist/components/account/UserProfile/UserProfile.d.ts CHANGED Viewed

@@ -4,7 +4,13 @@ import { BaseUserProfileProps } from './BaseUserProfile';
  * Props for the UserProfile component.
  * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useThunderID
  */
-export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile'>;
+export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile'> & {
+    /**
+     * Handle of the `SELF` flow that verifies an attribute. Defaults to the server's shipped
+     * `default-self-attribute-verification-flow`.
+     */
+    verificationFlowHandle?: string;
+};
 /**
  * UserProfile component displays the authenticated user's profile information in a
  * structured and styled format. It shows user details such as display name, email,

package/dist/components/account/UserProfile/UserProfile.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/UserProfile.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,EAAC,EAAE,~~EAAyB~~,MAAM,OAAO,CAAC;~~AAEjD~~,OAAwB,EAAC,oBAAoB,~~EAAC~~,MAAM,mBAAmB,CAAC;~~AAMxE~~;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,kBAAkB,CAAC,CAAC;~~AAEnG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,~~CA6DrC~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"UserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/UserProfile.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAC,EAAE,EAAoC,MAAM,OAAO,CAAC;AAE5D,OAAwB,EAAC,oBAAoB,EAAyC,MAAM,mBAAmB,CAAC;AAOhH;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,kBAAkB,CAAC,GAAG;IACnG;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuFrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/account/UserProfile/UserProfile.js CHANGED Viewed

@@ -3,7 +3,8 @@ import useUser_default from "../../../contexts/User/useUser.js";
 import useTranslation_default from "../../../hooks/useTranslation.js";
 import BaseUserProfile_default from "./BaseUserProfile.js";
 import updateMeProfile_default from "../../../api/account/updateMeProfile.js";
-import { ThunderIDError, deepMerge, resolveResourceEndpoint } from "@thunderid/browser";
+import VerifyAttribute_default from "../VerifyAttribute/VerifyAttribute.js";
+import { AttributeVerificationConstants, ThunderIDError, deepMerge, resolveResourceEndpoint } from "@thunderid/browser";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -41,7 +42,7 @@ import { jsx } from "react/jsx-runtime";
 * />
 * ```
 */
-const UserProfile = ({ preferences, editable = true,...rest }) => {
+const UserProfile = ({ preferences, editable = true, verificationFlowHandle = AttributeVerificationConstants.DEFAULT_FLOW_HANDLE,...rest }) => {
 	const { baseUrl, endpoints, instanceId, preferences: contextPreferences } = useThunderID_default();
 	const { profile, flattenedProfile, onUpdateProfile, userSchema } = useUser_default();
 	const resolvedPreferences = {
@@ -74,7 +75,18 @@ const UserProfile = ({ preferences, editable = true,...rest }) => {
 			setError(message);
 		}
 	};
+	const renderVerification = ({ attribute, attributeDisplayName, onCancel, onComplete }) => /* @__PURE__ */ jsx(VerifyAttribute_default, {
+		attribute,
+		attributeDisplayName,
+		flowHandle: verificationFlowHandle,
+		preferences: resolvedPreferences,
+		variant: rest.mode === "popup" ? "outlined" : "flat",
+		onCancel,
+		onComplete,
+		onDone: onCancel
+	}, attribute);
 	return /* @__PURE__ */ jsx(BaseUserProfile_default, {
+		renderVerification: isEditableProfile ? renderVerification : void 0,
 		profile: profile ?? void 0,
 		flattenedProfile: flattenedProfile ?? void 0,
 		userSchema: userSchema ?? void 0,

package/dist/components/account/UserProfile/UserProfile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserProfile.js","names":["UserProfile: FC<UserProfileProps>","useThunderID","useUser","useTranslation","isEditableProfile: boolean","updatedAttributes: Record<string, unknown>","updateMeProfile","caughtError: unknown","message: string","BaseUserProfile"],"sources":["../../../../src/components/account/UserProfile/UserProfile.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {ThunderIDError, User, deepMerge, resolveResourceEndpoint} from '@thunderid/browser';\nimport {FC, ReactElement, useState} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';\nimport updateMeProfile from '../../../api/account/updateMeProfile';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useUser from '../../../contexts/User/useUser';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/*\n Props for the UserProfile component.\n * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useThunderID\n /\nexport type UserProfileProps = Omit<BaseUserProfileProps, 'user' \| 'profile' \| 'flattenedProfile'~~>;\~~n\n/\n UserProfile component displays the authenticated user's profile information in a\n * structured and styled format. It shows user details such as display name, email,\n * username, and other available profile information from ThunderID.\n \n This component is the React-specific implementation that uses the BaseUserProfile\n * and automatically retrieves the user data from ThunderID context if not provided.\n \n @example\n * ```tsx\n * // Basic usage - will use user from ThunderID context\n * <UserProfile />\n \n // With explicit user data\n * <UserProfile user={specificUser} />\n \n // With card layout and custom fallback\n * <UserProfile\n * cardLayout={true}\n * fallback={<div>Please sign in to view your profile</div>}\n * />\n \n // With field filtering - only show specific fields\n * <UserProfile\n * showFields={['name.givenName', 'name.familyName', 'emails']}\n * />\n \n // With field hiding - hide specific fields\n * <UserProfile\n * hideFields={['phoneNumbers', 'addresses']}\n * />\n * ```\n */\nconst UserProfile: FC<UserProfileProps> = ({preferences, editable = true, ...rest}: UserProfileProps): ReactElement => {\n const {baseUrl, endpoints, instanceId, preferences: contextPreferences} = useThunderID();\n const {profile, flattenedProfile, onUpdateProfile, userSchema} = useUser();\n const resolvedPreferences = {\n ...contextPreferences,\n ...preferences,\n user: {\n ...contextPreferences?.user,\n ...preferences?.user,\n },\n };\n const {t} = useTranslation(resolvedPreferences?.i18n);\n const isEditableProfile: boolean = resolvedPreferences?.user?.fetchUserProfile === false ? false : editable;\n\n const [error, setError] = useState<string \| null>(null);\n\n const handleProfileUpdate = async (payload: Record<string, unknown>): Promise<void> => {\n setError(null);\n\n try {\n const updatedAttributes: Record<string, unknown> = deepMerge(\n (profile?.['attributes'] as Record<string, unknown>) ?? {},\n payload,\n );\n\n Object.keys(updatedAttributes).forEach((key) => {\n if (updatedAttributes[key] === undefined \|\| updatedAttributes[key] === null) {\n delete updatedAttributes[key];\n }\n });\n\n const response: User = await updateMeProfile({\n baseUrl,\n url: resolveResourceEndpoint('usersMe', {endpoints}),\n instanceId,\n payload: updatedAttributes,\n });\n onUpdateProfile(response);\n } catch (caughtError: unknown) {\n let message: string = t('user.profile.update.generic.error');\n\n if (caughtError instanceof ThunderIDError) {\n message = caughtError?.message;\n }\n\n setError(message);\n }\n };\n\n return (\n <BaseUserProfile\n profile={profile ?? undefined}\n flattenedProfile={flattenedProfile ?? undefined}\n userSchema={userSchema ?? undefined}\n editable={isEditableProfile}\n onUpdate={isEditableProfile ? handleProfileUpdate : undefined}\n error={error}\n preferences={resolvedPreferences}\n {...rest}\n />\n );\n};\n\nexport default UserProfile;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA~~,MAAMA,eAAqC,~~EAAC~~,~~aAAa~~,WAAW,~~KAAM~~,GAAG,~~WAA0C~~;~~CACrH~~,MAAM,EAAC,SAAS,WAAW,YAAY,aAAa,uBAAsBC,sBAAc;CACxF,MAAM,EAAC,SAAS,kBAAkB,iBAAiB,eAAcC,iBAAS;CAC1E,MAAM,sBAAsB;EAC1B,GAAG;EACH,GAAG;EACH,MAAM;GACJ,GAAG,oBAAoB;GACvB,GAAG,aAAa;GACjB;EACF;CACD,MAAM,EAAC,MAAKC,uBAAe,qBAAqB,KAAK;CACrD,MAAMC,oBAA6B,qBAAqB,MAAM,qBAAqB,QAAQ,QAAQ;CAEnG,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CAEvD,MAAM,sBAAsB,OAAO,YAAoD;AACrF,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,oBAA6C,UAChD,UAAU,iBAA6C,EAAE,EAC1D,QACD;AAED,UAAO,KAAK,kBAAkB,CAAC,SAAS,QAAQ;AAC9C,QAAI,kBAAkB,SAAS,UAAa,kBAAkB,SAAS,KACrE,QAAO,kBAAkB;KAE3B;AAQF,mBANuB,MAAMC,wBAAgB;IAC3C;IACA,KAAK,wBAAwB,WAAW,EAAC,WAAU,CAAC;IACpD;IACA,SAAS;IACV,CAAC,CACuB;WAClBC,aAAsB;GAC7B,IAAIC,UAAkB,EAAE,oCAAoC;AAE5D,OAAI,uBAAuB,eACzB,WAAU,aAAa;AAGzB,YAAS,QAAQ;;;~~AAIrB~~,QACE,oBAACC;EACC,SAAS,WAAW;EACpB,kBAAkB,oBAAoB;EACtC,YAAY,cAAc;EAC1B,UAAU;EACV,UAAU,oBAAoB,sBAAsB;EAC7C;EACP,aAAa;EACb,GAAI;GACJ;;AAIN,0BAAe"}
1	+ {"version":3,"file":"UserProfile.js","names":["UserProfile: FC<UserProfileProps>","useThunderID","useUser","useTranslation","isEditableProfile: boolean","updatedAttributes: Record<string, unknown>","updateMeProfile","caughtError: unknown","message: string","VerifyAttribute","BaseUserProfile"],"sources":["../../../../src/components/account/UserProfile/UserProfile.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n AttributeVerificationConstants,\n ThunderIDError,\n User,\n deepMerge,\n resolveResourceEndpoint,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseUserProfile, {BaseUserProfileProps, BaseUserProfileVerificationRenderProps} from './BaseUserProfile';\nimport updateMeProfile from '../../../api/account/updateMeProfile';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useUser from '../../../contexts/User/useUser';\nimport useTranslation from '../../../hooks/useTranslation';\nimport VerifyAttribute from '../VerifyAttribute/VerifyAttribute';\n\n/*\n Props for the UserProfile component.\n * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useThunderID\n /\nexport type UserProfileProps = Omit<BaseUserProfileProps, 'user' \| 'profile' \| 'flattenedProfile'> & {\n /\n Handle of the `SELF` flow that verifies an attribute. Defaults to the server's shipped\n * `default-self-attribute-verification-flow`.\n /\n verificationFlowHandle?: string;\n};\n\n/\n UserProfile component displays the authenticated user's profile information in a\n * structured and styled format. It shows user details such as display name, email,\n * username, and other available profile information from ThunderID.\n \n This component is the React-specific implementation that uses the BaseUserProfile\n * and automatically retrieves the user data from ThunderID context if not provided.\n \n @example\n * ```tsx\n * // Basic usage - will use user from ThunderID context\n * <UserProfile />\n \n // With explicit user data\n * <UserProfile user={specificUser} />\n \n // With card layout and custom fallback\n * <UserProfile\n * cardLayout={true}\n * fallback={<div>Please sign in to view your profile</div>}\n * />\n \n // With field filtering - only show specific fields\n * <UserProfile\n * showFields={['name.givenName', 'name.familyName', 'emails']}\n * />\n \n // With field hiding - hide specific fields\n * <UserProfile\n * hideFields={['phoneNumbers', 'addresses']}\n * />\n * ```\n */\nconst UserProfile: FC<UserProfileProps> = ({\n preferences,\n editable = true,\n verificationFlowHandle = AttributeVerificationConstants.DEFAULT_FLOW_HANDLE,\n ...rest\n}: UserProfileProps): ReactElement => {\n const {baseUrl, endpoints, instanceId, preferences: contextPreferences} = useThunderID();\n const {profile, flattenedProfile, onUpdateProfile, userSchema} = useUser();\n const resolvedPreferences = {\n ...contextPreferences,\n ...preferences,\n user: {\n ...contextPreferences?.user,\n ...preferences?.user,\n },\n };\n const {t} = useTranslation(resolvedPreferences?.i18n);\n const isEditableProfile: boolean = resolvedPreferences?.user?.fetchUserProfile === false ? false : editable;\n\n const [error, setError] = useState<string \| null>(null);\n\n const handleProfileUpdate = async (payload: Record<string, unknown>): Promise<void> => {\n setError(null);\n\n try {\n const updatedAttributes: Record<string, unknown> = deepMerge(\n (profile?.['attributes'] as Record<string, unknown>) ?? {},\n payload,\n );\n\n Object.keys(updatedAttributes).forEach((key) => {\n if (updatedAttributes[key] === undefined \|\| updatedAttributes[key] === null) {\n delete updatedAttributes[key];\n }\n });\n\n const response: User = await updateMeProfile({\n baseUrl,\n url: resolveResourceEndpoint('usersMe', {endpoints}),\n instanceId,\n payload: updatedAttributes,\n });\n onUpdateProfile(response);\n } catch (caughtError: unknown) {\n let message: string = t('user.profile.update.generic.error');\n\n if (caughtError instanceof ThunderIDError) {\n message = caughtError?.message;\n }\n\n setError(message);\n }\n };\n\n const renderVerification = ({\n attribute,\n attributeDisplayName,\n onCancel,\n onComplete,\n }: BaseUserProfileVerificationRenderProps): ReactNode => (\n <VerifyAttribute\n key={attribute}\n attribute={attribute}\n attributeDisplayName={attributeDisplayName}\n flowHandle={verificationFlowHandle}\n preferences={resolvedPreferences}\n // Popup mode shows the panel under the row as a card; inline mode shows it in a dialog.\n variant={rest.mode === 'popup' ? 'outlined' : 'flat'}\n onCancel={onCancel}\n onComplete={onComplete}\n onDone={onCancel}\n />\n );\n\n return (\n <BaseUserProfile\n renderVerification={isEditableProfile ? renderVerification : undefined}\n profile={profile ?? undefined}\n flattenedProfile={flattenedProfile ?? undefined}\n userSchema={userSchema ?? undefined}\n editable={isEditableProfile}\n onUpdate={isEditableProfile ? handleProfileUpdate : undefined}\n error={error}\n preferences={resolvedPreferences}\n {...rest}\n />\n );\n};\n\nexport default UserProfile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAMA,eAAqC,EACzC,aACA,WAAW,MACX,yBAAyB,+BAA+B,oBACxD,GAAG,WACiC;CACpC,MAAM,EAAC,SAAS,WAAW,YAAY,aAAa,uBAAsBC,sBAAc;CACxF,MAAM,EAAC,SAAS,kBAAkB,iBAAiB,eAAcC,iBAAS;CAC1E,MAAM,sBAAsB;EAC1B,GAAG;EACH,GAAG;EACH,MAAM;GACJ,GAAG,oBAAoB;GACvB,GAAG,aAAa;GACjB;EACF;CACD,MAAM,EAAC,MAAKC,uBAAe,qBAAqB,KAAK;CACrD,MAAMC,oBAA6B,qBAAqB,MAAM,qBAAqB,QAAQ,QAAQ;CAEnG,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CAEvD,MAAM,sBAAsB,OAAO,YAAoD;AACrF,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,oBAA6C,UAChD,UAAU,iBAA6C,EAAE,EAC1D,QACD;AAED,UAAO,KAAK,kBAAkB,CAAC,SAAS,QAAQ;AAC9C,QAAI,kBAAkB,SAAS,UAAa,kBAAkB,SAAS,KACrE,QAAO,kBAAkB;KAE3B;AAQF,mBANuB,MAAMC,wBAAgB;IAC3C;IACA,KAAK,wBAAwB,WAAW,EAAC,WAAU,CAAC;IACpD;IACA,SAAS;IACV,CAAC,CACuB;WAClBC,aAAsB;GAC7B,IAAIC,UAAkB,EAAE,oCAAoC;AAE5D,OAAI,uBAAuB,eACzB,WAAU,aAAa;AAGzB,YAAS,QAAQ;;;CAIrB,MAAM,sBAAsB,EAC1B,WACA,sBACA,UACA,iBAEA,oBAACC;EAEY;EACW;EACtB,YAAY;EACZ,aAAa;EAEb,SAAS,KAAK,SAAS,UAAU,aAAa;EACpC;EACE;EACZ,QAAQ;IATH,UAUL;AAGJ,QACE,oBAACC;EACC,oBAAoB,oBAAoB,qBAAqB;EAC7D,SAAS,WAAW;EACpB,kBAAkB,oBAAoB;EACtC,YAAY,cAAc;EAC1B,UAAU;EACV,UAAU,oBAAoB,sBAAsB;EAC7C;EACP,aAAa;EACb,GAAI;GACJ;;AAIN,0BAAe"}

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.d.ts ADDED Viewed

@@ -0,0 +1,113 @@
+import { EmbeddedFlowComponent, EmbeddedSelfFlowRequest, EmbeddedSelfFlowResponse, Preferences } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+/**
+ * What {@link BaseVerifyAttribute} hands its `children` render function, so the steps can be drawn
+ * with any UI.
+ */
+export interface BaseVerifyAttributeRenderProps {
+    additionalData: Record<string, unknown>;
+    /**
+     * The step's components, without its headings.
+     */
+    components: EmbeddedFlowComponent[];
+    /**
+     * Masked destination the code or link was sent to, when the flow reports it.
+     */
+    destination: string | null;
+    /**
+     * Translated "Sent to …" line, set when the flow has its own prompt in `subtitle`.
+     */
+    destinationText: string | null;
+    /**
+     * Translated error of the last request, or the refusal.
+     */
+    error: string | null;
+    fieldErrors: Record<string, string>;
+    handleInputChange: (name: string, value: string) => void;
+    /**
+     * Sends a new code. Set only while the step has a resend action.
+     */
+    handleResend?: () => Promise<void>;
+    /**
+     * Submits a step. Pass `skipValidation` for an action, such as a resend, that sends no inputs.
+     */
+    handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, string>, skipValidation?: boolean) => Promise<void>;
+    isAwaitingLink: boolean;
+    isComplete: boolean;
+    /**
+     * Whether the server refused the verification or the request failed; the flow cannot continue.
+     */
+    isFailed: boolean;
+    isLoading: boolean;
+    isValid: boolean;
+    /**
+     * Closes the panel. Set only when the app passes `onCancel`.
+     */
+    onCancel?: () => void;
+    /**
+     * Confirms a link the user opened outside the app. Set only while the step waits for a link and
+     * the app passes `onDone`.
+     */
+    onDone?: () => void;
+    subtitle: string;
+    /**
+     * Translated message for a recorded verification.
+     */
+    successMessage: string;
+    title: string;
+    touched: Record<string, boolean>;
+    values: Record<string, string>;
+}
+/**
+ * Props for the BaseVerifyAttribute component.
+ */
+export interface BaseVerifyAttributeProps {
+    /**
+     * Label of the attribute being verified, used in the default heading and success message.
+     */
+    attributeDisplayName?: string;
+    buttonClassName?: string;
+    /**
+     * Renders custom UI in place of the default steps. Receives the step, the values and their setters,
+     * submit, resend, cancel, the destination, and the loading, error and completed state.
+     */
+    children?: (props: BaseVerifyAttributeRenderProps) => ReactNode;
+    className?: string;
+    inputClassName?: string;
+    isInitialized?: boolean;
+    /**
+     * Called when the user closes the panel. The close action is shown only when this is set.
+     */
+    onCancel?: () => void;
+    /**
+     * Called once the server has recorded the verification.
+     */
+    onComplete?: (response: EmbeddedSelfFlowResponse) => void;
+    /**
+     * Called when the user selects Done after the flow sent a link, which they confirm outside the app.
+     * The Done action is shown only when this is set.
+     */
+    onDone?: () => void;
+    /**
+     * Called when the server refuses the verification or the request fails.
+     */
+    onError?: (error: Error) => void;
+    onFlowChange?: (response: EmbeddedSelfFlowResponse) => void;
+    onInitialize?: () => Promise<EmbeddedSelfFlowResponse>;
+    onSubmit?: (payload: EmbeddedSelfFlowRequest) => Promise<EmbeddedSelfFlowResponse>;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     */
+    preferences?: Preferences;
+    showSubtitle?: boolean;
+    showTitle?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    variant?: 'outlined' | 'flat';
+}
+/**
+ * BaseVerifyAttribute renders the server-described steps of a self attribute verification flow.
+ * Accepts API functions as props to stay framework independent.
+ */
+declare const BaseVerifyAttribute: FC<BaseVerifyAttributeProps>;
+export default BaseVerifyAttribute;
+//# sourceMappingURL=BaseVerifyAttribute.d.ts.map

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BaseVerifyAttribute.d.ts","sourceRoot":"","sources":["../../../../src/components/account/VerifyAttribute/BaseVerifyAttribute.tsx"],"names":[],"mappings":"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"}