mgh-components 1.1.1 → 1.1.2

package/README.md

@@ -166,13 +166,55 @@ apiRef.current?.state;                        // current models (sort, filter, p
 1. Change the import: `MGHDataGrid` → `MGHGrid`, `GridColDef` → `MGHGridColDef`.
 2. Column definitions keep the MUI v8 signatures (`valueGetter(value, row, column, api)`,
    `valueFormatter(value, row, column, api)`, `renderCell(params)`), so most columns work unchanged.
-3. `sx`, `cardSx` and `boxSx` are accepted but treated as plain inline styles (`cardStyle`, `boxStyle`,
-   `style` are the preferred names). Nested MUI selectors such as `'& .MuiDataGrid-row'` are ignored.
+3. `sx`, `cardSx` and `boxSx` work as before, including nested selectors (see *Styling rows and cells*).
+   Only selectors that target MUI's own class names (`'& .MuiDataGrid-row'`) need rewriting to the
+   `.mgh-grid-*` equivalents.
 4. `rowSelectionModel` uses the same shape as MUI v8 (`{ type: 'include', ids: Set }`).
 5. `slots.toolbar` components must be rewritten without MUI internals; use the exported building blocks.
 6. Custom export menu items receive a `hideMenu` prop (like MUI) – use `MGHGridExportMenuItem`.
 7. The no-rows overlay no longer needs `useSettingsContext`; pass `themeMode="dark"` to the grid instead.
 
+### Styling rows and cells (`sx` with nested selectors)
+
+`sx`, `cardSx` and `boxSx` (and their `style` / `cardStyle` / `boxStyle` twins) accept plain CSS
+properties, which are applied inline, **plus nested selectors** in the spirit of MUI's `sx`. Nested
+selectors are compiled into a `<style>` block scoped to that grid instance, so the common
+"colour a row by class" pattern works unchanged:
+
+```tsx
+<MGHGrid
+  rows={rows}
+  columns={columns}
+  getRowClassName={({ row }) => (row.needsApproval ? 'needsApproval' : row.isSubmitted ? 'isSubmitted' : '')}
+  sx={{
+    '.needsApproval': { color: 'goldenrod' },
+    '.isSubmitted': { color: themeMode === 'dark' ? 'lightgreen' : 'green' },
+    '&:hover .mgh-grid-row': { opacity: 0.95 },              // `&` = this grid
+    '@media (max-width: 600px)': { '.mgh-grid-toolbar': { display: 'none' } },
+  }}
+/>
+```
+
+Useful class names to target: `.mgh-grid-row` (`--selected`, `--group`, `--pinned`, `--footer`),
+`.mgh-grid-cell`, `.mgh-grid-header-cell`, `.mgh-grid-toolbar`, `.mgh-grid-footer`,
+`.mgh-grid-detail-panel`. Legacy `.MuiDataGrid-*` selectors will not match anything.
+
+### MUI-compatible constants
+
+For `pinnedColumns` and similar configs the internal column fields are exported under both
+`MGH_GRID_*` names and the MUI names, so existing code keeps working:
+
+```tsx
+import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD } from 'mgh-components';
+
+initialState={{
+  pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_COL_DEF.field, 'isoWeekId'], right: ['enterCount'] },
+}}
+```
+
+(The checkbox and detail-toggle columns are always pinned left automatically, so listing them is
+optional but harmless.)
+
 ### Theming
 
 ```tsx

package/dist/components/MGHGrid/MGHGrid.types.d.ts

@@ -322,6 +322,25 @@ export interface MGHGridPrintExportOptions extends MGHGridExportOptions {
     /** Extra CSS injected in the print document. */
     pageStyle?: string;
 }
+/**
+ * Inline CSS properties plus nested selectors, in the spirit of MUI's `sx`:
+ *
+ * ```tsx
+ * sx={{
+ *   height: '70vh',                          // applied inline
+ *   '.needsApproval': { color: 'goldenrod' }, // -> `<grid> .needsApproval { color: goldenrod }`
+ *   '&:hover .mgh-grid-row': { opacity: 0.9 },// `&` is replaced with the grid selector
+ *   '@media (max-width: 600px)': { '.mgh-grid-toolbar': { display: 'none' } },
+ * }}
+ * ```
+ *
+ * Nested selectors are compiled into a `<style>` block scoped to this grid instance, so they can
+ * target the classes returned by `getRowClassName` / `cellClassName` or the grid's own
+ * `mgh-grid-*` classes. Legacy `.MuiDataGrid-*` selectors will simply not match anything.
+ */
+export interface MGHGridSxProps extends React.CSSProperties {
+    [selector: string]: MGHGridSxProps | string | number | undefined;
+}
 export type MGHGridPreferencePanelValue = 'columns' | 'filters';
 export interface MGHGridPreferencePanelState {
     open: boolean;
@@ -602,15 +621,15 @@ export interface MGHGridProps<R extends MGHGridValidRowModel = any> {
     className?: string;
     cardClassName?: string;
     boxClassName?: string;
-    /** Inline style for the outer card. (`cardSx` is accepted as an alias for legacy code.) */
-    cardStyle?: React.CSSProperties;
-    cardSx?: React.CSSProperties;
-    /** Inline style for the box wrapping the grid. (`boxSx` is accepted as an alias for legacy code.) */
-    boxStyle?: React.CSSProperties;
-    boxSx?: React.CSSProperties;
-    /** Inline style for the grid root. (`sx` is accepted as an alias for legacy code.) */
-    style?: React.CSSProperties;
-    sx?: React.CSSProperties;
+    /** Styles for the outer card; supports nested selectors. (`cardSx` is an alias for legacy code.) */
+    cardStyle?: MGHGridSxProps;
+    cardSx?: MGHGridSxProps;
+    /** Styles for the box wrapping the grid; supports nested selectors. (`boxSx` is an alias for legacy code.) */
+    boxStyle?: MGHGridSxProps;
+    boxSx?: MGHGridSxProps;
+    /** Styles for the grid root; supports nested selectors. (`sx` is an alias for legacy code.) */
+    style?: MGHGridSxProps;
+    sx?: MGHGridSxProps;
     /** 'light' (default) or 'dark'. */
     themeMode?: MGHGridThemeMode;
     /** Override any `--mgh-grid-*` CSS variable. */

package/dist/components/MGHGrid/index.d.ts

@@ -16,5 +16,5 @@ export { MGHGridActionsCellItem } from './components/ActionsCell';
 export type { MGHGridActionsCellItemProps } from './components/ActionsCell';
 export { Button as MGHGridButton, IconButton as MGHGridIconButton, Menu as MGHGridMenu, MenuItem as MGHGridMenuItem, MenuDivider as MGHGridMenuDivider, Popover as MGHGridPopover, Checkbox as MGHGridCheckbox, TextInput as MGHGridTextInput, Select as MGHGridSelect, } from './components/primitives';
 export * as MGHGridIcons from './icons';
-export { GROUPING_COLUMN_FIELD as MGH_GRID_GROUPING_COLUMN_FIELD, CHECKBOX_FIELD as MGH_GRID_CHECKBOX_FIELD, DETAIL_PANEL_TOGGLE_FIELD as MGH_GRID_DETAIL_PANEL_TOGGLE_FIELD, DEFAULT_LOCALE_TEXT as MGH_GRID_DEFAULT_LOCALE_TEXT, BUILT_IN_AGGREGATION_FUNCTIONS as MGH_GRID_AGGREGATION_FUNCTIONS, stringFilterOperators as mghGridStringFilterOperators, numberFilterOperators as mghGridNumberFilterOperators, booleanFilterOperators as mghGridBooleanFilterOperators, singleSelectFilterOperators as mghGridSingleSelectFilterOperators, getDateFilterOperators as mghGridGetDateFilterOperators, } from './utils';
+export { GROUPING_COLUMN_FIELD as MGH_GRID_GROUPING_COLUMN_FIELD, CHECKBOX_FIELD as MGH_GRID_CHECKBOX_FIELD, DETAIL_PANEL_TOGGLE_FIELD as MGH_GRID_DETAIL_PANEL_TOGGLE_FIELD, CHECKBOX_COLUMN_DEF as MGH_GRID_CHECKBOX_SELECTION_COL_DEF, DETAIL_PANEL_TOGGLE_COLUMN_DEF as MGH_GRID_DETAIL_PANEL_TOGGLE_COL_DEF, CHECKBOX_COLUMN_DEF as GRID_CHECKBOX_SELECTION_COL_DEF, CHECKBOX_FIELD as GRID_CHECKBOX_SELECTION_FIELD, DETAIL_PANEL_TOGGLE_COLUMN_DEF as GRID_DETAIL_PANEL_TOGGLE_COL_DEF, DETAIL_PANEL_TOGGLE_FIELD as GRID_DETAIL_PANEL_TOGGLE_FIELD, GROUPING_COLUMN_FIELD as GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, buildScopedCss as mghGridBuildScopedCss, DEFAULT_LOCALE_TEXT as MGH_GRID_DEFAULT_LOCALE_TEXT, BUILT_IN_AGGREGATION_FUNCTIONS as MGH_GRID_AGGREGATION_FUNCTIONS, stringFilterOperators as mghGridStringFilterOperators, numberFilterOperators as mghGridNumberFilterOperators, booleanFilterOperators as mghGridBooleanFilterOperators, singleSelectFilterOperators as mghGridSingleSelectFilterOperators, getDateFilterOperators as mghGridGetDateFilterOperators, } from './utils';
 export { getDataAsCsv as mghGridGetDataAsCsv, buildXlsx as mghGridBuildXlsx } from './export';

package/dist/components/MGHGrid/utils.d.ts

@@ -56,6 +56,17 @@ export declare const singleSelectFilterOperators: MGHGridFilterOperator[];
 export declare const getDefaultFilterOperators: (type: MGHGridColType | undefined) => MGHGridFilterOperator[];
 export declare const getColumnFilterOperators: (col: MGHGridColDef) => MGHGridFilterOperator<any, any>[];
 export declare const normalizeColumn: <R extends MGHGridValidRowModel>(col: MGHGridColDef<R>) => MGHGridColDef<R>;
+/** Definition of the checkbox-selection column (equivalent of MUI's GRID_CHECKBOX_SELECTION_COL_DEF). */
+export declare const CHECKBOX_COLUMN_DEF: MGHGridColDef;
+/** Definition of the detail-panel toggle column (equivalent of MUI's GRID_DETAIL_PANEL_TOGGLE_COL_DEF). */
+export declare const DETAIL_PANEL_TOGGLE_COLUMN_DEF: MGHGridColDef;
+/** Keys that are CSS selectors / at-rules rather than CSS properties. */
+export declare const isSelectorKey: (key: string) => boolean;
+/**
+ * Compiles the nested-selector part of an `sx`-like object into CSS scoped under `scope`.
+ * Top-level plain properties are ignored here (they are applied as inline styles instead).
+ */
+export declare const buildScopedCss: (scope: string, sx: Record<string, unknown> | undefined, out?: string[]) => string[];
 export declare const BUILT_IN_AGGREGATION_FUNCTIONS: Record<string, MGHGridAggregationFunction>;
 export declare const DEFAULT_LOCALE_TEXT: MGHGridLocaleText;
 export declare const measureText: (text: string, font: string) => number;