@homebound/beam 2.304.0 → 2.304.1

package/dist/inputs/DateFields/DateFieldBase.js

@@ -26,8 +26,6 @@ function DateFieldBase(props) {
     const overlayRef = (0, react_1.useRef)(null);
     // 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.
@@ -45,10 +43,6 @@ function DateFieldBase(props) {
         value: inputValue,
     };
     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
@@ -56,12 +50,6 @@ function DateFieldBase(props) {
         onFocus: () => {
             var _a;
             isFocused.current = true;
-            // 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.
@@ -74,7 +62,6 @@ function DateFieldBase(props) {
             var _a, _b;
             // Resets the ref variables when the input loses focus.
             isFocused.current = false;
-            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))) {
@@ -107,18 +94,13 @@ function DateFieldBase(props) {
         },
     }, inputRef);
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: "dialog" }, state, buttonRef);
-    const { buttonProps } = (0, react_aria_1.useButton)({
-        ...triggerProps,
-        isDisabled: isDisabled || isReadOnly,
-        // 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(); },
-    }, buttonRef);
+    const { buttonProps } = (0, react_aria_1.useButton)({ ...triggerProps, isDisabled: isDisabled || isReadOnly, onPress: state.open }, buttonRef);
     const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
         targetRef: inputWrapRef,
         overlayRef,
         shouldFlip: true,
         isOpen: state.isOpen,
-        onClose: onPickerClose,
+        onClose: state.close,
         placement: "bottom left",
         shouldUpdatePosition: true,
         offset: 4,
@@ -164,11 +146,11 @@ function DateFieldBase(props) {
                 setInputValue("");
                 onChange(undefined);
             } })) }));
-    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 calendarButton = ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, ...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, ...{ internalProps: { forceFocus: state.isOpen } }, 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, onClick: state.open }, inputRef: inputRef, inputWrapRef: inputWrapRef, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
-                    onPickerClose();
+                    state.close();
                     if (v) {
                         setInputValue(v);
                         // If changing the value directly (vs using the DatePicker), then we always use the short format
@@ -179,16 +161,16 @@ 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: 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) => {
+                }, 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)(react_aria_1.FocusScope, { autoFocus: true, contain: 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;
+                                state.close();
                                 setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                                 onChange(d);
-                                onPickerClose();
                             }, ...tid.datePicker })) }) }) }))] }));
 }
 exports.DateFieldBase = DateFieldBase;

package/package.json

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