@homebound/beam 2.333.0 → 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/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -115,13 +115,26 @@ function TreeSelectFieldBase(props) {
             return areAllSelected;
         }
         initialOptions.forEach(areAllChildrenSelected);
+        // Given a child option, determine if the parent is selected.
+        const isParentSelected = (option) => {
+            var _a;
+            const parents = (_a = (0, utils_1.findOption)(initialOptions, (0, Value_1.valueToKey)(getOptionValue(option)), getOptionValue)) === null || _a === void 0 ? void 0 : _a.parents;
+            if (!parents)
+                return false;
+            return parents.some((parent) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(parent))));
+        };
         return {
             selectedKeys,
             inputValue: selectedOptions.length === 1
                 ? getOptionLabel(selectedOptions[0])
-                : selectedOptions.length === 0
-                    ? nothingSelectedText
-                    : "",
+                : isReadOnly && selectedOptions.length > 0
+                    ? selectedOptions
+                        .filter((o) => !isParentSelected(o))
+                        .map(getOptionLabel)
+                        .join(", ")
+                    : selectedOptions.length === 0
+                        ? nothingSelectedText
+                        : "",
             filteredOptions,
             selectedOptions,
             allOptions: initialOptions,

package/dist/inputs/internal/ComboBoxBase.js

@@ -56,7 +56,7 @@ function ComboBoxBase(props) {
     // Do a one-time initialize of fieldState
     const [fieldState, setFieldState] = (0, react_1.useState)(() => {
         return {
-            inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText),
+            inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
             searchValue: undefined,
             optionsLoading: false,
         };
@@ -179,10 +179,10 @@ function ComboBoxBase(props) {
         else {
             setFieldState((prevState) => ({
                 ...prevState,
-                inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText),
+                inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
             }));
         }
-    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText]);
+    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly]);
     // For the most part, the returned props contain `aria-*` and `id` attributes for accessibility purposes.
     const { buttonProps: triggerProps, inputProps, listBoxProps, labelProps, } = (0, react_aria_1.useComboBox)({
         ...comboBoxProps,
@@ -213,12 +213,14 @@ function ComboBoxBase(props) {
     return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
 }
 exports.ComboBoxBase = ComboBoxBase;
-function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {
+function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, readOnly) {
     return selectedOptions.length === 1
         ? getOptionLabel(selectedOptions[0])
-        : multiselect && selectedOptions.length === 0
-            ? nothingSelectedText
-            : "";
+        : readOnly && selectedOptions.length > 0
+            ? selectedOptions.map(getOptionLabel).join(", ")
+            : multiselect && selectedOptions.length === 0
+                ? nothingSelectedText
+                : "";
 }
 /** Transforms/simplifies `optionsOrLoad` into just options, with unsetLabel maybe added. */
 function initializeOptions(optionsOrLoad, getOptionValue, unsetLabel) {

package/package.json

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