@homebound/beam 2.328.0 → 2.330.0

package/dist/components/Label.d.ts

@@ -1,14 +1,21 @@
-import React, { LabelHTMLAttributes } from "react";
-interface LabelProps {
+import { LabelHTMLAttributes, ReactNode } from "react";
+import { Font, Only, Xss } from "../Css";
+type LabelXss = Font | "color";
+interface LabelProps<X> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     label: string;
     suffix?: string;
     hidden?: boolean;
     contrast?: boolean;
     multiline?: boolean;
+    tooltip?: ReactNode;
+    inline?: boolean;
+    xss?: X;
 }
 /** An internal helper component for rendering form labels. */
-export declare const Label: React.MemoExoticComponent<(props: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+declare function LabelComponent<X extends Only<Xss<LabelXss>, X>>(props: LabelProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Label: typeof LabelComponent;
+type InlineLabelProps = Omit<LabelProps<unknown>, "xss" | "inline">;
 /** Used for showing labels within text fields. */
-export declare function InlineLabel({ labelProps, label, contrast, multiline, ...others }: LabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function InlineLabel({ labelProps, label, contrast, multiline, ...others }: InlineLabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Label.js

@@ -8,12 +8,14 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_aria_1 = require("react-aria");
 const Css_1 = require("../Css");
+const src_1 = require("..");
 /** An internal helper component for rendering form labels. */
-exports.Label = react_1.default.memo((props) => {
-    const { labelProps, label, hidden, suffix, contrast = false, ...others } = props;
-    const labelEl = ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.dib.sm.gray700.mbPx(4).if(contrast).white.$, children: [label, suffix && ` ${suffix}`] }));
+function LabelComponent(props) {
+    const { labelProps, label, hidden, suffix, contrast = false, tooltip, inline, xss, ...others } = props;
+    const labelEl = ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: { ...Css_1.Css.dif.aic.gap1.sm.gray700.mbPx(inline ? 0 : 4).if(contrast).white.$, ...xss }, children: [label, suffix && ` ${suffix}`, tooltip && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(src_1.Icon, { icon: "infoCircle", tooltip: tooltip, inc: 2, color: contrast ? Css_1.Palette.White : Css_1.Palette.Gray700 }) }))] }));
     return hidden ? (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: labelEl }) : labelEl;
-});
+}
+exports.Label = react_1.default.memo(LabelComponent);
 /** Used for showing labels within text fields. */
 function InlineLabel({ labelProps, label, contrast, multiline = false, ...others }) {
     return ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.smMd.nowrap.gray900.prPx(4).add("color", "currentColor").asc.if(multiline).asfs.pt1.$, children: [label, ":"] }));

package/dist/components/Table/GridTable.js

@@ -235,7 +235,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
                     ...Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$,
                 }, children: tableHeadRows }), (0, jsx_runtime_1.jsxs)("div", { css: {
                     ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {}),
-                    ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:first-of-type > *`, style.firstNonHeaderRowCss).$ : {}),
+                    ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:first-of-type`, style.firstNonHeaderRowCss).$ : {}),
                     ...(style.lastRowCss && Css_1.Css.addIn("& > div:last-of-type", style.lastRowCss).$),
                 }, children: [keptSelectedRows, firstRowMessage && ((0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage })), visibleDataRows] })] }));
 }
@@ -245,7 +245,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
             ...Css_1.Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
             ...Css_1.Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {})
                 // removes border between header and second row
-                .addIn("& > tbody > tr:first-of-type > *", style.firstNonHeaderRowCss || {}).$,
+                .addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
             ...Css_1.Css.addIn("& > tbody > tr:last-of-type", style.lastRowCss).$,
             ...Css_1.Css.addIn("& > thead > tr:first-of-type", style.firstRowCss).$,
             ...style.rootCss,
@@ -364,7 +364,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, xss) => {
                 ...(isHeader
                     ? Css_1.Css.addIn("& > div:first-of-type > *", gs.firstRowCss).$
                     : {
-                        ...Css_1.Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
+                        ...Css_1.Css.addIn("& > div:first-of-type", gs.firstNonHeaderRowCss).$,
                         ...Css_1.Css.addIn("& > div:last-of-type > *", gs.lastRowCss).$,
                     }),
                 ...gs.rootCss,

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

@@ -13,6 +13,8 @@ export interface GridStyle {
     lastRowCss?: Properties;
     /** Applied on the first row of the table (could be the Header or Totals row). */
     firstRowCss?: Properties;
+    /** Applied to every non-header row of the table */
+    nonHeaderRowCss?: Properties;
     /** Applied to the first non-header row, i.e. if you want to cancel out `betweenRowsCss`. */
     firstNonHeaderRowCss?: Properties;
     /** Applied to all cell divs (via a selector off the base div). */
@@ -37,7 +39,9 @@ export interface GridStyle {
     /** Applied if there is a fallback/overflow message showing. */
     firstRowMessageCss?: Properties;
     /** Applied on hover if a row has a rowLink/onClick set. */
-    rowHoverColor?: Palette;
+    rowHoverColor?: Palette | "none";
+    /** Applied on hover of a row */
+    nonHeaderRowHoverCss?: Properties;
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
     presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;

package/dist/components/Table/TableStyles.js

@@ -92,18 +92,16 @@ exports.condensedStyle = {
 exports.cardStyle = {
     ...exports.defaultStyle,
     betweenRowsCss: {},
-    firstNonHeaderRowCss: Css_1.Css.mt2.$,
-    cellCss: Css_1.Css.p2.my1.bt.bb.bGray400.$,
-    firstCellCss: Css_1.Css.bl.add({ borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }).$,
-    lastCellCss: Css_1.Css.br.add({ borderTopRightRadius: "4px", borderBottomRightRadius: "4px" }).$,
+    nonHeaderRowCss: Css_1.Css.br4.overflowHidden.ba.bGray400.mt2.add("transition", "all 240ms").$,
+    firstRowCss: Css_1.Css.bl.br.bGray200.borderRadius("8px 8px 0 0").overflowHidden.$,
+    cellCss: Css_1.Css.p2.$,
     // Undo the card look & feel for the header
     headerCellCss: {
         ...exports.defaultStyle.headerCellCss,
-        ...Css_1.Css.add({
-            border: "none",
-            borderRadius: "unset",
-        }).p1.m0.xsMd.gray700.$,
+        ...Css_1.Css.p1.m0.xsMd.gray700.$,
     },
+    rowHoverColor: "none",
+    nonHeaderRowHoverCss: Css_1.Css.bshHover.bGray700.$,
 };
 function resolveStyles(style) {
     const defKeysRecord = {

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

@@ -28,14 +28,20 @@ function RowImpl(props) {
     const RowTag = as === "table" ? "tr" : "div";
     const sortOn = (_a = tableState.sortConfig) === null || _a === void 0 ? void 0 : _a.on;
     const revealOnRowHoverClass = "revealOnRowHover";
-    const showRowHoverColor = !utils_1.reservedRowKinds.includes(row.kind) && !omitRowHover;
+    const showRowHoverColor = !utils_1.reservedRowKinds.includes(row.kind) && !omitRowHover && style.rowHoverColor !== "none";
     const rowStyleCellCss = (0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
+        ...(!utils_1.reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss),
         // Optionally include the row hover styles, by default they should be turned on.
         ...(showRowHoverColor && {
             // Even though backgroundColor is set on the cellCss, the hover target is the row.
             "&:hover > *": Css_1.Css.bgColor((_b = style.rowHoverColor) !== null && _b !== void 0 ? _b : Css_1.Palette.Blue100).$,
         }),
+        ...(!utils_1.reservedRowKinds.includes(row.kind) &&
+            style.nonHeaderRowHoverCss && {
+            // Need to spread this to make TS happy.
+            ":hover": { ...style.nonHeaderRowHoverCss },
+        }),
         // 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
         ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
         // Apply `cursorPointer` to the row if it has a link or `onClick` value.

package/dist/inputs/Switch.d.ts

@@ -9,7 +9,7 @@ export interface SwitchProps {
     /** Input label */
     label: string;
     /** Where to put the label. */
-    labelStyle?: "form" | "inline" | "filter" | "hidden" | "left";
+    labelStyle?: "form" | "inline" | "filter" | "hidden" | "left" | "centered";
     /** Whether or not to hide the label */
     hideLabel?: boolean;
     /** Handler when the interactive element state changes. */
@@ -18,6 +18,8 @@ export interface SwitchProps {
     selected: boolean;
     /** Whether to include icons like the check mark */
     withIcon?: boolean;
+    /** Adds tooltip for the switch */
+    tooltip?: ReactNode;
 }
 export declare function Switch(props: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const switchHoverStyles: {

package/dist/inputs/Switch.js

@@ -18,33 +18,27 @@ function Switch(props) {
     const { inputProps } = (0, react_aria_1.useSwitch)({ ...ariaProps, "aria-label": label }, state, ref);
     const { isFocusVisible: isKeyboardFocus, focusProps } = (0, react_aria_1.useFocusRing)(otherProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
-    const tooltip = (0, components_1.resolveTooltip)(disabled);
-    return (0, components_1.maybeTooltip)({
-        title: tooltip,
-        placement: "top",
-        children: ((0, jsx_runtime_1.jsxs)("label", { ...hoverProps, css: {
-                ...Css_1.Css.relative.cursorPointer.df.w("max-content").smMd.selectNone.$,
-                ...(labelStyle === "form" && Css_1.Css.fdc.$),
-                ...(labelStyle === "left" && Css_1.Css.w100.fdr.$),
-                ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
-                ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.wa.sm.$),
-                ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
-            }, "aria-label": label, children: [(labelStyle === "form" || labelStyle === "left") && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }) })), labelStyle === "filter" && (0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
-                        ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
-                        ...(isHovered && exports.switchHoverStyles),
-                        ...(isKeyboardFocus && exports.switchFocusStyles),
-                        ...(isDisabled && Css_1.Css.bgGray300.$),
-                        ...(isSelected && Css_1.Css.bgBlue700.$),
-                        ...(isSelected && isHovered && exports.switchSelectedHoverStyles),
-                    }, children: (0, jsx_runtime_1.jsx)("div", { css: {
-                            ...switchCircleDefaultStyles(compact),
-                            ...(isDisabled && Css_1.Css.bgGray100.$),
-                            ...(isSelected && switchCircleSelectedStyles(compact)),
-                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", { css: {
-                        // LineHeight is conditionally applied to handle compact version text alignment
-                        ...Css_1.Css.if(compact).add("lineHeight", "1").$,
-                    }, children: label })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps }) })] })),
-    });
+    const tooltip = (0, components_1.resolveTooltip)(disabled, props.tooltip);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, css: {
+            ...Css_1.Css.relative.cursorPointer.df.w("max-content").selectNone.$,
+            ...(labelStyle === "form" && Css_1.Css.fdc.$),
+            ...(labelStyle === "left" && Css_1.Css.w100.aic.$),
+            ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
+            ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.wa.sm.$),
+            ...(labelStyle === "centered" && Css_1.Css.fdc.aic.$),
+            ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
+        }, children: [labelStyle !== "inline" && labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, xss: Css_1.Css.if(labelStyle === "filter").gray900.$, inline: labelStyle === "left" || labelStyle === "filter" }) })), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
+                    ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
+                    ...(isHovered && exports.switchHoverStyles),
+                    ...(isKeyboardFocus && exports.switchFocusStyles),
+                    ...(isDisabled && Css_1.Css.bgGray300.$),
+                    ...(isSelected && Css_1.Css.bgBlue700.$),
+                    ...(isSelected && isHovered && exports.switchSelectedHoverStyles),
+                }, children: (0, jsx_runtime_1.jsx)("div", { css: {
+                        ...switchCircleDefaultStyles(compact),
+                        ...(isDisabled && Css_1.Css.bgGray100.$),
+                        ...(isSelected && switchCircleSelectedStyles(compact)),
+                    }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, inline: true, xss: Css_1.Css.smMd.gray900.if(compact).add("lineHeight", "1").$ })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps }) })] }));
 }
 exports.Switch = Switch;
 /** Styles */

package/package.json

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