trotl-table 1.0.10 → 1.0.12

package/README.md

@@ -26,6 +26,7 @@ yarn add trotl-table
 
 ## Versions
 ```js
+1.0.9 => add search input
 1.0.9 => fix readme, whatever
 1.0.8 => fix readme
 1.0.7 => removed context (better for npm consumers)

package/dist/index.cjs.js

@@ -9612,7 +9612,8 @@ const DraggableRow = ({
   index,
   moveRow,
   children,
-  item,
+  row,
+  tableId,
   enableDrag,
   listRef
 }) => {
@@ -9621,7 +9622,6 @@ const DraggableRow = ({
     accept: ITEM_TYPE,
     hover(draggedItem, monitor) {
       if (!ref.current || !enableDrag) return;
-      ref.current.getBoundingClientRect();
       const clientOffset = monitor.getClientOffset();
 
       // Auto-scroll logic
@@ -9651,23 +9651,31 @@ const DraggableRow = ({
   }, drag] = reactDnd.useDrag({
     type: ITEM_TYPE,
     item: {
-      index
+      index,
+      row,
+      sourceTableId: tableId
     },
     canDrag: enableDrag,
     collect: monitor => ({
       isDragging: monitor.isDragging()
     })
   });
-  drag(drop(ref));
+  // Compose drag & drop refs in effect to avoid reading ref during render
+  const setRef = React.useCallback(node => {
+    if (node) {
+      ref.current = node;
+      drag(drop(node));
+    }
+  }, [drag, drop]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
+    ref: setRef,
     style: {
       opacity: isDragging ? 0.5 : 1,
       cursor: enableDrag ? "move" : "default"
     }
   }, children);
 };
-function Table({
+function TableInner({
   tableId = "default",
   columns = [],
   data = [],
@@ -9684,7 +9692,11 @@ function Table({
   deleteCallback = null,
   buttons = ["view", "edit", "delete"],
   enableDragRow = false,
-  enableSearchUrlParam = false
+  enableSearchUrlParam = false,
+  enableMultiSelect = false,
+  enableExternalRowDrop = false,
+  onExternalRowDrop = () => {},
+  useExternalDndContext = false
 }) {
   // Local selection & sorting state (removed TableContext dependency)
   const [selectedRows, setSelectedRows] = React.useState([]);
@@ -9693,26 +9705,49 @@ function Table({
   // Option to read search param from URL
   const [searchTerm, setSearchTerm] = React.useState(extraSearchTerm);
 
-  // Recognize "entry" in URL search param and set as searchTerm if present
-  // Extract window.location.search to a variable for useEffect dependency
-  const locationSearch = typeof window !== "undefined" ? window.location.search : "";
+  // Listen to URL changes via popstate (back/forward) and custom events
   React.useEffect(() => {
     if (!enableSearchUrlParam) {
       setSearchTerm(extraSearchTerm);
       return;
     }
-    const params = new URLSearchParams(locationSearch);
-    const entrySearch = params.get("entry");
-    const urlSearch = params.get("search");
-    console.log(urlSearch);
-    if (entrySearch) {
-      setSearchTerm(entrySearch);
-    } else if (urlSearch) {
-      setSearchTerm(urlSearch);
-    } else {
-      setSearchTerm(extraSearchTerm);
-    }
-  }, [locationSearch, enableSearchUrlParam, extraSearchTerm]);
+    const updateSearchFromUrl = () => {
+      const params = new URLSearchParams(window.location.search);
+      const entrySearch = params.get("entry");
+      const urlSearch = params.get("search");
+      if (entrySearch) {
+        setSearchTerm(entrySearch);
+      } else if (urlSearch) {
+        setSearchTerm(urlSearch);
+      } else {
+        setSearchTerm(extraSearchTerm);
+      }
+    };
+
+    // Initial sync
+    updateSearchFromUrl();
+
+    // Listen for URL changes (back/forward navigation)
+    window.addEventListener('popstate', updateSearchFromUrl);
+
+    // Listen for programmatic URL changes if you use history.pushState/replaceState
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState = function (...args) {
+      originalPushState.apply(this, args);
+      updateSearchFromUrl();
+    };
+    window.history.replaceState = function (...args) {
+      originalReplaceState.apply(this, args);
+      updateSearchFromUrl();
+    };
+    return () => {
+      window.removeEventListener('popstate', updateSearchFromUrl);
+      // Restore original methods
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+    };
+  }, [enableSearchUrlParam, extraSearchTerm]);
   const toggleRowSelection = React.useCallback(rowId => {
     setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
   }, []);
@@ -9799,7 +9834,7 @@ function Table({
   const toggleGroup = gid => {
     setExpandedGroups(prev => ({
       ...prev,
-      [gid]: !Boolean(prev[gid])
+      [gid]: !prev[gid]
     }));
   };
   React.useEffect(() => {
@@ -9912,40 +9947,90 @@ function Table({
   const showDelete = buttons.includes("delete");
   const showActions = showView || showEdit || showDelete;
 
-  // MOVE ROW
-  const moveRow = React.useCallback((fromIndex, toIndex) => {
+  // MOVE ROW (internal + between groups)
+  // moveRow: allow toIndex to be null or an object { emptyGroupId } for empty group drop
+  const moveRow = React.useCallback((fromIndex, toIndexOrGroup) => {
     const from = tableDataFlat[fromIndex];
-    const to = tableDataFlat[toIndex];
-    if (!from || !to || from.type !== "row" || to.type !== "row") return;
-
-    // Only reorder within the same group to keep grouping consistent
-    if (isGrouped && from.groupId !== to.groupId) return;
+    let to = null;
+    let emptyGroupId = null;
+    if (typeof toIndexOrGroup === 'object' && toIndexOrGroup && toIndexOrGroup.emptyGroupId) {
+      emptyGroupId = toIndexOrGroup.emptyGroupId;
+    } else {
+      to = tableDataFlat[toIndexOrGroup];
+    }
+    if (!from || from.type !== "row" || toIndexOrGroup !== null && !to && !emptyGroupId) return;
     setLocalData(prev => {
       if (isGrouped) {
-        // Reorder within the target group
-        const gid = from.groupId;
-        return prev.map(group => {
+        // Remove from old group
+        let movedRow;
+        const newGroups = prev.map(group => {
           const groupId = group[groupKey] ?? group.groupId ?? group.groupName;
-          if (groupId !== gid) return group;
-          const rows = [...group.rows];
-          const fromPos = rows.findIndex(r => r.id === from.row.id);
-          const toPos = rows.findIndex(r => r.id === to.row.id);
-          if (fromPos === -1 || toPos === -1) return group;
-          const [moved] = rows.splice(fromPos, 1);
-          rows.splice(toPos, 0, moved);
-          return {
-            ...group,
-            rows
-          };
+          if (groupId === from.groupId) {
+            const rows = [...group.rows];
+            const fromPos = rows.findIndex(r => r.id === from.row.id);
+            if (fromPos !== -1) {
+              [movedRow] = rows.splice(fromPos, 1);
+            }
+            return {
+              ...group,
+              rows
+            };
+          }
+          return group;
+        });
+        if (!movedRow) return prev;
+        // Insert into new group at correct position
+        return newGroups.map(group => {
+          const groupId = group[groupKey] ?? group.groupId ?? group.groupName;
+          // If dropping into empty group
+          if (emptyGroupId && groupId === emptyGroupId) {
+            const rows = [...group.rows];
+            if (groupKey && movedRow[groupKey] !== undefined) {
+              movedRow = {
+                ...movedRow,
+                [groupKey]: groupId
+              };
+            }
+            rows.push(movedRow);
+            return {
+              ...group,
+              rows
+            };
+          }
+          // Normal drop
+          if (to && groupId === to.groupId) {
+            const rows = [...group.rows];
+            const toPos = rows.findIndex(r => r.id === to.row.id);
+            if (groupKey && movedRow[groupKey] !== undefined) {
+              movedRow = {
+                ...movedRow,
+                [groupKey]: groupId
+              };
+            }
+            if (toPos === -1) {
+              rows.push(movedRow);
+            } else {
+              rows.splice(toPos, 0, movedRow);
+            }
+            return {
+              ...group,
+              rows
+            };
+          }
+          return group;
         });
       } else {
         // Ungrouped: reorder the flat list
         const arr = Array.isArray(prev) ? [...prev] : [];
         const fromPos = arr.findIndex(r => r.id === from.row.id);
-        const toPos = arr.findIndex(r => r.id === to.row.id);
-        if (fromPos === -1 || toPos === -1) return prev;
+        const toPos = to ? arr.findIndex(r => r.id === to.row.id) : -1;
+        if (fromPos === -1 || to && toPos === -1) return prev;
         const [moved] = arr.splice(fromPos, 1);
-        arr.splice(toPos, 0, moved);
+        if (to) {
+          arr.splice(toPos, 0, moved);
+        } else {
+          arr.push(moved);
+        }
         return arr;
       }
     });
@@ -9963,12 +10048,81 @@ function Table({
       const gid = item.groupId;
       const rows = groupRowsById[gid] || [];
       const allSelected = rows.length > 0 && rows.every(r => selectedRows.includes(r.id));
+
+      // If expanded and group is empty and drag enabled, make the group header itself a drop target
+      if (item.expanded && rows.length === 0 && enableDragRow) {
+        // For empty group, drop target pushes into this group
+        const GroupHeaderDrop = () => {
+          const ref = React.useRef(null);
+          const [, drop] = reactDnd.useDrop({
+            accept: ITEM_TYPE,
+            drop(draggedItem) {
+              if (draggedItem && typeof draggedItem.index === "number") {
+                moveRow(draggedItem.index, {
+                  emptyGroupId: gid
+                });
+              }
+            },
+            canDrop: () => true,
+            collect: monitor => ({
+              isOver: monitor.isOver(),
+              canDrop: monitor.canDrop()
+            })
+          });
+          drop(ref);
+          return /*#__PURE__*/React.createElement("div", {
+            ref: ref,
+            key: key,
+            style: {
+              ...style,
+              background: '#f6f6fa',
+              border: '2px dashed #bbb',
+              textAlign: 'center',
+              color: '#888',
+              minHeight: rowHeight,
+              display: 'flex',
+              alignItems: 'center'
+            },
+            className: "table-row group-row empty-group-drop",
+            onClick: () => toggleGroup(gid)
+          }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
+            className: "table-cell checkbox-cell"
+          }, /*#__PURE__*/React.createElement("input", {
+            type: "checkbox",
+            checked: allSelected,
+            onChange: e => {
+              e.stopPropagation();
+              const ids = rows.map(r => r.id);
+              if (allSelected) {
+                setSelectedRows(prev => prev.filter(id => !ids.includes(id)));
+              } else {
+                setSelectedRows(prev => [...prev, ...ids.filter(id => !prev.includes(id))]);
+              }
+            },
+            onClick: e => e.stopPropagation()
+          })), showKey && /*#__PURE__*/React.createElement("div", {
+            className: "table-cell key-cell"
+          }), /*#__PURE__*/React.createElement("div", {
+            className: "table-cell group-header",
+            style: {
+              width: '100%'
+            }
+          }, item.expanded ? "▾" : "▸", " ", item.groupName, " (0) \u2014 Drop here to move into this group"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
+            key: i,
+            className: "table-cell"
+          })), showActions && /*#__PURE__*/React.createElement("div", {
+            className: "table-cell action-cell"
+          }));
+        };
+        return /*#__PURE__*/React.createElement(GroupHeaderDrop, null);
+      }
+      // Default: normal group header
       return /*#__PURE__*/React.createElement("div", {
         key: key,
         style: style,
         className: "table-row group-row",
         onClick: () => toggleGroup(gid)
-      }, /*#__PURE__*/React.createElement("div", {
+      }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
         className: "table-cell checkbox-cell"
       }, /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
@@ -9976,7 +10130,11 @@ function Table({
         onChange: e => {
           e.stopPropagation();
           const ids = rows.map(r => r.id);
-          ids.forEach(id => toggleRowSelection(tableId, id));
+          if (allSelected) {
+            setSelectedRows(prev => prev.filter(id => !ids.includes(id)));
+          } else {
+            setSelectedRows(prev => [...prev, ...ids.filter(id => !prev.includes(id))]);
+          }
         },
         onClick: e => e.stopPropagation()
       })), showKey && /*#__PURE__*/React.createElement("div", {
@@ -9996,7 +10154,7 @@ function Table({
       key: key,
       style: style,
       className: "table-row"
-    }, showDelete && /*#__PURE__*/React.createElement("div", {
+    }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
       className: "table-cell checkbox-cell"
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
@@ -10037,20 +10195,46 @@ function Table({
         key: key,
         index: index,
         moveRow: moveRow,
-        item: item,
+        row: row,
+        tableId: tableId,
         enableDrag: true,
         listRef: listRef
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, tableId, viewCallback, editCallback, enableDragRow, moveRow]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, viewCallback, editCallback, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
-  return /*#__PURE__*/React.createElement(reactDnd.DndProvider, {
-    backend: reactDndHtml5Backend.HTML5Backend
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "table-container"
+
+  // Table-level drop target only when using external DnD context
+  const tableContainerRef = React.useRef(null);
+  const [{
+    isOver: isExternalOver,
+    canDrop: canExternalDrop
+  }, externalDrop] = reactDnd.useDrop({
+    accept: ITEM_TYPE,
+    drop: draggedItem => {
+      if (!useExternalDndContext) return; // safety
+      if (!enableExternalRowDrop || isGrouped) return;
+      if (!draggedItem || draggedItem.sourceTableId === tableId) return;
+      onExternalRowDrop(draggedItem.row, draggedItem.sourceTableId, tableId);
+    }
+  });
+  const setTableRef = React.useCallback(node => {
+    tableContainerRef.current = node;
+    if (node && useExternalDndContext && enableExternalRowDrop) {
+      externalDrop(node);
+    }
+  }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
+  const tableMarkup = /*#__PURE__*/React.createElement("div", {
+    className: "table-container",
+    ref: setTableRef,
+    style: useExternalDndContext && enableExternalRowDrop ? {
+      transition: 'background 0.15s',
+      background: isExternalOver && canExternalDrop ? 'rgba(100,108,255,0.15)' : undefined,
+      outline: isExternalOver && canExternalDrop ? '2px dashed #646cff' : undefined
+    } : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-header",
     style: {
@@ -10061,7 +10245,7 @@ function Table({
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-row header-row"
-  }, showDelete && /*#__PURE__*/React.createElement("div", {
+  }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
     className: "table-cell checkbox-cell"
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
@@ -10109,7 +10293,20 @@ function Table({
     cancelLabel: "Cancel",
     showCancel: true,
     showConfirm: true
-  }, /*#__PURE__*/React.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?"))));
+  }, /*#__PURE__*/React.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?")));
+  return tableMarkup;
+}
+function Table(props) {
+  const {
+    useExternalDndContext = false
+  } = props;
+  if (useExternalDndContext) {
+    return /*#__PURE__*/React.createElement(TableInner, props);
+  }
+  // Provide DnD context when not supplied externally
+  return /*#__PURE__*/React.createElement(reactDnd.DndProvider, {
+    backend: reactDndHtml5Backend.HTML5Backend
+  }, /*#__PURE__*/React.createElement(TableInner, props));
 }
 
 // src/index.js