@loke/ui
Version:
168 lines (167 loc) • 9.64 kB
TypeScript
import { DismissableLayer } from "@loke/ui/dismissable-layer";
import { FocusScope } from "@loke/ui/focus-scope";
import * as PopperPrimitive from "@loke/ui/popper";
import { Portal as PortalPrimitive } from "@loke/ui/portal";
import { Primitive } from "@loke/ui/primitive";
import * as RovingFocusGroup from "@loke/ui/roving-focus";
import { type ComponentPropsWithoutRef, type FC, type ReactNode } from "react";
type Direction = "ltr" | "rtl";
declare const createMenuScope: import("@loke/ui/context").CreateScope;
interface MenuProps {
children?: ReactNode;
dir?: Direction;
modal?: boolean;
onOpenChange?(open: boolean): void;
open?: boolean;
}
declare const Menu: FC<MenuProps>;
type PopperAnchorProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
interface MenuAnchorProps extends PopperAnchorProps {
}
declare const MenuAnchor: import("react").ForwardRefExoticComponent<MenuAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
type PortalProps = ComponentPropsWithoutRef<typeof PortalPrimitive>;
interface MenuPortalProps {
children?: ReactNode;
/**
* Specify a container element to portal the content into.
*/
container?: PortalProps["container"];
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const MenuPortal: FC<MenuPortalProps>;
/**
* We purposefully don't union MenuRootContent and MenuSubContent props here because
* they have conflicting prop types. We agreed that we would allow MenuSubContent to
* accept props that it would just ignore.
*/
interface MenuContentProps extends MenuRootContentTypeProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const MenuContent: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
interface MenuRootContentTypeProps extends Omit<MenuContentImplProps, keyof MenuContentImplPrivateProps> {
}
type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
type RovingFocusGroupProps = ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
type PopperContentProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;
type MenuContentImplPrivateProps = {
onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];
onDismiss?: DismissableLayerProps["onDismiss"];
disableOutsidePointerEvents?: DismissableLayerProps["disableOutsidePointerEvents"];
/**
* Whether scrolling outside the `MenuContent` should be prevented
* (default: `false`)
*/
disableOutsideScroll?: boolean;
/**
* Whether focus should be trapped within the `MenuContent`
* (default: false)
*/
trapFocus?: FocusScopeProps["trapped"];
};
interface MenuContentImplProps extends MenuContentImplPrivateProps, Omit<PopperContentProps, "dir" | "onPlaced"> {
/**
* Whether keyboard navigation should loop around
* @defaultValue false
*/
loop?: RovingFocusGroupProps["loop"];
/**
* Event handler called when auto-focusing on close.
* Can be prevented.
*/
onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
onEntryFocus?: RovingFocusGroupProps["onEntryFocus"];
onEscapeKeyDown?: DismissableLayerProps["onEscapeKeyDown"];
onFocusOutside?: DismissableLayerProps["onFocusOutside"];
onInteractOutside?: DismissableLayerProps["onInteractOutside"];
onPointerDownOutside?: DismissableLayerProps["onPointerDownOutside"];
}
type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
interface MenuGroupProps extends PrimitiveDivProps {
}
declare const MenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
interface MenuLabelProps extends PrimitiveDivProps {
}
declare const MenuLabel: import("react").ForwardRefExoticComponent<MenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
interface MenuItemProps extends Omit<MenuItemImplProps, "onSelect"> {
onSelect?: (event: Event) => void;
}
declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
interface MenuItemImplProps extends PrimitiveDivProps {
disabled?: boolean;
textValue?: string;
}
type CheckedState = boolean | "indeterminate";
interface MenuCheckboxItemProps extends MenuItemProps {
checked?: CheckedState;
onCheckedChange?: (checked: boolean) => void;
}
declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
interface MenuRadioGroupProps extends MenuGroupProps {
onValueChange?: (value: string) => void;
value?: string;
}
declare const MenuRadioGroup: import("react").ForwardRefExoticComponent<MenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
interface MenuRadioItemProps extends MenuItemProps {
value: string;
}
declare const MenuRadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
type PrimitiveSpanProps = ComponentPropsWithoutRef<typeof Primitive.span>;
interface MenuItemIndicatorProps extends PrimitiveSpanProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const MenuItemIndicator: import("react").ForwardRefExoticComponent<MenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
interface MenuSeparatorProps extends PrimitiveDivProps {
}
declare const MenuSeparator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
type PopperArrowProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;
interface MenuArrowProps extends PopperArrowProps {
}
declare const MenuArrow: import("react").ForwardRefExoticComponent<MenuArrowProps & import("react").RefAttributes<SVGSVGElement>>;
interface MenuSubProps {
children?: ReactNode;
onOpenChange?(open: boolean): void;
open?: boolean;
}
declare const MenuSub: FC<MenuSubProps>;
interface MenuSubTriggerProps extends MenuItemImplProps {
}
declare const MenuSubTrigger: import("react").ForwardRefExoticComponent<MenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
interface MenuSubContentProps extends Omit<MenuContentImplProps, keyof MenuContentImplPrivateProps | "onCloseAutoFocus" | "onEntryFocus" | "side" | "align"> {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const MenuSubContent: import("react").ForwardRefExoticComponent<MenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Root: FC<MenuProps>;
declare const Anchor: import("react").ForwardRefExoticComponent<MenuAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Portal: FC<MenuPortalProps>;
declare const Content: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Group: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Label: import("react").ForwardRefExoticComponent<MenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Item: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
declare const CheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
declare const RadioGroup: import("react").ForwardRefExoticComponent<MenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
declare const RadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
declare const ItemIndicator: import("react").ForwardRefExoticComponent<MenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
declare const Separator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Arrow: import("react").ForwardRefExoticComponent<MenuArrowProps & import("react").RefAttributes<SVGSVGElement>>;
declare const Sub: FC<MenuSubProps>;
declare const SubTrigger: import("react").ForwardRefExoticComponent<MenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
declare const SubContent: import("react").ForwardRefExoticComponent<MenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>;
export { createMenuScope, Menu, MenuAnchor, MenuPortal, MenuContent, MenuGroup, MenuLabel, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuItemIndicator, MenuSeparator, MenuArrow, MenuSub, MenuSubTrigger, MenuSubContent, Root, Anchor, Portal, Content, Group, Label, Item, CheckboxItem, RadioGroup, RadioItem, ItemIndicator, Separator, Arrow, Sub, SubTrigger, SubContent, };
export type { MenuProps, MenuAnchorProps, MenuPortalProps, MenuContentProps, MenuGroupProps, MenuLabelProps, MenuItemProps, MenuCheckboxItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuItemIndicatorProps, MenuSeparatorProps, MenuArrowProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps, };