@homebound/beam 2.304.0 → 2.305.0

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

@@ -1,5 +1,6 @@
-import { GridDataRow, SelectedState } from "../../..";
+import { GridDataRow } from "../components/Row";
 import { RowStates } from "./RowStates";
+import { SelectedState } from "./TableState";
 /**
  * A reactive/observable state of each GridDataRow's current behavior.
  *
@@ -7,6 +8,7 @@ import { RowStates } from "./RowStates";
  * that uses parent/children easier to write, i.e. selected-ness and collapsed-ness.
  */
 export declare class RowState {
+    private states;
     /** Our row, only ref observed, so we don't crawl into GraphQL fragments. */
     row: GridDataRow<any>;
     /** Our children row states, as of the latest `props.rows`, without any filtering applied. */

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowState = void 0;
 const mobx_1 = require("mobx");
-const src_1 = require("../../..");
+const utils_1 = require("./utils");
 /**
  * A reactive/observable state of each GridDataRow's current behavior.
  *
@@ -15,6 +15,7 @@ class RowState {
     // isEffectiveMatched = isDirectlyMatched || hasMatchedChildren
     constructor(states, row) {
         var _a;
+        this.states = states;
         /** Our children row states, as of the latest `props.rows`, without any filtering applied. */
         this.children = undefined;
         /** Whether we match a client-side filter; true if no filter is in place. */
@@ -108,21 +109,19 @@ class RowState {
      * child of a selected parent row.
      */
     select(selected) {
-        if (this.row.selectable === false)
-            return;
-        this.selected = selected;
+        if (this.row.selectable !== false) {
+            this.selected = selected;
+        }
         // We don't check inferSelectedState here, b/c even if the parent is considered selectable
         // on its own, we still push down selected-ness to our visible children.
-        if (this.children) {
-            for (const child of this.visibleChildren) {
-                child.select(selected);
-            }
+        for (const child of this.visibleChildren) {
+            child.select(selected);
         }
     }
     /** Marks the row as removed from `props.rows`, to potentially become kept. */
     markRemoved() {
         // The kept group is never in `props.rows`, so ignore asks to delete it
-        if (this.row.kind === src_1.KEPT_GROUP)
+        if (this.row.kind === utils_1.KEPT_GROUP)
             return;
         this.removed = this.selected && this.removed !== "hard" ? "soft" : "hard";
     }
@@ -136,7 +135,7 @@ class RowState {
         // - or it has (probably) been server-side filtered
         return (this.selected &&
             // Headers, totals, etc., do not need keeping
-            !src_1.reservedRowKinds.includes(this.row.kind) &&
+            !utils_1.reservedRowKinds.includes(this.row.kind) &&
             !this.isParent &&
             (!this.isMatched || this.removed === "soft"));
     }
@@ -144,15 +143,15 @@ class RowState {
         return this.row.inferSelectedState !== false;
     }
     get visibleChildren() {
-        var _a, _b, _c;
-        // The keptGroup should treat all of its children as visible, as this makes select/unselect all work.
-        if (this.row.kind === src_1.KEPT_GROUP)
-            return (_a = this.children) !== null && _a !== void 0 ? _a : [];
+        var _a, _b;
+        // The keptGroup is special and its children are the dynamically kept rows
+        if (this.row.kind === utils_1.KEPT_GROUP)
+            return this.states.keptRows;
         // Ignore hard-deleted rows, i.e. from `api.deleteRows`; in theory any hard-deleted
         // rows should be removed from `this.children` anyway, by a change to `props.rows`,
         // but just in case the user calls _only_ `api.deleteRows`, and expects the row to
         // go away, go ahead and filter them out here.
-        return (_c = (_b = this.children) === null || _b === void 0 ? void 0 : _b.filter((c) => c.isMatched === true && c.removed !== "hard")) !== null && _c !== void 0 ? _c : [];
+        return (_b = (_a = this.children) === null || _a === void 0 ? void 0 : _a.filter((c) => c.isMatched === true && c.removed !== "hard")) !== null && _b !== void 0 ? _b : [];
     }
     /**
      * Returns whether this row should act like a parent.

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

@@ -31,5 +31,5 @@ export declare class RowStates {
     get keptRows(): RowState[];
     get collapsedRows(): RowState[];
     /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
-    private creatKeptGroupRow;
+    private createKeptGroupRow;
 }

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

@@ -14,7 +14,7 @@ class RowStates {
         this.map = new mobx_1.ObservableMap();
         this.storage = new RowStorage_1.RowStorage(this);
         // Pre-create our keptGroupRow for if/when we need it.
-        this.keptGroupRow = this.creatKeptGroupRow();
+        this.keptGroupRow = this.createKeptGroupRow();
         this.header = undefined;
         /** The first level of rows, i.e. not the header (or kept group), but the totals + top-level children. */
         this.topRows = [];
@@ -65,22 +65,16 @@ class RowStates {
         this.topRows = rows.filter((row) => row !== headerRow).map((row) => addRowAndChildren(row));
         // And attach them to the header for select-all/etc. to work
         if (this.header) {
-            this.header.children = this.topRows.filter((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind));
+            this.header.children = [
+                // Always add the keptGroupRow, and we'll use keptGroupRow.isMatched=true/false to keep it
+                // from messing up "header is all selected" if its hidden/when there are no kept rows.
+                this.keptGroupRow,
+                ...this.topRows.filter((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind)),
+            ];
         }
         // Then mark any remaining as removed
         for (const state of existing)
             state.markRemoved();
-        const keptRows = this.keptRows;
-        if (keptRows.length > 0) {
-            // Stitch the current keptRows into the placeholder keptGroupRow
-            this.keptGroupRow.children = keptRows;
-            this.keptGroupRow.row.children = keptRows.map((rs) => rs.row);
-            // And then stitch the keptGroupRow itself into the root header, so that the kept rows
-            // are treated as just another child for the header's select/unselect all to work.
-            if (this.header) {
-                this.header.children.unshift(this.keptGroupRow);
-            }
-        }
         // After the first load of real data, we detach collapse state, to respect
         // any incoming initCollapsed.
         if (this.topRows.some((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind))) {
@@ -134,6 +128,11 @@ class RowStates {
                 rs.isMatched = ids.includes(rs.row.id);
             }
         }
+        // We cheat a little and pretend the "kept group matches the filter" not based on it itself
+        // literally matching the filter, or its children matching the filter (which is typically
+        // how the filter logic works), but if it just has any child rows at all (which actually means
+        // its children did _not_ match the filter, but are kept).
+        this.keptGroupRow.isMatched = this.keptRows.length > 0;
     }
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
     get keptRows() {
@@ -143,10 +142,20 @@ class RowStates {
         return this.allStates.filter((rs) => rs.collapsed);
     }
     /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
-    creatKeptGroupRow() {
+    createKeptGroupRow() {
         // The "group row" for selected rows that are hidden by filters and add the children
-        const keptGroupRow = { id: utils_1.KEPT_GROUP, kind: utils_1.KEPT_GROUP, initCollapsed: true, data: undefined };
-        return new RowState_1.RowState(this, keptGroupRow);
+        const keptGroupRow = {
+            id: utils_1.KEPT_GROUP,
+            kind: utils_1.KEPT_GROUP,
+            initCollapsed: true,
+            selectable: false,
+            data: undefined,
+            children: [],
+        };
+        const rs = new RowState_1.RowState(this, keptGroupRow);
+        // Make the RowState behave like a parent, even though we calc its visibleChildren.
+        rs.children = [];
+        return rs;
     }
 }
 exports.RowStates = RowStates;

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

@@ -45,12 +45,8 @@ class TableState {
         // Make ourselves an observable so that mobx will do caching of .collapseIds so
         // that it'll be a stable identity for GridTable to useMemo against.
         (0, mobx_1.makeAutoObservable)(this, {
-            // We only shallow observe rows so that:
-            // a) we don't deeply/needlessly proxy-ize a large Apollo fragment cache, but
-            // b) if rows changes, we re-run computeds like getSelectedRows that may need to see the
-            // updated _contents_ of a given row, even if our other selected/matched row states don't change.
-            // (as any b/c rows is private, so the mapped type doesn't see it)
-            rows: mobx_1.observable.shallow,
+            // We use `ref`s so that observables can watch the immutable data change w/o deeply proxy-ifying Apollo fragments
+            rows: mobx_1.observable.ref,
             columns: mobx_1.observable.ref,
         });
         // If the kept rows went from empty to not empty, then introduce the SELECTED_GROUP row as collapsed
@@ -119,10 +115,6 @@ class TableState {
     }
     // Updates the list of rows and regenerates the collapsedRows property if needed.
     setRows(rows) {
-        // Note that because of using `rows: observable.shallow` above, this is always
-        // false, and this logic runs on every render. We can eventually fix this, but it
-        // is convenient b/c it puts no-longer-kept rows back into the right spot in their
-        // parents.
         if (rows !== this.rows) {
             this.rowStates.setRows(rows);
             this.rows = rows;

package/dist/inputs/DateFields/DateFieldBase.js

@@ -26,8 +26,6 @@ function DateFieldBase(props) {
     const overlayRef = (0, react_1.useRef)(null);
     // Local focus ref used to avoid updating WIP values
     const isFocused = (0, react_1.useRef)(false);
-    // Ref helper to identify when focus is returned to the TextField due to the DatePicker closing.
-    const closingDatePicker = (0, react_1.useRef)(false);
     const dateFormat = (0, utils_1.getDateFormat)(format);
     // The `wipValue` allows the "range" mode to set the value to `undefined`, even if the `onChange` response cannot be undefined.
     // This makes working within the DateRangePicker much more user-friendly.
@@ -45,10 +43,6 @@ function DateFieldBase(props) {
         value: inputValue,
     };
     const state = (0, react_stately_1.useOverlayTriggerState)({ isOpen: defaultOpen });
-    const onPickerClose = (0, react_1.useCallback)(() => {
-        closingDatePicker.current = true;
-        state.close();
-    }, [state]);
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
         // Setting `inputMode` to none. This disables the virtual keyboard from being triggered on touch devices
@@ -56,12 +50,6 @@ function DateFieldBase(props) {
         onFocus: () => {
             var _a;
             isFocused.current = true;
-            // Open overlay on focus of the input, only if the focus is not triggered due to the overlay being closed.
-            if (!closingDatePicker.current) {
-                state.open();
-            }
-            // Reset the closingDatePicker ref to false, so that the overlay can be opened again on the next focus event
-            closingDatePicker.current = false;
             (0, utils_2.maybeCall)(onFocus);
             if (wipValue && dateFormat !== utils_1.dateFormats.short) {
                 // When focused, change to use the "short" date format, as it is simpler to update by hand and parse.
@@ -74,7 +62,6 @@ function DateFieldBase(props) {
             var _a, _b;
             // Resets the ref variables when the input loses focus.
             isFocused.current = false;
-            closingDatePicker.current = false;
             // If interacting with the overlay or the input, then assume the user is still working within the DatePicker and return early to not trigger onBlur functionality.
             if ((inputWrapRef.current && inputWrapRef.current.contains(e.relatedTarget)) ||
                 (overlayRef.current && overlayRef.current.contains(e.relatedTarget))) {
@@ -107,18 +94,13 @@ function DateFieldBase(props) {
         },
     }, inputRef);
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: "dialog" }, state, buttonRef);
-    const { buttonProps } = (0, react_aria_1.useButton)({
-        ...triggerProps,
-        isDisabled: isDisabled || isReadOnly,
-        // When pressed then move focus the input, which will select the text and trigger the DatePicker to open
-        onPress: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-    }, buttonRef);
+    const { buttonProps } = (0, react_aria_1.useButton)({ ...triggerProps, isDisabled: isDisabled || isReadOnly, onPress: state.open }, buttonRef);
     const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
         targetRef: inputWrapRef,
         overlayRef,
         shouldFlip: true,
         isOpen: state.isOpen,
-        onClose: onPickerClose,
+        onClose: state.close,
         placement: "bottom left",
         shouldUpdatePosition: true,
         offset: 4,
@@ -164,11 +146,11 @@ function DateFieldBase(props) {
                 setInputValue("");
                 onChange(undefined);
             } })) }));
-    const calendarButton = ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1, ...tid.calendarButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }) }));
+    const calendarButton = ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, ...tid.calendarButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }) }));
     const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, ...{ internalProps: { forceFocus: state.isOpen } }, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, onChange: (v) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, ...{ internalProps: { forceFocus: state.isOpen } }, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize, onClick: state.open }, inputRef: inputRef, inputWrapRef: inputWrapRef, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
-                    onPickerClose();
+                    state.close();
                     if (v) {
                         setInputValue(v);
                         // If changing the value directly (vs using the DatePicker), then we always use the short format
@@ -179,16 +161,16 @@ function DateFieldBase(props) {
                     else if (v === undefined) {
                         setInputValue("");
                     }
-                }, endAdornment: !iconLeft && EndFieldButtons, startAdornment: !hideCalendarIcon && iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: onPickerClose, isOpen: state.isOpen, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { autoFocus: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: overlayProps, children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, { range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
+                }, endAdornment: !iconLeft && EndFieldButtons, startAdornment: !hideCalendarIcon && iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: overlayProps, children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, { range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
                                 var _a;
                                 // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
                                 setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                                 onChange(dr);
                             }, useYearPicker: isRangeFilterField, ...tid.datePicker })) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, { value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
                                 var _a;
+                                state.close();
                                 setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                                 onChange(d);
-                                onPickerClose();
                             }, ...tid.datePicker })) }) }) }))] }));
 }
 exports.DateFieldBase = DateFieldBase;

package/package.json

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