@worknice/whiteboard 0.36.0 → 0.37.1

package/dist/controls/MenuButton.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
         displaySearch?: boolean;
         iconRight?: import("react").ReactNode;
         fullWidth?: boolean;
-    } & ({
+    } & (({
         children: import("react").ReactNode;
         icon?: import("react").ReactNode;
     } | {
@@ -23,7 +23,7 @@ declare const meta: {
             header: string;
             options: Array<import("./MenuButton").MenuButtonOption | null>;
         }>;
-    })) => import("react/jsx-runtime").JSX.Element;
+    }))) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
         id: {
             control: false;

package/dist/inputs/ListBoxInput.js

@@ -29,34 +29,37 @@ const ListBoxInput = ({ onChange, options, optionToId, optionToLabel, optionToDi
                     value: searchTerm
                 })
             }),
-            0 !== filteredOptions.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].optionsContainer,
-                children: filteredOptions.map((option)=>{
-                    const optionId = optionToId(option);
-                    const optionLabel = optionToLabel(option);
-                    const optionDisabled = optionToDisabled ? optionToDisabled(option) : false;
-                    const selected = value.some((value)=>optionToId(value) === optionToId(option));
-                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("label", {
-                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].option, {
-                            [__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].disabled]: optionDisabled
-                        }),
-                        children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CheckboxInput_js_1a7df59a__["default"], {
-                                disabled: optionDisabled,
-                                value: selected,
-                                onChange: ()=>{
-                                    onChange(option);
-                                    if (trackingContext && id) trackingContext.trackInput(id, includeValueInTracking ? optionToId(option) : void 0);
-                                }
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].listContainer,
+                children: 0 !== filteredOptions.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].optionsContainer,
+                    children: filteredOptions.map((option)=>{
+                        const optionId = optionToId(option);
+                        const optionLabel = optionToLabel(option);
+                        const optionDisabled = optionToDisabled ? optionToDisabled(option) : false;
+                        const selected = value.some((value)=>optionToId(value) === optionToId(option));
+                        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("label", {
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].option, {
+                                [__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].disabled]: optionDisabled
                             }),
-                            optionLabel
-                        ]
-                    }, optionId);
-                })
-            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].noResultsContainer,
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
-                    children: "No options found."
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CheckboxInput_js_1a7df59a__["default"], {
+                                    disabled: optionDisabled,
+                                    value: selected,
+                                    onChange: ()=>{
+                                        onChange(option);
+                                        if (trackingContext && id) trackingContext.trackInput(id, includeValueInTracking ? optionToId(option) : void 0);
+                                    }
+                                }),
+                                optionLabel
+                            ]
+                        }, optionId);
+                    })
+                }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].noResultsContainer,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                        children: "No options found."
+                    })
                 })
             })
         ]

package/dist/inputs/ListBoxInput.module.js

@@ -2,6 +2,7 @@ import "./ListBoxInput_module.css";
 const ListBoxInput_module_rslib_entry_ = {
     container: "container-RqDms0",
     searchContainer: "searchContainer-V8D3A2",
+    listContainer: "listContainer-a9BpgI",
     optionsContainer: "optionsContainer-q0if3P",
     noResultsContainer: "noResultsContainer-FEqb9D",
     option: "option-uViftw",

package/dist/inputs/ListBoxInput_module.css

@@ -1,12 +1,22 @@
 .container-RqDms0 {
   border: 1px solid var(--color-grey-t08);
   border-radius: var(--size-n3);
-  overflow-y: auto;
+  flex-direction: column;
+  max-height: 320px;
+  display: flex;
+  overflow: hidden;
 }
 
 .searchContainer-V8D3A2 {
   padding: var(--size-n1);
   border-bottom: 1px solid var(--color-grey-t08);
+  flex-shrink: 0;
+}
+
+.listContainer-a9BpgI {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .optionsContainer-q0if3P {

package/dist/presentation/ProgressCircle.d.ts

@@ -0,0 +1,19 @@
+declare const sizes: {
+    xsmall: number;
+    small: number;
+    default: number;
+    large: number;
+    xlarge: number;
+};
+type Props = {
+    /** Progress from 0 to 1 (e.g. 0.4 for 40%) */
+    percentage: number;
+    size?: keyof typeof sizes;
+    tone?: "default" | "primary" | "muted" | "danger" | "warning" | "success" | "info" | "light";
+};
+/**
+ * Renders a circular progress indicator with exact percentage.
+ * Uses light grey for the incomplete portion and darker grey for the completed portion.
+ */
+declare const ProgressCircle: ({ percentage, size, tone }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ProgressCircle;

package/dist/presentation/ProgressCircle.js

@@ -0,0 +1,45 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+const sizes = {
+    xsmall: 12,
+    small: 16,
+    default: 20,
+    large: 24,
+    xlarge: 48
+};
+const ProgressCircle = ({ percentage, size = "default", tone = "muted" })=>{
+    const r = 7;
+    const cx = 8;
+    const cy = 10;
+    const p = Math.max(0, Math.min(1, percentage));
+    const angle = 2 * p * Math.PI;
+    const endX = cx + r * Math.sin(angle);
+    const endY = cy - r * Math.cos(angle);
+    const largeArc = p > 0.5 ? 1 : 0;
+    const pathD = p <= 0 ? "" : p >= 1 ? `M ${cx} ${cy - r} A ${r} ${r} 0 0 1 ${cx} ${cy + r} A ${r} ${r} 0 0 1 ${cx} ${cy - r} Z` : `M ${cx} ${cy - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} L ${cx} ${cy} Z`;
+    const sizePx = sizes[size];
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("svg", {
+        width: sizePx,
+        height: sizePx,
+        viewBox: "0 0 16 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: {
+            color: `var(--tone-${tone})`
+        },
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", {
+                cx: cx,
+                cy: cy,
+                r: r,
+                fill: "currentColor",
+                fillOpacity: "0.25"
+            }),
+            pathD && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+                d: pathD,
+                fill: "currentColor"
+            })
+        ]
+    });
+};
+const ProgressCircle_rslib_entry_ = ProgressCircle;
+export { ProgressCircle_rslib_entry_ as default };

package/dist/presentation/Table_v2.d.ts

@@ -3,16 +3,36 @@ import { type ReactNode } from "react";
 import { type ZodTypeAny } from "zod";
 import { type MenuButtonOption } from "../controls/MenuButton";
 type PrimitiveValue = boolean | string | undefined | number;
+type SingleFilterOption<Type> = {
+    id: string;
+    label: string;
+    /**
+     * If omitted true will always be returned and no filtering will be applied (e.g. "Any" option).
+     */
+    predicate?: (row: Type) => boolean;
+};
+type MultiFilterOption<Type> = {
+    id: string;
+    label: string;
+    predicate: (row: Type) => boolean;
+};
+/**
+ * When using single select filters (isMulti: false), the first option is the default value.
+ * Multi select filters (isMulti: true) have no default value.
+ */
 type Filter<Type> = {
+    isMulti?: false;
     label: string;
-    options: Array<{
-        id: string;
-        label: string;
-        /**
-         * If omitted no filtering will be applied.
-         */
-        predicate?: (row: Type) => boolean;
-    }>;
+    options: Array<SingleFilterOption<Type>>;
+} | {
+    isMulti: true;
+    label: string;
+    options: Array<MultiFilterOption<Type>>;
+    /**
+     * Use ListBox instead of checkboxes.
+     * For when the list of options is large
+     * */
+    useListBox?: boolean;
 };
 type Grouping<Type> = {
     fn: (row: Type) => string;

package/dist/presentation/Table_v2.js

@@ -9,7 +9,11 @@ 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_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_CheckboxSetField_js_bce910a4__ from "../fields/CheckboxSetField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_ListBoxField_js_b7d4cb12__ from "../fields/ListBoxField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_SimpleRadioSetField_js_118e9421__ from "../fields/SimpleRadioSetField.js";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__ from "../forms/FormButtonSet.js";
+import * as __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e756b4e7__ from "../forms/useForm.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__ from "../inputs/CheckboxInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_d1a6f32e__ from "../inputs/SelectInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_091f1e06__ from "../inputs/StringInput.js";
@@ -52,8 +56,18 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                 enableGlobalFilter: false !== globalFiltering,
                 enableSorting,
                 filterFn: filter ? (row, _, filterValue)=>{
-                    const option = filter.options.find((option)=>option.id === filterValue);
-                    return option?.predicate?.(row.original) ?? true;
+                    if (filter.isMulti && Array.isArray(filterValue)) {
+                        if (0 === filterValue.length) return true;
+                        return filterValue.some((optionId)=>{
+                            const option = filter.options.find((opt)=>opt.id === optionId);
+                            return option ? option.predicate(row.original) : false;
+                        });
+                    }
+                    if (!filter.isMulti && "string" == typeof filterValue) {
+                        const option = filter.options.find((opt)=>opt.id === filterValue);
+                        return option?.predicate?.(row.original) ?? true;
+                    }
+                    return true;
                 } : void 0,
                 getGroupingValue: grouping ? (row)=>grouping.fn(row) : void 0,
                 header,
@@ -135,11 +149,24 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
     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;
+    const columnFiltersInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>filterableColumns.map((col)=>{
+            const filter = col.filter;
+            if (filter.isMulti) return {
+                id: col.id,
+                value: []
+            };
+            return {
+                id: col.id,
+                value: filter.options[0].id
+            };
+        }), [
+        filterableColumns
+    ]);
+    const storageKey = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>pathName && id ? `${pathName}#${id}_table` : null, [
+        pathName,
+        id
+    ]);
+    const localStorageData = "undefined" != typeof window && storageKey ? window.localStorage.getItem(storageKey) : null;
     let parsedLocalStorage = {};
     if (localStorageData && localStorageSchema) try {
         parsedLocalStorage = JSON.parse(localStorageData);
@@ -228,12 +255,25 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         a.click();
     };
     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 activeFilterCount = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const currentFilters = tableState.columnFilters;
+        return columnFiltersInitialState.filter((initialFilter)=>{
+            const currentFilter = currentFilters.find((f)=>f.id === initialFilter.id);
+            const currentValue = currentFilter?.value;
+            const initialValue = initialFilter.value;
+            if (Array.isArray(initialValue) && Array.isArray(currentValue)) return currentValue.length !== initialValue.length || initialValue.some((v, i)=>v !== currentValue[i]);
+            return currentValue !== initialValue;
+        }).length;
+    }, [
+        tableState.columnFilters,
+        columnFiltersInitialState
+    ]);
+    const showSearchReset = activeFilterCount > 0 || "" !== tableState.globalFilter;
     const filteredSelectedRows = table.getFilteredSelectedRowModel();
     const validPrimaryBulkActions = bulkActions.filter((bulkAction)=>filteredSelectedRows.rows.some((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true));
     const validSecondaryBulkActions = secondaryBulkActions.filter((bulkAction)=>filteredSelectedRows.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({
+        if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify({
             columnFilters: tableState.columnFilters,
             sorting: tableState.sorting,
             grouping: tableState.grouping
@@ -242,8 +282,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         tableState.columnFilters,
         tableState.sorting,
         tableState.grouping,
-        pathName,
-        id
+        storageKey
     ]);
     const shouldShowCsvExport = csvExportableColumns.length > 0 && csvFilename;
     const shouldShowMoreActions = validSecondaryBulkActions.length > 0 || shouldShowCsvExport;
@@ -372,13 +411,16 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                                     0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                                         className: __WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterSelectMenus,
                                         children: [
-                                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
                                                 type: "secondary",
                                                 onClick: ()=>setIsFilterModalOpen(true),
                                                 icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
                                                     symbol: "Filter"
                                                 }),
-                                                children: "Filters (1)"
+                                                children: [
+                                                    "Filters",
+                                                    activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
+                                                ]
                                             }),
                                             0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_d1a6f32e__["default"], {
                                                 id: "columnGroupings",
@@ -544,12 +586,95 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                 ]
             }),
             isFilterModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterModal, {
-                onClose: ()=>setIsFilterModalOpen(false)
+                onClose: ()=>setIsFilterModalOpen(false),
+                filterableColumns: filterableColumns,
+                currentFilters: tableState.columnFilters,
+                onFiltersChange: (filters)=>table.setColumnFilters(filters)
             })
         ]
     });
 };
-const FilterModal = ({ onClose })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
+const FilterExpander = ({ label, children, highlight = false })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("details", {
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterExpander, {
+            [__WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterExpanderHighlight]: highlight
+        }),
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("summary", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterExpanderRow,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterExpanderIcon,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                            symbol: "ChevronRight"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterExpanderLabel,
+                        children: label
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterExpanderWrapper,
+                children: children
+            })
+        ]
+    });
+const FilterModal = ({ onClose, filterableColumns, currentFilters, onFiltersChange })=>{
+    const initialFilterValues = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const result = {};
+        for (const column of filterableColumns){
+            const current = currentFilters.find((f)=>f.id === column.id);
+            const filter = column.filter;
+            if (filter.isMulti) result[column.id] = Array.isArray(current?.value) ? current.value : [];
+            else result[column.id] = ("string" == typeof current?.value ? current.value : null) ?? filter.options[0].id;
+        }
+        return result;
+    }, [
+        filterableColumns,
+        currentFilters
+    ]);
+    const resetFilterValues = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const result = {};
+        for (const col of filterableColumns){
+            const filter = col.filter;
+            result[col.id] = filter.isMulti ? [] : filter.options[0].id;
+        }
+        return result;
+    }, [
+        filterableColumns
+    ]);
+    const { data, setData, status, submit } = (0, __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e756b4e7__["default"])({
+        initialValues: {
+            filters: initialFilterValues
+        },
+        onSubmit: async (values)=>{
+            const filters = Object.entries(values.filters).map(([columnId, value])=>({
+                    id: columnId,
+                    value
+                }));
+            onFiltersChange(filters);
+        }
+    });
+    const handleMultiFilterChange = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((columnId, option)=>{
+        setData((prev)=>{
+            const prevValue = prev.filters[columnId];
+            const current = Array.isArray(prevValue) ? prevValue : [];
+            const next = current.includes(option.id) ? current.filter((id)=>id !== option.id) : [
+                ...current,
+                option.id
+            ];
+            return {
+                filters: {
+                    ...prev.filters,
+                    [columnId]: next
+                }
+            };
+        });
+    }, [
+        setData
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
         onClose: onClose,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
             header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
@@ -562,16 +687,23 @@ const FilterModal = ({ onClose })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_r
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
                         type: "secondary",
-                        onClick: onClose,
+                        onClick: ()=>{
+                            setData(()=>({
+                                    filters: resetFilterValues
+                                }));
+                        },
                         icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                            symbol: "Close"
+                            symbol: "Restore"
                         }),
-                        children: "Clear filters"
+                        children: "Reset all filters"
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__["default"], {
-                        formStatus: "fresh",
+                        formStatus: status,
                         primary: {
-                            action: onClose,
+                            action: async ()=>{
+                                submit();
+                                onClose();
+                            },
                             label: "Apply filters"
                         },
                         secondary: {
@@ -581,10 +713,119 @@ const FilterModal = ({ onClose })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_r
                     })
                 ]
             }),
-            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
-                children: "TODO: Add filters"
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].filterExpandersContainer,
+                children: filterableColumns.map((column)=>{
+                    const filter = column.filter;
+                    if (filter.isMulti) {
+                        const filterValue = data.filters[column.id];
+                        const selectedIds = Array.isArray(filterValue) ? filterValue : [];
+                        const selectedOptions = filter.options.filter((opt)=>selectedIds.includes(opt.id));
+                        const multiFilterLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+                            justify: "space-between",
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                    children: selectedIds.length > 0 ? `${filter.label} (${selectedIds.length} selected)` : filter.label
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                    style: {
+                                        visibility: selectedIds.length > 0 ? "visible" : "hidden"
+                                    },
+                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                        type: "secondary",
+                                        size: "small",
+                                        onClick: (e)=>{
+                                            e.stopPropagation();
+                                            setData((prev)=>({
+                                                    filters: {
+                                                        ...prev.filters,
+                                                        [column.id]: []
+                                                    }
+                                                }));
+                                        },
+                                        children: "Reset"
+                                    })
+                                })
+                            ]
+                        });
+                        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterExpander, {
+                            label: multiFilterLabel,
+                            highlight: selectedIds.length > 0,
+                            children: filter.useListBox ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__Table_v2_module_js_4f5732a4__["default"].listBoxFilterContainer,
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_ListBoxField_js_b7d4cb12__["default"], {
+                                    id: `${column.id}-filter`,
+                                    label: "",
+                                    options: filter.options,
+                                    optionToId: (opt)=>opt.id,
+                                    optionToLabel: (opt)=>opt.label,
+                                    searchField: "label",
+                                    value: selectedOptions,
+                                    onChange: (option)=>handleMultiFilterChange(column.id, option)
+                                })
+                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_CheckboxSetField_js_bce910a4__["default"], {
+                                id: `${column.id}-filter`,
+                                label: "",
+                                options: filter.options,
+                                optionToId: (opt)=>opt.id,
+                                optionToLabel: (opt)=>opt.label,
+                                values: selectedOptions,
+                                onChange: (option)=>handleMultiFilterChange(column.id, option)
+                            })
+                        }, column.id);
+                    }
+                    const rawValue = data.filters[column.id];
+                    const value = "string" == typeof rawValue ? rawValue : filter.options[0].id;
+                    const hasNonDefaultValue = "string" == typeof rawValue && rawValue !== filter.options[0].id;
+                    const singleFilterLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+                        justify: "space-between",
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                children: hasNonDefaultValue ? `${filter.label} (Selected)` : filter.label
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                style: {
+                                    visibility: hasNonDefaultValue ? "visible" : "hidden"
+                                },
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                    type: "secondary",
+                                    size: "small",
+                                    onClick: (e)=>{
+                                        e.stopPropagation();
+                                        setData((prev)=>({
+                                                filters: {
+                                                    ...prev.filters,
+                                                    [column.id]: filter.options[0].id
+                                                }
+                                            }));
+                                    },
+                                    children: "Reset"
+                                })
+                            })
+                        ]
+                    });
+                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterExpander, {
+                        label: singleFilterLabel,
+                        highlight: hasNonDefaultValue,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_SimpleRadioSetField_js_118e9421__["default"], {
+                            id: `${column.id}-filter`,
+                            label: "",
+                            options: filter.options,
+                            value: value,
+                            onChange: (optionId)=>{
+                                setData((prev)=>({
+                                        filters: {
+                                            ...prev.filters,
+                                            [column.id]: optionId
+                                        }
+                                    }));
+                            }
+                        })
+                    }, column.id);
+                })
             })
         })
     });
+};
 const Table_v2_rslib_entry_ = Table;
 export { Table_v2_rslib_entry_ as default };

package/dist/presentation/Table_v2.module.js

@@ -18,6 +18,15 @@ const Table_v2_module_rslib_entry_ = {
     bulkSelectionActions: "bulkSelectionActions-HWKS5Z",
     filterBar: "filterBar-BGMBrI",
     filterSelectMenus: "filterSelectMenus-uB_VUK",
+    filterExpandersContainer: "filterExpandersContainer-cQ5EFN",
+    filterExpanderRow: "filterExpanderRow-h7i68V",
+    filterExpanderHighlight: "filterExpanderHighlight-AqhkRv",
+    filterExpanderLabel: "filterExpanderLabel-JiJU2v",
+    filterExpanderIcon: "filterExpanderIcon-XaLt7D",
+    filterExpander: "filterExpander-v_b9Ry",
+    filterExpanderWrapper: "filterExpanderWrapper-Ea0hYg",
+    filterOptions: "filterOptions-nwLHze",
+    listBoxFilterContainer: "listBoxFilterContainer-SylnjB",
     filterButton: "filterButton-_xmjv4",
     downloadLink: "downloadLink-ikiKns"
 };

package/dist/presentation/Table_v2_module.css

@@ -127,6 +127,66 @@
   }
 }
 
+.filterExpandersContainer-cQ5EFN {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.filterExpandersContainer-cQ5EFN > :not(:first-child) {
+  border-top: solid var(--size-n5) var(--color-grey-t08);
+}
+
+.filterExpanderRow-h7i68V {
+  width: 100%;
+  padding: var(--size-00);
+  align-items: center;
+  gap: var(--size-n2);
+  cursor: pointer;
+  text-align: left;
+  background: none;
+  border: none;
+  outline: none;
+  display: flex;
+}
+
+.filterExpanderHighlight-AqhkRv .filterExpanderLabel-JiJU2v {
+  font: var(--font-regular-bold);
+}
+
+.filterExpanderLabel-JiJU2v {
+  min-width: 0;
+  font: var(--font-label);
+  flex: 1;
+}
+
+.filterExpanderIcon-XaLt7D {
+  transition: transform .15s;
+}
+
+.filterExpander-v_b9Ry[open] .filterExpanderRow-h7i68V {
+  padding-bottom: var(--size-n2);
+}
+
+.filterExpander-v_b9Ry[open] .filterExpanderIcon-XaLt7D {
+  transform: rotate(90deg);
+}
+
+.filterExpanderWrapper-Ea0hYg {
+  padding: 0 var(--size-00) var(--size-p1);
+  padding-inline-start: calc(var(--size-p1)  + 15px + var(--size-n2));
+}
+
+.filterOptions-nwLHze {
+  gap: var(--size-n2);
+  flex-direction: column;
+  display: flex;
+}
+
+.listBoxFilterContainer-SylnjB {
+  height: 360px;
+}
+
 .filterButton-_xmjv4, .downloadLink-ikiKns {
   justify-content: flex-end;
   gap: var(--size-00);

package/dist/utils/useNextContext.d.ts

@@ -1,7 +1,7 @@
 declare const useNextContext: () => {
     Image: typeof import("next/image").default;
     Link: import("react").ForwardRefExoticComponent<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, keyof import("next/link").LinkProps<any>> & import("next/link").LinkProps<any> & {
-        children?: import("react").ReactNode | undefined;
+        children?: React.ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
     pathname: string | null;
     router: import("next/router").NextRouter | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.36.0",
+  "version": "0.37.1",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.19.0"
+    "@worknice/utils": "^0.20.1"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",
@@ -74,7 +74,7 @@
     "semantic-release": "^24.2.2",
     "storybook": "^10.1.2",
     "temporal-polyfill": "^0.2.5",
-    "typescript": "~5.5.0",
+    "typescript": "^5.9.3",
     "uuid": "^11.0.5",
     "vitest": "^2.1.0"
   },