@homebound/beam 2.355.0 → 2.356.1

package/dist/components/Table/GridTable.js

@@ -326,6 +326,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
 function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
     return ((0, jsx_runtime_1.jsxs)("table", { css: {
             ...Css_1.Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
+            ...Css_1.Css.addIn("& tr ", { pageBreakAfter: "auto", pageBreakInside: "avoid" }).$,
             ...Css_1.Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {})
                 // removes border between header and second row
                 .addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,

package/dist/components/Tag.d.ts

@@ -1,13 +1,17 @@
 import { IconKey } from "./";
 import { Margin, Only, Xss } from "../Css";
+import { ReactNode } from "react";
 type TagXss = Margin | "backgroundColor" | "color";
 export type TagType = "info" | "caution" | "warning" | "success" | "neutral";
 interface TagProps<X> {
-    text: string;
+    text: ReactNode;
     type?: TagType;
     xss?: X;
     icon?: IconKey;
+    /** A tooltip will automatically be displayed if the text is truncated. Set to true to prevent this behavior.
+     * @default false */
+    preventTooltip?: boolean;
 }
 /** Tag used for indicating a status */
-export declare function Tag<X extends Only<Xss<TagXss>, X>>({ text, type, xss, ...otherProps }: TagProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Tag<X extends Only<Xss<TagXss>, X>>(props: TagProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tag.js

@@ -5,11 +5,27 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const components_1 = require("./");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
+const react_1 = require("react");
+const utils_2 = require("@react-aria/utils");
 /** Tag used for indicating a status */
-function Tag({ text, type, xss, ...otherProps }) {
+function Tag(props) {
+    const { text, type, xss, preventTooltip = false, ...otherProps } = props;
     const typeStyles = getStyles(type);
     const tid = (0, utils_1.useTestIds)(otherProps);
-    return ((0, jsx_runtime_1.jsxs)("span", { ...tid, css: { ...Css_1.Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles, ...xss }, title: text, children: [otherProps.icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: otherProps.icon, inc: 1.5 }) })), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lineClamp1.wbba.$, children: text })] }));
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    (0, utils_2.useResizeObserver)({
+        ref,
+        onResize: () => {
+            if (ref.current) {
+                setShowTooltip(ref.current.offsetHeight < ref.current.scrollHeight);
+            }
+        },
+    });
+    return (0, components_1.maybeTooltip)({
+        title: !preventTooltip && showTooltip ? text : undefined,
+        children: ((0, jsx_runtime_1.jsxs)("span", { ...tid, css: { ...Css_1.Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles, ...xss }, children: [otherProps.icon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: otherProps.icon, inc: 1.5 }) })), (0, jsx_runtime_1.jsx)("span", { ref: ref, css: Css_1.Css.lineClamp1.wbba.$, children: text })] })),
+    });
 }
 exports.Tag = Tag;
 function getStyles(type) {

package/dist/components/Tooltip.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { Palette } from "../Css";
 interface TooltipProps {
     /** The content that shows up when hovered */
     title: ReactNode;
@@ -6,6 +7,7 @@ interface TooltipProps {
     placement?: Placement;
     delay?: number;
     disabled?: boolean;
+    bgColor?: Palette;
 }
 export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export type Placement = "top" | "bottom" | "left" | "right" | "auto";

package/dist/components/Tooltip.js

@@ -10,7 +10,7 @@ const react_stately_1 = require("react-stately");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 function Tooltip(props) {
-    const { placement, children, title, disabled, delay = 0 } = props;
+    const { placement, children, title, disabled, delay = 0, bgColor } = props;
     const state = (0, react_stately_1.useTooltipTriggerState)({ delay, isDisabled: disabled });
     const triggerRef = (0, react_1.useRef)(null);
     const { triggerProps, tooltipProps: _tooltipProps } = (0, react_aria_1.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
@@ -24,10 +24,10 @@ function Tooltip(props) {
                 // 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.
                 // See https://github.com/adobe/react-spectrum/discussions/3058 for discussion related to this issue.
-                draggable: true, onDragStart: (e) => e.preventDefault(), children: children }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, { ...(0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), triggerRef: triggerRef, content: title, placement: placement }))] }));
+                draggable: true, onDragStart: (e) => e.preventDefault(), children: children }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, { ...(0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), triggerRef: triggerRef, content: title, placement: placement, bgColor: bgColor }))] }));
 }
 exports.Tooltip = Tooltip;
-function Popper({ triggerRef, content, placement = "auto" }) {
+function Popper({ triggerRef, content, placement = "auto", bgColor = Css_1.Palette.Gray900 }) {
     var _a;
     const popperRef = (0, react_1.useRef)(null);
     const [arrowRef, setArrowRef] = (0, react_1.useState)(null);
@@ -42,7 +42,7 @@ function Popper({ triggerRef, content, placement = "auto" }) {
         ],
         placement,
     });
-    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);
+    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").bgColor(bgColor).bshBasic.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.
 function maybeTooltip(props) {

package/package.json

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