react-open-source-grid 1.7.23 → 1.7.25

package/dist/lib/index.js

@@ -2410,6 +2410,7 @@ var GridBody = ({
     }
     const isSelected = selectedRows.has(row.id);
     const isFocused = (focusState == null ? void 0 : focusState.rowIndex) === rowIndex;
+    const isRowEditing = editState.rowId === row.id;
     const isLoadingRow = row._loading === true;
     const isDragEnabled = (dragRowConfig == null ? void 0 : dragRowConfig.enabled) && !isLoadingRow;
     const showDragHandle = isDragEnabled && dragRowConfig.showDragHandle !== false;
@@ -2429,7 +2430,8 @@ var GridBody = ({
           borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)",
           backgroundColor: isLoadingRow ? "var(--grid-bg-alt)" : isSelected ? "var(--grid-selected)" : isFocused ? "var(--grid-active)" : "var(--grid-bg)",
           cursor: isLoadingRow ? "wait" : isDragEnabled ? "grab" : "pointer",
-          transition: "background-color 0.15s ease"
+          transition: "background-color 0.15s ease",
+          ...isRowEditing ? { position: "relative", zIndex: 100 } : {}
         },
         onMouseEnter: (e) => !isSelected && !isLoadingRow && (e.currentTarget.style.backgroundColor = "var(--grid-hover)"),
         onMouseLeave: (e) => !isSelected && !isLoadingRow && (e.currentTarget.style.backgroundColor = "var(--grid-bg)"),
@@ -2515,7 +2517,8 @@ var GridBody = ({
               flexShrink: 0,
               outline: isCellFocused ? "2px solid var(--grid-primary)" : "none",
               outlineOffset: "-2px",
-              color: "var(--grid-text)"
+              color: "var(--grid-text)",
+              ...isEditing ? { position: "relative", zIndex: 1e3 } : {}
             },
             onDoubleClick: () => handleCellDoubleClick(row, field, cellValue),
             onContextMenu: (e) => onContextMenu == null ? void 0 : onContextMenu(e, row, column, rowIndex, columnIndex),
@@ -3854,6 +3857,7 @@ var ExportMenu = ({
 
 // src/components/DataGrid/ColumnFilters.tsx
 import React15, { useState as useState8, useEffect as useEffect4 } from "react";
+import ReactDOM from "react-dom";
 
 // src/components/DataGrid/AdvancedFilterBuilder.tsx
 import React14, { useState as useState7 } from "react";
@@ -4172,7 +4176,7 @@ var AdvancedFilterBuilder = ({
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1001,
+        zIndex: 10001,
         display: "flex",
         flexDirection: "column",
         overflowY: "auto"
@@ -4428,7 +4432,7 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "var(--grid-border-width, 1px) solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -4550,7 +4554,7 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -4666,7 +4670,7 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -4791,7 +4795,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3,
+        zIndex: 1e4,
         display: "flex",
         flexDirection: "column"
       },
@@ -5147,8 +5151,8 @@ var ColumnFilters = ({
           )
         )
       ),
-      openFilterMenu === field && renderFilterMenu(column),
-      advancedFilterField === field && renderAdvancedFilterMenu(column)
+      openFilterMenu === field && ReactDOM.createPortal(renderFilterMenu(column), document.body),
+      advancedFilterField === field && ReactDOM.createPortal(renderAdvancedFilterMenu(column), document.body)
     );
   })));
 };
@@ -6313,7 +6317,7 @@ var useTooltip = ({ config = {} } = {}) => {
     const target = event.currentTarget;
     const rect = target.getBoundingClientRect();
     const tooltipContent = typeof content === "string" ? { content } : content;
-    showTimeoutRef.current = setTimeout(() => {
+    showTimeoutRef.current = window.setTimeout(() => {
       if (isHoveringRef.current) {
         setTooltipState({
           isVisible: true,
@@ -6330,7 +6334,7 @@ var useTooltip = ({ config = {} } = {}) => {
     clearTimeouts();
     isHoveringRef.current = false;
     if (hideDelay > 0) {
-      hideTimeoutRef.current = setTimeout(() => {
+      hideTimeoutRef.current = window.setTimeout(() => {
         setTooltipState((prev) => ({
           ...prev,
           isVisible: false
@@ -7365,7 +7369,7 @@ var useScreenReaderAnnouncements = () => {
       clearTimeout(timeoutRef.current);
     }
     if (delay > 0) {
-      timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = window.setTimeout(() => {
         announcementRef.current = message;
       }, delay);
     } else {
@@ -9575,60 +9579,6 @@ var FacetedSearch = ({
 
 // src/components/DataGrid/FilteredSearchBar.tsx
 import React24, { useState as useState16, useRef as useRef11, useEffect as useEffect10 } from "react";
-
-// node_modules/uuid/dist/esm-node/rng.js
-import crypto from "crypto";
-var rnds8Pool = new Uint8Array(256);
-var poolPtr = rnds8Pool.length;
-function rng() {
-  if (poolPtr > rnds8Pool.length - 16) {
-    crypto.randomFillSync(rnds8Pool);
-    poolPtr = 0;
-  }
-  return rnds8Pool.slice(poolPtr, poolPtr += 16);
-}
-
-// node_modules/uuid/dist/esm-node/regex.js
-var regex_default = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
-
-// node_modules/uuid/dist/esm-node/validate.js
-function validate(uuid) {
-  return typeof uuid === "string" && regex_default.test(uuid);
-}
-var validate_default = validate;
-
-// node_modules/uuid/dist/esm-node/stringify.js
-var byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 256).toString(16).substr(1));
-}
-function stringify(arr, offset = 0) {
-  const uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
-  if (!validate_default(uuid)) {
-    throw TypeError("Stringified UUID is invalid");
-  }
-  return uuid;
-}
-var stringify_default = stringify;
-
-// node_modules/uuid/dist/esm-node/v4.js
-function v4(options, buf, offset) {
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)();
-  rnds[6] = rnds[6] & 15 | 64;
-  rnds[8] = rnds[8] & 63 | 128;
-  if (buf) {
-    offset = offset || 0;
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-    return buf;
-  }
-  return stringify_default(rnds);
-}
-var v4_default = v4;
-
-// src/components/DataGrid/FilteredSearchBar.tsx
 var FilteredSearchBar = ({
   filters,
   onSearch,
@@ -9664,7 +9614,7 @@ var FilteredSearchBar = ({
     const filter = filters.find((f) => f.field === field);
     if (!filter || tokens.length >= maxTokens) return;
     const newToken = {
-      id: `${field}-${v4_default()}`,
+      id: `${field}-${crypto.randomUUID()}`,
       field,
       label: filter.label,
       value,
@@ -11875,7 +11825,7 @@ function useMarketData(options) {
           );
           console.log(`Reconnecting in ${delay}ms... (attempt ${reconnectCountRef.current + 1})`);
           setConnectionState("reconnecting");
-          reconnectTimeoutRef.current = setTimeout(() => {
+          reconnectTimeoutRef.current = window.setTimeout(() => {
             reconnectCountRef.current++;
             reconnectDelayRef.current *= 2;
             setConnectionState("reconnecting");
@@ -12166,7 +12116,7 @@ var WebSocketMockFeed = class {
     console.log(`Mock feed started with ${this.config.symbols.length} symbols`);
     this.config.symbols.forEach((symbol) => {
       const interval = 1e3 / this.config.updateFrequency;
-      const intervalId = setInterval(() => {
+      const intervalId = window.setInterval(() => {
         this.updateSymbol(symbol);
       }, interval);
       this.updateIntervals.set(symbol, intervalId);
@@ -12667,20 +12617,20 @@ function usePopupPosition(anchorRef, popupRef, isOpen, placement = "auto") {
     }
     switch (actualPlacement) {
       case "bottom":
-        top = anchorRect.bottom + window.scrollY;
-        left = anchorRect.left + window.scrollX;
+        top = anchorRect.bottom;
+        left = anchorRect.left;
         break;
       case "top":
-        top = anchorRect.top + window.scrollY - popupRect.height;
-        left = anchorRect.left + window.scrollX;
+        top = anchorRect.top - popupRect.height;
+        left = anchorRect.left;
         break;
       case "right":
-        top = anchorRect.top + window.scrollY;
-        left = anchorRect.right + window.scrollX;
+        top = anchorRect.top;
+        left = anchorRect.right;
         break;
       case "left":
-        top = anchorRect.top + window.scrollY;
-        left = anchorRect.left + window.scrollX - popupRect.width;
+        top = anchorRect.top;
+        left = anchorRect.left - popupRect.width;
         break;
     }
     const margin = 8;
@@ -12690,11 +12640,11 @@ function usePopupPosition(anchorRef, popupRef, isOpen, placement = "auto") {
     if (left < margin) {
       left = margin;
     }
-    if (top + popupRect.height > viewportHeight + window.scrollY) {
-      top = viewportHeight + window.scrollY - popupRect.height - margin;
+    if (top + popupRect.height > viewportHeight) {
+      top = viewportHeight - popupRect.height - margin;
     }
-    if (top < window.scrollY + margin) {
-      top = window.scrollY + margin;
+    if (top < margin) {
+      top = margin;
     }
     popup.style.top = `${top}px`;
     popup.style.left = `${left}px`;
@@ -12711,7 +12661,7 @@ function debounce2(func, wait) {
     if (timeout) {
       clearTimeout(timeout);
     }
-    timeout = setTimeout(later, wait);
+    timeout = window.setTimeout(later, wait);
   };
 }
 function formatNumber(value, decimals = 0, thousandsSeparator = ",", decimalSeparator = ".") {
@@ -12739,6 +12689,7 @@ function filterOptions(options, searchQuery) {
 
 // src/editors/RichSelectEditor.tsx
 import React32, { useState as useState21, useRef as useRef16, useEffect as useEffect15, useMemo as useMemo9 } from "react";
+import ReactDOM2 from "react-dom";
 function RichSelectEditor(props) {
   const {
     value,
@@ -12895,31 +12846,34 @@ function RichSelectEditor(props) {
       },
       "\xD7"
     ), /* @__PURE__ */ React32.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC"))),
-    isOpen && /* @__PURE__ */ React32.createElement(
-      "div",
-      {
-        ref: dropdownRef,
-        id: "richselect-dropdown",
-        className: "editor-dropdown",
-        role: "listbox",
-        style: { maxHeight: maxDropdownHeight }
-      },
-      filteredOptions.length === 0 ? /* @__PURE__ */ React32.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ React32.createElement(
+    isOpen && ReactDOM2.createPortal(
+      /* @__PURE__ */ React32.createElement(
         "div",
         {
-          key: option.value,
-          ref: (el) => {
-            optionRefs.current[index] = el;
-          },
-          className: `editor-dropdown-option ${option.value === value ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
-          role: "option",
-          "aria-selected": option.value === value,
-          "aria-disabled": option.disabled,
-          onClick: () => handleSelectOption(option),
-          onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+          ref: dropdownRef,
+          id: "richselect-dropdown",
+          className: "editor-dropdown",
+          role: "listbox",
+          style: { maxHeight: maxDropdownHeight }
         },
-        renderLabel(option)
-      ))
+        filteredOptions.length === 0 ? /* @__PURE__ */ React32.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ React32.createElement(
+          "div",
+          {
+            key: option.value,
+            ref: (el) => {
+              optionRefs.current[index] = el;
+            },
+            className: `editor-dropdown-option ${option.value === value ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+            role: "option",
+            "aria-selected": option.value === value,
+            "aria-disabled": option.disabled,
+            onClick: () => handleSelectOption(option),
+            onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+          },
+          renderLabel(option)
+        ))
+      ),
+      document.body
     )
   );
 }
@@ -12927,6 +12881,7 @@ RichSelectEditor.displayName = "RichSelectEditor";
 
 // src/editors/DateEditor.tsx
 import React33, { useState as useState22, useRef as useRef17, useMemo as useMemo10 } from "react";
+import ReactDOM3 from "react-dom";
 function DateEditor(props) {
   const {
     value,
@@ -13046,53 +13001,56 @@ function DateEditor(props) {
         autoComplete: "off"
       }
     ), /* @__PURE__ */ React33.createElement("span", { className: "editor-calendar-icon", "aria-hidden": "true" }, "\u{1F4C5}")),
-    isOpen && /* @__PURE__ */ React33.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ React33.createElement(
-      "button",
-      {
-        type: "button",
-        className: "editor-calendar-nav",
-        onClick: handlePrevMonth,
-        "aria-label": "Previous month"
-      },
-      "\u2039"
-    ), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
-      month: "long",
-      year: "numeric"
-    })), /* @__PURE__ */ React33.createElement(
-      "button",
-      {
-        type: "button",
-        className: "editor-calendar-nav",
-        onClick: handleNextMonth,
-        "aria-label": "Next month"
-      },
-      "\u203A"
-    )), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React33.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ React33.createElement(
-      "button",
-      {
-        key: index,
-        type: "button",
-        className: `editor-calendar-day ${day.className}`,
-        onClick: () => day.date && handleSelectDate(day.date),
-        disabled: day.disabled,
-        "aria-label": day.date ? day.date.toDateString() : ""
-      },
-      day.label
-    ))), showTime && /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ React33.createElement(
-      "input",
-      {
-        type: "time",
-        className: "editor-time-input",
-        value: parsedValue ? `${String(parsedValue.getHours()).padStart(2, "0")}:${String(
-          parsedValue.getMinutes()
-        ).padStart(2, "0")}` : "00:00",
-        onChange: (e) => {
-          const [hours, minutes] = e.target.value.split(":").map(Number);
-          handleTimeChange(hours, minutes);
+    isOpen && ReactDOM3.createPortal(
+      /* @__PURE__ */ React33.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ React33.createElement(
+        "button",
+        {
+          type: "button",
+          className: "editor-calendar-nav",
+          onClick: handlePrevMonth,
+          "aria-label": "Previous month"
         },
-        "aria-label": "Time input"
-      }
-    )))
+        "\u2039"
+      ), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
+        month: "long",
+        year: "numeric"
+      })), /* @__PURE__ */ React33.createElement(
+        "button",
+        {
+          type: "button",
+          className: "editor-calendar-nav",
+          onClick: handleNextMonth,
+          "aria-label": "Next month"
+        },
+        "\u203A"
+      )), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React33.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ React33.createElement(
+        "button",
+        {
+          key: index,
+          type: "button",
+          className: `editor-calendar-day ${day.className}`,
+          onClick: () => day.date && handleSelectDate(day.date),
+          disabled: day.disabled,
+          "aria-label": day.date ? day.date.toDateString() : ""
+        },
+        day.label
+      ))), showTime && /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ React33.createElement(
+        "input",
+        {
+          type: "time",
+          className: "editor-time-input",
+          value: parsedValue ? `${String(parsedValue.getHours()).padStart(2, "0")}:${String(
+            parsedValue.getMinutes()
+          ).padStart(2, "0")}` : "00:00",
+          onChange: (e) => {
+            const [hours, minutes] = e.target.value.split(":").map(Number);
+            handleTimeChange(hours, minutes);
+          },
+          "aria-label": "Time input"
+        }
+      ))),
+      document.body
+    )
   );
 }
 DateEditor.displayName = "DateEditor";
@@ -13349,6 +13307,7 @@ NumericEditor.displayName = "NumericEditor";
 
 // src/editors/MultiSelectEditor.tsx
 import React35, { useState as useState24, useRef as useRef18, useMemo as useMemo11 } from "react";
+import ReactDOM4 from "react-dom";
 function MultiSelectEditor(props) {
   const {
     value = [],
@@ -13516,45 +13475,48 @@ function MultiSelectEditor(props) {
       ),
       /* @__PURE__ */ React35.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC")
     ),
-    isOpen && /* @__PURE__ */ React35.createElement(
-      "div",
-      {
-        ref: dropdownRef,
-        id: "multiselect-dropdown",
-        className: "editor-dropdown",
-        role: "listbox",
-        "aria-multiselectable": "true",
-        style: { maxHeight: maxDropdownHeight }
-      },
-      filteredOptions.length === 0 ? /* @__PURE__ */ React35.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
-        const isSelected = selectedValues.includes(option.value);
-        return /* @__PURE__ */ React35.createElement(
-          "div",
-          {
-            key: option.value,
-            className: `editor-dropdown-option editor-multiselect-option ${isSelected ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
-            role: "option",
-            "aria-selected": isSelected,
-            "aria-disabled": option.disabled,
-            onClick: () => handleToggleOption(option),
-            onMouseEnter: () => !option.disabled && setFocusedIndex(index)
-          },
-          /* @__PURE__ */ React35.createElement(
-            "input",
+    isOpen && ReactDOM4.createPortal(
+      /* @__PURE__ */ React35.createElement(
+        "div",
+        {
+          ref: dropdownRef,
+          id: "multiselect-dropdown",
+          className: "editor-dropdown",
+          role: "listbox",
+          "aria-multiselectable": "true",
+          style: { maxHeight: maxDropdownHeight }
+        },
+        filteredOptions.length === 0 ? /* @__PURE__ */ React35.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
+          const isSelected = selectedValues.includes(option.value);
+          return /* @__PURE__ */ React35.createElement(
+            "div",
             {
-              type: "checkbox",
-              className: "editor-multiselect-checkbox",
-              checked: isSelected,
-              onChange: () => {
-              },
-              disabled: option.disabled,
-              tabIndex: -1,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ React35.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React35.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React35.createElement("span", { className: "editor-option-label" }, option.label))
-        );
-      })
+              key: option.value,
+              className: `editor-dropdown-option editor-multiselect-option ${isSelected ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": option.disabled,
+              onClick: () => handleToggleOption(option),
+              onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+            },
+            /* @__PURE__ */ React35.createElement(
+              "input",
+              {
+                type: "checkbox",
+                className: "editor-multiselect-checkbox",
+                checked: isSelected,
+                onChange: () => {
+                },
+                disabled: option.disabled,
+                tabIndex: -1,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ React35.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React35.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React35.createElement("span", { className: "editor-option-label" }, option.label))
+          );
+        })
+      ),
+      document.body
     )
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-open-source-grid",
   "private": false,
-  "version": "1.7.23",
+  "version": "1.7.25",
   "type": "module",
   "description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, integrated charts with context menu, and more",
   "main": "./dist/lib/index.cjs",
@@ -12,9 +12,7 @@
     ".": {
       "types": "./dist/lib/index.d.ts",
       "import": "./dist/lib/index.js",
-      "require": "./dist/lib/index.cjs",
-      "browser": "./dist/lib/index.js",
-      "default": "./dist/lib/index.js"
+      "require": "./dist/lib/index.cjs"
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",
@@ -47,66 +45,39 @@
   },
   "homepage": "https://bhushanpoojary.github.io/react-open-source-datagrid",
   "scripts": {
-    "dev": "vite",
     "build:lib": "tsup src/index.ts --format cjs,esm --out-dir dist/lib --clean && tsc -p tsconfig.build.json",
-    "build": "npm run build:lib && vite build",
+    "build": "npm run build:lib",
     "lint": "eslint .",
-    "preview": "vite preview",
     "postbuild": "node ./scripts/generate-types-entry.cjs",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d dist",
-    "test": "npm run test:playwright && npm run test:cypress",
-    "test:playwright": "playwright test",
-    "test:playwright:ui": "playwright test --ui",
-    "test:playwright:report": "playwright show-report",
-    "test:cypress": "start-server-and-test dev http://localhost:5173 cypress:run",
-    "test:cypress:open": "start-server-and-test dev http://localhost:5173 cypress:open",
-    "cypress:run": "cypress run",
-    "cypress:open": "cypress open",
-    "test:component": "cypress run --component",
-    "test:e2e": "start-server-and-test dev http://localhost:5173 cypress:run:e2e",
-    "cypress:run:e2e": "cypress run --e2e",
     "prepare": "npm run build:lib && node ./scripts/generate-types-entry.cjs && husky install"
   },
   "dependencies": {
-    "@types/react-syntax-highlighter": "^15.5.13",
     "exceljs": "^4.4.0",
     "html-to-image": "^1.11.11",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^7.9.6",
-    "react-syntax-highlighter": "^16.1.0",
     "recharts": "^2.10.3"
   },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@playwright/test": "^1.48.2",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^5.1.1",
-    "cypress": "^13.16.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "gh-pages": "^6.3.0",
     "globals": "^16.5.0",
     "husky": "^8.0.0",
     "lint-staged": "^16.2.7",
-    "start-server-and-test": "^2.1.3",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "npm:rolldown-vite@7.2.5"
+    "typescript-eslint": "^8.46.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "npm run lint"
     ]
-  },
-  "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
   }
 }

package/dist/404.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Redirecting...</title>
-    <script>
-      (function () {
-        var l = window.location;
-        // If we already came through the redirect, don't loop
-        if (l.search.indexOf('from404=1') !== -1) {
-          return;
-        }
-        var path = l.pathname + l.search + l.hash;
-        // Always go to root, encoding the original path
-        var redirectUrl = '/?from404=1&path=' + encodeURIComponent(path);
-        l.replace(redirectUrl);
-      })();
-    </script>
-  </head>
-  <body>
-    Redirecting...
-  </body>
-</html>

package/dist/CNAME

@@ -1 +0,0 @@
-reactdatagrid.dev

package/dist/assets/components/AccessibilityDemo.d.ts

@@ -1,8 +0,0 @@
-/**
- * AccessibilityDemo.tsx
- *
- * Comprehensive demonstration of DataGrid accessibility features
- * including keyboard navigation, ARIA support, and screen reader compatibility.
- */
-import React from 'react';
-export declare const AccessibilityDemo: React.FC;

package/dist/assets/components/ApiReferencePage.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ApiReferencePage: React.FC;

package/dist/assets/components/BenchmarkDemo.d.ts

@@ -1,2 +0,0 @@
-export declare const BenchmarkDemo: () => import("react/jsx-runtime").JSX.Element;
-export default BenchmarkDemo;