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

package/dist/DataGrid/DataGrid.styles.d.ts

@@ -10,5 +10,13 @@ import type { SxProps, Theme } from '@mui/material/styles';
 export declare const panelSurfaceStyles: {
     readonly backgroundColor: "var(--mod-color-surface-raised)";
 };
-export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
+/**
+ * `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.
+ */
+export declare const getDataGridHeaderStyles: ({ resizable, }?: {
+    resizable?: boolean;
+}) => SxProps<Theme>;
 export declare const getDataGridRowStyles: () => SxProps<Theme>;

package/dist/index.d.ts

@@ -893,7 +893,15 @@ declare namespace ModDataGrid {
     var displayName: string;
 }
 
-declare const getDataGridHeaderStyles: () => SxProps<Theme>;
+/**
+ * `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.
+ */
+declare const getDataGridHeaderStyles: ({ resizable, }?: {
+    resizable?: boolean;
+}) => SxProps<Theme>;
 declare const getDataGridRowStyles: () => SxProps<Theme>;
 
 interface ModDataGridCellContentProps extends HTMLAttributes<HTMLDivElement> {

package/dist/index.esm.js

@@ -1545,7 +1545,13 @@ ModCodeSnippet.displayName = 'ModCodeSnippet';
 const panelSurfaceStyles = {
     backgroundColor: 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
         [`& .${gridClasses.columnHeader}`]: {
@@ -1571,8 +1577,9 @@ const getDataGridHeaderStyles = () => {
             ...semanticTypography.table.header,
             color: 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
         [`& .${gridClasses.columnHeader}:hover .${gridClasses.columnHeaderTitle}`]: {
@@ -1593,6 +1600,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`.
         [`& .${gridClasses.columnHeaderTitleContainer}`]: {
             overflow: 'visible',
             lineHeight: 1,
@@ -2358,7 +2366,7 @@ function ModDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         [`&& .${gridClasses.filler}, && .${gridClasses.scrollbarFiller}`]: {
             backgroundColor: semanticColors.color.surface.dataGrid.default,
         },
-        ...getDataGridHeaderStyles(),
+        ...getDataGridHeaderStyles({ resizable: !props.disableColumnResize }),
         ...getDataGridRowStyles(),
         border: `1px solid ${semanticColors.color.border.primary}`,
         // Target `& svg` (not `.MuiSvgIcon-root`) to match the lucide icons