@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
312 lines (311 loc) • 11.7 kB
TypeScript
import React from "react";
import { OverridableComponent } from "../../util";
import { Menu, MenuPortalProps } from "../floating-menu/Menu";
type ActionMenuProps = {
children?: React.ReactNode;
/**
* Whether the menu is open or not.
* Only needed if you want manually control state.
*/
open?: boolean;
/**
* Callback for when the menu is opened or closed.
*/
onOpenChange?: (open: boolean) => void;
} & Pick<MenuPortalProps, "rootElement">;
interface ActionMenuComponent extends React.FC<ActionMenuProps> {
/**
* Acts as a trigger and anchor for the menu.
* Must be wrapped around a button. If you use your own component, make sure to forward ref and props.
* @example
* ```jsx
* <ActionMenu.Trigger>
* <button>Open Menu</button>
* </ActionMenu.Trigger>
* ```
*/
Trigger: typeof ActionMenuTrigger;
/**
* The menu content, containing all the items.
* @example
* ```jsx
* <ActionMenu.Content>
* <ActionMenu.Item>
* Item 1
* </ActionMenu.Item>
* <ActionMenu.Item>
* Item 2
* </ActionMenu.Item>
* </ActionMenu.Content>
* ```
*/
Content: typeof ActionMenuContent;
/**
* Semantically and visually groups items together with a label.
* This is the prefered way to group items, as it provides better accessibility
* rather than using a standalone `ActionMenu.Label`.
*
* It is required to use either `label` or `aria-label` to provide an accessible name for the group.
* @example
* ```jsx
* <ActionMenu.Content>
* <ActionMenu.Group label="Group 1">
* <ActionMenu.Item>
* Item 1
* </ActionMenu.Item>
* <ActionMenu.Item>
* Item 2
* </ActionMenu.Item>
* </ActionMenu.Group>
* <ActionMenu.Group label="Group 2">
* <ActionMenu.Item>
* Item 3
* </ActionMenu.Item>
* <ActionMenu.Item>
* Item 4
* </ActionMenu.Item>
* </ActionMenu.Group>
* </ActionMenu.Content>
* ```
*/
Group: typeof ActionMenuGroup;
/**
* Separate labeling option for the menu.
* This is not for grouping items, but rather for adding a label to the menu at the top. For grouping items, use `ActionMenu.Group`.
* @example
* ```jsx
* <ActionMenu.Content>
* <ActionMenu.Label>
* Label
* </ActionMenu.Label>
* <ActionMenu.Divider />
* </ActionMenu.Content
* ```
*/
Label: typeof ActionMenuLabel;
/**
* A single item in the menu. Can be used standalone or grouped with other items.
* Use `onSelect` to handle the action when the item is selected, like navigating to a new page or performing an action.
* @example
* ```jsx
* <ActionMenu.Content>
* // Grouped
* <ActionMenu.Group label="Group 1">
* <ActionMenu.Item onSelect={navigate}>
* Item 1
* </ActionMenu.Item>
* <ActionMenu.Item onSelect={navigate}>
* Item 2
* </ActionMenu.Item>
* </ActionMenu.Group>
* <ActionMenu.Divider />
* // Standalone
* <ActionMenu.Item onSelect={updateState}>
* Item 3
* </ActionMenu.Item>
* </ActionMenu.Content>
* ```
* @example As link
* ```jsx
* <ActionMenu.Item as="a" href="#">
* Item
* </ActionMenu.Item>
* ```
*/
Item: typeof ActionMenuItem;
/**
* A checkbox item in the menu. Can be used standalone or grouped with other items.
* @example
* ```jsx
* <ActionMenu.CheckboxItem
* checked={isChecked}
* onCheckedChange={handleChange}
* >
* Checkbox 1
* </ActionMenu.CheckboxItem>
* ```
*/
CheckboxItem: typeof ActionMenuCheckboxItem;
/**
* A radio group in the menu.
*
* It is required to use either `label` or `aria-label` to provide an accessible name for the group.
* @example
* ```jsx
* <ActionMenu.RadioGroup
* onValueChange={handleValueChange}
* value={radioValue}
* label="Radio group"
* >
* <ActionMenu.RadioItem value="1">Radio 1</ActionMenu.RadioItem>
* <ActionMenu.RadioItem value="2">Radio 2</ActionMenu.RadioItem>
* </ActionMenu.RadioGroup>
* ```
*/
RadioGroup: typeof ActionMenuRadioGroup;
/**
* A radio item in the menu. Should always be grouped with an `ActionMenu.RadioGroup`.
* @example
* ```jsx
* <ActionMenu.RadioGroup
* onValueChange={handleValueChange}
* value={radioValue}
* label="Radio group"
* >
* <ActionMenu.RadioItem value="1">Radio 1</ActionMenu.RadioItem>
* <ActionMenu.RadioItem value="2">Radio 2</ActionMenu.RadioItem>
* </ActionMenu.RadioGroup>
* ```
*/
RadioItem: typeof ActionMenuRadioItem;
/**
* A simple divider to separate items in the menu.
*/
Divider: typeof ActionMenuDivider;
/**
* A sub-menu that can be nested inside the menu.
* The sub-menu can be nested inside other sub-menus allowing for multiple levels of nesting.
* @example
* ```jsx
* <ActionMenu.Sub>
* <ActionMenu.SubTrigger>Submenu 1</ActionMenu.SubTrigger>
* <ActionMenu.SubContent>
* <ActionMenu.Item>
* Subitem 1
* </ActionMenu.Item>
* <ActionMenu.Item>
* Subitem 2
* </ActionMenu.Item>
* </ActionMenu.SubContent>
* </ActionMenu.Sub>
* ```
*/
Sub: typeof ActionMenuSub;
/**
* Acts as a trigger for a sub-menu.
* In contrast to `ActionMenu.Trigger`, this trigger is a standalone component and should not be wrapped around a React.ReactNode.
* @example
* ```jsx
* <ActionMenu.Sub>
* <ActionMenu.SubTrigger>Submenu 1</ActionMenu.SubTrigger>
* </ActionMenu.Sub>
* ```
*/
SubTrigger: typeof ActionMenuSubTrigger;
/**
* The content of a sub-menu.
* @example
* ```jsx
* <ActionMenu.Sub>
* <ActionMenu.SubContent>
* <ActionMenu.Item>
* Subitem 1
* </ActionMenu.Item>
* <ActionMenu.Item>
* Subitem 2
* </ActionMenu.Item>
* </ActionMenu.SubContent>
* </ActionMenu.Sub>
* ```
*/
SubContent: typeof ActionMenuSubContent;
}
export declare const ActionMenu: ActionMenuComponent;
interface ActionMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactElement;
}
export declare const ActionMenuTrigger: React.ForwardRefExoticComponent<ActionMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
interface ActionMenuContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
children?: React.ReactNode;
align?: "start" | "end";
}
export declare const ActionMenuContent: React.ForwardRefExoticComponent<ActionMenuContentProps & React.RefAttributes<HTMLDivElement>>;
interface ActionMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
export declare const ActionMenuLabel: React.ForwardRefExoticComponent<ActionMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
type MenuGroupProps = React.ComponentPropsWithoutRef<typeof Menu.Group>;
type ActionMenuGroupLabelingProps = {
/**
* Adds a visual and accessible label to the group.
*/
label: string;
/**
* Adds an aria-label to the group.
*/
"aria-label"?: never;
} | {
/**
* Adds an aria-label to the group.
*/
"aria-label": string;
/**
* Adds a visual and accessible label to the group.
*/
label?: never;
};
type ActionMenuGroupProps = Omit<MenuGroupProps, "asChild"> & ActionMenuGroupLabelingProps;
export declare const ActionMenuGroup: React.ForwardRefExoticComponent<ActionMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
type ActionMenuItemElement = React.ElementRef<typeof Menu.Item>;
type MenuItemProps = React.ComponentPropsWithoutRef<typeof Menu.Item>;
interface ActionMenuItemProps extends Omit<MenuItemProps, "asChild"> {
/**
* Shows connected shortcut-keys for the item.
* This is only a visual representation, you will have to implement the actual shortcut yourself.
*/
shortcut?: string;
/**
* Styles the item as a destructive action.
*/
variant?: "danger";
/**
* Adds an icon on the left side. The icon will always have aria-hidden.
*/
icon?: React.ReactNode;
}
export declare const ActionMenuItem: OverridableComponent<ActionMenuItemProps, ActionMenuItemElement>;
type MenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof Menu.CheckboxItem>;
interface ActionMenuCheckboxItemProps extends Omit<MenuCheckboxItemProps, "asChild"> {
children: React.ReactNode;
/**
* Shows connected shortcut-keys for the item.
* This is only a visual representation, you will have to implement the actual shortcut yourself.
*/
shortcut?: string;
}
export declare const ActionMenuCheckboxItem: React.ForwardRefExoticComponent<ActionMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
type MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof Menu.RadioGroup>;
type ActionMenuRadioGroupProps = ActionMenuGroupLabelingProps & Omit<MenuRadioGroupProps, "asChild"> & {
children: React.ReactNode;
};
export declare const ActionMenuRadioGroup: React.ForwardRefExoticComponent<ActionMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
type MenuRadioItemProps = React.ComponentPropsWithoutRef<typeof Menu.RadioItem>;
interface ActionMenuRadioItemProps extends Omit<MenuRadioItemProps, "asChild"> {
children: React.ReactNode;
}
export declare const ActionMenuRadioItem: React.ForwardRefExoticComponent<ActionMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
type MenuDividerProps = React.ComponentPropsWithoutRef<typeof Menu.Divider>;
type ActionMenuDividerProps = Omit<MenuDividerProps, "asChild">;
export declare const ActionMenuDivider: React.ForwardRefExoticComponent<ActionMenuDividerProps & React.RefAttributes<HTMLDivElement>>;
interface ActionMenuSubProps {
children?: React.ReactNode;
/**
* Whether the sub-menu is open or not. Only needed if you want to manually control state.
*/
open?: boolean;
/**
* Callback for when the sub-menu is opened or closed.
*/
onOpenChange?: (open: boolean) => void;
}
export declare const ActionMenuSub: (props: ActionMenuSubProps) => React.JSX.Element;
type MenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof Menu.SubTrigger>;
interface ActionMenuSubTriggerProps extends Omit<MenuSubTriggerProps, "asChild"> {
icon?: React.ReactNode;
}
export declare const ActionMenuSubTrigger: React.ForwardRefExoticComponent<ActionMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
interface ActionMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
export declare const ActionMenuSubContent: React.ForwardRefExoticComponent<ActionMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
export type { ActionMenuCheckboxItemProps, ActionMenuContentProps, ActionMenuDividerProps, ActionMenuGroupProps, ActionMenuItemProps, ActionMenuLabelProps, ActionMenuProps, ActionMenuRadioGroupProps, ActionMenuRadioItemProps, ActionMenuSubContentProps, ActionMenuSubProps, ActionMenuSubTriggerProps, ActionMenuTriggerProps, };