@vesture/react 0.1.0 → 0.1.1

package/dist/index.js

@@ -1082,22 +1082,31 @@ function Alert({
 import { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef3, useState as useState8 } from "react";
 
 // src/components/DataGrid/DataGrid.css.ts
-var body3 = "DataGrid_body__7xivx76";
-var cell = "DataGrid_cell__7xivx78";
-var checkboxCell = "DataGrid_checkboxCell__7xivx79";
-var container = "DataGrid_container__7xivx70";
-var emptyState = "DataGrid_emptyState__7xivx7a";
-var headerButton = "DataGrid_headerButton__7xivx73";
-var headerCell = "DataGrid_headerCell__7xivx72";
-var headerRow = "DataGrid_headerRow__7xivx71";
-var resizeHandle = "DataGrid_resizeHandle__7xivx75";
-var row = "DataGrid_row__7xivx77";
-var sortIcon = "DataGrid_sortIcon__7xivx74";
+var actionsCell = "DataGrid_actionsCell__7xivx7g";
+var body3 = "DataGrid_body__7xivx77";
+var cell = "DataGrid_cell__7xivx79";
+var checkboxCell = "DataGrid_checkboxCell__7xivx7a";
+var container = "DataGrid_container__7xivx71";
+var editInput = "DataGrid_editInput__7xivx7i";
+var emptyState = "DataGrid_emptyState__7xivx7b";
+var headerButton = "DataGrid_headerButton__7xivx74";
+var headerCell = "DataGrid_headerCell__7xivx73";
+var headerRow = "DataGrid_headerRow__7xivx72";
+var iconButton = "DataGrid_iconButton__7xivx7h";
+var pinnedCell = "DataGrid_pinnedCell__7xivx7c";
+var pinnedHeaderCell = "DataGrid_pinnedHeaderCell__7xivx7d";
+var pinnedLeftEdge = "DataGrid_pinnedLeftEdge__7xivx7e";
+var pinnedRightEdge = "DataGrid_pinnedRightEdge__7xivx7f";
+var resizeHandle = "DataGrid_resizeHandle__7xivx76";
+var row = "DataGrid_row__7xivx78";
+var sortIcon = "DataGrid_sortIcon__7xivx75";
+var srOnly2 = "DataGrid_srOnly__7xivx70";
 
 // src/components/DataGrid/DataGrid.tsx
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var DEFAULT_COLUMN_WIDTH = 160;
 var CHECKBOX_COLUMN_WIDTH = 44;
+var ACTIONS_COLUMN_WIDTH = 72;
 function compareValues(a, b) {
   if (typeof a === "number" && typeof b === "number") {
     return a - b;
@@ -1122,7 +1131,8 @@ function DataGrid({
   onSelectionChange,
   sort: controlledSort,
   onSortChange,
-  emptyMessage = "No data"
+  emptyMessage = "No data",
+  onRowEdit
 }) {
   const [uncontrolledSort, setUncontrolledSort] = useState8(null);
   const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState8(() => /* @__PURE__ */ new Set());
@@ -1130,6 +1140,9 @@ function DataGrid({
     () => Object.fromEntries(columns.map((c) => [c.key, c.width ?? DEFAULT_COLUMN_WIDTH]))
   );
   const [scrollTop, setScrollTop] = useState8(0);
+  const [editingRowId, setEditingRowId] = useState8(null);
+  const [editDraft, setEditDraft] = useState8({});
+  const editingEnabled = Boolean(onRowEdit);
   const sort = controlledSort !== void 0 ? controlledSort : uncontrolledSort;
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
   const setSort = (next) => {
@@ -1211,12 +1224,91 @@ function DataGrid({
     resizeState.current = null;
     event.currentTarget.releasePointerCapture(event.pointerId);
   }, []);
+  const widthOf = useCallback2(
+    (column) => columnWidths[column.key] ?? column.width ?? DEFAULT_COLUMN_WIDTH,
+    [columnWidths]
+  );
+  const layout = useMemo2(() => {
+    const leftPinned = columns.filter((c) => c.pinned === "left");
+    const rightPinned = columns.filter((c) => c.pinned === "right");
+    const middle = columns.filter((c) => !c.pinned);
+    const ordered = [...leftPinned, ...middle, ...rightPinned];
+    const leftOffsets = /* @__PURE__ */ new Map();
+    let leftAcc = selectable ? CHECKBOX_COLUMN_WIDTH : 0;
+    for (const column of leftPinned) {
+      leftOffsets.set(column.key, leftAcc);
+      leftAcc += widthOf(column);
+    }
+    const rightOffsets = /* @__PURE__ */ new Map();
+    let rightAcc = editingEnabled ? ACTIONS_COLUMN_WIDTH : 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      const column = rightPinned[i];
+      rightOffsets.set(column.key, rightAcc);
+      rightAcc += widthOf(column);
+    }
+    return {
+      ordered,
+      leftOffsets,
+      rightOffsets,
+      lastLeftKey: leftPinned[leftPinned.length - 1]?.key,
+      firstRightKey: rightPinned[0]?.key
+    };
+  }, [columns, selectable, editingEnabled, widthOf]);
+  const pinnedStyle = (column) => {
+    if (column.pinned === "left" && layout.leftOffsets.has(column.key)) {
+      return { left: layout.leftOffsets.get(column.key) };
+    }
+    if (column.pinned === "right" && layout.rightOffsets.has(column.key)) {
+      return { right: layout.rightOffsets.get(column.key) };
+    }
+    return void 0;
+  };
+  const pinnedClass = (column) => {
+    const classes = [];
+    if (column.pinned) {
+      classes.push(pinnedCell);
+      if (column.key === layout.lastLeftKey) classes.push(pinnedLeftEdge);
+      if (column.key === layout.firstRightKey) classes.push(pinnedRightEdge);
+    }
+    return classes.join(" ");
+  };
+  const headerPinnedClass = (column) => {
+    const classes = [];
+    if (column.pinned) {
+      classes.push(pinnedHeaderCell);
+      if (column.key === layout.lastLeftKey) classes.push(pinnedLeftEdge);
+      if (column.key === layout.firstRightKey) classes.push(pinnedRightEdge);
+    }
+    return classes.join(" ");
+  };
+  const startEditing = (rowData) => {
+    const id = getRowId(rowData);
+    const draft = {};
+    for (const column of columns) {
+      if (column.editable) {
+        draft[column.key] = String(getCellValue(column, rowData) ?? "");
+      }
+    }
+    setEditDraft(draft);
+    setEditingRowId(id);
+  };
+  const cancelEditing = () => {
+    setEditingRowId(null);
+    setEditDraft({});
+  };
+  const saveEditing = () => {
+    if (editingRowId) {
+      onRowEdit?.(editingRowId, editDraft);
+    }
+    setEditingRowId(null);
+    setEditDraft({});
+  };
   const totalHeight = sortedData.length * rowHeight;
   const visibleCount = Math.ceil(height / rowHeight) + overscan * 2;
   const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
   const endIndex = Math.min(sortedData.length, startIndex + visibleCount);
   const visibleRows = sortedData.slice(startIndex, endIndex);
-  const totalWidth = (selectable ? CHECKBOX_COLUMN_WIDTH : 0) + columns.reduce((sum, c) => sum + (columnWidths[c.key] ?? DEFAULT_COLUMN_WIDTH), 0);
+  const totalWidth = (selectable ? CHECKBOX_COLUMN_WIDTH : 0) + (editingEnabled ? ACTIONS_COLUMN_WIDTH : 0) + columns.reduce((sum, c) => sum + widthOf(c), 0);
   return /* @__PURE__ */ jsxs17(
     "div",
     {
@@ -1226,7 +1318,7 @@ function DataGrid({
       role: "table",
       children: [
         /* @__PURE__ */ jsxs17("div", { className: headerRow, style: { width: totalWidth, minWidth: "100%" }, role: "row", children: [
-          selectable ? /* @__PURE__ */ jsx34("div", { className: checkboxCell, role: "columnheader", children: /* @__PURE__ */ jsx34(
+          selectable ? /* @__PURE__ */ jsx34("div", { className: [checkboxCell, pinnedHeaderCell].join(" "), style: { left: 0 }, role: "columnheader", children: /* @__PURE__ */ jsx34(
             "input",
             {
               type: "checkbox",
@@ -1238,15 +1330,15 @@ function DataGrid({
               "aria-label": "Select all rows"
             }
           ) }) : null,
-          columns.map((column) => {
-            const width = columnWidths[column.key] ?? DEFAULT_COLUMN_WIDTH;
+          layout.ordered.map((column) => {
+            const width = widthOf(column);
             const isSorted = sort?.key === column.key;
             const direction2 = isSorted ? sort.direction : null;
             return /* @__PURE__ */ jsxs17(
               "div",
               {
-                className: headerCell,
-                style: { width },
+                className: [headerCell, headerPinnedClass(column)].filter(Boolean).join(" "),
+                style: { width, ...pinnedStyle(column) },
                 role: "columnheader",
                 "aria-sort": direction2 === "asc" ? "ascending" : direction2 === "desc" ? "descending" : "none",
                 children: [
@@ -1270,34 +1362,108 @@ function DataGrid({
               },
               column.key
             );
-          })
+          }),
+          editingEnabled ? /* @__PURE__ */ jsx34(
+            "div",
+            {
+              className: [actionsCell, pinnedHeaderCell].join(" "),
+              style: { right: 0 },
+              role: "columnheader",
+              children: /* @__PURE__ */ jsx34("span", { className: srOnly2, children: "Actions" })
+            }
+          ) : null
         ] }),
         sortedData.length === 0 ? /* @__PURE__ */ jsx34("div", { className: emptyState, children: emptyMessage }) : /* @__PURE__ */ jsx34("div", { className: body3, style: { height: totalHeight, width: totalWidth, minWidth: "100%" }, children: visibleRows.map((rowData, i) => {
           const index = startIndex + i;
           const id = getRowId(rowData);
           const isSelected = selectedIds.has(id);
+          const isEditing = editingRowId === id;
           const style = { top: index * rowHeight, height: rowHeight, width: totalWidth };
-          return /* @__PURE__ */ jsxs17("div", { className: row, style, role: "row", "data-selected": isSelected || void 0, children: [
-            selectable ? /* @__PURE__ */ jsx34("div", { className: checkboxCell, role: "cell", children: /* @__PURE__ */ jsx34(
-              "input",
-              {
-                type: "checkbox",
-                checked: isSelected,
-                onChange: () => toggleRow(id),
-                "aria-label": `Select row ${index + 1}`
-              }
-            ) }) : null,
-            columns.map((column) => /* @__PURE__ */ jsx34(
-              "div",
-              {
-                className: cell,
-                style: { width: columnWidths[column.key] ?? DEFAULT_COLUMN_WIDTH },
-                role: "cell",
-                children: column.render ? column.render(rowData) : String(getCellValue(column, rowData) ?? "")
-              },
-              column.key
-            ))
-          ] }, id);
+          return /* @__PURE__ */ jsxs17(
+            "div",
+            {
+              className: row,
+              style,
+              role: "row",
+              "data-selected": isSelected || void 0,
+              "data-editing": isEditing || void 0,
+              children: [
+                selectable ? /* @__PURE__ */ jsx34("div", { className: [checkboxCell, pinnedCell].join(" "), style: { left: 0 }, role: "cell", children: /* @__PURE__ */ jsx34(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isSelected,
+                    onChange: () => toggleRow(id),
+                    "aria-label": `Select row ${index + 1}`
+                  }
+                ) }) : null,
+                layout.ordered.map((column) => /* @__PURE__ */ jsx34(
+                  "div",
+                  {
+                    className: [cell, pinnedClass(column)].filter(Boolean).join(" "),
+                    style: { width: widthOf(column), ...pinnedStyle(column) },
+                    role: "cell",
+                    children: isEditing && column.editable ? /* @__PURE__ */ jsx34(
+                      "input",
+                      {
+                        type: "text",
+                        className: editInput,
+                        value: editDraft[column.key] ?? "",
+                        onChange: (e) => setEditDraft((prev) => ({ ...prev, [column.key]: e.target.value })),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") saveEditing();
+                          if (e.key === "Escape") cancelEditing();
+                        },
+                        "aria-label": `Edit ${String(column.header)}`,
+                        autoFocus: column.key === columns.find((c) => c.editable)?.key
+                      }
+                    ) : column.render ? column.render(rowData) : String(getCellValue(column, rowData) ?? "")
+                  },
+                  column.key
+                )),
+                editingEnabled ? /* @__PURE__ */ jsx34(
+                  "div",
+                  {
+                    className: [actionsCell, pinnedCell].join(" "),
+                    style: { right: 0 },
+                    role: "cell",
+                    children: isEditing ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+                      /* @__PURE__ */ jsx34(
+                        "button",
+                        {
+                          type: "button",
+                          className: iconButton,
+                          onClick: saveEditing,
+                          "aria-label": `Save row ${index + 1}`,
+                          children: "\u2713"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx34(
+                        "button",
+                        {
+                          type: "button",
+                          className: iconButton,
+                          onClick: cancelEditing,
+                          "aria-label": `Cancel editing row ${index + 1}`,
+                          children: "\u2715"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsx34(
+                      "button",
+                      {
+                        type: "button",
+                        className: iconButton,
+                        onClick: () => startEditing(rowData),
+                        "aria-label": `Edit row ${index + 1}`,
+                        children: "\u270E"
+                      }
+                    )
+                  }
+                ) : null
+              ]
+            },
+            id
+          );
         }) })
       ]
     }