@imfusion/web-ui 0.11.1-dev.62.gfcd31b6e → 0.11.1-dev.65.g9b6bba80

package/CHANGELOG.md

@@ -4,11 +4,20 @@
 
 ### Added
 
+- `Table.SelectCell` and `Table.SelectAllCell` put a row checkbox and a counted select-all checkbox in action columns,
+  `Table.Row` takes `disabled` to lock a row (its checkbox, `Table.RowLink` and `Table.RowButton` stop responding), and
+  `Table.EmptyRow` spans one muted cell across all columns. Selection state and the counter stay the app's.
+  [Table](src/components/table/table.mdx) ([WEBSDK-306](https://imfusion.atlassian.net/browse/WEBSDK-306)) — Nikolaus Brunner
+  <brunner@imfusion.com>
 - `Image` is a new picture box over native `<picture>` and `<img>`, with an AVIF and a WebP source and a fallback `<img>`.
   `width` and `height` are required and reserve the box before the image loads. It loads lazily and decodes asynchronously;
   `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 +78,13 @@
 
 ### 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>
+- An action cell that is not the last in its row drops its end padding, so a select gutter sits next to the column after it.
+  [Table](src/components/table/table.mdx) ([WEBSDK-306](https://imfusion.atlassian.net/browse/WEBSDK-306)) — 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/components/table/table.d.ts

@@ -1,4 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
+import { Checkbox } from '../checkbox';
 type CellActionProps = {
     /** Marks an action column: it shrinks to its content and keeps it on one line. */
     action?: boolean;
@@ -23,8 +24,12 @@ export declare function Body(props: React.ComponentProps<"tbody">): import("reac
 export declare namespace Body {
     var displayName: string;
 }
+type RowProps = React.ComponentProps<"tr"> & {
+    /** Dims the row and takes it out of use: its select checkbox, `RowLink` and `RowButton` stop responding. */
+    disabled?: boolean;
+};
 /** Table.Row — a `<tr>` in header or body. */
-export declare function Row(props: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+export declare function Row({ disabled, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Row {
     var displayName: string;
 }
@@ -48,7 +53,8 @@ export declare namespace RowLink {
 }
 /**
  * Table.RowButton — a `<button>` that stands for its whole row, such as one that opens a drawer. Use it when the row acts
- * instead of navigating; a link that goes to a page is a `Table.RowLink`.
+ * instead of navigating; a link that goes to a page is a `Table.RowLink`. In a disabled row it renders `disabled`, which
+ * only takes effect when it renders a button.
  */
 export declare function RowButton({ render, type, ...props }: useRender.ComponentProps<"button">): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace RowButton {
@@ -80,4 +86,45 @@ export declare function SortableHeaderCell({ sortDirection, onToggle, children,
 export declare namespace SortableHeaderCell {
     var displayName: string;
 }
+type SelectCellProps = Omit<React.ComponentProps<typeof Checkbox.Root>, "className" | "aria-label"> & {
+    /** Reaches the `<td>`, not the checkbox. */
+    className?: string;
+    /** Names the checkbox, such as `Select brain_mr_t1_0142`. */
+    "aria-label": string;
+};
+/**
+ * Table.SelectCell — a `<td>` action cell holding the row's checkbox. `checked` and `onCheckedChange` belong to the app.
+ * `disabled` follows the row's `disabled` unless set.
+ */
+export declare function SelectCell({ className, disabled, ...props }: SelectCellProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectCell {
+    var displayName: string;
+}
+type SelectAllCellProps = Omit<React.ComponentProps<typeof Checkbox.Root>, "className" | "children" | "aria-label" | "aria-labelledby"> & {
+    /** Reaches the `<th>`, not the checkbox. */
+    className?: string;
+    /** Number of columns the cell spans, such as the select and thumbnail columns. */
+    colSpan?: number;
+    /** The counter beside the checkbox, such as `2/4`. The app computes it. */
+    children?: React.ReactNode;
+    /** Names the checkbox for assistive tech; the counter follows it. */
+    label?: string;
+};
+/**
+ * Table.SelectAllCell — a `<th>` action cell with the select-all checkbox. The checkbox is named by `label` plus the
+ * counter. `disabled` follows the row's `disabled` unless set.
+ */
+export declare function SelectAllCell({ className, colSpan, children, label, disabled, ...props }: SelectAllCellProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectAllCell {
+    var displayName: string;
+}
+type EmptyRowProps = React.ComponentProps<"tr"> & {
+    /** Number of columns the message spans. */
+    colSpan: number;
+};
+/** Table.EmptyRow — a body row with one muted cell across all columns. `children` holds the message and an optional action. */
+export declare function EmptyRow({ colSpan, children, ...props }: EmptyRowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmptyRow {
+    var displayName: string;
+}
 export {};

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';