@imfusion/web-ui 0.11.1-dev.64.gdd82b76a → 0.11.1-dev.66.g88142bbf

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ### 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.
@@ -77,6 +82,9 @@
   (`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>
@@ -188,10 +196,16 @@
 - `npm run dev` starts Storybook on the next free port again while another checkout's Storybook runs. — Nikolaus Brunner
   <brunner@imfusion.com>
 - A Storybook sidebar row's status icon stays in place on hover. — Nikolaus Brunner <brunner@imfusion.com>
+- A docs page's `Uses` links open the linked component's page on the hosted Storybook too. — Nikolaus Brunner
+  <brunner@imfusion.com>
 - `npm run ci:status` lists queued and running builds beside finished ones. — Nikolaus Brunner <brunner@imfusion.com>
 - Components — Nikolaus Brunner <brunner@imfusion.com>
   - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
   - A `Popover.Trigger` rendered as another component keeps that component's styles, so `render={<Button />}` looks like a Button.
+  - `ScrollArea` keeps scrolling inside only along a direction it overflows. Along the other one, the wheel scrolls the
+    page. [ScrollArea](src/components/scroll-area/scroll-area.mdx)
+- Components — Ehsan Shafiei <shafiei@imfusion.com>
+  - `Code.Block` passes scrolling to the page when the code cannot scroll farther in that direction. [Code](src/components/code/code.mdx)
 - `dist/style.css` opens with the layer order statement (`imf-ui.tokens`, `imf-ui.base`, `imf-ui.components`), so each
   component's own focus style beats the base focus ring and a focused field shows only its primary border.
   ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>

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 {};