sheer-ui 0.4.2 → 0.5.0

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

@@ -1,540 +0,0 @@
-import { onMount, untrack } from 'svelte';
-import {
-	type WritableBox,
-	attachRef,
-	DOMContext,
-	type ReadableBoxedValues,
-	type WritableBoxedValues,
-} 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 = $state(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 = 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 = 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 = 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 &&
-				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,
-		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

@@ -1,118 +0,0 @@
-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;
-};