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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.64.gdd82b76a",
+  "version": "0.11.1-dev.66.g88142bbf",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -13320,6 +13320,26 @@
           }
         ]
       },
+      {
+        "name": "Table.EmptyRow",
+        "description": "Table.EmptyRow — a body row with one muted cell across all columns. `children` holds the message and an optional action.",
+        "props": [
+          {
+            "name": "colSpan",
+            "required": true,
+            "type": "number",
+            "defaultValue": null,
+            "description": "Number of columns the message spans."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLTableElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          }
+        ]
+      },
       {
         "name": "Table.Header",
         "description": "Table.Header — the `<thead>` section.",
@@ -13370,6 +13390,13 @@
         "name": "Table.Row",
         "description": "Table.Row — a `<tr>` in header or body.",
         "props": [
+          {
+            "name": "disabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Dims the row and takes it out of use: its select checkbox, `RowLink` and `RowButton` stop responding."
+          },
           {
             "name": "ref",
             "required": false,
@@ -13381,7 +13408,7 @@
       },
       {
         "name": "Table.RowButton",
-        "description": "Table.RowButton — a `<button>` that stands for its whole row, such as one that opens a drawer. Use it when the row acts\ninstead of navigating; a link that goes to a page is a `Table.RowLink`.",
+        "description": "Table.RowButton — a `<button>` that stands for its whole row, such as one that opens a drawer. Use it when the row acts\ninstead of navigating; a link that goes to a page is a `Table.RowLink`. In a disabled row it renders `disabled`, which\nonly takes effect when it renders a button.",
         "props": [
           {
             "name": "ref",
@@ -13419,6 +13446,312 @@
           }
         ]
       },
+      {
+        "name": "Table.SelectAllCell",
+        "description": "Table.SelectAllCell — a `<th>` action cell with the select-all checkbox. The checkbox is named by `label` plus the\ncounter. `disabled` follows the row's `disabled` unless set.",
+        "props": [
+          {
+            "name": "checked",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "undefined",
+            "description": "Whether the checkbox is currently ticked.\n\nTo render an uncontrolled checkbox, use the `defaultChecked` prop instead."
+          },
+          {
+            "name": "children",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "The counter beside the checkbox, such as `2/4`. The app computes it."
+          },
+          {
+            "name": "className",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Reaches the `<th>`, not the checkbox."
+          },
+          {
+            "name": "colSpan",
+            "required": false,
+            "type": "number",
+            "defaultValue": null,
+            "description": "Number of columns the cell spans, such as the select and thumbnail columns."
+          },
+          {
+            "name": "defaultChecked",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the checkbox is initially ticked.\n\nTo render a controlled checkbox, use the `checked` prop instead."
+          },
+          {
+            "name": "disabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the component should ignore user interaction."
+          },
+          {
+            "name": "form",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Identifies the form that owns the hidden input.\nUseful when the checkbox is rendered outside the form."
+          },
+          {
+            "name": "id",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "The id of the input element."
+          },
+          {
+            "name": "indeterminate",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the checkbox is in a mixed state: neither ticked, nor unticked."
+          },
+          {
+            "name": "inputRef",
+            "required": false,
+            "type": "Ref<HTMLInputElement>",
+            "defaultValue": null,
+            "description": "A ref to access the hidden `<input>` element."
+          },
+          {
+            "name": "label",
+            "required": false,
+            "type": "string",
+            "defaultValue": "Select all",
+            "description": "Names the checkbox for assistive tech; the counter follows it."
+          },
+          {
+            "name": "name",
+            "required": false,
+            "type": "string",
+            "defaultValue": "undefined",
+            "description": "Identifies the field when a form is submitted."
+          },
+          {
+            "name": "nativeButton",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
+          },
+          {
+            "name": "onCheckedChange",
+            "required": false,
+            "type": "(\n  checked: boolean,\n  eventDetails: {\n    reason: \"none\";\n    event: Event;\n    cancel: () => void;\n    allowPropagation: () => void;\n    isCanceled: boolean;\n    isPropagationAllowed: boolean;\n    trigger: Element;\n  }\n) => void",
+            "defaultValue": null,
+            "description": "Event handler called when the checkbox is ticked or unticked."
+          },
+          {
+            "name": "parent",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the checkbox controls a group of child checkboxes.\n\nMust be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group)."
+          },
+          {
+            "name": "readOnly",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the user should be unable to tick or untick the checkbox."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLTableElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, CheckboxRootState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "required",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the user must tick the checkbox before submitting a form."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: CheckboxRootState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          },
+          {
+            "name": "uncheckedValue",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "The value submitted with the form when the checkbox is unchecked.\nBy default, unchecked checkboxes do not submit any value, matching native checkbox behavior."
+          },
+          {
+            "name": "value",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "The value of the selected checkbox."
+          }
+        ]
+      },
+      {
+        "name": "Table.SelectCell",
+        "description": "Table.SelectCell — a `<td>` action cell holding the row's checkbox. `checked` and `onCheckedChange` belong to the app.\n`disabled` follows the row's `disabled` unless set.",
+        "props": [
+          {
+            "name": "aria-label",
+            "required": true,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Names the checkbox, such as `Select brain_mr_t1_0142`."
+          },
+          {
+            "name": "checked",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "undefined",
+            "description": "Whether the checkbox is currently ticked.\n\nTo render an uncontrolled checkbox, use the `defaultChecked` prop instead."
+          },
+          {
+            "name": "className",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Reaches the `<td>`, not the checkbox."
+          },
+          {
+            "name": "defaultChecked",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the checkbox is initially ticked.\n\nTo render a controlled checkbox, use the `checked` prop instead."
+          },
+          {
+            "name": "disabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the component should ignore user interaction."
+          },
+          {
+            "name": "form",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Identifies the form that owns the hidden input.\nUseful when the checkbox is rendered outside the form."
+          },
+          {
+            "name": "id",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "The id of the input element."
+          },
+          {
+            "name": "indeterminate",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the checkbox is in a mixed state: neither ticked, nor unticked."
+          },
+          {
+            "name": "inputRef",
+            "required": false,
+            "type": "Ref<HTMLInputElement>",
+            "defaultValue": null,
+            "description": "A ref to access the hidden `<input>` element."
+          },
+          {
+            "name": "name",
+            "required": false,
+            "type": "string",
+            "defaultValue": "undefined",
+            "description": "Identifies the field when a form is submitted."
+          },
+          {
+            "name": "nativeButton",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
+          },
+          {
+            "name": "onCheckedChange",
+            "required": false,
+            "type": "(\n  checked: boolean,\n  eventDetails: {\n    reason: \"none\";\n    event: Event;\n    cancel: () => void;\n    allowPropagation: () => void;\n    isCanceled: boolean;\n    isPropagationAllowed: boolean;\n    trigger: Element;\n  }\n) => void",
+            "defaultValue": null,
+            "description": "Event handler called when the checkbox is ticked or unticked."
+          },
+          {
+            "name": "parent",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the checkbox controls a group of child checkboxes.\n\nMust be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group)."
+          },
+          {
+            "name": "readOnly",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the user should be unable to tick or untick the checkbox."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLTableElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, CheckboxRootState>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "required",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the user must tick the checkbox before submitting a form."
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: CheckboxRootState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          },
+          {
+            "name": "uncheckedValue",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "The value submitted with the form when the checkbox is unchecked.\nBy default, unchecked checkboxes do not submit any value, matching native checkbox behavior."
+          },
+          {
+            "name": "value",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "The value of the selected checkbox."
+          }
+        ]
+      },
       {
         "name": "Table.SortableHeaderCell",
         "description": "Table.SortableHeaderCell — a header cell whose label is a sort toggle,\npre-composing HeaderCell + HeaderButton so `aria-sort` and the direction\nindicator aren't re-derived per consumer. Omit `onToggle` for a plain cell.",

package/src/llms/llms.gen.txt

@@ -276,7 +276,7 @@ Row of links to routes with a bar under the current one, such as the sections of
 
 ## Table
 - category: Display, status: stable
-Presentational table parts for static tabular data. Pair them with a headless table library for sorting, pagination, or selection.
+Presentational table parts for static tabular data. Pair them with a headless table library for sorting or pagination.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .table (jq: jq '.table' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
 ## Tabs

package/src/llms/skills/imf-web-ui-components/SKILL.md

@@ -99,4 +99,6 @@ import { ImageDisplayOptions } from "@imfusion/web-ui/integrations/image-display
 ## Data grids
 
 `Table` supplies styled table parts, not sorting or pagination. Pair them with a headless table library installed by the
-consumer. TanStack Table is the recommended choice. Use `Table.SortableHeaderCell` for sortable columns.
+consumer. TanStack Table is the recommended choice. Use `Table.SortableHeaderCell` for sortable columns. For selection, put
+`Table.SelectCell` in each row and `Table.SelectAllCell` in the header; the app owns the selected state and the counter.
+`Table.Row` takes `disabled` to lock a row, and `Table.EmptyRow` fills an empty body.