Add header disabled to row markers (#981)

* add header disabled to row markers

* disable pointer if row header disabled

* remove console .log

* Add toggle to story

---------

Co-authored-by: lukasmasuch <[email protected]>

Author: BrianHung

packages/core/src/data-editor/data-editor.tsx

@@ -101,6 +101,7 @@ export interface RowMarkerOptions {
     theme?: Partial<Theme>;
     headerTheme?: Partial<Theme>;
     headerAlwaysVisible?: boolean;
+    headerDisabled?: boolean;
 }
 
 interface MouseState {
@@ -886,7 +887,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const rowMarkerTheme = rowMarkersObj?.theme ?? p.rowMarkerTheme;
     const headerRowMarkerTheme = rowMarkersObj?.headerTheme;
     const headerRowMarkerAlwaysVisible = rowMarkersObj?.headerAlwaysVisible;
-    const headerRowMarkerDisabled = rowSelect !== "multi";
+    const headerRowMarkerDisabled = rowSelect !== "multi" || rowMarkersObj?.headerDisabled === true;
     const rowMarkerCheckboxStyle = rowMarkersObj?.checkboxStyle ?? "square";
 
     const minColumnWidth = Math.max(minColumnWidthIn, 20);
@@ -1908,7 +1909,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 if (hasRowMarkers && col === 0) {
                     lastSelectedRowRef.current = undefined;
                     lastSelectedColRef.current = undefined;
-                    if (rowSelect === "multi") {
+                    if (!headerRowMarkerDisabled && rowSelect === "multi") {
                         if (selectedRows.length !== rows) {
                             setSelectedRows(CompactSelection.fromSingleSelection([0, rows]), undefined, isMultiKey);
                         } else {

packages/core/src/docs/examples/row-markers.stories.tsx

@@ -34,6 +34,7 @@ export default {
 
 interface RowMarkersProps {
     markers: RowMarkerOptions["kind"];
+    headerDisabled: boolean;
 }
 
 export const RowMarkers: React.VFC<RowMarkersProps> = p => {
@@ -48,6 +49,7 @@ export const RowMarkers: React.VFC<RowMarkersProps> = p => {
                 kind: p.markers,
                 checkboxStyle: "square",
                 headerAlwaysVisible: true,
+                headerDisabled: p.headerDisabled,
                 headerTheme: {
                     textMedium: "rgba(51, 51, 51, 0.50)",
                 },
@@ -59,10 +61,14 @@ export const RowMarkers: React.VFC<RowMarkersProps> = p => {
 };
 (RowMarkers as any).args = {
     markers: "both",
+    headerDisabled: false,
 };
 (RowMarkers as any).argTypes = {
     markers: {
         control: { type: "select" },
         options: ["both", "checkbox", "number", "none", "clickable-number", "checkbox-visible"],
     },
+    headerDisabled: {
+        control: { type: "boolean" },
+    },
 };

packages/core/src/internal/data-grid/data-grid.tsx

@@ -924,7 +924,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
     const [overFill, setOverFill] = React.useState(false);
 
     const [hCol, hRow] = hoveredItem ?? [];
-    const headerHovered = hCol !== undefined && hRow === -1;
+    const headerHovered = hCol !== undefined && hRow === -1 && columns[hCol].headerRowMarkerDisabled !== true;
     const groupHeaderHovered = hCol !== undefined && hRow === -2;
     let clickableInnerCellHovered = false;
     let editableBoolHovered = false;
@@ -949,6 +949,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         : headerHovered || clickableInnerCellHovered || editableBoolHovered || groupHeaderHovered
         ? "pointer"
         : "default";
+    
     const style = React.useMemo(
         () => ({
             // width,

packages/core/src/internal/data-grid/render/data-grid-render.header.ts

@@ -77,7 +77,7 @@ export function drawGridHeaders(
             ctx.font = theme.headerFontFull;
         }
         const selected = selection.columns.hasIndex(c.sourceIndex);
-        const noHover = dragAndDropState !== undefined || isResizing;
+        const noHover = dragAndDropState !== undefined || isResizing || c.headerRowMarkerDisabled === true;
         const hoveredBoolean = !noHover && hRow === -1 && hCol === c.sourceIndex;
         const hover = noHover
             ? 0