@mezzanine-ui/react 0.14.6 → 0.14.8

package/Table/Table.d.ts

@@ -10,7 +10,7 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
     /**
       * customized body row className
       */
-    bodyRowClassName?: string;
+    bodyRowClassName?: string | ((source: T) => string);
     /**
       * Columns of table <br />
       * `column.render` allowed customizing the column body cell rendering. <br />

package/Table/Table.js

@@ -27,11 +27,13 @@ const Table = forwardRef(function Table(props, ref) {
         selectedRowKey: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.selectedRowKey,
         onChange: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.onChange,
         dataSource: dataSourceProp,
+        disabledRowKeys: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.disabledRowKeys,
     });
     const rowSelection = useMemo(() => (rowSelectionProp ? {
         selectedRowKeys,
         onChange: setSelectedRowKey,
         actions: rowSelectionProp.actions,
+        disabledRowKeys: rowSelectionProp.disabledRowKeys,
     } : undefined), [
         rowSelectionProp,
         selectedRowKeys,
@@ -143,6 +145,15 @@ const Table = forwardRef(function Table(props, ref) {
         });
     }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
     const tableRefs = useComposeRefs([ref, scrollBody.target]);
+    const rowClassName = useMemo(() => {
+        if (bodyRowClassName) {
+            if (typeof bodyRowClassName === 'string') {
+                return (() => bodyRowClassName);
+            }
+            return ((source) => bodyRowClassName === null || bodyRowClassName === void 0 ? void 0 : bodyRowClassName(source));
+        }
+        return undefined;
+    }, [bodyRowClassName]);
     return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
                             className: tableClasses.loading,
                         }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll ? {
@@ -152,7 +163,7 @@ const Table = forwardRef(function Table(props, ref) {
                                             '--table-scroll-y': tableContextValue.scroll.y
                                                 ? `${tableContextValue.scroll.y}px`
                                                 : 'unset',
-                                        } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { "aria-label": "Refresh", children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, "aria-label": "Scroll Track", style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
+                                        } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { "aria-label": "Refresh", children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: rowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, "aria-label": "Scroll Track", style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
                                                 width: '100%',
                                                 height: '100%',
                                                 position: 'relative',

package/Table/TableBody.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { TableDataSource } from '@mezzanine-ui/core/table';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface TableBodyProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * customize row className
      */
-    rowClassName?: string;
+    rowClassName?: (source: TableDataSource) => string;
 }
 declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
 export default TableBody;

package/Table/TableBody.js

@@ -18,7 +18,7 @@ const TableBody = forwardRef(function TableBody(props, ref) {
     const currentStartCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage ? ((paginationOptions.pageSize) * (currentPage - 1)) : 0;
     const currentEndCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage && total ? (Math.min(((paginationOptions.pageSize) * currentPage), total)) : 0;
     const currentDataSource = pagination && !disableAutoSlicing ? (dataSource.slice(currentStartCount, currentEndCount)) : dataSource;
-    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Loading, { loading: true }) }) })) : null] }));
+    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData), rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Loading, { loading: true }) }) })) : null] }));
 });
 var TableBody$1 = TableBody;
 

package/Table/TableContext.d.ts

@@ -5,6 +5,7 @@ import { EmptyProps } from '../Empty';
 export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'> {
     selectedRowKeys: string[];
     onChange(v: string): void;
+    disabledRowKeys?: string[];
 }
 /** typeof sorting */
 export interface SortingContext {

package/Table/index.d.ts

@@ -3,4 +3,5 @@ export { TableRefreshProps, default as TableRefresh, } from './refresh/TableRefr
 export { TableCellProps, default as TableCell, } from './TableCell';
 export { EditableBodyCellProps, } from './editable/TableEditRenderWrapper';
 export { useTableDraggable, } from './draggable/useTableDraggable';
+export { useTableRowSelection, SELECTED_ALL_KEY, } from './rowSelection/useTableRowSelection';
 export { default as useTableScroll, } from './useTableScroll';

package/Table/index.js

@@ -2,4 +2,5 @@ export { default } from './Table.js';
 export { default as TableRefresh } from './refresh/TableRefresh.js';
 export { default as TableCell } from './TableCell.js';
 export { useTableDraggable } from './draggable/useTableDraggable.js';
+export { SELECTED_ALL_KEY, useTableRowSelection } from './rowSelection/useTableRowSelection.js';
 export { default as useTableScroll } from './useTableScroll.js';

package/Table/rowSelection/TableRowSelection.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext, useCallback, useMemo, useEffect, useState } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
+import xor from 'lodash/xor';
 import { MoreVerticalIcon } from '@mezzanine-ui/icons';
 import { TableContext, TableDataContext } from '../TableContext.js';
 import { SELECTED_ALL_KEY } from './useTableRowSelection.js';
@@ -12,7 +13,7 @@ import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
 
 const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
-    var _a, _b;
+    var _a, _b, _c;
     const { rowKey, setChecked, showDropdownIcon, ...rest } = props;
     const { rowSelection, expanding, } = useContext(TableContext) || {};
     const { dataSource = [], } = useContext(TableDataContext) || {};
@@ -21,14 +22,15 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
         rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange(rowKey);
     }, [rowSelection, rowKey]);
     const checkboxStatus = useMemo(() => {
-        var _a;
+        var _a, _b;
         const selectedRowKeys = (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : [];
         if (!selectedRowKeys.length)
             return 'none';
-        if (selectedRowKeys.length === dataSource.length)
+        const validDataSource = xor((_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys) !== null && _b !== void 0 ? _b : [], dataSource.map((d) => (d.id || d.key)));
+        if (selectedRowKeys.length === validDataSource.length)
             return 'all';
         return 'indeterminate';
-    }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, dataSource.length]);
+    }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys, dataSource]);
     const selfChecked = useMemo(() => {
         var _a;
         return (((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : []).some((key) => key === rowKey));
@@ -70,9 +72,11 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
         toggleOpen(false);
     };
     const actionMenu = (jsx(Menu, { size: "medium", children: ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) !== null && _a !== void 0 ? _a : []).map(((action) => (jsx(MenuItem, { className: action.className, onClick: (evt) => onMenuItemClicked(evt, action), children: action.text }, action.key)))) }));
-    return (jsxs("div", { ref: ref, ...rest, className: tableClasses.selections, style: hiddenIconWithExpandableStyle.host, children: [jsx(Checkbox, { checked: checked, disabled: false, indeterminate: indeterminate, inputProps: {
+    return (jsxs("div", { ref: ref, ...rest, className: tableClasses.selections, style: hiddenIconWithExpandableStyle.host, children: [jsx(Checkbox, { checked: checked, disabled: ((_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys) === null || _b === void 0 ? void 0 : _b.length)
+                    ? rowSelection.disabledRowKeys.includes(rowKey)
+                    : false, indeterminate: indeterminate, inputProps: {
                     name,
-                }, onChange: onSelected, size: "medium" }), ((_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) === null || _b === void 0 ? void 0 : _b.length) ? (jsx("div", { className: tableClasses.icon, style: hiddenIconWithExpandableStyle.icon, children: showDropdownIcon ? (jsx(Dropdown, { menu: actionMenu, onClose: () => toggleOpen(false), popperProps: {
+                }, onChange: onSelected, size: "medium" }), ((_c = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) === null || _c === void 0 ? void 0 : _c.length) ? (jsx("div", { className: tableClasses.icon, style: hiddenIconWithExpandableStyle.icon, children: showDropdownIcon ? (jsx(Dropdown, { menu: actionMenu, onClose: () => toggleOpen(false), popperProps: {
                         open,
                         options: {
                             placement: 'bottom-start',

package/Table/rowSelection/useTableRowSelection.js

@@ -1,3 +1,4 @@
+import xor from 'lodash/xor';
 import { useControlValueState } from '../../Form/useControlValueState.js';
 import { useLastCallback } from '../../hooks/useLastCallback.js';
 
@@ -8,7 +9,7 @@ const equalityFn = (a, b) => {
 };
 const SELECTED_ALL_KEY = 'MZN-TABLE-ROW-SELECTION-ALL';
 function useTableRowSelection(props) {
-    const { selectedRowKey: selectedRowKeyProp, onChange: onChangeProp, dataSource, } = props;
+    const { selectedRowKey: selectedRowKeyProp, onChange: onChangeProp, disabledRowKeys = [], dataSource, } = props;
     const [selectedRowKey, setSelectedRowKey] = useControlValueState({
         defaultValue: [],
         equalityFn,
@@ -18,13 +19,14 @@ function useTableRowSelection(props) {
         if (!dataSource.length)
             return;
         const allSourceKeys = dataSource.map((source) => (source.key || source.id));
+        const validSourceKeys = xor(disabledRowKeys, allSourceKeys);
         let nextSelectedRowKey = selectedRowKey;
         if (rowKey === SELECTED_ALL_KEY) {
-            if (equalityFn(selectedRowKey, allSourceKeys)) {
+            if (equalityFn(selectedRowKey, validSourceKeys)) {
                 nextSelectedRowKey = [];
             }
             else {
-                nextSelectedRowKey = allSourceKeys;
+                nextSelectedRowKey = validSourceKeys;
             }
         }
         else {

package/index.d.ts

@@ -52,7 +52,7 @@ export { AccordionProps, AccordionSummaryProps, AccordionSummary, AccordionDetai
 export { BadgeContainerProps, BadgeContainer, BadgeProps, default as Badge, } from './Badge';
 export { CardProps, CardActionsProps, CardActions, default as Card, } from './Card';
 export { EmptyProps, default as Empty, } from './Empty';
-export { TableProps, TableRefreshProps, TableRefresh, useTableDraggable, useTableScroll, default as Table, } from './Table';
+export { TableProps, TableRefreshProps, TableRefresh, useTableDraggable, useTableScroll, useTableRowSelection, SELECTED_ALL_KEY, default as Table, } from './Table';
 export { TagSize, TagProps, default as Tag, } from './Tag';
 export { usePagination, PaginationItemProps, PaginationItemType, PaginationItem, PaginationJumperProps, PaginationJumper, PaginationPageSizeProps, PaginationPageSize, PaginationProps, default as Pagination, } from './Pagination';
 export { TreeNodeProp, TreeNodeData, TreeNodeEntity, TreeNodeEntities, TreeNodeRefsShape, TreeNodeRefs, TreeExpandControl, uniqueArray, toggleValue, toggleValueWithStatusControl, traverseTree, UseTreeExpandedValueProps, useTreeExpandedValue, GetTreeNodeEntitiesProps, getTreeNodeEntities, TreeNodeElementProps, TreeNodeProps, TreeNode, TreeNodeListElementProps, TreeNodeListProps, TreeNodeList, TreeProps, default as Tree, } from './Tree';

package/index.js

@@ -60,6 +60,7 @@ export { default as Card } from './Card/Card.js';
 export { default as Empty } from './Empty/Empty.js';
 export { default as TableRefresh } from './Table/refresh/TableRefresh.js';
 export { useTableDraggable } from './Table/draggable/useTableDraggable.js';
+export { SELECTED_ALL_KEY, useTableRowSelection } from './Table/rowSelection/useTableRowSelection.js';
 export { default as Table } from './Table/Table.js';
 export { default as Tag } from './Tag/Tag.js';
 export { usePagination } from './Pagination/usePagination.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.14.6",
+  "version": "0.14.8",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -28,9 +28,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.14.6",
-    "@mezzanine-ui/icons": "^0.14.6",
-    "@mezzanine-ui/system": "^0.14.6",
+    "@mezzanine-ui/core": "^0.14.8",
+    "@mezzanine-ui/icons": "^0.14.8",
+    "@mezzanine-ui/system": "^0.14.8",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.8",
     "clsx": "^2.0.0",