bits-ui 1.0.0-next.34 → 1.0.0-next.36

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -22,6 +22,7 @@ declare class PinInputRootState {
     #private;
     value: PinInputRootStateProps["value"];
     constructor(props: PinInputRootStateProps);
+    keysToIgnore: string[];
     rootProps: {
         readonly id: string;
         readonly "data-pin-input-root": "";
@@ -80,6 +81,7 @@ declare class PinInputRootState {
         oninput: (e: Event & {
             currentTarget: HTMLInputElement;
         }) => void;
+        onkeydown: (e: KeyboardEvent) => void;
         onmouseover: () => void;
         onmouseleave: () => void;
         onfocus: (_: FocusEvent & {

package/dist/bits/pin-input/pin-input.svelte.js

@@ -37,7 +37,10 @@ class PinInputRootState {
             return this.#pattern.current;
         }
     });
-    #prevInputMetadata = $state([null, null, "none"]);
+    #prevInputMetadata = $state({
+        prev: [null, null, "none"],
+        willSyntheticBlur: false,
+    });
     #pushPasswordManagerStrategy;
     #pwmb;
     #initialLoad;
@@ -84,7 +87,7 @@ class PinInputRootState {
                 if (this.#initialLoad.value.current !== input.value) {
                     this.value.current = input.value;
                 }
-                this.#prevInputMetadata = [
+                this.#prevInputMetadata.prev = [
                     input.selectionStart,
                     input.selectionEnd,
                     input.selectionDirection ?? "none",
@@ -127,7 +130,7 @@ class PinInputRootState {
                 if (start !== null && end !== null) {
                     this.#mirrorSelectionStart = start;
                     this.#mirrorSelectionEnd = end;
-                    this.#prevInputMetadata = [start, end, dir];
+                    this.#prevInputMetadata.prev = [start, end, dir];
                 }
             });
         });
@@ -144,6 +147,29 @@ class PinInputRootState {
             }
         });
     }
+    keysToIgnore = [
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End",
+        "Escape",
+        "Enter",
+        "Tab",
+        "Shift",
+        "Control",
+    ];
+    #onkeydown = (e) => {
+        const key = e.key;
+        if (this.keysToIgnore.includes(key))
+            return;
+        if (key && this.#regexPattern && !this.#regexPattern.test(key)) {
+            e.preventDefault();
+        }
+    };
     #rootStyles = $derived.by(() => ({
         position: "relative",
         cursor: this.#disabled.current ? "default" : "text",
@@ -219,7 +245,7 @@ class PinInputRootState {
         const selDir = input.selectionDirection ?? "none";
         const maxLength = input.maxLength;
         const val = input.value;
-        const prev = this.#prevInputMetadata;
+        const prev = this.#prevInputMetadata.prev;
         let start = -1;
         let end = -1;
         let direction;
@@ -261,7 +287,7 @@ class PinInputRootState {
         const dir = direction ?? selDir;
         this.#mirrorSelectionStart = s;
         this.#mirrorSelectionEnd = e;
-        this.#prevInputMetadata = [s, e, dir];
+        this.#prevInputMetadata.prev = [s, e, dir];
     };
     #oninput = (e) => {
         const newValue = e.currentTarget.value.slice(0, this.#maxLength.current);
@@ -293,11 +319,28 @@ class PinInputRootState {
     };
     #onpaste = (e) => {
         const input = this.#inputRef.current;
+        if (!this.#initialLoad.isIOS) {
+            if (!e.clipboardData || !input)
+                return;
+            const content = e.clipboardData.getData("text/plain");
+            const sanitizedContent = this.#onPaste?.current?.(content) ?? content;
+            if (sanitizedContent.length > 0 &&
+                this.#regexPattern &&
+                !this.#regexPattern.test(sanitizedContent)) {
+                e.preventDefault();
+                return;
+            }
+        }
         if (!this.#initialLoad.isIOS || !e.clipboardData || !input)
             return;
         const content = e.clipboardData.getData("text/plain");
         e.preventDefault();
         const sanitizedContent = this.#onPaste?.current?.(content) ?? content;
+        if (sanitizedContent.length > 0 &&
+            this.#regexPattern &&
+            !this.#regexPattern.test(sanitizedContent)) {
+            return;
+        }
         const start = input.selectionStart === null ? undefined : input.selectionStart;
         const end = input.selectionEnd === null ? undefined : input.selectionEnd;
         const isReplacing = start !== end;
@@ -324,6 +367,10 @@ class PinInputRootState {
         this.#isHoveringInput = false;
     };
     #onblur = () => {
+        if (this.#prevInputMetadata.willSyntheticBlur) {
+            this.#prevInputMetadata.willSyntheticBlur = false;
+            return;
+        }
         this.#isFocused.current = false;
     };
     inputProps = $derived.by(() => ({
@@ -341,6 +388,7 @@ class PinInputRootState {
         //
         onpaste: this.#onpaste,
         oninput: this.#oninput,
+        onkeydown: this.#onkeydown,
         onmouseover: this.#onmouseover,
         onmouseleave: this.#onmouseleave,
         onfocus: this.#onfocus,

package/dist/bits/pin-input/usePasswordManager.svelte.js

@@ -16,10 +16,10 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
     let hasPwmBadgeSpace = $state(false);
     let done = $state(false);
     function willPushPwmBadge() {
-        const strat = pushPasswordManagerStrategy.current;
-        if (strat === "none")
+        const strategy = pushPasswordManagerStrategy.current;
+        if (strategy === "none")
             return false;
-        const increaseWidthCase = strat === "increase-width" && hasPwmBadge && hasPwmBadgeSpace;
+        const increaseWidthCase = strategy === "increase-width" && hasPwmBadge && hasPwmBadgeSpace;
         return increaseWidthCase;
     }
     function trackPwmBadge() {
@@ -35,10 +35,10 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
         const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
         const y = centeredY;
         // do an extra search to check for all the password manager badges
-        const pwms = document.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
-        // if no password manager is detected, dispatch document.elementfrompoint to
+        const passwordManagerStrategy = document.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
+        // if no password manager is detected, dispatch document.elementFromPoint to
         // identify the badges
-        if (pwms.length === 0) {
+        if (passwordManagerStrategy.length === 0) {
             const maybeBadgeEl = document.elementFromPoint(x, y);
             // if the found element is the container,
             // then it is not a badge, most times there is no badge in this case

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -63,8 +63,6 @@
 		}
 	}
 
-	value === undefined && (value = { start: undefined, end: undefined });
-
 	const rootState = useRangeCalendarRoot({
 		id: box.with(() => id),
 		ref: box.with(

package/dist/bits/range-calendar/range-calendar.svelte.js

@@ -114,6 +114,23 @@ export class RangeCalendarRootState {
                 return;
             node.textContent = this.fullCalendarLabel;
         });
+        /**
+         * Synchronize the start and end values with the `value` in case
+         * it is updated externally.
+         */
+        $effect(() => {
+            const value = this.value.current;
+            untrack(() => {
+                if (value.start && value.end) {
+                    this.startValue.current = value.start;
+                    this.endValue.current = value.end;
+                }
+                else if (value.start) {
+                    this.startValue.current = value.start;
+                    this.endValue.current = undefined;
+                }
+            });
+        });
         /**
          * Synchronize the placeholder value with the current start value
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.34",
+  "version": "1.0.0-next.36",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",