@homebound/beam 2.240.2 → 2.241.1

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

@@ -196,6 +196,7 @@ function RowImpl(props) {
             };
             const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
             const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;
+            const tooltip = (0, utils_1.isGridCellContent)(maybeContent) ? maybeContent.tooltip : undefined;
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? (0, cell_1.rowLinkRenderFn)(as)
                 : isHeader || isTotals || isExpandableHeader
@@ -203,7 +204,7 @@ function RowImpl(props) {
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
                         ? (0, cell_1.rowClickRenderFn)(as, api)
                         : (0, cell_1.defaultRenderFn)(as);
-            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick);
+            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick, tooltip);
         }) }));
 }
 /**

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

@@ -27,9 +27,11 @@ export type GridCellContent = {
     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;
+    /** Tooltip to add to a cell. **Only Works on Headers** */
+    tooltip?: ReactNode;
 };
 /** 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: VoidFunction | 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, tooltip: ReactNode | 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/components/cell.js

@@ -5,37 +5,46 @@ 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) => {
+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: content }, key));
+    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));
 };
 exports.defaultRenderFn = defaultRenderFn;
 /**
  * Sets up the `GridContext` so that header cells can access the current sort settings.
  * Used for the Header, Totals, and Expanded Header row's cells.
  * */
-const headerRenderFn = (column, as, colSpan) => (key, css, content, row, rowStyle, classNames) => {
+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: content }, key));
+    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));
 };
 exports.headerRenderFn = headerRenderFn;
 /** Renders a cell element when a row link is in play. */
-const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
+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, 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, 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)(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, 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)),
+    });
 };
 exports.rowLinkRenderFn = rowLinkRenderFn;
 /** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames, onClick) => {
-    const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, { ...{ key }, css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: (e) => {
+const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
+    const Cell = as === "table" ? "td" : "div";
+    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: content }));
+        }, children: (0, Tooltip_1.maybeTooltip)({ title: tooltip, placement: "top", children: content }) }));
 };
 exports.rowClickRenderFn = rowClickRenderFn;

package/dist/components/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactNode } from "react";
 interface TooltipProps {
     /** The content that shows up when hovered */
     title: ReactNode;
@@ -10,7 +10,7 @@ interface TooltipProps {
 export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export type Placement = "top" | "bottom" | "left" | "right" | "auto";
 export declare function maybeTooltip(props: Omit<TooltipProps, "children"> & {
-    children: ReactElement;
+    children: ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactNode, readOnly?: boolean | ReactNode): ReactNode | undefined;
 export {};

package/dist/components/Tooltip.js

@@ -1,31 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveTooltip = exports.maybeTooltip = exports.Tooltip = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_dom_1 = require("react-dom");
 const react_popper_1 = require("react-popper");
@@ -35,11 +12,13 @@ const utils_1 = require("../utils");
 function Tooltip(props) {
     const { placement, children, title, disabled, delay = 0 } = props;
     const state = (0, react_stately_1.useTooltipTriggerState)({ delay, isDisabled: disabled });
-    const triggerRef = react_1.default.useRef(null);
+    const triggerRef = (0, react_1.useRef)(null);
     const { triggerProps, tooltipProps: _tooltipProps } = (0, react_aria_1.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
     const { tooltipProps } = (0, react_aria_1.useTooltip)(_tooltipProps, state);
     const tid = (0, utils_1.useTestIds)(props, "tooltip");
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: triggerRef, ...triggerProps, ...(!state.isOpen && typeof title === "string" ? { title } : {}), ...tid, 
+                // Add display contents to prevent the tooltip wrapping element from short-circuiting inherited styles (i.e. flex item positioning)
+                css: Css_1.Css.display("contents").$, 
                 // Adding `draggable` as a hack to allow focus to continue through this element and into its children.
                 // This is due to some code in React-Aria that prevents default due ot mobile browser inconsistencies,
                 // and the only way they don't prevent default is if the element is draggable.
@@ -48,9 +27,14 @@ function Tooltip(props) {
 }
 exports.Tooltip = Tooltip;
 function Popper({ triggerRef, content, placement = "auto" }) {
+    var _a;
     const popperRef = (0, react_1.useRef)(null);
     const [arrowRef, setArrowRef] = (0, react_1.useState)(null);
-    const { styles, attributes } = (0, react_popper_1.usePopper)(triggerRef.current, popperRef.current, {
+    // Since we use `display: contents;` on the `triggerRef`, then the element.offsetTop/Left/etc all equal `0`. This would make
+    // the tooltip show in the top left of the document. So instead, we target either the first child, if available, or the parent element as the tooltip target.
+    // It is possible there are no children if the element only has text content, which is the reasoning for the parentElement fallback.
+    const targetElement = triggerRef.current ? (_a = triggerRef.current.children[0]) !== null && _a !== void 0 ? _a : triggerRef.current.parentElement : null;
+    const { styles, attributes } = (0, react_popper_1.usePopper)(targetElement, popperRef.current, {
         modifiers: [
             { name: "arrow", options: { element: arrowRef } },
             { name: "offset", options: { offset: [0, 5] } },
@@ -60,9 +44,8 @@ function Popper({ triggerRef, content, placement = "auto" }) {
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: popperRef, style: styles.popper, ...attributes.popper, css: Css_1.Css.maxw("320px").bgGray900.white.px1.py("4px").br4.xs.add("zIndex", 999999).$, children: [(0, jsx_runtime_1.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }), content] }), document.body);
 }
 // Helper function to conditionally wrap component with Tooltip if necessary.
-// `maybeTooltip` requires that the `children` prop be a ReactElement, even though <Tooltip /> allows for ReactNode.
 function maybeTooltip(props) {
-    return props.title ? (0, jsx_runtime_1.jsx)(Tooltip, { ...props }) : props.children;
+    return props.title ? (0, jsx_runtime_1.jsx)(Tooltip, { ...props }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
 }
 exports.maybeTooltip = maybeTooltip;
 // Helper function for resolving showing the Tooltip text via a 'disabled' prop, or the 'tooltip' prop.

package/dist/components/internal/OverlayTrigger.js

@@ -14,6 +14,7 @@ const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 const defaultTestId_1 = require("../../utils/defaultTestId");
 function OverlayTrigger(props) {
+    var _a, _b, _c;
     const { trigger, buttonRef, menuTriggerProps, placement, state, disabled, tooltip, children, variant, hideEndAdornment, showActiveBorder = false, contrast = false, } = props;
     const popoverRef = (0, react_1.useRef)(null);
     const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
@@ -32,7 +33,7 @@ function OverlayTrigger(props) {
             : isIconButton(trigger)
                 ? trigger.icon
                 : trigger.name);
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.dib.$, children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant ? variant : "secondary", contrast: contrast, ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid })) : isNavLinkButton(trigger) ? ((0, jsx_runtime_1.jsx)(NavLink_1.NavLink, { ...trigger, label: trigger.navLabel, disabled: !!disabled, contrast: contrast, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid })) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.dib.$, children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant ? variant : "secondary", contrast: contrast, ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled: disabled, tooltip: tooltip, onClick: (_a = menuTriggerProps.onPress) !== null && _a !== void 0 ? _a : utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid })) : isNavLinkButton(trigger) ? ((0, jsx_runtime_1.jsx)(NavLink_1.NavLink, { ...trigger, label: trigger.navLabel, disabled: !!disabled, contrast: contrast, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid })) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: (_b = menuTriggerProps.onPress) !== null && _b !== void 0 ? _b : utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: (_c = menuTriggerProps.onPress) !== null && _c !== void 0 ? _c : utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, children: children }))] }));
 }
 exports.OverlayTrigger = OverlayTrigger;
 function isTextButton(trigger) {

package/package.json

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