@homebound/beam 2.96.0 → 2.97.0

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/DateField.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { Modifier } from "react-day-picker";
 import { TextFieldBaseProps } from "./TextFieldBase";
 import "./DateField.css";
 export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
@@ -19,6 +20,11 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
     placeholder?: string;
     format?: keyof typeof dateFormats;
     iconLeft?: boolean;
+    /**
+     * Set custom logic for individual dates or date ranges to be disabled in the picker
+     * exposed from `react-day-picker`: https://react-day-picker.js.org/api/DayPicker#modifiers
+    */
+    disabledDays?: Modifier;
 }
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const dateFormats: {

package/dist/inputs/DateField.js

@@ -16,7 +16,7 @@ const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 require("./DateField.css");
 function DateField(props) {
-    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, ...others } = props;
+    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, disabledDays, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -123,7 +123,7 @@ function DateField(props) {
                 }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: isDisabled && typeof disabled !== "boolean" ? disabled : undefined }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: { ...overlayProps, ...positionProps }, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ state: state, value: value, positionProps: positionProps, onChange: (d) => {
                         setInputValue(formatDate(d, dateFormat));
                         onChange(d);
-                    } }, tid.datePicker), void 0) }), void 0))] }, void 0));
+                    }, disabledDays: disabledDays }, tid.datePicker), void 0) }), void 0))] }, void 0));
 }
 exports.DateField = DateField;
 function formatDate(date, format) {

package/dist/inputs/SelectField.mock.js

@@ -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)}`, disabled: disabledOptions.includes(getOptionValue(option).toString()) }, { 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/dist/inputs/internal/DatePickerOverlay.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
+import { Modifier } from "react-day-picker";
 import { OverlayTriggerState } from "react-stately";
 interface DatePickerOverlayProps {
     value: Date | undefined;
     state: OverlayTriggerState;
     positionProps: React.HTMLAttributes<Element>;
     onChange: (value: Date) => void;
+    disabledDays: Modifier;
 }
 export declare function DatePickerOverlay(props: DatePickerOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/DatePickerOverlay.js

@@ -11,7 +11,7 @@ const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 function DatePickerOverlay(props) {
     var _a;
-    const { value, state, positionProps, onChange } = props;
+    const { value, state, positionProps, onChange, disabledDays } = props;
     // We define some spacing between the Calendar overlay and the trigger element, and depending on where the overlay renders (above or below) we need to adjust the spacing.
     // We can determine if the position was flipped based on what style is defined, `top` (for positioned below the trigger), and `bottom` (for above the trigger).
     // The above assumption regarding `top` and `bottom` is true as long as we use `bottom` as our default `OverlayPosition.placement` (set in DateField).
@@ -35,11 +35,17 @@ function DatePickerOverlay(props) {
             "& .DayPicker-Day:active": Css_1.Css.bgGray400.$,
             // Make the month title, i.e. "May 2021", match figma; pyPx nudge matches the NavbarElement nudging
             "& .DayPicker-Caption > div": Css_1.Css.base.pyPx(2).$,
-        } }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.default, { navbarElement: NavbarElement, weekdayElement: Weekday, selectedDays: [value], initialMonth: value !== null && value !== void 0 ? value : new Date(), onDayClick: (day) => {
+            // For days that are disabled via `disabledDays`, 
+            "& .DayPicker-Day--disabled": Css_1.Css.cursorNotAllowed.$,
+            // Override `.DayPicker-Day:active` background when the day is disabled
+            "& .DayPicker-Day--disabled:active": Css_1.Css.bgWhite.$,
+        } }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.default, { navbarElement: NavbarElement, weekdayElement: Weekday, selectedDays: [value], initialMonth: value !== null && value !== void 0 ? value : new Date(), onDayClick: (day, modifiers) => {
+                if (modifiers.disabled)
+                    return;
                 // Set the day value, and close the picker.
                 onChange(day);
                 state.close();
-            } }, void 0) }), void 0));
+            }, disabledDays: disabledDays }, void 0) }), void 0));
 }
 exports.DatePickerOverlay = DatePickerOverlay;
 /** Customize the prev/next button to be our SVG icons. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.96.0",
+  "version": "2.97.0",
   "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",