@homebound/beam 2.333.1 → 2.334.0

package/dist/components/Table/GridTable.js

@@ -197,7 +197,8 @@ function GridTable(props) {
         }
         evt.preventDefault();
         // set flags for css spacer
-        recursiveSetDraggedOver(rows, RowState_1.DraggedOver.None);
+        // don't set none for the row we are entering
+        recursiveSetDraggedOver(rows.filter((r) => r.id !== row.id), RowState_1.DraggedOver.None);
         if (draggedRowRef.current) {
             if (draggedRowRef.current.id === row.id) {
                 return;
@@ -213,7 +214,8 @@ function GridTable(props) {
         }
         evt.preventDefault();
         if (draggedRowRef.current) {
-            if (draggedRowRef.current.id === row.id) {
+            if (draggedRowRef.current.id === row.id || !evt.currentTarget) {
+                tableState.maybeSetRowDraggedOver(row.id, RowState_1.DraggedOver.None, draggedRowRef.current);
                 return;
             }
             // continuously determine above or below

package/dist/components/Table/components/Row.js

@@ -12,6 +12,7 @@ const TableState_1 = require("../utils/TableState");
 const utils_1 = require("../utils/utils");
 const Css_1 = require("../../../Css");
 const utils_2 = require("../../../utils");
+const use_debounce_1 = require("use-debounce");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a, _b, _c;
@@ -32,8 +33,12 @@ function RowImpl(props) {
     const showRowHoverColor = !utils_1.reservedRowKinds.includes(row.kind) && !omitRowHover && style.rowHoverColor !== "none";
     const rowStyleCellCss = (0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const levelIndent = style.levels && ((_b = style.levels[level]) === null || _b === void 0 ? void 0 : _b.rowIndent);
+    const containerCss = {
+        ...Css_1.Css.add("transition", "padding 0.25s ease-in-out").$,
+        ...(rs.isDraggedOver === RowState_1.DraggedOver.Above && Css_1.Css.ptPx(25).$),
+        ...(rs.isDraggedOver === RowState_1.DraggedOver.Below && Css_1.Css.pbPx(25).$),
+    };
     const rowCss = {
-        ...Css_1.Css.add("transition", "padding 0.5s ease-in-out").$,
         ...(!utils_1.reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss),
         // Optionally include the row hover styles, by default they should be turned on.
         ...(showRowHoverColor && {
@@ -56,8 +61,6 @@ function RowImpl(props) {
             [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
         },
         ...(isLastKeptRow && Css_1.Css.addIn("&>*", style.keptLastRowCss).$),
-        ...(rs.isDraggedOver === RowState_1.DraggedOver.Above && Css_1.Css.add("paddingTop", "35px").$),
-        ...(rs.isDraggedOver === RowState_1.DraggedOver.Below && Css_1.Css.add("paddingBottom", "35px").$),
     };
     let currentColspan = 1;
     // Keep a running count of how many expanded columns are being shown.
@@ -67,10 +70,11 @@ function RowImpl(props) {
     let expandColumnHidden = false;
     // used to render the whole row when dragging with the handle
     const ref = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), 
-        // these events are necessary to get the dragged-over row for the drop event
-        // and spacer styling
-        onDrop: (evt) => onDrop === null || onDrop === void 0 ? void 0 : onDrop(row, evt), onDragEnter: (evt) => onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(row, evt), onDragOver: (evt) => onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(row, evt), ref: ref, children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
+    // debounce drag over callback to avoid excessive re-renders
+    const dragOverCallback = (0, react_1.useCallback)((row, evt) => onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(row, evt), [onDragOver]);
+    // when the event is not called, we still need to call preventDefault
+    const onDragOverDebounced = (0, use_debounce_1.useDebouncedCallback)(dragOverCallback, 100);
+    const RowContent = () => ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
             var _a, _b, _c, _d;
             // If the expandable column was hidden, then we need to look at the previous column to format the `expandHeader` and 'header' kinds correctly.
             const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column;
@@ -126,7 +130,7 @@ function RowImpl(props) {
                 onDragEnd,
                 onDrop,
                 onDragEnter,
-                onDragOver,
+                onDragOver: onDragOverDebounced,
             });
             // Only use the `numExpandedColumns` as the `colspan` when rendering the "Expandable Header"
             currentColspan =
@@ -229,6 +233,15 @@ function RowImpl(props) {
                         : (0, cell_1.defaultRenderFn)(as, currentColspan);
             return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick, tooltip);
         })) }));
+    return row.draggable ? ((0, jsx_runtime_1.jsx)("div", { css: containerCss, 
+        // these events are necessary to get the dragged-over row for the drop event
+        // and spacer styling
+        onDrop: (evt) => onDrop === null || onDrop === void 0 ? void 0 : onDrop(row, evt), onDragEnter: (evt) => onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(row, evt), onDragOver: (evt) => {
+            // when the event isn't called due to debounce, we still need to
+            // call preventDefault for the drop event to fire
+            evt.preventDefault();
+            onDragOverDebounced(row, evt);
+        }, ref: ref, children: RowContent() })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: RowContent() }));
 }
 /**
  * Memoizes rows so that re-rendering the table doesn't re-render every single row.

package/dist/components/Table/utils/RowStates.js

@@ -184,6 +184,8 @@ class RowStates {
             return;
         }
         // this allows a single-row re-render
+        if (rs.isDraggedOver === draggedOver)
+            return;
         rs.isDraggedOver = draggedOver;
     }
 }

package/dist/components/Table/utils/columns.js

@@ -201,30 +201,21 @@ function dragHandleColumn(columnDef) {
         id: "beamDragHandleColumn",
         clientSideSort: false,
         align: "center",
-        // Defining `w: 40px` to accommodate for the `16px` wide checkbox and `12px` of padding on either side.
         w: "40px",
         wrapAction: false,
         isAction: true,
         expandColumns: undefined,
-        // Select Column should not display the select toggle for `expandableHeader` or `totals` row kinds
         expandableHeader: utils_1.emptyCell,
         totals: utils_1.emptyCell,
         // Use any of the user's per-row kind methods if they have them.
         ...columnDef,
     };
-    // return newMethodMissingProxy(base, (key) => {
-    //   return (data: any, { row, level }: { row: GridDataRow<any>; level: number }) => ({
-    //     content: <CollapseToggle row={row} compact={level > 0} />,
-    //   });
-    // }) as any;
     return (0, utils_2.newMethodMissingProxy)(base, (key) => {
         return (data, { row, dragData }) => {
             if (!dragData)
                 return;
             const { rowRenderRef: ref, onDragStart, onDragEnd, onDrop, onDragEnter, onDragOver } = dragData;
             return {
-                // how do we get the callbacks and the ref here?
-                // inject them into the row in the Row component?
                 content: row.draggable ? ((0, jsx_runtime_1.jsx)("div", { draggable: row.draggable, onDragStart: (evt) => {
                         // show the whole row being dragged when dragging with the handle
                         ref.current && evt.dataTransfer.setDragImage(ref.current, 0, 0);

package/dist/components/Table/utils/utils.js

@@ -179,8 +179,8 @@ exports.insertAtIndex = insertAtIndex;
 function isCursorBelowMidpoint(target, clientY) {
     const style = window.getComputedStyle(target);
     const rect = target.getBoundingClientRect();
-    const pt = parseInt(style.getPropertyValue("padding-top")) / 2;
-    const pb = parseInt(style.getPropertyValue("padding-bottom"));
+    const pt = parseFloat(style.getPropertyValue("padding-top"));
+    const pb = parseFloat(style.getPropertyValue("padding-bottom"));
     return clientY > rect.top + pt + (rect.height - pb) / 2;
 }
 exports.isCursorBelowMidpoint = isCursorBelowMidpoint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.333.1",
+  "version": "2.334.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",