@askrjs/ui/dropdown

Dropdowntype

Dropdown: (props: DropdownProps) => JSX.Element

Renders a part of `dropdown`.

DROPDOWN_A11Y_CONTRACTtype

DROPDOWN_A11Y_CONTRACT: { readonly CONTENT_ROLE: "menu"; readonly ITEM_ROLE: "menuitem"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; readonly hasPopup: "aria-haspopup"; }; }

Dropdown accessibility contract.

DropdownA11yContracttype

DropdownA11yContract: typeof DROPDOWN_A11Y_CONTRACT

Type of the Dropdown A11y Contract object.

DropdownContenttype

DropdownContent: { (props: DropdownContentProps): JSX.Element | null; (props: DropdownContentAsChildProps): JSX.Element | null; }

Renders a part of `dropdown`. Supports polymorphic rendering via `asChild`.

DropdownContentAsChildPropstype

DropdownContentAsChildProps: BoxAsChildProps & DropdownContentOwnProps

Props for the `asChild` (polymorphic) rendering of Dropdown Content.

align

align?: OverlayAlign | undefined;

asChild

asChild: true;

children

children: JSXElement;

forceMount

forceMount?: boolean | undefined;

ref

ref?: Ref<Element>;

side

side?: OverlaySide | undefined;

sideOffset

sideOffset?: number | undefined;

DropdownContentOwnPropstype

DropdownContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}

Own props for Dropdown Content, before merging with native element attributes.

align

align?: OverlayAlign | undefined;

forceMount

forceMount?: boolean | undefined;

side

side?: OverlaySide | undefined;

sideOffset

sideOffset?: number | undefined;

DropdownContentPropstype

DropdownContentProps: BoxProps<'div', HTMLDivElement> & DropdownContentOwnProps

Props for Dropdown Content.

align

align?: OverlayAlign | undefined;

asChild

asChild?: false | undefined;

children

children?: unknown;

forceMount

forceMount?: boolean | undefined;

ref

ref?: Ref<HTMLDivElement>;

side

side?: OverlaySide | undefined;

sideOffset

sideOffset?: number | undefined;

DropdownGrouptype

DropdownGroup: (props: DropdownGroupProps | DropdownGroupAsChildProps) => JSX.Element

Renders the `dropdown-group` part of `dropdown` with `role="group"`. Supports polymorphic rendering via `asChild`.

DropdownGroupAsChildPropstype

DropdownGroupAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Dropdown Group.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

DropdownGroupPropstype

DropdownGroupProps: BoxProps<'div', HTMLDivElement>

Props for Dropdown Group.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

DropdownItemtype

DropdownItem: { (props: DropdownItemProps): JSX.Element | null; (props: DropdownItemAsChildProps): JSX.Element | null; }

Renders a part of `dropdown`. Supports polymorphic rendering via `asChild`.

DropdownItemAsChildPropstype

DropdownItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & DropdownItemOwnProps

Props for the `asChild` (polymorphic) rendering of Dropdown Item.

asChild

asChild: true;

children

children: JSXElement;

disabled

disabled?: boolean | undefined;

onSelect

onSelect?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<Element>;

textValue

Text used for typeahead when rendered children are not plain text.

type

type?: undefined;

value

value?: string | undefined;

variant

variant?: DropdownItemVariant | undefined;

DropdownItemOwnPropstype

DropdownItemOwnProps: {
  children?: unknown;
  disabled?: boolean;
  value?: string;
  variant?: DropdownItemVariant;
  onSelect?: (event: PressEvent) => void;
  /** Text used for typeahead when rendered children are not plain text. */
  textValue?: string;
}

Own props for Dropdown Item, before merging with native element attributes.

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onSelect

onSelect?: ((event: PressEvent) => void) | undefined;

textValue

Text used for typeahead when rendered children are not plain text.

value

value?: string | undefined;

variant

variant?: DropdownItemVariant | undefined;

DropdownItemPropstype

DropdownItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & DropdownItemOwnProps

Props for Dropdown Item.

asChild

asChild?: false | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onSelect

onSelect?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<HTMLButtonElement>;

textValue

Text used for typeahead when rendered children are not plain text.

type

type?: "button" | "submit" | "reset" | undefined;

variant

variant?: DropdownItemVariant | undefined;

DropdownItemVarianttype

DropdownItemVariant: 'default' | 'destructive'

Dropdown Item Variant.

DropdownLabeltype

DropdownLabel: (props: DropdownLabelProps | DropdownLabelAsChildProps) => JSX.Element

Renders the `dropdown-label` part of `dropdown`. Supports polymorphic rendering via `asChild`.

DropdownLabelAsChildPropstype

DropdownLabelAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Dropdown Label.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

DropdownLabelPropstype

DropdownLabelProps: BoxProps<'div', HTMLDivElement>

Props for Dropdown Label.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

DropdownOwnPropstype

DropdownOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

Own props for Dropdown, before merging with native element attributes.

children

Supports literal, nested, array-mapped, and `For`-rendered descendants.

defaultOpen

defaultOpen?: boolean | undefined;

id

id?: string | undefined;

onOpenChange

onOpenChange?: ((open: boolean) => void) | undefined;

open

open?: boolean | undefined;

DropdownPortaltype

DropdownPortal: (props: DropdownPortalProps) => JSX.Element | null

Renders a part of `dropdown`.

DropdownPortalPropstype

DropdownPortalProps: {
  children?: unknown;
}

Props for Dropdown Portal.

children

children?: unknown;

DropdownPropstype

DropdownProps: DropdownOwnProps

Props for `Dropdown`.

children

Supports literal, nested, array-mapped, and `For`-rendered descendants.

defaultOpen

defaultOpen?: boolean | undefined;

id

id?: string | undefined;

onOpenChange

onOpenChange?: ((open: boolean) => void) | undefined;

open

open?: boolean | undefined;

DropdownSeparatortype

DropdownSeparator: (props: DropdownSeparatorProps | DropdownSeparatorAsChildProps) => JSX.Element

Renders the `dropdown-separator` part of `dropdown` with `role="separator"`. Supports polymorphic rendering via `asChild`.

DropdownSeparatorAsChildPropstype

DropdownSeparatorAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Dropdown Separator.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

DropdownSeparatorPropstype

DropdownSeparatorProps: BoxProps<'div', HTMLDivElement>

Props for Dropdown Separator.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

DropdownTriggertype

DropdownTrigger: { (props: DropdownTriggerProps): JSX.Element | null; (props: DropdownTriggerAsChildProps): JSX.Element | null; }

Renders the `dropdown-trigger` part of `dropdown`. Supports polymorphic rendering via `asChild`.

DropdownTriggerAsChildPropstype

DropdownTriggerAsChildProps: ButtonLikeAsChildProps & DropdownTriggerOwnProps

Props for the `asChild` (polymorphic) rendering of Dropdown Trigger.

asChild

asChild: true;

children

children: JSXElement;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<Element>;

size

size?: DropdownTriggerSize | undefined;

type

type?: undefined;

variant

variant?: DropdownTriggerVariant | undefined;

DropdownTriggerOwnPropstype

DropdownTriggerOwnProps: {
  variant?: DropdownTriggerVariant;
  size?: DropdownTriggerSize;
}

Own props for Dropdown Trigger, before merging with native element attributes.

size

size?: DropdownTriggerSize | undefined;

variant

variant?: DropdownTriggerVariant | undefined;

DropdownTriggerPropstype

DropdownTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & DropdownTriggerOwnProps

Props for Dropdown Trigger.

asChild

asChild?: false | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<HTMLButtonElement>;

size

size?: DropdownTriggerSize | undefined;

type

type?: "button" | "submit" | "reset" | undefined;

variant

variant?: DropdownTriggerVariant | undefined;

DropdownTriggerSizetype

DropdownTriggerSize: 'md' | 'icon'

Dropdown Trigger Size.

DropdownTriggerVarianttype

DropdownTriggerVariant: 'default' | 'ghost'

Dropdown Trigger Variant.