@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/presentation/Table.js

@@ -0,0 +1,458 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__ from "@floating-ui/react-dom";
+import * as __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__ from "@react-hook/throttle";
+import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__ from "@tanstack/react-table";
+import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__ from "@tanstack/react-virtual";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_utf8__ from "utf8";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_1677d8df__ from "../controls/ButtonLink.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_6e4cc59c__ from "../controls/Disclosure.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__ from "../controls/MenuButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_SelectField_js_8b78efe2__ from "../fields/SelectField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_StringField_js_cab546d4__ from "../fields/StringField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__ from "../inputs/CheckboxInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_encodeCsv_js_1d824629__ from "../utils/encodeCsv.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__ from "./Table.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
+const selectColumnId = "_selectColumn";
+const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csvFilename, estimatedRowSize = 100, emptyState = "No results", pathName, id, showRowCount = true, localStorageSchema })=>{
+    const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
+    const lastSelectedRow = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
+    const { refs, x: bulkSelectionModalXCoordinate } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.useFloating)({
+        placement: "bottom",
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.autoUpdate
+    });
+    const enableRowSelection = bulkActions.length + secondaryBulkActions.length > 0;
+    const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
+        const result = columns.map((column)=>{
+            const { filter, grouping, header, id, cell, globalFiltering, type, size, enableSorting, fixedWidth, sortUndefined } = column;
+            if ("accessor" == type || void 0 == type) return columnHelper.accessor((row)=>column.value(row), {
+                cell: cell ? (props)=>cell(props.row.original) : void 0,
+                enableGlobalFilter: false !== globalFiltering,
+                enableSorting,
+                filterFn: filter ? (row, _, filterValue)=>{
+                    const option = filter.options.find((option)=>option.id === filterValue);
+                    return option?.predicate?.(row.original) ?? true;
+                } : void 0,
+                getGroupingValue: grouping ? (row)=>grouping.fn(row) : void 0,
+                header,
+                id,
+                size,
+                meta: {
+                    fixedWidth: fixedWidth ?? false
+                },
+                sortUndefined: sortUndefined ?? 1
+            });
+            return columnHelper.display({
+                cell: cell ? (props)=>cell(props.row.original) : void 0,
+                header,
+                id,
+                size,
+                meta: {
+                    fixedWidth: fixedWidth ?? false
+                }
+            });
+        });
+        return enableRowSelection ? [
+            {
+                id: selectColumnId,
+                header: ({ table })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__["default"], {
+                        disabled: 0 === table.getRowModel().rows.length,
+                        value: table.getIsAllRowsSelected(),
+                        onChange: ()=>{
+                            table.toggleAllRowsSelected(!(table.getIsAllRowsSelected() || table.getIsSomeRowsSelected()));
+                        },
+                        indeterminate: table.getIsSomeRowsSelected()
+                    }),
+                cell: ({ table, row })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__["default"], {
+                        value: row.getIsSelected(),
+                        onClick: (event)=>{
+                            if (event.shiftKey && lastSelectedRow.current) {
+                                const startIndex = Math.min(lastSelectedRow.current.index, row.index);
+                                const endIndex = Math.max(lastSelectedRow.current.index, row.index);
+                                const rowsToSelect = table.getRowModel().rows.filter((filteredRow)=>filteredRow.index >= startIndex && filteredRow.index <= endIndex);
+                                rowsToSelect.forEach((rowToSelect)=>rowToSelect.toggleSelected(!row.getIsSelected()));
+                            }
+                            lastSelectedRow.current = row;
+                        },
+                        onChange: (value)=>{
+                            row.toggleSelected(value);
+                        }
+                    })
+            },
+            ...result
+        ] : result;
+    }, [
+        columns,
+        enableRowSelection
+    ]);
+    const globalFilterableColumns = columns.filter((column)=>false !== column.globalFiltering && "display" !== column.type);
+    const filterableColumns = columns.filter((column)=>void 0 !== column.filter);
+    const groupableColumns = columns.filter((column)=>void 0 !== column.grouping);
+    const csvExportableColumns = columns.filter((column)=>true === column.csvExport);
+    const columnFiltersInitialState = filterableColumns.map((col)=>({
+            id: col.id,
+            value: col.filter.options[0].id
+        }));
+    const localStorageData = "undefined" != typeof window && pathName && id ? window.localStorage.getItem(`${pathName}#${id}`) : null;
+    let parsedLocalStorage = {};
+    if (localStorageData && localStorageSchema) try {
+        parsedLocalStorage = JSON.parse(localStorageData);
+        localStorageSchema.parse(parsedLocalStorage);
+    } catch (error) {
+        console.error("Error parsing localStorage data:", error);
+        parsedLocalStorage = {};
+    }
+    const table = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.useReactTable)({
+        data,
+        columns: columnDefs,
+        groupedColumnMode: false,
+        getCoreRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getCoreRowModel)(),
+        getSortedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getSortedRowModel)(),
+        getGroupedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getGroupedRowModel)(),
+        getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getFilteredRowModel)(),
+        getExpandedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getExpandedRowModel)(),
+        getColumnCanGlobalFilter: ()=>true,
+        initialState: {
+            expanded: true,
+            columnFilters: parsedLocalStorage.columnFilters ?? columnFiltersInitialState,
+            sorting: parsedLocalStorage.sorting ?? [],
+            grouping: parsedLocalStorage.grouping ?? [],
+            columnVisibility: Object.fromEntries(columns.filter((col)=>true === col.hiddenByDefault).map((col)=>[
+                    col.id,
+                    false
+                ])),
+            globalFilter: ""
+        },
+        defaultColumn: {
+            enableGrouping: false,
+            enableColumnFilter: false,
+            enableGlobalFilter: false,
+            enableSorting: false
+        }
+    });
+    const tableState = table.getState();
+    const tBodyRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const rows = table.getRowModel().rows;
+    const rowVirtualizer = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__.useWindowVirtualizer)({
+        count: rows.length,
+        estimateSize: (index)=>{
+            if (!rows[index].getIsGrouped()) return estimatedRowSize;
+            {
+                const groupColumn = groupableColumns.find((column)=>column.id === rows[index].groupingColumnId);
+                return groupColumn?.grouping.size ?? estimatedRowSize;
+            }
+        },
+        overscan: 10,
+        scrollMargin: tBodyRef.current?.offsetTop ?? 0,
+        initialRect: {
+            height: 1080,
+            width: 1920
+        }
+    });
+    const [csvDownload, setCsvDownload] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const exportRows = table.getRowModel().rows;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (csvExportableColumns && csvFilename) setCsvDownload(`data:text/csv;charset=utf-8,${__WEBPACK_EXTERNAL_MODULE_utf8__["default"].encode((0, __WEBPACK_EXTERNAL_MODULE__utils_encodeCsv_js_1d824629__["default"])([
+            csvExportableColumns.map((col)=>col.header),
+            ...exportRows.map((row)=>csvExportableColumns.map((col)=>row.getValue(col.id)))
+        ]))}`);
+    }, [
+        csvExportableColumns,
+        csvFilename,
+        exportRows
+    ]);
+    const throttledSetGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__.useThrottleCallback)((value)=>table.setGlobalFilter(value), 4);
+    const showSearchReset = columnFiltersInitialState.some((filter, index)=>filter.value !== table.getState().columnFilters[index].value) || table.initialState.globalFilter !== table.getState().globalFilter;
+    const validPrimaryBulkActions = bulkActions.filter((bulkAction)=>table.getFilteredSelectedRowModel().rows.some((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true));
+    const validSecondaryBulkActions = secondaryBulkActions.filter((bulkAction)=>table.getFilteredSelectedRowModel().rows.some((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true));
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (pathName && id) window.localStorage.setItem(`${pathName}#${id}`, JSON.stringify({
+            columnFilters: tableState.columnFilters,
+            sorting: tableState.sorting,
+            grouping: tableState.grouping
+        }));
+    }, [
+        tableState.columnFilters,
+        tableState.sorting,
+        tableState.grouping,
+        pathName,
+        id
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        ref: refs.setReference,
+        children: [
+            validPrimaryBulkActions.length > 0 || validSecondaryBulkActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                ref: refs.setFloating,
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionModal,
+                style: {
+                    left: bulkSelectionModalXCoordinate
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+                    hasShadow: true,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
+                        spacing: "00",
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionModalContent,
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                                    font: "regular-bold",
+                                    children: [
+                                        table.getFilteredSelectedRowModel().rows.length,
+                                        " ",
+                                        1 === table.getFilteredSelectedRowModel().rows.length ? "selection" : "selections"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionActions,
+                                    children: [
+                                        validPrimaryBulkActions.map((bulkAction)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_6e4cc59c__["default"], {
+                                                render: (onClose)=>bulkAction.render({
+                                                        rows: table.getFilteredSelectedRowModel().flatRows.filter((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true).map((row)=>row.original),
+                                                        resetRowSelection: ()=>table.resetRowSelection(),
+                                                        onClose: onClose
+                                                    }),
+                                                children: bulkAction.label
+                                            }, bulkAction.key)),
+                                        validSecondaryBulkActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__["default"], {
+                                            id: "bulkActionOverflow",
+                                            options: validSecondaryBulkActions.map((bulkAction)=>({
+                                                    id: bulkAction.key,
+                                                    label: bulkAction.label,
+                                                    type: "render",
+                                                    render: (onClose)=>bulkAction.render({
+                                                            rows: table.getFilteredSelectedRowModel().flatRows.filter((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true).map((row)=>row.original),
+                                                            resetRowSelection: ()=>table.resetRowSelection(),
+                                                            onClose: onClose
+                                                        })
+                                                })),
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                symbol: "Plus"
+                                            }),
+                                            children: "More actions"
+                                        }) : null,
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                symbol: "Close"
+                                            }),
+                                            onClick: ()=>{
+                                                table.resetRowSelection(true);
+                                            },
+                                            title: `Deselect ${table.getFilteredSelectedRowModel().rows.length} ${1 === table.getFilteredSelectedRowModel().rows.length ? "selection" : "selections"}`,
+                                            type: "secondary"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                })
+            }) : null,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
+                spacing: "p2",
+                children: [
+                    0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBar,
+                        children: [
+                            0 !== globalFilterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_StringField_js_cab546d4__["default"], {
+                                label: "Search",
+                                id: "globalSearch",
+                                value: searchTerm,
+                                onChange: (value)=>{
+                                    setSearchTerm(value ?? "");
+                                    throttledSetGlobalFilter(value ?? "");
+                                }
+                            }) : null,
+                            0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterSelectMenus,
+                                children: [
+                                    filterableColumns.map((column)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_SelectField_js_8b78efe2__["default"], {
+                                            label: column.filter.label,
+                                            id: `${column.id}Filter`,
+                                            onChange: (value)=>{
+                                                table.getColumn(column.id)?.setFilterValue(value.id);
+                                            },
+                                            options: column.filter.options,
+                                            optionToId: (option)=>option.id,
+                                            optionToLabel: (option)=>option.label,
+                                            value: column.filter.options.find((option)=>option.id === table.getColumn(column.id)?.getFilterValue()) ?? column.filter.options[0]
+                                        }, column.id)),
+                                    0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_SelectField_js_8b78efe2__["default"], {
+                                        label: "Group by",
+                                        id: "columnGroupings",
+                                        onChange: (value)=>table.setGrouping(value ? [
+                                                value.id
+                                            ] : []),
+                                        options: [
+                                            void 0,
+                                            ...groupableColumns
+                                        ],
+                                        optionToId: (option)=>void 0 === option ? "noGrouping" : option.id,
+                                        optionToLabel: (option)=>void 0 === option ? "No grouping" : option.grouping.label,
+                                        value: groupableColumns.find((column)=>table.getState().grouping.some((id)=>id === column.id))
+                                    }) : null
+                                ]
+                            }) : null
+                        ]
+                    }) : null,
+                    showRowCount || showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+                        children: [
+                            showRowCount ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
+                                children: [
+                                    "Showing ",
+                                    table.getPreGroupedRowModel().flatRows.length,
+                                    " of",
+                                    " ",
+                                    table.getPreFilteredRowModel().flatRows.length
+                                ]
+                            }) : null,
+                            showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                onClick: ()=>{
+                                    table.setColumnFilters(columnFiltersInitialState);
+                                    table.resetGlobalFilter();
+                                    setSearchTerm("");
+                                },
+                                type: "secondary",
+                                size: "small",
+                                children: "Reset filters and search"
+                            }) : null
+                        ]
+                    }) : null,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableContainer,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("table", {
+                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].table,
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("thead", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableHead,
+                                    children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                                __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
+                                                enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : ""
+                                            ]),
+                                            children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("th", {
+                                                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                                        __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
+                                                        __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableHeader,
+                                                        header.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0
+                                                    ]),
+                                                    style: header.column.id !== selectColumnId ? {
+                                                        width: header.column.getSize(),
+                                                        minWidth: header.column.columnDef.meta?.fixedWidth ? void 0 : header.column.getSize(),
+                                                        flexGrow: header.column.columnDef.meta?.fixedWidth ? void 0 : header.column.getSize()
+                                                    } : {},
+                                                    children: header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+                                                        onClick: header.column.getToggleSortingHandler(),
+                                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortableTableHeader,
+                                                        title: "asc" === header.column.getIsSorted() ? "Sorted by ascending order" : "desc" === header.column.getIsSorted() ? "Sorted by descending order" : "Default sorting order",
+                                                        children: [
+                                                            (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(header.column.columnDef.header, header.getContext()),
+                                                            "asc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                                size: "small",
+                                                                symbol: "SortAsc",
+                                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
+                                                            }) : "desc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                                size: "small",
+                                                                symbol: "SortDes",
+                                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
+                                                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                                size: "small",
+                                                                symbol: "SortDefault",
+                                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
+                                                            })
+                                                        ]
+                                                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                                        children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(header.column.columnDef.header, header.getContext())
+                                                    })
+                                                }, header.id))
+                                        }, headerGroup.id))
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tbody", {
+                                    ref: tBodyRef,
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableBody,
+                                    style: {
+                                        height: rows.length > 0 ? `${rowVirtualizer.getTotalSize()}px` : "auto"
+                                    },
+                                    children: table.getRowModel().rows.length ? rowVirtualizer.getVirtualItems().map((virtualRow)=>{
+                                        const row = rows[virtualRow.index];
+                                        const groupColumn = groupableColumns.find((column)=>column.id === row.groupingColumnId);
+                                        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                            "data-state": row.getIsSelected() ? "selected" : "",
+                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                                __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
+                                                enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : ""
+                                            ]),
+                                            "data-index": virtualRow.index,
+                                            ref: (node)=>{
+                                                rowVirtualizer.measureElement(node);
+                                            },
+                                            style: {
+                                                position: "absolute",
+                                                transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`
+                                            },
+                                            children: row.getIsGrouped() && groupColumn ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                                    __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableGroupRow,
+                                                    __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell
+                                                ]),
+                                                children: groupColumn.grouping.header(row.original)
+                                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                                                children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                                            __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
+                                                            cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0
+                                                        ]),
+                                                        style: cell.column.id !== selectColumnId ? {
+                                                            width: cell.column.getSize(),
+                                                            minWidth: cell.column.columnDef.meta?.fixedWidth ? void 0 : cell.column.getSize(),
+                                                            flexGrow: cell.column.columnDef.meta?.fixedWidth ? void 0 : cell.column.getSize()
+                                                        } : {},
+                                                        children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                                                    }, cell.id))
+                                            })
+                                        }, row.id);
+                                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
+                                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].noRows,
+                                            children: emptyState
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    showRowCount || csvExportableColumns && csvFilename && csvDownload ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].downloadLink,
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
+                                children: [
+                                    "Showing ",
+                                    table.getPreGroupedRowModel().flatRows.length,
+                                    " of",
+                                    " ",
+                                    table.getPreFilteredRowModel().flatRows.length
+                                ]
+                            }),
+                            csvExportableColumns && csvFilename && csvDownload ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_ButtonLink_js_1677d8df__["default"], {
+                                href: csvDownload,
+                                download: `${csvFilename}.csv`,
+                                children: "Download CSV"
+                            }) : null
+                        ]
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+const Table_rslib_entry_ = Table;
+export { Table_rslib_entry_ as default };

package/dist/presentation/Table.module.js

@@ -0,0 +1,22 @@
+import "./Table_module.css";
+const Table_module_rslib_entry_ = {
+    tableContainer: "tableContainer-hYvEyV",
+    table: "table-bzpGau",
+    tableHead: "tableHead-L11cP_",
+    tableBody: "tableBody-Y9iDdo",
+    tableRow: "tableRow-WBOT_M",
+    tableHeader: "tableHeader-p22xRW",
+    tableCell: "tableCell-B0pcRW",
+    sortableTableHeader: "sortableTableHeader-J_3yN2",
+    sortIcon: "sortIcon-ryD3bs",
+    selectionCell: "selectionCell-oH5WZy",
+    tableGroupRow: "tableGroupRow-L5CJFd",
+    noRows: "noRows-ECmnfr",
+    bulkSelectionModal: "bulkSelectionModal-Ud3EW1",
+    bulkSelectionModalContent: "bulkSelectionModalContent-LMqKi5",
+    bulkSelectionActions: "bulkSelectionActions-n3W1ey",
+    filterBar: "filterBar-nnTu8b",
+    filterSelectMenus: "filterSelectMenus-rQe_dQ",
+    downloadLink: "downloadLink-DxebfL"
+};
+export { Table_module_rslib_entry_ as default };

package/dist/presentation/Table_module.css

@@ -0,0 +1,142 @@
+.tableContainer-hYvEyV {
+  background: var(--color-white);
+  border-radius: var(--size-n3);
+  border: solid var(--size-n5) var(--color-grey-t08);
+  color: var(--color-grey-s01);
+  overflow-x: auto;
+}
+
+.table-bzpGau {
+  width: 100%;
+  display: grid;
+}
+
+.tableHead-L11cP_ {
+  display: grid;
+}
+
+.tableBody-Y9iDdo {
+  display: grid;
+  position: relative;
+}
+
+.tableRow-WBOT_M {
+  border-top: solid var(--size-n5) var(--color-grey-t08);
+  width: 100%;
+  display: flex;
+}
+
+.tableHead-L11cP_ .tableRow-WBOT_M {
+  border-top: none;
+}
+
+.tableHeader-p22xRW {
+  font: var(--font-regular-bold);
+}
+
+.tableCell-B0pcRW {
+  padding: var(--size-00);
+  border-right: solid var(--size-n5) var(--color-grey-t08);
+  vertical-align: middle;
+  flex-shrink: 0;
+  flex-basis: auto;
+  place-items: center start;
+  display: grid;
+}
+
+.tableCell-B0pcRW:last-child {
+  border-right: none;
+}
+
+.sortableTableHeader-J_3yN2 {
+  gap: var(--size-n2);
+  grid-template-columns: auto max-content;
+  align-items: center;
+  display: grid;
+}
+
+.sortIcon-ryD3bs {
+  flex-shrink: 0;
+}
+
+.selectionCell-oH5WZy {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.tableGroupRow-L5CJFd {
+  background-color: var(--color-grey-t10);
+  width: 100%;
+}
+
+.noRows-ECmnfr {
+  padding: var(--size-p3) var(--size-00);
+  text-align: center;
+  width: 100%;
+}
+
+.bulkSelectionModal-Ud3EW1 {
+  bottom: var(--size-00);
+  z-index: 1;
+  position: fixed;
+}
+
+.bulkSelectionModalContent-LMqKi5 {
+  gap: var(--size-00);
+  align-items: center;
+  display: flex;
+}
+
+.bulkSelectionActions-n3W1ey {
+  gap: var(--size-n2);
+  grid-auto-flow: column;
+  display: grid;
+}
+
+.filterBar-nnTu8b {
+  gap: var(--size-00);
+  grid-template-rows: auto auto;
+  grid-template-columns: 1fr;
+  display: grid;
+}
+
+.filterBar-nnTu8b:has( > :only-child) {
+  gap: 0;
+}
+
+@media (min-width: 1920px) {
+  .filterBar-nnTu8b {
+    grid-template-rows: auto;
+    grid-template-columns: 1fr max-content;
+  }
+}
+
+.filterSelectMenus-rQe_dQ {
+  gap: var(--size-00);
+  grid-auto-columns: 1fr;
+  display: grid;
+}
+
+.filterSelectMenus-rQe_dQ:has( > :only-child) {
+  gap: 0;
+}
+
+@media (min-width: 1024px) {
+  .filterSelectMenus-rQe_dQ {
+    grid-auto-flow: column;
+  }
+}
+
+@media (min-width: 1920px) {
+  .filterSelectMenus-rQe_dQ {
+    grid-auto-columns: max-content;
+  }
+}
+
+.downloadLink-DxebfL {
+  justify-content: flex-end;
+  gap: var(--size-00);
+  align-items: center;
+  display: flex;
+}
+

package/dist/presentation/Tag.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export type Color = "blue" | "green" | "grey" | "orange" | "purple" | "red" | "teal" | "yellow" | "maroon";
+type Props = {
+    children: ReactNode;
+    id: string;
+    color: Color;
+};
+declare const Tag: ({ children, id, color }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Tag;