@vinorcola/dynamic-table 1.1.1 → 1.2.0

package/lib/DefaultTheme.js

@@ -62,7 +62,7 @@ export function HeaderLine(props) {
     return _jsx("tr", { className: "bg-table-header", children: props.children });
 }
 export function SelectionHeader(props) {
-    return (_jsxs("th", { className: "relative", children: [props.totalSelected, _jsxs("span", { className: "text-sm text-stone-500 italic", children: ["(", props.unvisibleSelected, " cach\u00E9", props.unvisibleSelected > 1 ? "s" : "", ")"] })] }));
+    return (_jsxs("th", { className: "relative", children: [props.totalSelected, _jsxs("span", { className: "block text-xs text-stone-400 italic", children: ["(", props.unvisibleSelected, " cach\u00E9", props.unvisibleSelected > 1 ? "s" : "", ")"] })] }));
 }
 export function Header(props) {
     const filterPopup = usePopup();
@@ -110,7 +110,7 @@ export function Line(props) {
     return (_jsx("tr", { className: "even:[&>*]:bg-table-line-even odd:[&>*]:bg-table-line-odd hover:bg-table-line-hover", children: props.children }));
 }
 export function SelectionCell(props) {
-    return (_jsx("td", { onClick: (event) => {
+    return (_jsx("td", { className: "cursor-pointer", onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
             props.onToggle();

package/lib/index.js

@@ -11,13 +11,14 @@ import useSortState from "./useSortState.js";
 export { default as Dictionary } from "./Dictionary.js";
 export default function DynamicTable(props) {
     const columns = useColumns(props.columns);
-    const items = useItems(props.items, props.itemTarget, columns);
+    const items = useItems(props.items, props.itemTarget, columns, props.canSelectItem);
     const { columns: filteredColumns, items: filteredItems, clearFilterState, } = useFilterState(columns, items, props.initialFilterState);
     const { columns: sortedColumns, items: sortedItems, clearSortState, } = useSortState(filteredColumns, filteredItems, props.initialSortState);
     const { allColumns, columns: displayedColumns, items: displayedItems, } = useMaskableColumns(sortedColumns, sortedItems, props.initialColumnsMaskState);
     const { items: paginatedItems, itemsPerPage, onItemsPerPageChange, totalPages, currentPage, onCurrentPageChange, } = usePagination(displayedItems, props.initialPaginationState);
     const { isInSelectionMode, totalSelectedQuantity, unvisibleSelectedQuantity, isItemSelected, onItemSelectionToggle, } = useSelection(props, paginatedItems);
-    return (_jsx(UniquePopupProvider, { children: _jsxs(DynamicTable.TableContainer, { children: [_jsx(DynamicTable.Controller, { columns: allColumns, clearFilterState: clearFilterState, clearSortState: clearSortState }), _jsxs(DynamicTable.Table, { children: [_jsx(DynamicTable.HeaderContainer, { children: _jsxs(DynamicTable.HeaderLine, { children: [isInSelectionMode && (_jsx(DynamicTable.SelectionHeader, { totalSelected: totalSelectedQuantity, unvisibleSelected: unvisibleSelectedQuantity })), displayedColumns.map((column) => (_jsx(DynamicTable.Header, { column: column, children: column.title }, column.id)))] }) }), _jsx(DynamicTable.BodyContainer, { children: paginatedItems.map((item) => (_jsxs(DynamicTable.Line, { children: [isInSelectionMode && (_jsx(DynamicTable.SelectionCell, { selected: isItemSelected(item), onToggle: onItemSelectionToggle(item) })), item.target !== null
+    return (_jsx(UniquePopupProvider, { children: _jsxs(DynamicTable.TableContainer, { children: [_jsx(DynamicTable.Controller, { columns: allColumns, clearFilterState: clearFilterState, clearSortState: clearSortState }), _jsxs(DynamicTable.Table, { children: [_jsx(DynamicTable.HeaderContainer, { children: _jsxs(DynamicTable.HeaderLine, { children: [isInSelectionMode && (_jsx(DynamicTable.SelectionHeader, { totalSelected: totalSelectedQuantity, unvisibleSelected: unvisibleSelectedQuantity })), displayedColumns.map((column) => (_jsx(DynamicTable.Header, { column: column, children: column.title }, column.id)))] }) }), _jsx(DynamicTable.BodyContainer, { children: paginatedItems.map((item) => (_jsxs(DynamicTable.Line, { children: [isInSelectionMode &&
+                                        (item.isSelectable ? (_jsx(DynamicTable.SelectionCell, { selected: isItemSelected(item), onToggle: onItemSelectionToggle(item) })) : (_jsx(DynamicTable.Cell, {}))), item.target !== null
                                         ? item.values.map((value) => (_jsx(DynamicTable.ClickableCell, { target: item.target, children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column)))
                                         : item.values.map((value) => (_jsx(DynamicTable.Cell, { children: value.loading ? _jsx(DynamicTable.Loader, {}) : value.display }, value.column)))] }, item.key))) }), _jsx(DynamicTable.FooterContainer, { totalColums: displayedColumns.length, pageSelector: _jsx(DynamicTable.PageSelector, { totalPages: totalPages, currentPage: currentPage, onCurrentPageChange: onCurrentPageChange }), itemsPerPageSelector: _jsx(DynamicTable.ItemsPerPageSelector, { itemsPerPage: itemsPerPage, onItemsPerPageChange: onItemsPerPageChange }) })] })] }) }));
 }

package/lib/useItems.d.ts

@@ -31,6 +31,7 @@ export type InternalValue = LoadingInternalValue | LoadedInternalValue;
 export interface InternalItem<Item extends BaseItem> {
     readonly key: Key;
     readonly item: Item;
+    readonly isSelectable: boolean;
     readonly target: string | null;
     readonly values: InternalValue[];
 }
@@ -38,4 +39,4 @@ export interface InternalItem<Item extends BaseItem> {
  * A list of items.
  */
 export type InternalItems<Item extends BaseItem> = readonly InternalItem<Item>[];
-export default function useItems<Item extends BaseItem>(items: Item[], itemTarget: ((item: Item) => string) | undefined, columns: InternalColumns<Item>): InternalItems<Item>;
+export default function useItems<Item extends BaseItem>(items: Item[], itemTarget: ((item: Item) => string) | undefined, columns: InternalColumns<Item>, canSelectItem?: (item: Item) => boolean): InternalItems<Item>;

package/lib/useItems.js

@@ -2,13 +2,14 @@ import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { displayInteger } from "@vinorcola/utils/number";
 import { extractSearchableText } from "@vinorcola/utils/text";
 import { useMemo } from "react";
-export default function useItems(items, itemTarget, columns) {
+export default function useItems(items, itemTarget, columns, canSelectItem) {
     return useMemo(() => items.map((item) => ({
         key: item.id,
         item,
+        isSelectable: canSelectItem === undefined ? true : canSelectItem(item),
         target: itemTarget === undefined ? null : itemTarget(item),
         values: columns.map((column) => resolveInternalValue(item, column)),
-    })), [items, itemTarget, columns]);
+    })), [items, itemTarget, columns, canSelectItem]);
 }
 function resolveInternalValue(item, column) {
     const raw = column.resolveValue(item);

package/lib/useMaskableColumns.d.ts

@@ -29,6 +29,7 @@ export default function useMaskableColumns<Item extends BaseItem>(columns: Inter
         values: import("./useItems.js").InternalValue[];
         key: import("react").Key;
         item: Item;
+        isSelectable: boolean;
         target: string | null;
     }[];
 };

package/lib/useSelection.d.ts

@@ -4,10 +4,12 @@ type ItemSelection<Item extends BaseItem> = Set<Item["id"]>;
 interface SelectableOptions<Item extends BaseItem> {
     selectedItems: ItemSelection<Item>;
     onSelectionChange: (selected: ItemSelection<Item>) => void;
+    canSelectItem?: (item: Item) => boolean;
 }
 interface NonSelectableOptions {
     selectedItems?: never;
     onSelectionChange?: never;
+    canSelectItem?: never;
 }
 export type SelectionOptions<Item extends BaseItem> = SelectableOptions<Item> | NonSelectableOptions;
 export default function useSelection<Item extends BaseItem>(options: SelectionOptions<Item>, visibleItems: InternalItems<Item>): {

package/lib/useSelection.js

@@ -3,28 +3,32 @@ function inSelectionMode(props) {
     return (props.selectedItems !== undefined &&
         props.onSelectionChange !== undefined);
 }
+const EMPTY_SELECTION = new Set();
+const DEFAULT_SELECTION_CHANGE_HANDLER = () => { };
 export default function useSelection(options, visibleItems) {
     const isInSelectionMode = inSelectionMode(options);
-    const visibleSelected = useMemo(() => isInSelectionMode
-        ? visibleItems.reduce((quantity, item) => quantity - (options.selectedItems.has(item.item.id) ? 1 : 0), 0)
-        : 0, [isInSelectionMode, visibleItems, options.selectedItems]);
+    const selectedItems = isInSelectionMode ? options.selectedItems : EMPTY_SELECTION;
+    const onSelectionChange = options.onSelectionChange ?? DEFAULT_SELECTION_CHANGE_HANDLER;
+    const unvisibleSelectedQuantity = useMemo(() => selectedItems.size > 0
+        ? visibleItems.reduce((quantity, item) => quantity - (selectedItems.has(item.item.id) ? 1 : 0), selectedItems.size)
+        : 0, [visibleItems, selectedItems]);
     return {
         isInSelectionMode,
-        totalSelectedQuantity: isInSelectionMode ? options.selectedItems.size : 0,
-        unvisibleSelectedQuantity: isInSelectionMode ? options.selectedItems.size - visibleSelected : 0,
+        totalSelectedQuantity: selectedItems.size,
+        unvisibleSelectedQuantity,
         isItemSelected: useCallback((item) => isInSelectionMode && options.selectedItems.has(item.item.id), [isInSelectionMode, options.selectedItems]),
         onItemSelectionToggle: useCallback((item) => () => {
-            if (!isInSelectionMode) {
+            if (!isInSelectionMode || !item.isSelectable) {
                 return;
             }
-            const selection = new Set(options.selectedItems);
+            const selection = new Set(selectedItems);
             if (selection.has(item.item.id)) {
                 selection.delete(item.item.id);
             }
             else {
                 selection.add(item.item.id);
             }
-            options.onSelectionChange(selection);
-        }, [isInSelectionMode, options]),
+            onSelectionChange(selection);
+        }, [isInSelectionMode, selectedItems, onSelectionChange]),
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinorcola/dynamic-table",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A table to ease the display of a filterable, sortable and paginable dataset.",
   "keywords": [
     "table",