@opencxh/ui-kit 3.105.0 → 3.106.0

package/dist/src/content/List.d.ts

@@ -1,4 +1,14 @@
 import { default as React } from 'react';
+export interface ListGroup {
+    /** Group key — must match what `groupBy` returns */
+    id: string;
+    /** Header label; defaults to `id` */
+    title?: string;
+    /** Override the row count shown on the right */
+    count?: number;
+    /** Start collapsed (only with `collapsible`) */
+    defaultCollapsed?: boolean;
+}
 export interface ListProps<T> {
     /** Rows to render */
     items: T[];
@@ -20,6 +30,21 @@ export interface ListProps<T> {
     unread?: (item: T, index: number) => boolean;
     /** Deprioritised noise (opacity) */
     dimmed?: (item: T, index: number) => boolean;
+    /** Group rows under headers. Return the group id for each row. */
+    groupBy?: (item: T, index: number) => string;
+    /**
+     * Group order and labels. Groups missing here are appended in order of first
+     * appearance; groups listed here but empty are skipped.
+     */
+    groups?: ListGroup[];
+    /** Header renderer; defaults to label + count */
+    renderGroupHeader?: (group: ListGroup, items: T[]) => React.ReactNode;
+    /** Headers stick to the top of the scroll container */
+    stickyGroupHeaders?: boolean;
+    /** Headers become a toggle that folds the group */
+    collapsibleGroups?: boolean;
+    /** Hide the count on the right of the header */
+    hideGroupCount?: boolean;
     /** Checkbox column + bulk bar */
     selectable?: boolean;
     /** Selected rows (controlled) */
@@ -28,6 +53,13 @@ export interface ListProps<T> {
     onSelectionChange?: (selected: T[]) => void;
     /** Actions shown in the bulk bar when a selection exists */
     bulkActions?: React.ReactNode;
+    /**
+     * Column-label strip above the rows ("Van · Gesprek · tijd"), like the inbox.
+     * Align it with the row by reusing the same widths as `renderItem`.
+     */
+    header?: React.ReactNode;
+    /** Keep the column-label strip visible while scrolling */
+    stickyHeader?: boolean;
     /** Wrap the list in a bordered container */
     bordered?: boolean;
     /** Empty state content */
@@ -47,30 +79,27 @@ export interface ListProps<T> {
  * Use `Table` instead when you compare values between rows (sortable columns,
  * aligned amounts, select-all in a header).
  *
+ * Grouped, like the inbox and task views:
+ *
  * @example
  * ```tsx
  * <List
- *   items={threads}
+ *   items={tasks}
  *   getRowKey={(t) => t.id}
- *   variant="divided"
  *   bordered
+ *   groupBy={(t) => t.bucket}                       // "today" | "tomorrow" | "later"
+ *   groups={[
+ *     { id: "today", title: "Vandaag" },
+ *     { id: "tomorrow", title: "Morgen" },
+ *     { id: "later", title: "Later" },
+ *   ]}
+ *   stickyGroupHeaders
+ *   collapsibleGroups
  *   leading={(t) => <ChannelBadge channel={t.channel} size="sm" />}
- *   renderItem={(t) => (
- *     <>
- *       <span className="w-30 shrink-0 truncate">{t.sender}</span>
- *       <span className="min-w-0 flex-1 truncate">
- *         <strong>{t.subject}</strong>
- *         <span className="text-text-muted"> — {t.preview}</span>
- *       </span>
- *     </>
- *   )}
- *   trailing={(t) => <span className="text-xs text-text-subtle">{t.time}</span>}
+ *   renderItem={(t) => <span className="truncate">{t.title}</span>}
+ *   trailing={(t) => t.due}
  *   unread={(t) => !t.read}
- *   selectable
- *   selectedItems={selection}
- *   onSelectionChange={setSelection}
- *   bulkActions={<Button size="sm" variant="secondary">Archiveren</Button>}
  * />
  * ```
  */
-export declare function List<T>({ items, getRowKey, variant, leading, renderItem, trailing, onSelect, isActive, unread, dimmed, selectable, selectedItems, onSelectionChange, bulkActions, bordered, emptyContent, loading, loadingRows, className, "aria-label": ariaLabel, }: ListProps<T>): React.JSX.Element;
+export declare function List<T>({ items, getRowKey, variant, leading, renderItem, trailing, onSelect, isActive, unread, dimmed, groupBy, groups, renderGroupHeader, stickyGroupHeaders, collapsibleGroups, hideGroupCount, selectable, selectedItems, onSelectionChange, bulkActions, header, stickyHeader, bordered, emptyContent, loading, loadingRows, className, "aria-label": ariaLabel, }: ListProps<T>): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "3.105.0",
+  "version": "3.106.0",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {