@homebound/beam 2.95.3 → 2.96.3

package/README.md

@@ -23,7 +23,7 @@ _To see the latest designs, check out the [Figma](https://www.figma.com/file/aWU
 
 ## Beam's API Design Approach
 
-Beam is specifically "Homebound's design system". Given this extremely narrow purpose, we can lean into the simplicity of:
+Beam is specifically "Homebound's Design System". Given this extremely narrow purpose, we can lean into the simplicity of:
 
 - We don't need to support everything for everyone
 - We can prefer API/UX consistency & simplicity over configuration & complexity

package/dist/components/Table/GridTable.js

@@ -261,7 +261,7 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
         const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
         return { footerStyle: { paddingBottom }, listStyle: { ...style, rootCss: otherRootStyles } };
     }, [style]);
-    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
@@ -270,11 +270,11 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
             const maybeContentsDiv = el.firstElementChild;
             // If it is a chrome row, then we are not using `display: contents;`, return the height of this element.
             if ("chrome" in maybeContentsDiv.dataset) {
-                return maybeContentsDiv.offsetHeight;
+                return maybeContentsDiv.getBoundingClientRect().height || 1;
             }
             // Both the `Item` and `itemContent` use `display: contents`, so their height is 0,
             // so instead drill into the 1st real content cell.
-            return maybeContentsDiv.firstElementChild.offsetHeight;
+            return maybeContentsDiv.firstElementChild.getBoundingClientRect().height;
         }, itemContent: (index) => {
             // We keep header and filter rows separate, but react-virtuoso is a flat list,
             // so we pick the right header / first row message / actual row.

package/dist/forms/BoundCheckboxField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { CheckboxProps } from "../inputs";
-export declare type BoundCheckboxFieldProps = Omit<CheckboxProps, "values" | "onChange" | "label" | "onBlur" | "onFocus"> & {
+export declare type BoundCheckboxFieldProps = Omit<CheckboxProps, "values" | "onChange" | "label"> & {
     field: FieldState<any, boolean | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (values: boolean) => void;

package/dist/forms/BoundCheckboxField.js

@@ -8,7 +8,7 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `Checkbox` and binds it to a form field. */
 function BoundCheckboxField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
@@ -16,7 +16,13 @@ function BoundCheckboxField(props) {
                     // We are triggering blur manually for checkbox fields due to its transactional nature
                     onChange(selected);
                     field.blur();
-                }, errorMsg: field.touched ? field.errors.join(" ") : undefined }, testId, others), void 0));
+                }, errorMsg: field.touched ? field.errors.join(" ") : undefined, onFocus: () => {
+                    field.focus();
+                    (0, utils_1.maybeCall)(onFocus);
+                }, onBlur: () => {
+                    field.blur();
+                    (0, utils_1.maybeCall)(onBlur);
+                } }, testId, others), void 0));
         } }, void 0));
 }
 exports.BoundCheckboxField = BoundCheckboxField;

package/dist/inputs/Checkbox.d.ts

@@ -14,5 +14,9 @@ export interface CheckboxProps {
     selected?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
+    /** Callback fired when focus removes from the component */
+    onBlur?: () => void;
+    /** Callback fired when focus is set to the component */
+    onFocus?: () => void;
 }
 export declare function Checkbox(props: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/CheckboxBase.js

@@ -23,7 +23,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, inputProps, focusProps, tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
+            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, (0, react_aria_1.mergeProps)(inputProps, focusProps), tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
                     ...baseStyles,
                     ...((isSelected || isIndeterminate) && filledBoxStyles),
                     ...((isSelected || isIndeterminate) && isHovered && filledBoxHoverStyles),

package/dist/inputs/ChipSelectField.js

@@ -42,7 +42,7 @@ function ChipSelectField(props) {
         },
         onBlur: (e) => {
             // Do not call onBlur if focus moved to within the Popover
-            if (popoverRef.current && popoverRef.current.contains(e.relatedTarget)) {
+            if ((popoverRef.current && popoverRef.current.contains(e.relatedTarget)) || showInput) {
                 return;
             }
             (0, utils_1.maybeCall)(onBlur);

package/dist/inputs/SelectField.mock.js

@@ -7,7 +7,7 @@ const utils_1 = require("../utils");
 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, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, } = props;
+    value, options, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
     const tid = (0, utils_1.useTestIds)(props, "select");
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
     return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value: 
@@ -24,7 +24,7 @@ function SelectField(props) {
         }, 
         // 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)}` }, { children: getOptionLabel(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));
 }
 exports.SelectField = SelectField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.95.3",
+  "version": "2.96.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -48,7 +48,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-stately": "^3.9.0",
-    "react-virtuoso": "^1.9.0",
+    "react-virtuoso": "^2.3.1",
     "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",