@ceed/cds 1.5.6 → 1.5.7-next.1

package/dist/index.cjs

@@ -3037,7 +3037,9 @@ var StyledTh = (0, import_joy33.styled)(import_framer_motion21.motion.th)(({ the
 }));
 var StyledTd = (0, import_joy33.styled)("td")(({ theme }) => ({
   transition: `box-shadow 0.3s`,
-  boxShadow: "1px 0 var(--TableCell-borderColor)",
+  "&:not(.is-last-left):not(.is-last-right)": {
+    boxShadow: "1px 0 var(--TableCell-borderColor)"
+  },
   ".ScrollableRight &": {
     "&.is-last-left": {
       boxShadow: `1px 0 var(--TableCell-borderColor), ${theme.shadow.md}`
@@ -3372,6 +3374,7 @@ var BodyCell = (props) => {
     () => noWrap && type === "longText",
     [noWrap, type]
   );
+  const isBoundary = props.isLastStartPinnedColumn || props.isLastEndPinnedColumn;
   (0, import_react25.useEffect)(() => {
     setValue(row[field]);
   }, [row, field]);
@@ -3387,7 +3390,7 @@ var BodyCell = (props) => {
         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,
+        zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + ${isBoundary ? 2 : 3})` : void 0,
         "--TableCell-dataBackground": isPinned ? `var(--TableCell-headBackground)` : void 0
       },
       className: isLastStartPinnedColumn && "is-last-left" || isLastEndPinnedColumn && "is-last-right" || ""
@@ -3434,6 +3437,37 @@ var BodyRow = (0, import_react25.memo)(
     )));
   }
 );
+function useColumnWidths(columnsByField) {
+  const [widths, setWidths] = (0, import_react25.useState)({});
+  const roRef = (0, import_react25.useRef)();
+  (0, import_react25.useLayoutEffect)(() => {
+    if (roRef.current) roRef.current.disconnect();
+    roRef.current = new ResizeObserver((entries) => {
+      let changed = false;
+      setWidths((prev) => {
+        const next = { ...prev };
+        entries.forEach((entry) => {
+          const field = entry.target.dataset.field;
+          const w = Math.round(entry.contentRect.width);
+          if (next[field] !== w) {
+            next[field] = w;
+            changed = true;
+          }
+        });
+        return changed ? next : prev;
+      });
+    });
+    Object.entries(columnsByField).forEach(([field, def]) => {
+      const el = def.headerRef.current;
+      if (el) {
+        el.dataset.field = field;
+        roRef.current.observe(el);
+      }
+    });
+    return () => roRef.current?.disconnect();
+  }, [columnsByField]);
+  return widths;
+}
 function useDataTableRenderer({
   rows: _rows,
   columns: columnsProp,
@@ -3536,6 +3570,12 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (rowCount > 0 && (selectionModel?.length || 0) === rowCount),
     [_isTotalSelected, selectionModel, rowCount]
   );
+  const columnWidths = useColumnWidths(columnsByField);
+  const getWidth = (0, import_react25.useCallback)(
+    (f) => (columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
+    columnsByField[f].minWidth ?? 0) + columnsProp.length,
+    [columnWidths, columnsByField, columnsProp.length]
+  );
   const columns = (0, import_react25.useMemo)(() => {
     const baseColumns = columnsProp || // fallback
     Object.keys(rows[0] || {}).map((key) => ({
@@ -3557,32 +3597,27 @@ function useDataTableRenderer({
         sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
         isPinned,
         isLastStartPinnedColumn: isLeftPinned && [...pinnedColumns?.left || []].pop() === column.field,
-        isLastEndPinnedColumn: isRightPinned && [...pinnedColumns?.right || []].pop() === column.field,
+        isLastEndPinnedColumn: isRightPinned && (pinnedColumns?.right?.[0] ?? null) === column.field,
+        // pinned 관련 계산부
         pinnedStartPosition: pinnedColumns?.left?.slice(
           0,
-          isLeftPinned ? pinnedColumns?.left?.indexOf(column.field) : pinnedColumns.left.length
-        ).reduce(
-          (acc, curr) => acc + (columnsByField[curr]?.headerRef.current?.clientWidth || 0),
-          0
-        ),
+          isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length
+        ).reduce((acc, curr) => acc + getWidth(curr), 0),
         pinnedEndPosition: pinnedColumns?.right?.slice(
-          0,
-          isRightPinned ? pinnedColumns.right.indexOf(column.field) : pinnedColumns.right.length
-        ).reduceRight(
-          (acc, curr) => acc + (columnsByField[curr]?.headerRef.current?.clientWidth || 0),
-          0
-        )
+          isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0
+        ).reduce((acc, curr) => acc + getWidth(curr), 0)
       };
     });
   }, [
     columnsProp,
     rows,
+    pinnedColumns?.left,
+    pinnedColumns?.right,
+    columnsByField,
     editMode,
     sortModel,
-    columnsByField,
     sortOrder,
-    pinnedColumns?.left,
-    pinnedColumns?.right
+    getWidth
   ]);
   const handlePageChange = (0, import_react25.useCallback)(
     (newPage) => {

package/dist/index.js

@@ -2022,7 +2022,8 @@ import React23, {
   forwardRef as forwardRef7,
   useImperativeHandle as useImperativeHandle2,
   createElement,
-  memo
+  memo,
+  useLayoutEffect
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import {
@@ -3005,7 +3006,9 @@ var StyledTh = styled12(motion21.th)(({ theme }) => ({
 }));
 var StyledTd = styled12("td")(({ theme }) => ({
   transition: `box-shadow 0.3s`,
-  boxShadow: "1px 0 var(--TableCell-borderColor)",
+  "&:not(.is-last-left):not(.is-last-right)": {
+    boxShadow: "1px 0 var(--TableCell-borderColor)"
+  },
   ".ScrollableRight &": {
     "&.is-last-left": {
       boxShadow: `1px 0 var(--TableCell-borderColor), ${theme.shadow.md}`
@@ -3340,6 +3343,7 @@ var BodyCell = (props) => {
     () => noWrap && type === "longText",
     [noWrap, type]
   );
+  const isBoundary = props.isLastStartPinnedColumn || props.isLastEndPinnedColumn;
   useEffect5(() => {
     setValue(row[field]);
   }, [row, field]);
@@ -3355,7 +3359,7 @@ var BodyCell = (props) => {
         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,
+        zIndex: isPinned ? `calc(${theme.getCssVar("zIndex-table")} + ${isBoundary ? 2 : 3})` : void 0,
         "--TableCell-dataBackground": isPinned ? `var(--TableCell-headBackground)` : void 0
       },
       className: isLastStartPinnedColumn && "is-last-left" || isLastEndPinnedColumn && "is-last-right" || ""
@@ -3402,6 +3406,37 @@ var BodyRow = memo(
     )));
   }
 );
+function useColumnWidths(columnsByField) {
+  const [widths, setWidths] = useState6({});
+  const roRef = useRef4();
+  useLayoutEffect(() => {
+    if (roRef.current) roRef.current.disconnect();
+    roRef.current = new ResizeObserver((entries) => {
+      let changed = false;
+      setWidths((prev) => {
+        const next = { ...prev };
+        entries.forEach((entry) => {
+          const field = entry.target.dataset.field;
+          const w = Math.round(entry.contentRect.width);
+          if (next[field] !== w) {
+            next[field] = w;
+            changed = true;
+          }
+        });
+        return changed ? next : prev;
+      });
+    });
+    Object.entries(columnsByField).forEach(([field, def]) => {
+      const el = def.headerRef.current;
+      if (el) {
+        el.dataset.field = field;
+        roRef.current.observe(el);
+      }
+    });
+    return () => roRef.current?.disconnect();
+  }, [columnsByField]);
+  return widths;
+}
 function useDataTableRenderer({
   rows: _rows,
   columns: columnsProp,
@@ -3504,6 +3539,12 @@ function useDataTableRenderer({
     () => _isTotalSelected ?? (rowCount > 0 && (selectionModel?.length || 0) === rowCount),
     [_isTotalSelected, selectionModel, rowCount]
   );
+  const columnWidths = useColumnWidths(columnsByField);
+  const getWidth = useCallback9(
+    (f) => (columnWidths[f] ?? columnsByField[f].width ?? // Column prop 으로 지정된 width
+    columnsByField[f].minWidth ?? 0) + columnsProp.length,
+    [columnWidths, columnsByField, columnsProp.length]
+  );
   const columns = useMemo8(() => {
     const baseColumns = columnsProp || // fallback
     Object.keys(rows[0] || {}).map((key) => ({
@@ -3525,32 +3566,27 @@ function useDataTableRenderer({
         sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
         isPinned,
         isLastStartPinnedColumn: isLeftPinned && [...pinnedColumns?.left || []].pop() === column.field,
-        isLastEndPinnedColumn: isRightPinned && [...pinnedColumns?.right || []].pop() === column.field,
+        isLastEndPinnedColumn: isRightPinned && (pinnedColumns?.right?.[0] ?? null) === column.field,
+        // pinned 관련 계산부
         pinnedStartPosition: pinnedColumns?.left?.slice(
           0,
-          isLeftPinned ? pinnedColumns?.left?.indexOf(column.field) : pinnedColumns.left.length
-        ).reduce(
-          (acc, curr) => acc + (columnsByField[curr]?.headerRef.current?.clientWidth || 0),
-          0
-        ),
+          isLeftPinned ? pinnedColumns.left.indexOf(column.field) : pinnedColumns.left.length
+        ).reduce((acc, curr) => acc + getWidth(curr), 0),
         pinnedEndPosition: pinnedColumns?.right?.slice(
-          0,
-          isRightPinned ? pinnedColumns.right.indexOf(column.field) : pinnedColumns.right.length
-        ).reduceRight(
-          (acc, curr) => acc + (columnsByField[curr]?.headerRef.current?.clientWidth || 0),
-          0
-        )
+          isRightPinned ? pinnedColumns.right.indexOf(column.field) + 1 : 0
+        ).reduce((acc, curr) => acc + getWidth(curr), 0)
       };
     });
   }, [
     columnsProp,
     rows,
+    pinnedColumns?.left,
+    pinnedColumns?.right,
+    columnsByField,
     editMode,
     sortModel,
-    columnsByField,
     sortOrder,
-    pinnedColumns?.left,
-    pinnedColumns?.right
+    getWidth
   ]);
   const handlePageChange = useCallback9(
     (newPage) => {