bits-ui 2.17.2 → 2.18.0

package/dist/bits/menubar/components/menubar-menu.svelte

@@ -25,6 +25,5 @@
 	_internal_variant="menubar"
 	{...restProps}
 	_internal_should_skip_exit_animation={() =>
-		menuState.root.skipExitAnimationForMenuValue === menuState.opts.value.current
-	}
+		menuState.root.skipExitAnimationForMenuValue === menuState.opts.value.current}
 />

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

@@ -11,6 +11,7 @@
 		id = createId(uid),
 		inputId = `${createId(uid)}-input`,
 		ref = $bindable(null),
+		inputRef = $bindable(null),
 		maxlength = 6,
 		textalign = "left",
 		pattern,
@@ -33,6 +34,10 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		inputRef: boxWith(
+			() => inputRef,
+			(v) => (inputRef = v)
+		),
 		inputId: boxWith(() => inputId),
 		autocomplete: boxWith(() => autocomplete),
 		maxLength: boxWith(() => maxlength),

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

@@ -1,4 +1,4 @@
 import type { PinInputRootProps } from "../types.js";
-declare const PinInput: import("svelte").Component<PinInputRootProps, {}, "value" | "ref">;
+declare const PinInput: import("svelte").Component<PinInputRootProps, {}, "value" | "inputRef" | "ref">;
 type PinInput = ReturnType<typeof PinInput>;
 export default PinInput;

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

@@ -6,6 +6,7 @@ export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
 interface PinInputRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: string;
+    inputRef: HTMLInputElement | null;
 }>, ReadableBoxedValues<{
     inputId: string;
     disabled: boolean;

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

@@ -33,9 +33,8 @@ export class PinInputRootState {
     }
     opts;
     attachment;
-    #inputRef = simpleBox(null);
+    inputAttachment;
     #isHoveringInput = $state(false);
-    inputAttachment = attachRef(this.#inputRef);
     #isFocused = simpleBox(false);
     #mirrorSelectionStart = $state(null);
     #mirrorSelectionEnd = $state(null);
@@ -58,6 +57,7 @@ export class PinInputRootState {
     constructor(opts) {
         this.opts = opts;
         this.attachment = attachRef(this.opts.ref);
+        this.inputAttachment = attachRef(this.opts.inputRef);
         this.domContext = new DOMContext(opts.ref);
         this.#initialLoad = {
             value: this.opts.value,
@@ -66,13 +66,13 @@ export class PinInputRootState {
         };
         this.#pwmb = usePasswordManagerBadge({
             containerRef: this.opts.ref,
-            inputRef: this.#inputRef,
+            inputRef: this.opts.inputRef,
             isFocused: this.#isFocused,
             pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
             domContext: this.domContext,
         });
         onMount(() => {
-            const input = this.#inputRef.current;
+            const input = this.opts.inputRef.current;
             const container = this.opts.ref.current;
             if (!input || !container)
                 return;
@@ -107,9 +107,9 @@ export class PinInputRootState {
                 resizeObserver.disconnect();
             };
         });
-        watch([() => this.opts.value.current, () => this.#inputRef.current], () => {
+        watch([() => this.opts.value.current, () => this.opts.inputRef.current], () => {
             syncTimeouts(() => {
-                const input = this.#inputRef.current;
+                const input = this.opts.inputRef.current;
                 if (!input)
                     return;
                 // forcefully remove :autofill state
@@ -213,7 +213,7 @@ export class PinInputRootState {
         }
     }
     #onDocumentSelectionChange = () => {
-        const input = this.#inputRef.current;
+        const input = this.opts.inputRef.current;
         const container = this.opts.ref.current;
         if (!input || !container)
             return;
@@ -260,7 +260,7 @@ export class PinInputRootState {
                 }
             }
             if (start !== -1 && end !== -1 && start !== end) {
-                this.#inputRef.current?.setSelectionRange(start, end, direction);
+                this.opts.inputRef.current?.setSelectionRange(start, end, direction);
             }
         }
         // finally update the state
@@ -289,7 +289,7 @@ export class PinInputRootState {
         this.opts.value.current = newValue;
     };
     onfocus = (_) => {
-        const input = this.#inputRef.current;
+        const input = this.opts.inputRef.current;
         if (input) {
             const start = Math.min(input.value.length, this.opts.maxLength.current - 1);
             const end = input.value.length;
@@ -300,7 +300,7 @@ export class PinInputRootState {
         this.#isFocused.current = true;
     };
     onpaste = (e) => {
-        const input = this.#inputRef.current;
+        const input = this.opts.inputRef.current;
         if (!input)
             return;
         const getNewValue = (finalContent) => {

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

@@ -52,6 +52,12 @@ export type PinInputRootPropsWithoutHTML = Omit<WithChild<{
      * Optionally provide an ID to apply to the hidden input element.
      */
     inputId?: string;
+    /**
+     * The underlying hidden `<input>` element. Bind to call `focus()`, read selection, etc.
+     *
+     * @bindable
+     */
+    inputRef?: HTMLInputElement | null;
     /**
      * The children snippet used to render the individual cells.
      */

package/dist/bits/select/components/select-value.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { SelectValueState } from "../select.svelte.js";
+	import type { SelectValueProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		placeholder,
+		child,
+		children,
+		...restProps
+	}: SelectValueProps = $props();
+
+	const valueState = SelectValueState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		placeholder: boxWith(() => placeholder),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, valueState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...valueState.snippetProps })}
+{:else}
+	<span {...mergedProps}>
+		{#if children}
+			{@render children?.(valueState.snippetProps)}
+		{:else if valueState.snippetProps.selection.type === "single"}
+			{valueState.snippetProps.selection.selected?.label ?? placeholder}
+		{:else if valueState.snippetProps.selection.type === "multiple" && valueState.snippetProps.selection.selected}
+			{valueState.snippetProps.selection.selected.length > 0
+				? valueState.snippetProps.selection.selected
+						.map((selected) => selected.label)
+						.join(", ")
+				: placeholder}
+		{:else}
+			{placeholder}
+		{/if}
+	</span>
+{/if}

package/dist/bits/select/components/select-value.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SelectValueProps } from "../types.js";
+declare const SelectValue: import("svelte").Component<SelectValueProps, {}, "ref">;
+type SelectValue = ReturnType<typeof SelectValue>;
+export default SelectValue;

package/dist/bits/select/exports.d.ts

@@ -1,4 +1,5 @@
 export { default as Root } from "./components/select.svelte";
+export { default as Value } from "./components/select-value.svelte";
 export { default as Content } from "./components/select-content.svelte";
 export { default as ContentStatic } from "./components/select-content-static.svelte";
 export { default as Item } from "./components/select-item.svelte";
@@ -9,4 +10,4 @@ export { default as Portal } from "../utilities/portal/portal.svelte";
 export { default as Viewport } from "./components/select-viewport.svelte";
 export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte";
 export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte";
-export type { SelectRootProps as RootProps, SelectContentProps as ContentProps, SelectContentStaticProps as ContentStaticProps, SelectItemProps as ItemProps, SelectGroupProps as GroupProps, SelectGroupHeadingProps as GroupHeadingProps, SelectTriggerProps as TriggerProps, SelectViewportProps as ViewportProps, SelectScrollUpButtonProps as ScrollUpButtonProps, SelectScrollDownButtonProps as ScrollDownButtonProps, SelectPortalProps as PortalProps, } from "./types.js";
+export type { SelectRootProps as RootProps, SelectValueProps as ValueProps, SelectContentProps as ContentProps, SelectContentStaticProps as ContentStaticProps, SelectItemProps as ItemProps, SelectGroupProps as GroupProps, SelectGroupHeadingProps as GroupHeadingProps, SelectTriggerProps as TriggerProps, SelectViewportProps as ViewportProps, SelectScrollUpButtonProps as ScrollUpButtonProps, SelectScrollDownButtonProps as ScrollDownButtonProps, SelectPortalProps as PortalProps, } from "./types.js";

package/dist/bits/select/exports.js

@@ -1,4 +1,5 @@
 export { default as Root } from "./components/select.svelte";
+export { default as Value } from "./components/select-value.svelte";
 export { default as Content } from "./components/select-content.svelte";
 export { default as ContentStatic } from "./components/select-content-static.svelte";
 export { default as Item } from "./components/select-item.svelte";

package/dist/bits/select/select.svelte.d.ts

@@ -2,6 +2,7 @@ import { Previous } from "runed";
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type Box } from "svelte-toolbelt";
 import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts, RefAttachment } from "../../internal/types.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+import type { SelectValueSnippetProps } from "./types.js";
 export declare const INTERACTION_KEYS: string[];
 export declare const FIRST_KEYS: string[];
 export declare const LAST_KEYS: string[];
@@ -36,6 +37,7 @@ declare abstract class SelectBaseRootState {
     contentPresence: PresenceManager;
     viewportNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
+    valueNode: HTMLElement | null;
     valueId: string;
     highlightedNode: HTMLElement | null;
     readonly highlightedValue: string | null;
@@ -51,6 +53,11 @@ declare abstract class SelectBaseRootState {
     getCandidateNodes(): HTMLElement[];
     setHighlightedToFirstCandidate(initial?: boolean): void;
     getNodeByValue(value: string): HTMLElement | null;
+    /**
+     * Resolves the display label for a value: `items` entry when present, otherwise the
+     * mounted item's `data-label` or its text content.
+     */
+    getLabelForValue(value: string): string;
     setOpen(open: boolean): void;
     toggleOpen(): void;
     handleOpen(): void;
@@ -112,6 +119,23 @@ export declare class SelectRootState {
     static create(props: SelectRootStateOpts): SelectRoot;
 }
 type SelectRoot = SelectSingleRootState | SelectMultipleRootState;
+type SelectValueStateProps = WithRefOpts<ReadableBoxedValues<{
+    placeholder: string | null | undefined;
+}>>;
+export declare class SelectValueState {
+    static create(opts: SelectValueStateProps): SelectValueState;
+    readonly root: SelectRoot;
+    readonly opts: SelectValueStateProps;
+    readonly attachment: RefAttachment;
+    constructor(opts: SelectValueStateProps, root: SelectRoot);
+    setValue(value: string | string[]): void;
+    readonly snippetProps: SelectValueSnippetProps;
+    readonly props: {
+        id: string;
+        "data-placeholder": string | undefined;
+        "data-select-value": string;
+    };
+}
 interface SelectInputStateOpts extends WithRefOpts, ReadableBoxedValues<{
     clearOnDeselect: boolean;
 }> {

package/dist/bits/select/select.svelte.js

@@ -11,6 +11,7 @@ import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floati
 import { DataTypeahead } from "../../internal/data-typeahead.svelte.js";
 import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+import { DEV } from "esm-env";
 // prettier-ignore
 export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
 export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
@@ -48,6 +49,7 @@ class SelectBaseRootState {
     contentPresence;
     viewportNode = $state(null);
     triggerNode = $state(null);
+    valueNode = $state(null);
     valueId = $state("");
     highlightedNode = $state(null);
     highlightedValue = $derived.by(() => {
@@ -127,6 +129,25 @@ class SelectBaseRootState {
         const candidateNodes = this.getCandidateNodes();
         return candidateNodes.find((node) => node.dataset.value === value) ?? null;
     }
+    /**
+     * Resolves the display label for a value: `items` entry when present, otherwise the
+     * mounted item's `data-label` or its text content.
+     */
+    getLabelForValue(value) {
+        if (value === "")
+            return "";
+        const fromItems = this.opts.items.current.find((item) => item.value === value)?.label;
+        if (fromItems !== undefined)
+            return fromItems;
+        const node = this.getNodeByValue(value);
+        if (node) {
+            const dataLabel = node.getAttribute("data-label");
+            if (dataLabel !== null && dataLabel !== "")
+                return dataLabel;
+            return node.textContent?.trim() ?? value;
+        }
+        return value;
+    }
     setOpen(open) {
         this.opts.open.current = open;
     }
@@ -269,6 +290,70 @@ export class SelectRootState {
         return SelectRootContext.set(rootState);
     }
 }
+export class SelectValueState {
+    static create(opts) {
+        return new SelectValueState(opts, SelectRootContext.get());
+    }
+    root;
+    opts;
+    attachment;
+    constructor(opts, root) {
+        this.root = root;
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref, (v) => (this.root.valueNode = v));
+        this.setValue = this.setValue.bind(this);
+    }
+    setValue(value) {
+        if (this.root.isMulti && !Array.isArray(value)) {
+            if (DEV)
+                throw new Error(`Expected an array of strings passed to \`setValue\` got ${typeof value}.`);
+            return;
+        }
+        if (!this.root.isMulti && typeof value !== "string") {
+            if (DEV)
+                throw new Error(`Expected a string passed to \`setValue\` got ${typeof value}.`);
+            return;
+        }
+        this.root.opts.value.current = value;
+    }
+    // this way consumers get type narrowing for the value on `type`
+    snippetProps = $derived.by(() => {
+        if (this.root.isMulti) {
+            return {
+                selection: {
+                    type: "multiple",
+                    selected: this.root.opts.value.current.length > 0
+                        ? this.root.opts.value.current.map((value) => ({
+                            value,
+                            label: this.root.getLabelForValue(value),
+                        }))
+                        : [],
+                    setValue: this.setValue,
+                },
+                placeholder: this.opts.placeholder.current ?? null,
+                disabled: this.root.opts.disabled.current,
+            };
+        }
+        const value = this.root.opts.value.current;
+        return {
+            selection: {
+                type: "single",
+                selected: value !== ""
+                    ? { value, label: value === "" ? "" : this.root.getLabelForValue(value) }
+                    : undefined,
+                setValue: this.setValue,
+            },
+            placeholder: this.opts.placeholder.current ?? null,
+            disabled: this.root.opts.disabled.current,
+        };
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-placeholder": this.root.hasValue ? undefined : "",
+        "data-select-value": "",
+        ...this.attachment,
+    }));
+}
 export class SelectInputState {
     static create(opts) {
         return new SelectInputState(opts, SelectRootContext.get());

package/dist/bits/select/types.d.ts

@@ -2,7 +2,7 @@ import type { Expand } from "svelte-toolbelt";
 import type { PortalProps } from "../utilities/portal/types.js";
 import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
-import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
 import type { HTMLInputAttributes } from "svelte/elements";
@@ -124,6 +124,27 @@ export type SelectSingleRootProps = SelectBaseRootPropsWithoutHTML & SelectSingl
 export type SelectMultipleRootProps = SelectBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectMultipleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML>;
 export type SelectRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML & (SelectSingleRootPropsWithoutHTML | SelectMultipleRootPropsWithoutHTML);
 export type SelectRootProps = SelectRootPropsWithoutHTML;
+export type SelectValueSnippetProps = {
+    selection: {
+        type: "single";
+        selected?: {
+            value: string;
+            label: string;
+        };
+        setValue: (value: string) => void;
+    } | {
+        type: "multiple";
+        selected: {
+            value: string;
+            label: string;
+        }[];
+        setValue: (value: string[]) => void;
+    };
+    placeholder: string | null;
+    disabled: boolean;
+};
+export type SelectValuePropsWithoutHTML = WithChild<{}, SelectValueSnippetProps>;
+export type SelectValueProps = SelectValuePropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SelectValuePropsWithoutHTML>;
 export type _SharedSelectContentProps = {
     /**
      * Whether or not to loop through the items when navigating with the keyboard.

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

@@ -194,8 +194,9 @@ function isValidEvent(e, node) {
     const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
     if ("button" in e && e.button > 0 && !targetIsContextMenuTrigger)
         return false;
-    if ("button" in e && e.button === 0 && targetIsContextMenuTrigger)
-        return nodeIsContextMenu;
+    if ("button" in e && e.button === 0 && targetIsContextMenuTrigger && nodeIsContextMenu) {
+        return true;
+    }
     if (targetIsContextMenuTrigger && nodeIsContextMenu)
         return false;
     const ownerDocument = getOwnerDocument(target);

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -54,9 +54,7 @@
 	} = $props();
 
 	const resolvedPreventScroll = $derived(preventScroll ?? true);
-	const effectiveStrategy = $derived(
-		strategy ?? (resolvedPreventScroll ? "fixed" : "absolute")
-	);
+	const effectiveStrategy = $derived(strategy ?? (resolvedPreventScroll ? "fixed" : "absolute"));
 </script>
 
 <PopperContent

package/dist/bits/utilities/presence-layer/presence-layer.svelte

@@ -12,9 +12,8 @@
 </script>
 
 {#if forceMount || open || presenceState.isPresent}
-	{@render
-		presence?.({
-			present: presenceState.isPresent,
-			transitionStatus: presenceState.transitionStatus,
-		})}
+	{@render presence?.({
+		present: presenceState.isPresent,
+		transitionStatus: presenceState.transitionStatus,
+	})}
 {/if}

package/package.json

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