@homebound/beam 2.233.0 → 2.234.0

package/dist/components/AvatarButton.js

@@ -7,6 +7,7 @@ const react_aria_1 = require("react-aria");
 const components_1 = require("./");
 const Avatar_1 = require("./Avatar");
 const Css_1 = require("../Css");
+const useGetRef_1 = require("../hooks/useGetRef");
 const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
@@ -14,8 +15,7 @@ function AvatarButton(props) {
     const { onClick: onPress, disabled, autoFocus, buttonRef, tooltip, menuTriggerProps, openInNew, forceFocusStyles = false, ...avatarProps } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = buttonRef || (0, react_1.useRef)(null);
+    const ref = (0, useGetRef_1.useGetRef)(buttonRef);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,
         onPress: typeof onPress === "string" ? utils_1.noop : onPress,

package/dist/components/Button.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const components_1 = require("./");
 const Css_1 = require("../Css");
+const useGetRef_1 = require("../hooks/useGetRef");
 const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
@@ -20,7 +21,7 @@ function Button(props) {
     const { label, 
     // Default the icon based on other properties.
     icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : undefined, variant = "primary", size = "sm", buttonRef, } = ariaProps;
-    const ref = buttonRef || (0, react_1.useRef)(null);
+    const ref = (0, useGetRef_1.useGetRef)(buttonRef);
     const tid = (0, useTestIds_1.useTestIds)(props, (0, OverlayTrigger_1.labelOr)(ariaProps, "button"));
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,

package/dist/components/ButtonGroup.js

@@ -14,7 +14,7 @@ function ButtonGroup(props) {
     const tid = (0, utils_1.useTestIds)(props, "buttonGroup");
     return (
     // Adding `line-height: 0` prevent inheriting line-heights that might throw off sizing within the button group.
-    (0, jsx_runtime_1.jsx)("div", { ...tid, css: Css_1.Css.df.lh(0).add(sizeStyles[size]).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
+    (0, jsx_runtime_1.jsx)("div", { ...tid, css: Css_1.Css.df.lh(0).add({ ...sizeStyles[size] }).$, children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
         // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
         (0, jsx_runtime_1.jsx)(GroupButton, { ...buttonProps, disabled: disabled || buttonDisabled, size: size, ...tid }, i))) }));
 }

package/dist/components/IconButton.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const components_1 = require("./");
 const Css_1 = require("../Css");
+const useGetRef_1 = require("../hooks/useGetRef");
 const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
@@ -13,8 +14,7 @@ function IconButton(props) {
     const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, download = false, forceFocusStyles = false, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = buttonRef || (0, react_1.useRef)(null);
+    const ref = (0, useGetRef_1.useGetRef)(buttonRef);
     const { buttonProps } = (0, react_aria_1.useButton)({
         ...ariaProps,
         onPress: typeof onPress === "string" ? utils_1.noop : onPress,

package/dist/components/Layout/PreventBrowserScroll.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithChildren } from "react";
+import { ChildrenOnly } from "../../types";
 /** Intended to wrap the whole application to prevent the browser's native scrolling behavior while also taking the full height of the viewport */
-export declare function PreventBrowserScroll({ children }: PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function PreventBrowserScroll({ children }: ChildrenOnly): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Layout/RightPaneLayout/RightPaneContext.d.ts

@@ -6,7 +6,7 @@ export type RightPaneLayoutContextProps = {
     openInPane: (opts: OpenRightPaneOpts) => void;
     closePane: () => void;
     clearPane: () => void;
-    isRightPaneOpen: Boolean;
+    isRightPaneOpen: boolean;
     rightPaneContent: ReactNode;
 };
 export declare const RightPaneContext: React.Context<RightPaneLayoutContextProps>;

package/dist/components/NavLink.d.ts

@@ -1,4 +1,5 @@
 import type { IconKey } from "./";
+import { Properties } from "../Css";
 import { BeamFocusableProps } from "../interfaces";
 export interface NavLinkProps extends BeamFocusableProps {
     /** active indicates the user is on the current page */
@@ -14,11 +15,11 @@ export interface NavLinkProps extends BeamFocusableProps {
 type NavLinkVariant = "side" | "global";
 export declare function NavLink(props: NavLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function getNavLinkStyles(variant: NavLinkVariant, contrast: boolean): {
-    baseStyles: {};
-    hoverStyles: {};
-    disabledStyles: {};
-    focusRingStyles: {};
-    activeStyles: {};
-    pressedStyles: {};
+    baseStyles: Properties;
+    hoverStyles: Properties;
+    disabledStyles: Properties;
+    focusRingStyles: Properties;
+    activeStyles: Properties;
+    pressedStyles: Properties;
 };
 export {};

package/dist/components/Snackbar/SnackbarContext.d.ts

@@ -1,10 +1,11 @@
-import React, { PropsWithChildren } from "react";
+import React from "react";
 import { SnackbarNoticeProps } from "./SnackbarNotice";
+import { ChildrenOnly } from "../../types";
 import { Offset } from "./Snackbar";
 export type SnackbarContextProps = {
     setNotices: React.Dispatch<React.SetStateAction<SnackbarNoticeProps[]>>;
     setOffset: React.Dispatch<React.SetStateAction<Offset>>;
 };
 export declare const SnackbarContext: React.Context<SnackbarContextProps>;
-export declare function SnackbarProvider(props: PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SnackbarProvider(props: ChildrenOnly): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useSnackbarContext(): SnackbarContextProps;

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

@@ -126,7 +126,7 @@ export interface GridTableProps<R extends Kinded, X> {
  * row `kind` along with the data rows. (Admittedly, out of pragmatism, we do apply some
  * special styling to the row that uses `kind: "header"`.)
  */
-export declare function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = any>(props: GridTableProps<R, X>): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * Filters rows given a client-side text `filter.
  *

package/dist/components/Table/GridTable.js

@@ -103,7 +103,9 @@ function GridTable(props) {
     tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
     const columns = (0, hooks_1.useComputed)(() => tableState.columns
         .filter((c) => tableState.visibleColumnIds.includes(c.id))
-        .flatMap((c) => c.expandColumns && tableState.expandedColumnIds.includes(c.id) ? [c, ...c.expandColumns] : [c]), [tableState]);
+        .flatMap((c) => c.expandColumns && tableState.expandedColumnIds.includes(c.id)
+        ? [c, ...tableState.getExpandedColumns(c)]
+        : [c]), [tableState]);
     // Initialize the sort state. This will only happen on the first render.
     // Once the `TableState.sort` is defined, it will not re-initialize.
     tableState.initSortState(props.sorting, columns);

package/dist/components/Table/components/ExpandableHeader.js

@@ -8,18 +8,30 @@ const TableState_1 = require("../utils/TableState");
 const utils_1 = require("../utils/utils");
 const Css_1 = require("../../../Css");
 const hooks_1 = require("../../../hooks");
+const utils_2 = require("../../../utils");
+const Loader_1 = require("../../Loader");
 function ExpandableHeader(props) {
     const { title, column, minStickyLeftOffset, as } = props;
     const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     const expandedColumnIds = (0, hooks_1.useComputed)(() => tableState.expandedColumnIds, [tableState]);
     const isExpanded = expandedColumnIds.includes(column.id);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     // Do not apply sticky styles when rendering as table. Currently the table does not properly respect column widths, causing the sticky offsets to be incorrect
     const applyStickyStyles = isExpanded && as !== "table";
     const { hoverProps, isHovered } = (0, hooks_1.useHover)({});
-    return ((0, jsx_runtime_1.jsxs)("button", { ...hoverProps, css: Css_1.Css.df.xsMd.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.lightBlue700.if(isHovered).bgGray100.$, onClick: () => tableState.toggleExpandedColumn(column.id), "data-testid": "expandableColumn", children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.tl.lineClamp2
+    return ((0, jsx_runtime_1.jsxs)("button", { ...hoverProps, css: Css_1.Css.df.xsMd.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.lightBlue700.if(isHovered).bgGray100.$, onClick: async () => {
+            if ((0, utils_2.isFunction)(column.expandColumns)) {
+                setIsLoading(true);
+                await tableState.loadExpandedColumns(column);
+                setIsLoading(false);
+            }
+            else {
+                tableState.toggleExpandedColumn(column.id);
+            }
+        }, "data-testid": "expandableColumn", children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.tl.lineClamp2
                     .if(applyStickyStyles)
                     .sticky.leftPx(minStickyLeftOffset + 12)
                     .pr2.mr2.bgWhite.z(utils_1.zIndices.expandableHeaderTitle)
-                    .if(isHovered).bgGray100.$, children: title }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.if(applyStickyStyles).sticky.rightPx(12).z(utils_1.zIndices.expandableHeaderIcon).$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isExpanded ? "chevronLeft" : "chevronRight", inc: 2 }) })] }));
+                    .if(isHovered).bgGray100.$, children: title }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.if(applyStickyStyles).sticky.rightPx(12).z(utils_1.zIndices.expandableHeaderIcon).$, children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "xs" }) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isExpanded ? "chevronLeft" : "chevronRight", inc: 2 }) })] }));
 }
 exports.ExpandableHeader = ExpandableHeader;

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

@@ -3,6 +3,7 @@ import { GridTableApi } from "../GridTableApi";
 import { GridStyle, RowStyles } from "../TableStyles";
 import { DiscriminateUnion, GridColumnWithId, IfAny, Kinded, Pin, RenderAs } from "../types";
 import { SortOn } from "../utils/TableState";
+import { AnyObject } from "../../../types";
 interface RowProps<R extends Kinded> {
     as: RenderAs;
     columns: GridColumnWithId<R>[];
@@ -67,5 +68,5 @@ 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;
-} & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
+} & IfAny<R, AnyObject, DiscriminateUnion<R, "kind", R["kind"]>>;
 export {};

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

@@ -33,6 +33,7 @@ const TableState_1 = require("../utils/TableState");
 const utils_1 = require("../utils/utils");
 const Css_1 = require("../../../Css");
 const hooks_1 = require("../../../hooks");
+const utils_2 = require("../../../utils");
 const shallowEqual_1 = require("../../../utils/shallowEqual");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
@@ -75,7 +76,7 @@ function RowImpl(props) {
             var _a, _b, _c, _d, _e, _f;
             // Need to keep track of the expanded columns so we can add borders as expected for the header rows
             const isExpanded = tableState.expandedColumnIds.includes(column.id);
-            const numExpandedColumns = isExpanded ? (_b = (_a = column.expandColumns) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
+            const numExpandedColumns = isExpanded ? (_b = (_a = tableState.getExpandedColumns(column)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
             const { wrapAction = true, isAction = false } = column;
             const applyFirstContentColumnStyles = !isHeader && !isAction && !firstContentColumnStylesApplied;
             firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
@@ -116,7 +117,9 @@ function RowImpl(props) {
                 (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = (0, utils_1.getAlignment)(column, maybeContent);
             const justificationCss = (0, utils_1.getJustification)(column, maybeContent, as, alignment);
-            const isExpandable = (column.expandColumns && column.expandColumns.length > 0) || column.expandedWidth !== undefined;
+            const isExpandable = (0, utils_2.isFunction)(column.expandColumns) ||
+                (column.expandColumns && column.expandColumns.length > 0) ||
+                column.expandedWidth !== undefined;
             const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader || isTotals || isExpandableHeader, column, columnIndex, maybeContent);
             const maybeSticky = (_c = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _c !== void 0 ? _c : undefined;

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

@@ -22,14 +22,14 @@ export type GridCellContent = {
     /** Allows the cell to stay in place when the user scrolls horizontally, i.e. frozen columns. */
     sticky?: "left" | "right";
     /** If provided, content of the cell will be wrapped within a <button /> or <a /> tag depending on if the value is a function or a string. */
-    onClick?: () => {} | string;
+    onClick?: VoidFunction | string;
     /** Custom css to apply directly to this cell, i.e. cell-specific borders. */
     css?: Properties;
     /** Allows cell to reveal content when the user hovers over a row. Content must be wrapped in an element in order to be hidden. IE <div>{value}</div>*/
     revealOnRowHover?: true;
 };
 /** Allows rendering a specific cell. */
-export type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined, onClick: (() => void) | undefined) => ReactNode;
+export type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined, onClick: VoidFunction | undefined) => ReactNode;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 export declare const defaultRenderFn: (as: RenderAs) => RenderCellFn<any>;
 /**

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

@@ -79,13 +79,13 @@ export type GridColumn<R extends Kinded> = {
     /** Flag that will allow to know which hide-able columns are visible on initial load */
     initVisible?: boolean;
     /** A list of columns that should only be shown when this column is "expanded" */
-    expandColumns?: GridColumn<R>[];
+    expandColumns?: GridColumn<R>[] | (() => Promise<GridColumn<R>[]>);
     /** Determines whether the group should initially be expanded on load of the table */
     initExpanded?: boolean;
 };
 export type GridColumnWithId<R extends Kinded> = GridColumn<R> & {
     id: string;
-    expandColumns?: GridColumnWithId<R>[];
+    expandColumns?: GridColumnWithId<R>[] | (() => Promise<GridColumn<R>[]>);
 };
 export declare const nonKindGridColumnKeys: string[];
 /**

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

@@ -35,6 +35,7 @@ export declare class TableState {
     private expandedColumns;
     visibleColumns: ObservableSet<string>;
     private visibleColumnsStorageKey;
+    private loadedColumns;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
@@ -46,6 +47,8 @@ export declare class TableState {
     get sortState(): SortState | undefined;
     setRows(rows: GridDataRow<any>[]): void;
     setColumns(columns: GridColumnWithId<any>[], visibleColumnsStorageKey: string | undefined): void;
+    loadExpandedColumns(column: GridColumnWithId<any>): Promise<void>;
+    getExpandedColumns(column: GridColumnWithId<any>): GridColumnWithId<any>[];
     setVisibleColumns(ids: string[]): void;
     get visibleColumnIds(): string[];
     get expandedColumnIds(): string[];

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

@@ -9,6 +9,8 @@ const mobx_1 = require("mobx");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("./utils");
 const visitor_1 = require("./visitor");
+const utils_2 = require("../../../utils");
+const columns_1 = require("./columns");
 /**
  * Stores the collapsed & selected state of rows.
  *
@@ -49,6 +51,8 @@ class TableState {
         // An observable set of column ids to keep track of which columns are visible
         this.visibleColumns = new mobx_1.ObservableSet();
         this.visibleColumnsStorageKey = "";
+        // Cache for already loaded expandable columns
+        this.loadedColumns = new Map();
         // 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, {
@@ -185,6 +189,23 @@ class TableState {
             this.expandedColumns.replace(expandedColumnIds);
         }
     }
+    // load and trigger column to be expanded
+    async loadExpandedColumns(column) {
+        // if we dont have anything in our cache and our expanded columns are a function
+        if (!this.loadedColumns.has(column.id) && (0, utils_2.isFunction)(column.expandColumns)) {
+            // set our result to the function call of expandColumns
+            const result = await column.expandColumns();
+            // once we have the loaded columns, add result to local cache
+            this.loadedColumns.set(column.id, (0, columns_1.assignDefaultColumnIds)(result));
+        }
+        // once column is in local cache, then toggle
+        this.toggleExpandedColumn(column.id);
+    }
+    // if there is a promise, then load the expandable columns from the cache, if not then return the expandedColumns
+    getExpandedColumns(column) {
+        var _a, _b;
+        return (0, utils_2.isFunction)(column.expandColumns) ? (_a = this.loadedColumns.get(column.id)) !== null && _a !== void 0 ? _a : [] : (_b = column.expandColumns) !== null && _b !== void 0 ? _b : [];
+    }
     setVisibleColumns(ids) {
         sessionStorage.setItem(this.visibleColumnsStorageKey, JSON.stringify(ids));
         this.visibleColumns.replace(ids);

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

@@ -137,7 +137,7 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColum
         // Otherwise return the `calc()` value
         return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
     }
-    let sizes = columns.map(({ id, expandedWidth, w: _w }) => {
+    const sizes = columns.map(({ id, expandedWidth, w: _w }) => {
         const w = expandedColumnIds.includes(id) && expandedWidth !== undefined ? expandedWidth : _w;
         if (typeof w === "undefined") {
             return fr(1);
@@ -167,17 +167,19 @@ function assignDefaultColumnIds(columns) {
     return columns.map((c, idx) => {
         var _a;
         const { expandColumns } = c;
-        const expandColumnsWithId = expandColumns === null || expandColumns === void 0 ? void 0 : expandColumns.map((ec, ecIdx) => {
-            var _a;
-            return ({
-                ...ec,
-                id: (_a = ec.id) !== null && _a !== void 0 ? _a : `${(0, exports.generateColumnId)(idx)}_${ecIdx}`,
-                // Defining this as undefined to make TS happy for now.
-                // If we do not explicitly set to `undefined`, TS thinks `expandColumns` could still be of type GridColumn<T> (not WithId).
-                // We only support a single level of expanding columns, so this is safe to do.
-                expandColumns: undefined,
+        const expandColumnsWithId = (0, utils_2.isFunction)(expandColumns)
+            ? expandColumns
+            : expandColumns === null || expandColumns === void 0 ? void 0 : expandColumns.map((ec, ecIdx) => {
+                var _a;
+                return ({
+                    ...ec,
+                    id: (_a = ec.id) !== null && _a !== void 0 ? _a : `${(0, exports.generateColumnId)(idx)}_${ecIdx}`,
+                    // Defining this as undefined to make TS happy for now.
+                    // If we do not explicitly set to `undefined`, TS thinks `expandColumns` could still be of type GridColumn<T> (not WithId).
+                    // We only support a single level of expanding columns, so this is safe to do.
+                    expandColumns: undefined,
+                });
             });
-        });
         return Object.assign(c, { id: (_a = c.id) !== null && _a !== void 0 ? _a : (0, exports.generateColumnId)(idx), expandColumns: expandColumnsWithId });
     });
 }

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

@@ -143,7 +143,7 @@ function maybeApplyFunction(row, maybeFn) {
 }
 exports.maybeApplyFunction = maybeApplyFunction;
 function matchesFilter(maybeContent, filter) {
-    let value = filterValue(maybeContent);
+    const value = filterValue(maybeContent);
     if (typeof value === "string") {
         return value.toLowerCase().includes(filter.toLowerCase());
     }

package/dist/components/Tabs.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import type { IconKey } from "./";
 import { Margin, Only, Padding, Xss } from "../Css";
+import { AnyObject } from "../types";
 export interface Tab<V extends string = string> {
     name: string;
     value: V;
@@ -48,9 +49,9 @@ interface RequiredRenderRouteTabs<V extends string, X> extends Omit<RouteTabsPro
  * and `TabContent` components directly.
  */
 export declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: RequiredRenderTabs<V, X> | RequiredRenderRouteTabs<V, X>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TabContent<V extends string>(props: Omit<RequiredRenderTabs<V, {}>, "onChange"> | RequiredRenderRouteTabs<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TabContent<V extends string>(props: Omit<RequiredRenderTabs<V, AnyObject>, "onChange"> | RequiredRenderRouteTabs<V, AnyObject>): import("@emotion/react/jsx-runtime").JSX.Element;
 /** The top list of tabs. */
-export declare function Tabs<V extends string>(props: TabsProps<V, {}> | RouteTabsProps<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Tabs<V extends string>(props: TabsProps<V, AnyObject> | RouteTabsProps<V, AnyObject>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function getTabStyles(): {
     baseStyles: {
         display: import("csstype").Property.Display | undefined;

package/dist/components/Toast/ToastContext.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { ToastTypes } from "./Toast";
 export interface ToastNoticeProps {
     type: ToastTypes;
@@ -9,5 +9,7 @@ export type ToastContextProps = {
     setNotice: React.Dispatch<React.SetStateAction<ToastNoticeProps | undefined>>;
 };
 export declare const ToastContext: React.Context<ToastContextProps>;
-export declare function ToastProvider(props: PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ToastProvider(props: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useToastContext(): ToastContextProps;

package/dist/components/internal/Popover.js

@@ -21,7 +21,7 @@ function Popover(props) {
             if ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e)) {
                 return true;
             }
-            //Do not close the Popover if the user is interacting with a tribute menu, dialog or alert on top of it, otherwise close it.
+            // Do not close the Popover if the user is interacting with a tribute menu, dialog or alert on top of it, otherwise close it.
             return !(e.closest(".tribute-container") || e.closest("[role='dialog']") || e.closest("[role='alert']"));
         },
         ...others,

package/dist/hooks/useGetRef.d.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject, RefObject } from "react";
+/**
+ * Replaces code like `const ref = passedRef || useRef(null)` which was triggering rules-of-hooks violations. Used
+ * to sometimes accept a caller's ref, or if they did not pass one, use an internal one anyway.
+ */
+export declare const useGetRef: <T extends HTMLElement>(maybeRef: RefObject<T> | undefined) => MutableRefObject<T | null>;

package/dist/hooks/useGetRef.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetRef = void 0;
+const react_1 = require("react");
+/**
+ * Replaces code like `const ref = passedRef || useRef(null)` which was triggering rules-of-hooks violations. Used
+ * to sometimes accept a caller's ref, or if they did not pass one, use an internal one anyway.
+ */
+const useGetRef = (maybeRef) => {
+    const newRef = (0, react_1.useRef)(null);
+    return maybeRef || newRef;
+};
+exports.useGetRef = useGetRef;

package/dist/inputs/DateFields/DateFieldBase.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
 import { Matcher } from "react-day-picker";
+import { Properties } from "../../Css";
 import { DateFieldMode, dateFormats } from "./utils";
 import { TextFieldBaseProps } from "../TextFieldBase";
 import { DateRange } from "../../types";
-export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact"> {
+export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact"> {
     label: string;
     /** Called when the component loses focus */
     onBlur?: () => void;

package/dist/inputs/DateFields/DateFieldBase.js

@@ -125,8 +125,8 @@ function DateFieldBase(props) {
             setWipValue(value);
             setInputValue((_a = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         // We don't want to update the internal `wipValue` or `inputValue` back to `value` just because focus state changes or the overlay opens
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value, dateFormat]);
     // Create a type safe `onChange` to handle both Single and Range date fields.
     const onChange = (0, react_1.useCallback)((d) => {

package/dist/inputs/DateFields/utils.js

@@ -58,7 +58,7 @@ function parseDateString(str, format) {
     }
     const month = parseInt(split[0], 10) - 1;
     const day = parseInt(split[1], 10);
-    let year = parseInt(split[2], 10);
+    const year = parseInt(split[2], 10);
     // This is also ~verbatim copy/pasted from react-day-picker
     if (isNaN(year) ||
         String(year).length > 4 ||

package/dist/inputs/TextFieldBase.js

@@ -10,6 +10,7 @@ const Label_1 = require("../components/Label");
 const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
 const labelUtils_1 = require("../forms/labelUtils");
+const useGetRef_1 = require("../hooks/useGetRef");
 const ErrorMessage_1 = require("./ErrorMessage");
 const defaultTestId_1 = require("../utils/defaultTestId");
 const useTestIds_1 = require("../utils/useTestIds");
@@ -28,7 +29,7 @@ function TextFieldBase(props) {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
     const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({ onFocusWithinChange: setIsFocused });
-    const fieldRef = inputRef !== null && inputRef !== void 0 ? inputRef : (0, react_1.useRef)();
+    const fieldRef = (0, useGetRef_1.useGetRef)(inputRef);
     const maybeSmaller = compound ? 2 : 0;
     const fieldHeight = 40;
     const compactFieldHeight = 32;

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { DateRange as _DateRange } from "react-day-picker";
 export type { _DateRange as DateRange };
 export type HasIdAndName<V = string> = {
@@ -12,3 +13,7 @@ export type CanCloseCheck = {
     continueText?: string;
 } | CheckFn;
 export declare function assertNever(x: never): never;
+export type AnyObject = Record<string, unknown>;
+export type ChildrenOnly = {
+    children: React.ReactNode;
+};

package/dist/utils/index.d.ts

@@ -28,4 +28,5 @@ export declare class EmptyRef<T> implements MutableRefObject<T> {
 }
 export declare const isAbsoluteUrl: (url: string) => boolean;
 export declare function areArraysEqual(a: any[], b: any[]): boolean;
-export declare function isPromise(obj: void | Promise<void>): obj is Promise<void>;
+export declare function isPromise(obj: any | Promise<any>): obj is Promise<any>;
+export declare function isFunction(f: any): f is Function;

package/dist/utils/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isPromise = exports.areArraysEqual = exports.isAbsoluteUrl = exports.EmptyRef = exports.safeEntries = exports.noop = exports.omitKey = exports.safeKeys = exports.maybeCall = exports.toGroupState = exports.toToggleState = void 0;
+exports.isFunction = exports.isPromise = exports.areArraysEqual = exports.isAbsoluteUrl = exports.EmptyRef = exports.safeEntries = exports.noop = exports.omitKey = exports.safeKeys = exports.maybeCall = exports.toGroupState = exports.toToggleState = void 0;
 /** Adapts our state to what useToggleState returns in a stateless manner. */
 function toToggleState(isSelected, onChange) {
     return {
@@ -86,3 +86,7 @@ function isPromise(obj) {
     return typeof obj === "object" && "then" in obj && typeof obj.then === "function";
 }
 exports.isPromise = isPromise;
+function isFunction(f) {
+    return typeof f === "function";
+}
+exports.isFunction = isFunction;

package/dist/utils/sb.d.ts

@@ -1,5 +1,6 @@
 import { DecoratorFn } from "@storybook/react";
 import { ReactNode } from "react";
+import { Properties } from "../Css";
 export declare function withRouter(url?: string, path?: string): DecoratorFn;
 type StoryParameters = {
     chromatic?: {
@@ -21,5 +22,5 @@ export declare const withBeamDecorator: (Story: () => JSX.Element) => import("@e
  * Decorator to set explicit width and height dimensions for a story.
  * Used to help Chromatic properly render positioned `fixed` components.
  */
-export declare const withDimensions: (width?: number | string, height?: number | string, xss?: {}) => (Story: () => JSX.Element) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const withDimensions: (width?: number | string, height?: number | string, xss?: Properties) => (Story: () => JSX.Element) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/package.json

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