@moderneinc/design-system-components 7.5.0-next.6d29ed → 7.5.0

package/dist/index.js

@@ -1547,7 +1547,13 @@ ModCodeSnippet.displayName = 'ModCodeSnippet';
 const panelSurfaceStyles = {
     backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
 };
-const getDataGridHeaderStyles = () => {
+/**
+ * `resizable` picks header-title overflow. User-draggable widths truncate,
+ * since wrapped labels grow the header row mid-drag; the ellipsis also
+ * restores MUI's full-label tooltip, which needs `overflow: hidden`. Fixed
+ * widths wrap. Grid-level only: MUI has no per-column resizability class.
+ */
+const getDataGridHeaderStyles = ({ resizable = false, } = {}) => {
     return {
         // Header cell container styles: bg, border, padding
         [`& .${xDataGrid.gridClasses.columnHeader}`]: {
@@ -1573,8 +1579,9 @@ const getDataGridHeaderStyles = () => {
             ...designSystemTokens.semanticTypography.table.header,
             color: designSystemTokens.semanticColors.color.text.tertiary,
             transition: 'color 0.2s',
-            textOverflow: 'clip',
-            whiteSpace: 'break-spaces',
+            ...(resizable
+                ? { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
+                : { textOverflow: 'clip', whiteSpace: 'break-spaces' }),
         },
         // Change text color on hover
         [`& .${xDataGrid.gridClasses.columnHeader}:hover .${xDataGrid.gridClasses.columnHeaderTitle}`]: {
@@ -1595,6 +1602,7 @@ const getDataGridHeaderStyles = () => {
         },
         // MUI clips this container when padding leaves < 16px of content area, which
         // crops the sort icon. Guards callers that shrink height.table.header.
+        // NOTE: MUI's own minWidth: 0 here keeps title truncation working despite `visible`.
         [`& .${xDataGrid.gridClasses.columnHeaderTitleContainer}`]: {
             overflow: 'visible',
             lineHeight: 1,
@@ -2360,7 +2368,7 @@ function ModDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         [`&& .${xDataGrid.gridClasses.filler}, && .${xDataGrid.gridClasses.scrollbarFiller}`]: {
             backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.default,
         },
-        ...getDataGridHeaderStyles(),
+        ...getDataGridHeaderStyles({ resizable: !props.disableColumnResize }),
         ...getDataGridRowStyles(),
         border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         // Target `& svg` (not `.MuiSvgIcon-root`) to match the lucide icons