@homebound/beam 2.175.2 → 2.177.1

package/dist/components/CssReset.js

@@ -54,6 +54,12 @@ const ourReset = (0, react_1.css) `
       transform: rotate(360deg);
     }
   }
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.6;
+    }
+  }
 `;
 // Copy/pasted from TW which uses this as their base reset.
 const modernNormalizeReset = (0, react_1.css) `

package/dist/components/LoadingSkeleton.d.ts

@@ -0,0 +1,10 @@
+declare type Sizes = "sm" | "md" | "lg";
+export declare type LoadingSkeletonProps = {
+    rows?: number;
+    columns?: number;
+    size?: Sizes;
+    randomizeWidths?: boolean;
+    contrast?: boolean;
+};
+export declare function LoadingSkeleton({ rows, columns, size, randomizeWidths, contrast, }: LoadingSkeletonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingSkeleton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingSkeleton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Css_1 = require("../Css");
+function LoadingSkeleton({ rows = 1, columns = 1, size = "md", randomizeWidths = false, contrast = false, }) {
+    const cellArray = [...Array(columns)];
+    const rowArray = [...Array(rows)];
+    const rowHeight = sizeToPixels[size];
+    const rowCells = (rowNumber) => {
+        const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
+        return cellArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br4
+                .add("animation", "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite")
+                .add("flexGrow", flexGrowForCell)
+                .bgGray300.if(contrast).bgGray700.$ }, `row-${rowNumber}-cell-${i}`)));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": "Loading" }, { children: rowArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.childGap1.mb1.hPx(rowHeight).$ }, { children: rowCells(i) }), `row-${i}`))) }), void 0));
+}
+exports.LoadingSkeleton = LoadingSkeleton;
+/** Create the illusion of random widths by cycling through a list of widths that look nice in order */
+function getRandomizedFlexBasisByRowIndex(rowIndex) {
+    const randomizedFlexBasisValues = [0.65, 0.8, 0.75, 0.9, 0.8, 0.85, 0.8, 0.95];
+    const valueIndex = rowIndex % randomizedFlexBasisValues.length;
+    return randomizedFlexBasisValues[valueIndex];
+}
+const sizeToPixels = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+};

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Layout";
 export * from "./Loader";
+export * from "./LoadingSkeleton";
 export * from "./Modal";
 export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";

package/dist/components/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./Icon"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./Layout"), exports);
 __exportStar(require("./Loader"), exports);
+__exportStar(require("./LoadingSkeleton"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./Modal/useModal"), exports);
 var NavLink_1 = require("./NavLink");

package/dist/inputs/MultiSelectField.mock.js

@@ -8,38 +8,38 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 function MultiSelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, } = props;
+    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, disabledOptions = [], helperText, } = props;
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { 
-        // We're cheating and assume the values are strings...what we should really do is either:
-        // a) use beam's valueToKey mapping to string-encode any Value, or
-        // b) instead of using `values` directly, use the index of each value's `option` in `options`
-        value: values, onChange: (e) => {
-            var _a, _b, _c;
-            const { target } = e;
-            const selectedValues = [...values];
-            for (let i = 0; i < target.selectedOptions.length; i++) {
-                if (selectedValues.includes((_a = target.selectedOptions.item(i)) === null || _a === void 0 ? void 0 : _a.value)) {
-                    // deSelect if already selected
-                    selectedValues.splice(selectedValues.indexOf((_b = target.selectedOptions.item(i)) === null || _b === void 0 ? void 0 : _b.value), 1);
-                }
-                else {
-                    // add value
-                    selectedValues.push((_c = target.selectedOptions.item(i)) === null || _c === void 0 ? void 0 : _c.value);
-                }
-            }
-            const selectedOptions = options.filter((o) => selectedValues.includes(getOptionValue(o)));
-            onSelect(selectedOptions.map((o) => getOptionValue(o)), selectedOptions);
-        }, multiple: true, onFocus: () => {
-            if (!readOnly && onFocus)
-                onFocus();
-        }, onBlur: () => {
-            if (!readOnly && onBlur)
-                onBlur();
-        }, 
-        // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
-        disabled: !!(readOnly || disabled), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
-                return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: getOptionValue(option) }, { children: getOptionLabel(option) }), i));
-            })] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, tid.label, { children: [label, (0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { 
+                // We're cheating and assume the values are strings...what we should really do is either:
+                // a) use beam's valueToKey mapping to string-encode any Value, or
+                // b) instead of using `values` directly, use the index of each value's `option` in `options`
+                value: values, onChange: (e) => {
+                    var _a, _b, _c;
+                    const { target } = e;
+                    const selectedValues = [...values];
+                    for (let i = 0; i < target.selectedOptions.length; i++) {
+                        if (selectedValues.includes((_a = target.selectedOptions.item(i)) === null || _a === void 0 ? void 0 : _a.value)) {
+                            // deSelect if already selected
+                            selectedValues.splice(selectedValues.indexOf((_b = target.selectedOptions.item(i)) === null || _b === void 0 ? void 0 : _b.value), 1);
+                        }
+                        else {
+                            // add value
+                            selectedValues.push((_c = target.selectedOptions.item(i)) === null || _c === void 0 ? void 0 : _c.value);
+                        }
+                    }
+                    const selectedOptions = options.filter((o) => selectedValues.includes(getOptionValue(o)));
+                    onSelect(selectedOptions.map((o) => getOptionValue(o)), selectedOptions);
+                }, multiple: true, onFocus: () => {
+                    if (!readOnly && onFocus)
+                        onFocus();
+                }, onBlur: () => {
+                    if (!readOnly && onBlur)
+                        onBlur();
+                }, 
+                // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
+                disabled: !!(readOnly || disabled), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
+                        return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: getOptionValue(option), disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
+                    })] }), void 0), helperText && (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.helperText, { children: helperText }), void 0)] }), void 0));
 }
 exports.MultiSelectField = MultiSelectField;

package/dist/inputs/SelectField.mock.js

@@ -9,7 +9,7 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 function SelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, } = props;
+    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, helperText, } = props;
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
@@ -18,25 +18,25 @@ function SelectField(props) {
             setOptions(maybeOptions);
         }
     }, [maybeOptions]);
-    return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value: 
-        // @ts-ignore - allow `value` to be seen as a string
-        value !== undefined && value !== "" && currentOption ? getOptionValue(currentOption) : "", onChange: (e) => {
-            const option = options.find((o) => `${getOptionValue(o)}` === e.target.value) || options[0];
-            onSelect(getOptionValue(option), option);
-        }, onFocus: async () => {
-            if (!Array.isArray(maybeOptions)) {
-                const result = await maybeOptions.load();
-                setOptions(result.options);
-            }
-            if (!readOnly && onFocus)
-                onFocus();
-        }, onBlur: () => {
-            if (!readOnly && onBlur)
-                onBlur();
-        }, 
-        // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
-        disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
-                return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
-            })] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, tid.label, { children: [label, (0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value: 
+                // @ts-ignore - allow `value` to be seen as a string
+                value !== undefined && value !== "" && currentOption ? getOptionValue(currentOption) : "", onChange: (e) => {
+                    const option = options.find((o) => `${getOptionValue(o)}` === e.target.value) || options[0];
+                    onSelect(getOptionValue(option), option);
+                }, onFocus: async () => {
+                    if (!Array.isArray(maybeOptions)) {
+                        const result = await maybeOptions.load();
+                        setOptions(result.options);
+                    }
+                    if (!readOnly && onFocus)
+                        onFocus();
+                }, onBlur: () => {
+                    if (!readOnly && onBlur)
+                        onBlur();
+                }, 
+                // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
+                disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
+                        return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
+                    })] }), void 0), helperText && (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.helperText, { children: helperText }), void 0)] }), void 0));
 }
 exports.SelectField = SelectField;

package/package.json

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