@worknice/whiteboard 0.49.0 → 0.51.0

package/dist/fields/ListBoxField.d.ts

@@ -11,13 +11,21 @@ type Props<Option> = {
     labelFont?: LabelFontOption;
     required?: boolean;
     onChange: (option: Option) => void;
-    options: Array<Option>;
     optionToId: (option: Option) => string;
     optionToLabel: (option: Option) => ReactNode;
     optionToDisabled?: (option: Option) => boolean;
     searchField: keyof Option & string;
     value: Array<Option>;
     fixedHeight?: boolean;
-};
-declare const SelectField: <Option>({ description, errors, id, includeValueInTracking, label, labelFont, required, onChange, options, optionToId, optionToLabel, searchField, value, optionToDisabled, fixedHeight, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
-export default SelectField;
+} & ({
+    options: Array<Option>;
+    optionGroups?: never;
+} | {
+    options?: never;
+    optionGroups: Array<{
+        header: string;
+        options: Array<Option>;
+    }>;
+});
+declare const ListBoxField: <Option>({ description, errors, id, includeValueInTracking, label, labelFont, required, onChange, optionToId, optionToLabel, searchField, value, optionToDisabled, fixedHeight, ...rest }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
+export default ListBoxField;

package/dist/fields/ListBoxField.js

@@ -1,7 +1,13 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__ from "../forms/RegularField.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_ListBoxInput_js_31ed5aa7__ from "../inputs/ListBoxInput.js";
-const SelectField = ({ description, errors, id, includeValueInTracking, label, labelFont = "label", required = false, onChange, options, optionToId, optionToLabel, searchField, value, optionToDisabled, fixedHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
+const ListBoxField = ({ description, errors, id, includeValueInTracking, label, labelFont = "label", required = false, onChange, optionToId, optionToLabel, searchField, value, optionToDisabled, fixedHeight, ...rest })=>{
+    const optionProps = "options" in rest && null != rest.options ? {
+        options: rest.options
+    } : {
+        optionGroups: rest.optionGroups
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
         description: description,
         errors: errors,
         inputId: id,
@@ -9,8 +15,8 @@ const SelectField = ({ description, errors, id, includeValueInTracking, label, l
         labelFont: labelFont,
         required: required,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_ListBoxInput_js_31ed5aa7__["default"], {
+            ...optionProps,
             onChange: onChange,
-            options: options,
             optionToId: optionToId,
             optionToLabel: optionToLabel,
             optionToDisabled: optionToDisabled,
@@ -21,5 +27,6 @@ const SelectField = ({ description, errors, id, includeValueInTracking, label, l
             fixedHeight: fixedHeight
         })
     });
-const ListBoxField_rslib_entry_ = SelectField;
+};
+const ListBoxField_rslib_entry_ = ListBoxField;
 export { ListBoxField_rslib_entry_ as default };

package/dist/forms/ToggleField_module.css

@@ -16,7 +16,6 @@
   font: var(--font-regular);
   -webkit-user-select: none;
   user-select: none;
-  width: max-content;
 }
 
 .hasErrors-P1so2c .content-X4T0f7 .label-FiubLL {

package/dist/inputs/ListBoxInput.d.ts

@@ -1,7 +1,6 @@
 import { type ReactNode } from "react";
 type Props<Option> = {
     onChange: (option: Option) => void;
-    options: Array<Option>;
     optionToId: (option: Option) => string;
     optionToLabel: (option: Option) => ReactNode;
     optionToDisabled?: (option: Option) => boolean;
@@ -10,6 +9,15 @@ type Props<Option> = {
     id?: string;
     includeValueInTracking?: boolean;
     fixedHeight?: boolean;
-};
-declare const ListBoxInput: <Option>({ onChange, options, optionToId, optionToLabel, optionToDisabled, searchField, value, id, includeValueInTracking, fixedHeight, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
+} & ({
+    options: Array<Option>;
+    optionGroups?: never;
+} | {
+    options?: never;
+    optionGroups: Array<{
+        header: string;
+        options: Array<Option>;
+    }>;
+});
+declare const ListBoxInput: <Option>({ onChange, options, optionGroups, optionToId, optionToLabel, optionToDisabled, searchField, value, id, includeValueInTracking, fixedHeight, }: Props<Option>) => import("react/jsx-runtime").JSX.Element;
 export default ListBoxInput;

package/dist/inputs/ListBoxInput.js

@@ -1,20 +1,89 @@
 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__presentation_PlainText_js_e98763ad__ from "../presentation/PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__ from "../utils/search.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__ from "../utils/TrackingContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__CheckboxInput_js_1a7df59a__ from "./CheckboxInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__ from "./ListBoxInput.module.js";
 import * as __WEBPACK_EXTERNAL_MODULE__StringInput_js_3cb68a8a__ from "./StringInput.js";
-const ListBoxInput = ({ onChange, options, optionToId, optionToLabel, optionToDisabled, searchField, value, id, includeValueInTracking, fixedHeight = false })=>{
+const ListBoxInput = ({ onChange, options, optionGroups, optionToId, optionToLabel, optionToDisabled, searchField, value, id, includeValueInTracking, fixedHeight = false })=>{
     const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
     const trackingContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__["default"]);
-    const filteredOptions = "" !== searchTerm.trim() ? (0, __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__["default"])(options.map((option)=>({
+    const allOptions = options ?? optionGroups.flatMap((group)=>group.options) ?? [];
+    const filteredOptions = "" !== searchTerm.trim() ? (0, __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__["default"])(allOptions.map((option)=>({
             ...option,
             id: optionToId(option)
         })), [
         searchField
-    ], searchTerm) : options;
+    ], searchTerm) : allOptions;
+    const renderOption = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((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);
+                    }
+                }),
+                optionLabel
+            ]
+        }, optionId);
+    }, [
+        optionToId,
+        optionToLabel,
+        optionToDisabled,
+        value,
+        onChange,
+        trackingContext,
+        id,
+        includeValueInTracking
+    ]);
+    const renderOptions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        if (options) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].optionsContainer,
+            children: filteredOptions.map(renderOption)
+        });
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].optionGroupsContainer,
+            children: optionGroups.map((group)=>{
+                if (0 === group.options.length) return null;
+                const groupOptionIds = new Set(group.options.map((o)=>optionToId(o)));
+                const filteredGroupOptions = filteredOptions.filter((o)=>groupOptionIds.has(optionToId(o)));
+                if (0 === filteredGroupOptions.length) return null;
+                return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].optionGroupHeader,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                                font: "regular-bold",
+                                children: group.header
+                            })
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].optionsContainer,
+                            children: filteredGroupOptions.map(renderOption)
+                        })
+                    ]
+                }, group.header);
+            })
+        });
+    }, [
+        filteredOptions,
+        optionGroups,
+        renderOption,
+        options,
+        optionToId
+    ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].container, {
             [__WEBPACK_EXTERNAL_MODULE__ListBoxInput_module_js_52d8d802__["default"].fixedHeight]: fixedHeight
@@ -33,31 +102,7 @@ const ListBoxInput = ({ onChange, options, optionToId, optionToLabel, optionToDi
             }),
             /*#__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
-                            }),
-                            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", {
+                children: 0 !== filteredOptions.length ? renderOptions() : /*#__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

@@ -6,6 +6,8 @@ const ListBoxInput_module_rslib_entry_ = {
     listContainer: "listContainer-a9BpgI",
     optionsContainer: "optionsContainer-q0if3P",
     noResultsContainer: "noResultsContainer-FEqb9D",
+    optionGroupsContainer: "optionGroupsContainer-DDCZK6",
+    optionGroupHeader: "optionGroupHeader-qd90r6",
     option: "option-uViftw",
     disabled: "disabled-wpSMEL"
 };

package/dist/inputs/ListBoxInput_module.css

@@ -34,6 +34,16 @@
   padding: var(--size-00);
 }
 
+.optionGroupsContainer-DDCZK6 .optionGroupHeader-qd90r6:first-child {
+  padding-top: var(--size-n1);
+}
+
+.optionGroupHeader-qd90r6 {
+  padding-left: var(--size-n1);
+  padding-right: var(--size-n1);
+  padding-bottom: 0;
+}
+
 .option-uViftw {
   padding: var(--size-n2);
   gap: var(--size-n2);

package/dist/inputs/StringInput.d.ts

@@ -9,7 +9,7 @@ type Props = {
     type?: "text" | "multiline" | "email" | "tel" | "url" | "search" | "password";
     value: string | null;
     prefix?: ReactNode | null;
-    suffix?: string | null;
+    suffix?: ReactNode | null;
     inputMode?: "text" | "numeric" | "decimal" | "numeric" | "tel" | "search" | "url" | "email";
     maxLength?: number;
     size?: number;

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

@@ -1,12 +1,16 @@
 type Column = {
     id: string;
-    name: string;
+    header: string;
+};
+type ColumnGroup = {
+    header: string;
+    columns: Column[];
 };
 type Props = {
     selectedColumns: Column[];
-    availableColumns: Column[];
+    availableColumnGroups: ColumnGroup[];
     onClose: () => void;
     onSave: (selectedColumns: Column[]) => void;
 };
-export declare const ConfigureColumnsModal: ({ selectedColumns, availableColumns, onClose, onSave, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfigureColumnsModal: ({ selectedColumns, availableColumnGroups, onClose, onSave, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/presentation/CustomizableTable/ConfigureColumnsModal.js

@@ -8,7 +8,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_presentation_Card_2c1
 import * as __WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_presentation_CardContent_7df3771e__ from "@worknice/whiteboard/presentation/CardContent";
 import * as __WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_presentation_Modal_c387b97c__ from "@worknice/whiteboard/presentation/Modal";
 import * as __WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_presentation_PlainText_c60690e6__ from "@worknice/whiteboard/presentation/PlainText";
-const ConfigureColumnsModal = ({ selectedColumns, availableColumns, onClose, onSave })=>{
+const ConfigureColumnsModal = ({ selectedColumns, availableColumnGroups, onClose, onSave })=>{
     const { data, setData, status, submit } = (0, __WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_forms_useForm_0e3543cc__["default"])({
         initialValues: {
             selectedColumns
@@ -34,6 +34,12 @@ const ConfigureColumnsModal = ({ selectedColumns, availableColumns, onClose, onS
         data.selectedColumns,
         setData
     ]);
+    const optionGroups = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>availableColumnGroups.map(({ header, columns })=>({
+                header,
+                options: columns
+            })), [
+        availableColumnGroups
+    ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_presentation_Modal_c387b97c__["default"], {
         onClose: onClose,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_presentation_Card_2c171bdf__["default"], {
@@ -58,10 +64,10 @@ const ConfigureColumnsModal = ({ selectedColumns, availableColumns, onClose, onS
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__worknice_whiteboard_fields_ListBoxField_ee41eec4__["default"], {
                     label: "Columns",
                     id: "columnsListBox",
-                    options: availableColumns,
+                    optionGroups: optionGroups,
                     optionToId: (column)=>column.id,
-                    optionToLabel: (column)=>column.name,
-                    searchField: "name",
+                    optionToLabel: (column)=>column.header,
+                    searchField: "header",
                     value: data.selectedColumns,
                     onChange: onSelect
                 })

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

@@ -42,9 +42,12 @@ type Props<Type> = {
     })>;
     csvFilename?: string;
     getRowId: (row: Type) => string;
-    availableColumns?: Array<{
-        id: string;
+    availableColumnGroups: Array<{
         header: string;
+        columns: Array<{
+            id: string;
+            header: string;
+        }>;
     }>;
     view: CustomizableTableView;
     onViewChange: (view: CustomizableTableView) => void;
@@ -52,5 +55,5 @@ type Props<Type> = {
     estimatedRowSize?: number;
     emptyState?: ReactNode;
 };
-declare const CustomizableTable: <Type>({ data, columns, csvFilename, getRowId, availableColumns, view, onViewChange, isLoading, estimatedRowSize, emptyState, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
+declare const CustomizableTable: <Type>({ data, columns, csvFilename, getRowId, availableColumnGroups, view, onViewChange, isLoading, estimatedRowSize, emptyState, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
 export default CustomizableTable;

package/dist/presentation/CustomizableTable/CustomizableTable.js

@@ -81,10 +81,7 @@ const DraggableColumnHeader = ({ header, getColumnStyle, showResizer = true })=>
         ]
     });
 };
-const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColumns = columns.map((col)=>({
-        id: col.id,
-        header: "string" == typeof col.header ? col.header : col.id
-    })), view, onViewChange, isLoading = false, estimatedRowSize = 100, emptyState = "No results" })=>{
+const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColumnGroups, view, onViewChange, isLoading = false, estimatedRowSize = 100, emptyState = "No results" })=>{
     const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
     const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const [activeId, setActiveId] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
@@ -367,8 +364,8 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
     ]);
     const hasFilterableColumns = filterableColumnsForModal.length > 0;
     const applyColumnSelection = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((selected)=>{
-        if (0 === availableColumns.length) return;
-        const availableIds = new Set(availableColumns.map((c)=>c.id));
+        if (0 === availableColumnGroups.length) return;
+        const availableIds = new Set(availableColumnGroups.flatMap((group)=>group.columns.map((c)=>c.id)));
         const selectedIds = new Set(selected.map((c)=>c.id));
         const filtersBefore = reactTable.getState().columnFilters;
         const visibility = {
@@ -385,18 +382,12 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
         reactTable.setColumnOrder(newOrder);
         reactTable.setColumnFilters(filtersBefore.filter((f)=>!availableIds.has(f.id) || selectedIds.has(f.id)));
     }, [
-        availableColumns,
+        availableColumnGroups,
         reactTable
     ]);
-    const configureColumnsModalColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>availableColumns.map((col)=>({
-                id: col.id,
-                name: col.header
-            })), [
-        availableColumns
-    ]);
-    const selectedConfigureColumns = availableColumns.filter((col)=>reactTable.getColumn(col.id)?.getIsVisible() ?? false).map((col)=>({
+    const selectedConfigureColumns = availableColumnGroups.flatMap((group)=>group.columns).filter((col)=>reactTable.getColumn(col.id)?.getIsVisible() ?? false).map((col)=>({
             id: col.id,
-            name: col.header
+            header: col.header
         }));
     const handleDragStart = (event)=>{
         setActiveId(event.active.id);
@@ -437,7 +428,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
         reactTable,
         scrollContainerWidth
     ]);
-    const showTableFilterBar = 0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== availableColumns.length;
+    const showTableFilterBar = 0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== availableColumnGroups.length;
     const tableLayoutWidthPx = reactTable.getTotalSize();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].root,
@@ -466,7 +457,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                         disabled: isLoading
                                     })
                                 }) : null,
-                                0 !== availableColumns.length || 0 !== filterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                0 !== availableColumnGroups.length || 0 !== filterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                                     className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].filterSelectMenus,
                                     children: [
                                         0 !== filterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
@@ -481,7 +472,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                                 !isLoading && activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
                                             ]
                                         }) : null,
-                                        0 !== availableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
+                                        0 !== availableColumnGroups.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
                                             disabled: isLoading,
                                             id: "columnVisibility",
                                             icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
@@ -490,7 +481,7 @@ const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColu
                                             type: "secondary",
                                             render: (onClose)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ConfigureColumnsModal_js_cdac33d6__.ConfigureColumnsModal, {
                                                     selectedColumns: selectedConfigureColumns,
-                                                    availableColumns: configureColumnsModalColumns,
+                                                    availableColumnGroups: availableColumnGroups,
                                                     onClose: onClose,
                                                     onSave: (selectedColumns)=>{
                                                         applyColumnSelection(selectedColumns);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "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.32.0"
+    "@worknice/utils": "^0.34.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",