@homebound/beam 2.131.0 → 2.132.2

package/dist/components/Button.js

@@ -4,10 +4,10 @@ exports.Button = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const react_router_dom_1 = require("react-router-dom");
 const components_1 = require("./");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
+const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
     const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, ...otherProps } = props;
@@ -38,6 +38,7 @@ function Button(props) {
         ...buttonProps,
         ...focusProps,
         ...hoverProps,
+        className: typeof onPress === "string" ? components_1.navLink : undefined,
         css: {
             ...Css_1.Css.buttonBase.tt("inherit").$,
             ...baseStyles,
@@ -48,12 +49,11 @@ function Button(props) {
         },
         ...tid,
     };
-    const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew || download ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink }, (download ? { download: "" } : { target: "_blank", rel: "noreferrer noopener" }), { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
     return (0, components_1.maybeTooltip)({
         title: (0, components_1.resolveTooltip)(disabled, tooltip),
         placement: "top",
-        children: button,
+        children: (0, getInteractiveElement_1.getButtonOrLink)(buttonContent, onPress, buttonAttrs, openInNew, download),
     });
 }
 exports.Button = Button;

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

@@ -309,6 +309,8 @@ export declare type GridCellContent = {
     typeScale?: Typography;
     /** Allows the cell to stay in place when the user scrolls horizontally */
     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;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -45,6 +45,7 @@ const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
 const utils_1 = require("../../utils");
+const getInteractiveElement_1 = require("../../utils/getInteractiveElement");
 const shallowEqual_1 = require("../../utils/shallowEqual");
 const _1 = require(".");
 exports.ASC = "ASC";
@@ -273,6 +274,11 @@ const renders = {
 /** Renders table using divs with flexbox rows, which is the default render */
 function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: tableRef, css: {
+            // Use `fit-content` to ensure the width of the table takes up the full width of its content.
+            // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
+            // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
+            // needs to be as wide as the table's content, or else we lose the "stickiness" once scrolling past width of the table's container.
+            ...Css_1.Css.mw("fit-content").$,
             /*
               Using (n + 3) here to target all rows that are after the first non-header row. Since n starts at 0, we can use
               the + operator as an offset.
@@ -643,9 +649,9 @@ function isJSX(content) {
     return typeof content === "object" && content && "type" in content && "props" in content;
 }
 /** If a column def return just string text for a given row, apply some default styling. */
-function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
-    var _a;
-    content = isGridCellContent(content) ? content.content : content;
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
+    var _a, _b;
+    let content = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
     if (typeof content === "function") {
         // Actually create the JSX by calling `content()` here (which should be as late as
         // possible, i.e. only for visible rows if we're in a virtual table).
@@ -662,11 +668,19 @@ function toContent(content, isHeader, canSortColumn, isClientSideSorting, style,
         // for those tables.
         throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
     }
+    content =
+        isGridCellContent(maybeContent) && !!maybeContent.onClick
+            ? (0, getInteractiveElement_1.getButtonOrLink)(content, maybeContent.onClick, {
+                css: Css_1.Css.maxw100.lightBlue700.if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
+            })
+            : content;
     if (content && typeof content === "string" && isHeader && canSortColumn) {
         return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
     }
-    else if (content && typeof content === "string" && ((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false) {
-        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.mw0.truncate.$, title: content }, { children: content }), void 0));
+    else if (content && ((_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.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", Object.assign({ css: Css_1.Css.truncate.mw0.$, title: content }, { children: content }), void 0));
     }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.

package/dist/components/internal/OverlayTrigger.js

@@ -23,7 +23,7 @@ function OverlayTrigger(props) {
         placement: (placement ? `bottom ${placement}` : "bottom left"),
     });
     const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), disabled: disabled, tooltip: tooltip }, tid), void 0)) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), disabled: disabled, tooltip: tooltip, onClick: utils_1.noop }, tid), void 0)) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid, { onClick: utils_1.noop }), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
 }
 exports.OverlayTrigger = OverlayTrigger;
 function isTextButton(trigger) {

package/dist/interfaces.d.ts

@@ -16,7 +16,7 @@ export interface BeamButtonProps {
      */
     disabled?: boolean | ReactNode;
     /** If function, then it is the handler that is called when the press is released over the target. Otherwise if string, it is the URL path for the link */
-    onClick?: ((e: PressEvent) => void) | string;
+    onClick: ((e: PressEvent) => void) | string;
     /** Text to be shown via a tooltip when the user hovers over the button */
     tooltip?: ReactNode;
     /** Whether to open link in a new tab. This only effects the element if the `onClick` is a `string`/URL. */

package/dist/utils/getInteractiveElement.d.ts

@@ -0,0 +1,3 @@
+import { PressEvent } from "@react-types/shared";
+import { HTMLAttributes, ReactNode } from "react";
+export declare function getButtonOrLink(content: ReactNode, onClick: ((e: PressEvent) => void) | string, attrs: HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, openInNew?: boolean, downloadLink?: boolean): JSX.Element;

package/dist/utils/getInteractiveElement.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getButtonOrLink = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const index_1 = require("./index");
+function getButtonOrLink(content, onClick, attrs, openInNew = false, downloadLink = false) {
+    return typeof onClick === "string" ? ((0, index_1.isAbsoluteUrl)(onClick) || openInNew || downloadLink ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, attrs, { href: onClick }, (downloadLink ? { download: "" } : { target: "_blank", rel: "noreferrer noopener" }), { children: content }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, attrs, { to: onClick }, { children: content }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, attrs, { children: content }), void 0));
+}
+exports.getButtonOrLink = getButtonOrLink;

package/package.json

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