From 0c372571dd875c14ad7b93ff5e5003fc84f4ddf5 Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Wed, 12 Feb 2025 18:12:37 -0500 Subject: [PATCH 1/2] breaking: rename `onPaste` to `pasteTransformer` --- .changeset/honest-peas-wave.md | 5 +++++ .../src/lib/bits/pin-input/components/pin-input.svelte | 4 ++-- .../bits-ui/src/lib/bits/pin-input/pin-input.svelte.ts | 9 +++++---- packages/bits-ui/src/lib/bits/pin-input/types.ts | 2 +- .../api-reference/extended-types/pin-input/index.ts | 2 +- ...t-on-paste.md => pin-input-root-paste-transformer.md} | 0 .../docs/src/lib/content/api-reference/pin-input.api.ts | 6 +++--- 7 files changed, 17 insertions(+), 11 deletions(-) create mode 100644 .changeset/honest-peas-wave.md rename sites/docs/src/lib/content/api-reference/extended-types/pin-input/{pin-input-root-on-paste.md => pin-input-root-paste-transformer.md} (100%) diff --git a/.changeset/honest-peas-wave.md b/.changeset/honest-peas-wave.md new file mode 100644 index 000000000..e5714e6a6 --- /dev/null +++ b/.changeset/honest-peas-wave.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +breaking: rename `PinInput` `onPaste` to `pasteTransformer` diff --git a/packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte b/packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte index f47b46bcf..275ee5a6c 100644 --- a/packages/bits-ui/src/lib/bits/pin-input/components/pin-input.svelte +++ b/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)); diff --git a/packages/bits-ui/src/lib/bits/pin-input/pin-input.svelte.ts b/packages/bits-ui/src/lib/bits/pin-input/pin-input.svelte.ts index 8b04d5155..f54831a9a 100644 --- a/packages/bits-ui/src/lib/bits/pin-input/pin-input.svelte.ts +++ b/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); diff --git a/packages/bits-ui/src/lib/bits/pin-input/types.ts b/packages/bits-ui/src/lib/bits/pin-input/types.ts index 90c6a73e0..dde6a89f9 100644 --- a/packages/bits-ui/src/lib/bits/pin-input/types.ts +++ b/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. diff --git a/sites/docs/src/lib/content/api-reference/extended-types/pin-input/index.ts b/sites/docs/src/lib/content/api-reference/extended-types/pin-input/index.ts index 8ef282ad8..e5ad8441c 100644 --- a/sites/docs/src/lib/content/api-reference/extended-types/pin-input/index.ts +++ b/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"; diff --git a/sites/docs/src/lib/content/api-reference/extended-types/pin-input/pin-input-root-on-paste.md b/sites/docs/src/lib/content/api-reference/extended-types/pin-input/pin-input-root-paste-transformer.md similarity index 100% rename from sites/docs/src/lib/content/api-reference/extended-types/pin-input/pin-input-root-on-paste.md rename to sites/docs/src/lib/content/api-reference/extended-types/pin-input/pin-input-root-paste-transformer.md diff --git a/sites/docs/src/lib/content/api-reference/pin-input.api.ts b/sites/docs/src/lib/content/api-reference/pin-input.api.ts index c2412ca7f..896ba13e0 100644 --- a/sites/docs/src/lib/content/api-reference/pin-input.api.ts +++ b/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({ 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.", From 6f01ecd32aa1870e187a51a4dd2a9a53a2ae615e Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Wed, 12 Feb 2025 18:13:03 -0500 Subject: [PATCH 2/2] update tests --- packages/tests/src/tests/pin-input/pin-input.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tests/src/tests/pin-input/pin-input.test.ts b/packages/tests/src/tests/pin-input/pin-input.test.ts index d4041357c..ec360b2a0 100644 --- a/packages/tests/src/tests/pin-input/pin-input.test.ts +++ b/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);