@homebound/beam 2.332.1 → 2.333.1

package/dist/components/Table/GridTable.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import React, { MutableRefObject } from "react";
 import { DiscriminateUnion, GridRowKind } from "../index";
 import { GridTableApi } from "./GridTableApi";
 import { GridStyle, GridStyleDef, RowStyles } from "./TableStyles";
@@ -54,6 +54,8 @@ export type OnRowSelect<R extends Kinded> = {
         api: GridTableApi<R>;
     }) => void;
 };
+type DragEventType = React.DragEvent<HTMLElement>;
+export type OnRowDragEvent<R extends Kinded> = (draggedRow: GridDataRow<R>, event: DragEventType) => void;
 export interface GridTableProps<R extends Kinded, X> {
     id?: string;
     /**
@@ -129,6 +131,8 @@ export interface GridTableProps<R extends Kinded, X> {
     infiniteScroll?: InfiniteScroll;
     /** Callback for when a row is selected or unselected. */
     onRowSelect?: OnRowSelect<R>;
+    /** Drag & drop Callback. */
+    onRowDrop?: (draggedRow: GridDataRow<R>, droppedRow: GridDataRow<R>, indexOffset: number) => void;
 }
 /**
  * Renders data in our table layout.
@@ -151,3 +155,4 @@ export interface GridTableProps<R extends Kinded, X> {
  * https://docs.google.com/document/d/1DFnlkDubK4nG_GLf_hB8yp0flnSNt_3IBh5iOicuaFM/edit#heading=h.9m9cpwgeqfc9
  */
 export declare function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = any>(props: GridTableProps<R, X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/GridTable.js

@@ -45,6 +45,7 @@ const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
 const utils_2 = require("../../utils");
 const Row_1 = require("./components/Row");
+const RowState_1 = require("./utils/RowState");
 let runningInJest = false;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 function setRunningInJest() {
@@ -87,7 +88,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c;
-    const { id = "gridTable", as = "div", columns: _columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, persistCollapse, resizeTarget, activeRowId, activeCellId, visibleColumnsStorageKey, infiniteScroll, onRowSelect, } = props;
+    const { id = "gridTable", as = "div", columns: _columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, persistCollapse, resizeTarget, activeRowId, activeCellId, visibleColumnsStorageKey, infiniteScroll, onRowSelect, onRowDrop: droppedCallback, } = props;
     const columnsWithIds = (0, react_1.useMemo)(() => (0, columns_1.assignDefaultColumnIds)(_columns), [_columns]);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
@@ -109,6 +110,12 @@ function GridTable(props) {
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.api]);
+    const [draggedRow, _setDraggedRow] = (0, react_1.useState)(undefined);
+    const draggedRowRef = (0, react_1.useRef)(draggedRow);
+    const setDraggedRow = (row) => {
+        draggedRowRef.current = row;
+        _setDraggedRow(row);
+    };
     const style = (0, TableStyles_1.resolveStyles)(maybeStyle);
     const { tableState } = api;
     tableState.onRowSelect = onRowSelect;
@@ -140,6 +147,80 @@ function GridTable(props) {
     // Our column sizes use either `w` or `expandedWidth`, so see which columns are currently expanded
     const expandedColumnIds = (0, hooks_1.useComputed)(() => tableState.expandedColumnIds, [tableState]);
     const columnSizes = (0, useSetupColumnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef, expandedColumnIds);
+    // allows us to unset children and grandchildren, etc.
+    function recursiveSetDraggedOver(rows, draggedOver) {
+        rows.forEach((r) => {
+            tableState.maybeSetRowDraggedOver(r.id, draggedOver);
+            if (r.children) {
+                recursiveSetDraggedOver(r.children, draggedOver);
+            }
+        });
+    }
+    function onDragStart(row, evt) {
+        if (!row.draggable || !droppedCallback) {
+            return;
+        }
+        evt.dataTransfer.effectAllowed = "move";
+        evt.dataTransfer.setData("text/plain", JSON.stringify({ row }));
+        setDraggedRow(row);
+    }
+    const onDragEnd = (row, evt) => {
+        if (!row.draggable || !droppedCallback) {
+            return;
+        }
+        evt.preventDefault();
+        recursiveSetDraggedOver(rows, RowState_1.DraggedOver.None);
+    };
+    const onDrop = (row, evt) => {
+        if (!row.draggable || !droppedCallback) {
+            return;
+        }
+        evt.preventDefault();
+        if (droppedCallback) {
+            recursiveSetDraggedOver(rows, RowState_1.DraggedOver.None);
+            try {
+                const draggedRowData = JSON.parse(evt.dataTransfer.getData("text/plain")).row;
+                if (draggedRowData.id === row.id) {
+                    return;
+                }
+                const isBelow = (0, utils_1.isCursorBelowMidpoint)(evt.currentTarget, evt.clientY);
+                droppedCallback(draggedRowData, row, isBelow ? 1 : 0);
+            }
+            catch (e) {
+                console.error(e.message, e.stack);
+            }
+        }
+    };
+    const onDragEnter = (row, evt) => {
+        if (!row.draggable || !droppedCallback) {
+            return;
+        }
+        evt.preventDefault();
+        // set flags for css spacer
+        recursiveSetDraggedOver(rows, RowState_1.DraggedOver.None);
+        if (draggedRowRef.current) {
+            if (draggedRowRef.current.id === row.id) {
+                return;
+            }
+            // determine above or below
+            const isBelow = (0, utils_1.isCursorBelowMidpoint)(evt.currentTarget, evt.clientY);
+            tableState.maybeSetRowDraggedOver(row.id, isBelow ? RowState_1.DraggedOver.Below : RowState_1.DraggedOver.Above, draggedRowRef.current);
+        }
+    };
+    const onDragOver = (row, evt) => {
+        if (!row.draggable || !droppedCallback) {
+            return;
+        }
+        evt.preventDefault();
+        if (draggedRowRef.current) {
+            if (draggedRowRef.current.id === row.id) {
+                return;
+            }
+            // continuously determine above or below
+            const isBelow = (0, utils_1.isCursorBelowMidpoint)(evt.currentTarget, evt.clientY);
+            tableState.maybeSetRowDraggedOver(row.id, isBelow ? RowState_1.DraggedOver.Below : RowState_1.DraggedOver.Above, draggedRowRef.current);
+        }
+    };
     // Flatten, hide-if-filtered, hide-if-collapsed, and component-ize the sorted rows.
     const [tableHeadRows, visibleDataRows, keptSelectedRows, tooManyClientSideRows] = (0, hooks_1.useComputed)(() => {
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
@@ -152,7 +233,7 @@ function GridTable(props) {
         const hasExpandableHeader = visibleRows.some((rs) => rs.row.id === utils_1.EXPANDABLE_HEADER);
         // Get the flat list or rows from the header down...
         visibleRows.forEach((rs) => {
-            const row = ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...{
+            const row = ((0, jsx_runtime_1.jsx)(Row_1.Row, { onDragStart: onDragStart, onDragOver: onDragOver, onDragEnd: onDragEnd, onDrop: onDrop, onDragEnter: onDragEnter, ...{
                     as,
                     rs,
                     style,

package/dist/components/Table/components/Row.d.ts

@@ -13,6 +13,11 @@ interface RowProps<R extends Kinded> {
     cellHighlight: boolean;
     omitRowHover: boolean;
     hasExpandableHeader: boolean;
+    onDragStart?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDragEnd?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDrop?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDragEnter?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDragOver?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
 }
 declare function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement;
 /**
@@ -64,5 +69,7 @@ export type GridDataRow<R extends Kinded> = {
     selectable?: false;
     /** Whether this row should infer its selected state based on its children's selected state */
     inferSelectedState?: false;
+    /** Whether this row is draggable, usually to allow drag & drop reordering of rows */
+    draggable?: boolean;
 } & IfAny<R, AnyObject, DiscriminateUnion<R, "kind", R["kind"]>>;
 export {};

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

@@ -6,6 +6,7 @@ const mobx_react_1 = require("mobx-react");
 const react_1 = require("react");
 const cell_1 = require("./cell");
 const KeptGroupRow_1 = require("./KeptGroupRow");
+const RowState_1 = require("../utils/RowState");
 const sortRows_1 = require("../utils/sortRows");
 const TableState_1 = require("../utils/TableState");
 const utils_1 = require("../utils/utils");
@@ -14,7 +15,7 @@ const utils_2 = require("../../../utils");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a, _b, _c;
-    const { as, rs, style, rowStyles, columnSizes, getCount, cellHighlight, omitRowHover, hasExpandableHeader, ...others } = props;
+    const { as, rs, style, rowStyles, columnSizes, getCount, cellHighlight, omitRowHover, hasExpandableHeader, onDragStart, onDragEnd, onDrop, onDragEnter, onDragOver, ...others } = props;
     const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     // We're wrapped in observer, so can access these without useComputeds
     const { api, visibleColumns: columns } = tableState;
@@ -32,6 +33,7 @@ function RowImpl(props) {
     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 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 && {
@@ -54,6 +56,8 @@ 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.
@@ -61,7 +65,12 @@ function RowImpl(props) {
     let foundFirstContentColumn = false;
     let minStickyLeftOffset = 0;
     let expandColumnHidden = false;
-    return ((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) => {
+    // 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) => {
             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;
@@ -111,7 +120,14 @@ function RowImpl(props) {
                 currentColspan -= 1;
                 return null;
             }
-            const maybeContent = (0, utils_1.applyRowFn)(column, row, rowApi, level, isExpanded);
+            const maybeContent = (0, utils_1.applyRowFn)(column, row, rowApi, level, isExpanded, {
+                rowRenderRef: ref,
+                onDragStart,
+                onDragEnd,
+                onDrop,
+                onDragEnter,
+                onDragOver,
+            });
             // Only use the `numExpandedColumns` as the `colspan` when rendering the "Expandable Header"
             currentColspan =
                 (0, utils_1.isGridCellContent)(maybeContent) && typeof maybeContent.colspan === "number"

package/dist/components/Table/utils/RowState.d.ts

@@ -3,6 +3,11 @@ import { GridDataRow } from "../components/Row";
 import { GridRowApi } from "../GridTableApi";
 import { RowStates } from "./RowStates";
 import { SelectedState } from "./TableState";
+export declare enum DraggedOver {
+    None = 0,
+    Above = 1,
+    Below = 2
+}
 /**
  * A reactive/observable state of each GridDataRow's current behavior.
  *
@@ -22,6 +27,8 @@ export declare class RowState<R extends Kinded> {
     selected: boolean;
     /** Whether we are collapsed. */
     collapsed: boolean;
+    /** Whether we are dragged over. */
+    isDraggedOver: DraggedOver;
     /**
      * Whether our `row` had been in `props.rows`, but then removed _while being
      * selected_, i.e. potentially by server-side filters.

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

@@ -1,8 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowState = void 0;
+exports.RowState = exports.DraggedOver = void 0;
 const mobx_1 = require("mobx");
 const utils_1 = require("./utils");
+var DraggedOver;
+(function (DraggedOver) {
+    DraggedOver[DraggedOver["None"] = 0] = "None";
+    DraggedOver[DraggedOver["Above"] = 1] = "Above";
+    DraggedOver[DraggedOver["Below"] = 2] = "Below";
+})(DraggedOver = exports.DraggedOver || (exports.DraggedOver = {}));
 /**
  * A reactive/observable state of each GridDataRow's current behavior.
  *
@@ -20,6 +26,8 @@ class RowState {
         this.selected = false;
         /** Whether we are collapsed. */
         this.collapsed = false;
+        /** Whether we are dragged over. */
+        this.isDraggedOver = DraggedOver.None;
         /**
          * Whether our `row` had been in `props.rows`, but then removed _while being
          * selected_, i.e. potentially by server-side filters.

package/dist/components/Table/utils/RowStates.d.ts

@@ -1,6 +1,6 @@
 import { Kinded } from "../../..";
 import { GridDataRow } from "../components/Row";
-import { RowState } from "./RowState";
+import { DraggedOver, RowState } from "./RowState";
 import { RowStorage } from "./RowStorage";
 import { TableState } from "./TableState";
 /**
@@ -36,4 +36,5 @@ export declare class RowStates<R extends Kinded> {
     private createHeaderRow;
     /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
     private createKeptGroupRow;
+    maybeSetRowDraggedOver(id: string, draggedOver: DraggedOver, requireSameParentRow?: GridDataRow<R> | undefined): void;
 }

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

@@ -165,6 +165,27 @@ class RowStates {
         rs.children = [];
         return rs;
     }
+    maybeSetRowDraggedOver(id, draggedOver, requireSameParentRow = undefined) {
+        var _a, _b, _c, _d, _e, _f;
+        const rs = this.get(id);
+        if (requireSameParentRow) {
+            const requireParentRowState = this.get(requireSameParentRow.id);
+            if (((_b = (_a = requireParentRowState.parent) === null || _a === void 0 ? void 0 : _a.row) === null || _b === void 0 ? void 0 : _b.id) !== ((_d = (_c = rs.parent) === null || _c === void 0 ? void 0 : _c.row) === null || _d === void 0 ? void 0 : _d.id))
+                return;
+        }
+        // if this is an expanded parent and draggedOver is Below then we want to set this on this rows bottom-most child
+        if (!rs.collapsed && rs.children && ((_e = rs.children) === null || _e === void 0 ? void 0 : _e.length) > 0 && draggedOver === RowState_1.DraggedOver.Below) {
+            let rowState = rs;
+            // recursively find the bottom-most child
+            while (rowState.children && ((_f = rowState.children) === null || _f === void 0 ? void 0 : _f.length) > 0) {
+                rowState = rowState.children[rowState.children.length - 1];
+            }
+            rowState.isDraggedOver = draggedOver;
+            return;
+        }
+        // this allows a single-row re-render
+        rs.isDraggedOver = draggedOver;
+    }
 }
 exports.RowStates = RowStates;
 const missingHeader = { kind: "header", id: "header", data: "MISSING" };

package/dist/components/Table/utils/TableState.d.ts

@@ -4,7 +4,7 @@ import { GridDataRow } from "../components/Row";
 import { GridSortConfig } from "../GridTable";
 import { GridTableApi } from "../GridTableApi";
 import { Direction, GridColumnWithId } from "../types";
-import { RowState } from "./RowState";
+import { DraggedOver, RowState } from "./RowState";
 export type SelectedState = "checked" | "unchecked" | "partial";
 /**
  * Stores the collapsed & selected state of rows.
@@ -76,6 +76,7 @@ export declare class TableState<R extends Kinded> {
     isCollapsed(id: string): boolean;
     toggleCollapsed(id: string): void;
     deleteRows(ids: string[]): void;
+    maybeSetRowDraggedOver(id: string, draggedOver: DraggedOver, requireSameParentRow?: GridDataRow<R> | undefined): void;
 }
 /** Provides a context for rows to access their table's `TableState`. */
 export declare const TableStateContext: React.Context<{

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

@@ -212,6 +212,9 @@ class TableState {
         this.rows = this.rows.filter((row) => !ids.includes(row.id));
         this.rowStates.delete(ids);
     }
+    maybeSetRowDraggedOver(id, draggedOver, requireSameParentRow = undefined) {
+        this.rowStates.maybeSetRowDraggedOver(id, draggedOver, requireSameParentRow);
+    }
 }
 exports.TableState = TableState;
 /** Provides a context for rows to access their table's `TableState`. */

package/dist/components/Table/utils/columns.d.ts

@@ -32,3 +32,4 @@ export declare function calcColumnSizes<R extends Kinded>(columns: GridColumnWit
 /** Assign column ids if missing. */
 export declare function assignDefaultColumnIds<T extends Kinded>(columns: GridColumn<T>[]): GridColumnWithId<T>[];
 export declare const generateColumnId: (columnIndex: number) => string;
+export declare function dragHandleColumn<T extends Kinded>(columnDef?: Partial<GridColumn<T>>): GridColumn<T>;

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

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateColumnId = exports.assignDefaultColumnIds = exports.calcColumnSizes = exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+exports.dragHandleColumn = exports.generateColumnId = exports.assignDefaultColumnIds = exports.calcColumnSizes = exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const CollapseToggle_1 = require("../components/CollapseToggle");
 const SelectToggle_1 = require("../components/SelectToggle");
 const types_1 = require("../types");
 const utils_1 = require("./utils");
 const utils_2 = require("../../../utils");
+const src_1 = require("../../..");
+const Css_1 = require("../../../Css");
 /** Provides default styling for a GridColumn representing a Date. */
 function column(columnDef) {
     return { ...columnDef };
@@ -193,3 +195,43 @@ function assignDefaultColumnIds(columns) {
 exports.assignDefaultColumnIds = assignDefaultColumnIds;
 const generateColumnId = (columnIndex) => `beamColumn_${columnIndex}`;
 exports.generateColumnId = generateColumnId;
+function dragHandleColumn(columnDef) {
+    const base = {
+        ...nonKindDefaults(),
+        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);
+                        return onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(row, evt);
+                    }, onDragEnd: (evt) => onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(row, evt), 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), css: Css_1.Css.mh100.ma.$, children: (0, jsx_runtime_1.jsx)(src_1.Icon, { icon: "drag" }) })) : undefined,
+            };
+        };
+    });
+}
+exports.dragHandleColumn = dragHandleColumn;

package/dist/components/Table/utils/utils.d.ts

@@ -8,8 +8,16 @@ import { Properties } from "../../../Css";
 /** If a column def return just string text for a given row, apply some default styling. */
 export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment, column: GridColumnWithId<any>, isExpandableHeader: boolean, isExpandable: boolean, minStickyLeftOffset: number, isKeptSelectedRow: boolean): ReactNode;
 export declare function isGridCellContent(content: ReactNode | GridCellContent): content is GridCellContent;
+export type DragData<R extends Kinded> = {
+    rowRenderRef: React.RefObject<HTMLTableRowElement>;
+    onDragStart?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDragEnd?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDrop?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDragEnter?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+    onDragOver?: (row: GridDataRow<R>, event: React.DragEvent<HTMLElement>) => void;
+};
 /** Return the content for a given column def applied to a given row. */
-export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row: GridDataRow<R>, api: GridRowApi<R>, level: number, expanded: boolean): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row: GridDataRow<R>, api: GridRowApi<R>, level: number, expanded: boolean, dragData?: DragData<R>): ReactNode | GridCellContent;
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare const emptyCell: GridCellContent;
@@ -34,3 +42,9 @@ export declare const zIndices: {
 };
 /** Loads an array from sessionStorage, if it exists, or `undefined`. */
 export declare function loadArrayOrUndefined(key: string): any;
+export declare function insertAtIndex<T>(array: Array<T>, element: T, index: number): Array<T>;
+export declare function isCursorBelowMidpoint(target: HTMLElement, clientY: number): boolean;
+export declare function recursivelyGetContainingRow<R extends Kinded>(rowId: string, rowArray: GridDataRow<R>[], parent?: GridDataRow<R>): {
+    array: GridDataRow<R>[];
+    parent: GridDataRow<R> | undefined;
+} | undefined;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadArrayOrUndefined = exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
+exports.recursivelyGetContainingRow = exports.isCursorBelowMidpoint = exports.insertAtIndex = exports.loadArrayOrUndefined = exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Icon_1 = require("../../Icon");
 const ExpandableHeader_1 = require("../components/ExpandableHeader");
@@ -72,12 +72,12 @@ function isContentEmpty(content) {
     return emptyValues.includes(content);
 }
 /** Return the content for a given column def applied to a given row. */
-function applyRowFn(column, row, api, level, expanded) {
+function applyRowFn(column, row, api, level, expanded, dragData) {
     // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
     const maybeContent = column[row.kind];
     if (typeof maybeContent === "function") {
         // Auto-destructure data
-        return maybeContent(row["data"], { row: row, api, level, expanded });
+        return maybeContent(row["data"], { row: row, api, level, expanded, dragData });
     }
     else {
         return maybeContent;
@@ -172,3 +172,31 @@ function loadArrayOrUndefined(key) {
     return ids ? JSON.parse(ids) : undefined;
 }
 exports.loadArrayOrUndefined = loadArrayOrUndefined;
+function insertAtIndex(array, element, index) {
+    return [...array.slice(0, index), element, ...array.slice(index, array.length)];
+}
+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"));
+    return clientY > rect.top + pt + (rect.height - pb) / 2;
+}
+exports.isCursorBelowMidpoint = isCursorBelowMidpoint;
+function recursivelyGetContainingRow(rowId, rowArray, parent) {
+    if (rowArray.some((row) => row.id === rowId)) {
+        return { array: rowArray, parent };
+    }
+    for (let i = 0; i < rowArray.length; i++) {
+        if (!rowArray[i].children) {
+            continue;
+        }
+        const result = recursivelyGetContainingRow(rowId, rowArray[i].children, rowArray[i]);
+        if (result) {
+            return result;
+        }
+    }
+    return undefined;
+}
+exports.recursivelyGetContainingRow = recursivelyGetContainingRow;

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.332.1",
+  "version": "2.333.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",