@databiosphere/findable-ui 45.0.0 → 45.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "45.0.0"
+  ".": "45.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [45.1.0](https://github.com/DataBiosphere/findable-ui/compare/v45.0.0...v45.1.0) (2025-09-18)
+
+
+### Features
+
+* extend row selection feature to handle validation messages for each row ([#666](https://github.com/DataBiosphere/findable-ui/issues/666)) ([#669](https://github.com/DataBiosphere/findable-ui/issues/669)) ([04fc041](https://github.com/DataBiosphere/findable-ui/commit/04fc0411cae9f1ae9c47d8f384e599413cffe639))
+* update row selection component to display disabled state ([#663](https://github.com/DataBiosphere/findable-ui/issues/663)) ([#667](https://github.com/DataBiosphere/findable-ui/issues/667)) ([c2c9fb2](https://github.com/DataBiosphere/findable-ui/commit/c2c9fb24e458858dd6d26be2be8e74f4e3e976da))
+* update table row to display disabled state ([#665](https://github.com/DataBiosphere/findable-ui/issues/665)) ([#668](https://github.com/DataBiosphere/findable-ui/issues/668)) ([2c6000f](https://github.com/DataBiosphere/findable-ui/commit/2c6000f86d0066b91409032f9970284f6b4b6443))
+
 ## [45.0.0](https://github.com/DataBiosphere/findable-ui/compare/v44.0.0...v45.0.0) (2025-09-10)
 
 

package/lib/components/Detail/components/Table/common/utils.js

@@ -9,7 +9,7 @@ export function generateColumnDefinitions(columns) {
             ...column,
             meta: {
                 ...column.meta,
-                header: column.meta?.header || column.header,
+                header: column.meta?.header ?? column.header,
             },
         };
     });

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -10,7 +10,7 @@ export const CollapsableRows = ({ rows: leafOrSubRows, tableInstance, }) => {
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
         if (row.depth > 0 && !leafOrSubRows)
             return null; // Hide sub rows that are not already leaf or sub rows.
-        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, isPreview: row.getIsPreview(), isSelected: row.getIsSelected() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -10,7 +10,7 @@ export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) =>
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
-        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { key: row.id, id: row.id, canExpand: row.getCanExpand(), canSelect: row.getCanSelect(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), isSelected: row.getIsSelected(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Detail/components/Table/table.js

@@ -9,6 +9,7 @@ import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { TABLE_DOWNLOAD_OPTIONS } from "../../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
+import { ROW_SELECTION_VALIDATION } from "../../../Table/features/RowSelectionValidation/constants";
 import { TABLE_DOWNLOAD } from "../../../Table/features/TableDownload/constants";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
@@ -20,7 +21,12 @@ export const Table = ({ className, collapsable = true, columns, gridTemplateColu
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};
     const tableInstance = useReactTable({
-        _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
+        _features: [
+            ROW_POSITION,
+            ROW_PREVIEW,
+            ROW_SELECTION_VALIDATION,
+            TABLE_DOWNLOAD,
+        ],
         columns: generateColumnDefinitions([
             COLUMN_DEF.ROW_POSITION,
             ...columns,

package/lib/components/Index/table/hook.js

@@ -14,6 +14,7 @@ import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn
 import { TABLE_DOWNLOAD_OPTIONS } from "../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
+import { ROW_SELECTION_VALIDATION } from "../../Table/features/RowSelectionValidation/constants";
 import { TABLE_DOWNLOAD } from "../../Table/features/TableDownload/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
@@ -99,7 +100,12 @@ export const useTable = ({ entityListType, }) => {
      * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
      */
     const table = useReactTable({
-        _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
+        _features: [
+            ROW_POSITION,
+            ROW_PREVIEW,
+            ROW_SELECTION_VALIDATION,
+            TABLE_DOWNLOAD,
+        ],
         columns: columnDefs,
         data: listItems || [],
         enableColumnFilters: true, // client-side filtering.

package/lib/components/Table/components/TableCell/components/RowSelectionCell/constants.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "@mui/material";
+export declare const TOOLTIP_PROPS: Partial<TooltipProps>;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/constants.js

@@ -0,0 +1,13 @@
+export const TOOLTIP_PROPS = {
+    arrow: true,
+    disableInteractive: true,
+    slotProps: {
+        popper: {
+            modifiers: [
+                { name: "offset", options: { offset: [0, -4] } },
+                { name: "preventOverflow", options: { padding: 8 } },
+            ],
+        },
+        tooltip: { sx: { maxWidth: "220px" } },
+    },
+};

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -1,13 +1,17 @@
-import { Checkbox as MCheckbox } from "@mui/material";
+import { Checkbox as MCheckbox, Tooltip } from "@mui/material";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedDisabledIcon } from "../../../../../common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { TOOLTIP_PROPS } from "./constants";
 export const RowSelectionCell = ({ row, }) => {
-    const { getIsSelected, getToggleSelectedHandler } = row;
-    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), 
-        /*
-         * Prevents click events from bubbling up to parent components
-         * (such as CardActionArea or Accordion) when the checkbox is activated.
-         */
-        onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }));
+    const { getCanSelect, getIsSelected, getSelectionValidation, getToggleSelectedHandler, } = row;
+    return (React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: getSelectionValidation?.() },
+        React.createElement("span", null,
+            React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), disabled: !getCanSelect(), icon: getCanSelect() ? React.createElement(UncheckedIcon, null) : React.createElement(UncheckedDisabledIcon, null), 
+                /*
+                 * Prevents click events from bubbling up to parent components
+                 * (such as CardActionArea or Accordion) when the checkbox is activated.
+                 */
+                onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }))));
 };

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -1,8 +1,10 @@
 export interface StyledTableRowProps {
     canExpand?: boolean;
+    canSelect?: boolean;
     isExpanded?: boolean;
     isGrouped?: boolean;
     isPreview?: boolean;
+    isSelected?: boolean;
 }
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableRowElement> | null | undefined;

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -5,9 +5,11 @@ import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
 export const StyledTableRow = styled(MTableRow, {
     shouldForwardProp: (prop) => prop !== "canExpand" &&
+        prop !== "canSelect" &&
         prop !== "isExpanded" &&
+        prop !== "isGrouped" &&
         prop !== "isPreview" &&
-        prop !== "isGrouped",
+        prop !== "isSelected",
 }) `
   && {
     transition: background-color 300ms ease-in;
@@ -42,5 +44,17 @@ export const StyledTableRow = styled(MTableRow, {
     css `
         background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
+
+    ${({ isSelected }) => isSelected &&
+    css `
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
+      `}
+
+    ${({ canSelect }) => !canSelect &&
+    css `
+        .MuiTableCell-root {
+          color: ${PALETTE.INK_LIGHT};
+        }
+      `}
   }
 `;

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -13,7 +13,7 @@ export const CollapsableRows = ({ rows, tableInstance, virtualizer, }) => {
         const row = rows[rowIndex];
         if (grouping.length > 0 && row.depth > 0)
             return null; // TODO(cc) hide sub rows -- sub-rows are within collapsed content -- UI TBD.
-        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, ref: virtualizer.measureElement, isPreview: row.getIsPreview() },
+        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, ref: virtualizer.measureElement, isPreview: row.getIsPreview(), isSelected: row.getIsSelected() },
             React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };

package/lib/components/Table/components/TableRows/tableRows.js

@@ -11,7 +11,7 @@ export const TableRows = ({ rows, virtualizer, }) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex];
         const { getCanExpand, getIsExpanded, getIsGrouped, getIsPreview } = row;
-        return (React.createElement(StyledTableRow, { key: row.id, canExpand: getCanExpand(), "data-index": rowIndex, isExpanded: getIsExpanded(), isGrouped: getIsGrouped(), isPreview: getIsPreview(), onClick: () => handleToggleExpanded(row), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
+        return (React.createElement(StyledTableRow, { key: row.id, canExpand: getCanExpand(), canSelect: row.getCanSelect(), "data-index": rowIndex, isExpanded: getIsExpanded(), isGrouped: getIsGrouped(), isPreview: getIsPreview(), isSelected: row.getIsSelected(), onClick: () => handleToggleExpanded(row), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Table/features/RowSelectionValidation/constants.d.ts

@@ -0,0 +1,2 @@
+import { TableFeature } from "@tanstack/react-table";
+export declare const ROW_SELECTION_VALIDATION: TableFeature;

package/lib/components/Table/features/RowSelectionValidation/constants.js

@@ -0,0 +1,14 @@
+import { getSelectionValidation } from "./utils";
+export const ROW_SELECTION_VALIDATION = {
+    createRow: (row, table) => {
+        row.getSelectionValidation = () => {
+            return getSelectionValidation(row, table);
+        };
+    },
+    getDefaultOptions: () => {
+        return {
+            enableRowSelectionValidation: false,
+            getRowSelectionValidation: undefined,
+        };
+    },
+};

package/lib/components/Table/features/RowSelectionValidation/types.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData } from "@tanstack/react-table";
+export interface RowSelectionValidationOptions<T extends RowData> {
+    enableRowSelectionValidation?: boolean;
+    getRowSelectionValidation?: (row: Row<T>) => string | undefined;
+}
+export interface RowSelectionValidationRow {
+    getSelectionValidation?: () => string | undefined;
+}

package/lib/components/Table/features/RowSelectionValidation/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/features/RowSelectionValidation/utils.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+/**
+ * Returns the validation message for a row.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns The validation message for the row.
+ */
+export declare function getSelectionValidation<T extends RowData>(row: Row<T>, table: Table<T>): string | undefined;

package/lib/components/Table/features/RowSelectionValidation/utils.js

@@ -0,0 +1,11 @@
+/**
+ * Returns the validation message for a row.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns The validation message for the row.
+ */
+export function getSelectionValidation(row, table) {
+    if (!table.options.enableRowSelectionValidation)
+        return;
+    return table.options.getRowSelectionValidation?.(row);
+}

package/lib/components/Table/features/entities.d.ts

@@ -1,13 +1,14 @@
 import { RowData } from "@tanstack/react-table";
 import { RowPositionOptions, RowPositionRow } from "./RowPosition/types";
 import { RowPreviewInstance, RowPreviewOptions, RowPreviewRow, RowPreviewTableState } from "./RowPreview/entities";
+import { RowSelectionValidationOptions, RowSelectionValidationRow } from "./RowSelectionValidation/types";
 import { TableDownloadColumn, TableDownloadInstance, TableDownloadOptions } from "./TableDownload/types";
 export type CustomFeatureColumn = TableDownloadColumn;
 export interface CustomFeatureInstance<T extends RowData> extends TableDownloadInstance, RowPreviewInstance<T> {
 }
 export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
-export interface CustomFeatureOptions<T extends RowData> extends TableDownloadOptions<T>, RowPositionOptions, RowPreviewOptions {
+export interface CustomFeatureOptions<T extends RowData> extends TableDownloadOptions<T>, RowPositionOptions, RowPreviewOptions, RowSelectionValidationOptions<T> {
 }
-export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow {
+export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow, RowSelectionValidationRow {
 }
 export type CustomFeatureTableState = RowPreviewTableState;

package/lib/components/TableCreator/options/hook.js

@@ -2,7 +2,6 @@ import { useConfig } from "../../../hooks/useConfig";
 import { useExpandedOptions } from "./expanded/hook";
 import { useGroupingOptions } from "./grouping/hook";
 import { useInitialState } from "./initialState/hook";
-import { useRowSelectionOptions } from "./rowSelection/hook";
 import { useSortingOptions } from "./sorting/hook";
 import { useVisibilityOptions } from "./visibility/hook";
 export function useTableOptions() {
@@ -10,14 +9,12 @@ export function useTableOptions() {
     const tableOptions = entityConfig.list.tableOptions;
     const expandedOptions = useExpandedOptions();
     const groupingOptions = useGroupingOptions();
-    const rowSelectionOptions = useRowSelectionOptions();
     const sortingOptions = useSortingOptions();
     const visibilityOptions = useVisibilityOptions();
     const initialState = useInitialState(tableOptions);
     return {
         ...expandedOptions,
         ...groupingOptions,
-        ...rowSelectionOptions,
         ...sortingOptions, // TODO(cc) merge of all sorting options.
         ...visibilityOptions,
         ...tableOptions,

package/lib/components/common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from "@mui/material";
+export declare const UncheckedDisabledIcon: ({ fontSize, viewBox, ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon.js

@@ -0,0 +1,8 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+export const UncheckedDisabledIcon = ({ fontSize = "xsmall", viewBox = "0 0 18 18", ...props }) => {
+    return (React.createElement(SvgIcon, { fontSize: fontSize, viewBox: viewBox, ...props },
+        React.createElement("path", { d: "M4 0.5H14C15.933 0.5 17.5 2.067 17.5 4V14C17.5 15.933 15.933 17.5 14 17.5H4C2.067 17.5 0.5 15.933 0.5 14V4C0.5 2.067 2.067 0.5 4 0.5Z", stroke: PALETTE.SMOKE_MAIN }),
+        React.createElement("rect", { x: "0.5", y: "0.5", width: "17", height: "17", rx: "3.5", fill: PALETTE.SMOKE_LIGHT, stroke: PALETTE.SMOKE_MAIN })));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "45.0.0",
+  "version": "45.1.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Detail/components/Table/common/utils.ts

@@ -13,7 +13,7 @@ export function generateColumnDefinitions<T extends RowData>(
       ...column,
       meta: {
         ...column.meta,
-        header: column.meta?.header || (column.header as string),
+        header: column.meta?.header ?? (column.header as string),
       },
     };
   });

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -31,6 +31,7 @@ export const CollapsableRows = <T extends RowData>({
             key={row.id}
             id={row.id}
             isPreview={row.getIsPreview()}
+            isSelected={row.getIsSelected()}
           >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -37,9 +37,11 @@ export const TableRows = <T extends RowData>({
             key={row.id}
             id={row.id}
             canExpand={row.getCanExpand()}
+            canSelect={row.getCanSelect()}
             isExpanded={row.getIsExpanded()}
             isGrouped={row.getIsGrouped()}
             isPreview={row.getIsPreview()}
+            isSelected={row.getIsSelected()}
             onClick={() => handleToggleExpanded(row)}
           >
             {row.getVisibleCells().map((cell) => {

package/src/components/Detail/components/Table/table.tsx

@@ -23,6 +23,7 @@ import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { TABLE_DOWNLOAD_OPTIONS } from "../../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
+import { ROW_SELECTION_VALIDATION } from "../../../Table/features/RowSelectionValidation/constants";
 import { TABLE_DOWNLOAD } from "../../../Table/features/TableDownload/constants";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
@@ -60,7 +61,12 @@ export const Table = <T extends RowData>({
   const { stickyHeader = false } = table || {};
   const { sx: tableContainerSx } = tableContainer || {};
   const tableInstance = useReactTable({
-    _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
+    _features: [
+      ROW_POSITION,
+      ROW_PREVIEW,
+      ROW_SELECTION_VALIDATION,
+      TABLE_DOWNLOAD,
+    ],
     columns: generateColumnDefinitions([
       COLUMN_DEF.ROW_POSITION as ColumnDef<T>,
       ...columns,

package/src/components/Index/table/hook.ts

@@ -38,6 +38,7 @@ import { TABLE_DOWNLOAD_OPTIONS } from "../../Table/featureOptions/tableDownload
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
 import { RowPreviewState } from "../../Table/features/RowPreview/entities";
+import { ROW_SELECTION_VALIDATION } from "../../Table/features/RowSelectionValidation/constants";
 import { TABLE_DOWNLOAD } from "../../Table/features/TableDownload/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
@@ -164,7 +165,12 @@ UseTableProps): UseTable<T> => {
    * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
    */
   const table = useReactTable<T>({
-    _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
+    _features: [
+      ROW_POSITION,
+      ROW_PREVIEW,
+      ROW_SELECTION_VALIDATION,
+      TABLE_DOWNLOAD,
+    ],
     columns: columnDefs,
     data: listItems || [],
     enableColumnFilters: true, // client-side filtering.

package/src/components/Table/components/TableCell/components/RowSelectionCell/constants.ts

@@ -0,0 +1,15 @@
+import { TooltipProps } from "@mui/material";
+
+export const TOOLTIP_PROPS: Partial<TooltipProps> = {
+  arrow: true,
+  disableInteractive: true,
+  slotProps: {
+    popper: {
+      modifiers: [
+        { name: "offset", options: { offset: [0, -4] } },
+        { name: "preventOverflow", options: { padding: 8 } },
+      ],
+    },
+    tooltip: { sx: { maxWidth: "220px" } },
+  },
+};

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -1,24 +1,36 @@
-import { Checkbox as MCheckbox } from "@mui/material";
+import { Checkbox as MCheckbox, Tooltip } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedDisabledIcon } from "../../../../../common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { TOOLTIP_PROPS } from "./constants";
 
 export const RowSelectionCell = <T extends RowData, TValue = unknown>({
   row,
 }: CellContext<T, TValue>): JSX.Element => {
-  const { getIsSelected, getToggleSelectedHandler } = row;
+  const {
+    getCanSelect,
+    getIsSelected,
+    getSelectionValidation,
+    getToggleSelectedHandler,
+  } = row;
   return (
-    <MCheckbox
-      checked={getIsSelected()}
-      checkedIcon={<CheckedIcon />}
-      icon={<UncheckedIcon />}
-      /*
-       * Prevents click events from bubbling up to parent components
-       * (such as CardActionArea or Accordion) when the checkbox is activated.
-       */
-      onClick={(e) => e.stopPropagation()}
-      onChange={getToggleSelectedHandler()}
-    />
+    <Tooltip {...TOOLTIP_PROPS} title={getSelectionValidation?.()}>
+      <span>
+        <MCheckbox
+          checked={getIsSelected()}
+          checkedIcon={<CheckedIcon />}
+          disabled={!getCanSelect()}
+          icon={getCanSelect() ? <UncheckedIcon /> : <UncheckedDisabledIcon />}
+          /*
+           * Prevents click events from bubbling up to parent components
+           * (such as CardActionArea or Accordion) when the checkbox is activated.
+           */
+          onClick={(e) => e.stopPropagation()}
+          onChange={getToggleSelectedHandler()}
+        />
+      </span>
+    </Tooltip>
   );
 };

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -6,17 +6,21 @@ import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export interface StyledTableRowProps {
   canExpand?: boolean;
+  canSelect?: boolean;
   isExpanded?: boolean;
   isGrouped?: boolean;
   isPreview?: boolean;
+  isSelected?: boolean;
 }
 
 export const StyledTableRow = styled(MTableRow, {
   shouldForwardProp: (prop) =>
     prop !== "canExpand" &&
+    prop !== "canSelect" &&
     prop !== "isExpanded" &&
+    prop !== "isGrouped" &&
     prop !== "isPreview" &&
-    prop !== "isGrouped",
+    prop !== "isSelected",
 })<StyledTableRowProps>`
   && {
     transition: background-color 300ms ease-in;
@@ -54,5 +58,19 @@ export const StyledTableRow = styled(MTableRow, {
       css`
         background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
+
+    ${({ isSelected }) =>
+      isSelected &&
+      css`
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
+      `}
+
+    ${({ canSelect }) =>
+      !canSelect &&
+      css`
+        .MuiTableCell-root {
+          color: ${PALETTE.INK_LIGHT};
+        }
+      `}
   }
 `;

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -33,6 +33,7 @@ export const CollapsableRows = <T extends RowData>({
             data-index={rowIndex}
             ref={virtualizer.measureElement}
             isPreview={row.getIsPreview()}
+            isSelected={row.getIsSelected()}
           >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -30,10 +30,12 @@ export const TableRows = <T extends RowData>({
           <StyledTableRow
             key={row.id}
             canExpand={getCanExpand()}
+            canSelect={row.getCanSelect()}
             data-index={rowIndex}
             isExpanded={getIsExpanded()}
             isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
+            isSelected={row.getIsSelected()}
             onClick={() => handleToggleExpanded(row)}
             ref={virtualizer.measureElement}
           >

package/src/components/Table/features/RowSelectionValidation/constants.ts

@@ -0,0 +1,24 @@
+import {
+  Row,
+  RowData,
+  Table,
+  TableFeature,
+  TableOptionsResolved,
+} from "@tanstack/react-table";
+import { getSelectionValidation } from "./utils";
+
+export const ROW_SELECTION_VALIDATION: TableFeature = {
+  createRow: <T extends RowData>(row: Row<T>, table: Table<T>): void => {
+    row.getSelectionValidation = (): string | undefined => {
+      return getSelectionValidation(row, table);
+    };
+  },
+  getDefaultOptions: <T extends RowData>(): Partial<
+    TableOptionsResolved<T>
+  > => {
+    return {
+      enableRowSelectionValidation: false,
+      getRowSelectionValidation: undefined,
+    };
+  },
+};

package/src/components/Table/features/RowSelectionValidation/types.ts

@@ -0,0 +1,10 @@
+import { Row, RowData } from "@tanstack/react-table";
+
+export interface RowSelectionValidationOptions<T extends RowData> {
+  enableRowSelectionValidation?: boolean;
+  getRowSelectionValidation?: (row: Row<T>) => string | undefined;
+}
+
+export interface RowSelectionValidationRow {
+  getSelectionValidation?: () => string | undefined;
+}

package/src/components/Table/features/RowSelectionValidation/utils.ts

@@ -0,0 +1,15 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+
+/**
+ * Returns the validation message for a row.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns The validation message for the row.
+ */
+export function getSelectionValidation<T extends RowData>(
+  row: Row<T>,
+  table: Table<T>
+): string | undefined {
+  if (!table.options.enableRowSelectionValidation) return;
+  return table.options.getRowSelectionValidation?.(row);
+}

package/src/components/Table/features/entities.ts

@@ -6,6 +6,10 @@ import {
   RowPreviewRow,
   RowPreviewTableState,
 } from "./RowPreview/entities";
+import {
+  RowSelectionValidationOptions,
+  RowSelectionValidationRow,
+} from "./RowSelectionValidation/types";
 import {
   TableDownloadColumn,
   TableDownloadInstance,
@@ -23,8 +27,12 @@ export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
 export interface CustomFeatureOptions<T extends RowData>
   extends TableDownloadOptions<T>,
     RowPositionOptions,
-    RowPreviewOptions {}
+    RowPreviewOptions,
+    RowSelectionValidationOptions<T> {}
 
-export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow {}
+export interface CustomFeatureRow
+  extends RowPositionRow,
+    RowPreviewRow,
+    RowSelectionValidationRow {}
 
 export type CustomFeatureTableState = RowPreviewTableState;

package/src/components/TableCreator/options/hook.ts

@@ -3,7 +3,6 @@ import { useConfig } from "../../../hooks/useConfig";
 import { useExpandedOptions } from "./expanded/hook";
 import { useGroupingOptions } from "./grouping/hook";
 import { useInitialState } from "./initialState/hook";
-import { useRowSelectionOptions } from "./rowSelection/hook";
 import { useSortingOptions } from "./sorting/hook";
 import { useVisibilityOptions } from "./visibility/hook";
 
@@ -12,14 +11,12 @@ export function useTableOptions<T extends RowData>(): Partial<TableOptions<T>> {
   const tableOptions = entityConfig.list.tableOptions;
   const expandedOptions = useExpandedOptions<T>();
   const groupingOptions = useGroupingOptions();
-  const rowSelectionOptions = useRowSelectionOptions<T>();
   const sortingOptions = useSortingOptions<T>();
   const visibilityOptions = useVisibilityOptions();
   const initialState = useInitialState<T>(tableOptions);
   return {
     ...expandedOptions,
     ...groupingOptions,
-    ...rowSelectionOptions,
     ...sortingOptions, // TODO(cc) merge of all sorting options.
     ...visibilityOptions,
     ...tableOptions,

package/src/components/common/CustomIcon/components/UncheckedDisabledIcon/uncheckedDisabledIcon.tsx

@@ -0,0 +1,27 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+
+export const UncheckedDisabledIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M4 0.5H14C15.933 0.5 17.5 2.067 17.5 4V14C17.5 15.933 15.933 17.5 14 17.5H4C2.067 17.5 0.5 15.933 0.5 14V4C0.5 2.067 2.067 0.5 4 0.5Z"
+        stroke={PALETTE.SMOKE_MAIN}
+      />
+      <rect
+        x="0.5"
+        y="0.5"
+        width="17"
+        height="17"
+        rx="3.5"
+        fill={PALETTE.SMOKE_LIGHT}
+        stroke={PALETTE.SMOKE_MAIN}
+      />
+    </SvgIcon>
+  );
+};

package/tests/rowSelectionValidation.test.ts

@@ -0,0 +1,282 @@
+import { jest } from "@jest/globals";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  Row,
+  Table,
+  TableOptions,
+  useReactTable,
+} from "@tanstack/react-table";
+import { renderHook, RenderHookResult } from "@testing-library/react";
+import { ROW_SELECTION_VALIDATION } from "../src/components/Table/features/RowSelectionValidation/constants";
+import { RowSelectionValidationOptions } from "../src/components/Table/features/RowSelectionValidation/types";
+import { getSelectionValidation } from "../src/components/Table/features/RowSelectionValidation/utils";
+
+type ValidationFn = NonNullable<
+  RowSelectionValidationOptions<RowData>["getRowSelectionValidation"]
+>;
+
+interface RowData {
+  id: number;
+  isValid: boolean;
+  name: string;
+  status: "active" | "inactive";
+}
+
+const ACCESSOR_KEY: Record<string, keyof RowData> = {
+  ID: "id",
+  IS_VALID: "isValid",
+  NAME: "name",
+  STATUS: "status",
+};
+
+// Mock data.
+const DATA: RowData[] = [
+  { id: 1, isValid: true, name: "Item 1", status: "active" },
+  { id: 2, isValid: false, name: "Item 2", status: "inactive" },
+  { id: 3, isValid: true, name: "Item 3", status: "active" },
+  { id: 4, isValid: false, name: "Item 4", status: "inactive" },
+];
+
+const columnHelper = createColumnHelper<RowData>();
+
+// Mock column definitions.
+const COLUMNS = [
+  columnHelper.accessor(ACCESSOR_KEY.ID, { header: "ID" }),
+  columnHelper.accessor(ACCESSOR_KEY.NAME, { header: "Name" }),
+  columnHelper.accessor(ACCESSOR_KEY.IS_VALID, { header: "Valid" }),
+  columnHelper.accessor(ACCESSOR_KEY.STATUS, { header: "Status" }),
+];
+
+// Test constants.
+const VALIDATION_MESSAGE = {
+  INVALID: "This item is invalid",
+  VALID: "This item is valid",
+};
+
+const createTable = (
+  tableOptions?: Omit<
+    TableOptions<RowData>,
+    "columns" | "data" | "getCoreRowModel"
+  >
+): RenderHookResult<Table<RowData>, unknown> => {
+  return renderHook(() =>
+    useReactTable({
+      _features: [ROW_SELECTION_VALIDATION],
+      columns: COLUMNS,
+      data: DATA,
+      enableRowSelectionValidation: true,
+      getCoreRowModel: getCoreRowModel(),
+      ...tableOptions,
+    })
+  );
+};
+
+describe("RowSelectionValidation Feature", () => {
+  let tableWithoutValidation: any;
+  let firstRowWithoutValidation: any;
+  let tableWithValidation: any;
+  let firstRowWithValidation: any;
+
+  beforeEach(() => {
+    const resultWithoutValidation = createTable();
+    const resultWithValidation = createTable({
+      getRowSelectionValidation: () => VALIDATION_MESSAGE.INVALID,
+    });
+    tableWithoutValidation = resultWithoutValidation.result.current;
+    firstRowWithoutValidation = tableWithoutValidation.getRowModel().rows[0];
+    tableWithValidation = resultWithValidation.result.current;
+    firstRowWithValidation = tableWithValidation.getRowModel().rows[0];
+  });
+
+  describe("ROW_SELECTION_VALIDATION TableFeature", () => {
+    test("should have correct structure", () => {
+      expect(ROW_SELECTION_VALIDATION).toHaveProperty("createRow");
+      expect(ROW_SELECTION_VALIDATION).toHaveProperty("getDefaultOptions");
+      expect(typeof ROW_SELECTION_VALIDATION.createRow).toBe("function");
+      expect(typeof ROW_SELECTION_VALIDATION.getDefaultOptions).toBe(
+        "function"
+      );
+    });
+
+    test("getDefaultOptions should return correct default options", () => {
+      const { getDefaultOptions } = ROW_SELECTION_VALIDATION;
+      expect(getDefaultOptions!(tableWithoutValidation)).toEqual({
+        enableRowSelectionValidation: false,
+        getRowSelectionValidation: undefined,
+      });
+    });
+  });
+
+  describe("getSelectionValidation utility", () => {
+    test("should return undefined when no validation function is provided", () => {
+      expect(
+        getSelectionValidation(
+          firstRowWithoutValidation,
+          tableWithoutValidation
+        )
+      ).toBeUndefined();
+    });
+
+    test("should return validation message when validation function is provided", () => {
+      expect(
+        getSelectionValidation(firstRowWithValidation, tableWithValidation)
+      ).toBe(VALIDATION_MESSAGE.INVALID);
+    });
+
+    test("should return undefined when validation function returns undefined", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockReturnValue(undefined);
+
+      const { result } = createTable({ getRowSelectionValidation });
+
+      const table = result.current;
+      const firstRow = table.getRowModel().rows[0];
+
+      const validationResult = getSelectionValidation(firstRow, table);
+
+      expect(validationResult).toBeUndefined();
+      expect(getRowSelectionValidation).toHaveBeenCalledWith(firstRow);
+    });
+
+    test("should work with different rows from the same table", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockImplementation((row) => {
+          const status = row.getValue(ACCESSOR_KEY.STATUS);
+          return status === "inactive" ? VALIDATION_MESSAGE.INVALID : undefined;
+        });
+
+      const { result } = createTable({ getRowSelectionValidation });
+
+      const table = result.current;
+      const rows = table.getRowModel().rows;
+
+      expect(getSelectionValidation(rows[0], table)).toBeUndefined();
+      expect(getSelectionValidation(rows[2], table)).toBeUndefined();
+      expect(getSelectionValidation(rows[1], table)).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+      expect(getRowSelectionValidation).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe("row.getSelectionValidation method", () => {
+    test("should be attached to rows when feature is included", () => {
+      const rows = tableWithoutValidation.getRowModel().rows;
+
+      rows.forEach((row: any) => {
+        expect(row).toHaveProperty("getSelectionValidation");
+        expect(typeof row.getSelectionValidation).toBe("function");
+      });
+    });
+
+    test("should return undefined when no validation function is configured", () => {
+      expect(
+        firstRowWithoutValidation.getSelectionValidation()
+      ).toBeUndefined();
+    });
+
+    test("should return validation message when validation function is configured", () => {
+      expect(firstRowWithValidation.getSelectionValidation()).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+    });
+  });
+
+  describe("Integration with table options", () => {
+    test("should work with getRowSelectionValidation function", () => {
+      const enableRowSelection = jest
+        .fn<(row: Row<RowData>) => boolean>()
+        .mockImplementation((row) => row.getValue(ACCESSOR_KEY.IS_VALID));
+
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockImplementation((row) => {
+          const isValid = row.getValue(ACCESSOR_KEY.IS_VALID);
+          return isValid ? undefined : VALIDATION_MESSAGE.INVALID;
+        });
+
+      const { result } = createTable({
+        enableRowSelection,
+        getRowSelectionValidation,
+      });
+
+      const table = result.current;
+      const rows = table.getRowModel().rows;
+
+      rows.forEach((row) => {
+        const isValid = row.getValue(ACCESSOR_KEY.IS_VALID);
+        const canSelect = row.getCanSelect();
+        const validationMessage = row.getSelectionValidation?.();
+
+        if (isValid) {
+          expect(canSelect).toBe(true);
+          expect(validationMessage).toBeUndefined();
+        } else {
+          expect(canSelect).toBe(false);
+          expect(validationMessage).toBe(VALIDATION_MESSAGE.INVALID);
+        }
+      });
+    });
+
+    test("should handle complex validation scenarios", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockImplementation((row) => {
+          const id = row.getValue(ACCESSOR_KEY.ID);
+          const isValid = row.getValue(ACCESSOR_KEY.IS_VALID);
+
+          if (!isValid) return VALIDATION_MESSAGE.INVALID;
+          if (id === 1) return VALIDATION_MESSAGE.VALID;
+          return undefined;
+        });
+
+      const { result } = createTable({ getRowSelectionValidation });
+
+      const table = result.current;
+      const rows = table.getRowModel().rows;
+
+      expect(rows[0].getSelectionValidation?.()).toBe(VALIDATION_MESSAGE.VALID);
+      expect(rows[1].getSelectionValidation?.()).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+      expect(rows[2].getSelectionValidation?.()).toBeUndefined();
+      expect(rows[3].getSelectionValidation?.()).toBe(
+        VALIDATION_MESSAGE.INVALID
+      );
+    });
+  });
+
+  describe("Edge cases", () => {
+    test("should work when feature is not included", () => {
+      const { result } = createTable({
+        _features: [],
+        enableRowSelectionValidation: false,
+      });
+
+      const table = result.current;
+      const firstRow = table.getRowModel().rows[0];
+
+      expect(firstRow).not.toHaveProperty("getSelectionValidation");
+    });
+
+    test("should return undefined when feature is disabled", () => {
+      const getRowSelectionValidation = jest
+        .fn<ValidationFn>()
+        .mockReturnValue(VALIDATION_MESSAGE.INVALID);
+
+      const { result } = createTable({
+        enableRowSelectionValidation: false,
+        getRowSelectionValidation,
+      });
+
+      const table = result.current;
+      const firstRow = table.getRowModel().rows[0];
+
+      expect(firstRow.getSelectionValidation?.()).toBeUndefined();
+      expect(getRowSelectionValidation).not.toHaveBeenCalled();
+    });
+  });
+});