bits-ui 1.0.0-next.90 → 1.0.0-next.92

package/dist/bits/navigation-menu/types.d.ts

@@ -1,4 +1,6 @@
-import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { EscapeBehaviorType } from "../utilities/escape-layer/types.js";
+import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer/types.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, Without } from "../../internal/types.js";
 import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveElementAttributes, BitsPrimitiveLiAttributes, BitsPrimitiveUListAttributes } from "../../shared/attributes.js";
 import type { Direction, Orientation } from "../../shared/index.js";
 export type NavigationMenuRootPropsWithoutHTML = WithChild<{
@@ -53,7 +55,13 @@ export type NavigationMenuSubPropsWithoutHTML = WithChild<{
     orientation?: Orientation;
 }>;
 export type NavigationMenuSubProps = NavigationMenuSubPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, NavigationMenuSubPropsWithoutHTML>;
-export type NavigationMenuListPropsWithoutHTML = WithChild;
+export type NavigationMenuListPropsWithoutHTML = WithChildNoChildrenSnippetProps<{}, {
+    /**
+     * Attributes to spread onto a wrapper element around the content.
+     * Do not style the wrapper element, its styles are computed by Floating UI.
+     */
+    wrapperProps: Record<string, unknown>;
+}>;
 export type NavigationMenuListProps = NavigationMenuListPropsWithoutHTML & Without<BitsPrimitiveUListAttributes, NavigationMenuListPropsWithoutHTML>;
 export type NavigationMenuItemPropsWithoutHTML = WithChild<{
     /**
@@ -87,6 +95,14 @@ export type NavigationMenuContentPropsWithoutHTML = WithChild<{
      * Default behavior can be prevented with `event.preventDefault()`
      */
     onEscapeKeydown?: (event: KeyboardEvent) => void;
+    /**
+     * Behavior when the escape key is pressed while the menu content is open.
+     */
+    escapeKeydownBehavior?: EscapeBehaviorType;
+    /**
+     * Behavior when an interaction occurs outside the content.
+     */
+    interactOutsideBehavior?: InteractOutsideBehaviorType;
     /**
      * Whether to forcefully mount the content, regardless of the open state.
      * This is useful when wanting to use more custom transition and animation

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

@@ -212,7 +212,7 @@ declare class SelectItemState {
      * multiple clicks.
      */
     onpointerup(e: BitsPointerEvent): void;
-    onpointermove(_: BitsPointerEvent): void;
+    onpointermove(e: BitsPointerEvent): void;
     props: {
         readonly [x: string]: string | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
@@ -223,7 +223,7 @@ declare class SelectItemState {
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-label": string;
-        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onpointerup: (e: BitsPointerEvent) => void;
     };

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

@@ -7,6 +7,7 @@ import { kbd } from "../../internal/kbd.js";
 import { noop } from "../../internal/noop.js";
 import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
 import { useDataTypeahead } from "../../internal/use-data-typeahead.svelte.js";
+import { isIOS } from "../../internal/is.js";
 // 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];
@@ -706,7 +707,7 @@ class SelectItemState {
         highlighted: this.isHighlighted,
     }));
     onpointerdown(e) {
-        // prevent focus from leaving the combobox
+        // prevent focus from leaving the input/select trigger
         e.preventDefault();
     }
     /**
@@ -718,19 +719,37 @@ class SelectItemState {
         if (e.defaultPrevented || !this.opts.ref.current)
             return;
         // prevent any default behavior
-        e.preventDefault();
         /**
-         * For one reason or another, when it's a touch pointer and _only_ in combobox mode,
-         * we need to listen for the immediate click event to handle the selection, otherwise
-         * a click event will be fired on the element behind the item after the content closes.
+         * For one reason or another, when it's a touch pointer and _not_ on IOS,
+         * we need to listen for the immediate click event to handle the selection,
+         * otherwise a click event will fire on the element _behind_ the item.
          */
-        if (e.pointerType === "touch") {
-            on(this.opts.ref.current, "click", () => this.handleSelect(), { once: true });
+        if (e.pointerType === "touch" && !isIOS) {
+            on(this.opts.ref.current, "click", () => {
+                this.handleSelect();
+                // set highlighted node since we don't do it on `pointermove` events
+                // for touch devices
+                this.root.setHighlightedNode(this.opts.ref.current);
+            }, { once: true });
             return;
         }
+        e.preventDefault();
         this.handleSelect();
+        if (e.pointerType === "touch") {
+            // set highlighted node since we don't do it on `pointermove` events
+            // for touch devices
+            this.root.setHighlightedNode(this.opts.ref.current);
+        }
     }
-    onpointermove(_) {
+    onpointermove(e) {
+        /**
+         * We don't want to highlight items on touch devices when scrolling,
+         * as this is confusing behavior, so we return here and instead handle
+         * the highlighting on the `pointerup` (or following `click`) event for
+         * touch devices only.
+         */
+        if (e.pointerType === "touch")
+            return;
         if (this.root.highlightedNode !== this.opts.ref.current) {
             this.root.setHighlightedNode(this.opts.ref.current);
         }

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

@@ -16,9 +16,9 @@ export class DismissibleLayerState {
         pointerdown: false,
     };
     #isResponsibleLayer = false;
+    #isFocusInsideDOMTree = false;
     node = box(null);
     #documentObj = undefined;
-    #isFocusInsideDOMTree = $state(false);
     #onFocusOutside;
     currNode = $state(null);
     #unsubClickListener = noop;

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.js

@@ -26,7 +26,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
         ref,
         deps: () => enabled.current,
     });
-    let lastFocusedElement = $state(null);
+    let lastFocusedElement = null;
     watch([() => ref.current, () => enabled.current], ([container, enabled]) => {
         if (!container || !enabled)
             return;
@@ -116,7 +116,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     function handleOpen(container, prevFocusedElement) {
         if (!container)
             container = document.getElementById(id.current);
-        if (!container)
+        if (!container || !enabled.current)
             return;
         focusScopeStack.add(focusScope);
         const hasFocusedCandidate = container.contains(prevFocusedElement);

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

@@ -44,7 +44,7 @@
 </script>
 
 <PresenceLayer {id} {present} {...restProps}>
-	{#snippet presence({ present })}
+	{#snippet presence()}
 		<PopperLayerInner
 			{popper}
 			{onEscapeKeydown}
@@ -72,7 +72,7 @@
 			{onPlaced}
 			{customAnchor}
 			{isStatic}
-			enabled={present.current}
+			enabled={present}
 			{onInteractOutside}
 			{onCloseAutoFocus}
 			{onOpenAutoFocus}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/dist/internal/events.d.ts

@@ -16,6 +16,6 @@ export declare class CustomEventDispatcher<T = unknown> {
     constructor(eventName: string, options?: Omit<CustomEventInit<T>, "detail">);
     createEvent(detail?: T): CustomEvent<T>;
     dispatch(element: EventTarget, detail?: T): CustomEvent<T>;
-    listen(element: EventTarget, callback: (event: CustomEvent<T>) => void): () => void;
+    listen(element: EventTarget, callback: (event: CustomEvent<T>) => void, options?: AddEventListenerOptions): () => void;
 }
 export {};

package/dist/internal/events.js

@@ -40,10 +40,10 @@ export class CustomEventDispatcher {
         element.dispatchEvent(event);
         return event;
     }
-    listen(element, callback) {
+    listen(element, callback, options) {
         const handler = (event) => {
             callback(event);
         };
-        return on(element, this.eventName, handler);
+        return on(element, this.eventName, handler, options);
     }
 }

package/dist/internal/previous-with-init.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Getter } from "svelte-toolbelt";
+/**
+ * Holds the previous value of a getter, with the initial value being
+ * the value of the getter when the instance is created, rather than
+ * `undefined`.
+ */
+export declare class PreviousWithInit<T> {
+    #private;
+    constructor(getter: Getter<T>);
+    get current(): T;
+}

package/dist/internal/previous-with-init.svelte.js

@@ -0,0 +1,21 @@
+/**
+ * Holds the previous value of a getter, with the initial value being
+ * the value of the getter when the instance is created, rather than
+ * `undefined`.
+ */
+export class PreviousWithInit {
+    #previous = $state(null);
+    #curr;
+    constructor(getter) {
+        const init = getter();
+        this.#previous = init;
+        this.#curr = init;
+        $effect(() => {
+            this.#previous = this.#curr;
+            this.#curr = getter();
+        });
+    }
+    get current() {
+        return this.#previous;
+    }
+}

package/dist/internal/tabbable.d.ts

@@ -1,3 +1,4 @@
+export declare function getTabbableIn(container: HTMLElement, direction: "next" | "prev"): import("tabbable").FocusableElement | undefined;
 /**
  * Gets all tabbable elements in the body and finds the next/previous tabbable element
  * from the `currentNode` based on the `direction` provided.

package/dist/internal/tabbable.js

@@ -13,7 +13,7 @@ function getTabbableOptions() {
             : "none",
     };
 }
-function getTabbableIn(container, direction) {
+export function getTabbableIn(container, direction) {
     const allTabbable = tabbable(container, getTabbableOptions());
     if (direction === "prev") {
         allTabbable.reverse();

package/dist/internal/use-arrow-navigation.d.ts

@@ -51,7 +51,6 @@ interface ArrowNavigationOptions {
     focus?: boolean;
 }
 /**
- * Allow arrow navigation for every html element with data-radix-vue-collection-item tag
  *
  * @param e               Keyboard event
  * @param currentElement  Event initiator element or any element that wants to handle the navigation

package/dist/internal/use-arrow-navigation.js

@@ -1,6 +1,5 @@
 const ignoredElement = ["INPUT", "TEXTAREA"];
 /**
- * Allow arrow navigation for every html element with data-radix-vue-collection-item tag
  *
  * @param e               Keyboard event
  * @param currentElement  Event initiator element or any element that wants to handle the navigation
@@ -10,8 +9,9 @@ const ignoredElement = ["INPUT", "TEXTAREA"];
  */
 export function useArrowNavigation(e, currentElement, parentElement, options) {
     if (!currentElement ||
-        (options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName)))
+        (options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName))) {
         return null;
+    }
     const { arrowKeyOptions = "both", attributeName, itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false, } = options;
     const [right, left, up, down, home, end] = [
         e.key === "ArrowRight",

package/package.json

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

package/dist/bits/command/command-score.d.ts

@@ -1 +0,0 @@
-export declare function commandScore(string: string, abbreviation: string, aliases?: string[]): number;