@ceed/cds 1.7.3 → 1.7.4-next.2

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

@@ -3508,7 +3508,8 @@ function useDataTableRenderer({
   onSelectionModelChange,
   editMode,
   getId: _getId,
-  isTotalSelected: _isTotalSelected
+  isTotalSelected: _isTotalSelected,
+  isRowSelectable
 }) {
   const [focusedRowId, setFocusedRowId] = (0, import_react25.useState)(null);
   const [sortModel, setSortModel] = useControlledState(
@@ -3584,14 +3585,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)(
@@ -3687,9 +3701,10 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   (0, import_react25.useEffect)(() => {
     onSelectionModelChange?.([]);
-  }, [page]);
+  }, [page, onSelectionModelChange]);
   return {
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
@@ -3705,13 +3720,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)) {
@@ -3728,11 +3752,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) {
@@ -3742,6 +3770,7 @@ function Component(props, apiRef) {
     editMode,
     selectionModel,
     onSelectionModelChange,
+    isRowSelectable,
     disableSelectionOnClick,
     onRowClick,
     pinnedColumns,
@@ -3789,10 +3818,12 @@ function Component(props, apiRef) {
     columns,
     isAllSelected,
     isSelectedRow,
+    isRowSelectable: isRowSelectableCheck,
     onAllCheckboxChange,
     onCheckboxChange,
     getId,
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange,
@@ -3818,9 +3849,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) => () => {
@@ -3835,10 +3872,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) {
@@ -3876,7 +3915,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",
@@ -3921,6 +3960,7 @@ function Component(props, apiRef) {
             onChange: onAllCheckboxChange,
             checked: isAllSelected,
             indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+            disabled: dataInPage.length > 0 && !selectableRowCount,
             ...checkboxProps
           }
         )
@@ -3998,8 +4038,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.d.ts

@@ -1,2 +1,3 @@
 export { useTheme, useColorScheme, useThemeProps, ButtonGroup, alertClasses, boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, avatarClasses, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, stepClasses, StepButton, stepButtonClasses, stepperClasses, Skeleton, skeletonClasses, styled, } from "@mui/joy";
+export type { ButtonProps, Theme } from "@mui/joy";
 export { Autocomplete, Accordion, Alert, Accordions, AccordionDetails, AccordionSummary, Avatar, AvatarGroup, Box, Breadcrumbs, Button, Calendar, Checkbox, Container, CurrencyInput, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Drawer, Dropdown, extendTheme, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, IconMenuButton, InfoSign, Input, Markdown, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthPicker, MonthRangePicker, NavigationGroup, NavigationItem, Navigator, Pagination, PercentageInput, Radio, RadioGroup, RadioList, Select, Step, StepIndicator, Stepper, Option, Sheet, Stack, Switch, theme, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, Uploader, } from "./components";

package/dist/index.js

@@ -3476,7 +3476,8 @@ function useDataTableRenderer({
   onSelectionModelChange,
   editMode,
   getId: _getId,
-  isTotalSelected: _isTotalSelected
+  isTotalSelected: _isTotalSelected,
+  isRowSelectable
 }) {
   const [focusedRowId, setFocusedRowId] = useState6(null);
   const [sortModel, setSortModel] = useControlledState(
@@ -3552,14 +3553,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(
@@ -3655,9 +3669,10 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   useEffect5(() => {
     onSelectionModelChange?.([]);
-  }, [page]);
+  }, [page, onSelectionModelChange]);
   return {
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
@@ -3673,13 +3688,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)) {
@@ -3696,11 +3720,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) {
@@ -3710,6 +3738,7 @@ function Component(props, apiRef) {
     editMode,
     selectionModel,
     onSelectionModelChange,
+    isRowSelectable,
     disableSelectionOnClick,
     onRowClick,
     pinnedColumns,
@@ -3757,10 +3786,12 @@ function Component(props, apiRef) {
     columns,
     isAllSelected,
     isSelectedRow,
+    isRowSelectable: isRowSelectableCheck,
     onAllCheckboxChange,
     onCheckboxChange,
     getId,
     rowCount,
+    selectableRowCount,
     page,
     pageSize,
     onPaginationModelChange,
@@ -3786,9 +3817,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) => () => {
@@ -3803,10 +3840,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) {
@@ -3844,7 +3883,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",
@@ -3889,6 +3928,7 @@ function Component(props, apiRef) {
             onChange: onAllCheckboxChange,
             checked: isAllSelected,
             indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+            disabled: dataInPage.length > 0 && !selectableRowCount,
             ...checkboxProps
           }
         )
@@ -3966,8 +4006,9 @@ function Component(props, apiRef) {
                 RenderCheckbox,
                 {
                   onClick: getCheckboxClickHandler(),
-                  onChange: getCheckboxChangeHandler(rowId),
+                  onChange: getCheckboxChangeHandler(rowId, row),
                   checked: isSelectedRow(rowId),
+                  disabled: !isRowSelectableCheck(rowId, row),
                   ...checkboxProps
                 }
               )