@foris/avocado-suite 1.10.2 → 1.10.3

package/dist/components/matrix-table/MatrixTable.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes, Key, ReactElement, ReactNode, RefAttributes } from 'react';
+/** Supported pinning edge, relative to the document direction. */
+export type MatrixTablePinnedSide = 'start';
+/**
+ * Inline alignment of a column's header and body cells. Logical, so `start` and
+ * `end` follow the document direction. Narrow numeric columns want `center`.
+ */
+export type MatrixTableAlign = 'start' | 'center' | 'end';
+/** What a group column and a detail column declare in common. */
+interface MatrixTableColumnBase {
+    /** Stable identity, unique across both groupColumns and columns. */
+    key: string;
+    /** Content of the column header. */
+    header: ReactNode;
+    /** Declared width in px. Applied to the `col`, the header cell and the body cell. */
+    width: number;
+    /**
+     * Pins the column at the logical start. Only a contiguous prefix of
+     * `groupColumns` followed by `columns` can be pinned; a later marker is
+     * ignored and warned about in development.
+     */
+    pinned?: MatrixTablePinnedSide;
+    /**
+     * Alignment of this column's header and body cells. Defaults to the matrix
+     * defaults: `center` for detail columns, whose values are short and read as a
+     * grid, and `start` for group columns, which hold blocks of text.
+     */
+    align?: MatrixTableAlign;
+    /** Class added to this column's header and body cells; modifiers may take precedence. */
+    className?: string;
+}
+/** A column whose single cell spans every detail row of its group. */
+export interface MatrixTableGroupColumn<TGroup> extends MatrixTableColumnBase {
+    /** Receives its own definition too, so one factory can serve many columns. */
+    renderGroupCell: (group: TGroup, column: MatrixTableGroupColumn<TGroup>) => ReactNode;
+}
+/** A column that renders one cell per detail row. */
+export interface MatrixTableColumn<TGroup, TRow> extends MatrixTableColumnBase {
+    /**
+     * Receives the row, its group and the column itself. The third argument is
+     * what lets a shared handler build a full payload — which row, which group,
+     * which column — without a closure per column.
+     */
+    renderCell: (row: TRow, group: TGroup, column: MatrixTableColumn<TGroup, TRow>) => ReactNode;
+    /**
+     * Renders the cell as the row's header (`th scope="row"`). Opt in for the
+     * value that names the row — a component name, a code — not for data.
+     */
+    isRowHeader?: boolean;
+}
+/** Grouped matrix data and native attributes applied to the root div. */
+export interface MatrixTableProps<TGroup, TRow> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {
+    /** Consumer-owned group data. Never mutated, never copied into state. */
+    groups: readonly TGroup[];
+    /** Columns rendered once per group, spanning its detail rows. */
+    groupColumns: readonly MatrixTableGroupColumn<TGroup>[];
+    /** Columns rendered once per detail row. The scrolling matrix axis. */
+    columns: readonly MatrixTableColumn<TGroup, TRow>[];
+    /** Stable identity, unique within groups. */
+    getGroupKey: (group: TGroup) => Key;
+    /** Detail rows belonging to a group; an empty collection is supported. */
+    getRows: (group: TGroup) => readonly TRow[];
+    /** Stable detail-row identity, unique within its group. */
+    getRowKey: (row: TRow, group: TGroup) => Key;
+    /** Accessible name of the table and of its scroll region. Required. */
+    accessibleLabel: string;
+    /** Content of a spanning body cell when groups is empty. */
+    emptyContent?: ReactNode;
+    /** Exposed as `aria-busy`. The component ships no loader and no copy. */
+    isBusy?: boolean;
+    /** Class added to the root div alongside the component's own class. */
+    className?: string;
+}
+/** A grouped matrix table; ref and native div attributes target the root container. */
+declare const MatrixTable: <TGroup, TRow>(props: MatrixTableProps<TGroup, TRow> & RefAttributes<HTMLDivElement>) => ReactElement;
+export default MatrixTable;

package/dist/components/matrix-table/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MatrixTable';
+export type { MatrixTableAlign, MatrixTableColumn, MatrixTableGroupColumn, MatrixTablePinnedSide, MatrixTableProps, } from './MatrixTable';

package/dist/index.d.ts

@@ -25,6 +25,7 @@ import DropdownButton from './components/dropdown-button/DropdownButton';
 import Heading from './components/heading/Heading';
 import Link from './components/link/Link';
 import Loading from './components/loading/Loading';
+import MatrixTable from './components/matrix-table';
 import Menu from './components/menu/Menu';
 import Modal from './components/modal/Modal';
 import Pager from './components/pager/Pager';
@@ -67,7 +68,7 @@ import { toast } from 'react-toastify';
  * Hooks
  */
 export { useFloatingPortal } from './hooks/useFloatingPortal';
-export { Banner, Beacon, Header, HeaderNavigation, ContextualNavigation, Hotspot, NavList, Drawer, AccessPanel, AccountMenu, SidebarMenu, Weekly, WeeklyGroup, Accordion, Box, Breadcrumbs, Button, Card, CardAccordion, CardNotification, Checkbox, DataCard, DataTable, DatePicker, Divider, Dropzone, FileUpload, Donut, DonutLabels, DonutLegend, DropdownButton, Heading, Link, Loading, Menu, Modal, Pager, Pill, PreviewerMarkdown, Processing, ProgressBar, RadioButton, RoundButton, Select, SelectPagination, SkeletonBase, SkeletonCircle, Stepper, Switch, Tabs, Tag, Text, TextField, Textarea, ThemeProvider, ThemeStore, LocaleStore, Timer, Toaster, Tooltip, Table, toast, };
+export { Banner, Beacon, Header, HeaderNavigation, ContextualNavigation, Hotspot, NavList, Drawer, AccessPanel, AccountMenu, SidebarMenu, Weekly, WeeklyGroup, Accordion, Box, Breadcrumbs, Button, Card, CardAccordion, CardNotification, Checkbox, DataCard, DataTable, DatePicker, Divider, Dropzone, FileUpload, Donut, DonutLabels, DonutLegend, DropdownButton, Heading, Link, Loading, MatrixTable, Menu, Modal, Pager, Pill, PreviewerMarkdown, Processing, ProgressBar, RadioButton, RoundButton, Select, SelectPagination, SkeletonBase, SkeletonCircle, Stepper, Switch, Tabs, Tag, Text, TextField, Textarea, ThemeProvider, ThemeStore, LocaleStore, Timer, Toaster, Tooltip, Table, toast, };
 /**
  * Types
  */
@@ -85,6 +86,7 @@ export type { HeadingProps } from './components/heading/Heading';
 export type { HeaderNavigationProps, HeaderNavigationVisual, } from './components/header-navigation';
 export type { ContextualNavigationProps, ContextualNavigationItem, } from './components/contextual-navigation';
 export type { LinkProps } from './components/link/Link';
+export type { MatrixTableAlign, MatrixTableColumn, MatrixTableGroupColumn, MatrixTablePinnedSide, MatrixTableProps, } from './components/matrix-table';
 export type { MenuItem } from './types/menu.types';
 export type { RoundButtonProps } from './components/round-button/RoundButton';
 export type { SelectProps } from './components/select/Select';