@rufous/ui 0.2.86 → 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 });
@@ -4919,6 +4959,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
   const [focusedIdx, setFocusedIdx] = (0, import_react24.useState)(-1);
   const [popupStyle, setPopupStyle] = (0, import_react24.useState)({});
   const containerRef = (0, import_react24.useRef)(null);
+  const popupRef = (0, import_react24.useRef)(null);
   const listRef = (0, import_react24.useRef)(null);
   const inputId = (0, import_react24.useRef)(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
@@ -4957,7 +4998,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
   (0, import_react24.useEffect)(() => {
     if (!open) return;
     const handleOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      if (containerRef.current && !containerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
         closePopup();
       }
     };
@@ -4970,14 +5011,14 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  const selectOption = (0, import_react24.useCallback)((opt) => {
+  const selectOption = (0, import_react24.useCallback)((opt, event) => {
     if (opt.disabled) return;
     if (multiple) {
       const already = isSelected(opt.value);
       const next = already ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
-      onChange?.(next);
+      onChange?.(event, next);
     } else {
-      onChange?.(opt.value);
+      onChange?.(event, opt.value);
       closePopup();
     }
   }, [multiple, isSelected, selectedValues, onChange, closePopup]);
@@ -5013,7 +5054,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
       }
       if (focusedIdx >= 0) {
         const opt = selectableOpts[focusedIdx];
-        if (opt) selectOption(opt);
+        if (opt) selectOption(opt, e);
       }
     } else if (e.key === "Escape") {
       closePopup();
@@ -5089,7 +5130,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
     ),
     helperText && /* @__PURE__ */ import_react24.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
     open && !disabled && import_react_dom5.default.createPortal(
-      /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ import_react24.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+      /* @__PURE__ */ import_react24.default.createElement("div", { ref: popupRef, className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ import_react24.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
         const selected = isSelected(opt.value);
         const focused = focusedIdx === idx;
         return /* @__PURE__ */ import_react24.default.createElement(
@@ -5109,7 +5150,7 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
             onMouseEnter: () => setFocusedIdx(idx),
             onMouseLeave: () => setFocusedIdx(-1),
             onMouseDown: (e) => e.preventDefault(),
-            onClick: () => selectOption(opt)
+            onClick: (e) => selectOption(opt, e)
           },
           /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
           /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(CheckIcon2, null))

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;
@@ -838,7 +848,7 @@ type SelectOption = {
 interface SelectProps {
     options: SelectOption[] | string[];
     value?: string | number | null;
-    onChange?: (value: string | number | null) => void;
+    onChange?: (event: React__default.SyntheticEvent, value: string | number | (string | number)[] | null) => void;
     label?: string;
     placeholder?: string;
     variant?: "outlined" | "filled" | "standard";

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;
@@ -838,7 +848,7 @@ type SelectOption = {
 interface SelectProps {
     options: SelectOption[] | string[];
     value?: string | number | null;
-    onChange?: (value: string | number | null) => void;
+    onChange?: (event: React__default.SyntheticEvent, value: string | number | (string | number)[] | null) => void;
     label?: string;
     placeholder?: string;
     variant?: "outlined" | "filled" | "standard";

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 });
@@ -4794,6 +4834,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
   const [focusedIdx, setFocusedIdx] = useState10(-1);
   const [popupStyle, setPopupStyle] = useState10({});
   const containerRef = useRef10(null);
+  const popupRef = useRef10(null);
   const listRef = useRef10(null);
   const inputId = useRef10(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
@@ -4832,7 +4873,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
   useEffect10(() => {
     if (!open) return;
     const handleOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      if (containerRef.current && !containerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
         closePopup();
       }
     };
@@ -4845,14 +4886,14 @@ var Select = React76.forwardRef(function Select2(props, ref) {
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  const selectOption = useCallback4((opt) => {
+  const selectOption = useCallback4((opt, event) => {
     if (opt.disabled) return;
     if (multiple) {
       const already = isSelected(opt.value);
       const next = already ? selectedValues.filter((v) => v !== opt.value) : [...selectedValues, opt.value];
-      onChange?.(next);
+      onChange?.(event, next);
     } else {
-      onChange?.(opt.value);
+      onChange?.(event, opt.value);
       closePopup();
     }
   }, [multiple, isSelected, selectedValues, onChange, closePopup]);
@@ -4888,7 +4929,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
       }
       if (focusedIdx >= 0) {
         const opt = selectableOpts[focusedIdx];
-        if (opt) selectOption(opt);
+        if (opt) selectOption(opt, e);
       }
     } else if (e.key === "Escape") {
       closePopup();
@@ -4964,7 +5005,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
     ),
     helperText && /* @__PURE__ */ React76.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
     open && !disabled && ReactDOM4.createPortal(
-      /* @__PURE__ */ React76.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React76.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+      /* @__PURE__ */ React76.createElement("div", { ref: popupRef, className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React76.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
         const selected = isSelected(opt.value);
         const focused = focusedIdx === idx;
         return /* @__PURE__ */ React76.createElement(
@@ -4984,7 +5025,7 @@ var Select = React76.forwardRef(function Select2(props, ref) {
             onMouseEnter: () => setFocusedIdx(idx),
             onMouseLeave: () => setFocusedIdx(-1),
             onMouseDown: (e) => e.preventDefault(),
-            onClick: () => selectOption(opt)
+            onClick: (e) => selectOption(opt, e)
           },
           /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-label" }, opt.label),
           /* @__PURE__ */ React76.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(CheckIcon2, null))

package/package.json

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