bits-ui 2.6.2 → 2.8.0

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

@@ -1,61 +1,66 @@
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
-import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
-import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
+import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
 import type { Direction } from "../../shared/index.js";
 import { IsUsingKeyboard } from "../../index.js";
 import type { KeyboardEventHandler, PointerEventHandler } from "svelte/elements";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
 type MenuVariant = "context-menu" | "dropdown-menu" | "menubar";
-export type MenuRootStateProps = ReadableBoxedValues<{
+export interface MenuRootStateOpts extends ReadableBoxedValues<{
     dir: Direction;
     variant: MenuVariant;
-}> & {
+}> {
     onClose: AnyFn;
-};
+}
 export declare const MenuOpenEvent: CustomEventDispatcher<unknown>;
-export declare const menuAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["trigger", "content", "sub-trigger", "item", "group", "group-heading", "checkbox-group", "checkbox-item", "radio-group", "radio-item", "separator", "sub-content", "arrow"]>;
-declare class MenuRootState {
-    readonly opts: MenuRootStateProps;
-    isUsingKeyboard: IsUsingKeyboard;
+export declare const menuAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["trigger", "content", "sub-trigger", "item", "group", "group-heading", "checkbox-group", "checkbox-item", "radio-group", "radio-item", "separator", "sub-content", "arrow"]>;
+export declare class MenuRootState {
+    static create(opts: MenuRootStateOpts): MenuRootState;
+    readonly opts: MenuRootStateOpts;
+    readonly isUsingKeyboard: IsUsingKeyboard;
     ignoreCloseAutoFocus: boolean;
     isPointerInTransit: boolean;
-    constructor(opts: MenuRootStateProps);
+    constructor(opts: MenuRootStateOpts);
     getBitsAttr: typeof menuAttrs.getAttr;
 }
-type MenuMenuStateProps = WritableBoxedValues<{
+interface MenuMenuStateOpts extends WritableBoxedValues<{
     open: boolean;
-}>;
-declare class MenuMenuState {
-    readonly opts: MenuMenuStateProps;
+}>, ReadableBoxedValues<{
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class MenuMenuState {
+    static create(opts: MenuMenuStateOpts, root: MenuRootState): MenuMenuState;
+    readonly opts: MenuMenuStateOpts;
     readonly root: MenuRootState;
     readonly parentMenu: MenuMenuState | null;
     contentId: import("svelte-toolbelt").ReadableBox<string>;
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
-    constructor(opts: MenuMenuStateProps, root: MenuRootState, parentMenu: MenuMenuState | null);
+    constructor(opts: MenuMenuStateOpts, root: MenuRootState, parentMenu: MenuMenuState | null);
     toggleOpen(): void;
     onOpen(): void;
     onClose(): void;
 }
-type MenuContentStateProps = WithRefProps & ReadableBoxedValues<{
+interface MenuContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     loop: boolean;
     onCloseAutoFocus: (event: Event) => void;
-}> & {
+}> {
     isSub?: boolean;
-};
-declare class MenuContentState {
+}
+export declare class MenuContentState {
     #private;
-    readonly opts: MenuContentStateProps;
+    static create(opts: MenuContentStateOpts): MenuContentState;
+    readonly opts: MenuContentStateOpts;
     readonly parentMenu: MenuMenuState;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    readonly domContext: DOMContext;
     search: string;
-    rovingFocusGroup: ReturnType<typeof useRovingFocus>;
     mounted: boolean;
-    domContext: DOMContext;
-    constructor(opts: MenuContentStateProps, parentMenu: MenuMenuState);
+    constructor(opts: MenuContentStateOpts, parentMenu: MenuMenuState);
     onCloseAutoFocus: (e: Event) => void;
     handleTabKeyDown(e: BitsKeyboardEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -66,10 +71,10 @@ declare class MenuContentState {
     onTriggerLeave(): boolean;
     onOpenAutoFocus: (e: Event) => void;
     handleInteractOutside(e: PointerEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "menu";
         readonly "aria-orientation": "horizontal" | "vertical";
@@ -82,23 +87,24 @@ declare class MenuContentState {
             readonly pointerEvents: "auto";
         };
     };
-    popperProps: {
+    readonly popperProps: {
         onCloseAutoFocus: (e: Event) => void;
     };
 }
-type MenuItemSharedStateProps = WithRefProps & ReadableBoxedValues<{
+interface MenuItemSharedStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>;
+}> {
+}
 declare class MenuItemSharedState {
     #private;
-    readonly opts: MenuItemSharedStateProps;
+    readonly opts: MenuItemSharedStateOpts;
     readonly content: MenuContentState;
-    constructor(opts: MenuItemSharedStateProps, content: MenuContentState);
+    constructor(opts: MenuItemSharedStateOpts, content: MenuContentState);
     onpointermove(e: BitsPointerEvent): void;
     onpointerleave(e: BitsPointerEvent): void;
     onfocus(e: BitsFocusEvent): void;
     onblur(e: BitsFocusEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -111,21 +117,24 @@ declare class MenuItemSharedState {
         readonly onblur: (e: BitsFocusEvent) => void;
     };
 }
-type MenuItemStateProps = ReadableBoxedValues<{
+type MenuItemCombinedProps = MenuItemSharedStateOpts & MenuItemStateOpts;
+interface MenuItemStateOpts extends ReadableBoxedValues<{
     onSelect: AnyFn;
     closeOnSelect: boolean;
-}>;
-declare class MenuItemState {
+}> {
+}
+export declare class MenuItemState {
     #private;
-    readonly opts: MenuItemStateProps;
+    static create(opts: MenuItemCombinedProps): MenuItemState;
+    readonly opts: MenuItemStateOpts;
     readonly item: MenuItemSharedState;
-    root: MenuRootState;
-    constructor(opts: MenuItemStateProps, item: MenuItemSharedState);
+    readonly root: MenuRootState;
+    constructor(opts: MenuItemStateOpts, item: MenuItemSharedState);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(_: BitsMouseEvent): void;
     onpointerup(e: BitsPointerEvent): void;
     onpointerdown(_: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -145,18 +154,21 @@ declare class MenuItemState {
         style?: string;
     };
 }
-declare class MenuSubTriggerState {
+interface MenuSubTriggerStateOpts extends MenuItemSharedStateOpts, Pick<MenuItemStateOpts, "onSelect"> {
+}
+export declare class MenuSubTriggerState {
     #private;
-    readonly opts: MenuItemSharedStateProps & Pick<MenuItemStateProps, "onSelect">;
+    static create(opts: MenuSubTriggerStateOpts): MenuSubTriggerState;
+    readonly opts: MenuSubTriggerStateOpts;
     readonly item: MenuItemSharedState;
     readonly content: MenuContentState;
     readonly submenu: MenuMenuState;
-    constructor(opts: MenuItemSharedStateProps & Pick<MenuItemStateProps, "onSelect">, item: MenuItemSharedState, content: MenuContentState, submenu: MenuMenuState);
+    constructor(opts: MenuSubTriggerStateOpts, item: MenuItemSharedState, content: MenuContentState, submenu: MenuMenuState);
     onpointermove(e: BitsPointerEvent): void;
     onpointerleave(e: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(e: BitsMouseEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "menuitem";
@@ -180,23 +192,25 @@ declare class MenuSubTriggerState {
         style?: string;
     };
 }
-type MenuCheckboxItemStateProps = WritableBoxedValues<{
+interface MenuCheckboxItemStateOpts extends WritableBoxedValues<{
     checked: boolean;
     indeterminate: boolean;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     value: string;
-}>;
-declare class MenuCheckboxItemState {
-    readonly opts: MenuCheckboxItemStateProps;
+}> {
+}
+export declare class MenuCheckboxItemState {
+    static create(opts: MenuItemCombinedProps & MenuCheckboxItemStateOpts, checkboxGroup: MenuCheckboxGroupState | null): MenuCheckboxItemState;
+    readonly opts: MenuCheckboxItemStateOpts;
     readonly item: MenuItemState;
     readonly group: MenuCheckboxGroupState | null;
-    constructor(opts: MenuCheckboxItemStateProps, item: MenuItemState, group?: MenuCheckboxGroupState | null);
+    constructor(opts: MenuCheckboxItemStateOpts, item: MenuItemState, group?: MenuCheckboxGroupState | null);
     toggleChecked(): void;
-    snippetProps: {
+    readonly snippetProps: {
         checked: boolean;
         indeterminate: boolean;
     };
-    props: {
+    readonly props: {
         readonly role: "menuitemcheckbox";
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
@@ -216,73 +230,84 @@ declare class MenuCheckboxItemState {
         readonly style?: string;
     };
 }
-type MenuGroupStateProps = WithRefProps;
-declare class MenuGroupState {
-    readonly opts: MenuGroupStateProps;
+interface MenuGroupStateOpts extends WithRefOpts {
+}
+export declare class MenuGroupState {
+    static create(opts: MenuGroupStateOpts): MenuGroupState | MenuRadioGroupState;
+    readonly opts: MenuGroupStateOpts;
     readonly root: MenuRootState;
     groupHeadingId: string | undefined;
-    constructor(opts: MenuGroupStateProps, root: MenuRootState);
-    props: {
+    constructor(opts: MenuGroupStateOpts, root: MenuRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
     };
 }
-type MenuGroupHeadingStateProps = WithRefProps;
-declare class MenuGroupHeadingState {
-    readonly opts: MenuGroupHeadingStateProps;
+interface MenuGroupHeadingStateOpts extends WithRefOpts {
+}
+export declare class MenuGroupHeadingState {
+    static create(opts: MenuGroupHeadingStateOpts): MenuGroupHeadingState;
+    readonly opts: MenuGroupHeadingStateOpts;
     readonly group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState;
-    constructor(opts: MenuGroupHeadingStateProps, group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState);
-    props: {
+    constructor(opts: MenuGroupHeadingStateOpts, group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState);
+    readonly props: {
         readonly id: string;
         readonly role: "group";
     };
 }
-type MenuSeparatorStateProps = WithRefProps;
-declare class MenuSeparatorState {
-    readonly opts: MenuSeparatorStateProps;
+interface MenuSeparatorStateOpts extends WithRefOpts {
+}
+export declare class MenuSeparatorState {
+    static create(opts: MenuSeparatorStateOpts): MenuSeparatorState;
+    readonly opts: MenuSeparatorStateOpts;
     readonly root: MenuRootState;
-    constructor(opts: MenuSeparatorStateProps, root: MenuRootState);
-    props: {
+    constructor(opts: MenuSeparatorStateOpts, root: MenuRootState);
+    readonly props: {
         readonly id: string;
         readonly role: "group";
     };
 }
-declare class MenuArrowState {
+export declare class MenuArrowState {
+    static create(): MenuArrowState;
     readonly root: MenuRootState;
     constructor(root: MenuRootState);
-    props: {
+    readonly props: {
         readonly [x: string]: "";
     };
 }
-type MenuRadioGroupStateProps = WithRefProps & WritableBoxedValues<{
+interface MenuRadioGroupStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: string;
-}>;
-declare class MenuRadioGroupState {
-    readonly opts: MenuRadioGroupStateProps;
+}> {
+}
+export declare class MenuRadioGroupState {
+    static create(opts: MenuRadioGroupStateOpts): MenuGroupState | MenuRadioGroupState;
+    readonly opts: MenuRadioGroupStateOpts;
     readonly content: MenuContentState;
     groupHeadingId: string | null;
     root: MenuRootState;
-    constructor(opts: MenuRadioGroupStateProps, content: MenuContentState);
+    constructor(opts: MenuRadioGroupStateOpts, content: MenuContentState);
     setValue(v: string): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | null;
     };
 }
-type MenuRadioItemStateProps = WithRefProps & ReadableBoxedValues<{
+interface MenuRadioItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     closeOnSelect: boolean;
-}>;
-declare class MenuRadioItemState {
-    readonly opts: MenuRadioItemStateProps;
+}> {
+}
+export declare class MenuRadioItemState {
+    static create(opts: MenuRadioItemStateOpts & MenuItemCombinedProps): MenuRadioItemState;
+    readonly opts: MenuRadioItemStateOpts;
     readonly item: MenuItemState;
     readonly group: MenuRadioGroupState;
-    isChecked: boolean;
-    constructor(opts: MenuRadioItemStateProps, item: MenuItemState, group: MenuRadioGroupState);
+    readonly isChecked: boolean;
+    constructor(opts: MenuRadioItemStateOpts, item: MenuItemState, group: MenuRadioGroupState);
     selectValue(): void;
-    props: {
+    readonly props: {
         readonly role: "menuitemradio";
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
@@ -302,18 +327,20 @@ declare class MenuRadioItemState {
         readonly style?: string;
     };
 }
-type DropdownMenuTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+interface DropdownMenuTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>;
-declare class DropdownMenuTriggerState {
+}> {
+}
+export declare class DropdownMenuTriggerState {
     #private;
-    readonly opts: DropdownMenuTriggerStateProps;
+    static create(opts: DropdownMenuTriggerStateOpts): DropdownMenuTriggerState;
+    readonly opts: DropdownMenuTriggerStateOpts;
     readonly parentMenu: MenuMenuState;
-    constructor(opts: DropdownMenuTriggerStateProps, parentMenu: MenuMenuState);
+    constructor(opts: DropdownMenuTriggerStateOpts, parentMenu: MenuMenuState);
     onpointerdown: PointerEventHandler<HTMLElement>;
     onpointerup: PointerEventHandler<HTMLElement>;
     onkeydown: KeyboardEventHandler<HTMLElement>;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly disabled: boolean;
         readonly "aria-haspopup": "menu";
@@ -326,23 +353,25 @@ declare class DropdownMenuTriggerState {
         readonly onkeydown: KeyboardEventHandler<HTMLElement>;
     };
 }
-type ContextMenuTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+interface ContextMenuTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>;
-declare class ContextMenuTriggerState {
+}> {
+}
+export declare class ContextMenuTriggerState {
     #private;
-    readonly opts: ContextMenuTriggerStateProps;
+    static create(opts: ContextMenuTriggerStateOpts): ContextMenuTriggerState;
+    readonly opts: ContextMenuTriggerStateOpts;
     readonly parentMenu: MenuMenuState;
     virtualElement: import("svelte-toolbelt").WritableBox<{
         getBoundingClientRect: () => DOMRect;
     }>;
-    constructor(opts: ContextMenuTriggerStateProps, parentMenu: MenuMenuState);
+    constructor(opts: ContextMenuTriggerStateOpts, parentMenu: MenuMenuState);
     oncontextmenu(e: BitsMouseEvent): void;
     onpointerdown(e: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     onpointercancel(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly disabled: boolean;
         readonly "data-disabled": "" | undefined;
@@ -356,40 +385,28 @@ declare class ContextMenuTriggerState {
         readonly oncontextmenu: (e: BitsMouseEvent) => void;
     };
 }
-type MenuCheckboxGroupStateProps = WithRefProps & ReadableBoxedValues<{
+interface MenuCheckboxGroupStateOpts extends WithRefOpts, ReadableBoxedValues<{
     onValueChange: (value: string[]) => void;
-}> & WritableBoxedValues<{
+}>, WritableBoxedValues<{
     value: string[];
-}>;
-declare class MenuCheckboxGroupState {
-    readonly opts: MenuCheckboxGroupStateProps;
+}> {
+}
+export declare class MenuCheckboxGroupState {
+    static create(opts: MenuCheckboxGroupStateOpts): MenuCheckboxGroupState;
+    readonly opts: MenuCheckboxGroupStateOpts;
     readonly content: MenuContentState;
+    readonly root: MenuRootState;
     groupHeadingId: string | null;
-    root: MenuRootState;
-    constructor(opts: MenuCheckboxGroupStateProps, content: MenuContentState);
+    constructor(opts: MenuCheckboxGroupStateOpts, content: MenuContentState);
     addValue(checkboxValue: string | undefined): void;
     removeValue(checkboxValue: string | undefined): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | null;
     };
 }
-type MenuItemCombinedProps = MenuItemSharedStateProps & MenuItemStateProps;
-export declare function useMenuRoot(props: MenuRootStateProps): MenuRootState;
-export declare function useMenuMenu(root: MenuRootState, props: MenuMenuStateProps): MenuMenuState;
-export declare function useMenuSubmenu(props: MenuMenuStateProps): MenuMenuState;
-export declare function useMenuSubTrigger(props: MenuItemSharedStateProps & Pick<MenuItemStateProps, "onSelect">): MenuSubTriggerState;
-export declare function useMenuDropdownTrigger(props: DropdownMenuTriggerStateProps): DropdownMenuTriggerState;
-export declare function useMenuContextTrigger(props: ContextMenuTriggerStateProps): ContextMenuTriggerState;
-export declare function useMenuContent(props: MenuContentStateProps): MenuContentState;
-export declare function useMenuItem(props: MenuItemCombinedProps): MenuItemState;
-export declare function useMenuCheckboxItem(props: MenuItemCombinedProps & MenuCheckboxItemStateProps, checkboxGroup: MenuCheckboxGroupState | null): MenuCheckboxItemState;
-export declare function useMenuRadioGroup(props: MenuRadioGroupStateProps): MenuGroupState | MenuRadioGroupState;
-export declare function useMenuRadioItem(props: MenuRadioItemStateProps & MenuItemCombinedProps): MenuRadioItemState;
-export declare function useMenuGroup(props: MenuGroupStateProps): MenuGroupState | MenuRadioGroupState;
-export declare function useMenuGroupHeading(props: MenuGroupHeadingStateProps): MenuGroupHeadingState;
-export declare function useMenuSeparator(props: MenuSeparatorStateProps): MenuSeparatorState;
-export declare function useMenuArrow(): MenuArrowState;
-export declare function useMenuCheckboxGroup(props: MenuCheckboxGroupStateProps): MenuCheckboxGroupState;
+export declare class MenuSubmenuState {
+    static create(opts: MenuMenuStateOpts): MenuMenuState;
+}
 export {};