@thunderid/react 1.8.0 → 1.9.0

package/dist/components/auth/flow/ConsentDetailText.js

@@ -0,0 +1,58 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import ConsentDetailText_styles_default, { useToggleStyles } from "./ConsentDetailText.styles.js";
+import resolveConsentText_default from "./resolveConsentText.js";
+import isConsentDetailTextClamped_default from "../../../utils/isConsentDetailTextClamped.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/auth/flow/ConsentDetailText.tsx
+/**
+* Button that expands or collapses long authorization detail content.
+*/
+const ConsentDetailToggle = ({ controls = void 0, expanded, hiddenCount = void 0, onToggle, t = void 0 }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = useToggleStyles(theme, colorScheme);
+	let label = resolveConsentText_default(t, "consent.authorization_details.show_less");
+	if (!expanded) label = hiddenCount === void 0 ? resolveConsentText_default(t, "consent.authorization_details.show_more") : resolveConsentText_default(t, "consent.authorization_details.more_items", { count: hiddenCount });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cx(withVendorCSSClassPrefix(bem("consent-detail-text", "toggle")), styles["toggle"]),
+		"aria-controls": controls,
+		"aria-expanded": expanded,
+		onClick: () => onToggle(!expanded),
+		children: label
+	});
+};
+/**
+* Shows authorization detail text that wraps anywhere, so a long unbroken token such as an IBAN or a
+* URL never overflows. Text longer than its limit is clamped behind a toggle.
+*/
+const ConsentDetailText = ({ align = "left", className = void 0, fontWeight = void 0, id = void 0, maxChars, maxLines, monospace = false, t = void 0, text, variant = "body2" }) => {
+	const [expanded, setExpanded] = useState(false);
+	const { theme, colorScheme } = useTheme_default();
+	const styles = ConsentDetailText_styles_default(theme, colorScheme, align, monospace, maxLines);
+	const long = isConsentDetailTextClamped_default(text, maxChars, maxLines);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix(bem("consent-detail-text")), styles["container"]),
+		children: [/* @__PURE__ */ jsx(Typography_default, {
+			id,
+			variant,
+			fontWeight,
+			className: cx(withVendorCSSClassPrefix(bem("consent-detail-text", "text")), styles["text"], monospace && withVendorCSSClassPrefix(bem("consent-detail-text", "text", "monospace")), monospace && styles["monospace"], long && !expanded && styles["clamp"], className),
+			children: text
+		}), long && /* @__PURE__ */ jsx(ConsentDetailToggle, {
+			controls: id,
+			expanded,
+			onToggle: setExpanded,
+			t
+		})]
+	});
+};
+var ConsentDetailText_default = ConsentDetailText;
+
+//#endregion
+export { ConsentDetailToggle, ConsentDetailText_default as default };
+//# sourceMappingURL=ConsentDetailText.js.map

package/dist/components/auth/flow/ConsentDetailText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailText.js","names":["ConsentDetailToggle: FC<ConsentDetailToggleProps>","useTheme","styles: Record<string, string>","label: string","resolveConsentText","ConsentDetailText: FC<ConsentDetailTextProps>","useStyles","long: boolean","isConsentDetailTextClamped","Typography"],"sources":["../../../../src/components/auth/flow/ConsentDetailText.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement, useState} from 'react';\nimport useStyles, {useToggleStyles} from './ConsentDetailText.styles';\nimport resolveConsentText from './resolveConsentText';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport isConsentDetailTextClamped from '../../../utils/isConsentDetailTextClamped';\nimport Typography from '../../primitives/Typography/Typography';\n\n/**\n * Props for the ConsentDetailToggle component.\n */\nexport interface ConsentDetailToggleProps {\n  /** Id of the element the toggle shows more or less of. */\n  controls?: string;\n  /** Whether everything is shown. */\n  expanded: boolean;\n  /** Number of items hidden while collapsed. When given, the collapsed label counts them. */\n  hiddenCount?: number;\n  /** Callback invoked with the next expanded state. */\n  onToggle: (expanded: boolean) => void;\n  /** translation data */\n  t?: UseTranslation['t'];\n}\n\n/**\n * Button that expands or collapses long authorization detail content.\n */\nexport const ConsentDetailToggle: FC<ConsentDetailToggleProps> = ({\n  controls = undefined,\n  expanded,\n  hiddenCount = undefined,\n  onToggle,\n  t = undefined,\n}: ConsentDetailToggleProps): ReactElement => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useToggleStyles(theme, colorScheme);\n\n  let label: string = resolveConsentText(t, 'consent.authorization_details.show_less');\n  if (!expanded) {\n    label =\n      hiddenCount === undefined\n        ? resolveConsentText(t, 'consent.authorization_details.show_more')\n        : resolveConsentText(t, 'consent.authorization_details.more_items', {count: hiddenCount});\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={cx(withVendorCSSClassPrefix(bem('consent-detail-text', 'toggle')), styles['toggle'])}\n      aria-controls={controls}\n      aria-expanded={expanded}\n      onClick={(): void => onToggle(!expanded)}\n    >\n      {label}\n    </button>\n  );\n};\n\n/**\n * Props for the ConsentDetailText component.\n */\nexport interface ConsentDetailTextProps {\n  /** Alignment of the text. */\n  align?: 'left' | 'right';\n  /** Class name applied to the text. */\n  className?: string;\n  /** Weight of the text. */\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';\n  /** Id of the text element. */\n  id?: string;\n  /** Number of characters above which the text is clamped. */\n  maxChars: number;\n  /** Number of lines the text is clamped to. */\n  maxLines: number;\n  /** Shows the text as a preformatted monospace block, for structured JSON. */\n  monospace?: boolean;\n  /** translation data */\n  t?: UseTranslation['t'];\n  /** Text to show. */\n  text: string;\n  /** Typography variant of the text. */\n  variant?: 'body2' | 'subtitle2';\n}\n\n/**\n * Shows authorization detail text that wraps anywhere, so a long unbroken token such as an IBAN or a\n * URL never overflows. Text longer than its limit is clamped behind a toggle.\n */\nconst ConsentDetailText: FC<ConsentDetailTextProps> = ({\n  align = 'left',\n  className = undefined,\n  fontWeight = undefined,\n  id = undefined,\n  maxChars,\n  maxLines,\n  monospace = false,\n  t = undefined,\n  text,\n  variant = 'body2',\n}: ConsentDetailTextProps): ReactElement => {\n  const [expanded, setExpanded] = useState<boolean>(false);\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, align, monospace, maxLines);\n  const long: boolean = isConsentDetailTextClamped(text, maxChars, maxLines);\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix(bem('consent-detail-text')), styles['container'])}>\n      <Typography\n        id={id}\n        variant={variant}\n        fontWeight={fontWeight}\n        className={cx(\n          withVendorCSSClassPrefix(bem('consent-detail-text', 'text')),\n          styles['text'],\n          monospace && withVendorCSSClassPrefix(bem('consent-detail-text', 'text', 'monospace')),\n          monospace && styles['monospace'],\n          long && !expanded && styles['clamp'],\n          className,\n        )}\n      >\n        {text}\n      </Typography>\n      {long && <ConsentDetailToggle controls={id} expanded={expanded} onToggle={setExpanded} t={t} />}\n    </div>\n  );\n};\n\nexport default ConsentDetailText;\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAaA,uBAAqD,EAChE,WAAW,QACX,UACA,cAAc,QACd,UACA,IAAI,aACwC;CAC5C,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiC,gBAAgB,OAAO,YAAY;CAE1E,IAAIC,QAAgBC,2BAAmB,GAAG,0CAA0C;AACpF,KAAI,CAAC,SACH,SACE,gBAAgB,SACZA,2BAAmB,GAAG,0CAA0C,GAChEA,2BAAmB,GAAG,4CAA4C,EAAC,OAAO,aAAY,CAAC;AAG/F,QACE,oBAAC;EACC,MAAK;EACL,WAAW,GAAG,yBAAyB,IAAI,uBAAuB,SAAS,CAAC,EAAE,OAAO,UAAU;EAC/F,iBAAe;EACf,iBAAe;EACf,eAAqB,SAAS,CAAC,SAAS;YAEvC;GACM;;;;;;AAkCb,MAAMC,qBAAiD,EACrD,QAAQ,QACR,YAAY,QACZ,aAAa,QACb,KAAK,QACL,UACA,UACA,YAAY,OACZ,IAAI,QACJ,MACA,UAAU,cACgC;CAC1C,MAAM,CAAC,UAAU,eAAe,SAAkB,MAAM;CACxD,MAAM,EAAC,OAAO,gBAA4CJ,kBAAU;CACpE,MAAMC,SAAiCI,iCAAU,OAAO,aAAa,OAAO,WAAW,SAAS;CAChG,MAAMC,OAAgBC,mCAA2B,MAAM,UAAU,SAAS;AAE1E,QACE,qBAAC;EAAI,WAAW,GAAG,yBAAyB,IAAI,sBAAsB,CAAC,EAAE,OAAO,aAAa;aAC3F,oBAACC;GACK;GACK;GACG;GACZ,WAAW,GACT,yBAAyB,IAAI,uBAAuB,OAAO,CAAC,EAC5D,OAAO,SACP,aAAa,yBAAyB,IAAI,uBAAuB,QAAQ,YAAY,CAAC,EACtF,aAAa,OAAO,cACpB,QAAQ,CAAC,YAAY,OAAO,UAC5B,UACD;aAEA;IACU,EACZ,QAAQ,oBAAC;GAAoB,UAAU;GAAc;GAAU,UAAU;GAAgB;IAAK;GAC3F;;AAIV,gCAAe"}

package/dist/components/auth/flow/ConsentDetailText.styles.d.ts

@@ -0,0 +1,20 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates styles for the ConsentDetailToggle component.
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+export declare const useToggleStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+/**
+ * Creates styles for the ConsentDetailText component.
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param align - Alignment of the text
+ * @param monospace - Whether the text is shown as a preformatted monospace block
+ * @param maxLines - Number of lines the text is clamped to
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, align: "left" | "right", monospace: boolean, maxLines: number) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=ConsentDetailText.styles.d.ts.map

package/dist/components/auth/flow/ConsentDetailText.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailText.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/ConsentDetailText.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAiBtF,CAAC;AAEJ;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,OAAO,MAAM,GAAG,OAAO,EACvB,WAAW,OAAO,EAClB,UAAU,MAAM,KACf,MAAM,CAAC,MAAM,EAAE,MAAM,CAsCrB,CAAC;AAEJ,eAAe,SAAS,CAAC"}

package/dist/components/auth/flow/ConsentDetailText.styles.js

@@ -0,0 +1,80 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/auth/flow/ConsentDetailText.styles.ts
+/**
+* Creates styles for the ConsentDetailToggle component.
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useToggleStyles = (theme, colorScheme) => useMemo(() => ({ toggle: css({
+	background: "transparent",
+	border: "none",
+	borderRadius: "4px",
+	color: theme.vars.colors.primary.main,
+	cursor: "pointer",
+	font: "inherit",
+	fontSize: "0.8125rem",
+	padding: "2px 4px",
+	"&:hover": { textDecoration: "underline" },
+	"&:focus-visible": {
+		outline: `2px solid ${theme.vars.colors.primary.main}`,
+		outlineOffset: "1px"
+	}
+}) }), [theme, colorScheme]);
+/**
+* Creates styles for the ConsentDetailText component.
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param align - Alignment of the text
+* @param monospace - Whether the text is shown as a preformatted monospace block
+* @param maxLines - Number of lines the text is clamped to
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, align, monospace, maxLines) => useMemo(() => ({
+	clamp: css({
+		display: "-webkit-box",
+		overflow: "hidden",
+		WebkitBoxOrient: "vertical",
+		WebkitLineClamp: maxLines
+	}),
+	container: css({
+		alignItems: align === "right" ? "flex-end" : "flex-start",
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		maxWidth: "100%",
+		minWidth: 0
+	}),
+	monospace: css({
+		background: theme.vars.colors.action.hover,
+		border: `1px solid ${theme.vars.colors.border}`,
+		borderRadius: "4px",
+		boxSizing: "border-box",
+		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+		fontSize: "0.75rem",
+		padding: "6px 8px",
+		width: "100%"
+	}),
+	text: css({
+		lineHeight: 1.45,
+		margin: 0,
+		maxWidth: "100%",
+		overflowWrap: "anywhere",
+		textAlign: align,
+		whiteSpace: monospace ? "pre-wrap" : "normal",
+		wordBreak: "normal"
+	})
+}), [
+	theme,
+	colorScheme,
+	align,
+	monospace,
+	maxLines
+]);
+var ConsentDetailText_styles_default = useStyles;
+
+//#endregion
+export { ConsentDetailText_styles_default as default, useToggleStyles };
+//# sourceMappingURL=ConsentDetailText.styles.js.map

package/dist/components/auth/flow/ConsentDetailText.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailText.styles.js","names":[],"sources":["../../../../src/components/auth/flow/ConsentDetailText.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the ConsentDetailToggle 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 */\nexport const useToggleStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      toggle: css({\n        background: 'transparent',\n        border: 'none',\n        borderRadius: '4px',\n        color: theme.vars.colors.primary.main,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: '0.8125rem',\n        padding: '2px 4px',\n        '&:hover': {textDecoration: 'underline'},\n        '&:focus-visible': {outline: `2px solid ${theme.vars.colors.primary.main}`, outlineOffset: '1px'},\n      }),\n    }),\n    [theme, colorScheme],\n  );\n\n/**\n * Creates styles for the ConsentDetailText component.\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param align - Alignment of the text\n * @param monospace - Whether the text is shown as a preformatted monospace block\n * @param maxLines - Number of lines the text is clamped to\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  align: 'left' | 'right',\n  monospace: boolean,\n  maxLines: number,\n): Record<string, string> =>\n  useMemo(\n    () => ({\n      clamp: css({\n        display: '-webkit-box',\n        overflow: 'hidden',\n        WebkitBoxOrient: 'vertical',\n        WebkitLineClamp: maxLines,\n      }),\n      container: css({\n        alignItems: align === 'right' ? 'flex-end' : 'flex-start',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px',\n        maxWidth: '100%',\n        minWidth: 0,\n      }),\n      monospace: css({\n        background: theme.vars.colors.action.hover,\n        border: `1px solid ${theme.vars.colors.border}`,\n        borderRadius: '4px',\n        boxSizing: 'border-box',\n        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n        fontSize: '0.75rem',\n        padding: '6px 8px',\n        width: '100%',\n      }),\n      text: css({\n        lineHeight: 1.45,\n        margin: 0,\n        maxWidth: '100%',\n        overflowWrap: 'anywhere',\n        textAlign: align,\n        whiteSpace: monospace ? 'pre-wrap' : 'normal',\n        wordBreak: 'normal',\n      }),\n    }),\n    [theme, colorScheme, align, monospace, maxLines],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AAaA,MAAa,mBAAmB,OAAc,gBAC5C,eACS,EACL,QAAQ,IAAI;CACV,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,OAAO,MAAM,KAAK,OAAO,QAAQ;CACjC,QAAQ;CACR,MAAM;CACN,UAAU;CACV,SAAS;CACT,WAAW,EAAC,gBAAgB,aAAY;CACxC,mBAAmB;EAAC,SAAS,aAAa,MAAM,KAAK,OAAO,QAAQ;EAAQ,eAAe;EAAM;CAClG,CAAC,EACH,GACD,CAAC,OAAO,YAAY,CACrB;;;;;;;;;;AAWH,MAAM,aACJ,OACA,aACA,OACA,WACA,aAEA,eACS;CACL,OAAO,IAAI;EACT,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,iBAAiB;EAClB,CAAC;CACF,WAAW,IAAI;EACb,YAAY,UAAU,UAAU,aAAa;EAC7C,SAAS;EACT,eAAe;EACf,KAAK;EACL,UAAU;EACV,UAAU;EACX,CAAC;CACF,WAAW,IAAI;EACb,YAAY,MAAM,KAAK,OAAO,OAAO;EACrC,QAAQ,aAAa,MAAM,KAAK,OAAO;EACvC,cAAc;EACd,WAAW;EACX,YAAY;EACZ,UAAU;EACV,SAAS;EACT,OAAO;EACR,CAAC;CACF,MAAM,IAAI;EACR,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,cAAc;EACd,WAAW;EACX,YAAY,YAAY,aAAa;EACrC,WAAW;EACZ,CAAC;CACH,GACD;CAAC;CAAO;CAAa;CAAO;CAAW;CAAS,CACjD;AAEH,uCAAe"}

package/dist/components/auth/flow/FieldFactory.js

@@ -1,7 +1,7 @@
+import TextField_default from "../../primitives/TextField/TextField.js";
 import Checkbox_default from "../../primitives/Checkbox/Checkbox.js";
 import DatePicker_default from "../../primitives/DatePicker/DatePicker.js";
 import OtpField_default from "../../primitives/OtpField/OtpField.js";
-import TextField_default from "../../primitives/TextField/TextField.js";
 import PasswordField_default from "../../primitives/PasswordField/PasswordField.js";
 import Select_default from "../../primitives/Select/Select.js";
 import { FieldType } from "@thunderid/browser";

package/dist/components/auth/flow/resolveConsentText.d.ts

@@ -0,0 +1,13 @@
+import { UseTranslation } from '../../../hooks/useTranslation';
+/**
+ * Resolves a consent screen string through the given translator, falling back to the SDK's default
+ * bundle when there is no translator or it has no entry for the key.
+ *
+ * @param t - Translator, when the screen has one.
+ * @param key - Translation key.
+ * @param params - Values to substitute into the text.
+ * @returns The resolved text.
+ */
+declare const resolveConsentText: (t: UseTranslation["t"] | undefined, key: string, params?: Record<string, string | number>) => string;
+export default resolveConsentText;
+//# sourceMappingURL=resolveConsentText.d.ts.map

package/dist/components/auth/flow/resolveConsentText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveConsentText.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/resolveConsentText.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAE7D;;;;;;;;GAQG;AACH,QAAA,MAAM,kBAAkB,GACtB,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,SAAS,EAClC,KAAK,MAAM,EACX,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KACvC,MASF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/auth/flow/resolveConsentText.js

@@ -0,0 +1,23 @@
+import { TranslationBundleConstants, getDefaultI18nBundles, substituteTranslationParams } from "@thunderid/browser";
+
+//#region src/components/auth/flow/resolveConsentText.ts
+/**
+* Resolves a consent screen string through the given translator, falling back to the SDK's default
+* bundle when there is no translator or it has no entry for the key.
+*
+* @param t - Translator, when the screen has one.
+* @param key - Translation key.
+* @param params - Values to substitute into the text.
+* @returns The resolved text.
+*/
+const resolveConsentText = (t, key, params) => {
+	const translated = t?.(key, params);
+	if (translated && translated !== key) return translated;
+	const fallback = getDefaultI18nBundles()[TranslationBundleConstants.FALLBACK_LOCALE]?.translations[key];
+	return substituteTranslationParams(fallback ?? key, params);
+};
+var resolveConsentText_default = resolveConsentText;
+
+//#endregion
+export { resolveConsentText_default as default };
+//# sourceMappingURL=resolveConsentText.js.map

package/dist/components/auth/flow/resolveConsentText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveConsentText.js","names":["translated: string | undefined","fallback: string | undefined"],"sources":["../../../../src/components/auth/flow/resolveConsentText.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  getDefaultI18nBundles,\n  I18nBundle,\n  substituteTranslationParams,\n  TranslationBundleConstants,\n} from '@thunderid/browser';\nimport {UseTranslation} from '../../../hooks/useTranslation';\n\n/**\n * Resolves a consent screen string through the given translator, falling back to the SDK's default\n * bundle when there is no translator or it has no entry for the key.\n *\n * @param t - Translator, when the screen has one.\n * @param key - Translation key.\n * @param params - Values to substitute into the text.\n * @returns The resolved text.\n */\nconst resolveConsentText = (\n  t: UseTranslation['t'] | undefined,\n  key: string,\n  params?: Record<string, string | number>,\n): string => {\n  const translated: string | undefined = t?.(key, params);\n  if (translated && translated !== key) {\n    return translated;\n  }\n  const bundle: I18nBundle | undefined = getDefaultI18nBundles()[TranslationBundleConstants.FALLBACK_LOCALE];\n  const fallback: string | undefined = bundle?.translations[key as keyof I18nBundle['translations']];\n\n  return substituteTranslationParams(fallback ?? key, params);\n};\n\nexport default resolveConsentText;\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,sBACJ,GACA,KACA,WACW;CACX,MAAMA,aAAiC,IAAI,KAAK,OAAO;AACvD,KAAI,cAAc,eAAe,IAC/B,QAAO;CAGT,MAAMC,WADiC,uBAAuB,CAAC,2BAA2B,kBAC7C,aAAa;AAE1D,QAAO,4BAA4B,YAAY,KAAK,OAAO;;AAG7D,iCAAe"}

package/dist/components/primitives/KeyValueInput/KeyValueInput.js

@@ -1,8 +1,8 @@
 import { cx } from "../../../styles/emotion.js";
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import TextField_default from "../TextField/TextField.js";
 import Plus_default from "../Icons/Plus.js";
 import X_default from "../Icons/X.js";
-import TextField_default from "../TextField/TextField.js";
 import KeyValueInput_styles_default from "./KeyValueInput.styles.js";
 import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { useCallback, useState } from "react";

package/dist/components/primitives/MultiInput/MultiInput.js

@@ -2,9 +2,9 @@ import { cx } from "../../../styles/emotion.js";
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import FormControl_default from "../FormControl/FormControl.js";
 import InputLabel_default from "../InputLabel/InputLabel.js";
+import TextField_default from "../TextField/TextField.js";
 import Checkbox_default from "../Checkbox/Checkbox.js";
 import DatePicker_default from "../DatePicker/DatePicker.js";
-import TextField_default from "../TextField/TextField.js";
 import MultiInput_styles_default from "./MultiInput.styles.js";
 import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { useCallback, useId, useState } from "react";

package/dist/components/primitives/PasswordField/PasswordField.js

@@ -1,9 +1,9 @@
 import { cx } from "../../../styles/emotion.js";
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import TextField_default from "../TextField/TextField.js";
 import Eye_default from "../Icons/Eye.js";
 import EyeOff_default from "../Icons/EyeOff.js";
 import PasswordField_styles_default from "./PasswordField.styles.js";
-import TextField_default from "../TextField/TextField.js";
 import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/hooks/auth/useConsentDetailField.d.ts

@@ -0,0 +1,130 @@
+import { type ConsentDetailRow } from '@thunderid/browser';
+import { type ConsentDetailListDisplay } from '../../utils/getConsentDetailListDisplay';
+import { UseTranslation } from '../useTranslation';
+/**
+ * How the user may change one field of an authorization detail on the consent screen: type a lower or
+ * higher `number` or `date`, or toggle items of a list whose rule is `removeItems` or `addItems`.
+ *
+ * @experimental This type may change in future versions
+ */
+export type ConsentDetailInputKind = 'number' | 'date' | 'removeItems' | 'addItems';
+/**
+ * Error shown for text a user entered into an authorization detail field, as a translation key and the
+ * values to substitute into its text.
+ *
+ * @experimental This interface may change in future versions
+ */
+export interface ConsentDetailInputError {
+    /** Translation key of the message. */
+    key: string;
+    /** Values to substitute into the message: `value` is the value that was shown. */
+    params: Record<string, string>;
+}
+/**
+ * One item of a list field of an authorization detail, as the consent screen offers it.
+ *
+ * @experimental This interface may change in future versions
+ */
+export interface ConsentDetailListItem {
+    /**
+     * Where the item comes from: `shown` in the requested detail, `added` by the user, or `offered` by the
+     * type for the user to add.
+     */
+    origin: 'shown' | 'added' | 'offered';
+    /** Whether the item is part of the value that would be granted. */
+    selected: boolean;
+    /** Whether the user may toggle the item. */
+    toggleable: boolean;
+    /** The item. */
+    value: string | number | boolean;
+}
+/**
+ * Props for the useConsentDetailField hook.
+ */
+export interface UseConsentDetailFieldProps {
+    /** The identifier of the consent purpose the authorization detail belongs to. */
+    purposeId: string;
+    /** The identifier of the authorization detail the field belongs to, its consent element name. */
+    detailId: string;
+    /** Current consent form values. */
+    formValues: Record<string, string>;
+    /** Callback that writes one consent form value. */
+    onInputChange: (name: string, value: string) => void;
+    /** The field. */
+    row: ConsentDetailRow;
+    /** Translator for the error message; the SDK's default bundle is used without one. */
+    t?: UseTranslation['t'];
+}
+/**
+ * Error of a field, with its message resolved.
+ */
+export interface ConsentDetailFieldError extends ConsentDetailInputError {
+    /** Translated message. */
+    message: string;
+}
+/**
+ * State and handlers of one authorization detail field, for drawing it in any UI.
+ */
+export interface UseConsentDetailFieldResult {
+    /** Why the text shown cannot be submitted, absent when it can. */
+    error?: ConsentDetailFieldError;
+    /** Adds a typed item to an `addItems` list that takes typed values; returns whether it was added. */
+    handleAdd: (text: string) => boolean;
+    /** Call when the field loses focus: an empty field returns to the value that was shown. */
+    handleBlur: () => void;
+    /** Call with the text the user entered into a `number` or `date` field, or the item typed into a list. */
+    handleChange: (text: string) => void;
+    /** Expands or collapses the field's list. */
+    handleListToggle: (expanded: boolean) => void;
+    /** Toggles an item of a list field, within what its rule allows. */
+    handleToggle: (item: string | number | boolean) => void;
+    /** Identifier for the field's input element. */
+    inputId: string;
+    /** Whether the user expanded the field's list past `CONSENT_DETAIL_DISPLAY_LIMITS.listItems`. */
+    isListExpanded: boolean;
+    /** Whether the field's value is a list of plain values, shown as a list rather than as structured JSON. */
+    isPlainList: boolean;
+    /** Whether an item of a list field is part of the value that would be granted. */
+    isSelected: (item: string | number | boolean) => boolean;
+    /** Whether the user may toggle an item of a list field. */
+    isToggleable: (item: string | number | boolean) => boolean;
+    /** Whether the field takes typed items: an `addItems` list whose type offers no fixed values. */
+    isTypedItemAllowed: boolean;
+    /** Whether the field's text may be submitted. Always true for a list or a read-only field. */
+    isValid: boolean;
+    /** Items of a list field, in display order; empty for any other field. */
+    items: ConsentDetailListItem[];
+    /** How the user may change the field, or `undefined` when it is read-only. */
+    kind?: ConsentDetailInputKind;
+    /** Label of the field. */
+    label: string;
+    /**
+     * How many items of the field's list to show and hide: the items of a list the user may change, or the
+     * values of a read-only plain list. Nothing is hidden for any other field.
+     */
+    listDisplay: ConsentDetailListDisplay;
+    /** Upper bound of a `number` or `date` field that may be decreased. */
+    max?: string;
+    /** Lower bound of a `number` or `date` field that may be increased. */
+    min?: string;
+    /** Text to show: the typed text of a `number` or `date` field, or the item being typed into a list. */
+    text: string;
+}
+/**
+ * Headless state of one authorization detail field on the consent screen. A `number` or `date` field keeps
+ * the text the user typed, writes it to the decision only while it stays within the field's bound, and
+ * otherwise clears the field's modification and marks the field invalid, which blocks approval (see
+ * `isConsentApprovalBlocked`). A list field exposes its items and toggles them as its rule allows.
+ *
+ * @param props - The field and the consent form state.
+ * @returns The field's state and handlers.
+ *
+ * @example
+ * ```tsx
+ * const field = useConsentDetailField({purposeId, detailId, row, formValues, onInputChange});
+ * <input value={field.text} onChange={(e) => field.handleChange(e.target.value)} onBlur={field.handleBlur} />
+ * ```
+ */
+declare const useConsentDetailField: ({ detailId, formValues, onInputChange, purposeId, row, t, }: UseConsentDetailFieldProps) => UseConsentDetailFieldResult;
+export default useConsentDetailField;
+//# sourceMappingURL=useConsentDetailField.d.ts.map

package/dist/hooks/auth/useConsentDetailField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConsentDetailField.d.ts","sourceRoot":"","sources":["../../../src/hooks/auth/useConsentDetailField.ts"],"names":[],"mappings":"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"}