@rufous/ui 0.2.87 → 0.2.88

package/dist/main.cjs

@@ -4308,6 +4308,7 @@ function DataGrid({
   onCellDoubleClick
 }) {
   const sxClass = useSx(sx);
+  const [editingCell, setEditingCell] = (0, import_react23.useState)(null);
   const [columnOverrides, setColumnOverrides] = (0, import_react23.useState)({});
   const resolvedColumns = (0, import_react23.useMemo)(() => {
     return initialColumnsProp.map((col) => {
@@ -4438,8 +4439,8 @@ function DataGrid({
       );
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
-        const rawVal = String(item[f.column]);
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
+        const rawVal = String(item[f.column]);
         if (col?.type === "number") {
           const itemNum = Number(rawVal);
           const filterNum = Number(f.value);
@@ -4465,23 +4466,30 @@ function DataGrid({
           }
         }
         if (col?.type === "date") {
+          const raw = item[f.column];
+          const resolvedDate = col.valueGetter ? col.valueGetter({ value: raw, row: item, field: f.column }) : raw;
+          const isEmpty = resolvedDate == null || resolvedDate === "" || resolvedDate === "undefined" || resolvedDate === "null";
+          if (f.operator === "is empty") return isEmpty;
+          if (f.operator === "is not empty") return !isEmpty;
+          if (isEmpty) return false;
+          const itemTs = new Date(resolvedDate);
+          itemTs.setHours(0, 0, 0, 0);
+          const filterTs = new Date(f.value);
+          filterTs.setHours(0, 0, 0, 0);
+          if (isNaN(itemTs.getTime()) || isNaN(filterTs.getTime())) return false;
           switch (f.operator) {
             case "is":
-              return rawVal === f.value;
+              return itemTs.getTime() === filterTs.getTime();
             case "is not":
-              return rawVal !== f.value;
+              return itemTs.getTime() !== filterTs.getTime();
             case "is after":
-              return rawVal > f.value;
+              return itemTs.getTime() > filterTs.getTime();
             case "is on or after":
-              return rawVal >= f.value;
+              return itemTs.getTime() >= filterTs.getTime();
             case "is before":
-              return rawVal < f.value;
+              return itemTs.getTime() < filterTs.getTime();
             case "is on or before":
-              return rawVal <= f.value;
-            case "is empty":
-              return !rawVal;
-            case "is not empty":
-              return !!rawVal;
+              return itemTs.getTime() <= filterTs.getTime();
             default:
               return true;
           }
@@ -4694,14 +4702,46 @@ function DataGrid({
       "td",
       {
         key: `${item.id}-${colField}`,
-        className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.cellClassName || ""}`,
+        className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""}${col.editable ? " dg-td--editable" : ""} ${col.cellClassName || ""}`,
         style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex },
-        onDoubleClick: () => onCellDoubleClick?.({ row: item, field: colField, value: item[col.field || ""] })
+        onDoubleClick: () => onCellDoubleClick?.({ row: item, field: colField, value: item[col.field || ""] }),
+        onClick: col.editable ? () => {
+          const field = String(col.field);
+          const rawValue = item[col.field || ""];
+          const value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
+          setEditingCell({ rowId: item.id, field, value });
+        } : void 0
       },
       (() => {
         const field = String(col.field);
         const rawValue = item[col.field || ""];
         let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
+        if (col.editable && editingCell?.rowId === item.id && editingCell?.field === field) {
+          const inputType = col.type === "number" ? "number" : col.type === "date" ? "date" : "text";
+          const commit = (finalValue) => {
+            setEditingCell(null);
+            col.onEnter?.({ value: finalValue, row: item, field });
+          };
+          return /* @__PURE__ */ import_react23.default.createElement(
+            "input",
+            {
+              className: "dg-cell-editor",
+              type: inputType,
+              autoFocus: true,
+              defaultValue: editingCell.value ?? "",
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") commit(e.target.value);
+                if (e.key === "Escape") setEditingCell(null);
+              },
+              onBlur: (e) => {
+                const finalValue = e.target.value;
+                setEditingCell(null);
+                col.onBlur?.({ value: finalValue, row: item, field });
+              }
+            }
+          );
+        }
         const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
         if (col.renderCell) {
           return col.renderCell({ value, row: item, field });

package/dist/main.css

@@ -531,6 +531,25 @@
   white-space: nowrap;
   background: inherit;
 }
+.dg-td--editable {
+  cursor: pointer;
+}
+.dg-td--editable:hover {
+  outline: 1px dashed var(--border-color);
+  outline-offset: -2px;
+}
+.dg-cell-editor {
+  width: 100%;
+  padding: 4px 6px;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--text-color);
+  background: var(--surface-color);
+  border: 1.5px solid var(--primary-color, #f15b24);
+  border-radius: 4px;
+  outline: none;
+  box-sizing: border-box;
+}
 .dg-td.pinned-left {
   position: sticky;
   left: 0;

package/dist/main.d.cts

@@ -796,6 +796,16 @@ interface Column<T> {
     type?: 'string' | 'number' | 'date' | 'boolean' | 'actions' | 'status';
     statusOptions?: string[];
     editable?: boolean;
+    onEnter?: (params: {
+        value: any;
+        row: T;
+        field: string;
+    }) => void;
+    onBlur?: (params: {
+        value: any;
+        row: T;
+        field: string;
+    }) => void;
     headerClassName?: string;
     cellClassName?: string;
     hideable?: boolean;

package/dist/main.d.ts

@@ -796,6 +796,16 @@ interface Column<T> {
     type?: 'string' | 'number' | 'date' | 'boolean' | 'actions' | 'status';
     statusOptions?: string[];
     editable?: boolean;
+    onEnter?: (params: {
+        value: any;
+        row: T;
+        field: string;
+    }) => void;
+    onBlur?: (params: {
+        value: any;
+        row: T;
+        field: string;
+    }) => void;
     headerClassName?: string;
     cellClassName?: string;
     hideable?: boolean;

package/dist/main.js

@@ -4178,6 +4178,7 @@ function DataGrid({
   onCellDoubleClick
 }) {
   const sxClass = useSx(sx);
+  const [editingCell, setEditingCell] = useState9(null);
   const [columnOverrides, setColumnOverrides] = useState9({});
   const resolvedColumns = useMemo2(() => {
     return initialColumnsProp.map((col) => {
@@ -4308,8 +4309,8 @@ function DataGrid({
       );
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
-        const rawVal = String(item[f.column]);
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
+        const rawVal = String(item[f.column]);
         if (col?.type === "number") {
           const itemNum = Number(rawVal);
           const filterNum = Number(f.value);
@@ -4335,23 +4336,30 @@ function DataGrid({
           }
         }
         if (col?.type === "date") {
+          const raw = item[f.column];
+          const resolvedDate = col.valueGetter ? col.valueGetter({ value: raw, row: item, field: f.column }) : raw;
+          const isEmpty = resolvedDate == null || resolvedDate === "" || resolvedDate === "undefined" || resolvedDate === "null";
+          if (f.operator === "is empty") return isEmpty;
+          if (f.operator === "is not empty") return !isEmpty;
+          if (isEmpty) return false;
+          const itemTs = new Date(resolvedDate);
+          itemTs.setHours(0, 0, 0, 0);
+          const filterTs = new Date(f.value);
+          filterTs.setHours(0, 0, 0, 0);
+          if (isNaN(itemTs.getTime()) || isNaN(filterTs.getTime())) return false;
           switch (f.operator) {
             case "is":
-              return rawVal === f.value;
+              return itemTs.getTime() === filterTs.getTime();
             case "is not":
-              return rawVal !== f.value;
+              return itemTs.getTime() !== filterTs.getTime();
             case "is after":
-              return rawVal > f.value;
+              return itemTs.getTime() > filterTs.getTime();
             case "is on or after":
-              return rawVal >= f.value;
+              return itemTs.getTime() >= filterTs.getTime();
             case "is before":
-              return rawVal < f.value;
+              return itemTs.getTime() < filterTs.getTime();
             case "is on or before":
-              return rawVal <= f.value;
-            case "is empty":
-              return !rawVal;
-            case "is not empty":
-              return !!rawVal;
+              return itemTs.getTime() <= filterTs.getTime();
             default:
               return true;
           }
@@ -4564,14 +4572,46 @@ function DataGrid({
       "td",
       {
         key: `${item.id}-${colField}`,
-        className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.cellClassName || ""}`,
+        className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""}${col.editable ? " dg-td--editable" : ""} ${col.cellClassName || ""}`,
         style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex },
-        onDoubleClick: () => onCellDoubleClick?.({ row: item, field: colField, value: item[col.field || ""] })
+        onDoubleClick: () => onCellDoubleClick?.({ row: item, field: colField, value: item[col.field || ""] }),
+        onClick: col.editable ? () => {
+          const field = String(col.field);
+          const rawValue = item[col.field || ""];
+          const value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
+          setEditingCell({ rowId: item.id, field, value });
+        } : void 0
       },
       (() => {
         const field = String(col.field);
         const rawValue = item[col.field || ""];
         let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
+        if (col.editable && editingCell?.rowId === item.id && editingCell?.field === field) {
+          const inputType = col.type === "number" ? "number" : col.type === "date" ? "date" : "text";
+          const commit = (finalValue) => {
+            setEditingCell(null);
+            col.onEnter?.({ value: finalValue, row: item, field });
+          };
+          return /* @__PURE__ */ React75.createElement(
+            "input",
+            {
+              className: "dg-cell-editor",
+              type: inputType,
+              autoFocus: true,
+              defaultValue: editingCell.value ?? "",
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") commit(e.target.value);
+                if (e.key === "Escape") setEditingCell(null);
+              },
+              onBlur: (e) => {
+                const finalValue = e.target.value;
+                setEditingCell(null);
+                col.onBlur?.({ value: finalValue, row: item, field });
+              }
+            }
+          );
+        }
         const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
         if (col.renderCell) {
           return col.renderCell({ value, row: item, field });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.87",
+  "version": "0.2.88",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",