bits-ui 2.6.2 → 2.8.0

package/dist/bits/menu/menu.svelte.js

@@ -3,17 +3,18 @@ import { Context, watch } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
-import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/is.js";
-import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { IsUsingKeyboard } from "../../index.js";
-import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
 import { FocusScopeContext } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import { isTabbable } from "tabbable";
 import { untrack } from "svelte";
+import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+import { GraceArea } from "../../internal/grace-area.svelte.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const MenuRootContext = new Context("Menu.Root");
 const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
@@ -43,7 +44,16 @@ export const menuAttrs = createBitsAttrs({
         "arrow",
     ],
 });
-class MenuRootState {
+export class MenuRootState {
+    static create(opts) {
+        const root = new MenuRootState(opts);
+        FocusScopeContext.set({
+            get ignoreCloseAutoFocus() {
+                return root.ignoreCloseAutoFocus;
+            },
+        });
+        return MenuRootContext.set(root);
+    }
     opts;
     isUsingKeyboard = new IsUsingKeyboard();
     ignoreCloseAutoFocus = $state(false);
@@ -55,7 +65,10 @@ class MenuRootState {
         return menuAttrs.getAttr(part, this.opts.variant.current);
     };
 }
-class MenuMenuState {
+export class MenuMenuState {
+    static create(opts, root) {
+        return MenuMenuContext.set(new MenuMenuState(opts, root, null));
+    }
     opts;
     root;
     parentMenu;
@@ -66,6 +79,13 @@ class MenuMenuState {
         this.opts = opts;
         this.root = root;
         this.parentMenu = parentMenu;
+        new OpenChangeComplete({
+            ref: box.with(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
         if (parentMenu) {
             watch(() => parentMenu.opts.open.current, () => {
                 if (parentMenu.opts.open.current)
@@ -84,16 +104,19 @@ class MenuMenuState {
         this.opts.open.current = false;
     }
 }
-class MenuContentState {
+export class MenuContentState {
+    static create(opts) {
+        return MenuContentContext.set(new MenuContentState(opts, MenuMenuContext.get()));
+    }
     opts;
     parentMenu;
+    rovingFocusGroup;
+    domContext;
     search = $state("");
     #timer = 0;
     #handleTypeaheadSearch;
-    rovingFocusGroup;
     mounted = $state(false);
     #isSub;
-    domContext;
     constructor(opts, parentMenu) {
         this.opts = opts;
         this.parentMenu = parentMenu;
@@ -104,7 +127,7 @@ class MenuContentState {
         this.onblur = this.onblur.bind(this);
         this.onfocus = this.onfocus.bind(this);
         this.handleInteractOutside = this.handleInteractOutside.bind(this);
-        useGraceArea({
+        new GraceArea({
             contentNode: () => this.parentMenu.contentNode,
             triggerNode: () => this.parentMenu.triggerNode,
             enabled: () => this.parentMenu.opts.open.current &&
@@ -116,11 +139,11 @@ class MenuContentState {
                 this.parentMenu.root.isPointerInTransit = value;
             },
         });
-        this.#handleTypeaheadSearch = useDOMTypeahead({
+        this.#handleTypeaheadSearch = new DOMTypeahead({
             getActiveElement: () => this.domContext.getActiveElement(),
             getWindow: () => this.domContext.getWindow(),
         }).handleTypeaheadSearch;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: box.with(() => this.parentMenu.contentNode),
             candidateAttr: this.parentMenu.root.getBitsAttr("item"),
             loop: this.opts.loop,
@@ -383,11 +406,15 @@ class MenuItemSharedState {
         ...attachRef(this.opts.ref),
     }));
 }
-class MenuItemState {
+export class MenuItemState {
+    static create(opts) {
+        const item = new MenuItemSharedState(opts, MenuContentContext.get());
+        return new MenuItemState(opts, item);
+    }
     opts;
     item;
-    #isPointerDown = false;
     root;
+    #isPointerDown = false;
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
@@ -453,7 +480,13 @@ class MenuItemState {
         onkeydown: this.onkeydown,
     }));
 }
-class MenuSubTriggerState {
+export class MenuSubTriggerState {
+    static create(opts) {
+        const content = MenuContentContext.get();
+        const item = new MenuItemSharedState(opts, content);
+        const submenu = MenuMenuContext.get();
+        return new MenuSubTriggerState(opts, item, content, submenu);
+    }
     opts;
     item;
     content;
@@ -546,7 +579,11 @@ class MenuSubTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v)),
     }, this.item.props));
 }
-class MenuCheckboxItemState {
+export class MenuCheckboxItemState {
+    static create(opts, checkboxGroup) {
+        const item = new MenuItemState(opts, new MenuItemSharedState(opts, MenuContentContext.get()));
+        return new MenuCheckboxItemState(opts, item, checkboxGroup);
+    }
     opts;
     item;
     group;
@@ -591,7 +628,10 @@ class MenuCheckboxItemState {
         [this.item.root.getBitsAttr("checkbox-item")]: "",
     }));
 }
-class MenuGroupState {
+export class MenuGroupState {
+    static create(opts) {
+        return MenuGroupContext.set(new MenuGroupState(opts, MenuRootContext.get()));
+    }
     opts;
     root;
     groupHeadingId = $state(undefined);
@@ -607,7 +647,17 @@ class MenuGroupState {
         ...attachRef(this.opts.ref),
     }));
 }
-class MenuGroupHeadingState {
+export class MenuGroupHeadingState {
+    static create(opts) {
+        // Try to get checkbox group first, then radio group, then regular group
+        const checkboxGroup = MenuCheckboxGroupContext.getOr(null);
+        if (checkboxGroup)
+            return new MenuGroupHeadingState(opts, checkboxGroup);
+        const radioGroup = MenuRadioGroupContext.getOr(null);
+        if (radioGroup)
+            return new MenuGroupHeadingState(opts, radioGroup);
+        return new MenuGroupHeadingState(opts, MenuGroupContext.get());
+    }
     opts;
     group;
     constructor(opts, group) {
@@ -621,7 +671,10 @@ class MenuGroupHeadingState {
         ...attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id)),
     }));
 }
-class MenuSeparatorState {
+export class MenuSeparatorState {
+    static create(opts) {
+        return new MenuSeparatorState(opts, MenuRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -635,7 +688,10 @@ class MenuSeparatorState {
         ...attachRef(this.opts.ref),
     }));
 }
-class MenuArrowState {
+export class MenuArrowState {
+    static create() {
+        return new MenuArrowState(MenuRootContext.get());
+    }
     root;
     constructor(root) {
         this.root = root;
@@ -644,7 +700,10 @@ class MenuArrowState {
         [this.root.getBitsAttr("arrow")]: "",
     }));
 }
-class MenuRadioGroupState {
+export class MenuRadioGroupState {
+    static create(opts) {
+        return MenuGroupContext.set(MenuRadioGroupContext.set(new MenuRadioGroupState(opts, MenuContentContext.get())));
+    }
     opts;
     content;
     groupHeadingId = $state(null);
@@ -665,7 +724,13 @@ class MenuRadioGroupState {
         ...attachRef(this.opts.ref),
     }));
 }
-class MenuRadioItemState {
+export class MenuRadioItemState {
+    static create(opts) {
+        const radioGroup = MenuRadioGroupContext.get();
+        const sharedItem = new MenuItemSharedState(opts, radioGroup.content);
+        const item = new MenuItemState(opts, sharedItem);
+        return new MenuRadioItemState(opts, item, radioGroup);
+    }
     opts;
     item;
     group;
@@ -687,7 +752,10 @@ class MenuRadioItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-class DropdownMenuTriggerState {
+export class DropdownMenuTriggerState {
+    static create(opts) {
+        return new DropdownMenuTriggerState(opts, MenuMenuContext.get());
+    }
     opts;
     parentMenu;
     constructor(opts, parentMenu) {
@@ -749,7 +817,10 @@ class DropdownMenuTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
     }));
 }
-class ContextMenuTriggerState {
+export class ContextMenuTriggerState {
+    static create(opts) {
+        return new ContextMenuTriggerState(opts, MenuMenuContext.get());
+    }
     opts;
     parentMenu;
     #point = $state({ x: 0, y: 0 });
@@ -770,8 +841,8 @@ class ContextMenuTriggerState {
                 getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...point }),
             };
         });
-        $effect(() => {
-            if (this.opts.disabled.current) {
+        watch(() => this.opts.disabled.current, (isDisabled) => {
+            if (isDisabled) {
                 this.#clearLongPressTimer();
             }
         });
@@ -831,11 +902,14 @@ class ContextMenuTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v)),
     }));
 }
-class MenuCheckboxGroupState {
+export class MenuCheckboxGroupState {
+    static create(opts) {
+        return MenuCheckboxGroupContext.set(new MenuCheckboxGroupState(opts, MenuContentContext.get()));
+    }
     opts;
     content;
-    groupHeadingId = $state(null);
     root;
+    groupHeadingId = $state(null);
     constructor(opts, content) {
         this.opts = opts;
         this.content = content;
@@ -868,73 +942,9 @@ class MenuCheckboxGroupState {
         ...attachRef(this.opts.ref),
     }));
 }
-export function useMenuRoot(props) {
-    const root = new MenuRootState(props);
-    FocusScopeContext.set({
-        get ignoreCloseAutoFocus() {
-            return root.ignoreCloseAutoFocus;
-        },
-    });
-    return MenuRootContext.set(root);
-}
-export function useMenuMenu(root, props) {
-    return MenuMenuContext.set(new MenuMenuState(props, root, null));
-}
-export function useMenuSubmenu(props) {
-    const menu = MenuMenuContext.get();
-    return MenuMenuContext.set(new MenuMenuState(props, menu.root, menu));
-}
-export function useMenuSubTrigger(props) {
-    const content = MenuContentContext.get();
-    const item = new MenuItemSharedState(props, content);
-    const submenu = MenuMenuContext.get();
-    return new MenuSubTriggerState(props, item, content, submenu);
-}
-export function useMenuDropdownTrigger(props) {
-    return new DropdownMenuTriggerState(props, MenuMenuContext.get());
-}
-export function useMenuContextTrigger(props) {
-    return new ContextMenuTriggerState(props, MenuMenuContext.get());
-}
-export function useMenuContent(props) {
-    return MenuContentContext.set(new MenuContentState(props, MenuMenuContext.get()));
-}
-export function useMenuItem(props) {
-    const item = new MenuItemSharedState(props, MenuContentContext.get());
-    return new MenuItemState(props, item);
-}
-export function useMenuCheckboxItem(props, checkboxGroup) {
-    const item = new MenuItemState(props, new MenuItemSharedState(props, MenuContentContext.get()));
-    return new MenuCheckboxItemState(props, item, checkboxGroup);
-}
-export function useMenuRadioGroup(props) {
-    return MenuGroupContext.set(MenuRadioGroupContext.set(new MenuRadioGroupState(props, MenuContentContext.get())));
-}
-export function useMenuRadioItem(props) {
-    const radioGroup = MenuRadioGroupContext.get();
-    const sharedItem = new MenuItemSharedState(props, radioGroup.content);
-    const item = new MenuItemState(props, sharedItem);
-    return new MenuRadioItemState(props, item, radioGroup);
-}
-export function useMenuGroup(props) {
-    return MenuGroupContext.set(new MenuGroupState(props, MenuRootContext.get()));
-}
-export function useMenuGroupHeading(props) {
-    // Try to get checkbox group first, then radio group, then regular group
-    const checkboxGroup = MenuCheckboxGroupContext.getOr(null);
-    if (checkboxGroup)
-        return new MenuGroupHeadingState(props, checkboxGroup);
-    const radioGroup = MenuRadioGroupContext.getOr(null);
-    if (radioGroup)
-        return new MenuGroupHeadingState(props, radioGroup);
-    return new MenuGroupHeadingState(props, MenuGroupContext.get());
-}
-export function useMenuSeparator(props) {
-    return new MenuSeparatorState(props, MenuRootContext.get());
-}
-export function useMenuArrow() {
-    return new MenuArrowState(MenuRootContext.get());
-}
-export function useMenuCheckboxGroup(props) {
-    return MenuCheckboxGroupContext.set(new MenuCheckboxGroupState(props, MenuContentContext.get()));
+export class MenuSubmenuState {
+    static create(opts) {
+        const menu = MenuMenuContext.get();
+        return MenuMenuContext.set(new MenuMenuState(opts, menu.root, menu));
+    }
 }

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

@@ -15,6 +15,10 @@ export type MenuRootPropsWithoutHTML = WithChildren<{
      * A callback that is called when the menu is opened or closed.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that is called when the menu is opened or closed.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
     /**
      * The direction of the site.
      *
@@ -135,6 +139,10 @@ export type MenuSubPropsWithoutHTML = WithChildren<{
      * A callback that is called when the menu is opened or closed.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that is called when the menu finishes opening/closing animations.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
 }>;
 export type MenuSubProps = MenuSubPropsWithoutHTML;
 export type MenuSubContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "preventScroll"> & _SharedMenuContentProps, FloatingContentSnippetProps>>;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarContentStaticProps } from "../types.js";
-	import { useMenubarContent } from "../menubar.svelte.js";
+	import { MenubarContentState } from "../menubar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import MenuContentStatic from "../../menu/components/menu-content-static.svelte";
 	import { noop } from "../../../internal/noop.js";
@@ -19,7 +19,7 @@
 		...restProps
 	}: MenubarContentStaticProps = $props();
 
-	const contentState = useMenubarContent({
+	const contentState = MenubarContentState.create({
 		id: box.with(() => id),
 		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
 		ref: box.with(

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarContentProps } from "../types.js";
-	import { useMenubarContent } from "../menubar.svelte.js";
+	import { MenubarContentState } from "../menubar.svelte.js";
 	import MenuContent from "../../menu/components/menu-content.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -19,7 +19,7 @@
 		...restProps
 	}: MenubarContentProps = $props();
 
-	const contentState = useMenubarContent({
+	const contentState = MenubarContentState.create({
 		id: box.with(() => id),
 		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
 		ref: box.with(

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { MenubarMenuProps } from "../types.js";
-	import { useMenubarMenu } from "../menubar.svelte.js";
+	import { MenubarMenuState } from "../menubar.svelte.js";
 	import Menu from "../../menu/components/menu.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -10,7 +10,7 @@
 
 	let { value = createId(uid), onOpenChange = noop, ...restProps }: MenubarMenuProps = $props();
 
-	const menuState = useMenubarMenu({
+	const menuState = MenubarMenuState.create({
 		value: box.with(() => value),
 		onOpenChange: box.with(() => onOpenChange),
 	});

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { attachRef, box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarTriggerProps } from "../types.js";
-	import { useMenubarTrigger } from "../menubar.svelte.js";
+	import { MenubarTriggerState } from "../menubar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
-	import { useMenuDropdownTrigger } from "../../menu/menu.svelte.js";
+	import { DropdownMenuTriggerState } from "../../menu/menu.svelte.js";
 
 	const uid = $props.id();
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: MenubarTriggerProps = $props();
 
-	const triggerState = useMenubarTrigger({
+	const triggerState = MenubarTriggerState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled ?? false),
 		ref: box.with(
@@ -26,7 +26,7 @@
 		),
 	});
 
-	const dropdownTriggerState = useMenuDropdownTrigger(triggerState.opts);
+	const dropdownTriggerState = DropdownMenuTriggerState.create(triggerState.opts);
 
 	const mergedProps = $derived(
 		mergeProps(restProps, triggerState.props, {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenubarRootProps } from "../types.js";
-	import { useMenubarRoot } from "../menubar.svelte.js";
+	import { MenubarRootState } from "../menubar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -19,7 +19,7 @@
 		...restProps
 	}: MenubarRootProps = $props();
 
-	const rootState = useMenubarRoot({
+	const rootState = MenubarRootState.create({
 		id: box.with(() => id),
 		value: box.with(
 			() => value,

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

@@ -1,24 +1,25 @@
-import { type ReadableBox } from "svelte-toolbelt";
+import { type ReadableBox, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { InteractOutsideBehaviorType } from "../utilities/dismissible-layer/types.js";
-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 { OnChangeFn, WithRefProps } from "../../internal/types.js";
+import type { OnChangeFn, WithRefOpts } from "../../internal/types.js";
 import { type FocusScopeContextValue } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
-type MenubarRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+interface MenubarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     dir: Direction;
     loop: boolean;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: string;
-}>>;
-declare class MenubarRootState {
-    readonly opts: MenubarRootStateProps;
-    rovingFocusGroup: UseRovingFocusReturn;
+}> {
+}
+export declare class MenubarRootState {
+    static create(opts: MenubarRootStateOpts): MenubarRootState;
+    readonly opts: MenubarRootStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
     wasOpenedByKeyboard: boolean;
     triggerIds: string[];
     valueToChangeHandler: Map<string, ReadableBox<OnChangeFn<boolean>>>;
-    constructor(opts: MenubarRootStateProps);
+    constructor(opts: MenubarRootStateOpts);
     /**
      * @param id - the id of the trigger to register
      * @returns - a function to de-register the trigger
@@ -35,17 +36,19 @@ declare class MenubarRootState {
     onMenuOpen: (id: string, triggerId: string) => void;
     onMenuClose: () => void;
     onMenuToggle: (id: string) => void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "menubar";
     };
 }
-type MenubarMenuStateProps = ReadableBoxedValues<{
+interface MenubarMenuStateOpts extends ReadableBoxedValues<{
     value: string;
     onOpenChange: OnChangeFn<boolean>;
-}>;
-declare class MenubarMenuState {
-    readonly opts: MenubarMenuStateProps;
+}> {
+}
+export declare class MenubarMenuState {
+    static create(opts: MenubarMenuStateOpts): MenubarMenuState;
+    readonly opts: MenubarMenuStateOpts;
     readonly root: MenubarRootState;
     open: boolean;
     wasOpenedByKeyboard: boolean;
@@ -53,27 +56,29 @@ declare class MenubarMenuState {
     triggerId: string | undefined;
     contentId: string | undefined;
     contentNode: HTMLElement | null;
-    constructor(opts: MenubarMenuStateProps, root: MenubarRootState);
+    constructor(opts: MenubarMenuStateOpts, root: MenubarRootState);
     getTriggerNode(): HTMLElement | null;
     toggleMenu(): void;
     openMenu(): void;
 }
-type MenubarTriggerStateProps = WithRefProps<ReadableBoxedValues<{
+interface MenubarTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>>;
-declare class MenubarTriggerState {
+}> {
+}
+export declare class MenubarTriggerState {
     #private;
-    readonly opts: MenubarTriggerStateProps;
+    static create(opts: MenubarTriggerStateOpts): MenubarTriggerState;
+    readonly opts: MenubarTriggerStateOpts;
     readonly menu: MenubarMenuState;
-    root: MenubarRootState;
+    readonly root: MenubarRootState;
     isFocused: boolean;
-    constructor(opts: MenubarTriggerStateProps, menu: MenubarMenuState);
+    constructor(opts: MenubarTriggerStateOpts, menu: MenubarMenuState);
     onpointerdown: PointerEventHandler<HTMLElement>;
     onpointerenter: PointerEventHandler<HTMLElement>;
     onkeydown: KeyboardEventHandler<HTMLElement>;
     onfocus: FocusEventHandler<HTMLElement>;
     onblur: FocusEventHandler<HTMLElement>;
-    props: {
+    readonly props: {
         readonly type: "button";
         readonly role: "menuitem";
         readonly id: string;
@@ -93,19 +98,21 @@ declare class MenubarTriggerState {
         readonly onblur: FocusEventHandler<HTMLElement>;
     };
 }
-type MenubarContentStateProps = WithRefProps<ReadableBoxedValues<{
+interface MenubarContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     interactOutsideBehavior: InteractOutsideBehaviorType;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
     onFocusOutside: (e: FocusEvent) => void;
     onInteractOutside: (e: PointerEvent) => void;
-}>>;
-declare class MenubarContentState {
-    readonly opts: MenubarContentStateProps;
+}> {
+}
+export declare class MenubarContentState {
+    static create(opts: MenubarContentStateOpts): MenubarContentState;
+    readonly opts: MenubarContentStateOpts;
     readonly menu: MenubarMenuState;
-    root: MenubarRootState;
+    readonly root: MenubarRootState;
     focusScopeContext: FocusScopeContextValue;
-    constructor(opts: MenubarContentStateProps, menu: MenubarMenuState);
+    constructor(opts: MenubarContentStateOpts, menu: MenubarMenuState);
     onCloseAutoFocus: (e: Event) => void;
     onFocusOutside: (e: FocusEvent) => void;
     onInteractOutside: (e: PointerEvent) => void;
@@ -127,8 +134,4 @@ declare class MenubarContentState {
         onOpenAutoFocus: (e: Event) => void;
     };
 }
-export declare function useMenubarRoot(props: MenubarRootStateProps): MenubarRootState;
-export declare function useMenubarMenu(props: MenubarMenuStateProps): MenubarMenuState;
-export declare function useMenubarTrigger(props: MenubarTriggerStateProps): MenubarTriggerState;
-export declare function useMenubarContent(props: MenubarContentStateProps): MenubarContentState;
 export {};