sheer-ui 0.0.0

package/src/lib/components/pin-input/pin-input.svelte.ts

@@ -0,0 +1,541 @@
+import { onMount, untrack } from 'svelte';
+import {
+	type WritableBox,
+	attachRef,
+	DOMContext,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
+	simpleBox,
+} from '../../internal/tools/index.js';
+import { usePasswordManagerBadge } from './usePasswordManager.svelte.js';
+import type { PinInputCell, PinInputRootProps as RootComponentProps } from './types.js';
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { createBitsAttrs, boolToTrueOrUndef } from '../../internal/attrs.js';
+import { on } from 'svelte/events';
+import { resizeAttachment } from '../../internal/svelte-resize-observer.svelte.js';
+
+export const REGEXP_ONLY_DIGITS = '^\\d+$';
+export const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$';
+export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]+$';
+
+const pinInputAttrs = createBitsAttrs({
+	component: 'pin-input',
+	parts: ['root', 'cell'],
+});
+
+interface PinInputRootStateOpts
+	extends
+		WithRefOpts,
+		WritableBoxedValues<{
+			value: string;
+			inputRef: HTMLInputElement | null;
+		}>,
+		ReadableBoxedValues<{
+			inputId: string;
+			disabled: boolean;
+			// oxlint-disable-next-line no-explicit-any
+			onComplete: (...args: any[]) => void;
+			pasteTransformer?: (text: string) => string;
+			// oxlint-disable-next-line no-explicit-any
+			pattern: any;
+			maxLength: number;
+			pushPasswordManagerStrategy: 'increase-width' | 'none';
+			textAlign: RootComponentProps['textalign'];
+			autocomplete: RootComponentProps['autocomplete'];
+			inputmode: RootComponentProps['inputmode'];
+		}> {}
+
+interface PrevInputMetadata {
+	prev: [number | null, number | null, 'none' | 'forward' | 'backward'];
+	willSyntheticBlur: boolean;
+}
+interface InitialLoad {
+	value: WritableBox<string>;
+	isIOS: boolean;
+}
+
+const KEYS_TO_IGNORE = [
+	'Backspace',
+	'Delete',
+	'ArrowLeft',
+	'ArrowRight',
+	'ArrowUp',
+	'ArrowDown',
+	'Home',
+	'End',
+	'Escape',
+	'Enter',
+	'Tab',
+	'Shift',
+	'Control',
+	'Meta',
+];
+
+export class PinInputRootState {
+	static create(opts: PinInputRootStateOpts) {
+		return new PinInputRootState(opts);
+	}
+
+	readonly opts: PinInputRootStateOpts;
+	readonly attachment: RefAttachment;
+	readonly inputAttachment: RefAttachment<HTMLInputElement>;
+	#isHoveringInput = $state(false);
+	#isFocused = simpleBox(false);
+	#mirrorSelectionStart = $state<number | null>(null);
+	#mirrorSelectionEnd = $state<number | null>(null);
+
+	#previousValue = $state<string | undefined>(undefined);
+
+	readonly #regexPattern = $derived.by(() =>
+		typeof this.opts.pattern.current === 'string' ? new RegExp(this.opts.pattern.current) : this.opts.pattern.current,
+	);
+	// only read/written inside event handlers — needs no reactivity
+	#prevInputMetadata: PrevInputMetadata = {
+		prev: [null, null, 'none'],
+		willSyntheticBlur: false,
+	};
+	#pwmb: ReturnType<typeof usePasswordManagerBadge>;
+	#initialLoad: InitialLoad;
+	domContext: DOMContext;
+	#updateRootHeight = () => {
+		const input = this.opts.inputRef.current;
+		const container = this.opts.ref.current;
+		if (!input || !container) return;
+
+		container.style.setProperty('--bits-pin-input-root-height', `${input.clientHeight}px`);
+	};
+
+	constructor(opts: PinInputRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+		this.inputAttachment = {
+			...attachRef(this.opts.inputRef),
+			...resizeAttachment<HTMLInputElement>(this.#updateRootHeight),
+		};
+		this.domContext = new DOMContext(opts.ref);
+
+		let lastValue: string | undefined = undefined;
+		$effect.pre(() => {
+			const current = this.opts.value.current ?? '';
+			this.#previousValue = lastValue;
+			lastValue = current;
+		});
+
+		this.#initialLoad = {
+			value: this.opts.value,
+			isIOS: typeof window !== 'undefined' && window?.CSS?.supports('-webkit-touch-callout', 'none'),
+		};
+
+		this.#pwmb = usePasswordManagerBadge({
+			containerRef: this.opts.ref,
+			inputRef: this.opts.inputRef,
+			isFocused: this.#isFocused,
+			pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
+			domContext: this.domContext,
+		});
+
+		onMount(() => {
+			const input = this.opts.inputRef.current;
+			const container = this.opts.ref.current;
+
+			if (!input || !container) return;
+
+			if (this.#initialLoad.value.current !== input.value) {
+				this.opts.value.current = input.value;
+			}
+
+			this.#prevInputMetadata.prev = [input.selectionStart, input.selectionEnd, input.selectionDirection ?? 'none'];
+
+			const unsub = on(this.domContext.getDocument(), 'selectionchange', this.#onDocumentSelectionChange, {
+				capture: true,
+			});
+
+			this.#onDocumentSelectionChange();
+			if (this.domContext.getActiveElement() === input) {
+				this.#isFocused.current = true;
+			}
+
+			if (!this.domContext.getElementById('pin-input-style')) {
+				this.#applyStyles();
+			}
+
+			this.#updateRootHeight();
+
+			return () => {
+				unsub();
+			};
+		});
+
+		$effect(() => {
+			this.opts.value.current;
+			this.opts.inputRef.current;
+			return untrack(() => {
+				const timeoutIds = syncTimeouts(() => {
+					const input = this.opts.inputRef.current;
+					if (!input) return;
+					// forcefully remove :autofill state
+					input.dispatchEvent(new Event('input'));
+
+					// update selection state
+					const start = input.selectionStart;
+					const end = input.selectionEnd;
+					const dir = input.selectionDirection ?? 'none';
+					if (start !== null && end !== null) {
+						this.#mirrorSelectionStart = start;
+						this.#mirrorSelectionEnd = end;
+						this.#prevInputMetadata.prev = [start, end, dir];
+					}
+				}, this.domContext);
+
+				return () => {
+					for (const timeoutId of timeoutIds) {
+						this.domContext.clearTimeout(timeoutId);
+					}
+				};
+			});
+		});
+
+		$effect(() => {
+			// invoke `onComplete` when the input is completely filled.
+			const value = this.opts.value.current;
+			const prevValue = this.#previousValue;
+			const maxLength = this.opts.maxLength.current;
+			const onComplete = this.opts.onComplete.current;
+
+			if (prevValue === undefined) return;
+			if (value !== prevValue && prevValue.length < maxLength && value.length === maxLength) {
+				onComplete(value);
+			}
+		});
+	}
+
+	onkeydown = (e: BitsKeyboardEvent) => {
+		// if ctrl or cmd is pressed, they are likely to be shortcuts and should not be tested
+		// against the regex
+		if (KEYS_TO_IGNORE.includes(e.key) || e.ctrlKey || e.metaKey) return;
+		if (e.key && this.#regexPattern && !this.#regexPattern.test(e.key)) e.preventDefault();
+	};
+
+	readonly #rootStyles = $derived.by(() => ({
+		position: 'relative',
+		cursor: this.opts.disabled.current ? 'default' : 'text',
+		userSelect: 'none',
+		WebkitUserSelect: 'none',
+		pointerEvents: 'none',
+	}));
+
+	readonly rootProps = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[pinInputAttrs.root]: '',
+				style: this.#rootStyles,
+				...this.attachment,
+			}) as const,
+	);
+
+	readonly inputWrapperProps = $derived.by(
+		() =>
+			({
+				style: {
+					position: 'absolute',
+					inset: 0,
+					pointerEvents: 'none',
+				},
+			}) as const,
+	);
+
+	readonly #inputStyle = $derived.by(() => ({
+		position: 'absolute',
+		inset: 0,
+		width: this.#pwmb.willPushPwmBadge ? `calc(100% + ${this.#pwmb.PWM_BADGE_SPACE_WIDTH})` : '100%',
+		clipPath: this.#pwmb.willPushPwmBadge ? `inset(0 ${this.#pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)` : undefined,
+		height: '100%',
+		display: 'flex',
+		textAlign: this.opts.textAlign.current,
+		opacity: '1',
+		color: 'transparent',
+		pointerEvents: 'all',
+		background: 'transparent',
+		caretColor: 'transparent',
+		border: '0 solid transparent',
+		outline: '0 solid transparent',
+		boxShadow: 'none',
+		lineHeight: '1',
+		letterSpacing: '-.5em',
+		fontSize: 'var(--bits-pin-input-root-height)',
+		fontFamily: 'monospace',
+		fontVariantNumeric: 'tabular-nums',
+	}));
+
+	#applyStyles() {
+		const doc = this.domContext.getDocument();
+		const styleEl = doc.createElement('style');
+		styleEl.id = 'pin-input-style';
+		doc.head.appendChild(styleEl);
+
+		if (styleEl.sheet) {
+			const autoFillStyles =
+				'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';
+
+			safeInsertRule(
+				styleEl.sheet,
+				'[data-pin-input-input]::selection { background: transparent !important; color: transparent !important; }',
+			);
+			safeInsertRule(styleEl.sheet, `[data-pin-input-input]:autofill { ${autoFillStyles} }`);
+			safeInsertRule(styleEl.sheet, `[data-pin-input-input]:-webkit-autofill { ${autoFillStyles} }`);
+			// iOS
+			safeInsertRule(
+				styleEl.sheet,
+				`@supports (-webkit-touch-callout: none) { [data-pin-input-input] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`,
+			);
+			// PWM badges
+			safeInsertRule(styleEl.sheet, `[data-pin-input-input] + * { pointer-events: all !important; }`);
+		}
+	}
+
+	#onDocumentSelectionChange = () => {
+		const input = this.opts.inputRef.current;
+		const container = this.opts.ref.current;
+		if (!input || !container) return;
+
+		if (this.domContext.getActiveElement() !== input) {
+			this.#mirrorSelectionStart = null;
+			this.#mirrorSelectionEnd = null;
+			return;
+		}
+
+		const selStart = input.selectionStart;
+		const selEnd = input.selectionEnd;
+		const selDir = input.selectionDirection ?? 'none';
+		const maxLength = input.maxLength;
+		const val = input.value;
+		const prev = this.#prevInputMetadata.prev;
+
+		let start = -1;
+		let end = -1;
+		let direction: 'forward' | 'backward' | 'none' | undefined;
+		if (val.length !== 0 && selStart !== null && selEnd !== null) {
+			const isSingleCaret = selStart === selEnd;
+			const isInsertMode = selStart === val.length && val.length < maxLength;
+
+			if (isSingleCaret && !isInsertMode) {
+				const c = selStart;
+				if (c === 0) {
+					start = 0;
+					end = 1;
+					direction = 'forward';
+				} else if (c === maxLength) {
+					start = c - 1;
+					end = c;
+					direction = 'backward';
+				} else if (maxLength > 1 && val.length > 1) {
+					let offset = 0;
+					if (prev[0] !== null && prev[1] !== null) {
+						direction = c < prev[1] ? 'backward' : 'forward';
+						const wasPreviouslyInserting = prev[0] === prev[1] && prev[0] < maxLength;
+						if (direction === 'backward' && !wasPreviouslyInserting) {
+							offset = -1;
+						}
+					}
+
+					start = offset + c;
+					end = offset + c + 1;
+				}
+			}
+
+			if (start !== -1 && end !== -1 && start !== end) {
+				this.opts.inputRef.current?.setSelectionRange(start, end, direction);
+			}
+		}
+
+		// finally update the state
+		const s = start !== -1 ? start : selStart;
+		const e = end !== -1 ? end : selEnd;
+		const dir = direction ?? selDir;
+		this.#mirrorSelectionStart = s;
+		this.#mirrorSelectionEnd = e;
+		this.#prevInputMetadata.prev = [s, e, dir];
+	};
+
+	oninput = (e: BitsEvent<InputEvent, HTMLInputElement>) => {
+		const newValue = e.currentTarget.value.slice(0, this.opts.maxLength.current);
+		if (newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue)) {
+			e.preventDefault();
+			return;
+		}
+
+		const maybeHasDeleted = typeof this.#previousValue === 'string' && newValue.length < this.#previousValue.length;
+
+		if (maybeHasDeleted) {
+			// Since cutting/deleting text doesn't trigger
+			// selectionchange event, we'll have to dispatch it manually.
+			// NOTE: The following line also triggers when cmd+A then pasting
+			// a value with smaller length, which is not ideal for performance.
+			this.domContext.getDocument().dispatchEvent(new Event('selectionchange'));
+		}
+		this.opts.value.current = newValue;
+	};
+
+	onfocus = (_: BitsFocusEvent<HTMLInputElement>) => {
+		const input = this.opts.inputRef.current;
+		if (input) {
+			const start = Math.min(input.value.length, this.opts.maxLength.current - 1);
+			const end = input.value.length;
+			input.setSelectionRange(start, end);
+			this.#mirrorSelectionStart = start;
+			this.#mirrorSelectionEnd = end;
+		}
+		this.#isFocused.current = true;
+	};
+
+	onpaste = (e: BitsEvent<ClipboardEvent>) => {
+		const input = this.opts.inputRef.current;
+		if (!input) return;
+
+		const getNewValue = (finalContent: string | undefined) => {
+			const start = input.selectionStart === null ? undefined : input.selectionStart;
+			const end = input.selectionEnd === null ? undefined : input.selectionEnd;
+			const isReplacing = start !== end;
+			const initNewVal = this.opts.value.current;
+			const newValueUncapped = isReplacing
+				? initNewVal.slice(0, start) + finalContent + initNewVal.slice(end)
+				: initNewVal.slice(0, start) + finalContent + initNewVal.slice(start);
+			return newValueUncapped.slice(0, this.opts.maxLength.current);
+		};
+
+		const isValueInvalid = (newValue: string) => {
+			return newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue);
+		};
+
+		if (!this.opts.pasteTransformer?.current && (!this.#initialLoad.isIOS || !e.clipboardData || !input)) {
+			const newValue = getNewValue(e.clipboardData?.getData('text/plain'));
+			if (isValueInvalid(newValue)) {
+				e.preventDefault();
+			}
+			return;
+		}
+
+		const _content = e.clipboardData?.getData('text/plain') ?? '';
+		const content = this.opts.pasteTransformer?.current ? this.opts.pasteTransformer.current(_content) : _content;
+		e.preventDefault();
+
+		const newValue = getNewValue(content);
+
+		if (isValueInvalid(newValue)) return;
+
+		input.value = newValue;
+		this.opts.value.current = newValue;
+
+		const selStart = Math.min(newValue.length, this.opts.maxLength.current - 1);
+		const selEnd = newValue.length;
+
+		input.setSelectionRange(selStart, selEnd);
+		this.#mirrorSelectionStart = selStart;
+		this.#mirrorSelectionEnd = selEnd;
+	};
+
+	onblur = (_: BitsFocusEvent) => {
+		if (this.#prevInputMetadata.willSyntheticBlur) {
+			this.#prevInputMetadata.willSyntheticBlur = false;
+			return;
+		}
+		this.#isFocused.current = false;
+	};
+
+	readonly inputProps = $derived.by(() => ({
+		id: this.opts.inputId.current,
+		style: this.#inputStyle,
+		autocomplete: this.opts.autocomplete.current || 'one-time-code',
+		'data-pin-input-input': '',
+		'data-pin-input-input-mss': this.#mirrorSelectionStart,
+		'data-pin-input-input-mse': this.#mirrorSelectionEnd,
+		inputmode: this.opts.inputmode.current,
+		pattern: this.#regexPattern?.source,
+		maxlength: this.opts.maxLength.current,
+		value: this.opts.value.current,
+		disabled: boolToTrueOrUndef(this.opts.disabled.current),
+		//
+		onpaste: this.onpaste,
+		oninput: this.oninput,
+		onkeydown: this.onkeydown,
+		onmouseover: () => (this.#isHoveringInput = true),
+		onmouseleave: () => (this.#isHoveringInput = false),
+		onfocus: this.onfocus,
+		onblur: this.onblur,
+		...this.inputAttachment,
+	}));
+
+	readonly #cells = $derived.by(() =>
+		Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
+			const isActive =
+				this.#isFocused.current &&
+				this.#mirrorSelectionStart !== null &&
+				this.#mirrorSelectionEnd !== null &&
+				((this.#mirrorSelectionStart === this.#mirrorSelectionEnd && idx === this.#mirrorSelectionStart) ||
+					(idx >= this.#mirrorSelectionStart && idx < this.#mirrorSelectionEnd));
+
+			const char = this.opts.value.current[idx] !== undefined ? this.opts.value.current[idx] : null;
+
+			return {
+				char,
+				isActive,
+				hasFakeCaret: isActive && char === null,
+			} satisfies PinInputCell;
+		}),
+	);
+
+	readonly snippetProps = $derived.by(() => ({
+		cells: this.#cells,
+		isFocused: this.#isFocused.current,
+		isHovering: this.#isHoveringInput,
+	}));
+}
+
+interface PinInputCellStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			cell: PinInputCell;
+		}> {}
+
+export class PinInputCellState {
+	static create(opts: PinInputCellStateOpts) {
+		return new PinInputCellState(opts);
+	}
+
+	readonly opts: PinInputCellStateOpts;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: PinInputCellStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[pinInputAttrs.cell]: '',
+				'data-active': this.opts.cell.current.isActive ? '' : undefined,
+				'data-inactive': !this.opts.cell.current.isActive ? '' : undefined,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+function syncTimeouts(cb: (...args: any[]) => unknown, domContext: DOMContext): number[] {
+	const t1 = domContext.setTimeout(cb, 0); // For faster machines
+	const t2 = domContext.setTimeout(cb, 1_0);
+	const t3 = domContext.setTimeout(cb, 5_0);
+	return [t1, t2, t3];
+}
+
+function safeInsertRule(sheet: CSSStyleSheet, rule: string) {
+	try {
+		sheet.insertRule(rule);
+	} catch {
+		// oxlint-disable-next-line no-console
+		console.error('pin input could not insert CSS rule:', rule);
+	}
+}

package/src/lib/components/pin-input/types.ts

@@ -0,0 +1,118 @@
+import type { Snippet } from "svelte";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type {
+	BitsPrimitiveDivAttributes,
+	BitsPrimitiveInputAttributes,
+} from "../../internal/attribute-types.js";
+
+export type PinInputRootSnippetProps = {
+	cells: PinInputCell[];
+	isFocused: boolean;
+	isHovering: boolean;
+};
+
+export type PinInputRootPropsWithoutHTML = Omit<
+	WithChild<
+		{
+			/**
+			 * The value of the input.
+			 *
+			 * @bindable
+			 */
+			value?: string;
+
+			/**
+			 * A callback function that is called when the value of the input changes.
+			 */
+			onValueChange?: OnChangeFn<string>;
+
+			/**
+			 * A callback function that is called when the user pastes text into the input.
+			 * It receives the pasted text as an argument, and should return the sanitized text.
+			 *
+			 * Use this function to clean up the pasted text, like removing hyphens or other
+			 * characters that should not make it into the input.
+			 */
+			pasteTransformer?: (text: string) => string;
+
+			/**
+			 * The max length of the input.
+			 */
+			maxlength: number;
+
+			/**
+			 * Customize the alignment of the text within in the input.
+			 *
+			 * @default "left"
+			 */
+			textalign?: "left" | "center" | "right";
+
+			/**
+			 * A callback function that is called when the input is completely filled.
+			 *
+			 */
+			// oxlint-disable-next-line no-explicit-any
+			onComplete?: (...args: any[]) => void;
+
+			/**
+			 * How to handle the input when a password manager is detected.
+			 */
+			pushPasswordManagerStrategy?: "increase-width" | "none";
+
+			/**
+			 * Whether the input is disabled
+			 */
+			disabled?: boolean;
+
+			/**
+			 * Optionally provide an ID to apply to the hidden input element.
+			 */
+			inputId?: string;
+
+			/**
+			 * The underlying hidden `<input>` element. Bind to call `focus()`, read selection, etc.
+			 *
+			 * @bindable
+			 */
+			inputRef?: HTMLInputElement | null;
+
+			/**
+			 * The children snippet used to render the individual cells.
+			 */
+			children: Snippet<[PinInputRootSnippetProps]>;
+		},
+		PinInputRootSnippetProps
+	>,
+	"child"
+>;
+
+export type PinInputRootProps = PinInputRootPropsWithoutHTML &
+	Without<BitsPrimitiveInputAttributes, PinInputRootPropsWithoutHTML>;
+
+export type PinInputCellPropsWithoutHTML = WithChild<{
+	/**
+	 * This specific cell, which is provided by the `cells` snippet prop from
+	 * the `PinInput.Root` component.
+	 */
+	cell: PinInputCell;
+}>;
+
+export type PinInputCellProps = PinInputCellPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, PinInputCellPropsWithoutHTML>;
+
+export type PinInputCell = {
+	/**
+	 * The character displayed in the cell.
+	 */
+	char: string | null | undefined;
+
+	/**
+	 * Whether the cell is active.
+	 */
+	isActive: boolean;
+
+	/**
+	 * Whether the cell has a fake caret.
+	 */
+	hasFakeCaret: boolean;
+};