@ceed/ads 1.7.4 → 1.7.6-next.1

package/dist/components/DataTable/types.d.ts

@@ -140,6 +140,13 @@ export type DataTableProps<T extends Record<PropertyKey, any>, GetId extends ((r
      * MUI에는 없는 인터페이스지만 Total Select 기능이 추가되었기 때문에 추가해야했다.
      */
     isTotalSelected?: boolean) => void;
+    /**
+     * row별로 선택 가능 여부를 결정하는 함수
+     */
+    isRowSelectable?: (params: {
+        row: T;
+        id: InferredIdType<T, GetId>;
+    }) => boolean;
     disableSelectionOnClick?: boolean;
     initialState?: Partial<{
         sorting: Partial<{

package/dist/index.cjs

@@ -3522,7 +3522,8 @@ function useDataTableRenderer({
   onSelectionModelChange,
   editMode,
   getId: _getId,
-  isTotalSelected: _isTotalSelected
+  isTotalSelected: _isTotalSelected,
+  isRowSelectable
 }) {
   const [focusedRowId, setFocusedRowId] = (0, import_react25.useState)(null);
   const [sortModel, setSortModel] = useControlledState(
@@ -3598,14 +3599,27 @@ function useDataTableRenderer({
     () => !pagination || paginationMode === "server" ? rows : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
     [rows, page, pageSize, paginationMode, pagination]
   );
+  const selectableDataInPage = (0, import_react25.useMemo)(
+    () => dataInPage.filter((row, i) => {
+      if (!isRowSelectable) return true;
+      return isRowSelectable({ row, id: getId(row, i) });
+    }),
+    [dataInPage, isRowSelectable, getId]
+  );
   const isAllSelected = (0, import_react25.useMemo)(
-    () => dataInPage.length > 0 && dataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
-    [dataInPage, selectedModelSet, getId]
+    () => selectableDataInPage.length > 0 && selectableDataInPage.every(
+      (row, i) => selectedModelSet.has(getId(row, i))
+    ),
+    [selectableDataInPage, selectedModelSet, getId]
   );
   const rowCount = totalRowsProp || rows.length;
+  const selectableRowCount = (0, import_react25.useMemo)(() => {
+    if (!isRowSelectable) return rowCount;
+    return rows.filter((row, i) => isRowSelectable({ row, id: getId(row, i) })).length;
+  }, [rows, isRowSelectable, getId, rowCount]);
   const isTotalSelected = (0, import_react25.useMemo)(
-    () => _isTotalSelected ?? (rowCount > 0 && (selectionModel?.length || 0) === rowCount),
-    [_isTotalSelected, selectionModel, rowCount]
+    () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
+    [_isTotalSelected, selectionModel, selectableRowCount]
   );
   const columnWidths = useColumnWidths(columnsByField);
   const getWidth = (0, import_react25.useCallback)(
@@ -3701,9 +3715,10 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   (0, import_react25.useEffect)(() => {
     onSelectionModelChange?.([]);
-  }, [page]);
+  }, [page, onSelectionModelChange]);
   return {
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
@@ -3719,13 +3734,22 @@ function useDataTableRenderer({
       (model) => selectedModelSet.has(model),
       [selectedModelSet]
     ),
+    isRowSelectable: (0, import_react25.useCallback)(
+      (rowId, row) => {
+        if (!isRowSelectable) return true;
+        return isRowSelectable({ row, id: rowId });
+      },
+      [isRowSelectable]
+    ),
     focusedRowId,
     onRowFocus: (0, import_react25.useCallback)((rowId) => {
       setFocusedRowId(rowId);
     }, []),
     onAllCheckboxChange: (0, import_react25.useCallback)(() => {
-      onSelectionModelChange?.(isAllSelected ? [] : dataInPage.map(getId));
-    }, [isAllSelected, dataInPage, onSelectionModelChange, getId]),
+      onSelectionModelChange?.(
+        isAllSelected ? [] : selectableDataInPage.map(getId)
+      );
+    }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
     onCheckboxChange: (0, import_react25.useCallback)(
       (event, selectedModel) => {
         if (selectedModelSet.has(selectedModel)) {
@@ -3742,11 +3766,15 @@ function useDataTableRenderer({
     ),
     columns,
     onTotalSelect: (0, import_react25.useCallback)(() => {
+      const selectableRows = rows.filter((row, i) => {
+        if (!isRowSelectable) return true;
+        return isRowSelectable({ row, id: getId(row, i) });
+      });
       onSelectionModelChange?.(
-        isTotalSelected ? [] : rows.map(getId),
+        isTotalSelected ? [] : selectableRows.map(getId),
         !isTotalSelected
       );
-    }, [isTotalSelected, rows, onSelectionModelChange, getId])
+    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable])
   };
 }
 function Component(props, apiRef) {
@@ -3756,6 +3784,7 @@ function Component(props, apiRef) {
     editMode,
     selectionModel,
     onSelectionModelChange,
+    isRowSelectable,
     disableSelectionOnClick,
     onRowClick,
     pinnedColumns,
@@ -3803,10 +3832,12 @@ function Component(props, apiRef) {
     columns,
     isAllSelected,
     isSelectedRow,
+    isRowSelectable: isRowSelectableCheck,
     onAllCheckboxChange,
     onCheckboxChange,
     getId,
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange,
@@ -3832,9 +3863,15 @@ function Component(props, apiRef) {
   const getRowClickHandler = (0, import_react25.useCallback)(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
-      checkboxSelection && !disableSelectionOnClick && onCheckboxChange(e, rowId);
+      checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
     },
-    [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange]
+    [
+      onRowClick,
+      checkboxSelection,
+      disableSelectionOnClick,
+      onCheckboxChange,
+      isRowSelectableCheck
+    ]
   );
   const getRowFocusHandler = (0, import_react25.useCallback)(
     (rowId) => () => {
@@ -3849,10 +3886,12 @@ function Component(props, apiRef) {
     []
   );
   const getCheckboxChangeHandler = (0, import_react25.useCallback)(
-    (rowId) => (e) => {
-      onCheckboxChange(e, rowId);
+    (rowId, row) => (e) => {
+      if (isRowSelectableCheck(rowId, row)) {
+        onCheckboxChange(e, rowId);
+      }
     },
-    [onCheckboxChange]
+    [onCheckboxChange, isRowSelectableCheck]
   );
   (0, import_react25.useImperativeHandle)(apiRef, () => ({
     getRowIndexRelativeToVisibleRows(rowId) {
@@ -3890,7 +3929,7 @@ function Component(props, apiRef) {
         justifyContent: "space-between",
         alignItems: "center"
       },
-      !!checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ import_react25.default.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(rowCount ?? rows.length), " items")), isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(rowCount ?? rows.length), " items are selected."), /* @__PURE__ */ import_react25.default.createElement(
+      !!checkboxSelection && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ import_react25.default.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(selectableRowCount), " items")), isTotalSelected && /* @__PURE__ */ import_react25.default.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react25.default.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectableRowCount), " items are selected."), /* @__PURE__ */ import_react25.default.createElement(
         Button_default,
         {
           size: "sm",
@@ -3935,6 +3974,7 @@ function Component(props, apiRef) {
             onChange: onAllCheckboxChange,
             checked: isAllSelected,
             indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+            disabled: dataInPage.length > 0 && !selectableRowCount,
             ...checkboxProps
           }
         )
@@ -3954,7 +3994,9 @@ function Component(props, apiRef) {
           ref: tableBodyRef,
           style: {
             height: `${totalSize}px`
-          }
+          },
+          role: "rowgroup",
+          "aria-label": "DataTableBody"
         },
         !!loading && /* @__PURE__ */ import_react25.default.createElement(OverlayWrapper, null, /* @__PURE__ */ import_react25.default.createElement(
           "td",
@@ -3989,6 +4031,7 @@ function Component(props, apiRef) {
               key: virtualizedRow.key,
               "data-row-id": rowId,
               "data-index": rowIndex,
+              "aria-rowindex": rowIndex + 1,
               role: checkboxSelection && !disableSelectionOnClick ? "checkbox" : void 0,
               tabIndex: focusedRowId === rowId ? 0 : -1,
               onClick: getRowClickHandler(row, rowId),
@@ -4012,8 +4055,9 @@ function Component(props, apiRef) {
                 RenderCheckbox,
                 {
                   onClick: getCheckboxClickHandler(),
-                  onChange: getCheckboxChangeHandler(rowId),
+                  onChange: getCheckboxChangeHandler(rowId, row),
                   checked: isSelectedRow(rowId),
+                  disabled: !isRowSelectableCheck(rowId, row),
                   ...checkboxProps
                 }
               )

package/dist/index.js

@@ -3479,7 +3479,8 @@ function useDataTableRenderer({
   onSelectionModelChange,
   editMode,
   getId: _getId,
-  isTotalSelected: _isTotalSelected
+  isTotalSelected: _isTotalSelected,
+  isRowSelectable
 }) {
   const [focusedRowId, setFocusedRowId] = useState6(null);
   const [sortModel, setSortModel] = useControlledState(
@@ -3555,14 +3556,27 @@ function useDataTableRenderer({
     () => !pagination || paginationMode === "server" ? rows : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
     [rows, page, pageSize, paginationMode, pagination]
   );
+  const selectableDataInPage = useMemo8(
+    () => dataInPage.filter((row, i) => {
+      if (!isRowSelectable) return true;
+      return isRowSelectable({ row, id: getId(row, i) });
+    }),
+    [dataInPage, isRowSelectable, getId]
+  );
   const isAllSelected = useMemo8(
-    () => dataInPage.length > 0 && dataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
-    [dataInPage, selectedModelSet, getId]
+    () => selectableDataInPage.length > 0 && selectableDataInPage.every(
+      (row, i) => selectedModelSet.has(getId(row, i))
+    ),
+    [selectableDataInPage, selectedModelSet, getId]
   );
   const rowCount = totalRowsProp || rows.length;
+  const selectableRowCount = useMemo8(() => {
+    if (!isRowSelectable) return rowCount;
+    return rows.filter((row, i) => isRowSelectable({ row, id: getId(row, i) })).length;
+  }, [rows, isRowSelectable, getId, rowCount]);
   const isTotalSelected = useMemo8(
-    () => _isTotalSelected ?? (rowCount > 0 && (selectionModel?.length || 0) === rowCount),
-    [_isTotalSelected, selectionModel, rowCount]
+    () => _isTotalSelected ?? (selectableRowCount > 0 && (selectionModel?.length || 0) === selectableRowCount),
+    [_isTotalSelected, selectionModel, selectableRowCount]
   );
   const columnWidths = useColumnWidths(columnsByField);
   const getWidth = useCallback9(
@@ -3658,9 +3672,10 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   useEffect5(() => {
     onSelectionModelChange?.([]);
-  }, [page]);
+  }, [page, onSelectionModelChange]);
   return {
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
@@ -3676,13 +3691,22 @@ function useDataTableRenderer({
       (model) => selectedModelSet.has(model),
       [selectedModelSet]
     ),
+    isRowSelectable: useCallback9(
+      (rowId, row) => {
+        if (!isRowSelectable) return true;
+        return isRowSelectable({ row, id: rowId });
+      },
+      [isRowSelectable]
+    ),
     focusedRowId,
     onRowFocus: useCallback9((rowId) => {
       setFocusedRowId(rowId);
     }, []),
     onAllCheckboxChange: useCallback9(() => {
-      onSelectionModelChange?.(isAllSelected ? [] : dataInPage.map(getId));
-    }, [isAllSelected, dataInPage, onSelectionModelChange, getId]),
+      onSelectionModelChange?.(
+        isAllSelected ? [] : selectableDataInPage.map(getId)
+      );
+    }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
     onCheckboxChange: useCallback9(
       (event, selectedModel) => {
         if (selectedModelSet.has(selectedModel)) {
@@ -3699,11 +3723,15 @@ function useDataTableRenderer({
     ),
     columns,
     onTotalSelect: useCallback9(() => {
+      const selectableRows = rows.filter((row, i) => {
+        if (!isRowSelectable) return true;
+        return isRowSelectable({ row, id: getId(row, i) });
+      });
       onSelectionModelChange?.(
-        isTotalSelected ? [] : rows.map(getId),
+        isTotalSelected ? [] : selectableRows.map(getId),
         !isTotalSelected
       );
-    }, [isTotalSelected, rows, onSelectionModelChange, getId])
+    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable])
   };
 }
 function Component(props, apiRef) {
@@ -3713,6 +3741,7 @@ function Component(props, apiRef) {
     editMode,
     selectionModel,
     onSelectionModelChange,
+    isRowSelectable,
     disableSelectionOnClick,
     onRowClick,
     pinnedColumns,
@@ -3760,10 +3789,12 @@ function Component(props, apiRef) {
     columns,
     isAllSelected,
     isSelectedRow,
+    isRowSelectable: isRowSelectableCheck,
     onAllCheckboxChange,
     onCheckboxChange,
     getId,
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange,
@@ -3789,9 +3820,15 @@ function Component(props, apiRef) {
   const getRowClickHandler = useCallback9(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
-      checkboxSelection && !disableSelectionOnClick && onCheckboxChange(e, rowId);
+      checkboxSelection && !disableSelectionOnClick && isRowSelectableCheck(rowId, row) && onCheckboxChange(e, rowId);
     },
-    [onRowClick, checkboxSelection, disableSelectionOnClick, onCheckboxChange]
+    [
+      onRowClick,
+      checkboxSelection,
+      disableSelectionOnClick,
+      onCheckboxChange,
+      isRowSelectableCheck
+    ]
   );
   const getRowFocusHandler = useCallback9(
     (rowId) => () => {
@@ -3806,10 +3843,12 @@ function Component(props, apiRef) {
     []
   );
   const getCheckboxChangeHandler = useCallback9(
-    (rowId) => (e) => {
-      onCheckboxChange(e, rowId);
+    (rowId, row) => (e) => {
+      if (isRowSelectableCheck(rowId, row)) {
+        onCheckboxChange(e, rowId);
+      }
     },
-    [onCheckboxChange]
+    [onCheckboxChange, isRowSelectableCheck]
   );
   useImperativeHandle2(apiRef, () => ({
     getRowIndexRelativeToVisibleRows(rowId) {
@@ -3847,7 +3886,7 @@ function Component(props, apiRef) {
         justifyContent: "space-between",
         alignItems: "center"
       },
-      !!checkboxSelection && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ React23.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(rowCount ?? rows.length), " items")), isTotalSelected && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(rowCount ?? rows.length), " items are selected."), /* @__PURE__ */ React23.createElement(
+      !!checkboxSelection && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ React23.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(selectableRowCount), " items")), isTotalSelected && /* @__PURE__ */ React23.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectableRowCount), " items are selected."), /* @__PURE__ */ React23.createElement(
         Button_default,
         {
           size: "sm",
@@ -3892,6 +3931,7 @@ function Component(props, apiRef) {
             onChange: onAllCheckboxChange,
             checked: isAllSelected,
             indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+            disabled: dataInPage.length > 0 && !selectableRowCount,
             ...checkboxProps
           }
         )
@@ -3911,7 +3951,9 @@ function Component(props, apiRef) {
           ref: tableBodyRef,
           style: {
             height: `${totalSize}px`
-          }
+          },
+          role: "rowgroup",
+          "aria-label": "DataTableBody"
         },
         !!loading && /* @__PURE__ */ React23.createElement(OverlayWrapper, null, /* @__PURE__ */ React23.createElement(
           "td",
@@ -3946,6 +3988,7 @@ function Component(props, apiRef) {
               key: virtualizedRow.key,
               "data-row-id": rowId,
               "data-index": rowIndex,
+              "aria-rowindex": rowIndex + 1,
               role: checkboxSelection && !disableSelectionOnClick ? "checkbox" : void 0,
               tabIndex: focusedRowId === rowId ? 0 : -1,
               onClick: getRowClickHandler(row, rowId),
@@ -3969,8 +4012,9 @@ function Component(props, apiRef) {
                 RenderCheckbox,
                 {
                   onClick: getCheckboxClickHandler(),
-                  onChange: getCheckboxChangeHandler(rowId),
+                  onChange: getCheckboxChangeHandler(rowId, row),
                   checked: isSelectedRow(rowId),
+                  disabled: !isRowSelectableCheck(rowId, row),
                   ...checkboxProps
                 }
               )