@webority/ui-react 0.88.1 → 0.89.0

package/dist/types/components/AppConfirmDialog.d.ts

@@ -2,40 +2,79 @@
  * Destructive or confirm step built on AppModal.
  *
  * @param {object} props
- * @param {boolean} props.open Shows the dialog while true.
- * @param {string} props.title The dialog heading.
- * @param {import('react').ReactNode} [props.message] The text that explains what the user is confirming.
- * @param {string} [props.confirmLabel="Confirm"] The confirm button's text.
- * @param {string} [props.cancelLabel="Cancel"] The cancel button's text.
- * @param {boolean} [props.danger=false] Styles the confirm button as destructive; with no `tone` it also picks the delete icon.
- * @param {"success"|"error"|"warning"|"info"|"delete"|"primary"} [props.tone] The status icon. Unset, it is `delete` when `danger` is set and `info` otherwise.
- * @param {string} [props.image] URL of a custom illustration that replaces the tone artwork. Any source size is fine: the theme boxes it to the same footprint. It is decorative, rendered aria-hidden with an empty alt, so the title and message carry the meaning.
- * @param {number} [props.iconSize] Width and height of the illustration in px, for the tone artwork and a custom `image` alike. Unset, it is 120px with a message and 84px without.
- * @param {string} [props.confirmPhrase] Exact text the user must type before Confirm unlocks, e.g. a workspace name.
+ * @param {boolean} props.open
+ * @param {string} props.title
+ * @param {import('react').ReactNode} [props.message]
+ * @param {string} [props.confirmLabel]
+ * @param {string} [props.cancelLabel]
+ * @param {boolean} [props.danger]
+ * @param {"success"|"error"|"warning"|"info"|"delete"|"primary"} [props.tone]
+ * @param {string} [props.image]
+ * @param {number} [props.iconSize]
+ * @param {string} [props.confirmPhrase]
  * @param {() => void} props.onConfirm Runs when Confirm is pressed.
  * @param {() => void} [props.onClose] Runs when the dialog is dismissed through Cancel, the backdrop or Escape, unless `loading` blocks it.
- * @param {boolean} [props.loading=false] Busy state: shows a spinner and disables Confirm, Cancel and the confirm-phrase field, and blocks dismissal while the async action is in flight.
- * @param {boolean} [props.staticBackdrop=false] Passed to AppModal: when true, a backdrop click and Escape no longer close the dialog.
- * @param {'center'|'top'} [props.placement='center'] Vertical placement of the card: centred, or pinned near the top.
- * @param {'sm'|'md'|'lg'|'xl'|number} [props.size='md'] Card width: a preset, or an exact max-width in px for a custom size.
- * @param {string} [props.className=""] Merged with the dialog's own `wui-confirm` class.
+ * @param {boolean} [props.loading]
+ * @param {boolean} [props.staticBackdrop]
+ * @param {'center'|'top'} [props.placement]
+ * @param {'sm'|'md'|'lg'|'xl'|number} [props.size]
+ * @param {string} [props.className]
  */
 export default function AppConfirmDialog(props: {
+    /** Shows the dialog while true. */
     open: boolean;
+    /** The dialog heading. */
     title: string;
+    /** The text that explains what the user is confirming. */
     message?: import('react').ReactNode;
+    /**
+     * The confirm button's text.
+     * @default "Confirm"
+     */
     confirmLabel?: string;
+    /**
+     * The cancel button's text.
+     * @default "Cancel"
+     */
     cancelLabel?: string;
+    /**
+     * Styles the confirm button as destructive; with no tone it also picks the delete icon.
+     * @default false
+     */
     danger?: boolean;
+    /** The status icon. Unset, it is delete when danger is set and info otherwise. */
     tone?: "success" | "error" | "warning" | "info" | "delete" | "primary";
+    /** URL of a custom illustration that replaces the tone artwork. Any source size is fine: the theme boxes it to the same footprint. It is decorative, so the title and message carry the meaning. */
     image?: string;
+    /** Width and height of the illustration in px, for the tone artwork and a custom image alike. Unset, it is 120px with a message and 84px without. */
     iconSize?: number;
+    /** Exact text the user must type before Confirm unlocks, such as a workspace name. */
     confirmPhrase?: string;
     onConfirm: () => void;
     onClose?: () => void;
+    /**
+     * Busy state: shows a spinner and disables Confirm, Cancel and the confirm-phrase field, and blocks dismissal while the async action is in flight.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Passed to AppModal: when true, a backdrop click and Escape no longer close the dialog.
+     * @default false
+     */
     staticBackdrop?: boolean;
+    /**
+     * Vertical placement of the card: centred, or pinned near the top.
+     * @default "center"
+     */
     placement?: 'center' | 'top';
+    /**
+     * Card width: a preset, or an exact max-width in px for a custom size.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg' | 'xl' | number;
+    /**
+     * Merged with the dialog's own wui-confirm class.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppConsentBanner.d.ts

@@ -23,32 +23,65 @@ import "@webority/ui-elements/elements/consent-banner";
  * ```
  *
  * @param {object} props
- * @param {string} [props.heading='Cookies on this site'] Heading, and the dialog's accessible name.
- * @param {string} [props.description] The explanation above the buttons.
- * @param {string} [props.policyHref] Link to the cookie policy; no link when omitted.
- * @param {string} [props.policyLabel='Cookie policy'] The policy link's text.
- * @param {string} [props.analyticsDescription] What the analytics category covers.
- * @param {string} [props.functionalDescription] What the functional category covers.
- * @param {string} [props.marketingDescription] What the marketing category covers.
- * @param {Array<"analytics"|"functional"|"marketing">} [props.categories=['analytics','functional','marketing']] The optional categories to show. Essential always shows. A category left out has no row, saves as off and is never granted by Accept all.
- * @param {"bottom-left"|"bottom-right"|"bar"} [props.position='bottom-left'] The corner it pins to, or the full-width bar. bar is a slim full-width bar along the bottom at every width.
- * @param {boolean} [props.standalone=false] Render sealed in a shadow root with bundled styles, for a page that does not load `@webority/theme`.
- * @param {boolean} [props.preview=false] Draw the banner open without reading or saving consent, for a design surface that never ran initConsent. Nothing is stored.
- * @param {string} [props.className] Extra classes on the element.
+ * @param {string} [props.heading]
+ * @param {string} [props.description]
+ * @param {string} [props.policyHref]
+ * @param {string} [props.policyLabel]
+ * @param {string} [props.analyticsDescription]
+ * @param {string} [props.functionalDescription]
+ * @param {string} [props.marketingDescription]
+ * @param {Array<"analytics"|"functional"|"marketing">} [props.categories]
+ * @param {"bottom-left"|"bottom-right"|"bar"} [props.position]
+ * @param {boolean} [props.standalone]
+ * @param {boolean} [props.preview]
+ * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style] Inline style; lands on the element with `className`.
  */
 export default function AppConsentBanner(props: {
+    /**
+     * Heading, and the dialog's accessible name.
+     * @default "Cookies on this site"
+     */
     heading?: string;
+    /** The explanation above the buttons. */
     description?: string;
+    /** Link to the cookie policy; no link when omitted. */
     policyHref?: string;
+    /**
+     * The policy link's text.
+     * @default "Cookie policy"
+     */
     policyLabel?: string;
+    /** What the analytics category covers. */
     analyticsDescription?: string;
+    /** What the functional category covers. */
     functionalDescription?: string;
+    /** What the marketing category covers. */
     marketingDescription?: string;
+    /**
+     * The optional categories to show; essential always shows. A category left out has no row, saves as off and is never granted by Accept all.
+     * @default ["analytics","functional","marketing"]
+     */
     categories?: Array<"analytics" | "functional" | "marketing">;
+    /**
+     * The corner it pins to, or the full-width bar. bar is a slim full-width bar along the bottom at every width.
+     * @default "bottom-left"
+     */
     position?: "bottom-left" | "bottom-right" | "bar";
+    /**
+     * Render sealed in a shadow root with bundled styles, for a page that does not load `@webority/theme`.
+     * @default false
+     */
     standalone?: boolean;
+    /**
+     * Draw the banner open without reading or saving consent, for a design surface that never ran initConsent. Nothing is stored.
+     * @default false
+     */
     preview?: boolean;
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
     style?: import('react').CSSProperties;
 }): import("react").JSX.Element;

package/dist/types/components/AppContextMenu.d.ts

@@ -16,21 +16,21 @@ import "@webority/ui-elements/elements/context-menu";
  * the parity check reads the first signature it finds as the component's public props.
  *
  * @param {object} props
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, disabled?: boolean, divider?: true }[]} [props.items]
- *   The AppDropdown item model. `icon` is a glyph name or a node, `image` a picture URL. A
- *   `disabled` item is listed but skipped by the arrow keys and cannot be chosen. An item with
- *   `divider: true` renders a separator and needs only a unique `key`.
- * @param {string} [props.target] CSS selector of the elements the menu serves. Without it, the
- *   menu serves `children`.
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, disabled?: boolean, divider?: boolean }[]} [props.items]
+ * @param {string} [props.target]
  * @param {import('react').ReactNode} [props.children] The region to attach to, when `target` is not used.
- * @param {string} [props.ariaLabel='Context menu'] Accessible name of the menu.
- * @param {boolean} [props.disabled=false] Turns the menu off; the browser's own menu shows instead.
+ * @param {string} [props.ariaLabel]
+ * @param {boolean} [props.disabled]
  * @param {(detail: { region: Element, origin: Element, x: number, y: number }) => void} [props.onOpen]
  *   Called as the menu opens. `region` is the matched target, `origin` the element the user acted on inside it.
- * @param {string} [props.menuClassName] Extra classes on the menu panel.
+ * @param {string} [props.menuClassName]
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
  */
 export default function AppContextMenu(props: {
+    /**
+     * The AppDropdown item model: one entry per row, or a separator when divider is true.
+     * @default []
+     */
     items?: {
         key: string;
         label?: string;
@@ -40,11 +40,20 @@ export default function AppContextMenu(props: {
         onClick?: () => void;
         danger?: boolean;
         disabled?: boolean;
-        divider?: true;
+        divider?: boolean;
     }[];
+    /** CSS selector of the elements the menu serves. Without it, the menu serves `children`. */
     target?: string;
     children?: import('react').ReactNode;
+    /**
+     * Accessible name of the menu.
+     * @default "Context menu"
+     */
     ariaLabel?: string;
+    /**
+     * Turns the menu off; the browser's own menu shows instead.
+     * @default false
+     */
     disabled?: boolean;
     onOpen?: (detail: {
         region: Element;
@@ -52,6 +61,10 @@ export default function AppContextMenu(props: {
         x: number;
         y: number;
     }) => void;
+    /**
+     * Extra classes on the menu panel.
+     * @default ""
+     */
     menuClassName?: string;
     linkComponent?: import('react').ElementType;
 }): import("react").JSX.Element;

package/dist/types/components/AppCopyButton.d.ts

@@ -6,26 +6,56 @@
  * Supports both button form (label + icon) and icon-only form (actionable icon).
  *
  * @param {object} props
- * @param {string} props.text           The text to copy (required)
- * @param {string} [props.label="Copy"] Button label
- * @param {string} [props.copiedLabel="Copied"] Label shown after successful copy
- * @param {boolean} [props.iconOnly]    Render as an icon-only button (like AppActionIcon); label becomes aria-label
- * @param {"sm"|"md"|"lg"} [props.size="md"] Button size
- * @param {"ghost"|"outline"|"secondary"|"light"} [props.variant="ghost"] Button variant
+ * @param {string} props.text
+ * @param {string} [props.label]
+ * @param {string} [props.copiedLabel]
+ * @param {boolean} [props.iconOnly]
+ * @param {"sm"|"md"|"lg"} [props.size]
+ * @param {"ghost"|"outline"|"secondary"|"light"} [props.variant]
  * @param {() => void} [props.onCopied] Callback fired on successful copy
- * @param {string} [props.className]    Custom className
- * @param {string} [props.tooltip]      A collision-aware hover/focus tooltip (via AppTooltip / Popper) — flips to stay on-screen.
- * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"] Preferred tooltip side; `auto` picks the side with the most room.
+ * @param {string} [props.className]
+ * @param {string} [props.tooltip]
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement]
  */
 export default function AppCopyButton(props: {
+    /** The text to copy. */
     text: string;
+    /**
+     * Button label.
+     * @default "Copy"
+     */
     label?: string;
+    /**
+     * Label shown after a successful copy.
+     * @default "Copied"
+     */
     copiedLabel?: string;
+    /**
+     * Render as an icon-only button (like AppActionIcon); label becomes aria-label.
+     * @default false
+     */
     iconOnly?: boolean;
+    /**
+     * Button size.
+     * @default "md"
+     */
     size?: "sm" | "md" | "lg";
+    /**
+     * Button variant.
+     * @default "ghost"
+     */
     variant?: "ghost" | "outline" | "secondary" | "light";
     onCopied?: () => void;
+    /**
+     * Custom className.
+     * @default ""
+     */
     className?: string;
+    /** A collision-aware hover and focus tooltip (via AppTooltip) that flips to stay on screen. */
     tooltip?: string;
+    /**
+     * Preferred tooltip side; `auto` picks the side with the most room.
+     * @default "auto"
+     */
     tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
 }): any;

package/dist/types/components/AppCountrySelect.d.ts

@@ -1,24 +1,73 @@
 import "@webority/ui-elements/elements/country-select";
 declare const AppCountrySelect: import("react").ForwardRefExoticComponent<{
+    /** Selected ISO 3166-1 alpha-2 code, e.g. "IN". */
     value?: string;
     onChange?: (value: string) => void;
+    /** Limit the list to these ISO codes (alphabetical by name). Omitted, every country is listed. */
     countries?: string[];
+    /**
+     * Show the search box in the menu.
+     * @default true
+     */
     searchable?: boolean;
+    /**
+     * Control size, same as AppInput.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Class to apply to the control element.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Class to apply to the wrapper field div.
+     * @default ""
+     */
     fieldClassName?: string;
+    /**
+     * Text shown in the empty field.
+     * @default "Select country"
+     */
     placeholder?: string;
+    /**
+     * Text shown in the search box of the menu.
+     * @default "Search countries..."
+     */
     searchPlaceholder?: string;
+    /**
+     * Show a control that clears the chosen country.
+     * @default false
+     */
     clearable?: boolean;
-    floatingLabel?: boolean;
+    /**
+     * Where the label rests. Off keeps it above the control. Border sits the label inside as a placeholder, then slides it onto the top border on focus or once a country is chosen. Needs `label`.
+     * @default "off"
+     */
+    floatingLabel?: "off" | "border";
+    /** Disables the control. */
     disabled?: boolean;
+    /** The visible field label. */
     label?: import('react').ReactNode;
+    /**
+     * Marks the field required.
+     * @default false
+     */
     required?: boolean;
+    /** Error message shown under the field; marks the control invalid. */
     error?: string;
+    /** Help text shown under the field when there is no error. */
     hint?: string;
+    /** Help content shown in an info tip beside the label. */
     help?: import('react').ReactNode;
+    /**
+     * Accessible name for that info tip.
+     * @default "More information"
+     */
     helpLabel?: string;
+    /** DOM id for the control and the label's `for` target. */
     id?: string;
+    /** Form field name. */
     name?: string;
 } & import("react").RefAttributes<any>>;
 export default AppCountrySelect;

package/dist/types/components/AppDashboardCell.d.ts

@@ -3,12 +3,20 @@
  * width under 576px. A card or tile inside fills the cell's height.
  *
  * @param {object} props
- * @param {3|4|6|12} [props.span=12] How many of the twelve columns the cell spans.
+ * @param {3|4|6|12} [props.span]
  * @param {import('react').ReactNode} props.children The card or tile.
- * @param {string} [props.className] Extra classes on the cell.
+ * @param {string} [props.className]
  */
 export default function AppDashboardCell(props: {
+    /**
+     * How many of the twelve columns the cell spans.
+     * @default 12
+     */
     span?: 3 | 4 | 6 | 12;
     children: import('react').ReactNode;
+    /**
+     * Extra classes on the cell.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppDashboardGrid.d.ts

@@ -14,9 +14,13 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children `AppDashboardCell`s.
- * @param {string} [props.className] Extra classes on the grid.
+ * @param {string} [props.className]
  */
 export default function AppDashboardGrid(props: {
     children: import('react').ReactNode;
+    /**
+     * Extra classes on the grid.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppDataTable.d.ts

@@ -11,41 +11,27 @@
  * @param {(row: object, index: number) => string|number} [props.rowKey]
  * @param {{ key: string, dir: "asc"|"desc" }} [props.sort]
  * @param {(key: string) => void} [props.onSort]
- * @param {boolean} [props.loading=false]
- * @param {number} [props.skeletonRows=5]
- * @param {import('react').ReactNode} [props.empty] Shown when there are no rows and the source is empty (`sourceCount` 0), or no `emptyFiltered` is given.
- * @param {import('react').ReactNode} [props.emptyFiltered] Shown when there are no rows and `sourceCount` is unset or above 0.
- * @param {number} [props.sourceCount] The number of rows before filtering. 0 means the source is empty and `empty` shows;
- *   unset means the table was filtered.
+ * @param {boolean} [props.loading]
+ * @param {number} [props.skeletonRows]
+ * @param {import('react').ReactNode} [props.empty]
+ * @param {import('react').ReactNode} [props.emptyFiltered]
+ * @param {number} [props.sourceCount]
  * @param {(row: object) => import('react').ReactNode} [props.rowActions]
  * @param {string} [props.rowActionsLabel]
- * @param {object} [props.pagination] The footer's state, usually straight from usePagination:
- *   `{ page, totalPages, pageSize, total, setPage, setPageSize }`, plus the optional `pageSizes`
- *   and `mode` that AppTablePagination takes. The footer shows once `total` is above the smallest of
- *   `pageSizes` (or `pageSize` when there are none) and stays
- *   in place while `loading`, so the table does not jump between pages.
+ * @param {object} [props.pagination]
  * @param {string} [props.ariaLabel]
- * @param {string} [props.className] Extra classes on the <table> (column/table styling).
- * @param {string} [props.wrapperClassName] Extra classes on the `.table-wrap` outer div — the
- *   padding hook. Manage the table's inset from here (e.g. a class that sets `--wui-table-pad`);
- *   the Razor counterpart is a plain `class` on `<app-data-table>`.
- * @param {'comfortable'|'cozy'|'compact'} [props.density='comfortable'] Row height: 54 / 48 / 40px.
- *   compact is one line per row (the identity subline is hidden). An avatar with no size of its own
- *   follows the density (32 / 28 / 24px).
- * @param {'auto'|'fixed'} [props.tableLayout='auto'] fixed holds every column to its width or minWidth and clips overflowing text; auto sizes columns to their content.
- * @param {boolean} [props.striped=false] Alternate-row shading in place of divider lines.
- * @param {boolean} [props.flush=false] No wrapper padding above the column header row.
- * @param {boolean} [props.rowDrag=false] Rows drag onto page elements marked data-wui-drop-target; a ticked row drags the whole selection. Fires wui:row-drop ({ keys, target }) on the wrap. Razor: row-drag.
- * @param {string|number} [props.maxHeight] Caps the table's height; the body scrolls inside it with
- *   the header pinned. Without it there is no scroll box for the header to stick to.
- * @param {string[]} [props.hiddenColumns] Keys of `hideable` columns to leave out (from useTableView).
- *   A column that is not hideable always shows.
- * @param {boolean} [props.stackOnMobile=false] Below 768px, shows each row as a card: the first
- *   column on top, then "label: value" lines from the column labels, actions at the bottom.
- * @param {boolean} [props.stickyFirstColumn=false] Pins the first column (and the select/expand
- *   column before it) while a wide table scrolls sideways.
- * @param {boolean} [props.stickyActions=false] Pins the last column, where `rowActions` render, to the
- *   end edge while a wide table scrolls sideways, so a row's actions stay in view in a narrow box.
+ * @param {string} [props.className]
+ * @param {string} [props.wrapperClassName]
+ * @param {'comfortable'|'cozy'|'compact'} [props.density]
+ * @param {'auto'|'fixed'} [props.tableLayout]
+ * @param {boolean} [props.striped]
+ * @param {boolean} [props.flush]
+ * @param {boolean} [props.rowDrag]
+ * @param {string|number} [props.maxHeight]
+ * @param {string[]} [props.hiddenColumns]
+ * @param {boolean} [props.stackOnMobile]
+ * @param {boolean} [props.stickyFirstColumn]
+ * @param {boolean} [props.stickyActions]
  * @param {(row: object) => string} [props.rowHref] Makes the whole row open this URL on click or Enter
  *   (Ctrl/Cmd or middle click opens a new tab). Checkboxes, buttons, links and menus in the row keep
  *   their own behaviour. Razor: `data-href` on the <tr>.
@@ -53,12 +39,9 @@
  *   on it, for in-page actions (open a drawer). Same nested-control rule as rowHref.
  * @param {(row: object) => 'success'|'warning'|'danger'|'info'|undefined} [props.rowStatus] A coloured
  *   bar on the row's leading edge, e.g. danger for an overdue invoice. Undefined draws none.
- * @param {string|number} [props.activeRowKey] The key (what `rowKey` returns) of the row whose record is
- *   open, e.g. in a detail pane beside the table. That row gets `aria-current="true"` and the subtle
- *   primary background; it is separate from `rowStatus`'s edge bar and from selected (checkbox) rows.
- *   Razor: `active-row-key` against each row's `data-row-key`.
- * @param {boolean} [props.selectable=false] Render a leading checkbox column. Fires a bubbling `selectionchange` ({ selected, total, keys }) when the ticked count changes, as Razor does.
- * @param {Set<string|number>} [props.selectedIds] Currently selected row keys.
+ * @param {string|number} [props.activeRowKey]
+ * @param {boolean} [props.selectable]
+ * @param {Set<string|number>} [props.selectedIds]
  * @param {(row: object, index: number) => boolean} [props.isRowSelectable] A row it returns false for shows a disabled
  *   box and is skipped by select all, the selected count and bulk actions. With it, select all calls `onToggleRow`
  *   for each selectable row whose state changes, not `onToggleAll`. Unset, every row is selectable.
@@ -70,20 +53,12 @@
  *   to call several times in a row (a functional state update). Razor: built in.
  * @param {(row: object) => import('react').ReactNode} [props.renderExpanded] When given, each row
  *   gets a leading expand toggle; the returned content renders in a full-width row beneath it.
- * @param {boolean} [props.resizableColumns=false] Each column but the last gets a handle on its end edge:
- *   drag it, or focus it and press the arrow keys (Shift for bigger steps, Home or a double-click to
- *   undo). The table then keeps fixed widths measured from its rows, and the last column takes the rest.
- *   Razor: `resizable-columns`.
- * @param {string} [props.viewKey] Remembers resized widths in this browser under this name (the same name
- *   `useTableView` takes). Razor: `view-key`, with `data-key` on each header cell.
- * @param {string} [props.groupBy] A column key: rows gather under a header row per value of it, in the
- *   order each value first appears (sort within groups by sorting `rows`), each header collapsing its
- *   rows and showing their count. Razor: `group-by`, against the header cells' `data-key`.
+ * @param {boolean} [props.resizableColumns]
+ * @param {string} [props.viewKey]
+ * @param {string} [props.groupBy]
  * @param {(value: unknown, rows: object[]) => import('react').ReactNode} [props.groupLabel] A group
  *   header's label; without it the value shows as a cell would.
- * @param {boolean} [props.virtual=false] Renders only the rows in view (plus a margin) for a long
- *   client-side list. Needs `maxHeight`; rows are taken to share one height, so it is not for
- *   `renderExpanded` or `stackOnMobile`. Razor: `virtual`.
+ * @param {boolean} [props.virtual]
  * @param {(row: object) => boolean} [props.rowSaving] True while the row's add or change is on its way to
  *   the server: the row shows at once, tinted and marked busy, instead of waiting for the answer. Put an
  *   added row in `rows` straight away with this true (give it its final key if you can, so the outcome is
@@ -98,50 +73,128 @@
  * on a `virtual` table.
  */
 export default function AppDataTable(props: {
+    /** The columns, each an object with a key and a label, plus optional settings such as sortable, hideable, pin, align and grow. */
     columns: object[];
+    /** The row objects shown in the table, one per row, read through each column's key. */
     rows: object[];
     rowKey?: (row: object, index: number) => string | number;
+    /** The column the rows are sorted by and the direction, as the caller holds them. */
     sort?: {
         key: string;
         dir: "asc" | "desc";
     };
     onSort?: (key: string) => void;
+    /**
+     * Shows skeleton rows in place of the rows.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * How many skeleton rows to draw while loading.
+     * @default 5
+     */
     skeletonRows?: number;
+    /**
+     * Shown when there are no rows and the source is empty (sourceCount 0), or no emptyFiltered is given.
+     * @default "No records found."
+     */
     empty?: import('react').ReactNode;
+    /** Shown when there are no rows and sourceCount is unset or above 0. */
     emptyFiltered?: import('react').ReactNode;
+    /** The number of rows before filtering. 0 means the source is empty and empty shows; unset means the table was filtered. */
     sourceCount?: number;
     rowActions?: (row: object) => import('react').ReactNode;
+    /** The heading text of the trailing actions column. */
     rowActionsLabel?: string;
+    /** The footer's state, usually straight from usePagination. The footer shows once total is above the smallest page size and stays in place while loading. */
     pagination?: object;
+    /** Accessible name for the table. */
     ariaLabel?: string;
+    /**
+     * Extra classes on the table element.
+     * @default ""
+     */
     className?: string;
+    /**
+     * Extra classes on the outer table-wrap div, the padding hook. Manage the table's inset from here, for example a class that sets --wui-table-pad.
+     * @default ""
+     */
     wrapperClassName?: string;
+    /**
+     * Row height: 54, 48 or 40 px. Compact is one line per row and hides the identity subline.
+     * @default "comfortable"
+     */
     density?: 'comfortable' | 'cozy' | 'compact';
+    /**
+     * fixed holds every column to its width or minWidth and clips overflowing text; auto sizes columns to their content.
+     * @default "auto"
+     */
     tableLayout?: 'auto' | 'fixed';
+    /**
+     * Alternate-row shading in place of divider lines.
+     * @default false
+     */
     striped?: boolean;
+    /**
+     * No wrapper padding above the column header row.
+     * @default false
+     */
     flush?: boolean;
+    /**
+     * Rows drag onto page elements marked data-wui-drop-target; a ticked row drags the whole selection. Fires wui:row-drop with keys and target on the wrapper.
+     * @default false
+     */
     rowDrag?: boolean;
+    /** Caps the table's height; the body scrolls inside it with the header pinned. Without it there is no scroll box for the header to stick to. */
     maxHeight?: string | number;
+    /** Keys of hideable columns to leave out, from useTableView. A column that is not hideable always shows. */
     hiddenColumns?: string[];
+    /**
+     * Below 768px, shows each row as a card: the first column on top, then label and value lines from the column labels, actions at the bottom.
+     * @default false
+     */
     stackOnMobile?: boolean;
+    /**
+     * Pins the first column, and the select or expand column before it, while a wide table scrolls sideways.
+     * @default false
+     */
     stickyFirstColumn?: boolean;
+    /**
+     * Pins the last column, where rowActions render, to the end edge while a wide table scrolls sideways, so a row's actions stay in view in a narrow box.
+     * @default false
+     */
     stickyActions?: boolean;
     rowHref?: (row: object) => string;
     onRowClick?: (row: object) => void;
     rowStatus?: (row: object) => 'success' | 'warning' | 'danger' | 'info' | undefined;
+    /** The key, as rowKey returns it, of the row whose record is open, for example in a detail pane beside the table. That row gets aria-current and a subtle primary background, apart from the row status bar and selected rows. */
     activeRowKey?: string | number;
+    /**
+     * Renders a leading checkbox column. Fires a bubbling selectionchange with selected, total and keys when the ticked count changes.
+     * @default false
+     */
     selectable?: boolean;
+    /** Currently selected row keys, as a Set. */
     selectedIds?: Set<string | number>;
     isRowSelectable?: (row: object, index: number) => boolean;
     onToggleRow?: (id: string | number) => void;
     onToggleAll?: (checked: boolean) => void;
     onSelectRange?: (keys: Array<string | number>, checked: boolean) => void;
     renderExpanded?: (row: object) => import('react').ReactNode;
+    /**
+     * Each column but the last gets a handle on its end edge: drag it, or focus it and press the arrow keys. The table then keeps fixed widths measured from its rows, and the last column takes the rest.
+     * @default false
+     */
     resizableColumns?: boolean;
+    /** Remembers resized widths in this browser under this name, the same name useTableView takes. */
     viewKey?: string;
+    /** A column key: rows gather under a header row per value of it, in the order each value first appears, each header collapsing its rows and showing their count. */
     groupBy?: string;
     groupLabel?: (value: unknown, rows: object[]) => import('react').ReactNode;
+    /**
+     * Renders only the rows in view, plus a margin, for a long client-side list. Needs maxHeight; rows are taken to share one height, so it is not for renderExpanded or stackOnMobile.
+     * @default false
+     */
     virtual?: boolean;
     rowSaving?: (row: object) => boolean;
     rowSaveError?: (row: object) => string | undefined;