Very basic grid implementation

.gitignore

@@ -31,3 +31,5 @@ kendo-ui-license.txt
 
 # Personal TODOs
 TODO.md
+
+notes/

src/components/Button.jsx

@@ -14,6 +14,7 @@ import {
   handleKeyPressUtils,
 } from "../utils";
 import { useAppData, useResizeObserver } from "../hooks";
+import { useNuGridContext } from "./NuGrid/NuGridContext";
 import { useEffect, useState } from "react";
 import { useRef } from "react";
 import { getObjectById, getImageStyles } from "../utils";
@@ -34,6 +35,10 @@ const Button = ({
 
   const styles = setStyle(data?.Properties);
   const { socket, findCurrentData, dataRef, handleData, reRender, inheritedProperties } = useAppData();
+
+  // Check if we're inside a NuGrid cell
+  const nuGridContext = useNuGridContext();
+  const isInNuGrid = !!nuGridContext;
   const { Picture, State, Visible, Event, Caption, Align, Posn, Size, CSS, Active } = data?.Properties;
   const { FontObj } = inheritedProperties(data, 'FontObj');
 
@@ -51,7 +56,7 @@ const Button = ({
     document.getElementById(extractStringUntilLastPeriod(data?.ID))
   );
 
-  const [checkInput, setCheckInput] = useState();
+  const [checkInput, setCheckInput] = useState(false);
 
   const [radioValue, setRadioValue] = useState(State ? State : 0);
 
@@ -76,16 +81,21 @@ const Button = ({
   );
 
   const decideInput = () => {
+    // When in NuGrid, use cellValue from context (0 or 1)
+    if (isInNuGrid && nuGridContext) {
+      return setCheckInput(nuGridContext.cellValue === 1);
+    }
     if (location == "inGrid") {
       return setCheckInput(inputValue);
     }
-    setCheckInput(State && State);
+    // Ensure we always set a boolean (not undefined) to avoid controlled/uncontrolled warning
+    setCheckInput(State === 1 || State === true);
   };
 
   useEffect(() => {
     decideInput();
     setPosition({ top: Posn && Posn[0], left: Posn && Posn[1] });
-  }, [data]);
+  }, [data, nuGridContext?.cellValue]);
 
   const shortcutKey = Caption?.includes("&")
     ? Caption?.charAt(Caption.indexOf("&") + 1).toLowerCase()
@@ -320,6 +330,11 @@ const Button = ({
   };
 
   const handleCheckBoxEvent = (value) => {
+    // When in NuGrid, report change via context callback
+    if (isInNuGrid && nuGridContext) {
+      nuGridContext.onCellChange(value ? 1 : 0);
+      return;
+    }
     if (location == "inGrid") {
       handleSelectEvent(value);
       handleCellChangedEvent(value);
@@ -430,6 +445,37 @@ const Button = ({
   };
 
   if (isCheckBox) {
+    // When in NuGrid, render a centered checkbox without labels
+    if (isInNuGrid) {
+      return (
+        <div
+          id={data.ID + ".$CONTAINER"}
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1,
+          }}
+        >
+          <input
+            onFocus={handleGotFocus}
+            ref={inputRef}
+            onKeyDown={(e) => handleKeyPress(e)}
+            id={data?.ID}
+            type="checkbox"
+            checked={checkInput}
+            disabled={Active === 0}
+            onChange={(e) => {
+              setCheckInput(e.target.checked);
+              handleCheckBoxEvent(e.target.checked);
+            }}
+          />
+        </div>
+      );
+    }
+
     let checkBoxPosition = null;
     if (Align && Align == "Left") {
       checkBoxPosition = { position: "absolute", right: 0, top: 3 };

src/components/Combo.jsx

@@ -1,9 +1,13 @@
 import { setStyle, getFontStyles, extractStringUntilLastPeriod, getObjectTypeById, handleMouseDown, handleMouseUp, handleMouseEnter, handleMouseMove, handleMouseLeave, parseFlexStyles, handleMouseWheel, handleMouseDoubleClick, handleKeyPressUtils } from '../utils';
 
 import { useAppData, useResizeObserver } from '../hooks';
+import { useNuGridContext } from './NuGrid/NuGridContext';
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 const Combo = ({ data, value, event = '', row = '', column = '', location = '', values = [] }) => {
+  // Check if we're inside a NuGrid cell
+  const nuGridContext = useNuGridContext();
+  const isInNuGrid = !!nuGridContext;
   const parentSize = JSON.parse(localStorage.getItem(extractStringUntilLastPeriod(data?.ID)));
 
   const inputRef = useRef();
@@ -37,6 +41,10 @@ const Combo = ({ data, value, event = '', row = '', column = '', location = '',
 
   // Initialize with selected item, or Text property, or first item
   const initialSelected = () => {
+    // When in NuGrid, use cellValue from context
+    if (isInNuGrid && nuGridContext) {
+      return nuGridContext.cellValue || '';
+    }
     const index = SelItems?.findIndex((element) => element == 1);
     if (index !== undefined && index !== -1 && Items) {
       return Items[index];
@@ -45,11 +53,21 @@ const Combo = ({ data, value, event = '', row = '', column = '', location = '',
     return data?.Properties?.Text || (Items?.[0]) || '';
   };
   const [comboInput, setComboInput] = useState(initialSelected);
+
+  // Update combo input when NuGrid cellValue changes
+  useEffect(() => {
+    if (isInNuGrid && nuGridContext) {
+      setComboInput(nuGridContext.cellValue || '');
+    }
+  }, [isInNuGrid, nuGridContext?.cellValue]);
   const [position, setPosition] = useState({ top: Posn && Posn[0], left: Posn && Posn[1] });
 
   const [parentOldDimensions, setParentOldDimensions] = useState(parentSize?.Size);
 
+  // Sync selection from SelItems - skip when in NuGrid (values come from grid context)
   useEffect(() => {
+    if (isInNuGrid) return;
+
     const index = SelItems?.findIndex((element) => element == 1);
     if (index == undefined || index == -1) {
       return;
@@ -254,14 +272,20 @@ const Combo = ({ data, value, event = '', row = '', column = '', location = '',
     setIsOpen(false);
     setHighlightedIndex(-1);
 
+    // When in NuGrid, report change via context callback
+    if (isInNuGrid && nuGridContext) {
+      nuGridContext.onCellChange(item);
+      return;
+    }
+
     // ALWAYS fire Select event, even when reselecting same value
     if (location === 'inGrid') {
       handleSelectEvent(index);
       handleCellChangeEvent(item);
     } else {
       handleSelectEvent(index);
     }
-  }, [location, handleSelectEvent, handleCellChangeEvent]);
+  }, [location, handleSelectEvent, handleCellChangeEvent, isInNuGrid, nuGridContext]);
 
   // Calculate dropdown position (fixed positioning for grid context)
   const getDropdownPosition = useCallback(() => {
@@ -279,7 +303,7 @@ const Combo = ({ data, value, event = '', row = '', column = '', location = '',
     // Determine if dropdown should appear above or below
     const showAbove = spaceBelow < dropdownMaxHeight && spaceAbove > spaceBelow;
 
-    if (location === 'inGrid') {
+    if (location === 'inGrid' || isInNuGrid) {
       // Fixed positioning for grid context to escape cell boundaries
       return {
         position: 'fixed',
@@ -511,11 +535,17 @@ const Combo = ({ data, value, event = '', row = '', column = '', location = '',
   return (
     <div
       style={{
-        ...styles,
+        ...(isInNuGrid ? {} : styles),
         borderColor: '#ccc',
         display: Visible == 0 ? 'none' : 'block',
-        top: Posn?.[0],
-        left: Posn?.[1],
+        ...(isInNuGrid ? {
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+        } : {
+          top: Posn?.[0],
+          left: Posn?.[1],
+        }),
       }}
       onMouseDown={(e) => {
         e.stopPropagation();