From d7f4d0db37e7f928765442613cf347f8c09c645c Mon Sep 17 00:00:00 2001
From: Hein <hein@bitechsystems.co.za>
Date: Wed, 22 Oct 2025 13:35:18 +0200
Subject: [PATCH] docs(changeset): Fixed spreaing of grid props

---
 .changeset/kind-memes-kneel.md  |   5 +
 src/Gridler/GridlerDataGrid.tsx | 203 ++++++++++++++++----------------
 2 files changed, 104 insertions(+), 104 deletions(-)
 create mode 100644 .changeset/kind-memes-kneel.md

diff --git a/.changeset/kind-memes-kneel.md b/.changeset/kind-memes-kneel.md
new file mode 100644
index 0000000..fb049d8
--- /dev/null
+++ b/.changeset/kind-memes-kneel.md
@@ -0,0 +1,5 @@
+---
+'@warkypublic/oranguru': patch
+---
+
+Fixed spreaing of grid props
diff --git a/src/Gridler/GridlerDataGrid.tsx b/src/Gridler/GridlerDataGrid.tsx
index 8889e10..f8c6be2 100644
--- a/src/Gridler/GridlerDataGrid.tsx
+++ b/src/Gridler/GridlerDataGrid.tsx
@@ -121,114 +121,109 @@ export const GridlerDataGrid = () => {
             }, 100);
           }
         }}
+        ref={refWrapper}
       >
         {sections?.left}
-        <div
-          ref={refWrapper}
-          style={{
-            flexGrow: 2,
-            height: '100%',
-            minHeight: '80px',
-            width: '100%',
-          }}
-        >
-          {width && width > 0 && height && height > 0 && (
-            <DataEditor
-              cellActivationBehavior="double-click"
-              //getCelrefMergedlContent={getCellContent}
-              columns={(renderColumns as Array<GridColumn>) ?? []}
-              columnSelect="none"
-              drawFocusRing
-              getCellContent={getCellContent}
-              getCellsForSelection={getCellsForSelection}
-              getRowThemeOverride={theme.getRowThemeOverride}
-              gridSelection={_gridSelection}
-              headerHeight={headerHeight ?? 32}
-              headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
-              height={(height ?? 400) - 4}
-              onCellContextMenu={(cell, event) => {
-                event.preventDefault();
-                if (!refContextActivated.current) {
-                  refContextActivated.current = true;
-                  onContextClick('cell', event, cell[0], cell[1]);
-                  setTimeout(() => {
-                    refContextActivated.current = false;
-                  }, 100);
-                }
-              }}
-              onCellEdited={onCellEdited}
-              onColumnMoved={onColumnMoved}
-              onColumnProposeMove={onColumnProposeMove}
-              onColumnResize={onColumnResize}
-              onGridSelectionChange={(selection) => {
-                let rows = CompactSelection.empty();
-                const currentSelection = getState('_gridSelection');
-                for (const r of selection.rows) {
-                  rows = rows.hasIndex(r) ? rows : rows.add(r);
-                }
-                if (selectMode === 'row' && selection.current?.range) {
-                  for (
-                    let y = selection.current.range.y;
-                    y < selection.current.range.y + selection.current.range.height;
-                    y++
-                  ) {
-                    rows = rows.hasIndex(y) ? rows : rows.add(y);
-                  }
-                }
 
-                if (
-                  JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
-                  JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
-                  JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
-                ) {
-                  setState('_gridSelection', { ...selection, rows });
-                  if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
-                    setState('_gridSelectionRows', rows);
-                  }
-                }
-
-                //console.log('Selection', selection);
-              }}
-              onHeaderClicked={onHeaderClicked}
-              onHeaderContextMenu={(col, event) => {
-                event.preventDefault();
-                if (!refContextActivated.current) {
-                  refContextActivated.current = true;
-                  onContextClick('header', event as any, col);
-                  setTimeout(() => {
-                    refContextActivated.current = false;
-                  }, 100);
-                }
-              }}
-              onHeaderMenuClick={onHeaderMenuClick}
-              onItemHovered={onItemHovered}
-              onVisibleRegionChanged={onVisibleRegionChanged}
-              rangeSelect="multi-rect"
-              ref={refMerged as React.Ref<DataEditorRef>}
-              rightElement={
-                <Group>
-                  {sections?.rightElementStart}
-                  <RightMenuIcon />
-                  {sections?.rightElementEnd}
-                </Group>
+        {width && width > 0 && height && height > 0 && (
+          <DataEditor
+            cellActivationBehavior="double-click"
+            //getCelrefMergedlContent={getCellContent}
+            columns={(renderColumns as Array<GridColumn>) ?? []}
+            columnSelect="none"
+            drawFocusRing
+            height={(height ?? 400) - 4}
+            rangeSelect="multi-rect"
+            rowMarkers={{
+              checkboxStyle: 'square',
+              kind: 'both',
+            }}
+            rowSelect="multi"
+            rowSelectionMode="auto"
+            spanRangeBehavior="default"
+            {...glideProps}
+            getCellContent={getCellContent}
+            getCellsForSelection={getCellsForSelection}
+            getRowThemeOverride={theme.getRowThemeOverride}
+            gridSelection={_gridSelection}
+            headerHeight={headerHeight ?? 32}
+            headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
+            onCellContextMenu={(cell, event) => {
+              event.preventDefault();
+              glideProps?.onCellContextMenu?.(cell, event);
+              if (!refContextActivated.current) {
+                refContextActivated.current = true;
+                onContextClick('cell', event, cell[0], cell[1]);
+                setTimeout(() => {
+                  refContextActivated.current = false;
+                }, 100);
               }
-              rowHeight={rowHeight ?? 22}
-              //rowMarkersCheckboxStyle='square'
-              //rowMarkersKind='both'
-              rowMarkers={{
-                checkboxStyle: 'square',
-                kind: 'both',
-              }}
-              rows={total_rows ?? 0}
-              rowSelect="multi"
-              rowSelectionMode="auto"
-              spanRangeBehavior="default"
-              theme={theme.gridTheme}
-              width={width ?? 200}
-              {...glideProps}
-            />
-          )}
-        </div>
+            }}
+            onCellEdited={onCellEdited}
+            onColumnMoved={onColumnMoved}
+            onColumnProposeMove={onColumnProposeMove}
+            onColumnResize={onColumnResize}
+            onGridSelectionChange={(selection) => {
+              let rows = CompactSelection.empty();
+              const currentSelection = getState('_gridSelection');
+              for (const r of selection.rows) {
+                rows = rows.hasIndex(r) ? rows : rows.add(r);
+              }
+              if (selectMode === 'row' && selection.current?.range) {
+                for (
+                  let y = selection.current.range.y;
+                  y < selection.current.range.y + selection.current.range.height;
+                  y++
+                ) {
+                  rows = rows.hasIndex(y) ? rows : rows.add(y);
+                }
+              }
+
+              if (
+                JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
+                JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
+                JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
+              ) {
+                setState('_gridSelection', { ...selection, rows });
+                if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
+                  setState('_gridSelectionRows', rows);
+                }
+              }
+
+              //console.log('Selection', selection);
+            }}
+            onHeaderClicked={onHeaderClicked}
+            onHeaderContextMenu={(col, event) => {
+              event.preventDefault();
+              if (!refContextActivated.current) {
+                refContextActivated.current = true;
+                onContextClick('header', event as any, col);
+                setTimeout(() => {
+                  refContextActivated.current = false;
+                }, 100);
+              }
+            }}
+            onHeaderMenuClick={onHeaderMenuClick}
+            onItemHovered={onItemHovered}
+            onVisibleRegionChanged={onVisibleRegionChanged}
+            ref={refMerged as React.Ref<DataEditorRef>}
+            rightElement={
+              <Group>
+                {sections?.rightElementStart}
+                <RightMenuIcon />
+                {sections?.rightElementEnd}
+              </Group>
+            }
+            rowHeight={rowHeight ?? 22}
+            //rowMarkersCheckboxStyle='square'
+            //rowMarkersKind='both'
+
+            rows={total_rows ?? 0}
+            theme={theme.gridTheme}
+            width={width ?? 200}
+          />
+        )}
+
         {/* </Portal> */}
         <Computer />
         {!hasLocalData && <Pager />}