breaking: rename onPaste to pasteTransformer

.changeset/honest-peas-wave.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+breaking: rename `PinInput` `onPaste` to `pasteTransformer`

packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte

@@ -21,7 +21,7 @@
 		disabled = false,
 		value = $bindable(""),
 		onValueChange = noop,
-		onPaste,
+		pasteTransformer,
 		...restProps
 	}: PinInputRootProps = $props();
 
@@ -47,7 +47,7 @@
 			}
 		),
 		pushPasswordManagerStrategy: box.with(() => pushPasswordManagerStrategy),
-		onPaste: box.with(() => onPaste),
+		pasteTransformer: box.with(() => pasteTransformer),
 	});
 
 	const mergedInputProps = $derived(mergeProps(restProps, rootState.inputProps));

packages/bits-ui/src/lib/bits/pin-input/pin-input.svelte.ts

@@ -30,8 +30,7 @@ type PinInputRootStateProps = WithRefProps<
 			disabled: boolean;
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			onComplete: (...args: any[]) => void;
-			onPaste?: (text: string) => string;
-
+			pasteTransformer?: (text: string) => string;
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			pattern: any;
 			maxLength: number;
@@ -408,7 +407,7 @@ class PinInputRootState {
 		};
 
 		if (
-			!this.opts.onPaste?.current &&
+			!this.opts.pasteTransformer?.current &&
 			(!this.#initialLoad.isIOS || !e.clipboardData || !input)
 		) {
 			const newValue = getNewValue(e.clipboardData?.getData("text/plain"));
@@ -419,7 +418,9 @@ class PinInputRootState {
 		}
 
 		const _content = e.clipboardData?.getData("text/plain") ?? "";
-		const content = this.opts.onPaste?.current ? this.opts.onPaste.current(_content) : _content;
+		const content = this.opts.pasteTransformer?.current
+			? this.opts.pasteTransformer.current(_content)
+			: _content;
 		e.preventDefault();
 
 		const newValue = getNewValue(content);

packages/bits-ui/src/lib/bits/pin-input/types.ts

@@ -33,7 +33,7 @@ export type PinInputRootPropsWithoutHTML = Omit<
 			 * Use this function to clean up the pasted text, like removing hyphens or other
 			 * characters that should not make it into the input.
 			 */
-			onPaste?: (text: string) => string;
+			pasteTransformer?: (text: string) => string;
 
 			/**
 			 * The max length of the input.

packages/tests/src/tests/pin-input/pin-input.test.ts

@@ -137,7 +137,7 @@ describe("Pin Input", () => {
 		const mockComplete = vi.fn();
 		const { user, hiddenInput } = setup({
 			onComplete: mockComplete,
-			onPaste: (text) => text.replace(/-/g, ""),
+			pasteTransformer: (text) => text.replace(/-/g, ""),
 		});
 
 		await user.click(hiddenInput);
@@ -207,7 +207,7 @@ describe("Pin Input", () => {
 		const { user, hiddenInput } = setup({
 			maxlength: 6,
 			onComplete: mockComplete,
-			onPaste: (text) => text.replace(/-/g, ""),
+			pasteTransformer: (text) => text.replace(/-/g, ""),
 		});
 
 		await user.click(hiddenInput);

sites/docs/src/lib/content/api-reference/extended-types/pin-input/index.ts

@@ -4,4 +4,4 @@ export { default as PinInputRootPushPasswordManagerStrategyProp } from "./pin-in
 export { default as PinInputCellCellProp } from "./pin-input-cell-cell-prop.md";
 export { default as PinInputRootChildSnippetProps } from "./pin-input-root-child-snippet-props.md";
 export { default as PinInputRootChildrenSnippetProps } from "./pin-input-root-children-snippet-props.md";
-export { default as PinInputRootOnPasteProp } from "./pin-input-root-on-paste.md";
+export { default as PinInputRootPasteTransformerProp } from "./pin-input-root-paste-transformer.md";

sites/docs/src/lib/content/api-reference/pin-input.api.ts

@@ -4,7 +4,7 @@ import {
 	PinInputRootChildSnippetProps,
 	PinInputRootChildrenSnippetProps,
 	PinInputRootOnCompleteProp,
-	PinInputRootOnPasteProp,
+	PinInputRootPasteTransformerProp,
 	PinInputRootPushPasswordManagerStrategyProp,
 	PinInputRootTextAlignProp,
 } from "./extended-types/pin-input/index.js";
@@ -53,10 +53,10 @@ const root = createApiSchema<PinInputRootPropsWithoutHTML>({
 			description: "A callback function that is called when the input is completely filled.",
 			definition: PinInputRootOnCompleteProp,
 		}),
-		onPaste: createFunctionProp({
+		pasteTransformer: createFunctionProp({
 			description:
 				"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. Useful for cleaning up pasted text, like removing hyphens or other characters that should not make it into the input.",
-			definition: PinInputRootOnPasteProp,
+			definition: PinInputRootPasteTransformerProp,
 		}),
 		inputId: createStringProp({
 			description: "Optionally provide an ID to apply to the hidden input element.",