@imfusion/web-ui 0.11.1-dev.62.gfcd31b6e → 0.11.1-dev.64.gdd82b76a

package/CHANGELOG.md

@@ -9,6 +9,10 @@
   `priority` loads it eagerly with high fetch priority. A soft pulse shows while it loads and a glyph when it fails.
   `radius`, `fit`, `border`, `borderWidth` and `aspectRatio` shape the box. [Image](src/components/image/image.mdx)
   ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Menu` is a new action menu adapted from Base UI, with every upstream part. Items take `icon`, `description`, and `badge`;
+  `CheckboxItem` and `RadioItem` draw their check in the trailing cell; `Popup` has a `size` of `sm` (dense, the default) or
+  `md`. A menu where no item has an icon drops the icon gutter. [Menu](src/components/menu/menu.mdx)
+  ([WEBSDK-248](https://imfusion.atlassian.net/browse/WEBSDK-248)) — Nikolaus Brunner <brunner@imfusion.com>
 - `Dialog.Alert` composes a confirmation from props like `Dialog.Simple`, on Base UI's Alert Dialog: screen readers announce
   it as an `alertdialog`, it is always modal, and a click on the overlay leaves it open. `actions` is required, the header has
   no close button, and `status` takes any variant. It replaces a `Dialog.Simple` or a hand-composed `Dialog.Root` that asks
@@ -69,6 +73,10 @@
 
 ### Changed
 
+- `Button`, `IconButton`, and `CopyButton` keep their hover look while the popup, menu, or drawer they open is shown
+  (`data-popup-open` with `aria-expanded`). A tooltip does not trigger it. This includes a `Button` passed as `render` to a
+  `Popover.Trigger`, `Menu.Trigger`, or `Drawer.Trigger`.
+  [Button](src/components/button/button.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Dialog.Simple` and `Dialog.Inline` without children render no `Dialog.Body`, so the header sits directly on the footer
   without the body's padding between them. [Dialog](src/components/dialog/dialog.mdx)
   ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>

package/dist/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+export * as Menu from './menu';
+export { menuMeta } from './menu.meta';

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

@@ -0,0 +1,135 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { VariantProps } from 'class-variance-authority';
+declare const menuPopup: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const createHandle: typeof MenuPrimitive.createHandle;
+type RootProps<Payload = unknown> = React.ComponentProps<typeof MenuPrimitive.Root<Payload>>;
+/**
+ * Menu.Root — container that manages open state and the menu tree.
+ *
+ * @see https://base-ui.com/react/components/menu
+ * @llm https://base-ui.com/react/components/menu.md
+ */
+export declare function Root<Payload = unknown>(props: RootProps<Payload>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Menu.Trigger — native button that opens the menu. Pass `render={<Button />}` to use any element, such as a `Button`. */
+export declare function Trigger(props: React.ComponentProps<typeof MenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Trigger {
+    var displayName: string;
+}
+/** Menu.Portal — renders the positioner in a portal outside the main document flow. */
+export declare function Portal(props: React.ComponentProps<typeof MenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Portal {
+    var displayName: string;
+}
+/** Menu.Backdrop — overlay beneath the menu. */
+export declare function Backdrop(props: React.ComponentProps<typeof MenuPrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Backdrop {
+    var displayName: string;
+}
+/** Menu.Positioner — positions the popup relative to the trigger. */
+export declare function Positioner({ sideOffset, alignOffset, ...props }: React.ComponentProps<typeof MenuPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Positioner {
+    var displayName: string;
+}
+interface PopupProps extends React.ComponentProps<typeof MenuPrimitive.Popup> {
+    /** Row density: `sm` is dense with hairlines between rows that have a description, `md` is roomier. A submenu popup sets its own. @default "sm" */
+    size?: VariantProps<typeof menuPopup>["size"];
+}
+/** Menu.Popup — the visible surface of the menu. Its `size` sets the density of every item inside. */
+export declare function Popup({ size, ...props }: PopupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Popup {
+    var displayName: string;
+}
+/** Menu.Arrow — pointer arrow anchored to the popup edge. */
+export declare function Arrow(props: React.ComponentProps<typeof MenuPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Arrow {
+    var displayName: string;
+}
+/** Menu.Viewport — content wrapper that supports direction-aware transitions between triggers. */
+export declare function Viewport(props: React.ComponentProps<typeof MenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Viewport {
+    var displayName: string;
+}
+interface ItemSlots {
+    /** Glyph in the lead cell, such as `<Icon glyph={Plus} size={16} aria-hidden />`. A menu where no item has one drops the cell. */
+    icon?: React.ReactNode;
+    /** Muted second line under the text. */
+    description?: React.ReactNode;
+    /** Trailing label. A string or number renders as small mono text; any other node renders as given, such as a `Chip`. */
+    badge?: React.ReactNode;
+}
+interface ItemProps extends React.ComponentProps<typeof MenuPrimitive.Item>, ItemSlots {
+}
+/** Menu.Item — an action row. Without `label`, a string `children` is the text typeahead matches. */
+export declare function Item({ icon, description, badge, label, children, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}
+interface LinkItemProps extends React.ComponentProps<typeof MenuPrimitive.LinkItem>, ItemSlots {
+}
+/** Menu.LinkItem — a row that renders an `<a>`. Pass a router link as `render`. */
+export declare function LinkItem({ icon, description, badge, label, children, ...props }: LinkItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LinkItem {
+    var displayName: string;
+}
+/** Menu.CheckboxItemIndicator — marks a ticked checkbox row. A wrapped `CheckboxItem` renders one itself. */
+export declare function CheckboxItemIndicator(props: React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CheckboxItemIndicator {
+    var displayName: string;
+}
+interface CheckboxItemProps extends React.ComponentProps<typeof MenuPrimitive.CheckboxItem>, ItemSlots {
+}
+/** Menu.CheckboxItem — a row that toggles a setting. It draws its check in the trailing cell, after the badge. */
+export declare function CheckboxItem({ icon, description, badge, label, children, ...props }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CheckboxItem {
+    var displayName: string;
+}
+/** Menu.RadioGroup — groups radio rows so one is selected. */
+export declare function RadioGroup(props: React.ComponentProps<typeof MenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioGroup {
+    var displayName: string;
+}
+/** Menu.RadioItemIndicator — marks the selected radio row. A wrapped `RadioItem` renders one itself. */
+export declare function RadioItemIndicator(props: React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioItemIndicator {
+    var displayName: string;
+}
+interface RadioItemProps extends React.ComponentProps<typeof MenuPrimitive.RadioItem>, ItemSlots {
+}
+/** Menu.RadioItem — a row that selects one value of its `RadioGroup`. It draws its check in the trailing cell. */
+export declare function RadioItem({ icon, description, badge, label, children, ...props }: RadioItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioItem {
+    var displayName: string;
+}
+/** Menu.SubmenuRoot — container for a nested menu. */
+export declare function SubmenuRoot(props: React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SubmenuRoot {
+    var displayName: string;
+}
+interface SubmenuTriggerProps extends React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>, ItemSlots {
+}
+/** Menu.SubmenuTrigger — a row that opens a nested menu. It draws a chevron in the trailing cell. */
+export declare function SubmenuTrigger({ icon, description, badge, label, children, ...props }: SubmenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SubmenuTrigger {
+    var displayName: string;
+}
+/** Menu.Separator — divider line between rows or groups. */
+export declare function Separator(props: React.ComponentProps<typeof MenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Separator {
+    var displayName: string;
+}
+/** Menu.Group — groups related rows under a `GroupLabel`. */
+export declare function Group(props: React.ComponentProps<typeof MenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}
+/** Menu.GroupLabel — accessible label of a `Group`. */
+export declare function GroupLabel(props: React.ComponentProps<typeof MenuPrimitive.GroupLabel>): import("react/jsx-runtime").JSX.Element;
+export declare namespace GroupLabel {
+    var displayName: string;
+}
+export {};

package/dist/components/menu/menu.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const menuMeta: ComponentMeta;

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { Image, imageMeta } from './components/image';
 export { Kbd, kbdMeta } from './components/kbd';
 export { Logo, logoMeta } from './components/logo';
 export { Meter, meterMeta } from './components/meter';
+export { Menu, menuMeta } from './components/menu';
 export { NavigationMenu, navigationMenuMeta } from './components/navigation-menu';
 export { Progress, progressMeta } from './components/progress';
 export { Skeleton, skeletonMeta } from './components/skeleton';