@worknice/whiteboard 0.20.0 → 0.21.0

package/dist/controls/MenuButton.js

@@ -36,14 +36,21 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
         })), [
         "label"
     ], searchTerm) : nonNullOptions;
+    const filteredIndexById = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const map = new Map();
+        filteredOptions.forEach((option, index)=>{
+            map.set(option.id, index);
+        });
+        return map;
+    }, [
+        filteredOptions
+    ]);
     const { refs: floatingUiRefs, floatingStyles, context } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
         open: isOpen,
         onOpenChange: (open)=>{
             setIsOpen(open);
-            if (open) {
-                setActiveIndex(null);
-                setSearchTerm("");
-            }
+            setActiveIndex(null);
+            setSearchTerm("");
         },
         whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate,
         placement: "bottom-start",
@@ -72,6 +79,44 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
         dismiss,
         listNav
     ]);
+    const triggerOption = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async (option, index, event, syntheticEvent)=>{
+        if (option.disabled) return;
+        if ("link" === option.type) {
+            const anchor = optionsRef.current[index]?.querySelector("a");
+            if (anchor instanceof HTMLElement) {
+                anchor.click();
+                setIsOpen(false);
+            }
+            return;
+        }
+        if ("onClick" === option.type) {
+            setIsOpen(false);
+            try {
+                setLoading(true);
+                await option.onClick(event ?? syntheticEvent);
+            } catch (error) {
+                if (error instanceof __WEBPACK_EXTERNAL_MODULE__forms_FormError_js_7d98929f__["default"]) setErrors(error.validationErrors);
+                else error instanceof Error ? setErrors([
+                    {
+                        id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
+                        message: error.message
+                    }
+                ]) : setErrors([
+                    {
+                        id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
+                        message: "Unknown error."
+                    }
+                ]);
+            } finally{
+                setLoading(false);
+            }
+            return;
+        }
+        if ("render" === option.type) {
+            setIsOpen(false);
+            setOptionToRender(option);
+        }
+    }, []);
     const renderOption = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((option, index)=>{
         if ("link" === option.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
             role: "option",
@@ -99,29 +144,8 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
                 [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].disabled]: option.disabled
             }),
             ...getItemProps({
-                onClick: "onClick" !== option.type || option.disabled ? ()=>{
-                    setIsOpen(false);
-                    setOptionToRender(option);
-                } : async (event)=>{
-                    setIsOpen(false);
-                    try {
-                        setLoading(true);
-                        await option.onClick(event);
-                    } catch (error) {
-                        if (error instanceof __WEBPACK_EXTERNAL_MODULE__forms_FormError_js_7d98929f__["default"]) setErrors(error.validationErrors);
-                        else error instanceof Error ? setErrors([
-                            {
-                                id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
-                                message: error.message
-                            }
-                        ]) : setErrors([
-                            {
-                                id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
-                                message: "Unknown error."
-                            }
-                        ]);
-                    }
-                    setLoading(false);
+                onClick: (event)=>{
+                    triggerOption(option, index, event);
                 },
                 ref: (node)=>{
                     optionsRef.current[index] = node;
@@ -135,8 +159,19 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
         optionsRef,
         NextLink
     ]);
+    const triggerOptionAtIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
+        if (null == index) return;
+        const option = filteredOptions[index];
+        if (!option || option.disabled) return;
+        triggerOption(option, index, void 0, new KeyboardEvent("keydown", {
+            key: "Enter"
+        }));
+    }, [
+        filteredOptions,
+        triggerOption
+    ]);
     const renderOptions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
-        if (options) return filteredOptions.map(renderOption);
+        if (options) return filteredOptions.map((option, index)=>renderOption(option, index));
         return optionGroups.map((group)=>{
             if (0 === group.options.length) return null;
             const groupOptionIds = new Set(group.options.map((o)=>o?.id));
@@ -155,7 +190,8 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
                         role: "group",
                         "aria-labelledby": headerId,
                         children: filteredGroupOptions.map((option)=>{
-                            const optionIndex = optionGroups.flatMap((group)=>group.options).indexOf(option);
+                            const optionIndex = filteredIndexById.get(option.id);
+                            if (null == optionIndex) return null;
                             return renderOption(option, optionIndex);
                         })
                     })
@@ -167,7 +203,8 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
         optionGroups,
         options,
         renderOption,
-        listboxId
+        listboxId,
+        filteredIndexById
     ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
         children: [
@@ -210,7 +247,14 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
                         ref: floatingUiRefs.setFloating,
                         style: floatingStyles,
                         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].menu),
-                        ...getFloatingProps(),
+                        ...getFloatingProps({
+                            onKeyDown: (event)=>{
+                                if ("Enter" === event.key && null != activeIndex) {
+                                    event.preventDefault();
+                                    triggerOptionAtIndex(activeIndex);
+                                }
+                            }
+                        }),
                         children: [
                             displaySearch ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
                                 type: "text",
@@ -222,10 +266,7 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
                                     setActiveIndex(0);
                                 },
                                 value: searchTerm,
-                                ref: searchRef,
-                                onKeyDown: (event)=>{
-                                    if ("Enter" === event.key && null != activeIndex) setIsOpen(false);
-                                }
+                                ref: searchRef
                             }) : null,
                             0 !== filteredOptions.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
                                 className: __WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].listBox,

package/dist/inputs/SingleSelectComboboxInput.js

@@ -29,10 +29,8 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
         open: isOpen,
         onOpenChange: (open)=>{
             setIsOpen(open);
-            if (open) {
-                setActiveIndex(0);
-                setSearchTerm("");
-            }
+            setActiveIndex(0);
+            setSearchTerm("");
         },
         whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate,
         placement: "bottom-start",
@@ -129,6 +127,16 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
         renderOption,
         options
     ]);
+    const selectOptionAtIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
+        if (null == index) return;
+        const option = filteredOptions[index];
+        if (!option) return;
+        setIsOpen(false);
+        onChange(option);
+    }, [
+        filteredOptions,
+        onChange
+    ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
@@ -177,7 +185,14 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
                         ref: floatingUiRefs.setFloating,
                         style: floatingStyles,
                         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].menu),
-                        ...getFloatingProps(),
+                        ...getFloatingProps({
+                            onKeyDown: (event)=>{
+                                if ("Enter" === event.key && null != activeIndex) {
+                                    event.preventDefault();
+                                    selectOptionAtIndex(activeIndex);
+                                }
+                            }
+                        }),
                         children: [
                             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
                                 type: "text",
@@ -189,13 +204,7 @@ const SingleSelectComboBoxInput = ({ autoFocus = false, disabled = false, id, on
                                     setActiveIndex(0);
                                 },
                                 value: searchTerm,
-                                ref: searchRef,
-                                onKeyDown: (e)=>{
-                                    if ("Enter" === e.key && null != activeIndex) {
-                                        setIsOpen(false);
-                                        onChange(filteredOptions[activeIndex]);
-                                    }
-                                }
+                                ref: searchRef
                             }),
                             0 !== filteredOptions.length || onCreate ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("ul", {
                                 className: __WEBPACK_EXTERNAL_MODULE__SingleSelectComboboxInput_module_js_54aa53da__["default"].listBox,

package/dist/presentation/Table.js

@@ -29,6 +29,16 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.autoUpdate
     });
     const enableRowSelection = bulkActions.length + secondaryBulkActions.length > 0;
+    const isRowSelectable = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((row)=>{
+        const allBulkActions = [
+            ...bulkActions,
+            ...secondaryBulkActions
+        ];
+        return allBulkActions.some((bulkAction)=>!bulkAction.predicate || bulkAction.predicate(row.original));
+    }, [
+        bulkActions,
+        secondaryBulkActions
+    ]);
     const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
         const result = columns.map((column)=>{
@@ -63,15 +73,20 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         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(),
+                header: ({ table })=>{
+                    const selectableRows = table.getRowModel().rows.filter((row)=>row.getCanSelect());
+                    const AllRowsSelected = table.getIsAllRowsSelected();
+                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__["default"], {
+                        disabled: 0 === selectableRows.length,
+                        value: AllRowsSelected,
                         onChange: ()=>{
-                            table.toggleAllRowsSelected(!(table.getIsAllRowsSelected() || table.getIsSomeRowsSelected()));
+                            table.toggleAllRowsSelected(!(AllRowsSelected || 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"], {
+                        disabled: !row.getCanSelect(),
                         value: row.getIsSelected(),
                         onClick: (event)=>{
                             if (event.shiftKey && lastSelectedRow.current) {
@@ -80,7 +95,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                                 const lastIndex = visibleRows.findIndex((r)=>r.id === lastSelectedRow.current?.id);
                                 const startIndex = Math.min(lastIndex, visibleIndex);
                                 const endIndex = Math.max(lastIndex, visibleIndex);
-                                const rowsToSelect = visibleRows.slice(startIndex, endIndex + 1).filter((r)=>0 === r.subRows.length);
+                                const rowsToSelect = visibleRows.slice(startIndex, endIndex + 1).filter((r)=>0 === r.subRows.length && r.getCanSelect());
                                 rowsToSelect.forEach((rowToSelect)=>rowToSelect.toggleSelected(!row.getIsSelected()));
                             }
                             lastSelectedRow.current = row;
@@ -124,6 +139,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         getFilteredRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getFilteredRowModel)(),
         getExpandedRowModel: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.getExpandedRowModel)(),
         getColumnCanGlobalFilter: ()=>true,
+        enableRowSelection: enableRowSelection ? isRowSelectable : false,
         initialState: {
             expanded: true,
             columnFilters: parsedLocalStorage.columnFilters ?? columnFiltersInitialState,
@@ -193,8 +209,9 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
     };
     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));
+    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({
             columnFilters: tableState.columnFilters,
@@ -210,6 +227,23 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
     ]);
     const shouldShowCsvExport = csvExportableColumns.length > 0 && csvFilename;
     const shouldShowMoreActions = validSecondaryBulkActions.length > 0 || shouldShowCsvExport;
+    const getbulkActionRows = (bulkAction)=>filteredSelectedRows.flatRows.filter((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true).map((row)=>row.original);
+    const primaryBulkActionRowsMap = new Map(validPrimaryBulkActions.map((bulkAction)=>[
+            bulkAction.key,
+            getbulkActionRows(bulkAction)
+        ]));
+    const secondaryBulkActionRowsMap = new Map(validSecondaryBulkActions.map((bulkAction)=>[
+            bulkAction.key,
+            getbulkActionRows(bulkAction)
+        ]));
+    const allBulkActionRowCounts = [
+        ...Array.from(primaryBulkActionRowsMap.values()).map((rows)=>rows.length),
+        ...Array.from(secondaryBulkActionRowsMap.values()).map((rows)=>rows.length)
+    ];
+    const bulkActionRowCountsDiffer = new Set(allBulkActionRowCounts).size > 1;
+    const hasMultipleActions = allBulkActionRowCounts.length > 1;
+    const allRowsCanDoAllActions = hasMultipleActions && allBulkActionRowCounts.every((count)=>count === filteredSelectedRows.rows.length);
+    const showBulkActionCounts = bulkActionRowCountsDiffer || hasMultipleActions && !allRowsCanDoAllActions;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         ref: refs.setReference,
         children: [
@@ -229,35 +263,41 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                                 /*#__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,
+                                        filteredSelectedRows.rows.length,
                                         " ",
-                                        1 === table.getFilteredSelectedRowModel().rows.length ? "selection" : "selections"
+                                        1 === filteredSelectedRows.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"], {
+                                        validPrimaryBulkActions.map((bulkAction)=>{
+                                            const rows = primaryBulkActionRowsMap.get(bulkAction.key) ?? [];
+                                            return /*#__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),
+                                                        rows: primaryBulkActionRowsMap.get(bulkAction.key) ?? [],
                                                         resetRowSelection: ()=>table.resetRowSelection(),
                                                         onClose: onClose
                                                     }),
-                                                children: bulkAction.label
-                                            }, bulkAction.key)),
+                                                children: showBulkActionCounts ? `${bulkAction.label} (${rows.length})` : bulkAction.label
+                                            }, bulkAction.key);
+                                        }),
                                         shouldShowMoreActions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__["default"], {
                                             id: "bulkActionOverflow",
                                             options: [
-                                                ...validSecondaryBulkActions.map((bulkAction)=>({
+                                                ...validSecondaryBulkActions.map((bulkAction)=>{
+                                                    const rows = secondaryBulkActionRowsMap.get(bulkAction.key) ?? [];
+                                                    return {
                                                         id: bulkAction.key,
-                                                        label: bulkAction.label,
+                                                        label: showBulkActionCounts ? `${bulkAction.label} (${rows.length})` : 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),
+                                                                rows: rows,
                                                                 resetRowSelection: ()=>table.resetRowSelection(),
                                                                 onClose: onClose
                                                             })
-                                                    })),
+                                                    };
+                                                }),
                                                 ...shouldShowCsvExport ? [
                                                     {
                                                         id: "download-selected-rows",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -38,7 +38,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^3.22.3",
-    "@worknice/utils": "^0.6.77"
+    "@worknice/utils": "^0.6.78"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^1.1.10",