@ceed/ads 0.0.67 → 0.0.69

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

@@ -11,6 +11,7 @@ type Column<T extends Record<string, V>, V = unknown> = {
     renderCell?: (params: {
         row: T;
         value?: V;
+        id: string;
     }) => ReactNode;
 };
 type DataTableProps<T extends Record<string, unknown>> = {
@@ -43,6 +44,12 @@ type DataTableProps<T extends Record<string, unknown>> = {
      */
     rowCount?: number;
     loading?: boolean;
+    getId?: (row: T) => string;
+    /**
+     * 기본적으로 Uncontrolled로 작동하지만, Controlled로 작동하게 하고 싶을 때 사용한다.
+     * 이 값이 true이면, 현재 페이지 이외에도 존재하는 모든 데이터가 선택된것으로 간주하고 동작한다.
+     */
+    isTotalSelected?: boolean;
     slots?: {
         checkbox?: React.ElementType;
         toolbar?: React.ElementType;

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 declare const Modal: import("framer-motion").CustomDomComponent<Pick<import("@mui/base").ModalOwnProps, "children" | "container" | "open" | "disablePortal" | "keepMounted" | "disableAutoFocus" | "disableEnforceFocus" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableScrollLock" | "hideBackdrop"> & {
-    onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown" | "closeClick") => void) | undefined;
+    onClose?: ((event: {}, reason: "escapeKeyDown" | "backdropClick" | "closeClick") => void) | undefined;
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").ModalSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;

package/dist/index.js

@@ -1312,10 +1312,16 @@ function useDataTableRenderer({
   paginationModel,
   onPaginationModelChange,
   selectionModel = [],
-  onSelectionModelChange
+  onSelectionModelChange,
+  getId: _getId,
+  isTotalSelected: _isTotalSelected
 }) {
   const [page, setPage] = useState4(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
+  const getId = useCallback3(
+    (row, index) => _getId?.(row) ?? row?.id ?? `${(index || 0) + (page - 1) * pageSize}`,
+    [_getId ?? page, pageSize]
+  );
   const selectedModelSet = useMemo3(
     () => new Set(selectionModel),
     [selectionModel]
@@ -1325,15 +1331,13 @@ function useDataTableRenderer({
     [rows, page, pageSize, paginationMode]
   );
   const isAllSelected = useMemo3(
-    () => dataInPage.length > 0 && dataInPage.every(
-      (_, i) => selectedModelSet.has(`${i + (page - 1) * pageSize}`)
-    ),
-    [dataInPage, selectedModelSet, page, pageSize]
+    () => dataInPage.length > 0 && dataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
+    [dataInPage, selectedModelSet, page, pageSize, getId]
   );
   const rowCount = totalRowsProp || rows.length;
   const isTotalSelected = useMemo3(
-    () => rowCount > 0 && selectionModel.length === rowCount,
-    [selectionModel, rowCount]
+    () => _isTotalSelected ?? (rowCount > 0 && selectionModel.length === rowCount),
+    [_isTotalSelected, selectionModel, rowCount]
   );
   const handlePageChange = useCallback3(
     (newPage) => {
@@ -1358,6 +1362,7 @@ function useDataTableRenderer({
     page,
     pageSize,
     onPaginationModelChange: handlePageChange,
+    getId,
     HeadCell,
     dataInPage,
     isAllSelected,
@@ -1368,9 +1373,7 @@ function useDataTableRenderer({
       [selectedModelSet]
     ),
     onAllCheckboxChange: useCallback3(() => {
-      onSelectionModelChange?.(
-        isAllSelected ? [] : dataInPage.map((_, i) => `${i + (page - 1) * pageSize}`)
-      );
+      onSelectionModelChange?.(isAllSelected ? [] : dataInPage.map(getId));
     }, [isAllSelected, dataInPage, onSelectionModelChange]),
     onCheckboxChange: useCallback3(
       (event, selectedModel) => {
@@ -1395,8 +1398,8 @@ function useDataTableRenderer({
     ),
     onTotalSelect: useCallback3(() => {
       onSelectionModelChange?.(
-        isTotalSelected ? [] : rows.map((_, i) => `${i}`),
-        isTotalSelected
+        isTotalSelected ? [] : rows.map(getId),
+        !isTotalSelected
       );
     }, [isTotalSelected, rows, onSelectionModelChange])
   };
@@ -1436,6 +1439,7 @@ function DataTable(props) {
     isSelectedRow,
     onAllCheckboxChange,
     onCheckboxChange,
+    getId,
     rowCount,
     page,
     pageSize,
@@ -1515,7 +1519,7 @@ function DataTable(props) {
       },
       /* @__PURE__ */ React12.createElement(LoadingOverlay, null)
     ))), /* @__PURE__ */ React12.createElement(OverlayWrapper, null), dataInPage.map((row, rowIndex) => {
-      const rowId = `${rowIndex + (page - 1) * pageSize}`;
+      const rowId = getId(row, rowIndex);
       return /* @__PURE__ */ React12.createElement(
         "tr",
         {
@@ -1550,14 +1554,18 @@ function DataTable(props) {
               textAlign: column.type === "number" ? "end" : "start"
             }
           },
-          column.renderCell?.({ row, value: row[column.field] }) ?? row[column.field]
+          column.renderCell?.({
+            row,
+            value: row[column.field],
+            id: rowId
+          }) ?? row[column.field]
         ))
       );
     })), Footer && /* @__PURE__ */ React12.createElement(Footer, null))
   ), /* @__PURE__ */ React12.createElement(
     TablePagination,
     {
-      paginationModel: { page, pageSize },
+      paginationModel: useMemo3(() => ({ page, pageSize }), [page, pageSize]),
       rowCount,
       onPageChange: onPaginationModelChange
     }