@public-ui/sample-react 3.1.2-rc.1 → 3.1.2

package/src/components/input-text/text-formatter.tsx

@@ -1,48 +1,139 @@
-import { KolForm, KolInputText } from '@public-ui/react-v19';
-import React, { useMemo, useRef, type BaseSyntheticEvent } from 'react';
+import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-
 import { SampleDescription } from '../SampleDescription';
 
-type InputTextElementSelection = {
-	setSelectionStart?: (position: number) => Promise<void>;
-	selectionStart?: () => Promise<number | null>;
-};
+/**
+ * IbanFormatter handles formatting and parsing of IBAN values.
+ * It groups characters in blocks of 4, separated by spaces.
+ * Example: "DE89370400440532013000" → "DE89 3704 0044 0532 0130 00"
+ */
+class IbanFormatter {
+	private readonly SEPARATOR = ' ';
+	private readonly CHARS_PER_GROUP = 4;
+	private readonly KEEP_ALPHANUM = /[^a-zA-Z0-9]/g;
 
-type KolInputTextEvents = {
-	onBlur?: (event: Event) => void;
-	onChange?: (event: Event, value: unknown) => void;
-	onFocus?: (event: Event) => void;
-	onInput?: (event: Event, value: unknown) => void;
-};
-type KolInputTextProps = Omit<React.ComponentProps<typeof KolInputText>, '_on' | '_value'> & {
-	_on?: KolInputTextEvents;
-	_value?: string;
-};
+	/**
+	 * Removes all non-alphanumeric characters and converts to uppercase.
+	 * This is the raw value stored in the form model.
+	 */
+	parse(value: string): string {
+		return value.replace(this.KEEP_ALPHANUM, '').toUpperCase();
+	}
 
-const NON_ALPHANUM = /[^a-zA-Z0-9]/g;
-const EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
+	/**
+	 * Formats the value into groups of 4 characters separated by spaces.
+	 * This is the display value shown in the input field.
+	 */
+	format(value: string): string {
+		const clean = this.parse(value);
+		const regex = new RegExp(`(.{${this.CHARS_PER_GROUP}})(?!$)`, 'g');
+		return clean.replace(regex, `$1${this.SEPARATOR}`);
+	}
 
-class IbanFormatter {
-	private electronicFormat(iban: string): string {
-		return iban.replace(NON_ALPHANUM, '').toUpperCase();
+	/**
+	 * Calculates the correct cursor position after formatting changes.
+	 * This ensures the cursor stays at the expected position when separators are added/removed.
+	 */
+	adjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {
+		const oldText = this.format(oldValue);
+		const newText = this.format(newValue);
+
+		if (oldCursorPos >= oldText.length) return newText.length;
+
+		// Count significant characters (excluding separators) up to cursor position
+		let significantChars = 0;
+		for (let i = 0; i < oldCursorPos && i < oldText.length; i++) {
+			if (oldText[i] !== this.SEPARATOR) significantChars++;
+		}
+
+		// Find the corresponding position in the new formatted text
+		let count = 0;
+		for (let i = 0; i < newText.length; i++) {
+			if (newText[i] !== this.SEPARATOR && count++ === significantChars) return i;
+		}
+		return newText.length;
 	}
+}
+
+/**
+ * CurrencyFormatter handles formatting and parsing of currency values.
+ * It uses the browser's locale for formatting and intelligently detects
+ * decimal vs. thousand separators when parsing.
+ * Example: 1000000 → "1.000.000,00 €" (German locale)
+ */
+class CurrencyFormatter {
+	private readonly LOCALE = navigator.language;
+	private readonly CURRENCY_SYMBOL = ' €';
+
+	/**
+	 * Parses a formatted currency string back to a raw number.
+	 * Intelligently detects which character is the decimal separator:
+	 * - German format: "1.000.000,00" → 1000000 (dot is thousand, comma is decimal)
+	 * - English format: "1,000,000.00" → 1000000 (comma is thousand, dot is decimal)
+	 */
+	parse(value: string): number {
+		// Remove currency symbols and keep only digits, dots, and commas
+		const sanitized = value.replace(/[^\d.,]/g, '');
+
+		// Determine which character is the decimal separator
+		// The rightmost occurrence is typically the decimal separator
+		const lastCommaIndex = sanitized.lastIndexOf(',');
+		const lastDotIndex = sanitized.lastIndexOf('.');
 
-	private printFormat(iban: string, separator?: string) {
-		return this.electronicFormat(iban).replace(EVERY_FOUR_CHARS, '$1' + (separator || ' '));
+		let normalizedValue: string;
+
+		if (lastCommaIndex > lastDotIndex) {
+			// Comma is decimal separator (e.g., German: 1.000.000,00)
+			// Remove all dots (thousand separators) and replace comma with dot for parseFloat
+			normalizedValue = sanitized.replace(/\./g, '').replace(',', '.');
+		} else if (lastDotIndex > lastCommaIndex) {
+			// Dot is decimal separator (e.g., English: 1,000,000.00)
+			// Remove all commas (thousand separators)
+			normalizedValue = sanitized.replace(/,/g, '');
+		} else {
+			// No decimal separator present, remove all dots and commas
+			normalizedValue = sanitized.replace(/[.,]/g, '');
+		}
+
+		return parseFloat(normalizedValue) || 0;
 	}
 
-	public parse(value: string): string {
-		return this.electronicFormat(value);
+	/**
+	 * Formats a number as currency according to the browser's locale.
+	 * Always shows 2 decimal places and appends the currency symbol.
+	 */
+	format(value: number | string): string {
+		const number = typeof value === 'string' ? this.parse(value) : value;
+		const formatted = new Intl.NumberFormat(this.LOCALE, {
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2,
+		}).format(number);
+		return formatted + this.CURRENCY_SYMBOL;
 	}
 
-	public format(value: string, ref?: HTMLKolInputTextElement | null, selectionStart?: number | null): string {
-		const setSelectionStart = (ref as InputTextElementSelection | null)?.setSelectionStart;
-		if (selectionStart && setSelectionStart) {
-			if (selectionStart % 5 === 0) selectionStart++;
-			void setSelectionStart(selectionStart);
+	/**
+	 * Calculates the correct cursor position after formatting changes.
+	 * This ensures the cursor stays aligned with digits when thousand separators are added/removed.
+	 */
+	adjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {
+		const oldText = this.format(oldValue);
+		const newText = this.format(newValue);
+
+		if (oldCursorPos >= oldText.length) return newText.length;
+
+		// Count digits up to cursor position (ignoring separators and currency symbols)
+		let digitCount = 0;
+		for (let i = 0; i < oldCursorPos && i < oldText.length; i++) {
+			if (/\d/.test(oldText[i])) digitCount++;
 		}
-		return this.printFormat(value);
+
+		// Find the corresponding position in the new formatted text
+		let count = 0;
+		for (let i = 0; i < newText.length; i++) {
+			if (/\d/.test(newText[i]) && count++ === digitCount) return i;
+		}
+		return newText.length;
 	}
 }
 
@@ -50,129 +141,139 @@ type IbanExampleFormValues = {
 	iban: string;
 };
 
-function FormattedKolInputText({
-	formatter,
-	selectionStartRef,
-	_on,
-	_value,
-	...props
-}: KolInputTextProps & {
-	formatter: IbanFormatter;
-	selectionStartRef: React.MutableRefObject<number | null>;
-}) {
-	const inputRef = useRef<HTMLKolInputTextElement | null>(null);
-	const normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;
-	const sanitizedSelectionRef = selectionStartRef as React.MutableRefObject<number | null>;
-
-	const element = inputRef.current;
-	const selectionStart = sanitizedSelectionRef.current;
-	const sanitizedFormatter: IbanFormatter = formatter;
-
-	return (
-		<KolInputText
-			{...props}
-			ref={inputRef}
-			_value={sanitizedFormatter.format(_value ?? '', element, selectionStart)}
-			_on={{
-				...normalizedOn,
-				onInput: (event: Event, value: unknown) => {
-					const selectionStartGetter = (inputRef.current as InputTextElementSelection | null)?.selectionStart;
-					selectionStartGetter?.().then((start) => {
-						sanitizedSelectionRef.current = start ?? null;
-					});
-					const parsedValue = sanitizedFormatter.parse(typeof value === 'string' ? value : '');
-					normalizedOn?.onInput?.(event, parsedValue);
-				},
-			}}
-		/>
-	);
-}
-
-function KolFormattedIbanController(props: any) {
-	const { name, control, rules, defaultValue, shouldUnregister, disabled, formatter, selectionStartRef, ...componentProps } = props;
-	return (
-		<Controller
-			name={name}
-			control={control}
-			rules={rules}
-			defaultValue={defaultValue}
-			shouldUnregister={shouldUnregister}
-			disabled={disabled}
-			render={({ field, fieldState }) => {
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-				const userHandlers = componentProps._on as KolInputTextEvents | undefined;
-				return (
-					<FormattedKolInputText
-						{...(componentProps as any)}
-						formatter={formatter}
-						selectionStartRef={selectionStartRef}
-						_value={field.value}
-						_touched={fieldState.isTouched}
-						_msg={
-							fieldState.error
-								? {
-										_type: 'error' as const,
-										_description: fieldState.error.message || String(fieldState.error),
-									}
-								: undefined
-						}
-						_on={{
-							onInput: (event: Event, value: unknown) => {
-								field.onChange(value);
-								userHandlers?.onInput?.(event, value);
-							},
-							onBlur: () => field.onBlur(),
-						}}
-					/>
-				);
-			}}
-		/>
-	);
-}
+type CurrencyExampleFormValues = {
+	currency: number;
+};
 
+/**
+ * Demo component showcasing two different text formatting strategies for input fields.
+ *
+ * Strategy 1 - Live Formatting (IBAN):
+ * - Formats text while typing
+ * - Maintains intelligent cursor positioning
+ * - Best for: Fixed-format values where users expect immediate visual feedback
+ *
+ * Strategy 2 - On-Blur Formatting (Currency):
+ * - Formats only when field loses focus (onBlur event)
+ * - Allows free typing without formatting interruptions
+ * - Best for: Numeric values where users might type in various formats
+ */
 export function InputTextFormatterDemo() {
-	const formatter = useMemo(() => new IbanFormatter(), []);
-
-	const textInput1SelectionStart = useRef<number | null>(null);
-
-	const initialIbanExampleValues: IbanExampleFormValues = {
-		iban: 'DE89370400440532013000',
-	};
+	const ibanFormatter = new IbanFormatter();
+	const currencyFormatter = new CurrencyFormatter();
 
 	const ibanForm = useForm<IbanExampleFormValues>({
-		defaultValues: initialIbanExampleValues,
-		mode: 'onTouched',
+		defaultValues: { iban: 'DE89370400440532013000' },
 	});
+	const currencyForm = useForm<CurrencyExampleFormValues>({
+		defaultValues: { currency: 1000000 },
+	});
+
+	/**
+	 * Handles input events for the IBAN field with live formatting.
+	 * Updates the model value and adjusts cursor position to maintain UX during formatting.
+	 */
+	const handleIbanInput = (event: Event) => {
+		const input = event.target as HTMLInputElement;
+		const newValue = ibanFormatter.parse(input.value);
+		const newCursorPos = ibanFormatter.adjustCursorPosition(ibanForm.getValues('iban'), newValue, input.selectionStart || 0);
 
-	const ibanValues = ibanForm.watch();
+		// Update the form model with the parsed (unformatted) value
+		ibanForm.setValue('iban', newValue);
 
-	const handleIbanSubmit = (event: Event) => {
-		void ibanForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);
+		// Use double requestAnimationFrame to ensure cursor position is set after React re-render
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				input.setSelectionRange(newCursorPos, newCursorPos);
+			});
+		});
 	};
 
 	return (
 		<>
 			<SampleDescription>
+				<p>This example demonstrates two different formatting strategies for input fields:</p>
+				<ul>
+					<li>
+						<strong>Live Formatting (IBAN):</strong> Formatting happens while typing. The value is immediately formatted and displayed with intelligent cursor
+						positioning. Best for fixed-format values where users expect visual feedback during input.
+					</li>
+					<li>
+						<strong>On-Blur Formatting (Currency):</strong> Formatting happens when leaving the field (onBlur event). Allows free typing without interruption.
+						Best for numeric values where users might input in various formats.
+					</li>
+				</ul>
 				<p>
-					This example demonstrates formatting a data value in an input field (example IBAN). The data value is formatted to the input field (print format) and
-					vice versa the formatting is removed again (machine format)
+					<strong>Key Concept:</strong> The form model always stores the <em>unformatted</em> value (raw IBAN string, numeric currency value), while the input
+					field displays the <em>formatted</em> value for better readability.
 				</p>
 			</SampleDescription>
-			<section className="w-full">
-				<div>
-					<KolForm _on={{ onSubmit: handleIbanSubmit }}>
-						<KolFormattedIbanController
-							control={ibanForm.control as any}
-							name="iban"
-							id="field-iban"
-							formatter={formatter}
-							selectionStartRef={textInput1SelectionStart}
-							rules={{ required: 'Please enter an IBAN.' }}
-							_label="IBAN"
-							_required
-						/>
+			<section className="w-full flex flex-col">
+				<div className="p-2">
+					<KolHeading _label="Live Formatting - IBAN" _level={2} />
+					<p className="text-sm mb-2">Formatting occurs during input with intelligent cursor control</p>
+					<KolForm>
+						<form onSubmit={ibanForm.handleSubmit(async () => {})}>
+							<Controller
+								name="iban"
+								control={ibanForm.control}
+								render={({ field }) => (
+									<div className="block mt-2">
+										<KolInputText
+											id="field-iban"
+											_label="IBAN"
+											_value={ibanFormatter.format(field.value ?? '')}
+											_required
+											_on={{
+												onInput: handleIbanInput,
+												onBlur: field.onBlur,
+											}}
+										/>
+									</div>
+								)}
+							/>
+						</form>
 					</KolForm>
-					<pre className="text-base mt-2">{JSON.stringify(ibanValues, null, 2)}</pre>
+				</div>
+				<div className="p-2">
+					<KolHeading _label="Model (Unformatted Value)" _level={2} />
+					<pre className="text-base">{JSON.stringify(ibanForm.watch(), null, 2)}</pre>
+				</div>
+			</section>
+
+			<section className="w-full flex flex-col">
+				<div className="p-2">
+					<KolHeading _label="On-Blur Formatting - Currency" _level={2} />
+					<p className="text-sm mb-2">Formatting occurs when leaving the field (onBlur) for uninterrupted input</p>
+					<KolForm>
+						<form onSubmit={currencyForm.handleSubmit(async () => {})}>
+							<Controller
+								name="currency"
+								control={currencyForm.control}
+								render={({ field }) => (
+									<div className="block mt-2">
+										<KolInputText
+											id="field-currency"
+											_label="Currency"
+											_value={currencyFormatter.format(field.value ?? 0)}
+											_on={{
+												onBlur: (event: Event) => {
+													const input = event.target as HTMLInputElement;
+													const parsedValue = currencyFormatter.parse(input.value);
+													field.onChange(parsedValue);
+													field.onBlur();
+												},
+											}}
+										/>
+									</div>
+								)}
+							/>
+						</form>
+					</KolForm>
+				</div>
+				<div className="p-2">
+					<KolHeading _label="Model (Numeric Value)" _level={2} />
+					<pre className="text-base">{JSON.stringify(currencyForm.watch(), null, 2)}</pre>
 				</div>
 			</section>
 		</>

package/src/scenarios/react-hook-form/disabled.tsx

@@ -0,0 +1,52 @@
+import { KolInputTextController } from '@public-ui/react-hook-form-adapter';
+import { KolButton, KolForm } from '@public-ui/react-v19';
+import React, { type BaseSyntheticEvent, type FC } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+
+import { SampleDescription } from '../../components/SampleDescription';
+
+interface FormData {
+	first: string;
+	second: string;
+}
+
+const defaultValues: FormData = {
+	first: '',
+	second: '',
+};
+
+export const RHFDisabled: FC = () => {
+	const { control, handleSubmit, watch } = useForm<FormData>({
+		defaultValues,
+	});
+
+	const onSubmit: SubmitHandler<FormData> = (data) => {
+		alert(JSON.stringify(data, null, 2));
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows two fields of which just one can be filled. The other gets disabled.</p>
+			</SampleDescription>
+
+			<KolForm
+				className="w-full max-w-xl"
+				_on={{
+					onSubmit: (event) => {
+						void handleSubmit(onSubmit)(event as unknown as BaseSyntheticEvent);
+					},
+				}}
+			>
+				<div className="grid gap-4">
+					<KolInputTextController name="first" control={control} _label="First" _disabled={!!watch('second')} />
+
+					<KolInputTextController name="second" control={control} _label="Second" _disabled={!!watch('first')} />
+
+					<KolButton _label="Submit" _type="submit" />
+				</div>
+			</KolForm>
+		</>
+	);
+};

package/src/scenarios/routes.ts

@@ -9,6 +9,7 @@ import { InputGroupWithError } from './input-group-with-error';
 import { InputsGetValue } from './inputs-get-value';
 import { PerformanceTest } from './performance-test';
 import { RHFBasic } from './react-hook-form/basic';
+import { RHFDisabled } from './react-hook-form/disabled';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
 import { SampleFormWithValidation } from './sample-form-with-validation';
 import { StaticForm } from './static-form';
@@ -25,6 +26,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'input-group-with-error': InputGroupWithError,
 		'inputs-get-value': InputsGetValue,
 		'react-hook-form-adapter': RHFBasic,
+		'react-hook-form-adapter-disabled': RHFDisabled,
 		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
 		'static-form': StaticForm,
 		'sample-form-with-validation': SampleFormWithValidation,

package/dist/assets/custom-class-nuoQ9Aml-k3CvN0Q1.js

@@ -1,2 +0,0 @@
-import{n as t}from"./index-sRqLaO-Y.js";const o=(a,s)=>{t(a,"_customClass",s,{defaultValue:void 0})};export{o as v};
-//# sourceMappingURL=custom-class-nuoQ9Aml-k3CvN0Q1.js.map

package/dist/assets/disabled-BhpAFgSp-Ci8x8L08.js

@@ -1,2 +0,0 @@
-import{m as o,D as s}from"./index-sRqLaO-Y.js";const d=(a,t)=>{o(a,"_disabled",t,{hooks:{afterPatch:e=>{e===!0&&s()}}})};export{d as v};
-//# sourceMappingURL=disabled-BhpAFgSp-Ci8x8L08.js.map

package/dist/assets/has-closer-CQzjaTkv-DjcH2Sqw.js

@@ -1,2 +0,0 @@
-import{m as s}from"./index-sRqLaO-Y.js";const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-CQzjaTkv-DjcH2Sqw.js.map

package/dist/assets/hide-label-B9FhGrWP-DnKJv7Uw.js

@@ -1,2 +0,0 @@
-import{m as t}from"./index-sRqLaO-Y.js";const l=(a,e,o={})=>{t(a,"_hideLabel",e,o)};export{l as v};
-//# sourceMappingURL=hide-label-B9FhGrWP-DnKJv7Uw.js.map

package/dist/assets/href-rwDd36rS-CTKE580c.js

@@ -1,2 +0,0 @@
-import{n as e}from"./index-sRqLaO-Y.js";const f=(r,t,a={})=>{e(r,"_href",t,a)};export{f as v};
-//# sourceMappingURL=href-rwDd36rS-CTKE580c.js.map

package/dist/assets/i18n-LBpyQ66X-BxdFXj4b.js

@@ -1,2 +0,0 @@
-import{Z as e,_ as i,N as s}from"./index-sRqLaO-Y.js";let r=(t,n)=>{var a;return((a=e())!==null&&a!==void 0?a:i("de")).translate(t,n)};s()&&(r=t=>t);export{r as t};
-//# sourceMappingURL=i18n-LBpyQ66X-BxdFXj4b.js.map

package/dist/assets/image-source-BfBEJ0rX-Cs6mS_aI.js

@@ -1,2 +0,0 @@
-import{n as o}from"./index-sRqLaO-Y.js";const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-BfBEJ0rX-Cs6mS_aI.js.map