bits-ui 1.8.0 → 2.2.0

package/dist/bits/link-preview/link-preview.svelte.js

@@ -1,4 +1,4 @@
-import { afterSleep, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { afterSleep, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
@@ -17,6 +17,7 @@ class LinkPreviewRootState {
     contentMounted = $state(false);
     triggerNode = $state(null);
     isOpening = false;
+    domContext = new DOMContext(() => null);
     constructor(opts) {
         this.opts = opts;
         watch(() => this.opts.open.current, (isOpen) => {
@@ -24,11 +25,13 @@ class LinkPreviewRootState {
                 this.hasSelection = false;
                 return;
             }
+            if (!this.domContext)
+                return;
             const handlePointerUp = () => {
                 this.containsSelection = false;
                 this.isPointerDownOnContent = false;
                 afterSleep(1, () => {
-                    const isSelection = document.getSelection()?.toString() !== "";
+                    const isSelection = this.domContext.getDocument().getSelection()?.toString() !== "";
                     if (isSelection) {
                         this.hasSelection = true;
                     }
@@ -37,7 +40,7 @@ class LinkPreviewRootState {
                     }
                 });
             };
-            const unsubListener = on(document, "pointerup", handlePointerUp);
+            const unsubListener = on(this.domContext.getDocument(), "pointerup", handlePointerUp);
             if (!this.contentNode)
                 return;
             const tabCandidates = getTabbableCandidates(this.contentNode);
@@ -53,7 +56,7 @@ class LinkPreviewRootState {
     }
     clearTimeout() {
         if (this.timeout) {
-            window.clearTimeout(this.timeout);
+            this.domContext.clearTimeout(this.timeout);
             this.timeout = null;
         }
     }
@@ -62,7 +65,7 @@ class LinkPreviewRootState {
         if (this.opts.open.current)
             return;
         this.isOpening = true;
-        this.timeout = window.setTimeout(() => {
+        this.timeout = this.domContext.setTimeout(() => {
             if (this.isOpening) {
                 this.opts.open.current = true;
                 this.isOpening = false;
@@ -78,7 +81,7 @@ class LinkPreviewRootState {
         this.isOpening = false;
         this.clearTimeout();
         if (!this.isPointerDownOnContent && !this.hasSelection) {
-            this.timeout = window.setTimeout(() => {
+            this.timeout = this.domContext.setTimeout(() => {
                 this.opts.open.current = false;
             }, this.opts.closeDelay.current);
         }
@@ -90,16 +93,11 @@ class LinkPreviewTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.domContext = new DOMContext(opts.ref);
         this.onpointerenter = this.onpointerenter.bind(this);
         this.onpointerleave = this.onpointerleave.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.onblur = this.onblur.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
     }
     onpointerenter(e) {
         if (isTouch(e))
@@ -133,6 +131,7 @@ class LinkPreviewTriggerState {
         onfocus: this.onfocus,
         onblur: this.onblur,
         onpointerleave: this.onpointerleave,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class LinkPreviewContentState {
@@ -141,16 +140,10 @@ class LinkPreviewContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.domContext = new DOMContext(opts.ref);
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointerenter = this.onpointerenter.bind(this);
         this.onfocusout = this.onfocusout.bind(this);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-            deps: () => this.root.opts.open.current,
-        });
         useGraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.opts.ref.current,
@@ -208,6 +201,7 @@ class LinkPreviewContentState {
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,
         onfocusout: this.onfocusout,
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,

package/dist/bits/menu/components/menu-checkbox-group.svelte

@@ -3,10 +3,12 @@
 	import type { MenuCheckboxGroupProps } from "../types.js";
 	import { useMenuCheckboxGroup } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuCheckboxItemProps } from "../types.js";
 	import { MenuCheckboxGroupContext, useMenuCheckboxItem } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
 		checked = $bindable(false),
-		id = useId(),
+		id = createId(uid),
 		onCheckedChange = noop,
 		disabled = false,
 		onSelect = noop,
@@ -84,9 +86,9 @@
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, ...checkboxItemState.snippetProps })}
+	{@render child({ checked, indeterminate, props: mergedProps })}
 {:else}
 	<div {...mergedProps}>
-		{@render children?.(checkboxItemState.snippetProps)}
+		{@render children?.({ checked, indeterminate })}
 	</div>
 {/if}

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

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -55,6 +56,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -78,13 +80,13 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -108,7 +110,6 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuContentProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -55,6 +56,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -79,13 +81,13 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -110,7 +112,6 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

package/dist/bits/menu/components/menu-group-heading.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuGroupHeadingProps } from "../types.js";
 	import { useMenuGroupHeading } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: MenuGroupHeadingProps = $props();
 

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuGroupProps } from "../types.js";
 	import { useMenuGroup } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: MenuGroupProps = $props();
 

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

@@ -2,14 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuItemProps } from "../types.js";
 	import { useMenuItem } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		onSelect = noop,
 		closeOnSelect = true,

package/dist/bits/menu/components/menu-radio-group.svelte

@@ -3,10 +3,12 @@
 	import type { MenuRadioGroupProps } from "../types.js";
 	import { useMenuRadioGroup } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),

package/dist/bits/menu/components/menu-radio-item.svelte

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuRadioItemProps } from "../types.js";
 	import { useMenuRadioItem } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
 		ref = $bindable(null),
 		value,
 		onSelect = noop,
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		closeOnSelect = true,
 		...restProps

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

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuSeparatorProps } from "../types.js";
 	import { useMenuSeparator } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		...restProps

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

@@ -3,16 +3,17 @@
 	import type { MenuSubContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { isHTMLElement } from "../../../internal/is.js";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,
@@ -107,6 +108,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onOpenAutoFocus={handleOpenAutoFocus}
@@ -130,12 +132,12 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onCloseAutoFocus={handleCloseAutoFocus}
@@ -160,7 +162,6 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -3,16 +3,17 @@
 	import type { MenuSubContentProps } from "../types.js";
 	import { MenuOpenEvent, useMenuContent } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { isHTMLElement } from "../../../internal/is.js";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,
@@ -109,6 +110,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onOpenAutoFocus={handleOpenAutoFocus}
@@ -137,12 +139,12 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		ref={subContentState.opts.ref}
 		{interactOutsideBehavior}
 		{escapeKeydownBehavior}
 		onCloseAutoFocus={handleCloseAutoFocus}
@@ -172,7 +174,6 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={subContentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

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

@@ -2,11 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubTriggerProps } from "../types.js";
 	import { useMenuSubTrigger } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		disabled = false,
 		ref = $bindable(null),
 		children,
@@ -28,7 +31,7 @@
 	const mergedProps = $derived(mergeProps(restProps, subTriggerState.props));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={subTriggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuTriggerProps } from "../types.js";
 	import { useMenuDropdownTrigger } from "../menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,
@@ -27,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
@@ -5,6 +6,7 @@ import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPoin
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
 import { IsUsingKeyboard } from "../../index.js";
+import type { KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
 export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
 type MenuVariant = "context-menu" | "dropdown-menu" | "menubar";
@@ -51,6 +53,7 @@ declare class MenuContentState {
     search: string;
     rovingFocusGroup: ReturnType<typeof useRovingFocus>;
     mounted: boolean;
+    domContext: DOMContext;
     constructor(opts: MenuContentStateProps, parentMenu: MenuMenuState);
     onCloseAutoFocus: (e: Event) => void;
     handleTabKeyDown(e: BitsKeyboardEvent): void;
@@ -66,9 +69,6 @@ declare class MenuContentState {
         open: boolean;
     };
     props: {
-        readonly [x: string]: string | ((e: BitsKeyboardEvent) => void) | ((e: BitsFocusEvent) => void) | {
-            readonly pointerEvents: "auto";
-        };
         readonly id: string;
         readonly role: "menu";
         readonly "aria-orientation": "horizontal" | "vertical";
@@ -98,7 +98,6 @@ declare class MenuItemSharedState {
     onfocus(e: BitsFocusEvent): void;
     onblur(e: BitsFocusEvent): void;
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -126,7 +125,6 @@ declare class MenuItemState {
     onpointerup(e: BitsPointerEvent): void;
     onpointerdown(_: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -158,7 +156,6 @@ declare class MenuSubTriggerState {
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(e: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -170,7 +167,6 @@ declare class MenuSubTriggerState {
         readonly onfocus: (e: BitsFocusEvent) => void;
         readonly onblur: (e: BitsFocusEvent) => void;
     } & {
-        [x: string]: string | ((e: BitsPointerEvent) => void) | ((e: BitsKeyboardEvent) => void) | undefined;
         "aria-haspopup": string;
         "aria-expanded": "true" | "false";
         "data-state": "open" | "closed";
@@ -200,7 +196,6 @@ declare class MenuCheckboxItemState {
         indeterminate: boolean;
     };
     props: {
-        readonly [x: string]: string | -1 | ((e: BitsPointerEvent) => void) | undefined;
         readonly role: "menuitemcheckbox";
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
@@ -227,7 +222,6 @@ declare class MenuGroupState {
     groupHeadingId: string | undefined;
     constructor(opts: MenuGroupStateProps, root: MenuRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -239,7 +233,6 @@ declare class MenuGroupHeadingState {
     readonly group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState;
     constructor(opts: MenuGroupHeadingStateProps, group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState);
     props: {
-        readonly [x: string]: string;
         readonly id: string;
         readonly role: "group";
     };
@@ -250,7 +243,6 @@ declare class MenuSeparatorState {
     readonly root: MenuRootState;
     constructor(opts: MenuSeparatorStateProps, root: MenuRootState);
     props: {
-        readonly [x: string]: string;
         readonly id: string;
         readonly role: "group";
     };
@@ -273,7 +265,6 @@ declare class MenuRadioGroupState {
     constructor(opts: MenuRadioGroupStateProps, content: MenuContentState);
     setValue(v: string): void;
     props: {
-        readonly [x: string]: string | null;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | null;
@@ -318,11 +309,10 @@ declare class DropdownMenuTriggerState {
     readonly opts: DropdownMenuTriggerStateProps;
     readonly parentMenu: MenuMenuState;
     constructor(opts: DropdownMenuTriggerStateProps, parentMenu: MenuMenuState);
-    onpointerdown(e: BitsPointerEvent): void;
-    onpointerup(e: BitsPointerEvent): void;
-    onkeydown(e: BitsKeyboardEvent): void;
+    onpointerdown: PointerEventHandler<HTMLElement>;
+    onpointerup: PointerEventHandler<HTMLElement>;
+    onkeydown: KeyboardEventHandler<HTMLElement>;
     props: {
-        readonly [x: string]: string | boolean | ((e: BitsPointerEvent) => void) | ((e: BitsKeyboardEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: boolean;
         readonly "aria-haspopup": "menu";
@@ -330,9 +320,9 @@ declare class DropdownMenuTriggerState {
         readonly "aria-controls": string | undefined;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
-        readonly onpointerup: (e: BitsPointerEvent) => void;
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onpointerdown: PointerEventHandler<HTMLElement>;
+        readonly onpointerup: PointerEventHandler<HTMLElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLElement>;
     };
 }
 type ContextMenuTriggerStateProps = WithRefProps & ReadableBoxedValues<{
@@ -379,7 +369,6 @@ declare class MenuCheckboxGroupState {
     addValue(checkboxValue: string | undefined): void;
     removeValue(checkboxValue: string | undefined): void;
     props: {
-        readonly [x: string]: string | null;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | null;