bits-ui 1.3.12 → 1.3.14

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -23,6 +23,7 @@
 		// the default menu behavior of handling outside interactions on the trigger
 		onEscapeKeydown = noop,
 		forceMount = false,
+		trapFocus = true,
 		...restProps
 	}: ContextMenuContentProps = $props();
 
@@ -76,7 +77,7 @@
 		onEscapeKeydown={handleEscapeKeydown}
 		{onOpenAutoFocus}
 		{isValidEvent}
-		trapFocus
+		{trapFocus}
 		{loop}
 		{id}
 	>
@@ -109,7 +110,7 @@
 		onEscapeKeydown={handleEscapeKeydown}
 		{onOpenAutoFocus}
 		{isValidEvent}
-		trapFocus
+		{trapFocus}
 		{loop}
 		{id}
 	>

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -25,6 +25,7 @@
 		onOpenAutoFocus: onOpenAutoFocusProp = noop,
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		onFocusOutside = noop,
+		trapFocus = false,
 		...restProps
 	}: MenuSubContentStaticProps = $props();
 
@@ -115,7 +116,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 		isStatic
 	>
 		{#snippet popper({ props })}
@@ -145,7 +146,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 		isStatic
 	>
 		{#snippet popper({ props })}

package/dist/bits/menu/components/menu-sub-content.svelte

@@ -26,6 +26,7 @@
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		onFocusOutside = noop,
 		side = "right",
+		trapFocus = false,
 		...restProps
 	}: MenuSubContentProps = $props();
 
@@ -117,7 +118,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, mergedProps, {
@@ -152,7 +153,7 @@
 		onFocusOutside={handleOnFocusOutside}
 		preventScroll={false}
 		{loop}
-		trapFocus={false}
+		{trapFocus}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, mergedProps, {

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

@@ -4,11 +4,13 @@
 	import { useMenubarMenu } from "../menubar.svelte.js";
 	import Menu from "../../menu/components/menu.svelte";
 	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
-	let { value = useId(), ...restProps }: MenubarMenuProps = $props();
+	let { value = useId(), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
 
 	const menuState = useMenubarMenu({
 		value: box.with(() => value),
+		onOpenChange: box.with(() => onOpenChange),
 	});
 </script>
 

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

@@ -3,7 +3,7 @@ import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsPointerEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
 import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 type MenubarRootStateProps = WithRefProps<ReadableBoxedValues<{
     dir: Direction;
@@ -16,7 +16,7 @@ declare class MenubarRootState {
     rovingFocusGroup: UseRovingFocusReturn;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
-    valueToContentId: Map<string, ReadableBox<string>>;
+    valueToChangeHandler: Map<string, ReadableBox<OnChangeFn<boolean>>>;
     constructor(opts: MenubarRootStateProps);
     /**
      * @param id - the id of the trigger to register
@@ -28,7 +28,8 @@ declare class MenubarRootState {
      * @param contentId - the content id to associate with the value
      * @returns - a function to de-register the menu
      */
-    registerMenu(value: string, contentId: ReadableBox<string>): () => void;
+    registerMenu(value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>): () => void;
+    updateValue(value: string): void;
     getTriggers(): HTMLButtonElement[];
     onMenuOpen(id: string, triggerId: string): void;
     onMenuClose(): void;
@@ -41,6 +42,7 @@ declare class MenubarRootState {
 }
 type MenubarMenuStateProps = ReadableBoxedValues<{
     value: string;
+    onOpenChange: OnChangeFn<boolean>;
 }>;
 declare class MenubarMenuState {
     readonly opts: MenubarMenuStateProps;

package/dist/bits/menubar/menubar.svelte.js

@@ -13,7 +13,7 @@ class MenubarRootState {
     rovingFocusGroup;
     wasOpenedByKeyboard = $state(false);
     triggerIds = $state([]);
-    valueToContentId = new Map();
+    valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
         useRefById(opts);
@@ -43,12 +43,24 @@ class MenubarRootState {
      * @param contentId - the content id to associate with the value
      * @returns - a function to de-register the menu
      */
-    registerMenu(value, contentId) {
-        this.valueToContentId.set(value, contentId);
+    registerMenu(value, onOpenChange) {
+        this.valueToChangeHandler.set(value, onOpenChange);
         return () => {
-            this.valueToContentId.delete(value);
+            this.valueToChangeHandler.delete(value);
         };
     }
+    updateValue(value) {
+        const currValue = this.opts.value.current;
+        const currHandler = this.valueToChangeHandler.get(currValue)?.current;
+        const nextHandler = this.valueToChangeHandler.get(value)?.current;
+        this.opts.value.current = value;
+        if (currHandler && currValue !== value) {
+            currHandler(false);
+        }
+        if (nextHandler) {
+            nextHandler(true);
+        }
+    }
     getTriggers() {
         const node = this.opts.ref.current;
         if (!node)
@@ -56,14 +68,14 @@ class MenubarRootState {
         return Array.from(node.querySelectorAll(`[${MENUBAR_TRIGGER_ATTR}]`));
     }
     onMenuOpen(id, triggerId) {
-        this.opts.value.current = id;
+        this.updateValue(id);
         this.rovingFocusGroup.setCurrentTabStopId(triggerId);
     }
     onMenuClose() {
-        this.opts.value.current = "";
+        this.updateValue("");
     }
     onMenuToggle(id) {
-        this.opts.value.current = this.opts.value.current ? "" : id;
+        this.updateValue(this.opts.value.current ? "" : id);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -87,7 +99,7 @@ class MenubarMenuState {
             }
         });
         onMount(() => {
-            return this.root.registerMenu(this.opts.value.current, box.with(() => this.contentNode?.id ?? ""));
+            return this.root.registerMenu(this.opts.value.current, opts.onOpenChange);
         });
     }
     getTriggerNode() {

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

@@ -29,6 +29,10 @@ export type MenubarMenuPropsWithoutHTML = WithChildren<{
      * within the menubar.
      */
     value?: string;
+    /**
+     * A callback that is called when the menu is opened or closed.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
 }>;
 export type MenubarMenuProps = MenubarMenuPropsWithoutHTML;
 export type MenubarTriggerPropsWithoutHTML = WithChild<{

package/package.json

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

package/dist/internal/dev/visualize-grace-area.d.ts

@@ -1,5 +0,0 @@
-import type { Polygon } from "../polygon.js";
-/**
- * Debugging utility to visualize the grace area of a floating layer component.
- */
-export declare function visualizeGraceArea(graceArea: Polygon): void;

package/dist/internal/dev/visualize-grace-area.js

@@ -1,28 +0,0 @@
-let graceAreaElement = null;
-let svgContainer = null;
-/**
- * Debugging utility to visualize the grace area of a floating layer component.
- */
-export function visualizeGraceArea(graceArea) {
-    if (graceAreaElement) {
-        graceAreaElement.remove();
-    }
-    if (!svgContainer) {
-        svgContainer = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgContainer.style.position = "absolute";
-        svgContainer.style.top = "0";
-        svgContainer.style.left = "0";
-        svgContainer.style.width = "100%";
-        svgContainer.style.height = "100%";
-        svgContainer.style.pointerEvents = "none";
-        document.body.appendChild(svgContainer);
-    }
-    graceAreaElement = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
-    const pointsString = graceArea.map((p) => `${p.x},${p.y}`).join(" ");
-    graceAreaElement.setAttribute("points", pointsString);
-    graceAreaElement.setAttribute("fill", "rgba(255, 0, 0, 0.3)");
-    graceAreaElement.setAttribute("stroke", "red");
-    graceAreaElement.setAttribute("stroke-width", "1");
-    graceAreaElement.style.pointerEvents = "none";
-    svgContainer.appendChild(graceAreaElement);
-}

package/dist/internal/polygon.d.ts

@@ -1,10 +0,0 @@
-export interface Point {
-    x: number;
-    y: number;
-}
-export type Polygon = Array<Point>;
-export declare function makeHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P>;
-export declare function POINT_COMPARATOR(a: Point, b: Point): number;
-export declare function makeHullFromElements(els: Array<HTMLElement>): Array<Point>;
-export declare function pointInPolygon(point: Point, polygon: Polygon): boolean;
-export declare function isPointerInGraceArea(e: Pick<PointerEvent, "clientX" | "clientY">, area?: Polygon): boolean;

package/dist/internal/polygon.js

@@ -1,115 +0,0 @@
-/*
- * Convex hull algorithm - Library (TypeScript)
- *
- * Copyright (c) 2021 Project Nayuki
- * https://www.nayuki.io/page/convex-hull-algorithm
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program (see COPYING.txt and COPYING.LESSER.txt).
- * If not, see <http://www.gnu.org/licenses/>.
- */
-// Returns a new array of points representing the convex hull of
-// the given set of points. The convex hull excludes collinear points.
-// This algorithm runs in O(n log n) time.
-function makeHull(points) {
-    const newPoints = points.slice();
-    newPoints.sort(POINT_COMPARATOR);
-    return makeHullPresorted(newPoints);
-}
-// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.
-export function makeHullPresorted(points) {
-    if (points.length <= 1)
-        return points.slice();
-    // Andrew's monotone chain algorithm. Positive y coordinates correspond to "up"
-    // as per the mathematical convention, instead of "down" as per the computer
-    // graphics convention. This doesn't affect the correctness of the result.
-    const upperHull = [];
-    for (let i = 0; i < points.length; i++) {
-        const p = points[i];
-        while (upperHull.length >= 2) {
-            const q = upperHull[upperHull.length - 1];
-            const r = upperHull[upperHull.length - 2];
-            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
-                upperHull.pop();
-            else
-                break;
-        }
-        upperHull.push(p);
-    }
-    upperHull.pop();
-    const lowerHull = [];
-    for (let i = points.length - 1; i >= 0; i--) {
-        const p = points[i];
-        while (lowerHull.length >= 2) {
-            const q = lowerHull[lowerHull.length - 1];
-            const r = lowerHull[lowerHull.length - 2];
-            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
-                lowerHull.pop();
-            else
-                break;
-        }
-        lowerHull.push(p);
-    }
-    lowerHull.pop();
-    if (upperHull.length === 1 &&
-        lowerHull.length === 1 &&
-        upperHull[0].x === lowerHull[0].x &&
-        upperHull[0].y === lowerHull[0].y)
-        return upperHull;
-    else
-        return upperHull.concat(lowerHull);
-}
-export function POINT_COMPARATOR(a, b) {
-    if (a.x < b.x)
-        return -1;
-    else if (a.x > b.x)
-        return +1;
-    else if (a.y < b.y)
-        return -1;
-    else if (a.y > b.y)
-        return +1;
-    else
-        return 0;
-}
-function getPointsFromEl(el) {
-    const rect = el.getBoundingClientRect();
-    return [
-        { x: rect.left, y: rect.top },
-        { x: rect.right, y: rect.top },
-        { x: rect.right, y: rect.bottom },
-        { x: rect.left, y: rect.bottom },
-    ];
-}
-export function makeHullFromElements(els) {
-    const points = els.flatMap((el) => getPointsFromEl(el));
-    return makeHull(points);
-}
-export function pointInPolygon(point, polygon) {
-    let inside = false;
-    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-        const xi = polygon[i].x;
-        const yi = polygon[i].y;
-        const xj = polygon[j].x;
-        const yj = polygon[j].y;
-        const intersect = yi > point.y !== yj > point.y &&
-            point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
-        if (intersect)
-            inside = !inside;
-    }
-    return inside;
-}
-export function isPointerInGraceArea(e, area) {
-    if (!area)
-        return false;
-    return pointInPolygon({ x: e.clientX, y: e.clientY }, area);
-}