@worknice/whiteboard 0.43.1 → 0.44.0

package/dist/presentation/TableColumnFilterModal.d.ts

@@ -0,0 +1,41 @@
+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.
+ */
+export type Filter<Type> = {
+    isMulti?: false;
+    label: string;
+    options: Array<SingleFilterOption<Type>>;
+} | {
+    isMulti: true;
+    label: string;
+    options: Array<MultiFilterOption<Type>>;
+};
+type ColumnFilterState = {
+    id: string;
+    value: unknown;
+};
+type TableColumnFilterModalProps<Type> = {
+    onClose: () => void;
+    filterableColumns: {
+        id: string;
+        filter: Filter<Type>;
+    }[];
+    currentFilters: ColumnFilterState[];
+    onFiltersChange: (filters: ColumnFilterState[]) => void;
+};
+declare const TableColumnFilterModal: <Type>({ onClose, filterableColumns, currentFilters, onFiltersChange, }: TableColumnFilterModalProps<Type>) => import("react/jsx-runtime").JSX.Element;
+export default TableColumnFilterModal;

package/dist/presentation/TableColumnFilterModal.js

@@ -0,0 +1,271 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_BooleanField_js_dc79ee46__ from "../fields/BooleanField.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__Card_js_d67c086a__ from "./Card.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__Modal_js_50f53bdf__ from "./Modal.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";
+const MIN_LIST_BOX_FILTER_OPTIONS = 10;
+const TableFilterExpander = ({ label, children, highlight = false, defaultOpen = false })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("details", {
+        open: defaultOpen,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpander, {
+            [__WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderHighlight]: highlight
+        }),
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("summary", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderRow,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["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_module_js_1c0e33be__["default"].filterExpanderLabel,
+                        children: label
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderWrapper,
+                children: children
+            })
+        ]
+    });
+const TableColumnFilterModal = ({ 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"], {
+                font: "h6",
+                tagName: "h6",
+                children: "Filters"
+            }),
+            footer: /*#__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)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                        type: "secondary",
+                        onClick: ()=>{
+                            setData(()=>({
+                                    filters: resetFilterValues
+                                }));
+                        },
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                            symbol: "Restore"
+                        }),
+                        children: "Reset all filters"
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__["default"], {
+                        formStatus: status,
+                        primary: {
+                            action: async ()=>{
+                                submit();
+                                onClose();
+                            },
+                            label: "Apply filters"
+                        },
+                        secondary: {
+                            action: onClose,
+                            label: "Cancel",
+                            type: "ghost"
+                        }
+                    })
+                ]
+            }),
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["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)(TableFilterExpander, {
+                            label: multiFilterLabel,
+                            highlight: selectedIds.length > 0,
+                            defaultOpen: 1 === filterableColumns.length,
+                            children: filter.options.length > MIN_LIST_BOX_FILTER_OPTIONS ? /*#__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),
+                                fixedHeight: true
+                            }) : /*#__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 isBooleanFilter = 2 === filter.options.length;
+                    const booleanValue = isBooleanFilter && value === filter.options[1].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 isBooleanFilter ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBooleanFieldWrapper,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_BooleanField_js_dc79ee46__["default"], {
+                            id: `${column.id}-filter`,
+                            label: filter.label,
+                            value: booleanValue,
+                            onChange: (checked)=>{
+                                setData((prev)=>({
+                                        filters: {
+                                            ...prev.filters,
+                                            [column.id]: checked ? filter.options[1].id : filter.options[0].id
+                                        }
+                                    }));
+                            }
+                        })
+                    }, column.id) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(TableFilterExpander, {
+                        label: singleFilterLabel,
+                        highlight: hasNonDefaultValue,
+                        defaultOpen: 1 === filterableColumns.length,
+                        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 TableColumnFilterModal_rslib_entry_ = TableColumnFilterModal;
+export { TableColumnFilterModal_rslib_entry_ as default };

package/dist/utils/tables.d.ts

@@ -0,0 +1,8 @@
+import type { Row } from "@tanstack/react-table";
+export type PrimitiveValue = boolean | string | undefined | number;
+type Column = {
+    id: string;
+    header?: string;
+};
+export declare const handleDownloadCsv: <Type>(csvFilename: string | undefined, columns: Column[], rows: Row<Type>[]) => void;
+export {};

package/dist/utils/tables.js

@@ -0,0 +1,18 @@
+import * as __WEBPACK_EXTERNAL_MODULE_utf8__ from "utf8";
+import * as __WEBPACK_EXTERNAL_MODULE__encodeCsv_js_c1f49309__ from "./encodeCsv.js";
+const createCsvDataUrl = (columns, rows)=>{
+    const csvContent = (0, __WEBPACK_EXTERNAL_MODULE__encodeCsv_js_c1f49309__["default"])([
+        columns.map((col)=>col.header),
+        ...rows.map((row)=>columns.map((col)=>row.getValue(col.id)))
+    ]);
+    return `data:text/csv;charset=utf-8,${__WEBPACK_EXTERNAL_MODULE_utf8__["default"].encode(csvContent)}`;
+};
+const handleDownloadCsv = (csvFilename, columns, rows)=>{
+    if (!csvFilename) return;
+    const csvDataUrl = createCsvDataUrl(columns, rows);
+    const a = document.createElement("a");
+    a.href = csvDataUrl;
+    a.download = csvFilename.endsWith(".csv") ? csvFilename : `${csvFilename}.csv`;
+    a.click();
+};
+export { handleDownloadCsv };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.43.1",
+  "version": "0.44.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -25,8 +25,8 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.19",
     "@floating-ui/react-dom": "^2.0.8",
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.26.1"
+    "@worknice/utils": "^0.27.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",

package/dist/presentation/CustomizableTable/CustomizableTableContents.d.ts

@@ -1,38 +0,0 @@
-import type { SortingColumnDef } from "@tanstack/react-table";
-import { useReactTable } from "@tanstack/react-table";
-import { type ReactNode } from "react";
-type PrimitiveValue = boolean | string | undefined | number;
-type Filter<Type> = {
-    label: string;
-    options: Array<{
-        id: string;
-        label: string;
-        /**
-         * If omitted no filtering will be applied.
-         */
-        predicate?: (row: Type) => boolean;
-    }>;
-};
-type Props<Type> = {
-    reactTable: ReturnType<typeof useReactTable<Type>>;
-    columns: Array<{
-        cell?: (row: Type) => ReactNode;
-        filter?: Filter<Type>;
-        id: string;
-        globalFiltering?: boolean;
-        size?: number;
-        enableSorting?: boolean;
-        sortUndefined?: SortingColumnDef<Type>["sortUndefined"];
-    } & ({
-        type?: "accessor";
-        value: (row: Type) => PrimitiveValue;
-        header: string;
-    } | {
-        type: "display";
-        header?: string;
-    })>;
-    showRowCount?: boolean;
-    isLoading?: boolean;
-};
-declare const CustomizableTableContents: <Type>({ reactTable, columns, showRowCount, isLoading, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
-export default CustomizableTableContents;