@homebound/beam 2.144.0 → 2.146.0

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,6 +1,10 @@
 import { SnackbarNoticeProps } from "./SnackbarNotice";
 interface SnackbarProps {
     notices: SnackbarNoticeProps[];
+    offset: Offset;
 }
-export declare function Snackbar({ notices }: SnackbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Snackbar({ notices, offset }: SnackbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare type Offset = {
+    bottom?: number;
+};
 export {};

package/dist/components/Snackbar/Snackbar.js

@@ -4,7 +4,13 @@ exports.Snackbar = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const SnackbarNotice_1 = require("./SnackbarNotice");
 const Css_1 = require("../../Css");
-function Snackbar({ notices }) {
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fixed.bottom3.left3.df.fdc.aifs.gapPx(12).$ }, { children: notices.map((data) => ((0, jsx_runtime_1.jsx)(SnackbarNotice_1.SnackbarNotice, Object.assign({}, data), data.id))) }), void 0));
+const utils_1 = require("../../utils");
+function Snackbar({ notices, offset }) {
+    var _a;
+    const tid = (0, utils_1.useTestIds)({});
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.snackbarWrapper, { css: Css_1.Css.fixed.z999.bottomPx((_a = offset.bottom) !== null && _a !== void 0 ? _a : defaultOffset.bottom).left3.df.fdc.aifs.gapPx(12).$ }, { children: notices.map((data) => ((0, jsx_runtime_1.jsx)(SnackbarNotice_1.SnackbarNotice, Object.assign({}, data), data.id))) }), void 0));
 }
 exports.Snackbar = Snackbar;
+const defaultOffset = {
+    bottom: 24,
+};

package/dist/components/Snackbar/SnackbarContext.d.ts

@@ -1,7 +1,9 @@
 import React, { PropsWithChildren } from "react";
 import { SnackbarNoticeProps } from "./SnackbarNotice";
+import { Offset } from "./Snackbar";
 export declare type SnackbarContextProps = {
     setNotices: React.Dispatch<React.SetStateAction<SnackbarNoticeProps[]>>;
+    setOffset: React.Dispatch<React.SetStateAction<Offset>>;
 };
 export declare const SnackbarContext: React.Context<SnackbarContextProps>;
 export declare function SnackbarProvider(props: PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Snackbar/SnackbarContext.js

@@ -4,11 +4,12 @@ exports.useSnackbarContext = exports.SnackbarProvider = exports.SnackbarContext
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Snackbar_1 = require("./Snackbar");
-exports.SnackbarContext = (0, react_1.createContext)({ setNotices: () => { } });
+exports.SnackbarContext = (0, react_1.createContext)({ setNotices: () => { }, setOffset: () => { } });
 function SnackbarProvider(props) {
     const [notices, setNotices] = (0, react_1.useState)([]);
-    const contextValue = (0, react_1.useMemo)(() => ({ setNotices }), []);
-    return ((0, jsx_runtime_1.jsxs)(exports.SnackbarContext.Provider, Object.assign({ value: contextValue }, { children: [props.children, (0, jsx_runtime_1.jsx)(Snackbar_1.Snackbar, { notices: notices }, void 0)] }), void 0));
+    const [offset, setOffset] = (0, react_1.useState)({});
+    const contextValue = (0, react_1.useMemo)(() => ({ setNotices, setOffset }), []);
+    return ((0, jsx_runtime_1.jsxs)(exports.SnackbarContext.Provider, Object.assign({ value: contextValue }, { children: [props.children, (0, jsx_runtime_1.jsx)(Snackbar_1.Snackbar, { notices: notices, offset: offset }, void 0)] }), void 0));
 }
 exports.SnackbarProvider = SnackbarProvider;
 function useSnackbarContext() {

package/dist/components/Snackbar/useSnackbar.d.ts

@@ -1,9 +1,18 @@
 import { SnackbarNoticeProps } from "./SnackbarNotice";
+import { Offset } from "./Snackbar";
 export interface UseSnackbarHook {
     triggerNotice: (props: TriggerNoticeProps) => {
         close: () => void;
     };
     closeNotice: (id: string) => void;
+    /**
+     * A custom hook that components may call to notify snackbar it should offset,
+     * such as a bottom-mounted Stepper component that ought not be covered by
+     * notifications. Behaves like a useEffect, and will clean up on dismount.
+     * (Known issue: If multiple components call this, last-to-render takes
+     * precedence and first-to-dismount unsets everything)
+     */
+    useSnackbarOffset: (offset: Offset) => void;
 }
 export declare function useSnackbar(): UseSnackbarHook;
 export interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose"> {

package/dist/components/Snackbar/useSnackbar.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const SnackbarContext_1 = require("./SnackbarContext");
 const utils_1 = require("../../utils");
 function useSnackbar() {
-    const { setNotices } = (0, SnackbarContext_1.useSnackbarContext)();
+    const { setNotices, setOffset } = (0, SnackbarContext_1.useSnackbarContext)();
     const onClose = (0, react_1.useCallback)((noticeId) => {
         setNotices((prev) => {
             let returnValue = prev;
@@ -50,7 +50,11 @@ function useSnackbar() {
         };
     }, [onClose, setNotices]);
     const closeNotice = (0, react_1.useCallback)((id) => onClose(id), [onClose]);
-    return { triggerNotice, closeNotice };
+    const useSnackbarOffset = ({ bottom }) => (0, react_1.useEffect)(() => {
+        setOffset({ bottom });
+        return () => setOffset({});
+    }, [bottom]);
+    return { triggerNotice, closeNotice, useSnackbarOffset };
 }
 exports.useSnackbar = useSnackbar;
 let snackbarId = 1;

package/dist/components/Stepper.js

@@ -12,10 +12,16 @@ function Stepper({ steps, currentStep, onChange }) {
     }
     // calc progress based on last completed step - return -1 when no steps completed
     const lastCompletedStep = steps.map((step) => step.state).lastIndexOf("complete");
-    return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.$ }, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.$ }, { children: steps.map((step) => {
+    const maxStepWidth = 200;
+    const minStepWidth = 100;
+    const gap = 8;
+    return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$ }, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.gapPx(gap).$ }, { children: steps.map((step) => {
                     const isCurrent = currentStep === step.value;
-                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fdc.wPx(200).$, "aria-current": isCurrent }, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }), void 0) }), step.label));
-                }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300.hPx(4).w(`${steps.length * 200}px`).$ }, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
+                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent }, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }), void 0) }), step.label));
+                }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300
+                    .hPx(4)
+                    .maxwPx(steps.length * maxStepWidth + (steps.length - 1) * gap)
+                    .mwPx(steps.length * minStepWidth + (steps.length - 1) * gap).w100.$ }, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
                         .add("transition", "width 200ms")
                         .h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }, void 0) }), void 0)] }), void 0));
 }

package/dist/forms/BoundSelectField.d.ts

@@ -1,8 +1,8 @@
 import { FieldState } from "@homebound/form-state";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "label"> & {
-    onSelect?: (option: V | undefined) => void;
+export declare type BoundSelectFieldProps<O, V extends Value> = Omit<SelectFieldProps<O, V>, "value" | "onSelect" | "label"> & {
+    onSelect?: (value: V | undefined, opt: O | undefined) => void;
     field: FieldState<any, V | null | undefined>;
     label?: string;
 };

package/dist/forms/BoundSelectField.js

@@ -14,8 +14,8 @@ function BoundSelectField(props) {
     const testId = (0, useTestIds_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value) => {
-                    onSelect(value);
+            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value, opt) => {
+                    onSelect(value, opt);
                     field.maybeAutoSave();
                 }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
                     field.blur();

package/package.json

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