@thunderid/react 1.7.0 → 1.9.0

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

@@ -0,0 +1,83 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(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) => (0, react.useMemo)(() => ({ toggle: require_emotion.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) => (0, react.useMemo)(() => ({
+	clamp: require_emotion.css({
+		display: "-webkit-box",
+		overflow: "hidden",
+		WebkitBoxOrient: "vertical",
+		WebkitLineClamp: maxLines
+	}),
+	container: require_emotion.css({
+		alignItems: align === "right" ? "flex-end" : "flex-start",
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		maxWidth: "100%",
+		minWidth: 0
+	}),
+	monospace: require_emotion.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: require_emotion.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
+exports.default = ConsentDetailText_styles_default;
+exports.useToggleStyles = useToggleStyles;
+//# sourceMappingURL=ConsentDetailText.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailText.styles.cjs","names":["css"],"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,0CAEnC,EACL,QAAQA,oBAAI;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,uCAGS;CACL,OAAOA,oBAAI;EACT,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,iBAAiB;EAClB,CAAC;CACF,WAAWA,oBAAI;EACb,YAAY,UAAU,UAAU,aAAa;EAC7C,SAAS;EACT,eAAe;EACf,KAAK;EACL,UAAU;EACV,UAAU;EACX,CAAC;CACF,WAAWA,oBAAI;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,MAAMA,oBAAI;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/cjs/components/auth/flow/FieldFactory.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
 const require_Checkbox = require('../../primitives/Checkbox/Checkbox.cjs');
 const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs');
 const require_OtpField = require('../../primitives/OtpField/OtpField.cjs');
-const require_TextField = require('../../primitives/TextField/TextField.cjs');
 const require_PasswordField = require('../../primitives/PasswordField/PasswordField.cjs');
 const require_Select = require('../../primitives/Select/Select.cjs');
 let __thunderid_browser = require("@thunderid/browser");

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

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__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 = (0, __thunderid_browser.getDefaultI18nBundles)()[__thunderid_browser.TranslationBundleConstants.FALLBACK_LOCALE]?.translations[key];
+	return (0, __thunderid_browser.substituteTranslationParams)(fallback ?? key, params);
+};
+var resolveConsentText_default = resolveConsentText;
+
+//#endregion
+exports.default = resolveConsentText_default;
+//# sourceMappingURL=resolveConsentText.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveConsentText.cjs","names":["translated: string | undefined","fallback: string | undefined","TranslationBundleConstants"],"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,2DADwD,CAACC,+CAA2B,kBAC7C,aAAa;AAE1D,6DAAmC,YAAY,KAAK,OAAO;;AAG7D,iCAAe"}

package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
 const require_Plus = require('../Icons/Plus.cjs');
 const require_X = require('../Icons/X.cjs');
-const require_TextField = require('../TextField/TextField.cjs');
 const require_KeyValueInput_styles = require('./KeyValueInput.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);

package/dist/cjs/components/primitives/MultiInput/MultiInput.cjs

@@ -3,9 +3,9 @@ const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_FormControl = require('../FormControl/FormControl.cjs');
 const require_InputLabel = require('../InputLabel/InputLabel.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
 const require_Checkbox = require('../Checkbox/Checkbox.cjs');
 const require_DatePicker = require('../DatePicker/DatePicker.cjs');
-const require_TextField = require('../TextField/TextField.cjs');
 const require_MultiInput_styles = require('./MultiInput.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);

package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
 const require_Eye = require('../Icons/Eye.cjs');
 const require_EyeOff = require('../Icons/EyeOff.cjs');
 const require_PasswordField_styles = require('./PasswordField.styles.cjs');
-const require_TextField = require('../TextField/TextField.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 let react = require("react");

package/dist/cjs/hooks/auth/useConsentDetailField.cjs

@@ -0,0 +1,357 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_resolveConsentText = require('../../components/auth/flow/resolveConsentText.cjs');
+const require_getConsentDetailListDisplay = require('../../utils/getConsentDetailListDisplay.cjs');
+const require_isConsentDetailPlainList = require('../../utils/isConsentDetailPlainList.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/auth/useConsentDetailField.ts
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+/**
+* Reports whether a value the user entered for an authorization detail field stays within the value
+* that was shown, in the direction the field may move.
+*
+* @param modification - `decrease` or `increase`.
+* @param candidate - Value the user entered.
+* @param shown - Value that was shown.
+* @returns Whether the candidate is allowed.
+*
+* @example
+* ```typescript
+* isWithinConsentBound('decrease', 20, 35) // returns true
+* isWithinConsentBound('decrease', 40, 35) // returns false
+* ```
+*/
+const isWithinConsentBound = (modification, candidate, shown) => modification === "decrease" ? candidate <= shown : candidate >= shown;
+/**
+* Checks the text a user entered for an authorization detail field that may be decreased or increased: a
+* number, or a date in `YYYY-MM-DD` form. The text must be a value of the field's kind and stay within the
+* value that was shown, in the direction the field may move.
+*
+* @param row - The field, carrying the shown value and its modification.
+* @param text - The text the user entered.
+* @returns The error to show, or `undefined` when the text may be submitted.
+*
+* @example
+* ```typescript
+* getConsentDetailInputError({label: 'Amount', modification: 'decrease', path: 'amount', value: 35}, '50')
+* // returns {key: 'consent.authorization_details.number_max', params: {value: '35'}}
+* ```
+*/
+const getConsentDetailInputError = (row, text) => {
+	const modification = row.modification ?? "";
+	const params = { value: String(row.value) };
+	if (typeof row.value === "number") {
+		const entered = Number(text);
+		if (text.trim() === "" || !Number.isFinite(entered)) return {
+			key: "consent.authorization_details.invalid_number",
+			params
+		};
+		if (!isWithinConsentBound(modification, entered, row.value)) return {
+			key: modification === "decrease" ? "consent.authorization_details.number_max" : "consent.authorization_details.number_min",
+			params
+		};
+		return;
+	}
+	if (!DATE_PATTERN.test(text) || Number.isNaN(Date.parse(text))) return {
+		key: "consent.authorization_details.invalid_date",
+		params
+	};
+	if (!isWithinConsentBound(modification, text, String(row.value))) return {
+		key: modification === "decrease" ? "consent.authorization_details.date_max" : "consent.authorization_details.date_min",
+		params
+	};
+};
+/**
+* Tells how the user may change one field of an authorization detail on the consent screen. A number may
+* be lowered or raised, a date in `YYYY-MM-DD` form moved earlier or later, and items of a plain list
+* removed (when it has more than one) or added. A date and time is never changed by the user.
+*
+* @param row - The field.
+* @returns The kind of input the field takes, or `undefined` when the field is read-only.
+*
+* @example
+* ```typescript
+* getConsentDetailInputKind({label: 'Amount', modification: 'decrease', path: 'amount', value: 35}) // returns 'number'
+* ```
+*/
+const getConsentDetailInputKind = (row) => {
+	const isOrdered = row.modification === "decrease" || row.modification === "increase";
+	if (isOrdered && typeof row.value === "number") return "number";
+	if (isOrdered && row.as === "date" && typeof row.value === "string" && DATE_PATTERN.test(row.value)) return "date";
+	if (row.modification === "removeItems" && require_isConsentDetailPlainList.default(row.value) && row.value.length > 1) return "removeItems";
+	if (row.modification === "addItems" && require_isConsentDetailPlainList.default(row.value)) return "addItems";
+};
+/**
+* Gives the text a `number` or `date` authorization detail field shows when the user is not typing into it:
+* the value the user chose, or the value that was shown when the user has not changed it.
+*
+* @param purposeId - The identifier of the consent purpose the authorization detail belongs to.
+* @param detailId - The identifier of the authorization detail, its consent element name.
+* @param row - The field.
+* @param formValues - Form values, holding the JSON text of each changed field under its modified key.
+* @returns The text to show.
+*
+* @example
+* ```typescript
+* getConsentDetailInputText('p1', 'd-1', amountRow, {'__consent_modified__p1__d-1__amount': '20'}) // returns '20'
+* ```
+*/
+const getConsentDetailInputText = (purposeId, detailId, row, formValues) => {
+	const raw = formValues[(0, __thunderid_browser.getConsentModifiedKey)(purposeId, detailId, row.path)];
+	if (typeof raw === "string" && raw !== "") try {
+		const value = JSON.parse(raw);
+		if (typeof value === "number" || typeof value === "string") return String(value);
+	} catch {}
+	return String(row.value);
+};
+/**
+* Turns the text a user entered into a `number` or `date` authorization detail field into the form values
+* to write. Text within the field's bound becomes the field's modified value. Any other text clears the
+* modified value, so a value entered earlier is never submitted in its place, and marks the field invalid,
+* which blocks approval until the user corrects it.
+*
+* @param purposeId - The identifier of the consent purpose the authorization detail belongs to.
+* @param detailId - The identifier of the authorization detail, its consent element name.
+* @param row - The field, carrying the shown value and its modification.
+* @param text - The text the user entered.
+* @returns The error, if any, and the form values to write.
+*
+* @example
+* ```typescript
+* parseConsentDetailInput('p1', 'd-1', amountRow, '20')
+* // returns {isValid: true, formValues: {'__consent_modified__p1__d-1__amount': '20', '__consent_invalid__p1__d-1__amount': ''}}
+* ```
+*/
+const parseConsentDetailInput = (purposeId, detailId, row, text) => {
+	const modifiedKey = (0, __thunderid_browser.getConsentModifiedKey)(purposeId, detailId, row.path);
+	const invalidKey = (0, __thunderid_browser.getConsentInvalidKey)(purposeId, detailId, row.path);
+	const error = getConsentDetailInputError(row, text);
+	if (error) return {
+		error,
+		formValues: {
+			[invalidKey]: "true",
+			[modifiedKey]: ""
+		},
+		isValid: false
+	};
+	const value = typeof row.value === "number" ? Number(text) : text;
+	return {
+		formValues: {
+			[invalidKey]: "",
+			[modifiedKey]: JSON.stringify(value)
+		},
+		isValid: true
+	};
+};
+/**
+* Gives the form values that return an authorization detail field to the value that was shown: no
+* modified value and no invalid marker. A field the user left empty is reset this way when it loses focus.
+*
+* @param purposeId - The identifier of the consent purpose the authorization detail belongs to.
+* @param detailId - The identifier of the authorization detail, its consent element name.
+* @param path - Dot-separated location of the field within the detail.
+* @returns The form values to write, keyed by form key.
+*
+* @example
+* ```typescript
+* resetConsentDetailInput('p1', 'd-1', 'amount')
+* // returns {'__consent_modified__p1__d-1__amount': '', '__consent_invalid__p1__d-1__amount': ''}
+* ```
+*/
+const resetConsentDetailInput = (purposeId, detailId, path) => ({
+	[(0, __thunderid_browser.getConsentInvalidKey)(purposeId, detailId, path)]: "",
+	[(0, __thunderid_browser.getConsentModifiedKey)(purposeId, detailId, path)]: ""
+});
+/**
+* Lists the items of a `removeItems` or `addItems` authorization detail field as the consent screen offers
+* them. For `removeItems`, every shown item is listed, selected while kept; a kept item can be removed
+* unless it is the last one, and a removed item can be added back. For `addItems`, the shown items are
+* selected and fixed, the items the user added are selected and can be taken out again, and the values the
+* type allows are offered unselected.
+*
+* @param purposeId - The identifier of the consent purpose the authorization detail belongs to.
+* @param detailId - The identifier of the authorization detail, its consent element name.
+* @param row - The list field.
+* @param formValues - Form values, holding the JSON text of each changed field under its modified key.
+* @returns The items, in display order.
+*
+* @example
+* ```typescript
+* getConsentDetailListItems('p1', 'd-1', {label: 'Actions', modification: 'removeItems', path: 'actions', value: ['a', 'b']}, {})
+* // returns [{origin: 'shown', selected: true, toggleable: true, value: 'a'}, {origin: 'shown', selected: true, toggleable: true, value: 'b'}]
+* ```
+*/
+const getConsentDetailListItems = (purposeId, detailId, row, formValues) => {
+	const shown = require_isConsentDetailPlainList.default(row.value) ? row.value : [];
+	let current = shown;
+	const raw = formValues[(0, __thunderid_browser.getConsentModifiedKey)(purposeId, detailId, row.path)];
+	if (typeof raw === "string" && raw !== "") try {
+		const parsed = JSON.parse(raw);
+		if (require_isConsentDetailPlainList.default(parsed)) current = parsed;
+	} catch {}
+	if (row.modification === "removeItems") {
+		const keptCount = shown.filter((item) => current.includes(item)).length;
+		return shown.map((value) => {
+			const selected = current.includes(value);
+			return {
+				origin: "shown",
+				selected,
+				toggleable: !selected || keptCount > 1,
+				value
+			};
+		});
+	}
+	const added = current.filter((item) => !shown.includes(item));
+	const offered = (require_isConsentDetailPlainList.default(row.options) ? row.options : []).filter((option) => !shown.includes(option) && !added.includes(option));
+	return [
+		...shown.map((value) => ({
+			origin: "shown",
+			selected: true,
+			toggleable: false,
+			value
+		})),
+		...added.map((value) => ({
+			origin: "added",
+			selected: true,
+			toggleable: true,
+			value
+		})),
+		...offered.map((value) => ({
+			origin: "offered",
+			selected: false,
+			toggleable: true,
+			value
+		}))
+	];
+};
+/**
+* Toggles one item of a `removeItems` or `addItems` authorization detail field: a selected item is taken
+* out and an unselected one put in, within what the field's rule allows.
+*
+* @param purposeId - The identifier of the consent purpose the authorization detail belongs to.
+* @param detailId - The identifier of the authorization detail, its consent element name.
+* @param row - The list field.
+* @param formValues - Form values, holding the JSON text of each changed field under its modified key.
+* @param item - The item to toggle.
+* @returns The form values to write, keyed by form key, or `undefined` when the item cannot be toggled.
+*
+* @example
+* ```typescript
+* toggleConsentDetailListItem('p1', 'd-1', actionsRow, {}, 'status') // returns {'__consent_modified__p1__d-1__actions': '["initiate"]'}
+* ```
+*/
+const toggleConsentDetailListItem = (purposeId, detailId, row, formValues, item) => {
+	const items = getConsentDetailListItems(purposeId, detailId, row, formValues);
+	const target = items.find((entry) => entry.value === item);
+	if (!target?.toggleable) return void 0;
+	const next = items.filter((entry) => entry === target ? !entry.selected : entry.selected).map((entry) => entry.value);
+	return { [(0, __thunderid_browser.getConsentModifiedKey)(purposeId, detailId, row.path)]: JSON.stringify(next) };
+};
+/**
+* Adds a typed value to an `addItems` authorization detail field whose type allows any value. The text is
+* trimmed, and read as a number when every shown item is a number.
+*
+* @param purposeId - The identifier of the consent purpose the authorization detail belongs to.
+* @param detailId - The identifier of the authorization detail, its consent element name.
+* @param row - The list field.
+* @param formValues - Form values, holding the JSON text of each changed field under its modified key.
+* @param text - The text the user typed.
+* @returns The form values to write, keyed by form key, or `undefined` when the text is empty, not a
+* number where one is needed, already listed, or the field does not take typed values.
+*
+* @example
+* ```typescript
+* addConsentDetailListItem('p1', 'd-1', blockedRow, {}, ' y ') // returns {'__consent_modified__p1__d-1__blocked': '["x","y"]'}
+* ```
+*/
+const addConsentDetailListItem = (purposeId, detailId, row, formValues, text) => {
+	if (row.modification !== "addItems" || row.options !== void 0 || !Array.isArray(row.value)) return void 0;
+	const trimmed = text.trim();
+	if (!trimmed) return void 0;
+	const numeric = row.value.length > 0 && row.value.every((item) => typeof item === "number");
+	const value = numeric ? Number(trimmed) : trimmed;
+	const selected = getConsentDetailListItems(purposeId, detailId, row, formValues).filter((entry) => entry.selected).map((entry) => entry.value);
+	if (numeric && !Number.isFinite(value) || selected.includes(value)) return void 0;
+	return { [(0, __thunderid_browser.getConsentModifiedKey)(purposeId, detailId, row.path)]: JSON.stringify([...selected, value]) };
+};
+/**
+* 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} />
+* ```
+*/
+const useConsentDetailField = ({ detailId, formValues, onInputChange, purposeId, row, t }) => {
+	const [draft, setDraft] = (0, react.useState)(void 0);
+	const [isListExpanded, setListExpanded] = (0, react.useState)(false);
+	const kind = getConsentDetailInputKind(row);
+	const isScalar = kind === "number" || kind === "date";
+	const isList = kind === "removeItems" || kind === "addItems";
+	const items = isList ? getConsentDetailListItems(purposeId, detailId, row, formValues) : [];
+	const isPlainList = require_isConsentDetailPlainList.default(row.value);
+	let listCount = 0;
+	if (isList) listCount = items.length;
+	else if (require_isConsentDetailPlainList.default(row.value)) listCount = row.value.length;
+	const find = (item) => items.find((entry) => entry.value === item);
+	const write = (values) => {
+		Object.entries(values ?? {}).forEach(([name, value]) => onInputChange(name, value));
+	};
+	const inputError = isScalar && draft !== void 0 ? getConsentDetailInputError(row, draft) : void 0;
+	return {
+		error: inputError && {
+			...inputError,
+			message: require_resolveConsentText.default(t, inputError.key, inputError.params)
+		},
+		handleAdd: (text) => {
+			const values = addConsentDetailListItem(purposeId, detailId, row, formValues, text);
+			write(values);
+			if (values) setDraft(void 0);
+			return Boolean(values);
+		},
+		handleBlur: () => {
+			if (!isScalar || draft === void 0) return;
+			if (draft.trim() === "") {
+				write(resetConsentDetailInput(purposeId, detailId, row.path));
+				setDraft(void 0);
+			} else if (!getConsentDetailInputError(row, draft)) setDraft(void 0);
+		},
+		handleChange: (text) => {
+			setDraft(text);
+			if (isScalar) write(parseConsentDetailInput(purposeId, detailId, row, text).formValues);
+		},
+		handleListToggle: setListExpanded,
+		handleToggle: (item) => {
+			write(toggleConsentDetailListItem(purposeId, detailId, row, formValues, item));
+		},
+		inputId: `consent_modify_${purposeId}_${detailId}_${row.path}`,
+		isListExpanded,
+		isPlainList,
+		isSelected: (item) => Boolean(find(item)?.selected),
+		isToggleable: (item) => Boolean(find(item)?.toggleable),
+		isTypedItemAllowed: kind === "addItems" && row.options === void 0,
+		isValid: !inputError,
+		items,
+		kind,
+		label: row.label || row.path,
+		listDisplay: require_getConsentDetailListDisplay.default(listCount, isListExpanded),
+		max: isScalar && row.modification === "decrease" ? String(row.value) : void 0,
+		min: isScalar && row.modification === "increase" ? String(row.value) : void 0,
+		text: draft ?? (isScalar ? getConsentDetailInputText(purposeId, detailId, row, formValues) : "")
+	};
+};
+var useConsentDetailField_default = useConsentDetailField;
+
+//#endregion
+exports.default = useConsentDetailField_default;
+//# sourceMappingURL=useConsentDetailField.cjs.map

package/dist/cjs/hooks/auth/useConsentDetailField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConsentDetailField.cjs","names":["modification: string","params: Record<string, string>","isOrdered: boolean","isConsentDetailPlainList","raw: unknown","value: unknown","modifiedKey: string","invalidKey: string","error: ConsentDetailInputError | undefined","value: number | string","shown: PlainItem[]","current: PlainItem[]","parsed: unknown","keptCount: number","selected: boolean","added: PlainItem[]","offered: PlainItem[]","items: ConsentDetailListItem[]","target: ConsentDetailListItem | undefined","next: (string | number | boolean)[]","trimmed: string","numeric: boolean","value: string | number","selected: (string | number | boolean)[]","kind: ConsentDetailInputKind | undefined","isScalar: boolean","isList: boolean","isPlainList: boolean","inputError: ConsentDetailInputError | undefined","resolveConsentText","values: Record<string, string> | undefined","getConsentDetailListDisplay"],"sources":["../../../../src/hooks/auth/useConsentDetailField.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {type ConsentDetailRow, getConsentInvalidKey, getConsentModifiedKey} from '@thunderid/browser';\nimport {useState} from 'react';\nimport resolveConsentText from '../../components/auth/flow/resolveConsentText';\nimport getConsentDetailListDisplay, {type ConsentDetailListDisplay} from '../../utils/getConsentDetailListDisplay';\nimport isConsentDetailPlainList from '../../utils/isConsentDetailPlainList';\nimport {UseTranslation} from '../useTranslation';\n\n/**\n * How the user may change one field of an authorization detail on the consent screen: type a lower or\n * higher `number` or `date`, or toggle items of a list whose rule is `removeItems` or `addItems`.\n *\n * @experimental This type may change in future versions\n */\nexport type ConsentDetailInputKind = 'number' | 'date' | 'removeItems' | 'addItems';\n\n/**\n * Error shown for text a user entered into an authorization detail field, as a translation key and the\n * values to substitute into its text.\n *\n * @experimental This interface may change in future versions\n */\nexport interface ConsentDetailInputError {\n  /** Translation key of the message. */\n  key: string;\n  /** Values to substitute into the message: `value` is the value that was shown. */\n  params: Record<string, string>;\n}\n\n/**\n * Outcome of the text a user entered into a `number` or `date` authorization detail field.\n *\n * @experimental This interface may change in future versions\n */\ninterface ConsentDetailInputResult {\n  /** Why the text cannot be submitted, absent when it can. */\n  error?: ConsentDetailInputError;\n  /**\n   * Form values to write, keyed by form key: the field's modified value, cleared when the text cannot be\n   * submitted, and its invalid marker.\n   */\n  formValues: Record<string, string>;\n  /** Whether the text may be submitted. */\n  isValid: boolean;\n}\n\n/**\n * One item of a list field of an authorization detail, as the consent screen offers it.\n *\n * @experimental This interface may change in future versions\n */\nexport interface ConsentDetailListItem {\n  /**\n   * Where the item comes from: `shown` in the requested detail, `added` by the user, or `offered` by the\n   * type for the user to add.\n   */\n  origin: 'shown' | 'added' | 'offered';\n  /** Whether the item is part of the value that would be granted. */\n  selected: boolean;\n  /** Whether the user may toggle the item. */\n  toggleable: boolean;\n  /** The item. */\n  value: string | number | boolean;\n}\n\nconst DATE_PATTERN = /^\\d{4}-\\d{2}-\\d{2}$/;\n\ntype PlainItem = string | number | boolean;\n\n/**\n * Reports whether a value the user entered for an authorization detail field stays within the value\n * that was shown, in the direction the field may move.\n *\n * @param modification - `decrease` or `increase`.\n * @param candidate - Value the user entered.\n * @param shown - Value that was shown.\n * @returns Whether the candidate is allowed.\n *\n * @example\n * ```typescript\n * isWithinConsentBound('decrease', 20, 35) // returns true\n * isWithinConsentBound('decrease', 40, 35) // returns false\n * ```\n */\nconst isWithinConsentBound = <T extends number | string>(modification: string, candidate: T, shown: T): boolean =>\n  modification === 'decrease' ? candidate <= shown : candidate >= shown;\n\n/**\n * Checks the text a user entered for an authorization detail field that may be decreased or increased: a\n * number, or a date in `YYYY-MM-DD` form. The text must be a value of the field's kind and stay within the\n * value that was shown, in the direction the field may move.\n *\n * @param row - The field, carrying the shown value and its modification.\n * @param text - The text the user entered.\n * @returns The error to show, or `undefined` when the text may be submitted.\n *\n * @example\n * ```typescript\n * getConsentDetailInputError({label: 'Amount', modification: 'decrease', path: 'amount', value: 35}, '50')\n * // returns {key: 'consent.authorization_details.number_max', params: {value: '35'}}\n * ```\n */\nconst getConsentDetailInputError = (row: ConsentDetailRow, text: string): ConsentDetailInputError | undefined => {\n  const modification: string = row.modification ?? '';\n  const params: Record<string, string> = {value: String(row.value)};\n\n  if (typeof row.value === 'number') {\n    const entered = Number(text);\n    if (text.trim() === '' || !Number.isFinite(entered)) {\n      return {key: 'consent.authorization_details.invalid_number', params};\n    }\n    if (!isWithinConsentBound(modification, entered, row.value)) {\n      return {\n        key:\n          modification === 'decrease'\n            ? 'consent.authorization_details.number_max'\n            : 'consent.authorization_details.number_min',\n        params,\n      };\n    }\n\n    return undefined;\n  }\n\n  if (!DATE_PATTERN.test(text) || Number.isNaN(Date.parse(text))) {\n    return {key: 'consent.authorization_details.invalid_date', params};\n  }\n  if (!isWithinConsentBound(modification, text, String(row.value))) {\n    return {\n      key:\n        modification === 'decrease'\n          ? 'consent.authorization_details.date_max'\n          : 'consent.authorization_details.date_min',\n      params,\n    };\n  }\n\n  return undefined;\n};\n\n/**\n * Tells how the user may change one field of an authorization detail on the consent screen. A number may\n * be lowered or raised, a date in `YYYY-MM-DD` form moved earlier or later, and items of a plain list\n * removed (when it has more than one) or added. A date and time is never changed by the user.\n *\n * @param row - The field.\n * @returns The kind of input the field takes, or `undefined` when the field is read-only.\n *\n * @example\n * ```typescript\n * getConsentDetailInputKind({label: 'Amount', modification: 'decrease', path: 'amount', value: 35}) // returns 'number'\n * ```\n */\nconst getConsentDetailInputKind = (row: ConsentDetailRow): ConsentDetailInputKind | undefined => {\n  const isOrdered: boolean = row.modification === 'decrease' || row.modification === 'increase';\n\n  if (isOrdered && typeof row.value === 'number') return 'number';\n  if (isOrdered && row.as === 'date' && typeof row.value === 'string' && DATE_PATTERN.test(row.value)) return 'date';\n  if (row.modification === 'removeItems' && isConsentDetailPlainList(row.value) && row.value.length > 1)\n    return 'removeItems';\n  if (row.modification === 'addItems' && isConsentDetailPlainList(row.value)) return 'addItems';\n\n  return undefined;\n};\n\n/**\n * Gives the text a `number` or `date` authorization detail field shows when the user is not typing into it:\n * the value the user chose, or the value that was shown when the user has not changed it.\n *\n * @param purposeId - The identifier of the consent purpose the authorization detail belongs to.\n * @param detailId - The identifier of the authorization detail, its consent element name.\n * @param row - The field.\n * @param formValues - Form values, holding the JSON text of each changed field under its modified key.\n * @returns The text to show.\n *\n * @example\n * ```typescript\n * getConsentDetailInputText('p1', 'd-1', amountRow, {'__consent_modified__p1__d-1__amount': '20'}) // returns '20'\n * ```\n */\nconst getConsentDetailInputText = (\n  purposeId: string,\n  detailId: string,\n  row: ConsentDetailRow,\n  formValues: Record<string, unknown>,\n): string => {\n  const raw: unknown = formValues[getConsentModifiedKey(purposeId, detailId, row.path)];\n  if (typeof raw === 'string' && raw !== '') {\n    try {\n      const value: unknown = JSON.parse(raw);\n      if (typeof value === 'number' || typeof value === 'string') return String(value);\n    } catch {\n      // Not a value the field wrote; show the value that was shown instead.\n    }\n  }\n\n  return String(row.value);\n};\n\n/**\n * Turns the text a user entered into a `number` or `date` authorization detail field into the form values\n * to write. Text within the field's bound becomes the field's modified value. Any other text clears the\n * modified value, so a value entered earlier is never submitted in its place, and marks the field invalid,\n * which blocks approval until the user corrects it.\n *\n * @param purposeId - The identifier of the consent purpose the authorization detail belongs to.\n * @param detailId - The identifier of the authorization detail, its consent element name.\n * @param row - The field, carrying the shown value and its modification.\n * @param text - The text the user entered.\n * @returns The error, if any, and the form values to write.\n *\n * @example\n * ```typescript\n * parseConsentDetailInput('p1', 'd-1', amountRow, '20')\n * // returns {isValid: true, formValues: {'__consent_modified__p1__d-1__amount': '20', '__consent_invalid__p1__d-1__amount': ''}}\n * ```\n */\nconst parseConsentDetailInput = (\n  purposeId: string,\n  detailId: string,\n  row: ConsentDetailRow,\n  text: string,\n): ConsentDetailInputResult => {\n  const modifiedKey: string = getConsentModifiedKey(purposeId, detailId, row.path);\n  const invalidKey: string = getConsentInvalidKey(purposeId, detailId, row.path);\n  const error: ConsentDetailInputError | undefined = getConsentDetailInputError(row, text);\n\n  if (error) {\n    return {error, formValues: {[invalidKey]: 'true', [modifiedKey]: ''}, isValid: false};\n  }\n\n  const value: number | string = typeof row.value === 'number' ? Number(text) : text;\n\n  return {formValues: {[invalidKey]: '', [modifiedKey]: JSON.stringify(value)}, isValid: true};\n};\n\n/**\n * Gives the form values that return an authorization detail field to the value that was shown: no\n * modified value and no invalid marker. A field the user left empty is reset this way when it loses focus.\n *\n * @param purposeId - The identifier of the consent purpose the authorization detail belongs to.\n * @param detailId - The identifier of the authorization detail, its consent element name.\n * @param path - Dot-separated location of the field within the detail.\n * @returns The form values to write, keyed by form key.\n *\n * @example\n * ```typescript\n * resetConsentDetailInput('p1', 'd-1', 'amount')\n * // returns {'__consent_modified__p1__d-1__amount': '', '__consent_invalid__p1__d-1__amount': ''}\n * ```\n */\nconst resetConsentDetailInput = (purposeId: string, detailId: string, path: string): Record<string, string> => ({\n  [getConsentInvalidKey(purposeId, detailId, path)]: '',\n  [getConsentModifiedKey(purposeId, detailId, path)]: '',\n});\n\n/**\n * Lists the items of a `removeItems` or `addItems` authorization detail field as the consent screen offers\n * them. For `removeItems`, every shown item is listed, selected while kept; a kept item can be removed\n * unless it is the last one, and a removed item can be added back. For `addItems`, the shown items are\n * selected and fixed, the items the user added are selected and can be taken out again, and the values the\n * type allows are offered unselected.\n *\n * @param purposeId - The identifier of the consent purpose the authorization detail belongs to.\n * @param detailId - The identifier of the authorization detail, its consent element name.\n * @param row - The list field.\n * @param formValues - Form values, holding the JSON text of each changed field under its modified key.\n * @returns The items, in display order.\n *\n * @example\n * ```typescript\n * getConsentDetailListItems('p1', 'd-1', {label: 'Actions', modification: 'removeItems', path: 'actions', value: ['a', 'b']}, {})\n * // returns [{origin: 'shown', selected: true, toggleable: true, value: 'a'}, {origin: 'shown', selected: true, toggleable: true, value: 'b'}]\n * ```\n */\nconst getConsentDetailListItems = (\n  purposeId: string,\n  detailId: string,\n  row: ConsentDetailRow,\n  formValues: Record<string, unknown>,\n): ConsentDetailListItem[] => {\n  const shown: PlainItem[] = isConsentDetailPlainList(row.value) ? row.value : [];\n  let current: PlainItem[] = shown;\n  const raw: unknown = formValues[getConsentModifiedKey(purposeId, detailId, row.path)];\n  if (typeof raw === 'string' && raw !== '') {\n    try {\n      const parsed: unknown = JSON.parse(raw);\n      if (isConsentDetailPlainList(parsed)) current = parsed;\n    } catch {\n      // Not a list the field wrote; the shown list stands.\n    }\n  }\n\n  if (row.modification === 'removeItems') {\n    const keptCount: number = shown.filter((item: PlainItem) => current.includes(item)).length;\n    return shown.map((value: PlainItem) => {\n      const selected: boolean = current.includes(value);\n      return {origin: 'shown', selected, toggleable: !selected || keptCount > 1, value};\n    });\n  }\n\n  const added: PlainItem[] = current.filter((item: PlainItem) => !shown.includes(item));\n  const offered: PlainItem[] = (isConsentDetailPlainList(row.options) ? row.options : []).filter(\n    (option: PlainItem) => !shown.includes(option) && !added.includes(option),\n  );\n\n  return [\n    ...shown.map(\n      (value: PlainItem): ConsentDetailListItem => ({origin: 'shown', selected: true, toggleable: false, value}),\n    ),\n    ...added.map(\n      (value: PlainItem): ConsentDetailListItem => ({origin: 'added', selected: true, toggleable: true, value}),\n    ),\n    ...offered.map(\n      (value: PlainItem): ConsentDetailListItem => ({origin: 'offered', selected: false, toggleable: true, value}),\n    ),\n  ];\n};\n\n/**\n * Toggles one item of a `removeItems` or `addItems` authorization detail field: a selected item is taken\n * out and an unselected one put in, within what the field's rule allows.\n *\n * @param purposeId - The identifier of the consent purpose the authorization detail belongs to.\n * @param detailId - The identifier of the authorization detail, its consent element name.\n * @param row - The list field.\n * @param formValues - Form values, holding the JSON text of each changed field under its modified key.\n * @param item - The item to toggle.\n * @returns The form values to write, keyed by form key, or `undefined` when the item cannot be toggled.\n *\n * @example\n * ```typescript\n * toggleConsentDetailListItem('p1', 'd-1', actionsRow, {}, 'status') // returns {'__consent_modified__p1__d-1__actions': '[\"initiate\"]'}\n * ```\n */\nconst toggleConsentDetailListItem = (\n  purposeId: string,\n  detailId: string,\n  row: ConsentDetailRow,\n  formValues: Record<string, unknown>,\n  item: string | number | boolean,\n): Record<string, string> | undefined => {\n  const items: ConsentDetailListItem[] = getConsentDetailListItems(purposeId, detailId, row, formValues);\n  const target: ConsentDetailListItem | undefined = items.find((entry: ConsentDetailListItem) => entry.value === item);\n  if (!target?.toggleable) return undefined;\n\n  const next: (string | number | boolean)[] = items\n    .filter((entry: ConsentDetailListItem) => (entry === target ? !entry.selected : entry.selected))\n    .map((entry: ConsentDetailListItem) => entry.value);\n\n  return {[getConsentModifiedKey(purposeId, detailId, row.path)]: JSON.stringify(next)};\n};\n\n/**\n * Adds a typed value to an `addItems` authorization detail field whose type allows any value. The text is\n * trimmed, and read as a number when every shown item is a number.\n *\n * @param purposeId - The identifier of the consent purpose the authorization detail belongs to.\n * @param detailId - The identifier of the authorization detail, its consent element name.\n * @param row - The list field.\n * @param formValues - Form values, holding the JSON text of each changed field under its modified key.\n * @param text - The text the user typed.\n * @returns The form values to write, keyed by form key, or `undefined` when the text is empty, not a\n * number where one is needed, already listed, or the field does not take typed values.\n *\n * @example\n * ```typescript\n * addConsentDetailListItem('p1', 'd-1', blockedRow, {}, ' y ') // returns {'__consent_modified__p1__d-1__blocked': '[\"x\",\"y\"]'}\n * ```\n */\nconst addConsentDetailListItem = (\n  purposeId: string,\n  detailId: string,\n  row: ConsentDetailRow,\n  formValues: Record<string, unknown>,\n  text: string,\n): Record<string, string> | undefined => {\n  if (row.modification !== 'addItems' || row.options !== undefined || !Array.isArray(row.value)) return undefined;\n  const trimmed: string = text.trim();\n  if (!trimmed) return undefined;\n\n  const numeric: boolean = row.value.length > 0 && row.value.every((item: unknown) => typeof item === 'number');\n  const value: string | number = numeric ? Number(trimmed) : trimmed;\n  const selected: (string | number | boolean)[] = getConsentDetailListItems(purposeId, detailId, row, formValues)\n    .filter((entry: ConsentDetailListItem) => entry.selected)\n    .map((entry: ConsentDetailListItem) => entry.value);\n  if ((numeric && !Number.isFinite(value)) || selected.includes(value)) return undefined;\n\n  return {[getConsentModifiedKey(purposeId, detailId, row.path)]: JSON.stringify([...selected, value])};\n};\n\n/**\n * Props for the useConsentDetailField hook.\n */\nexport interface UseConsentDetailFieldProps {\n  /** The identifier of the consent purpose the authorization detail belongs to. */\n  purposeId: string;\n  /** The identifier of the authorization detail the field belongs to, its consent element name. */\n  detailId: string;\n  /** Current consent form values. */\n  formValues: Record<string, string>;\n  /** Callback that writes one consent form value. */\n  onInputChange: (name: string, value: string) => void;\n  /** The field. */\n  row: ConsentDetailRow;\n  /** Translator for the error message; the SDK's default bundle is used without one. */\n  t?: UseTranslation['t'];\n}\n\n/**\n * Error of a field, with its message resolved.\n */\nexport interface ConsentDetailFieldError extends ConsentDetailInputError {\n  /** Translated message. */\n  message: string;\n}\n\n/**\n * State and handlers of one authorization detail field, for drawing it in any UI.\n */\nexport interface UseConsentDetailFieldResult {\n  /** Why the text shown cannot be submitted, absent when it can. */\n  error?: ConsentDetailFieldError;\n  /** Adds a typed item to an `addItems` list that takes typed values; returns whether it was added. */\n  handleAdd: (text: string) => boolean;\n  /** Call when the field loses focus: an empty field returns to the value that was shown. */\n  handleBlur: () => void;\n  /** Call with the text the user entered into a `number` or `date` field, or the item typed into a list. */\n  handleChange: (text: string) => void;\n  /** Expands or collapses the field's list. */\n  handleListToggle: (expanded: boolean) => void;\n  /** Toggles an item of a list field, within what its rule allows. */\n  handleToggle: (item: string | number | boolean) => void;\n  /** Identifier for the field's input element. */\n  inputId: string;\n  /** Whether the user expanded the field's list past `CONSENT_DETAIL_DISPLAY_LIMITS.listItems`. */\n  isListExpanded: boolean;\n  /** Whether the field's value is a list of plain values, shown as a list rather than as structured JSON. */\n  isPlainList: boolean;\n  /** Whether an item of a list field is part of the value that would be granted. */\n  isSelected: (item: string | number | boolean) => boolean;\n  /** Whether the user may toggle an item of a list field. */\n  isToggleable: (item: string | number | boolean) => boolean;\n  /** Whether the field takes typed items: an `addItems` list whose type offers no fixed values. */\n  isTypedItemAllowed: boolean;\n  /** Whether the field's text may be submitted. Always true for a list or a read-only field. */\n  isValid: boolean;\n  /** Items of a list field, in display order; empty for any other field. */\n  items: ConsentDetailListItem[];\n  /** How the user may change the field, or `undefined` when it is read-only. */\n  kind?: ConsentDetailInputKind;\n  /** Label of the field. */\n  label: string;\n  /**\n   * How many items of the field's list to show and hide: the items of a list the user may change, or the\n   * values of a read-only plain list. Nothing is hidden for any other field.\n   */\n  listDisplay: ConsentDetailListDisplay;\n  /** Upper bound of a `number` or `date` field that may be decreased. */\n  max?: string;\n  /** Lower bound of a `number` or `date` field that may be increased. */\n  min?: string;\n  /** Text to show: the typed text of a `number` or `date` field, or the item being typed into a list. */\n  text: string;\n}\n\n/**\n * Headless state of one authorization detail field on the consent screen. A `number` or `date` field keeps\n * the text the user typed, writes it to the decision only while it stays within the field's bound, and\n * otherwise clears the field's modification and marks the field invalid, which blocks approval (see\n * `isConsentApprovalBlocked`). A list field exposes its items and toggles them as its rule allows.\n *\n * @param props - The field and the consent form state.\n * @returns The field's state and handlers.\n *\n * @example\n * ```tsx\n * const field = useConsentDetailField({purposeId, detailId, row, formValues, onInputChange});\n * <input value={field.text} onChange={(e) => field.handleChange(e.target.value)} onBlur={field.handleBlur} />\n * ```\n */\nconst useConsentDetailField = ({\n  detailId,\n  formValues,\n  onInputChange,\n  purposeId,\n  row,\n  t,\n}: UseConsentDetailFieldProps): UseConsentDetailFieldResult => {\n  // The text the user typed, kept as typed even when it cannot be submitted.\n  const [draft, setDraft] = useState<string | undefined>(undefined);\n  const [isListExpanded, setListExpanded] = useState<boolean>(false);\n  const kind: ConsentDetailInputKind | undefined = getConsentDetailInputKind(row);\n  const isScalar: boolean = kind === 'number' || kind === 'date';\n  const isList: boolean = kind === 'removeItems' || kind === 'addItems';\n  const items: ConsentDetailListItem[] = isList ? getConsentDetailListItems(purposeId, detailId, row, formValues) : [];\n  const isPlainList: boolean = isConsentDetailPlainList(row.value);\n  let listCount = 0;\n  if (isList) {\n    listCount = items.length;\n  } else if (isConsentDetailPlainList(row.value)) {\n    listCount = row.value.length;\n  }\n  const find = (item: string | number | boolean): ConsentDetailListItem | undefined =>\n    items.find((entry: ConsentDetailListItem) => entry.value === item);\n\n  const write = (values: Record<string, string> | undefined): void => {\n    Object.entries(values ?? {}).forEach(([name, value]: [string, string]) => onInputChange(name, value));\n  };\n\n  const inputError: ConsentDetailInputError | undefined =\n    isScalar && draft !== undefined ? getConsentDetailInputError(row, draft) : undefined;\n\n  return {\n    error: inputError && {...inputError, message: resolveConsentText(t, inputError.key, inputError.params)},\n    handleAdd: (text: string): boolean => {\n      const values: Record<string, string> | undefined = addConsentDetailListItem(\n        purposeId,\n        detailId,\n        row,\n        formValues,\n        text,\n      );\n      write(values);\n      if (values) setDraft(undefined);\n      return Boolean(values);\n    },\n    handleBlur: (): void => {\n      if (!isScalar || draft === undefined) return;\n      if (draft.trim() === '') {\n        write(resetConsentDetailInput(purposeId, detailId, row.path));\n        setDraft(undefined);\n      } else if (!getConsentDetailInputError(row, draft)) {\n        setDraft(undefined);\n      }\n    },\n    handleChange: (text: string): void => {\n      setDraft(text);\n      if (isScalar) write(parseConsentDetailInput(purposeId, detailId, row, text).formValues);\n    },\n    handleListToggle: setListExpanded,\n    handleToggle: (item: string | number | boolean): void => {\n      write(toggleConsentDetailListItem(purposeId, detailId, row, formValues, item));\n    },\n    inputId: `consent_modify_${purposeId}_${detailId}_${row.path}`,\n    isListExpanded,\n    isPlainList,\n    isSelected: (item: string | number | boolean): boolean => Boolean(find(item)?.selected),\n    isToggleable: (item: string | number | boolean): boolean => Boolean(find(item)?.toggleable),\n    isTypedItemAllowed: kind === 'addItems' && row.options === undefined,\n    isValid: !inputError,\n    items,\n    kind,\n    label: row.label || row.path,\n    listDisplay: getConsentDetailListDisplay(listCount, isListExpanded),\n    max: isScalar && row.modification === 'decrease' ? String(row.value) : undefined,\n    min: isScalar && row.modification === 'increase' ? String(row.value) : undefined,\n    text: draft ?? (isScalar ? getConsentDetailInputText(purposeId, detailId, row, formValues) : ''),\n  };\n};\n\nexport default useConsentDetailField;\n"],"mappings":"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"}