@homebound/beam 2.298.1 → 2.298.2

package/dist/components/internal/DatePicker/DatePickerOverlay.js

@@ -5,9 +5,6 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Css_1 = require("../../../Css");
 // Small wrapper around DatePicker to provide necessary styling and state handling when displayed as an overlay.
 function DatePickerOverlay({ overlayProps, children }) {
-    return (
-    // Adds `tabIndex` so clicking within the DatePicker will provide a `e.relatedTarget` on blur and focus events.
-    // This allows for components such as the DateField to conditionally trigger their 'onBlur' prop. E.g. If the user leaves the field to interact with the DatePicker, then don't call onBlur
-    (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br4.bshModal.$, ...overlayProps, tabIndex: 0, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br4.bshModal.$, ...overlayProps, children: children }));
 }
 exports.DatePickerOverlay = DatePickerOverlay;

package/dist/inputs/DateFields/DateFieldBase.js

@@ -24,12 +24,13 @@ 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 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
+    // Local focus ref used to avoid updating WIP values
     const isFocused = (0, react_1.useRef)(false);
+    // Ref helper to identify when focus is returned to the TextField due to the DatePicker closing.
+    const closingDatePicker = (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.
+    // This makes working within the DateRangePicker much more user-friendly.
     const [wipValue, setWipValue] = (0, react_1.useState)(value);
     const [inputValue, setInputValue] = (0, react_1.useState)((_a = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
     const tid = (0, utils_2.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
@@ -43,23 +44,24 @@ function DateFieldBase(props) {
         "aria-haspopup": "dialog",
         value: inputValue,
     };
-    const state = (0, react_stately_1.useOverlayTriggerState)({
-        onOpenChange: (isOpen) => {
-            // 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);
-            }
-        },
-        isOpen: defaultOpen,
-    });
+    const state = (0, react_stately_1.useOverlayTriggerState)({ isOpen: defaultOpen });
+    const onPickerClose = (0, react_1.useCallback)(() => {
+        closingDatePicker.current = true;
+        state.close();
+    }, [state]);
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
+        // Setting `inputMode` to none. This disables the virtual keyboard from being triggered on touch devices
+        inputMode: "none",
         onFocus: () => {
             var _a;
-            // Open overlay on focus of the input.
             isFocused.current = true;
-            state.open();
+            // Open overlay on focus of the input, only if the focus is not triggered due to the overlay being closed.
+            if (!closingDatePicker.current) {
+                state.open();
+            }
+            // Reset the closingDatePicker ref to false, so that the overlay can be opened again on the next focus event
+            closingDatePicker.current = false;
             (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.
@@ -70,13 +72,15 @@ function DateFieldBase(props) {
         },
         onBlur: (e) => {
             var _a, _b;
+            // Resets the ref variables when the input loses focus.
             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.
+            closingDatePicker.current = false;
+            // If interacting with the overlay or the input, then assume the user is still working within the DatePicker and return early to not trigger onBlur functionality.
             if ((inputWrapRef.current && inputWrapRef.current.contains(e.relatedTarget)) ||
                 (overlayRef.current && overlayRef.current.contains(e.relatedTarget))) {
                 return;
             }
+            // Otherwise, if we are actually leaving the DatePicker component, then
             const parsedDate = isRangeMode
                 ? (0, utils_1.parseDateRange)(inputValue, utils_1.dateFormats.short)
                 : (0, utils_1.parseDate)(inputValue, utils_1.dateFormats.short);
@@ -89,8 +93,7 @@ function DateFieldBase(props) {
                 // Or if we need to reset the dateFormat back from `short` to whatever the user specified
                 setInputValue((_b = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _b !== void 0 ? _b : "");
             }
-            state.close();
-            // 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.
+            // Only call `onBlur` if the DatePicker is closed, meaning the user has actually left the DateField component.
             if (!state.isOpen) {
                 (0, utils_2.maybeCall)(onBlur);
             }
@@ -107,16 +110,15 @@ function DateFieldBase(props) {
     const { buttonProps } = (0, react_aria_1.useButton)({
         ...triggerProps,
         isDisabled: isDisabled || isReadOnly,
-        // When pressed or focused then move focus the input, which will select the text and trigger the DatePicker to open
+        // When pressed then move focus the input, which will select the text and trigger the DatePicker to open
         onPress: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-        onFocus: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }, buttonRef);
     const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
         targetRef: inputWrapRef,
         overlayRef,
         shouldFlip: true,
         isOpen: state.isOpen,
-        onClose: state.close,
+        onClose: onPickerClose,
         placement: "bottom left",
         shouldUpdatePosition: true,
         offset: 4,
@@ -164,9 +166,9 @@ function DateFieldBase(props) {
             } })) }));
     const calendarButton = ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1, ...tid.calendarButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }) }));
     const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, onChange: (v) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, ...{ internalProps: { forceFocus: state.isOpen } }, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
-                    state.close();
+                    onPickerClose();
                     if (v) {
                         setInputValue(v);
                         // If changing the value directly (vs using the DatePicker), then we always use the short format
@@ -177,17 +179,17 @@ function DateFieldBase(props) {
                     else if (v === undefined) {
                         setInputValue("");
                     }
-                }, endAdornment: !iconLeft && EndFieldButtons, startAdornment: !hideCalendarIcon && iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: overlayProps, children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, { range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
-                            var _a;
-                            // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
-                            setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
-                            onChange(dr);
-                        }, useYearPicker: isRangeFilterField, ...tid.datePicker })) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, { value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
-                            var _a;
-                            setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
-                            onChange(d);
-                            state.close();
-                        }, ...tid.datePicker })) }) }))] }));
+                }, endAdornment: !iconLeft && EndFieldButtons, startAdornment: !hideCalendarIcon && iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: onPickerClose, isOpen: state.isOpen, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { autoFocus: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: overlayProps, children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, { range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
+                                var _a;
+                                // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
+                                setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
+                                onChange(dr);
+                            }, useYearPicker: isRangeFilterField, ...tid.datePicker })) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, { value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
+                                var _a;
+                                setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
+                                onChange(d);
+                                onPickerClose();
+                            }, ...tid.datePicker })) }) }) }))] }));
 }
 exports.DateFieldBase = DateFieldBase;
 function isParsedDateValid(d) {

package/dist/inputs/TextFieldBase.js

@@ -111,9 +111,7 @@ function TextFieldBase(props) {
                                 // Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
                                 ...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
                                 ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
-                            }, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, 
-                                    // Make the input field readOnly if the field explicitly sets it to `true`
-                                    readOnly: inputProps.readOnly, css: {
+                            }, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
                                         ...fieldStyles.input,
                                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
                                         ...(showHover ? fieldStyles.hover : {}),

package/package.json

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