@ceed/cds 1.2.8-next.1 → 1.2.8-next.2

package/dist/index.cjs

@@ -2996,51 +2996,73 @@ var HeadCell = (props) => {
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = resizable ?? true ? Resizer(ref) : null;
-  const style = {
-    width,
-    minWidth: minWidth ?? "50px",
-    maxWidth,
-    position: isPinned ? "sticky" : stickyHeader ? void 0 : "relative",
-    // 조건식 더 복잡해지면 IIFE로 정리
-    left: isPinned ? pinnedStartPosition : void 0,
-    right: isPinned ? pinnedEndPosition : void 0,
-    zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + 2)` : void 0,
-    cursor: sortable ? "pointer" : "default",
-    // TODO: multi-sort때문에 일단 추가한 property, joy-ui에서는 multi-sort시 th에 user-select: none을 적용하고 툴팁을 띄워준다.
-    userSelect: "none"
-  };
+  const resizer = (0, import_react24.useMemo)(
+    () => resizable ?? true ? Resizer(ref) : null,
+    [resizable, ref]
+  );
+  const style = (0, import_react24.useMemo)(
+    () => ({
+      width,
+      minWidth: minWidth ?? "50px",
+      maxWidth,
+      position: isPinned ? "sticky" : stickyHeader ? void 0 : "relative",
+      // 조건식 더 복잡해지면 IIFE로 정리
+      left: isPinned ? pinnedStartPosition : void 0,
+      right: isPinned ? pinnedEndPosition : void 0,
+      zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + 2)` : void 0,
+      cursor: sortable ? "pointer" : "default",
+      // TODO: multi-sort때문에 일단 추가한 property, joy-ui에서는 multi-sort시 th에 user-select: none을 적용하고 툴팁을 띄워준다.
+      userSelect: "none"
+    }),
+    [
+      isPinned,
+      maxWidth,
+      minWidth,
+      pinnedEndPosition,
+      pinnedStartPosition,
+      sortable,
+      stickyHeader,
+      theme,
+      width
+    ]
+  );
   const textAlign = getTextAlign(props);
   const initialSort = sortOrder[0];
-  const sortIcon = sortable && /* @__PURE__ */ import_react24.default.createElement(
-    MotionSortIcon,
-    {
-      style: {
-        width: "16px",
-        height: "16px"
-      },
-      role: "img",
-      "aria-labelledby": headId,
-      "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending",
-      "data-testid": void 0,
-      variants: {
-        hover: { opacity: 1 },
-        initial: { opacity: 0 }
-      },
-      animate: {
-        color: !!sort ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
-        rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
-        opacity: !!sort ? 1 : 0
-      },
-      transition: {
-        duration: 0,
-        rotate: { duration: 0.2, ease: "easeOut" },
-        color: { duration: 0.2, ease: "easeInOut" },
-        opacity: { duration: 0.2, ease: "easeInOut" }
+  const sortIcon = (0, import_react24.useMemo)(
+    () => sortable && /* @__PURE__ */ import_react24.default.createElement(
+      MotionSortIcon,
+      {
+        style: {
+          width: "16px",
+          height: "16px"
+        },
+        role: "img",
+        "aria-labelledby": headId,
+        "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending",
+        "data-testid": void 0,
+        variants: {
+          hover: { opacity: 1 },
+          initial: { opacity: 0 }
+        },
+        animate: {
+          color: !!sort ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
+          rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
+          opacity: !!sort ? 1 : 0
+        },
+        transition: {
+          duration: 0,
+          rotate: { duration: 0.2, ease: "easeOut" },
+          color: { duration: 0.2, ease: "easeInOut" },
+          opacity: { duration: 0.2, ease: "easeInOut" }
+        }
       }
-    }
+    ),
+    [headId, initialSort, sort, sortable]
+  );
+  const infoSign = (0, import_react24.useMemo)(
+    () => description ? /* @__PURE__ */ import_react24.default.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
+    [description]
   );
-  const infoSign = description ? /* @__PURE__ */ import_react24.default.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null;
   return /* @__PURE__ */ import_react24.default.createElement(
     StyledTh,
     {
@@ -3050,7 +3072,10 @@ var HeadCell = (props) => {
       ref,
       key: field,
       style,
-      onClick: (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+      onClick: (0, import_react24.useCallback)(
+        (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+        [field, onSortChange, sort, sortable]
+      ),
       whileHover: "hover",
       initial: "initial"
     },
@@ -3108,7 +3133,7 @@ var BodyCell = (props) => {
       ...typeof props.componentProps === "function" ? props.componentProps(params) : props.componentProps || {},
       size: "sm"
     }),
-    [props, params]
+    [props.componentProps, params]
   );
   const editModeComponentProps = (0, import_react24.useMemo)(
     () => ({
@@ -3170,11 +3195,20 @@ var BodyCell = (props) => {
         }
       }
     }),
-    [params, row, field, value, componentProps, type, props]
+    [
+      params,
+      row,
+      field,
+      value,
+      componentProps,
+      type,
+      props.onCellEditStop,
+      props.onCellEditStart
+    ]
   );
   const EditModeComponent = (0, import_react24.useMemo)(() => {
     if (renderEditCell) {
-      return (0, import_react24.createElement)(renderEditCell, params);
+      return (0, import_react24.createElement)((0, import_react24.memo)(renderEditCell), params);
     }
     return {
       date: /* @__PURE__ */ import_react24.default.createElement(
@@ -3234,7 +3268,7 @@ var BodyCell = (props) => {
   }, [value, editModeComponentProps, type]);
   const ReadModeComponent = (0, import_react24.useMemo)(() => {
     if (renderCell) {
-      return (0, import_react24.createElement)(renderCell, params);
+      return (0, import_react24.createElement)((0, import_react24.memo)(renderCell), params);
     }
     const innerText = value;
     const typedComponent = {
@@ -3247,14 +3281,14 @@ var BodyCell = (props) => {
       )
     }[type || "text"];
     return typedComponent || innerText;
-  }, [value, renderCell, params, type, componentProps, props]);
+  }, [value, renderCell, params, type, componentProps]);
   const CellComponent = (0, import_react24.useMemo)(
     () => editMode && EditModeComponent ? EditModeComponent : ReadModeComponent,
     [editMode, EditModeComponent, ReadModeComponent]
   );
   const showTooltip = (0, import_react24.useMemo)(
-    () => noWrap && props.type === "longText",
-    [noWrap, props.type]
+    () => noWrap && type === "longText",
+    [noWrap, type]
   );
   (0, import_react24.useEffect)(() => {
     setValue(row[field]);
@@ -3265,38 +3299,40 @@ var BodyCell = (props) => {
       ref: cellRef,
       key: field,
       headers: `${tableId}_header_${props.headerName ?? field}`,
-      style: {
+      sx: {
         textAlign: getTextAlign({ type }),
         verticalAlign: editMode ? "top" : "middle",
         position: isPinned ? "sticky" : void 0,
         left: isPinned ? pinnedStartPosition : void 0,
         right: isPinned ? pinnedEndPosition : void 0,
         zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + 2)` : void 0,
-        // @ts-expect-error: react CSSProperties에는 --var를 지원하지 않는다.
         "--TableCell-dataBackground": isPinned ? `var(--TableCell-headBackground)` : void 0
       },
       className: isLastStartPinnedColumn && "is-last-left" || isLastEndPinnedColumn && "is-last-right" || ""
     },
-    showTooltip ? /* @__PURE__ */ import_react24.default.createElement(
-      Tooltip_default,
-      {
-        title: value,
-        placement: "bottom",
-        style: { maxWidth: "100%" },
-        enterDelay: 1500,
-        enterNextDelay: 1500
-      },
-      /* @__PURE__ */ import_react24.default.createElement(
-        "div",
+    (0, import_react24.useMemo)(
+      () => showTooltip ? /* @__PURE__ */ import_react24.default.createElement(
+        Tooltip_default,
         {
-          style: {
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          }
+          title: value,
+          placement: "bottom",
+          style: { maxWidth: "100%" },
+          enterDelay: 1500,
+          enterNextDelay: 1500
         },
-        CellComponent
-      )
-    ) : CellComponent
+        /* @__PURE__ */ import_react24.default.createElement(
+          "div",
+          {
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          },
+          CellComponent
+        )
+      ) : CellComponent,
+      [CellComponent, showTooltip, value]
+    )
   );
 };
 var BodyRow = (props) => {
@@ -3325,8 +3361,8 @@ function useDataTableRenderer({
   paginationModel,
   onPaginationModelChange,
   sortModel: controlledSortModel,
-  sortOrder: _sortOrder = ["asc", "desc", null],
-  selectionModel = [],
+  sortOrder: _sortOrder,
+  selectionModel,
   onSortModelChange,
   onSelectionModelChange,
   editMode,
@@ -3388,7 +3424,8 @@ function useDataTableRenderer({
     [_rows, sortModel, sortComparator]
   );
   const sortOrder = (0, import_react24.useMemo)(
-    () => Array.from(new Set(_sortOrder)),
+    // NOTE: default value를 props destructuring에서 할당하면 렌더링 시점에 초기화가 되어버린다.
+    () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
   const [page, setPage] = (0, import_react24.useState)(paginationModel?.page || 1);
@@ -3398,7 +3435,8 @@ function useDataTableRenderer({
     [_getId, page, pageSize]
   );
   const selectedModelSet = (0, import_react24.useMemo)(
-    () => new Set(selectionModel),
+    // NOTE: default value를 props destructuring에서 할당하면 렌더링 시점에 초기화가 되어버린다.
+    () => new Set(selectionModel || []),
     [selectionModel]
   );
   const dataInPage = (0, import_react24.useMemo)(
@@ -3411,7 +3449,7 @@ function useDataTableRenderer({
   );
   const rowCount = totalRowsProp || rows.length;
   const isTotalSelected = (0, import_react24.useMemo)(
-    () => _isTotalSelected ?? (rowCount > 0 && selectionModel.length === rowCount),
+    () => _isTotalSelected ?? (rowCount > 0 && (selectionModel?.length || 0) === rowCount),
     [_isTotalSelected, selectionModel, rowCount]
   );
   const columns = (0, import_react24.useMemo)(() => {
@@ -3535,12 +3573,12 @@ function useDataTableRenderer({
     onCheckboxChange: (0, import_react24.useCallback)(
       (event, selectedModel) => {
         if (selectedModelSet.has(selectedModel)) {
-          const newSelectionModel = selectionModel.filter(
+          const newSelectionModel = (selectionModel || []).filter(
             (model) => model !== selectedModel
           );
           onSelectionModelChange?.(newSelectionModel);
         } else {
-          const newSelectionModel = [...selectionModel, selectedModel];
+          const newSelectionModel = [...selectionModel || [], selectedModel];
           onSelectionModelChange?.(newSelectionModel);
         }
       },
@@ -3628,7 +3666,7 @@ function Component(props, apiRef) {
     getScrollElement: () => parentRef.current,
     estimateSize: () => 32,
     measureElement: (element) => element.clientHeight,
-    overscan: 20
+    overscan: 5
   });
   const paginationModel = (0, import_react24.useMemo)(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();

package/dist/index.js

@@ -1968,7 +1968,8 @@ import React22, {
   useId,
   forwardRef as forwardRef7,
   useImperativeHandle as useImperativeHandle2,
-  createElement
+  createElement,
+  memo
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { styled as styled11, LinearProgress, Link, useTheme } from "@mui/joy";
@@ -2957,51 +2958,73 @@ var HeadCell = (props) => {
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = resizable ?? true ? Resizer(ref) : null;
-  const style = {
-    width,
-    minWidth: minWidth ?? "50px",
-    maxWidth,
-    position: isPinned ? "sticky" : stickyHeader ? void 0 : "relative",
-    // 조건식 더 복잡해지면 IIFE로 정리
-    left: isPinned ? pinnedStartPosition : void 0,
-    right: isPinned ? pinnedEndPosition : void 0,
-    zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + 2)` : void 0,
-    cursor: sortable ? "pointer" : "default",
-    // TODO: multi-sort때문에 일단 추가한 property, joy-ui에서는 multi-sort시 th에 user-select: none을 적용하고 툴팁을 띄워준다.
-    userSelect: "none"
-  };
+  const resizer = useMemo8(
+    () => resizable ?? true ? Resizer(ref) : null,
+    [resizable, ref]
+  );
+  const style = useMemo8(
+    () => ({
+      width,
+      minWidth: minWidth ?? "50px",
+      maxWidth,
+      position: isPinned ? "sticky" : stickyHeader ? void 0 : "relative",
+      // 조건식 더 복잡해지면 IIFE로 정리
+      left: isPinned ? pinnedStartPosition : void 0,
+      right: isPinned ? pinnedEndPosition : void 0,
+      zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + 2)` : void 0,
+      cursor: sortable ? "pointer" : "default",
+      // TODO: multi-sort때문에 일단 추가한 property, joy-ui에서는 multi-sort시 th에 user-select: none을 적용하고 툴팁을 띄워준다.
+      userSelect: "none"
+    }),
+    [
+      isPinned,
+      maxWidth,
+      minWidth,
+      pinnedEndPosition,
+      pinnedStartPosition,
+      sortable,
+      stickyHeader,
+      theme,
+      width
+    ]
+  );
   const textAlign = getTextAlign(props);
   const initialSort = sortOrder[0];
-  const sortIcon = sortable && /* @__PURE__ */ React22.createElement(
-    MotionSortIcon,
-    {
-      style: {
-        width: "16px",
-        height: "16px"
-      },
-      role: "img",
-      "aria-labelledby": headId,
-      "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending",
-      "data-testid": void 0,
-      variants: {
-        hover: { opacity: 1 },
-        initial: { opacity: 0 }
-      },
-      animate: {
-        color: !!sort ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
-        rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
-        opacity: !!sort ? 1 : 0
-      },
-      transition: {
-        duration: 0,
-        rotate: { duration: 0.2, ease: "easeOut" },
-        color: { duration: 0.2, ease: "easeInOut" },
-        opacity: { duration: 0.2, ease: "easeInOut" }
+  const sortIcon = useMemo8(
+    () => sortable && /* @__PURE__ */ React22.createElement(
+      MotionSortIcon,
+      {
+        style: {
+          width: "16px",
+          height: "16px"
+        },
+        role: "img",
+        "aria-labelledby": headId,
+        "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending",
+        "data-testid": void 0,
+        variants: {
+          hover: { opacity: 1 },
+          initial: { opacity: 0 }
+        },
+        animate: {
+          color: !!sort ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
+          rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
+          opacity: !!sort ? 1 : 0
+        },
+        transition: {
+          duration: 0,
+          rotate: { duration: 0.2, ease: "easeOut" },
+          color: { duration: 0.2, ease: "easeInOut" },
+          opacity: { duration: 0.2, ease: "easeInOut" }
+        }
       }
-    }
+    ),
+    [headId, initialSort, sort, sortable]
+  );
+  const infoSign = useMemo8(
+    () => description ? /* @__PURE__ */ React22.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
+    [description]
   );
-  const infoSign = description ? /* @__PURE__ */ React22.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null;
   return /* @__PURE__ */ React22.createElement(
     StyledTh,
     {
@@ -3011,7 +3034,10 @@ var HeadCell = (props) => {
       ref,
       key: field,
       style,
-      onClick: (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+      onClick: useCallback9(
+        (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+        [field, onSortChange, sort, sortable]
+      ),
       whileHover: "hover",
       initial: "initial"
     },
@@ -3069,7 +3095,7 @@ var BodyCell = (props) => {
       ...typeof props.componentProps === "function" ? props.componentProps(params) : props.componentProps || {},
       size: "sm"
     }),
-    [props, params]
+    [props.componentProps, params]
   );
   const editModeComponentProps = useMemo8(
     () => ({
@@ -3131,11 +3157,20 @@ var BodyCell = (props) => {
         }
       }
     }),
-    [params, row, field, value, componentProps, type, props]
+    [
+      params,
+      row,
+      field,
+      value,
+      componentProps,
+      type,
+      props.onCellEditStop,
+      props.onCellEditStart
+    ]
   );
   const EditModeComponent = useMemo8(() => {
     if (renderEditCell) {
-      return createElement(renderEditCell, params);
+      return createElement(memo(renderEditCell), params);
     }
     return {
       date: /* @__PURE__ */ React22.createElement(
@@ -3195,7 +3230,7 @@ var BodyCell = (props) => {
   }, [value, editModeComponentProps, type]);
   const ReadModeComponent = useMemo8(() => {
     if (renderCell) {
-      return createElement(renderCell, params);
+      return createElement(memo(renderCell), params);
     }
     const innerText = value;
     const typedComponent = {
@@ -3208,14 +3243,14 @@ var BodyCell = (props) => {
       )
     }[type || "text"];
     return typedComponent || innerText;
-  }, [value, renderCell, params, type, componentProps, props]);
+  }, [value, renderCell, params, type, componentProps]);
   const CellComponent = useMemo8(
     () => editMode && EditModeComponent ? EditModeComponent : ReadModeComponent,
     [editMode, EditModeComponent, ReadModeComponent]
   );
   const showTooltip = useMemo8(
-    () => noWrap && props.type === "longText",
-    [noWrap, props.type]
+    () => noWrap && type === "longText",
+    [noWrap, type]
   );
   useEffect5(() => {
     setValue(row[field]);
@@ -3226,38 +3261,40 @@ var BodyCell = (props) => {
       ref: cellRef,
       key: field,
       headers: `${tableId}_header_${props.headerName ?? field}`,
-      style: {
+      sx: {
         textAlign: getTextAlign({ type }),
         verticalAlign: editMode ? "top" : "middle",
         position: isPinned ? "sticky" : void 0,
         left: isPinned ? pinnedStartPosition : void 0,
         right: isPinned ? pinnedEndPosition : void 0,
         zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + 2)` : void 0,
-        // @ts-expect-error: react CSSProperties에는 --var를 지원하지 않는다.
         "--TableCell-dataBackground": isPinned ? `var(--TableCell-headBackground)` : void 0
       },
       className: isLastStartPinnedColumn && "is-last-left" || isLastEndPinnedColumn && "is-last-right" || ""
     },
-    showTooltip ? /* @__PURE__ */ React22.createElement(
-      Tooltip_default,
-      {
-        title: value,
-        placement: "bottom",
-        style: { maxWidth: "100%" },
-        enterDelay: 1500,
-        enterNextDelay: 1500
-      },
-      /* @__PURE__ */ React22.createElement(
-        "div",
+    useMemo8(
+      () => showTooltip ? /* @__PURE__ */ React22.createElement(
+        Tooltip_default,
         {
-          style: {
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          }
+          title: value,
+          placement: "bottom",
+          style: { maxWidth: "100%" },
+          enterDelay: 1500,
+          enterNextDelay: 1500
         },
-        CellComponent
-      )
-    ) : CellComponent
+        /* @__PURE__ */ React22.createElement(
+          "div",
+          {
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          },
+          CellComponent
+        )
+      ) : CellComponent,
+      [CellComponent, showTooltip, value]
+    )
   );
 };
 var BodyRow = (props) => {
@@ -3286,8 +3323,8 @@ function useDataTableRenderer({
   paginationModel,
   onPaginationModelChange,
   sortModel: controlledSortModel,
-  sortOrder: _sortOrder = ["asc", "desc", null],
-  selectionModel = [],
+  sortOrder: _sortOrder,
+  selectionModel,
   onSortModelChange,
   onSelectionModelChange,
   editMode,
@@ -3349,7 +3386,8 @@ function useDataTableRenderer({
     [_rows, sortModel, sortComparator]
   );
   const sortOrder = useMemo8(
-    () => Array.from(new Set(_sortOrder)),
+    // NOTE: default value를 props destructuring에서 할당하면 렌더링 시점에 초기화가 되어버린다.
+    () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
   const [page, setPage] = useState6(paginationModel?.page || 1);
@@ -3359,7 +3397,8 @@ function useDataTableRenderer({
     [_getId, page, pageSize]
   );
   const selectedModelSet = useMemo8(
-    () => new Set(selectionModel),
+    // NOTE: default value를 props destructuring에서 할당하면 렌더링 시점에 초기화가 되어버린다.
+    () => new Set(selectionModel || []),
     [selectionModel]
   );
   const dataInPage = useMemo8(
@@ -3372,7 +3411,7 @@ function useDataTableRenderer({
   );
   const rowCount = totalRowsProp || rows.length;
   const isTotalSelected = useMemo8(
-    () => _isTotalSelected ?? (rowCount > 0 && selectionModel.length === rowCount),
+    () => _isTotalSelected ?? (rowCount > 0 && (selectionModel?.length || 0) === rowCount),
     [_isTotalSelected, selectionModel, rowCount]
   );
   const columns = useMemo8(() => {
@@ -3496,12 +3535,12 @@ function useDataTableRenderer({
     onCheckboxChange: useCallback9(
       (event, selectedModel) => {
         if (selectedModelSet.has(selectedModel)) {
-          const newSelectionModel = selectionModel.filter(
+          const newSelectionModel = (selectionModel || []).filter(
             (model) => model !== selectedModel
           );
           onSelectionModelChange?.(newSelectionModel);
         } else {
-          const newSelectionModel = [...selectionModel, selectedModel];
+          const newSelectionModel = [...selectionModel || [], selectedModel];
           onSelectionModelChange?.(newSelectionModel);
         }
       },
@@ -3589,7 +3628,7 @@ function Component(props, apiRef) {
     getScrollElement: () => parentRef.current,
     estimateSize: () => 32,
     measureElement: (element) => element.clientHeight,
-    overscan: 20
+    overscan: 5
   });
   const paginationModel = useMemo8(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();