@worknice/whiteboard 0.66.1 → 0.67.1

package/dist/presentation/RichList/RichListRow.js

@@ -20,7 +20,7 @@ function contentSlotAlignClass(align) {
             return __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].contentSlotStart;
     }
 }
-const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, shouldFillMainSlot, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef })=>{
+const RichListRow = ({ row, table, groupEntry, enableRowSelection, anyRowCanBeSelected, href, onClick, normalizedLeadingSlots, normalizedPrimary, normalizedSecondary, mainSlotMaxWidthPx, shouldFillMainSlot, normalizedContentSlots, normalizedTrailingSlots, isCompactContentSlots, rowMainHidesContentSlotColumns, contentSlotsJustifyContent, actionsForRow, lastSelectedRowRef, virtualStyle, dataIndex, measureRef })=>{
     const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_c6ca8eb1__["default"])();
     const rowOriginal = row.original;
     const hrefValue = href ? href(rowOriginal) : void 0;
@@ -117,7 +117,8 @@ const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick
     const rowOverlay = hrefValue ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
         className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowLink,
         href: hrefValue,
-        "aria-label": void 0
+        "aria-label": void 0,
+        prefetch: false
     }) : null;
     const bulkCheckboxId = `richlist-bulk-${row.id}`;
     const handleCheckboxPaddingClick = (event)=>{
@@ -141,7 +142,10 @@ const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick
         onChange: (value)=>row.toggleSelected(value)
     });
     if (row.getIsGrouped() && groupEntry) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
+        ref: measureRef,
         className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].listItem,
+        "data-index": dataIndex,
+        style: virtualStyle,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
             className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].row, __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowGrouped),
             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -151,12 +155,15 @@ const RichListRow = ({ row, table, groupEntry, enableRowSelection, href, onClick
         })
     });
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
+        ref: measureRef,
         className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].listItem,
+        "data-index": dataIndex,
         "data-selected": row.getIsSelected() ? "" : void 0,
+        style: virtualStyle,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
             className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].row, isCompactContentSlots && __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].rowListAtCompactBreakpoint),
             children: [
-                enableRowSelection && row.getCanSelect() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                enableRowSelection && anyRowCanBeSelected ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                     className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].checkboxLane, __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].checkboxLaneFullTarget, row.getIsSelected() && __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].checkboxLaneActive),
                     onClick: (event)=>{
                         event.stopPropagation();

package/dist/presentation/RichList/RichListRow_module.css

@@ -3,10 +3,14 @@
   display: block;
 }
 
-.listItem-HfVE7t + .listItem-HfVE7t .row-qNQike {
+.listItem-HfVE7t .row-qNQike {
   border-top: solid var(--size-n5) var(--color-grey-t09);
 }
 
+.listItem-HfVE7t[data-index="0"] .row-qNQike {
+  border-top: none;
+}
+
 .groupHeader-XItOuo {
   flex: auto;
   align-items: center;

package/dist/presentation/RichList/RichListSkeleton.d.ts

@@ -0,0 +1,9 @@
+import type { RichListProps } from "./RichList";
+/**
+ * Cheap, prop-derived stand-in for `RichListInner` rendered by the `RichList`
+ * wrapper while a large list defers its first paint. It never builds a TanStack
+ * row model, so it mounts instantly; the shape is inferred from the same slot
+ * config (wide breakpoint) to keep the eventual swap visually seamless.
+ */
+declare const RichListSkeleton: <Type>({ leadingSlot, mainSlot, contentSlots, trailingSlot, rowHeight, bulkActions, secondaryBulkActions, csvFilename, header, }: RichListProps<Type>) => import("react/jsx-runtime").JSX.Element;
+export default RichListSkeleton;

package/dist/presentation/RichList/RichListSkeleton.js

@@ -0,0 +1,114 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_3d9c174d__ from "../../utils/customProperties.js";
+import * as __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__ from "./helpers.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__ from "./RichListSkeleton.module.js";
+const SKELETON_ROW_COUNT = 12;
+const toSlotArray = (slot)=>null == slot ? [] : Array.isArray(slot) ? slot : [
+        slot
+    ];
+const isWideVisible = (slot)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isVisibleAtBreakpoint)(slot.layoutVisibility, false);
+const RichListSkeleton = ({ leadingSlot, mainSlot, contentSlots, trailingSlot, rowHeight, bulkActions, secondaryBulkActions, csvFilename, header })=>{
+    const rowHeightValue = (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.resolveRichListRowHeightValue)(rowHeight, false, "medium");
+    const rowHeightPx = (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.richListRowHeightToPx)(rowHeightValue);
+    const rootStyle = (0, __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_3d9c174d__["default"])({
+        "--row-height": `${rowHeightPx}px`,
+        "--richlist-padding-inline": `${(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.richListInlinePaddingPx)(rowHeightValue)}px`
+    });
+    const leadingSlots = toSlotArray(leadingSlot).map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "leading", index)).filter(isWideVisible);
+    const trailingSlots = toSlotArray(trailingSlot).map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "trailing", index)).filter(isWideVisible);
+    const visibleContentSlots = (contentSlots ?? []).map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "content", index)).filter((slot)=>!slot.hiddenByDefault && isWideVisible(slot));
+    const enableRowSelection = (bulkActions?.length ?? 0) > 0 || (secondaryBulkActions?.length ?? 0) > 0;
+    const capabilityEntries = [
+        (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeTextField)(mainSlot.primary, "primary"),
+        ...mainSlot.secondary ? [
+            (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeTextField)(mainSlot.secondary, "secondary")
+        ] : [],
+        ...toSlotArray(leadingSlot).map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "leading", index)),
+        ...(contentSlots ?? []).map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "content", index)),
+        ...toSlotArray(trailingSlot).map((slot, index)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.normalizeSlot)(slot, "trailing", index))
+    ];
+    const hasToolbar = enableRowSelection || capabilityEntries.some((entry)=>Boolean(entry.filter) || entry.globalFiltering || entry.enableSorting || Boolean(entry.grouping)) || Boolean(csvFilename) && capabilityEntries.some((entry)=>entry.csvExport);
+    const laneWidth = (slot, fallbackPx)=>void 0 !== slot.size ? (0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.formatSlotSize)(slot.size) : `${fallbackPx}px`;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        "aria-hidden": true,
+        className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].root,
+        style: rootStyle,
+        children: [
+            header ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].header,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                    className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
+                    style: {
+                        width: 160
+                    }
+                })
+            }) : null,
+            hasToolbar ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].toolbar,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
+                        style: {
+                            height: 32,
+                            width: 240
+                        }
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].grow
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
+                        style: {
+                            height: 32,
+                            width: 84
+                        }
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
+                        style: {
+                            height: 32,
+                            width: 84
+                        }
+                    })
+                ]
+            }) : null,
+            Array.from({
+                length: SKELETON_ROW_COUNT
+            }, (_, rowIndex)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                    className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].row,
+                    children: [
+                        enableRowSelection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].checkbox}`
+                        }) : null,
+                        leadingSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].circle}`
+                            }, slot.id)),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
+                            style: {
+                                width: 200
+                            }
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].grow
+                        }),
+                        visibleContentSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
+                                style: {
+                                    width: laneWidth(slot, 120)
+                                }
+                            }, slot.id)),
+                        trailingSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
+                                style: {
+                                    width: laneWidth(slot, 140)
+                                }
+                            }, slot.id))
+                    ]
+                }, rowIndex))
+        ]
+    });
+};
+const RichListSkeleton_rslib_entry_ = RichListSkeleton;
+export { RichListSkeleton_rslib_entry_ as default };

package/dist/presentation/RichList/RichListSkeleton.module.js

@@ -0,0 +1,14 @@
+import "./RichListSkeleton_module.css";
+const RichListSkeleton_module_rslib_entry_ = {
+    root: "root-v9g0gr",
+    header: "header-Es16HO",
+    toolbar: "toolbar-C01ajM",
+    row: "row-p9lXk2",
+    grow: "grow-djYGNT",
+    block: "block-M158Qw",
+    richListSkeletonPulse: "richListSkeletonPulse-N50lJ4",
+    checkbox: "checkbox-TgI6UA",
+    circle: "circle-Wh22l0",
+    line: "line-SMRPlk"
+};
+export { RichListSkeleton_module_rslib_entry_ as default };

package/dist/presentation/RichList/RichListSkeleton_module.css

@@ -0,0 +1,84 @@
+.root-v9g0gr {
+  background: var(--color-white);
+  border: solid var(--size-n5) var(--color-grey-t09);
+  border-radius: var(--size-n2);
+  width: 100%;
+  overflow: hidden;
+}
+
+.header-Es16HO {
+  border-bottom: solid var(--size-n5) var(--color-grey-t08);
+  box-sizing: border-box;
+  min-height: var(--row-height);
+  padding: 0 var(--richlist-padding-inline, var(--size-n1));
+  align-items: center;
+  display: flex;
+}
+
+.toolbar-C01ajM {
+  border-bottom: solid var(--size-n5) var(--color-grey-t09);
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--size-n2);
+  min-height: var(--row-height);
+  padding: var(--size-n2) var(--richlist-padding-inline, var(--size-n1));
+  display: flex;
+}
+
+.row-p9lXk2 {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--size-00);
+  min-height: var(--row-height);
+  padding: 0 var(--richlist-padding-inline, var(--size-n1));
+  display: flex;
+}
+
+.row-p9lXk2 + .row-p9lXk2 {
+  border-top: solid var(--size-n5) var(--color-grey-t08);
+}
+
+.grow-djYGNT {
+  flex: auto;
+  min-width: 0;
+}
+
+.block-M158Qw {
+  background: var(--color-grey-t09);
+  border-radius: var(--size-n3);
+  flex-shrink: 0;
+  animation: 1.2s ease-in-out infinite richListSkeletonPulse-N50lJ4;
+}
+
+.checkbox-TgI6UA {
+  border-radius: var(--size-n4);
+  width: 18px;
+  height: 18px;
+}
+
+.circle-Wh22l0 {
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}
+
+.line-SMRPlk {
+  height: 16px;
+}
+
+@keyframes richListSkeletonPulse-N50lJ4 {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .block-M158Qw {
+    animation: none;
+  }
+}
+

package/dist/presentation/RichList/RichListVirtualBody.d.ts

@@ -0,0 +1,43 @@
+import { type Row } from "@tanstack/react-table";
+import { type ReactNode } from "react";
+/**
+ * Positioning metadata handed to `renderRow` for a single virtual row. The caller
+ * spreads these onto the `<li>` it renders (via `RichListRow`): `offset` drives the
+ * `translateY`, `index` is exposed as `data-index` (used by the divider CSS and by
+ * the virtualizer to map an element back to its row), and `measureRef` lets the
+ * virtualizer remeasure variable-height rows (group headers).
+ */
+export type RichListVirtualRowMeta = {
+    index: number;
+    offset: number;
+    measureRef: (element: HTMLLIElement | null) => void;
+};
+type SharedProps<Type> = {
+    rows: Array<Row<Type>>;
+    /** Per-index size estimate in px (constant row height; group headers are remeasured). */
+    estimateSize: (index: number) => number;
+    /**
+     * Stable key per row that also folds in the current grouping so the virtualizer
+     * resets its measurement cache when grouping changes (mirrors `Table.tsx`).
+     */
+    getItemKey: (index: number) => string;
+    overscan: number;
+    viewportClassName: string;
+    listClassName: string;
+    renderRow: (row: Row<Type>, meta: RichListVirtualRowMeta) => ReactNode;
+};
+/**
+ * Virtualized list body used when the page/window is the scroll container (the default
+ * for lists that grow the document, e.g. an un-constrained list page). The `<ul>` is a
+ * relatively-positioned spacer sized to the full virtual height; rows are absolutely
+ * positioned within it and offset by the list's document offset (`scrollMargin`).
+ */
+declare const RichListWindowBody: <Type>({ rows, estimateSize, getItemKey, overscan, viewportClassName, listClassName, renderRow, }: SharedProps<Type>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Virtualized list body used when an ancestor constrains the list's height so it scrolls
+ * inside its own container (e.g. `fillContainerHeight`, or a fixed-height panel). The
+ * viewport `<div>` is the scroll element; the `<ul>` spacer and absolutely-positioned
+ * rows live inside it.
+ */
+declare const RichListElementBody: <Type>({ rows, estimateSize, getItemKey, overscan, viewportClassName, listClassName, renderRow, }: SharedProps<Type>) => import("react/jsx-runtime").JSX.Element;
+export { RichListElementBody, RichListWindowBody };

package/dist/presentation/RichList/RichListVirtualBody.js

@@ -0,0 +1,68 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__ from "@tanstack/react-virtual";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const measureRichListRow = (element, _entry, instance)=>{
+    const rect = element.getBoundingClientRect();
+    if (rect.height > 0 && rect.width > 0) return Math.round(rect.height);
+    const index = instance.indexFromElement(element);
+    return instance.measurementsCache[index]?.size ?? 0;
+};
+const RichListWindowBody = ({ rows, estimateSize, getItemKey, overscan, viewportClassName, listClassName, renderRow })=>{
+    const listRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const virtualizer = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__.useWindowVirtualizer)({
+        count: rows.length,
+        estimateSize,
+        overscan,
+        getItemKey,
+        scrollMargin: listRef.current?.offsetTop ?? 0,
+        initialRect: {
+            height: 1080,
+            width: 1920
+        },
+        measureElement: measureRichListRow
+    });
+    const scrollMargin = virtualizer.options.scrollMargin;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: viewportClassName,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
+            ref: listRef,
+            className: listClassName,
+            style: {
+                height: virtualizer.getTotalSize()
+            },
+            children: virtualizer.getVirtualItems().map((virtualRow)=>renderRow(rows[virtualRow.index], {
+                    index: virtualRow.index,
+                    offset: virtualRow.start - scrollMargin,
+                    measureRef: virtualizer.measureElement
+                }))
+        })
+    });
+};
+const RichListElementBody = ({ rows, estimateSize, getItemKey, overscan, viewportClassName, listClassName, renderRow })=>{
+    const viewportRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const virtualizer = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__.useVirtualizer)({
+        count: rows.length,
+        estimateSize,
+        overscan,
+        getItemKey,
+        getScrollElement: ()=>viewportRef.current,
+        measureElement: measureRichListRow
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: viewportRef,
+        className: viewportClassName,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
+            className: listClassName,
+            style: {
+                height: virtualizer.getTotalSize()
+            },
+            children: virtualizer.getVirtualItems().map((virtualRow)=>renderRow(rows[virtualRow.index], {
+                    index: virtualRow.index,
+                    offset: virtualRow.start,
+                    measureRef: virtualizer.measureElement
+                }))
+        })
+    });
+};
+export { RichListElementBody, RichListWindowBody };

package/dist/presentation/RichList/RichList_module.css

@@ -57,15 +57,27 @@
   display: flex;
 }
 
-.list-j1kaiA {
-  flex-direction: column;
+.scrollViewport-RvFsVE {
+  align-self: stretch;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden auto;
+}
+
+.windowViewport-gkFnVD {
   align-self: stretch;
+  width: 100%;
+  min-height: 0;
+  overflow: visible;
+}
+
+.list-j1kaiA {
+  width: 100%;
   min-height: 0;
   margin: 0;
   padding: 0;
   list-style: none;
-  display: flex;
-  overflow: auto;
+  position: relative;
   container-type: inline-size;
 }
 

package/dist/presentation/RichList/stories/LargeList.d.ts

@@ -0,0 +1,10 @@
+import { type CommonProps } from "./shared";
+/**
+ * Artificial 10,000-row list to exercise the production-scale behaviour of `RichList`:
+ * the wrapper defers its first paint (data is over the 1,000-row threshold), so the
+ * baked-in skeleton flashes for ~1–2 frames before the real, virtualized list swaps in.
+ * Also a quick way to sanity-check that virtualization keeps the DOM small at scale.
+ * Reload the story to see the skeleton flash again.
+ */
+declare const LargeList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default LargeList;

package/dist/presentation/RichList/stories/LargeList.js

@@ -0,0 +1,137 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__ from "../../../icons/components/AssignmentDocument.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__ from "../../../utils/storybook.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__ from "../../Avatar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__ from "./shared/bulkActionStubs.js";
+const TITLES = [
+    "First Aid Certificate",
+    "Superannuation",
+    "Police Check",
+    "Payroll Form",
+    "Working With Children Check",
+    "Emergency Contact",
+    "Bank Details",
+    "Tax File Number Declaration",
+    "Code of Conduct",
+    "IT Policy Acknowledgement"
+];
+const STATUSES = [
+    "Active",
+    "Expired",
+    "Expiring soon",
+    "Submitted",
+    "Draft"
+];
+const NAMES = [
+    "Daisy Smith",
+    "Evan Baker",
+    "Candice Berry",
+    "Olivia Ng",
+    "Badai Khan",
+    "Henry Jones",
+    "Daniel Turner",
+    "Sarah Cruden",
+    "Marcus Chen",
+    "Janice Martin"
+];
+const ROW_COUNT = 10000;
+const rows = Array.from({
+    length: ROW_COUNT
+}, (_, i)=>({
+        id: `row-${i}`,
+        title: `${TITLES[i % TITLES.length]} #${i + 1}`,
+        status: STATUSES[i % STATUSES.length],
+        assignee: NAMES[i % NAMES.length],
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(i % 70 + 1)
+    }));
+const titleField = {
+    label: "Document",
+    value: (r)=>r.title,
+    enableSorting: true,
+    globalFiltering: true,
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+            font: "regular-bold",
+            children: r.title
+        })
+};
+const leadingSlot = {
+    id: "type",
+    label: "Type",
+    render: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__icons_components_AssignmentDocument_js_0e5cad31__["default"], {}),
+    size: 32
+};
+const statusSlot = {
+    id: "status",
+    label: "Status",
+    value: (r)=>r.status,
+    enableSorting: true,
+    globalFiltering: true,
+    filter: {
+        isMulti: true,
+        label: "Status",
+        options: STATUSES.map((status)=>({
+                id: `status-${status}`,
+                label: status,
+                predicate: (r)=>r.status === status
+            }))
+    },
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+            font: "small",
+            children: r.status
+        }),
+    layoutVisibility: "whenWide",
+    align: "start",
+    size: 200
+};
+const assigneeSlot = {
+    id: "assignee",
+    label: "Person",
+    value: (r)=>r.assignee,
+    enableSorting: true,
+    globalFiltering: true,
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+            spacing: "n2",
+            align: "center",
+            tagName: "div",
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__["default"], {
+                    id: `${r.id}-a`,
+                    name: r.assignee,
+                    imageUrl: r.assigneeImageUrl,
+                    size: "small"
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "small",
+                    children: r.assignee
+                })
+            ]
+        }),
+    layoutVisibility: "whenWide",
+    align: "start",
+    size: 200
+};
+const LargeList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        bulkActions: (0, __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__.richListStoryPrimaryBulkActions)(),
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        contentSlots: [
+            statusSlot
+        ],
+        data: rows,
+        fillContainerHeight: true,
+        getRowId: (r)=>r.id,
+        leadingSlot: leadingSlot,
+        mainSlot: {
+            size: 360,
+            primary: titleField
+        },
+        rowHeight: rowHeight,
+        secondaryBulkActions: (0, __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__.richListStorySecondaryBulkActions)(),
+        trailingSlot: assigneeSlot
+    });
+const LargeList_rslib_entry_ = LargeList;
+export { LargeList_rslib_entry_ as default };

package/dist/presentation/RichList/stories/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import { type CommonProps } from "./shared";
+declare const SkeletonList: ({ rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default SkeletonList;