@fileverse/ui 5.1.8-dropdownmenu-1 → 5.1.8-dropdownmenu-2

package/dist/index.css

@@ -3420,6 +3420,9 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[disabled\]\:color-text-disabled[data-disabled] {
     color: hsl(var(--color-text-disabled));
   }
+.data-\[highlighted\]\:color-bg-default-hover[data-highlighted] {
+    background-color: hsl(var(--color-bg-default-hover));
+  }
 .data-\[state\=unchecked\]\:color-bg-default-hover[data-state="unchecked"] {
     background-color: hsl(var(--color-bg-default-hover));
   }

package/dist/index.es.d.ts

@@ -350,45 +350,175 @@ export declare const DrawerTitle: React_2.ForwardRefExoticComponent<Omit<DialogP
 
 export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * `DropdownMenu` — a menu of actions or options shown when a button is
+ * activated. Built on Radix UI's DropdownMenu primitive and styled with the
+ * Fileverse design system.
+ *
+ * Composition-first: import the parts you need and assemble them. Every part
+ * forwards its `ref` and spreads props onto the underlying Radix primitive, so
+ * any Radix prop works without extra wiring.
+ *
+ * Parts: {@link DropdownMenuTrigger}, {@link DropdownMenuContent},
+ * {@link DropdownMenuItem}, {@link DropdownMenuCheckboxItem},
+ * {@link DropdownMenuRadioGroup}/{@link DropdownMenuRadioItem},
+ * {@link DropdownMenuLabel}, {@link DropdownMenuSeparator},
+ * {@link DropdownMenuShortcut}, {@link DropdownMenuGroup},
+ * {@link DropdownMenuSub}/{@link DropdownMenuSubTrigger}/{@link DropdownMenuSubContent},
+ * {@link DropdownMenuPortal}, {@link DropdownMenuArrow}.
+ *
+ * @example Basic menu
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button>Open</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent align="start">
+ *     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem>
+ *       Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem disabled>Log out</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @example Checkbox items, a radio group, and a nested sub-menu
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <DropdownMenuCheckboxItem checked={show} onCheckedChange={setShow}>
+ *     Show panel
+ *   </DropdownMenuCheckboxItem>
+ *   <DropdownMenuRadioGroup value={pos} onValueChange={setPos}>
+ *     <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+ *     <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+ *   </DropdownMenuRadioGroup>
+ *   <DropdownMenuSub>
+ *     <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
+ *     <DropdownMenuSubContent>
+ *       <DropdownMenuItem>Email</DropdownMenuItem>
+ *     </DropdownMenuSubContent>
+ *   </DropdownMenuSub>
+ * </DropdownMenuContent>
+ * ```
+ *
+ * @see Storybook — https://fileverse-ui.vercel.app/?path=/docs/components-dropdownmenu--docs
+ * @see Radix primitive — https://www.radix-ui.com/primitives/docs/components/dropdown-menu
+ *
+ * @remarks
+ * The root. Manages open state and must wrap the trigger and content. Pass
+ * `open` / `onOpenChange` to control it, or `defaultOpen` for the uncontrolled
+ * case.
+ */
 export declare const DropdownMenu: React_2.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 
+/**
+ * Optional arrow pointing at the trigger. Not rendered by default — drop it
+ * inside {@link DropdownMenuContent} to opt in.
+ */
 export declare const DropdownMenuArrow: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuArrowProps & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A toggleable item with a check indicator. Controlled via `checked` /
+ * `onCheckedChange`; `checked` also accepts `"indeterminate"`.
+ */
 export declare const DropdownMenuCheckboxItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Floating panel that holds the menu's items. Portaled automatically.
+ * Position it with `side` / `align` / `sideOffset` (defaults to `4`).
+ */
 export declare const DropdownMenuContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Groups related {@link DropdownMenuItem}s for semantics/accessibility. Pair
+ * with a {@link DropdownMenuLabel} to title the group.
+ */
 export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * A selectable action. Wire up `onSelect`, set `disabled`, or use `inset` to
+ * align its label with sibling checkbox/radio items.
+ */
 export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Non-interactive heading for a section of items. Use `inset` to align it with
+ * sibling checkbox/radio items.
+ */
 export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Renders menu content into a portal. {@link DropdownMenuContent} already
+ * portals its children, so reach for this only when you need to control the
+ * portal container yourself.
+ */
 export declare const DropdownMenuPortal: React_2.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
 
+/**
+ * Wraps {@link DropdownMenuRadioItem}s so only one can be selected at a time.
+ * Controlled via `value` / `onValueChange`.
+ */
 export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * A single-choice item with a dot indicator. Must live inside a
+ * {@link DropdownMenuRadioGroup}; identified by its `value`.
+ */
 export declare const DropdownMenuRadioItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Thin horizontal divider between groups of items. */
 export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Right-aligned, muted hint for a keyboard shortcut. Purely presentational —
+ * render it as the trailing child of a {@link DropdownMenuItem}. It does not
+ * register the shortcut.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuItem>Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut></DropdownMenuItem>
+ * ```
+ */
 export declare const DropdownMenuShortcut: {
     ({ className, ...props }: React_2.HTMLAttributes<HTMLSpanElement>): JSX_2.Element;
     displayName: string;
 };
 
+/**
+ * Wraps a {@link DropdownMenuSubTrigger} and a {@link DropdownMenuSubContent}
+ * to create a nested sub-menu.
+ */
 export declare const DropdownMenuSub: React_2.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
 
+/** Floating panel that holds a sub-menu's items. Belongs inside {@link DropdownMenuSub}. */
 export declare const DropdownMenuSubContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Trigger row inside {@link DropdownMenuContent} that opens a nested sub-menu.
+ * Shows a trailing chevron. Set `inset` to align its label with sibling
+ * checkbox/radio items.
+ */
 export declare const DropdownMenuSubTrigger: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Button that opens the menu. Use `asChild` to render your own element (e.g.
+ * `Button` / `IconButton`) as the trigger instead of the default `<button>`.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuTrigger asChild>
+ *   <Button>Open</Button>
+ * </DropdownMenuTrigger>
+ * ```
+ */
 export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare const DynamicAlert: ({ title, description, variant, icon, className, iconClassName, ...props }: DynamicAlertProps) => JSX_2.Element;