@homebound/beam 2.331.0 → 2.332.0

package/dist/components/Table/utils/ColumnState.js

@@ -22,6 +22,8 @@ class ColumnState {
         this.visible = (_a = storage.wasVisible(column.id)) !== null && _a !== void 0 ? _a : (column.canHide ? (_b = column.initVisible) !== null && _b !== void 0 ? _b : false : true);
         if (this.visible && ((_c = storage.wasExpanded(column.id)) !== null && _c !== void 0 ? _c : column.initExpanded)) {
             this.expanded = true;
+            // TODO: verify this eslint ignore
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             this.doExpand();
         }
         (0, mobx_1.makeAutoObservable)(this, { column: mobx_1.observable.ref }, { name: `ColumnState@${column.id}` });
@@ -32,6 +34,8 @@ class ColumnState {
         // If an expandable header is becoming visible for the 1st time, expand it
         if (!wasVisible && visible && this.column.initExpanded && this.children === undefined) {
             this.expanded = true;
+            // TODO: verify this eslint ignore
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             this.doExpand();
         }
     }
@@ -44,6 +48,8 @@ class ColumnState {
         // The first time we expand, fetch our children. Note that ExpandableHeader
         // technically pre-loads our children, so it can show a spinner while loading,
         // and only after loading is complete, tell our column to expand.
+        // TODO: verify this eslint ignore
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         if (!wasExpanded)
             this.doExpand();
     }

package/dist/components/Table/utils/ColumnStates.js

@@ -44,6 +44,8 @@ class ColumnStates {
         else {
             existing.column = column;
             // Any time a column is re-added (i.e. props.columns changed), re-expand it
+            // TODO: verify this eslint ignore
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             if (existing.isExpanded)
                 existing.doExpand(true);
             return existing;

package/dist/forms/SubmitButton.d.ts

@@ -0,0 +1,8 @@
+import { ObjectState } from "@homebound/form-state";
+import { ButtonProps } from "..";
+export type SubmitButtonProps<T> = Omit<ButtonProps, "label"> & {
+    label?: ButtonProps["label"];
+    form: ObjectState<T>;
+};
+/** Provides a Button that will auto-disable if `formState` is invalid. */
+export declare function SubmitButton<T>(props: SubmitButtonProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/SubmitButton.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubmitButton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const src_1 = require("..");
+/** Provides a Button that will auto-disable if `formState` is invalid. */
+function SubmitButton(props) {
+    const { form, disabled, onClick, label = "Submit", ...others } = props;
+    if (typeof onClick === "string") {
+        throw new Error("SubmitButton.onClick doesn't support strings yet");
+    }
+    // Enable the button whenever the form is dirty, even if the form is partially invalid,
+    // because submitting will then force-touch all fields and show all errors instead of
+    // just errors-so-far.
+    const dirty = (0, src_1.useComputed)(() => form.dirty, [form]);
+    return ((0, jsx_runtime_1.jsx)(src_1.Button, { label: label, disabled: disabled || !dirty, onClick: (e) => {
+            // canSave will touch any not-yet-keyed-in fields to show errors
+            if (form.canSave()) {
+                void onClick(e);
+            }
+        }, ...others }));
+}
+exports.SubmitButton = SubmitButton;

package/dist/inputs/Switch.d.ts

@@ -10,7 +10,7 @@ export interface SwitchProps {
     label: string;
     /** Where to put the label. */
     labelStyle?: "form" | "inline" | "filter" | "hidden" | "left" | "centered";
-    /** Whether or not to hide the label */
+    /** Whether to hide the label */
     hideLabel?: boolean;
     /** Handler when the interactive element state changes. */
     onChange: (value: boolean) => void;

package/dist/inputs/Switch.js

@@ -19,8 +19,9 @@ function Switch(props) {
     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, props.tooltip);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, css: {
-            ...Css_1.Css.relative.cursorPointer.df.w("max-content").selectNone.$,
+    const tid = (0, utils_1.useTestIds)(otherProps, label);
+    return ((0, jsx_runtime_1.jsxs)("label", { ...hoverProps, css: {
+            ...Css_1.Css.relative.cursorPointer.df.wmaxc.selectNone.$,
             ...(labelStyle === "form" && Css_1.Css.fdc.$),
             ...(labelStyle === "left" && Css_1.Css.w100.aic.$),
             ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
@@ -38,7 +39,7 @@ function Switch(props) {
                         ...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 }) })] }));
+                    }, 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, ...tid }) })] }));
 }
 exports.Switch = Switch;
 /** Styles */
@@ -50,20 +51,24 @@ exports.switchHoverStyles = Css_1.Css.bgGray400.$;
 exports.switchFocusStyles = Css_1.Css.bshFocus.$;
 exports.switchSelectedHoverStyles = Css_1.Css.bgBlue900.$;
 // Circle inside Switcher/Toggle element styles
-const switchCircleDefaultStyles = (isCompact) => ({
-    ...Css_1.Css.wPx(circleDiameter(isCompact))
-        .hPx(circleDiameter(isCompact))
-        .br100.bgWhite.bshBasic.absolute.leftPx(2)
-        .topPx(2).transition.df.aic.jcc.$,
-    svg: Css_1.Css.hPx(toggleHeight(isCompact) / 2).wPx(toggleHeight(isCompact) / 2).$,
-});
+function switchCircleDefaultStyles(isCompact) {
+    return {
+        ...Css_1.Css.wPx(circleDiameter(isCompact))
+            .hPx(circleDiameter(isCompact))
+            .br100.bgWhite.bshBasic.absolute.leftPx(2)
+            .topPx(2).transition.df.aic.jcc.$,
+        svg: Css_1.Css.hPx(toggleHeight(isCompact) / 2).wPx(toggleHeight(isCompact) / 2).$,
+    };
+}
 /**
  * Affecting the `left` property due to transitions only working when there is
  * a previous value to work from.
  *
- * Calculation is as follow:
+ * Calculation is as follows:
  * - `100%` is the toggle width
  * - `${circleDiameter(isCompact)}px` is the circle diameter
  * - `2px` is to keep 2px edge spacing.
  */
-const switchCircleSelectedStyles = (isCompact) => Css_1.Css.left(`calc(100% - ${circleDiameter(isCompact)}px - 2px);`).$;
+function switchCircleSelectedStyles(isCompact) {
+    return Css_1.Css.left(`calc(100% - ${circleDiameter(isCompact)}px - 2px);`).$;
+}

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -182,6 +182,8 @@ function TreeSelectFieldBase(props) {
     const firstOpen = (0, react_1.useRef)(true);
     function onOpenChange(isOpen) {
         if (firstOpen.current && isOpen) {
+            // TODO: verify this eslint ignore
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             maybeInitLoad(options, fieldState, setFieldState);
             firstOpen.current = false;
         }

package/dist/inputs/index.d.ts

@@ -3,6 +3,7 @@ export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChipSelectField";
 export * from "./DateFields";
+export * from "./ErrorMessage";
 export * from "./MultiLineSelectField";
 export * from "./MultiSelectField";
 export * from "./NumberField";

package/dist/inputs/index.js

@@ -20,6 +20,7 @@ __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CheckboxGroup"), exports);
 __exportStar(require("./ChipSelectField"), exports);
 __exportStar(require("./DateFields"), exports);
+__exportStar(require("./ErrorMessage"), exports);
 __exportStar(require("./MultiLineSelectField"), exports);
 __exportStar(require("./MultiSelectField"), exports);
 __exportStar(require("./NumberField"), exports);

package/dist/inputs/internal/ComboBoxBase.js

@@ -106,6 +106,8 @@ function ComboBoxBase(props) {
     const firstOpen = (0, react_1.useRef)(true);
     function onOpenChange(isOpen) {
         if (firstOpen.current && isOpen) {
+            // TODO: verify this eslint ignore
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             maybeInitLoad();
             firstOpen.current = false;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.331.0",
+  "version": "2.332.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -75,7 +75,7 @@
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/jest": "^11.10.5",
     "@emotion/react": "^11.10.6",
-    "@homebound/eslint-config": "^1.8.0",
+    "@homebound/eslint-config": "^1.10.2",
     "@homebound/rtl-react-router-utils": "1.0.3",
     "@homebound/rtl-utils": "^2.65.0",
     "@homebound/truss": "^1.132.0",
@@ -108,7 +108,7 @@
     "babel-loader": "^8.2.2",
     "chromatic": "^6.17.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.12.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.6.14",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",