@homebound/beam 2.265.0 → 2.266.1

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

@@ -1,9 +1,11 @@
+import { ReactNode } from "react";
 import { GridColumnWithId, Kinded, RenderAs } from "../types";
 interface ExpandableHeaderProps<R extends Kinded> {
     title: string;
     column: GridColumnWithId<R>;
     minStickyLeftOffset: number;
     as: RenderAs;
+    tooltipEl?: ReactNode;
 }
 export declare function ExpandableHeader<R extends Kinded>(props: ExpandableHeaderProps<R>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -11,7 +11,7 @@ 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 { title, column, minStickyLeftOffset, as, tooltipEl } = 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);
@@ -27,10 +27,10 @@ function ExpandableHeader(props) {
             }
             // manually calling this as loadExpandedColumns does not toggle
             tableState.toggleExpandedColumn(column.id);
-        }, "data-testid": "expandableColumn", children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.tl.lineClamp2
+        }, "data-testid": "expandableColumn", children: [(0, jsx_runtime_1.jsxs)("span", { css: Css_1.Css.df.aic
                     .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: 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 }) })] }));
+                    .if(isHovered).bgGray100.$, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.tl.lineClamp2.$, children: title }), tooltipEl] }), (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/SortHeader.d.ts

@@ -1,9 +1,11 @@
+import { ReactNode } from "react";
 import { Properties } from "../../../Css";
 interface SortHeaderProps {
     content: string;
     xss?: Properties;
     iconOnLeft?: boolean;
     sortKey: string;
+    tooltipEl?: ReactNode;
 }
 /**
  * Wraps column header names with up/down sorting icons.

package/dist/components/Table/components/SortHeader.js

@@ -20,7 +20,7 @@ const useTestIds_1 = require("../../../utils/useTestIds");
  *   current sort state + `toggleSort` function
  */
 function SortHeader(props) {
-    const { content, xss, iconOnLeft = false, sortKey } = props;
+    const { content, xss, iconOnLeft = false, sortKey, tooltipEl } = props;
     const { isHovered, hoverProps } = (0, hooks_1.useHover)({});
     const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     const current = (0, hooks_1.useComputed)(() => { var _a; return (_a = tableState.sortState) === null || _a === void 0 ? void 0 : _a.current; }, [tableState]);
@@ -33,6 +33,6 @@ function SortHeader(props) {
                     .if(isHovered || sorted !== undefined)
                     .visibility("visible").$,
             }, inc: 2, ...tid.icon }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { ...tid, css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss }, ...hoverProps, onClick: toggleSort, children: [iconOnLeft && icon, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, children: content }), !iconOnLeft && icon] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...tid, css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss }, ...hoverProps, onClick: toggleSort, children: [iconOnLeft && icon, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, children: content }), tooltipEl, !iconOnLeft && icon] }));
 }
 exports.SortHeader = SortHeader;

package/dist/components/Table/components/cell.js

@@ -5,12 +5,11 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const CssReset_1 = require("../../CssReset");
 const TableStyles_1 = require("../TableStyles");
-const Tooltip_1 = require("../../Tooltip");
 const Css_1 = require("../../../Css");
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: onClick, children: (0, Tooltip_1.maybeTooltip)({ title: tooltip, placement: "top", children: content }) }, key));
+    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: onClick, children: content }, key));
 };
 exports.defaultRenderFn = defaultRenderFn;
 /**
@@ -19,24 +18,16 @@ exports.defaultRenderFn = defaultRenderFn;
  * */
 const headerRenderFn = (column, as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const Cell = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames, ...(as === "table" && { colSpan }), children: (0, Tooltip_1.maybeTooltip)({ title: tooltip, placement: "top", children: content }) }, key));
+    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames, ...(as === "table" && { colSpan }), children: content }, key));
 };
 exports.headerRenderFn = headerRenderFn;
 /** Renders a cell element when a row link is in play. */
 const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const to = rowStyle.rowLink(row);
     if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, children: (0, Tooltip_1.maybeTooltip)({
-                title: tooltip,
-                placement: "top",
-                children: ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink, children: content })),
-            }) }, key));
+        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink, children: content }) }, key));
     }
-    return (0, Tooltip_1.maybeTooltip)({
-        title: tooltip,
-        placement: "top",
-        children: ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}`, children: content }, key)),
-    });
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}`, children: content }, key));
 };
 exports.rowLinkRenderFn = rowLinkRenderFn;
 /** Renders a cell that will fire the RowStyle.onClick. */
@@ -45,6 +36,6 @@ const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNa
     return ((0, jsx_runtime_1.jsx)(Cell, { ...{ key }, css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: (e) => {
             rowStyle.onClick(row, api);
             onClick && onClick();
-        }, children: (0, Tooltip_1.maybeTooltip)({ title: tooltip, placement: "top", children: content }) }));
+        }, children: content }));
 };
 exports.rowClickRenderFn = rowClickRenderFn;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.zIndices = exports.reservedRowKinds = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.getIndentationCss = 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");
 const SortHeader_1 = require("../components/SortHeader");
 const Css_1 = require("../../../Css");
@@ -26,6 +27,8 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
         // for those tables.
         throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
     }
+    const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : undefined;
+    const tooltipEl = tooltip ? ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.mlPx(4).$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "infoCircle", tooltip: tooltip, inc: 2, color: Css_1.Palette.Gray600 }) })) : null;
     content =
         isGridCellContent(maybeContent) && !!maybeContent.onClick
             ? (0, getInteractiveElement_1.getButtonOrLink)(content, maybeContent.onClick, {
@@ -33,27 +36,27 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
             })
             : content;
     if (content && typeof content === "string" && isHeader && canSortColumn) {
-        return ((0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right", sortKey: (_b = column.serverSideSortKey) !== null && _b !== void 0 ? _b : column.id }));
+        return ((0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right", sortKey: (_b = column.serverSideSortKey) !== null && _b !== void 0 ? _b : column.id, tooltipEl: tooltipEl }));
     }
     else if (content && typeof content === "string" && isExpandableHeader && isExpandable) {
-        return (0, jsx_runtime_1.jsx)(ExpandableHeader_1.ExpandableHeader, { title: content, column: column, minStickyLeftOffset: minStickyLeftOffset, as: as });
+        return ((0, jsx_runtime_1.jsx)(ExpandableHeader_1.ExpandableHeader, { title: content, column: column, minStickyLeftOffset: minStickyLeftOffset, as: as, tooltipEl: tooltipEl }));
     }
     else if (content && typeof content === "string" && isExpandableHeader) {
-        return (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, children: content });
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, children: content }), tooltipEl] }));
     }
     else if (!isContentEmpty(content) && isHeader && typeof content === "string") {
-        return ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, title: content, children: content }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp2.$, title: content, children: content }), tooltipEl] }));
     }
     else if (!isHeader && content && ((_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap) === false && typeof content === "string") {
         // In order to truncate the text properly, then we need to wrap it in another element
         // as our cell element is a flex container, which don't allow for applying truncation styles directly on it.
-        return ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.truncate.mw0.$, title: content, children: content }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.truncate.mw0.$, title: content, children: content }), tooltipEl] }));
     }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.
         return style.emptyCell;
     }
-    return content;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, tooltipEl] }));
 }
 exports.toContent = toContent;
 function isGridCellContent(content) {

package/dist/inputs/internal/ComboBoxBase.js

@@ -133,11 +133,10 @@ function ComboBoxBase(props) {
             maybeInitLoad();
             firstOpen.current = false;
         }
-        setFieldState((prevState) => ({
-            ...prevState,
-            // When using the multiselect field, always empty the input upon open.
-            inputValue: multiselect && isOpen ? "" : prevState.inputValue,
-        }));
+        // When using the multiselect field, always empty the input upon open.
+        if (multiselect && isOpen) {
+            setFieldState((prevState) => ({ ...prevState, inputValue: "" }));
+        }
     }
     // Used to calculate the rendered width of the combo box (input + button)
     const comboBoxRef = (0, react_1.useRef)(null);
@@ -163,6 +162,9 @@ function ComboBoxBase(props) {
     const state = (0, react_stately_1.useComboBoxState)({
         ...comboBoxProps,
         allowsEmptyCollection: true,
+        // We don't really allow custom values, as we reset the input value once a user `blur`s the input field.
+        // Though, setting `allowsCustomValue: true` prevents React-Aria/Stately from attempting to reset the input field's value when the menu closes.
+        allowsCustomValue: true,
         // useComboBoxState.onSelectionChange will be executed if a keyboard interaction (Enter key) is used to select an item
         onSelectionChange: (key) => {
             // ignore undefined/null keys - `null` can happen if input field's value is completely deleted after having a value assigned.

package/package.json

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