@homebound/beam 2.73.0 → 2.75.0

package/dist/Css.d.ts

@@ -496,6 +496,33 @@ declare class CssBuilder<T extends Properties1> {
     display(value: Properties["display"]): CssBuilder<T & {
         display: import("csstype").Property.Display | undefined;
     }>;
+    get fi(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    get fa(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    get fn(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    get f1(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    get f2(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    get f3(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    get f4(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    get f5(): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
+    f(value: Properties["flex"]): CssBuilder<T & {
+        flex: import("csstype").Property.Flex<0 | (string & {})> | undefined;
+    }>;
     get jcfs(): CssBuilder<T & {
         justifyContent: import("csstype").Property.JustifyContent | undefined;
     }>;
@@ -625,13 +652,10 @@ declare class CssBuilder<T extends Properties1> {
     get fl(): CssBuilder<T & {
         float: import("csstype").Property.Float | undefined;
     }>;
-    get fn(): CssBuilder<T & {
-        float: import("csstype").Property.Float | undefined;
-    }>;
     get fr(): CssBuilder<T & {
         float: import("csstype").Property.Float | undefined;
     }>;
-    f(value: Properties["float"]): CssBuilder<T & {
+    float(value: Properties["float"]): CssBuilder<T & {
         float: import("csstype").Property.Float | undefined;
     }>;
     get normal(): CssBuilder<T & {
@@ -2514,6 +2538,9 @@ declare class CssBuilder<T extends Properties1> {
     mw(value: Properties["minWidth"]): CssBuilder<T & {
         minWidth: import("csstype").Property.MinWidth<0 | (string & {})> | undefined;
     }>;
+    mwPx(px: number): CssBuilder<T & {
+        minWidth: import("csstype").Property.MinWidth<0 | (string & {})> | undefined;
+    }>;
     get maxw0(): CssBuilder<T & {
         maxWidth: import("csstype").Property.MaxWidth<0 | (string & {})> | undefined;
     }>;
@@ -2532,6 +2559,9 @@ declare class CssBuilder<T extends Properties1> {
     maxw(value: Properties["maxWidth"]): CssBuilder<T & {
         maxWidth: import("csstype").Property.MaxWidth<0 | (string & {})> | undefined;
     }>;
+    maxwPx(px: number): CssBuilder<T & {
+        maxWidth: import("csstype").Property.MaxWidth<0 | (string & {})> | undefined;
+    }>;
     get w0(): CssBuilder<T & {
         width: import("csstype").Property.Width<0 | (string & {})> | undefined;
     }>;
@@ -2565,6 +2595,21 @@ declare class CssBuilder<T extends Properties1> {
     wPx(px: number): CssBuilder<T & {
         width: import("csstype").Property.Width<0 | (string & {})> | undefined;
     }>;
+    get breakNormal(): CssBuilder<T & {
+        wordBreak: import("csstype").Property.WordBreak | undefined;
+    }>;
+    get breakAll(): CssBuilder<T & {
+        wordBreak: import("csstype").Property.WordBreak | undefined;
+    }>;
+    get breakKeepAll(): CssBuilder<T & {
+        wordBreak: import("csstype").Property.WordBreak | undefined;
+    }>;
+    get breakWord(): CssBuilder<T & {
+        wordBreak: import("csstype").Property.WordBreak | undefined;
+    }>;
+    wordBreak(value: Properties["wordBreak"]): CssBuilder<T & {
+        wordBreak: import("csstype").Property.WordBreak | undefined;
+    }>;
     get z0(): CssBuilder<T & {
         zIndex: import("csstype").Property.ZIndex | undefined;
     }>;

package/dist/Css.js

@@ -126,7 +126,7 @@ class CssBuilder {
     get top7() { return this.top(7); }
     get top8() { return this.top(8); }
     top(inc) { return this.add("top", maybeInc(inc)); }
-    topPx(px) { return this.add("top", `${px}px`); }
+    topPx(px) { return this.top(`${px}px`); }
     get right0() { return this.right(0); }
     get right1() { return this.right(1); }
     get right2() { return this.right(2); }
@@ -137,7 +137,7 @@ class CssBuilder {
     get right7() { return this.right(7); }
     get right8() { return this.right(8); }
     right(inc) { return this.add("right", maybeInc(inc)); }
-    rightPx(px) { return this.add("right", `${px}px`); }
+    rightPx(px) { return this.right(`${px}px`); }
     get bottom0() { return this.bottom(0); }
     get bottom1() { return this.bottom(1); }
     get bottom2() { return this.bottom(2); }
@@ -148,7 +148,7 @@ class CssBuilder {
     get bottom7() { return this.bottom(7); }
     get bottom8() { return this.bottom(8); }
     bottom(inc) { return this.add("bottom", maybeInc(inc)); }
-    bottomPx(px) { return this.add("bottom", `${px}px`); }
+    bottomPx(px) { return this.bottom(`${px}px`); }
     get left0() { return this.left(0); }
     get left1() { return this.left(1); }
     get left2() { return this.left(2); }
@@ -159,7 +159,7 @@ class CssBuilder {
     get left7() { return this.left(7); }
     get left8() { return this.left(8); }
     left(inc) { return this.add("left", maybeInc(inc)); }
-    leftPx(px) { return this.add("left", `${px}px`); }
+    leftPx(px) { return this.left(`${px}px`); }
     // cursor
     get cursorPointer() { return this.add("cursor", "pointer"); }
     get cursorNotAllowed() { return this.add("cursor", "not-allowed"); }
@@ -180,6 +180,15 @@ class CssBuilder {
     get dif() { return this.add("display", "inline-flex"); }
     display(value) { return this.add("display", value); }
     // flexbox
+    get fi() { return this.add("flex", "initial"); }
+    get fa() { return this.add("flex", "auto"); }
+    get fn() { return this.add("flex", "none"); }
+    get f1() { return this.add("flex", "1"); }
+    get f2() { return this.add("flex", "2"); }
+    get f3() { return this.add("flex", "3"); }
+    get f4() { return this.add("flex", "4"); }
+    get f5() { return this.add("flex", "5"); }
+    f(value) { return this.add("flex", value); }
     get jcfs() { return this.add("justifyContent", "flex-start"); }
     get jcfe() { return this.add("justifyContent", "flex-end"); }
     get jcc() { return this.add("justifyContent", "center"); }
@@ -224,9 +233,8 @@ class CssBuilder {
     fd(value) { return this.add("flexDirection", value); }
     // float
     get fl() { return this.add("float", "left"); }
-    get fn() { return this.add("float", "none"); }
     get fr() { return this.add("float", "right"); }
-    f(value) { return this.add("float", value); }
+    float(value) { return this.add("float", value); }
     // fontWeight
     get normal() { return this.add("fontWeight", "normal"); }
     get b() { return this.add("fontWeight", "bold"); }
@@ -255,7 +263,7 @@ class CssBuilder {
     get gap7() { return this.gap(7); }
     get gap8() { return this.gap(8); }
     gap(inc) { return this.add("gap", maybeInc(inc)); }
-    gapPx(px) { return this.add("gap", `${px}px`); }
+    gapPx(px) { return this.gap(`${px}px`); }
     get rg0() { return this.rg(0); }
     get rg1() { return this.rg(1); }
     get rg2() { return this.rg(2); }
@@ -266,7 +274,7 @@ class CssBuilder {
     get rg7() { return this.rg(7); }
     get rg8() { return this.rg(8); }
     rg(inc) { return this.add("rowGap", maybeInc(inc)); }
-    rgPx(px) { return this.add("rowGap", `${px}px`); }
+    rgPx(px) { return this.rg(`${px}px`); }
     get cg0() { return this.cg(0); }
     get cg1() { return this.cg(1); }
     get cg2() { return this.cg(2); }
@@ -277,7 +285,7 @@ class CssBuilder {
     get cg7() { return this.cg(7); }
     get cg8() { return this.cg(8); }
     cg(inc) { return this.add("columnGap", maybeInc(inc)); }
-    cgPx(px) { return this.add("columnGap", `${px}px`); }
+    cgPx(px) { return this.cg(`${px}px`); }
     // height
     get h0() { return this.h(0); }
     get h1() { return this.h(1); }
@@ -289,7 +297,7 @@ class CssBuilder {
     get h7() { return this.h(7); }
     get h8() { return this.h(8); }
     h(inc) { return this.add("height", maybeInc(inc)); }
-    hPx(px) { return this.add("height", `${px}px`); }
+    hPx(px) { return this.h(`${px}px`); }
     get h25() { return this.add("height", "25%"); }
     get h50() { return this.add("height", "50%"); }
     get h75() { return this.add("height", "75%"); }
@@ -549,7 +557,7 @@ class CssBuilder {
     get mt7() { return this.mt(7); }
     get mt8() { return this.mt(8); }
     mt(inc) { return this.add("marginTop", maybeInc(inc)); }
-    mtPx(px) { return this.add("marginTop", `${px}px`); }
+    mtPx(px) { return this.mt(`${px}px`); }
     get mr0() { return this.mr(0); }
     get mr1() { return this.mr(1); }
     get mr2() { return this.mr(2); }
@@ -560,7 +568,7 @@ class CssBuilder {
     get mr7() { return this.mr(7); }
     get mr8() { return this.mr(8); }
     mr(inc) { return this.add("marginRight", maybeInc(inc)); }
-    mrPx(px) { return this.add("marginRight", `${px}px`); }
+    mrPx(px) { return this.mr(`${px}px`); }
     get mb0() { return this.mb(0); }
     get mb1() { return this.mb(1); }
     get mb2() { return this.mb(2); }
@@ -571,7 +579,7 @@ class CssBuilder {
     get mb7() { return this.mb(7); }
     get mb8() { return this.mb(8); }
     mb(inc) { return this.add("marginBottom", maybeInc(inc)); }
-    mbPx(px) { return this.add("marginBottom", `${px}px`); }
+    mbPx(px) { return this.mb(`${px}px`); }
     get ml0() { return this.ml(0); }
     get ml1() { return this.ml(1); }
     get ml2() { return this.ml(2); }
@@ -582,7 +590,7 @@ class CssBuilder {
     get ml7() { return this.ml(7); }
     get ml8() { return this.ml(8); }
     ml(inc) { return this.add("marginLeft", maybeInc(inc)); }
-    mlPx(px) { return this.add("marginLeft", `${px}px`); }
+    mlPx(px) { return this.ml(`${px}px`); }
     get mx0() { return this.mx(0); }
     get mx1() { return this.mx(1); }
     get mx2() { return this.mx(2); }
@@ -626,7 +634,7 @@ class CssBuilder {
     get pt7() { return this.pt(7); }
     get pt8() { return this.pt(8); }
     pt(inc) { return this.add("paddingTop", maybeInc(inc)); }
-    ptPx(px) { return this.add("paddingTop", `${px}px`); }
+    ptPx(px) { return this.pt(`${px}px`); }
     get pr0() { return this.pr(0); }
     get pr1() { return this.pr(1); }
     get pr2() { return this.pr(2); }
@@ -637,7 +645,7 @@ class CssBuilder {
     get pr7() { return this.pr(7); }
     get pr8() { return this.pr(8); }
     pr(inc) { return this.add("paddingRight", maybeInc(inc)); }
-    prPx(px) { return this.add("paddingRight", `${px}px`); }
+    prPx(px) { return this.pr(`${px}px`); }
     get pb0() { return this.pb(0); }
     get pb1() { return this.pb(1); }
     get pb2() { return this.pb(2); }
@@ -648,7 +656,7 @@ class CssBuilder {
     get pb7() { return this.pb(7); }
     get pb8() { return this.pb(8); }
     pb(inc) { return this.add("paddingBottom", maybeInc(inc)); }
-    pbPx(px) { return this.add("paddingBottom", `${px}px`); }
+    pbPx(px) { return this.pb(`${px}px`); }
     get pl0() { return this.pl(0); }
     get pl1() { return this.pl(1); }
     get pl2() { return this.pl(2); }
@@ -659,7 +667,7 @@ class CssBuilder {
     get pl7() { return this.pl(7); }
     get pl8() { return this.pl(8); }
     pl(inc) { return this.add("paddingLeft", maybeInc(inc)); }
-    plPx(px) { return this.add("paddingLeft", `${px}px`); }
+    plPx(px) { return this.pl(`${px}px`); }
     get px0() { return this.px(0); }
     get px1() { return this.px(1); }
     get px2() { return this.px(2); }
@@ -770,12 +778,14 @@ class CssBuilder {
     get mw75() { return this.add("minWidth", "75%"); }
     get mw100() { return this.add("minWidth", "100%"); }
     mw(value) { return this.add("minWidth", value); }
+    mwPx(px) { return this.mw(`${px}px`); }
     get maxw0() { return this.add("maxWidth", "0"); }
     get maxw25() { return this.add("maxWidth", "25%"); }
     get maxw50() { return this.add("maxWidth", "50%"); }
     get maxw75() { return this.add("maxWidth", "75%"); }
     get maxw100() { return this.add("maxWidth", "100%"); }
     maxw(value) { return this.add("maxWidth", value); }
+    maxwPx(px) { return this.maxw(`${px}px`); }
     get w0() { return this.w(0); }
     get w1() { return this.w(1); }
     get w2() { return this.w(2); }
@@ -786,7 +796,13 @@ class CssBuilder {
     get w7() { return this.w(7); }
     get w8() { return this.w(8); }
     w(inc) { return this.add("width", maybeInc(inc)); }
-    wPx(px) { return this.add("width", `${px}px`); }
+    wPx(px) { return this.w(`${px}px`); }
+    // wordBreak
+    get breakNormal() { return this.add("wordBreak", "normal"); }
+    get breakAll() { return this.add("wordBreak", "break-all"); }
+    get breakKeepAll() { return this.add("wordBreak", "keep-all"); }
+    get breakWord() { return this.add("wordBreak", "break-word"); }
+    wordBreak(value) { return this.add("wordBreak", value); }
     // zIndex
     get z0() { return this.add("zIndex", 0); }
     get z1() { return this.add("zIndex", 1); }

package/dist/components/Tabs.d.ts

@@ -5,6 +5,7 @@ export interface Tab<V extends string = string> {
     name: string;
     value: V;
     icon?: IconKey;
+    endAdornment?: ReactNode;
     disabled?: boolean;
     render: () => ReactNode;
 }
@@ -15,11 +16,12 @@ export interface TabsProps<V extends string, X> {
     tabs: Tab<V>[];
     onChange: (value: V) => void;
     contentXss?: X;
+    alwaysShowAllTabs?: boolean;
 }
 export interface RouteTabsProps<V extends string, X> extends Omit<TabsProps<V, X>, "onChange" | "selected" | "tabs"> {
     tabs: RouteTab<V>[];
 }
-export interface RouteTab<V extends string> extends Omit<Tab<V>, "value"> {
+export interface RouteTab<V extends string = string> extends Omit<Tab<V>, "value"> {
     href: V;
     path: string | string[];
 }

package/dist/components/Tabs.js

@@ -21,8 +21,11 @@ const Icon_1 = require("./Icon");
  * and `TabContent` components directly.
  */
 function TabsWithContent(props) {
-    const onlyOneTabEnabled = props.tabs.filter((t) => !t.disabled).length === 1;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!onlyOneTabEnabled && (0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props), void 0)] }, void 0));
+    // Hide the tabs if only one tab is enabled, and `alwaysShowAllTabs` is not true
+    const hideTabs = props.alwaysShowAllTabs
+        ? false
+        : props.tabs.filter((t) => !t.disabled).length === 1;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideTabs && (0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props), void 0)] }, void 0));
 }
 exports.TabsWithContent = TabsWithContent;
 function TabContent(props) {
@@ -76,8 +79,8 @@ function Tabs(props) {
         }
     }
     // We also check this in TabsWithContent, but if someone is using Tabs standalone, check it here as well
-    const onlyOneTabEnabled = props.tabs.filter((t) => !t.disabled).length === 1;
-    if (onlyOneTabEnabled) {
+    const hideTabs = props.alwaysShowAllTabs ? false : props.tabs.filter((t) => !t.disabled).length === 1;
+    if (hideTabs) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
     return ((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) => {
@@ -88,7 +91,7 @@ function Tabs(props) {
 exports.Tabs = Tabs;
 function TabImpl(props) {
     const { tab, onClick, active, onKeyUp, onBlur, focusProps, isFocusVisible = false, ...others } = props;
-    const { disabled: isDisabled = false, name: label, icon } = tab;
+    const { disabled: isDisabled = false, name: label, icon, endAdornment } = tab;
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     const { baseStyles, activeStyles, focusRingStyles, hoverStyles, disabledStyles, activeHoverStyles } = (0, react_1.useMemo)(() => getTabStyles(), []);
     const uniqueValue = uniqueTabValue(tab);
@@ -114,7 +117,7 @@ function TabImpl(props) {
         onBlur,
         ...(isRouteTab(tab) ? {} : { onClick: () => onClick(tab.value) }),
     });
-    const tabLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0) }), void 0))] }, void 0));
+    const tabLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, (icon || endAdornment) && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: icon ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0) : endAdornment }), void 0)] }, void 0));
     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() {

package/dist/forms/StaticField.js

@@ -3,8 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StaticField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Css_1 = require("../Css");
+const defaultTestId_1 = require("../utils/defaultTestId");
+const useTestIds_1 = require("../utils/useTestIds");
 function StaticField(props) {
     const { label, value, children } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.sm.gray900.mh((0, Css_1.px)(40)).df.aic.$ }, { children: value || children }), void 0)] }, void 0));
+    const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.sm.gray900.mh((0, Css_1.px)(40)).df.aic.$ }, tid, { children: value || children }), void 0)] }, void 0));
 }
 exports.StaticField = StaticField;

package/package.json

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