bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,9 +1,8 @@
 import { Previous } from "runed";
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
+import { box, useRefById } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { noop } from "../../internal/callbacks.js";
+import { noop } from "../../internal/noop.js";
 import { addEventListener } from "../../internal/events.js";
 import { getDisabled } from "../../internal/attrs.js";
 export const REGEXP_ONLY_DIGITS = "^\\d+$";
@@ -38,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;
@@ -77,7 +79,7 @@ class PinInputRootState {
         });
         $effect(() => {
             let unsub = noop;
-            untrack(() => {
+            return untrack(() => {
                 const input = this.#inputRef.current;
                 const container = this.#ref.current;
                 if (!input || !container)
@@ -85,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",
@@ -96,7 +98,7 @@ class PinInputRootState {
                     this.#isFocused.current = true;
                 }
                 if (!document.getElementById("pin-input-style")) {
-                    this.applyStyles();
+                    this.#applyStyles();
                 }
                 const updateRootHeight = () => {
                     if (container) {
@@ -119,7 +121,7 @@ class PinInputRootState {
                 const input = this.#inputRef.current;
                 if (!input)
                     return;
-                // forcefully remove :autofull state
+                // forcefully remove :autofill state
                 input.dispatchEvent(new Event("input"));
                 // update selection state
                 const start = input.selectionStart;
@@ -128,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 +146,37 @@ class PinInputRootState {
                 onComplete(value);
             }
         });
+        this.onkeydown = this.onkeydown.bind(this);
+        this.oninput = this.oninput.bind(this);
+        this.onfocus = this.onfocus.bind(this);
+        this.onmouseover = this.onmouseover.bind(this);
+        this.onmouseleave = this.onmouseleave.bind(this);
+        this.onblur = this.onblur.bind(this);
+        this.onpaste = this.onpaste.bind(this);
+    }
+    keysToIgnore = [
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End",
+        "Escape",
+        "Enter",
+        "Tab",
+        "Shift",
+        "Control",
+        "Meta",
+    ];
+    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",
@@ -190,7 +223,7 @@ class PinInputRootState {
         fontFamily: "monospace",
         fontVariantNumeric: "tabular-nums",
     }));
-    applyStyles = () => {
+    #applyStyles() {
         const styleEl = document.createElement("style");
         styleEl.id = "pin-input-style";
         document.head.appendChild(styleEl);
@@ -204,7 +237,7 @@ class PinInputRootState {
             // PWM badges
             safeInsertRule(styleEl.sheet, `[data-pin-input-input] + * { pointer-events: all !important; }`);
         }
-    };
+    }
     #onDocumentSelectionChange = () => {
         const input = this.#inputRef.current;
         const container = this.#ref.current;
@@ -220,7 +253,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;
@@ -262,9 +295,9 @@ 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) => {
+    oninput(e) {
         const newValue = e.currentTarget.value.slice(0, this.#maxLength.current);
         if (newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue)) {
             e.preventDefault();
@@ -280,8 +313,8 @@ class PinInputRootState {
             document.dispatchEvent(new Event("selectionchange"));
         }
         this.value.current = newValue;
-    };
-    #onfocus = (_) => {
+    }
+    onfocus = (_) => {
         const input = this.#inputRef.current;
         if (input) {
             const start = Math.min(input.value.length, this.#maxLength.current - 1);
@@ -292,13 +325,30 @@ class PinInputRootState {
         }
         this.#isFocused.current = true;
     };
-    #onpaste = (e) => {
+    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;
@@ -318,13 +368,17 @@ class PinInputRootState {
         this.#mirrorSelectionStart = selStart;
         this.#mirrorSelectionEnd = selEnd;
     };
-    #onmouseover = () => {
+    onmouseover = (_) => {
         this.#isHoveringInput = true;
     };
-    #onmouseleave = () => {
+    onmouseleave = (_) => {
         this.#isHoveringInput = false;
     };
-    #onblur = () => {
+    onblur = (_) => {
+        if (this.#prevInputMetadata.willSyntheticBlur) {
+            this.#prevInputMetadata.willSyntheticBlur = false;
+            return;
+        }
         this.#isFocused.current = false;
     };
     inputProps = $derived.by(() => ({
@@ -340,12 +394,13 @@ class PinInputRootState {
         value: this.value.current,
         disabled: getDisabled(this.#disabled.current),
         //
-        onpaste: this.#onpaste,
-        oninput: this.#oninput,
-        onmouseover: this.#onmouseover,
-        onmouseleave: this.#onmouseleave,
-        onfocus: this.#onfocus,
-        onblur: this.#onblur,
+        onpaste: this.onpaste,
+        oninput: this.oninput,
+        onkeydown: this.onkeydown,
+        onmouseover: this.onmouseover,
+        onmouseleave: this.onmouseleave,
+        onfocus: this.onfocus,
+        onblur: this.onblur,
     }));
     #cells = $derived.by(() => Array.from({ length: this.#maxLength.current }).map((_, idx) => {
         const isActive = this.#isFocused.current &&
@@ -387,7 +442,7 @@ class PinInputCellState {
         "data-inactive": !this.#cell.current.isActive ? "" : undefined,
     }));
 }
-// eslint-disable-next-line ts/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function syncTimeouts(cb) {
     const t1 = setTimeout(cb, 0); // For faster machines
     const t2 = setTimeout(cb, 1_0);

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveDivAttributes, PrimitiveInputAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
 export type PinInputRootSnippetProps = {
     cells: PinInputCell[];
     isFocused: boolean;
@@ -52,21 +52,12 @@ export type PinInputRootPropsWithoutHTML = Omit<WithChild<{
      * Optionally provide an ID to apply to the hidden input element.
      */
     inputId?: string;
-    /**
-     * Whether or not the value state is controlled or not. If `true`, the component will
-     * not update the value state internally, instead it will call `onValueChange` when
-     * it would have otherwise, and it is up to you to update the `value` prop that is
-     * passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
     /**
      * The children snippet used to render the individual cells.
      */
     children: Snippet<[PinInputRootSnippetProps]>;
 }, PinInputRootSnippetProps>, "child">;
-export type PinInputRootProps = PinInputRootPropsWithoutHTML & Without<PrimitiveInputAttributes, PinInputRootPropsWithoutHTML>;
+export type PinInputRootProps = PinInputRootPropsWithoutHTML & Without<BitsPrimitiveInputAttributes, PinInputRootPropsWithoutHTML>;
 export type PinInputCellPropsWithoutHTML = WithChild<{
     /**
      * This specific cell, which is provided by the `cells` snippet prop from
@@ -74,7 +65,7 @@ export type PinInputCellPropsWithoutHTML = WithChild<{
      */
     cell: PinInputCell;
 }>;
-export type PinInputCellProps = PinInputCellPropsWithoutHTML & Without<PrimitiveDivAttributes, PinInputCellPropsWithoutHTML>;
+export type PinInputCellProps = PinInputCellPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PinInputCellPropsWithoutHTML>;
 export type PinInputCell = {
     /**
      * The character displayed in the cell.

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/popover/components/popover-arrow.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ArrowProps } from "../index.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+	import type { PopoverArrowProps } from "../types.js";
+	import FloatingLayerArrow from "../../utilities/floating-layer/components/floating-layer-arrow.svelte";
 
-	let { ref = $bindable(null), ...restProps }: ArrowProps = $props();
+	let { ref = $bindable(null), ...restProps }: PopoverArrowProps = $props();
 </script>
 
-<FloatingLayer.Arrow bind:ref {...restProps} data-popover-arrow="" />
+<FloatingLayerArrow bind:ref {...restProps} data-popover-arrow="" />

package/dist/bits/popover/components/popover-arrow.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PopoverArrow: $$__sveltets_2_IsomorphicComponent<import("../../utilities/arrow/types.js").ArrowProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type PopoverArrow = InstanceType<typeof PopoverArrow>;
+declare const PopoverArrow: import("svelte").Component<import("../../utilities/arrow/types.js").ArrowProps, {}, "ref">;
+type PopoverArrow = ReturnType<typeof PopoverArrow>;
 export default PopoverArrow;

package/dist/bits/popover/components/popover-close.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { CloseProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverCloseProps } from "../types.js";
 	import { usePopoverClose } from "../popover.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,
@@ -11,7 +10,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: CloseProps = $props();
+	}: PopoverCloseProps = $props();
 
 	const closeState = usePopoverClose({
 		id: box.with(() => id),

package/dist/bits/popover/components/popover-close.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { CloseProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PopoverClose: $$__sveltets_2_IsomorphicComponent<CloseProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type PopoverClose = InstanceType<typeof PopoverClose>;
+import type { PopoverCloseProps } from "../types.js";
+declare const PopoverClose: import("svelte").Component<PopoverCloseProps, {}, "ref">;
+type PopoverClose = ReturnType<typeof PopoverClose>;
 export default PopoverClose;

package/dist/bits/popover/components/popover-content-static.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentStaticProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentStaticProps } from "../types.js";
 	import { usePopoverContent } from "../popover.svelte.js";
-	import { PopperLayer } from "../../utilities/popper-layer/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		child,
@@ -16,10 +17,11 @@
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
 		onInteractOutside = noop,
-		preventScroll = false,
 		trapFocus = true,
+		preventScroll = false,
+
 		...restProps
-	}: ContentStaticProps = $props();
+	}: PopoverContentStaticProps = $props();
 
 	const contentState = usePopoverContent({
 		id: box.with(() => id),
@@ -27,45 +29,66 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PopperLayer
-	isStatic={true}
-	{...mergedProps}
-	present={contentState.root.open.current || forceMount}
-	{id}
-	onInteractOutside={(e) => {
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.close();
-	}}
-	onEscapeKeydown={(e) => {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.close();
-	}}
-	onCloseAutoFocus={(e) => {
-		onCloseAutoFocus(e);
-		if (e.defaultPrevented) return;
-		e.preventDefault();
-		contentState.root.triggerNode?.focus();
-	}}
-	{trapFocus}
-	{preventScroll}
-	loop
-	{forceMount}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props)}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.(contentState.snippetProps)}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		isStatic
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		isStatic
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(props, {
+				style: getFloatingContentCSSVars("popover"),
+			})}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

package/dist/bits/popover/components/popover-content-static.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { ContentStaticProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PopoverContentStatic: $$__sveltets_2_IsomorphicComponent<ContentStaticProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type PopoverContentStatic = InstanceType<typeof PopoverContentStatic>;
+import type { PopoverContentStaticProps } from "../types.js";
+declare const PopoverContentStatic: import("svelte").Component<PopoverContentStaticProps, {}, "ref">;
+type PopoverContentStatic = ReturnType<typeof PopoverContentStatic>;
 export default PopoverContentStatic;