@homebound/beam 2.262.0 → 2.264.0

package/dist/components/internal/MenuItem.d.ts

@@ -7,5 +7,5 @@ interface MenuItemProps {
     onClose: VoidFunction;
     contrast: boolean;
 }
-export declare function MenuItemImpl(props: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuItemImpl(props: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/internal/MenuItem.js

@@ -15,6 +15,9 @@ const defaultTestId_1 = require("../../utils/defaultTestId");
 function MenuItemImpl(props) {
     const { item, state, onClose, contrast } = props;
     const menuItem = item.value;
+    if (!menuItem) {
+        return null;
+    }
     const { disabled, onClick, label, destructive } = menuItem;
     const isDisabled = Boolean(disabled);
     const isSelected = state.selectionManager.selectedKeys.has(label);

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.$, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...(0, react_aria_1.mergeProps)(inputProps, focusProps), ...tid }) }), (0, jsx_runtime_1.jsx)("span", { ...hoverProps, css: {
+            .if(isDisabled).cursorNotAllowed.$, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...(0, react_aria_1.mergeProps)(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }), (0, jsx_runtime_1.jsx)("span", { ...hoverProps, css: {
                     ...baseStyles,
                     ...(((isSelected && !isDisabled) || isIndeterminate) && filledBoxStyles),
                     ...(((isSelected && !isDisabled) || isIndeterminate) && isHovered && filledBoxHoverStyles),

package/dist/inputs/DateFields/DateFieldBase.js

@@ -24,9 +24,9 @@ function DateFieldBase(props) {
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
     const overlayRef = (0, react_1.useRef)(null);
-    // Local focus state to conditionally call onBlur when the date picker closes.
+    // Local focus ref to conditionally call onBlur when the date picker closes. Using a ref instead of a state to have a reliable value between renders
     // E.g. If the picker closes due to focus going back to the input field then don't call onBlur. Also used to avoid updating WIP values
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const isFocused = (0, react_1.useRef)(false);
     const dateFormat = (0, utils_1.getDateFormat)(format);
     // The `wipValue` allows the "range" mode to set the value to `undefined`, even if the `onChange` response cannot be undefined.
     // This makes working within the DateRangePicker much more user friendly.
@@ -45,8 +45,9 @@ function DateFieldBase(props) {
     };
     const state = (0, react_stately_1.useOverlayTriggerState)({
         onOpenChange: (isOpen) => {
-            // Handles calling `onBlur` for the case where the user interacts with the overlay, removing focus from the input field, and eventually closes the overlay (whether clicking away, or selecting a date)
-            if (!isOpen && !isFocused) {
+            // Handles avoiding calling `onBlur` for the case where the user closes the overlay by changing the DateField input value (TextFieldBase.onChange calls state.close()).
+            // Calls `onBlur` for the case where the user interacts with the overlay (!isFocused) and eventually closes the overlay (whether clicking away, or selecting a date) as focus is not returned to the field.
+            if (!isOpen && !isFocused.current) {
                 (0, utils_2.maybeCall)(onBlur);
             }
         },
@@ -57,8 +58,8 @@ function DateFieldBase(props) {
         onFocus: () => {
             var _a;
             // Open overlay on focus of the input.
+            isFocused.current = true;
             state.open();
-            setIsFocused(true);
             (0, utils_2.maybeCall)(onFocus);
             if (wipValue && dateFormat !== utils_1.dateFormats.short) {
                 // When focused, change to use the "short" date format, as it is simpler to update by hand and parse.
@@ -69,7 +70,7 @@ function DateFieldBase(props) {
         },
         onBlur: (e) => {
             var _a, _b;
-            setIsFocused(false);
+            isFocused.current = false;
             // If we are interacting any other part of `inputWrap` ref (such as the calendar button) return early as clicking anywhere within there will push focus to the input field.
             // Or if interacting with the DatePicker then also return early. The overlay will handle calling `onBlur` once it closes.
             if ((inputWrapRef.current && inputWrapRef.current.contains(e.relatedTarget)) ||
@@ -89,7 +90,10 @@ function DateFieldBase(props) {
                 setInputValue((_b = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _b !== void 0 ? _b : "");
             }
             state.close();
-            (0, utils_2.maybeCall)(onBlur);
+            // Only call `onBlur` if the overlay is closed. In other cases, the overlay's `onOpenChange` will handling calling `onBlur` when closing and the focus is not still on the input.
+            if (!state.isOpen) {
+                (0, utils_2.maybeCall)(onBlur);
+            }
         },
         onKeyDown: (e) => {
             var _a;
@@ -121,7 +125,7 @@ function DateFieldBase(props) {
     (0, react_1.useEffect)(() => {
         var _a;
         // Avoid updating any WIP values.
-        if (!isFocused && !state.isOpen) {
+        if (!isFocused.current && !state.isOpen) {
             setWipValue(value);
             setInputValue((_a = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
         }

package/dist/inputs/SelectField.mock.js

@@ -36,7 +36,9 @@ 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: "" }), options.map((option, i) => {
-                        return ((0, jsx_runtime_1.jsx)("option", { value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)), children: getOptionLabel(option) }, i));
+                        return ((0, jsx_runtime_1.jsx)("option", { value: `${getOptionValue(option)}`, disabled: disabledOptions.some((dOption) => typeof dOption === "object"
+                                ? dOption.value === getOptionValue(option)
+                                : dOption === getOptionValue(option)), children: getOptionLabel(option) }, i));
                     })] }), helperText && (0, jsx_runtime_1.jsx)("div", { ...tid.helperText, children: helperText })] }));
 }
 exports.SelectField = SelectField;

package/dist/utils/index.js

@@ -37,6 +37,9 @@ function toGroupState(values, onChange) {
         toggleValue: (value) => (values.includes(value) ? addValue(value) : removeValue(value)),
         isDisabled: false,
         isReadOnly: false,
+        // We do not use the validation state, as our Switch groups do not support error states. However, this field is required by the `CheckboxGroupState` so we need to include it.
+        // If we ever update our SwitchGroup component to support error states, we'll need to update this.
+        validationState: "valid",
     };
 }
 exports.toGroupState = toGroupState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.262.0",
+  "version": "2.264.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -43,12 +43,12 @@
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^9.0.4",
     "memoize-one": "^5.2.1",
-    "react-aria": "^3.18.0",
+    "react-aria": "^3.24.0",
     "react-day-picker": "8.0.7",
     "react-popper": "^2.3.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-stately": "^3.16.0",
+    "react-stately": "^3.22.0",
     "react-virtuoso": "2.10.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",