@homebound/beam 2.90.4 → 2.91.0

package/dist/inputs/ChipSelectField.js

@@ -25,7 +25,8 @@ function ChipSelectField(props) {
     const isDisabled = !!disabled;
     const showClearButton = !disabled && clearable && !!value;
     const chipStyles = Css_1.Css[typeScale].tl.bgGray300.gray900.br16.pxPx(10).pyPx(2).$;
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    // Controls showing the focus border styles.
+    const [visualFocus, setVisualFocus] = (0, react_1.useState)(false);
     const [isClearFocused, setIsClearFocused] = (0, react_1.useState)(false);
     const { focusProps } = (0, react_aria_1.useFocus)({
         onFocus: (e) => {
@@ -35,10 +36,15 @@ function ChipSelectField(props) {
             }
             (0, utils_1.maybeCall)(onFocus);
         },
-        // Do not call onBlur if we just opened the menu
-        onBlur: () => !state.isOpen && (0, utils_1.maybeCall)(onBlur),
-        // Do not change focus state if select menu is opened
-        onFocusChange: (isFocused) => !state.isOpen && setIsFocused(isFocused),
+        onBlur: (e) => {
+            // Do not call onBlur if focus moved to within the Popover
+            if (popoverRef.current && popoverRef.current.contains(e.relatedTarget)) {
+                return;
+            }
+            (0, utils_1.maybeCall)(onBlur);
+        },
+        // Do not change visual focus state if select menu is opened
+        onFocusChange: (isFocused) => !state.isOpen && setVisualFocus(isFocused),
     });
     const { focusProps: clearFocusProps } = (0, react_aria_1.useFocus)({ onFocusChange: setIsClearFocused });
     const buttonRef = (0, react_1.useRef)(null);
@@ -72,12 +78,12 @@ function ChipSelectField(props) {
         isDisabled,
         items: listData.items,
         children: selectChildren,
+        autoFocus: true,
     };
     const state = (0, react_stately_1.useSelectState)({
         ...selectHookProps,
-        autoFocus: false,
         selectedKey: (0, Value_1.valueToKey)(value),
-        disallowEmptySelection: true,
+        disallowEmptySelection: false,
         onSelectionChange: (key) => {
             if (key === createNewOpt.id) {
                 setShowInput(true);
@@ -87,11 +93,21 @@ function ChipSelectField(props) {
             if (selectedItem) {
                 onSelect(key, selectedItem);
             }
+            // Per UX, when an option is selected then we want to call our `onBlur` callback and remove the focus styles. The field _is_ still in focus but that is only to retain tab position in the DOM.
+            // We cannot simply call `buttonRef.current.blur()` here because `state.isOpen === true` and we keep the visualFocus shown when the menu is open.
+            setVisualFocus(false);
+            (0, utils_1.maybeCall)(onBlur);
         },
         onOpenChange: (isOpen) => {
-            if (!isOpen && buttonRef.current) {
-                // When closing reset the focus to the button element.
-                buttonRef.current.focus();
+            var _a;
+            if (!isOpen) {
+                // When closing, reset the focus to the button element. This is to retain "tab position" in the document, allowing hte user to hit "Tab" and move to the next tabbable element.
+                // If the menu closed due to a user selecting an option, then the field will not visually appear focused.
+                (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                // If opened, set visual focus to true. It is possible to be in a state where the browser focus is on this element, but we are not "visually" focused (see `onSelectionChange`). If the user opens the menu again, we should trigger the visual focus.
+                setVisualFocus(true);
             }
         },
     });
@@ -128,23 +144,21 @@ function ChipSelectField(props) {
                 }, onBlur: removeCreateNewField }, tid.createNewField), void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: wrapperRef, css: {
                     ...chipStyles,
                     ...Css_1.Css.dif.relative.p0.mwPx(32).if(!value).bgGray200.$,
-                    ...(isFocused ? Css_1.Css.bshFocus.$ : {}),
+                    ...(visualFocus ? Css_1.Css.bshFocus.$ : {}),
                     ...(showInput ? Css_1.Css.dn.$ : {}),
                 } }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label, labelProps: labelProps, hidden: true }, tid.label), void 0), (0, jsx_runtime_1.jsx)("button", Object.assign({}, (0, react_aria_1.mergeProps)(focusProps, buttonProps), { ref: buttonRef, css: {
                             ...Css_1.Css.tl.br16.pxPx(10).pyPx(2).outline0.if(showClearButton).prPx(4).borderRadius("16px 0 0 16px").$,
                             ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray700.$ : {}),
                             "&:hover:not(:disabled)": Css_1.Css.bgGray400.if(!value).bgGray300.$,
-                        }, title: state.selectedItem ? state.selectedItem.textValue : placeholder }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({}, valueProps, { css: Css_1.Css.lineClamp1.breakAll.$ }, { children: state.selectedItem ? state.selectedItem.textValue : placeholder }), void 0) }), void 0), showClearButton && (
-                    // Apply a tabIndex=-1 to remove need for addresses this focus behavior separately from the rest of the button.
-                    // This will require the user to click on the button if they want to remove it.
-                    (0, jsx_runtime_1.jsx)("button", Object.assign({}, clearFocusProps, { css: {
+                        }, title: state.selectedItem ? state.selectedItem.textValue : placeholder }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({}, valueProps, { css: Css_1.Css.lineClamp1.breakAll.$ }, { children: state.selectedItem ? state.selectedItem.textValue : placeholder }), void 0) }), void 0), showClearButton && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, clearFocusProps, { css: {
                             ...Css_1.Css.prPx(4).borderRadius("0 16px 16px 0").outline0.$,
                             "&:hover": Css_1.Css.bgGray400.$,
                             ...(isClearFocused ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(3,105,161,1)`).$ : {}),
                         }, onClick: () => {
                             onSelect(undefined, undefined);
+                            (0, utils_1.maybeCall)(onBlur);
                             setIsClearFocused(false);
-                        }, "aria-label": "Remove" }, tid.clearButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }, void 0) }), void 0))] }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, menuProps, { listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps }), void 0) }), void 0))] }, void 0));
+                        }, "aria-label": "Remove" }, tid.clearButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }, void 0) }), void 0))] }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, menuProps, { listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps, positionOffset: 8 }), void 0) }), void 0))] }, void 0));
     const tooltipText = selectHookProps.isDisabled && typeof disabled !== "boolean" ? disabled : undefined;
     return tooltipText ? ((0, jsx_runtime_1.jsx)(components_1.Tooltip, Object.assign({ title: tooltipText, placement: "top" }, { children: field }), void 0)) : (field);
 }

package/dist/inputs/DateField.js

@@ -75,6 +75,13 @@ function DateField(props) {
             state.close();
             (0, utils_1.maybeCall)(onBlur);
         },
+        onKeyDown: (e) => {
+            var _a;
+            if (e.key === "Enter") {
+                // Blur the field when the user hits the enter key - as if they are "committing" the value and done with the field
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        },
     }, inputRef);
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: "dialog" }, state, buttonRef);
     const { buttonProps } = (0, react_aria_1.useButton)({

package/dist/inputs/NumberField.js

@@ -47,6 +47,13 @@ function NumberField(props) {
         onBlur: () => {
             valueRef.current = { wip: false };
         },
+        onKeyDown: (e) => {
+            var _a;
+            if (e.key === "Enter") {
+                // Blur the field when the user hits the enter key - as if they are "committing" the value and done with the field
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        },
         validationState: errorMsg !== undefined ? "invalid" : "valid",
         label: label,
         isDisabled: disabled,

package/dist/inputs/TextAreaField.js

@@ -43,9 +43,12 @@ function TextAreaField(props) {
         ...(preventNewLines
             ? {
                 onKeyDown: (e) => {
+                    var _a;
                     // Prevent user from typing the new line character
-                    if (e.keyCode === 13) {
+                    if (e.key === "Enter") {
                         e.preventDefault();
+                        // And then leave the field
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
                     }
                 },
                 onInput: (e) => {

package/dist/inputs/TextField.js

@@ -16,7 +16,16 @@ function TextField(props) {
         value,
     };
     const inputRef = (0, react_1.useRef)(null);
-    const { labelProps, inputProps } = (0, react_aria_1.useTextField)(textFieldProps, inputRef);
+    const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
+        ...textFieldProps,
+        onKeyDown: (e) => {
+            var _a;
+            if (e.key === "Enter") {
+                // Blur the field when the user hits the enter key - as if they are "committing" the value and done with the field
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        },
+    }, inputRef);
     // Construct our TextFieldApi to give access to some imperative methods
     if (api) {
         api.current = {

package/dist/inputs/internal/SelectFieldBase.js

@@ -24,6 +24,7 @@ function SelectFieldBase(props) {
     const { compact, disabled: isDisabled = false, errorMsg, helperText, label, hideLabel, required, inlineLabel, readOnly: isReadOnly = false, onSelect, fieldDecoration, options, onBlur, onFocus, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, sizeToContent = false, values, nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     function onSelectionChange(keys) {
+        var _a;
         // Close menu upon selection change only for Single selection mode
         if (!multiselect) {
             state.close();
@@ -70,6 +71,8 @@ function SelectFieldBase(props) {
                 selectedKeys: [firstKey],
                 selectedOptions: firstSelectedOption ? [firstSelectedOption] : [],
             });
+            // When a single select menu item changes, then blur the field
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         }
         selectionChanged && onSelect([...keys.values()].map(Value_1.keyToValue));
     }

package/package.json

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