beez-ui 2.7.1 → 3.0.0

package/dist/components/dropdown-menu.d.ts

@@ -1,74 +1,57 @@
 /**
- * Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as beez-ui's composable Radix
- * menu: Arc's raised panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its
- * tokens, keeping every subcomponent, prop and `data-slot` of the previous API. The surface keeps beez-ui's reveal
- * from the trigger edge and the highlight that glides between items with the keyboard.
- */
-import * as React from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
-declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
-declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
-/**
- * Arc's menu panel. It sizes action menus by their content, at least 12rem unless the viewport is narrower, instead
- * of narrowing them to an icon trigger.
- * @param props - Primitive properties. Arc's defaults: `align="start"`, a 6px `sideOffset`, a 12px
- *   `collisionPadding` and `loop`, so arrow keys wrap from the last item to the first.
- * @returns The portaled menu, animated in and out with its open state.
- */
-declare function DropdownMenuContent({ className, align, sideOffset, collisionPadding, loop, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
-declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
-/**
- * Renders an action row. `destructive` draws Arc's danger tone: danger text and icon over a faint danger fill when
- * highlighted.
- * @param props - Primitive properties, `inset` to align with rows that carry an icon, and the `variant`.
- * @returns The styled primitive with its original interaction contract.
- */
-declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
-}): React.JSX.Element;
-/**
- * Renders a selectable checkbox action with its check at the end of the row.
- * @param props - Primitive properties and `inset` to align with rows that carry an icon.
- * @returns The styled primitive with its original interaction contract.
- */
-declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
-    inset?: boolean;
-}): React.JSX.Element;
-declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
-/**
- * Renders a mutually exclusive action with its check at the end of the row.
- * @param props - Primitive properties and `inset` to align with rows that carry an icon.
- * @returns The styled primitive with its original interaction contract.
- */
-declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
-    inset?: boolean;
-}): React.JSX.Element;
-/**
- * Renders a muted group label aligned with the item text.
- * @param props - Primitive properties and `inset` to align with rows that carry an icon.
- * @returns The styled primitive with its original interaction contract.
- */
-declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-}): React.JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
-declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
-/**
- * Renders the row that opens a nested menu. It keeps the highlight fill while its submenu is open and nudges its
- * chevron toward it.
- * @param props - Primitive properties and `inset` to align with rows that carry an icon.
- * @returns The styled primitive with its original interaction contract.
- */
-declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-}): React.JSX.Element;
-/**
- * Renders a nested menu on the same raised panel, at least 12rem wide.
- * @param props - Primitive properties. Arc's defaults: a 12px `collisionPadding` and `loop`.
- * @returns The submenu, animated in and out with its open state.
- */
-declare function DropdownMenuSubContent({ className, collisionPadding, loop, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+ * Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a labelled trigger that opens a
+ * focused list of actions on Arc's raised panel, with item rows, danger tone, separators, a staggered item entrance
+ * and a highlight that glides between items with the keyboard. It follows Arc's closed API: items are data, not
+ * children. beez-ui adds a custom trigger, link, checkbox and radio rows, trailing content, and placement and open
+ * state of the menu.
+ */
+import type { ReactElement, ReactNode } from "react";
+import { type DropdownItem, type DropdownItemAttributes, type DropdownMenuSelection } from "./primitives/dropdown-menu-items.js";
+/** Side of the trigger the menu prefers. */
+export type DropdownMenuSide = "top" | "right" | "bottom" | "left";
+/** Alignment of the menu against its trigger. */
+export type DropdownMenuAlign = "start" | "center" | "end";
+export type DropdownMenuProps = {
+    /**
+     * Text of the trigger Arc draws, and the accessible name of the menu. With a custom `trigger`, it only names the
+     * menu.
+     */
+    label: string;
+    /** Rows of the menu, in order. */
+    items: DropdownItem[];
+    /** Leading icon of the trigger Arc draws. */
+    icon?: ReactNode;
+    /**
+     * Your own trigger, rendered with `asChild` instead of Arc's labelled button, such as an icon button with its own
+     * `aria-label`. It must accept a ref and be focusable.
+     */
+    trigger?: ReactElement;
+    /** Single selection: rows with a `value` render as radio items checked against `selection.value`. */
+    selection?: DropdownMenuSelection;
+    /** Preferred side of the trigger. Defaults to `bottom`. */
+    side?: DropdownMenuSide;
+    /** Alignment against the trigger. Defaults to `start`. */
+    align?: DropdownMenuAlign;
+    /** Class added to the menu panel. */
+    contentClassName?: string;
+    /** Accessible name of the menu when it should differ from `label`. */
+    contentLabel?: string;
+    /** Class added to the trigger Arc draws. */
+    className?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Blocks outside interaction and hides the rest of the page from assistive technology while open. Defaults to `true`. */
+    modal?: boolean;
+};
+/**
+ * A focused list of actions anchored to a trigger.
+ * @param props - The label, the items and optional trigger, selection, placement and open state.
+ * @returns The trigger with its menu.
+ */
+declare function DropdownMenu({ label, items, icon, trigger, selection, side, align, contentClassName, contentLabel, className, open, defaultOpen, onOpenChange, modal, }: DropdownMenuProps): import("react").JSX.Element;
+export { DropdownMenu };
+export type { DropdownItem, DropdownItemAttributes, DropdownMenuSelection };