@homebound/beam 2.166.0 → 2.168.0

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

@@ -274,7 +274,7 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
-declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined) => ReactNode;
+declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined) => ReactNode;
 /** Defines row-specific styling for each given row `kind` in `R` */
 export declare type GridRowStyles<R extends Kinded> = {
     [P in R["kind"]]?: RowStyle<DiscriminateUnion<R, "kind", P>>;
@@ -316,6 +316,8 @@ export declare type GridCellContent = {
     onClick?: () => {} | 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;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -490,6 +490,7 @@ function GridRow(props) {
             .map((openCardKind) => style.nestedCards.kinds[openCardKind])
             .filter((style) => style)
         : undefined;
+    const revealOnRowHoverClass = "revealOnRowHover";
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
         // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
@@ -502,6 +503,10 @@ function GridRow(props) {
         // Maybe add the sticky header styles
         ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
+        ...{
+            [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
+            [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
+        },
     };
     let currentColspan = 1;
     let firstContentColumnStylesApplied = false;
@@ -523,6 +528,7 @@ function GridRow(props) {
             }
             const maybeContent = applyRowFn(column, row, api, level);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+            const revealOnRowHover = isGridCellContent(maybeContent) ? maybeContent.revealOnRowHover : false;
             const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
                 (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = getAlignment(column, maybeContent);
@@ -598,6 +604,7 @@ function GridRow(props) {
                 },
                 ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
+            const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? rowLinkRenderFn(as)
                 : isHeader
@@ -605,7 +612,7 @@ function GridRow(props) {
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
                         ? rowClickRenderFn(as, api)
                         : defaultRenderFn(as);
-            return renderFn(columnIndex, cellCss, content, row, rowStyle);
+            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames);
         }) }), void 0));
     return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
@@ -696,12 +703,12 @@ function applyRowFn(column, row, api, level) {
 }
 exports.applyRowFn = applyRowFn;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
-const defaultRenderFn = (as) => (key, css, content) => {
+const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: content }), key));
 };
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
-const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content) => {
+const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content, row, rowStyle, classNames) => {
     const [currentKey, direction] = sortState || [];
     // If server-side sorting, use the user's key for this column; client-side sorting, use the index.
     const ourSortKey = column.serverSideSortKey || columns.indexOf(column);
@@ -709,21 +716,21 @@ const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css
         sorted: ourSortKey === currentKey ? direction : undefined,
         toggleSort: () => setSortKey(ourSortKey),
     };
-    const Row = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as, column) } }, { children: content }), void 0) }), key));
+    const Cell = as === "table" ? "th" : "div";
+    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as, column) }, className: classNames }, { children: content }), void 0) }), key));
 };
 /** Renders a cell element when a row link is in play. */
-const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle) => {
+const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
     const to = rowStyle.rowLink(row);
     if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink }, { children: content }), void 0) }), key));
+        return ((0, jsx_runtime_1.jsx)("td", Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink }, { children: content }), void 0) }), key));
     }
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: CssReset_1.navLink }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}` }, { children: content }), key));
 };
 /** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle) => {
+const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames) => {
     const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
 };
 const alignmentToJustify = {
     left: "flex-start",

package/dist/components/Tabs.d.ts

@@ -16,6 +16,7 @@ export interface TabsProps<V extends string, X> {
     onChange: (value: V) => void;
     contentXss?: X;
     alwaysShowAllTabs?: boolean;
+    includeBottomBorder?: boolean;
 }
 export interface RouteTabsProps<V extends string, X> extends Omit<TabsProps<V, X>, "onChange" | "selected" | "tabs"> {
     tabs: RouteTab<V>[];
@@ -65,26 +66,36 @@ export declare function getTabStyles(): {
     } & {
         paddingRight: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
     } & {
-        borderRadius: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
+        outline: import("csstype").Property.Outline<0 | (string & {})> | undefined;
+    } & {
+        color: import("csstype").Property.Color | undefined;
+    } & {
+        width: import("csstype").Property.Width<0 | (string & {})> | undefined;
+    } & {
+        cursor: import("csstype").Property.Cursor | undefined;
     } & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    };
+    activeStyles: {
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
     } & {
-        outline: import("csstype").Property.Outline<0 | (string & {})> | undefined;
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
     } & {
-        color: import("csstype").Property.Color | undefined;
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
     } & {
-        width: import("csstype").Property.Width<0 | (string & {})> | undefined;
+        borderColor: import("csstype").Property.BorderColor | undefined;
     } & {
-        cursor: import("csstype").Property.Cursor | undefined;
-    };
-    activeStyles: {
-        color: import("csstype").Property.Color | undefined;
+        fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
-        backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    } & {
+        color: import("csstype").Property.Color | undefined;
     };
     disabledStyles: {
         color: import("csstype").Property.Color | undefined;
@@ -97,14 +108,24 @@ export declare function getTabStyles(): {
         boxShadow: import("csstype").Property.BoxShadow | undefined;
     };
     hoverStyles: {
-        color: import("csstype").Property.Color | undefined;
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
     } & {
-        backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
+    } & {
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
+    } & {
+        borderColor: import("csstype").Property.BorderColor | undefined;
     };
     activeHoverStyles: {
         backgroundColor: import("csstype").Property.BackgroundColor | undefined;
     } & {
-        color: import("csstype").Property.Color | undefined;
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
+    } & {
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
+    } & {
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
+    } & {
+        borderColor: import("csstype").Property.BorderColor | undefined;
     };
 };
 export declare function getNextTabValue<V extends string>(selected: V, key: "ArrowLeft" | "ArrowRight", tabs: Tab<V>[] | RouteTab<V>[]): V;

package/dist/components/Tabs.js

@@ -45,7 +45,7 @@ exports.TabContent = TabContent;
 /** The top list of tabs. */
 function Tabs(props) {
     const { tabActionsRef, tabActionsDiv } = (0, BeamContext_1.useBeamContext)();
-    const { ariaLabel, tabs, ...others } = props;
+    const { ariaLabel, tabs, includeBottomBorder, ...others } = props;
     const location = (0, react_router_1.useLocation)();
     const selected = isRouteTabs(props)
         ? uniqueTabValue(props.tabs.find((t) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0])
@@ -84,7 +84,7 @@ function Tabs(props) {
             setActive(selected);
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.childGap1.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: { ...Css_1.Css.dif.childGap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
                     const uniqueValue = uniqueTabValue(tab);
                     return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
                 }) }), void 0)), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.ml("auto").addIn("&>div", Css_1.Css.df.aic.childGap1.$).$, ref: tabActionsRef }, void 0)] }), void 0));
@@ -122,13 +122,20 @@ function TabImpl(props) {
     return isDisabled ? ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tabProps, { children: tabLabel }), void 0)) : isRouteTab(tab) ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, { ...tabProps, ...interactiveProps }, { className: "navLink", to: tab.href }, { children: tabLabel }), void 0)) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, { ...tabProps, ...interactiveProps }, { children: tabLabel }), void 0));
 }
 function getTabStyles() {
+    const borderBottomWidthPx = 4;
+    const verticalPaddingPx = 6;
+    // Decrease the bottom padding by the same amount of the new border width to prevent text layout shift
+    const borderBottomStyles = Css_1.Css.bb
+        .add("borderBottomWidth", `${borderBottomWidthPx}px`)
+        .pbPx(verticalPaddingPx - borderBottomWidthPx).$;
     return {
-        baseStyles: Css_1.Css.df.aic.hPx(32).pyPx(6).px1.br4.smEm.outline0.gray700.add("width", "fit-content").cursorPointer.$,
-        activeStyles: Css_1.Css.lightBlue700.bgLightBlue50.$,
+        baseStyles: Css_1.Css.df.aic.hPx(32).pyPx(verticalPaddingPx).px1.outline0.gray700.add("width", "fit-content")
+            .cursorPointer.sm.$,
+        activeStyles: Css_1.Css.add(borderBottomStyles).bLightBlue700.smEm.gray900.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
         focusRingStyles: Css_1.Css.bgLightBlue50.bshFocus.$,
-        hoverStyles: Css_1.Css.gray700.bgGray100.$,
-        activeHoverStyles: Css_1.Css.bgLightBlue200.lightBlue700.$,
+        hoverStyles: Css_1.Css.add(borderBottomStyles).bGray400.$,
+        activeHoverStyles: Css_1.Css.bgLightBlue50.add(borderBottomStyles).bLightBlue700.$,
     };
 }
 exports.getTabStyles = getTabStyles;

package/dist/inputs/ToggleChipGroup.js

@@ -13,7 +13,7 @@ function ToggleChipGroup(props) {
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, useTestIds_1.useTestIds)(props, "toggleChip");
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { css: Css_1.Css.relative.$ }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, { hidden: hideLabel }), void 0), (0, jsx_runtime_1.jsx)("div", { children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, Object.assign({ value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label }, tid[o.value]), o.value))) }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { css: Css_1.Css.relative.$ }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, { hidden: hideLabel }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.gap1.add("flexWrap", "wrap").$ }, { children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, Object.assign({ value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label }, tid[o.value]), o.value))) }), void 0)] }), void 0));
 }
 exports.ToggleChipGroup = ToggleChipGroup;
 function ToggleChip(props) {
@@ -22,7 +22,7 @@ function ToggleChip(props) {
     const { inputProps } = (0, react_aria_1.useCheckboxGroupItem)({ value, "aria-label": label }, groupState, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
     return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: {
-            ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).mr1.mb1.bgGray200.$,
+            ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.$,
             ...(isSelected
                 ? {
                     ...Css_1.Css.white.bgLightBlue700.$,

package/package.json

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