bits-ui 1.0.0-next.83 → 1.0.0-next.85

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

@@ -1,4 +1,4 @@
-import { Previous } from "runed";
+import { Previous, watch } from "runed";
 import { untrack } from "svelte";
 import { box, useRefById } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
@@ -130,9 +130,7 @@ class PinInputRootState {
                 };
             });
         });
-        $effect(() => {
-            this.value.current;
-            this.#inputRef.current;
+        watch([() => this.value.current, () => this.#inputRef.current], () => {
             syncTimeouts(() => {
                 const input = this.#inputRef.current;
                 if (!input)
@@ -324,35 +322,21 @@ 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)
+        if (!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)) {
+        if (!this.#onPaste?.current && (!this.#initialLoad.isIOS || !e.clipboardData || !input)) {
             return;
         }
+        const _content = e.clipboardData?.getData("text/plain") ?? "";
+        const content = this.#onPaste?.current ? this.#onPaste.current(_content) : _content;
+        e.preventDefault();
         const start = input.selectionStart === null ? undefined : input.selectionStart;
         const end = input.selectionEnd === null ? undefined : input.selectionEnd;
         const isReplacing = start !== end;
         const initNewVal = this.value.current;
         const newValueUncapped = isReplacing
-            ? initNewVal.slice(0, start) + sanitizedContent + initNewVal.slice(end)
-            : initNewVal.slice(0, start) + sanitizedContent + initNewVal.slice(start);
+            ? initNewVal.slice(0, start) + content + initNewVal.slice(end)
+            : initNewVal.slice(0, start) + content + initNewVal.slice(start);
         const newValue = newValueUncapped.slice(0, this.#maxLength.current);
         if (newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue)) {
             return;

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

@@ -8,10 +8,6 @@ const PASSWORD_MANAGER_SELECTORS = [
     '[style$="2147483647 !important;"]', // Bitwarden
 ].join(",");
 export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, }) {
-    let pwmMetadata = $state({
-        done: false,
-        refocused: false,
-    });
     let hasPwmBadge = $state(false);
     let hasPwmBadgeSpace = $state(false);
     let done = $state(false);
@@ -47,17 +43,6 @@ export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordMa
         }
         hasPwmBadge = true;
         done = true;
-        // for specific PWMs the input has to be re-focused
-        // to trigger a reposition of the badge
-        if (!pwmMetadata.refocused && document.activeElement === input) {
-            const selections = [input.selectionStart ?? 0, input.selectionEnd ?? 0];
-            input.blur();
-            input.focus();
-            input.focus();
-            // recover the previous selection
-            input.setSelectionRange(selections[0], selections[1]);
-            pwmMetadata.refocused = true;
-        }
     }
     $effect(() => {
         const container = containerRef.current;

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

@@ -37,7 +37,7 @@ export class RangeCalendarRootState {
     formatter;
     accessibleHeadingId = useId();
     focusedValue = $state(undefined);
-    lastPressedDateValue = $state(undefined);
+    lastPressedDateValue = undefined;
     constructor(props) {
         this.value = props.value;
         this.placeholder = props.placeholder;
@@ -309,19 +309,13 @@ export class RangeCalendarRootState {
         const isStartBeforeFocused = isBefore(this.startValue.current, this.focusedValue);
         const start = isStartBeforeFocused ? this.startValue.current : this.focusedValue;
         const end = isStartBeforeFocused ? this.focusedValue : this.startValue.current;
-        if (isSameDay(start.add({ days: 1 }), end)) {
-            return {
-                start,
-                end,
-            };
+        const range = { start, end };
+        if (isSameDay(start.add({ days: 1 }), end) || isSameDay(start, end)) {
+            return range;
         }
         const isValid = areAllDaysBetweenValid(start, end, this.isDateUnavailable, this.isDateDisabled);
-        if (isValid) {
-            return {
-                start,
-                end,
-            };
-        }
+        if (isValid)
+            return range;
         return null;
     });
     shiftFocus(node, add) {

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -7,6 +7,7 @@ import { debounce } from "../../../internal/debounce.js";
 import { noop } from "../../../internal/noop.js";
 import { getOwnerDocument, isOrContainsTarget } from "../../../internal/elements.js";
 import { isElement } from "../../../internal/is.js";
+import { isClickTrulyOutside } from "../../../internal/dom.js";
 globalThis.bitsDismissableLayers ??= new Map();
 export class DismissibleLayerState {
     #interactOutsideProp;
@@ -200,7 +201,9 @@ function isValidEvent(e, node) {
     if (!isElement(target))
         return false;
     const ownerDocument = getOwnerDocument(target);
-    const isValid = ownerDocument.documentElement.contains(target) && !isOrContainsTarget(node, target);
+    const isValid = ownerDocument.documentElement.contains(target) &&
+        !isOrContainsTarget(node, target) &&
+        isClickTrulyOutside(e, node);
     return isValid;
 }
 function createWrappedEvent(e) {

package/dist/internal/dom.d.ts

@@ -1 +1,7 @@
 export declare function getFirstNonCommentChild(element: HTMLElement | null): ChildNode | null;
+/**
+ * Determines if the click event truly occurred outside the content node.
+ * This was added to handle password managers and other elements that may be injected
+ * into the DOM but visually appear inside the content.
+ */
+export declare function isClickTrulyOutside(event: PointerEvent, contentNode: HTMLElement): boolean;

package/dist/internal/dom.js

@@ -8,3 +8,13 @@ export function getFirstNonCommentChild(element) {
     }
     return null;
 }
+/**
+ * Determines if the click event truly occurred outside the content node.
+ * This was added to handle password managers and other elements that may be injected
+ * into the DOM but visually appear inside the content.
+ */
+export function isClickTrulyOutside(event, contentNode) {
+    const { clientX, clientY } = event;
+    const rect = contentNode.getBoundingClientRect();
+    return (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom);
+}

package/package.json

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