@ceed/cds 1.40.3-next.5 → 1.40.3-next.7

package/dist/index.cjs

@@ -460,16 +460,25 @@ function useSlotRef(slotProp, ref) {
   const isFunctionForm = typeof slotProp === "function";
   const slotRef = isFunctionForm ? void 0 : slotProp?.ref;
   const mergedRef = useMergedRef(slotRef, ref);
+  const latestSlotRef = (0, import_react6.useRef)(null);
+  const stableMergedRef = (0, import_react6.useCallback)(
+    (value) => {
+      assignRef(latestSlotRef.current, value);
+      assignRef(ref, value);
+    },
+    [ref]
+  );
   return (0, import_react6.useMemo)(() => {
     if (isFunctionForm) {
       return ((ownerState) => {
         const resolved = slotProp(ownerState) ?? {};
-        const merged = mergeRefs(resolved.ref, ref);
-        return merged ? { ...resolved, ref: merged } : { ...resolved };
+        const resolvedRef = resolved.ref;
+        latestSlotRef.current = resolvedRef ?? null;
+        return resolvedRef || ref ? { ...resolved, ref: stableMergedRef } : { ...resolved };
       });
     }
     return mergedRef ? { ...slotProp, ref: mergedRef } : { ...slotProp };
-  }, [isFunctionForm, slotProp, mergedRef, ref]);
+  }, [isFunctionForm, slotProp, mergedRef, ref, stableMergedRef]);
 }
 
 // src/components/Autocomplete/Autocomplete.tsx
@@ -2612,7 +2621,10 @@ function computeAutoFitWidth(params) {
   return finalWidth;
 }
 function getHeaderCellId(tableId, columnId) {
-  return `${tableId}_header_${columnId}`.trim();
+  return `${tableId}_header_${columnId}`;
+}
+function sanitizeColumnId(field) {
+  return String(field).trim().replace(/\s+/g, "_");
 }
 
 // src/components/DataTable/styled.tsx
@@ -3569,7 +3581,7 @@ var HeadCell = (props) => {
   }, [ref]);
   const [isHovered, setIsHovered] = (0, import_react26.useState)(false);
   const sortable = type === "actions" ? false : _sortable;
-  const headId = (0, import_react26.useMemo)(() => getHeaderCellId(tableId, columnId ?? field), [tableId, columnId, field]);
+  const headId = (0, import_react26.useMemo)(() => getHeaderCellId(tableId, columnId), [tableId, columnId]);
   const isResizingRef = (0, import_react26.useRef)(false);
   const resizer = (0, import_react26.useMemo)(
     () => resizable ?? true ? Resizer(
@@ -3578,9 +3590,9 @@ var HeadCell = (props) => {
       (isResizing) => {
         isResizingRef.current = isResizing;
       },
-      onAutoFit ? () => onAutoFit(columnId ?? String(field)) : void 0
+      onAutoFit ? () => onAutoFit(columnId) : void 0
     ) : null,
-    [resizable, ref, colRef, onAutoFit, columnId, field]
+    [resizable, ref, colRef, onAutoFit, columnId]
   );
   const style = (0, import_react26.useMemo)(
     () => ({
@@ -3850,7 +3862,7 @@ var BodyCell = (props) => {
     {
       ref: cellRef,
       key: field,
-      headers: getHeaderCellId(tableId, props.columnId ?? field),
+      headers: getHeaderCellId(tableId, props.columnId),
       sx: {
         textAlign: getTextAlign({ type }),
         verticalAlign: editMode ? "top" : "middle",
@@ -3950,8 +3962,8 @@ function useColumnWidths(columnsById) {
     });
     setWidths((prev) => {
       const keys = Object.keys(measured);
-      const same = keys.length === Object.keys(prev).length && keys.every((key) => prev[key] === measured[key]);
-      return same ? prev : measured;
+      const same = keys.every((key) => prev[key] === measured[key]);
+      return same ? prev : { ...prev, ...measured };
     });
     return () => roRef.current?.disconnect();
   }, [columnsById]);
@@ -4038,10 +4050,10 @@ function useDataTableRenderer({
     [reorderedColumns]
   );
   const allColumnIds = (0, import_react27.useMemo)(() => {
-    const taken = new Set(reorderedColumns.map((column) => String(column.field)));
+    const taken = new Set(reorderedColumns.map((column) => sanitizeColumnId(column.field)));
     const assigned = /* @__PURE__ */ new Set();
     return reorderedColumns.map((column) => {
-      const field = String(column.field);
+      const field = sanitizeColumnId(column.field);
       if (!assigned.has(field)) {
         assigned.add(field);
         return field;
@@ -4192,7 +4204,7 @@ function useDataTableRenderer({
       field: key
     }));
     return baseColumns.map((column, index) => {
-      const columnId = columnIds[index] ?? String(column.field);
+      const columnId = columnIds[index] ?? sanitizeColumnId(column.field);
       const isLeftPinned = effectivePinnedLeft?.includes(column.field);
       const isRightPinned = effectivePinnedRight?.includes(column.field);
       const isPinned = isLeftPinned || isRightPinned;
@@ -5030,13 +5042,13 @@ function Component(props, apiRef) {
           }
         },
         headerCheckboxElement
-      ), columns.map((c, i) => (
+      ), columns.map((c) => (
         // @ts-ignore
         /* @__PURE__ */ import_react30.default.createElement(
           HeadCell2,
           {
             tableId,
-            key: `${c.field.toString()}_${i}`,
+            key: c.columnId,
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,
@@ -5701,7 +5713,7 @@ var ModalOverflow = MotionModalOverflow;
 ModalOverflow.displayName = "ModalOverflow";
 var ModalFrame = import_react33.default.forwardRef((props, ref) => {
   const { title, children, titleStartDecorator, onClose, ...innerProps } = props;
-  return /* @__PURE__ */ import_react33.default.createElement(StyledModalDialog, { ref, ...innerProps }, /* @__PURE__ */ import_react33.default.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ import_react33.default.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ import_react33.default.createElement(DialogContent_default, null, children));
+  return /* @__PURE__ */ import_react33.default.createElement(StyledModalDialog, { ...innerProps, ref }, /* @__PURE__ */ import_react33.default.createElement(ModalClose, { onClick: onClose }), /* @__PURE__ */ import_react33.default.createElement(DialogTitle_default, null, titleStartDecorator, title), /* @__PURE__ */ import_react33.default.createElement(DialogContent_default, null, children));
 });
 ModalFrame.displayName = "ModalFrame";
 
@@ -5979,7 +5991,7 @@ var import_joy46 = require("@mui/joy");
 // src/components/IconMenuButton/IconMenuButton.tsx
 var import_react37 = __toESM(require("react"));
 var import_joy47 = require("@mui/joy");
-var MenuButtonRootSlot = import_react37.default.forwardRef(function MenuButtonRootSlot2({ as, ...rest }, ref) {
+var MenuButtonRootSlot = import_react37.default.forwardRef(function MenuButtonRootSlot2({ as, ownerState: _ownerState, ...rest }, ref) {
   return /* @__PURE__ */ import_react37.default.createElement(import_joy47.IconButton, { ...rest, component: as ?? "button", ref });
 });
 function IconMenuButtonInner(props, ref) {
@@ -6017,7 +6029,8 @@ function IconMenuButtonInner(props, ref) {
       slots: { root: MenuButtonRootSlot },
       slotProps: {
         root: {
-          component: props.buttonComponent ?? "button",
+          // 기본값 'button'은 MenuButtonRootSlot 한 곳에만 둔다.
+          component: props.buttonComponent,
           size,
           variant,
           color,