@homebound/beam 2.90.1 → 2.91.0

package/dist/components/ButtonGroup.js

@@ -6,23 +6,25 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const Icon_1 = require("./Icon");
 const Css_1 = require("../Css");
+const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonGroup(props) {
     const { buttons, disabled = false, size = "sm" } = props;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mPx(4).$ }, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => ((0, jsx_runtime_1.jsx)(GroupButton, Object.assign({}, buttonProps, {
-            // Disable the button if the ButtonGroup is disabled or if the current
-            // button is disabled.
-            disabled: disabled || buttonDisabled,
-            size,
-        }), i))) }), void 0));
+    const tid = (0, utils_1.useTestIds)(props, "buttonGroup");
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mPx(4).$ }, tid, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
+        // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
+        (0, jsx_runtime_1.jsx)(GroupButton, Object.assign({}, buttonProps, { disabled: disabled || buttonDisabled, size: size }, tid), i))) }), void 0));
 }
 exports.ButtonGroup = ButtonGroup;
 function GroupButton(props) {
+    var _a;
     const { icon, text, active, onClick: onPress, disabled, size, ...otherProps } = props;
     const ariaProps = { onPress, isDisabled: disabled, ...otherProps };
     const ref = (0, react_1.useRef)(null);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)(ariaProps, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
+    const tid = (0, utils_1.useTestIds)(props);
     return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, focusProps, hoverProps, { css: {
             ...Css_1.Css.buttonBase.$,
             ...getButtonStyles(),
@@ -31,7 +33,7 @@ function GroupButton(props) {
             ...(active ? activeStyles : {}),
             ...(isPressed ? pressedStyles : isHovered ? hoverStyles : {}),
             ...(icon ? iconStyles[size] : {}),
-        } }, { children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0), text] }), void 0));
+        } }, tid[(0, defaultTestId_1.defaultTestId)((_a = text !== null && text !== void 0 ? text : icon) !== null && _a !== void 0 ? _a : "button")], { children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0), text] }), void 0));
 }
 const pressedStyles = Css_1.Css.bgGray200.$;
 const activeStyles = Css_1.Css.bgGray300.$;

package/dist/components/Chip.js

@@ -11,6 +11,6 @@ function Chip(props) {
     return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
             ...Css_1.Css.dif.aic.br16.sm.pl1.px1.pyPx(2).gray900.bgGray200.$,
             ...xss,
-        } }, tid, { title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.$ }, { children: text }), void 0) }), void 0));
+        } }, tid, { title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
 }
 exports.Chip = Chip;

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -79,20 +79,18 @@ function SuperDrawer() {
                         // Preventing clicks from triggering parent onClick
                         onClick: (e) => e.stopPropagation() }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Em.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
                                     // Forcing height to 32px to match title height
-                                    (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap3.aic.hPx(32).$ }, { children: [titleRightContent || null, (0, jsx_runtime_1.jsx)(components_1.ButtonGroup, { buttons: [
+                                    (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap3.aic.hPx(32).$ }, { children: [titleRightContent || null, (0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
                                                     {
                                                         icon: "chevronLeft",
                                                         onClick: () => onPrevClick && onPrevClick(),
                                                         disabled: !onPrevClick || isDetail,
-                                                        ...testId.prev,
                                                     },
                                                     {
                                                         icon: "chevronRight",
                                                         onClick: () => onNextClick && onNextClick(),
                                                         disabled: !onNextClick || isDetail,
-                                                        ...testId.next,
                                                     },
-                                                ] }, void 0), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0))] }), void 0), content, modalState.current && (
+                                                ] }, testId.headerActions), void 0), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0))] }), void 0), content, modalState.current && (
                             // Forcing some design constraints on the modal component
                             (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: 
                                 // topPX(81) is the offset from the header

package/dist/components/Tag.js

@@ -8,7 +8,7 @@ const utils_1 = require("../utils");
 function Tag({ text, type, xss, ...otherProps }) {
     const typeStyles = getStyles(type);
     const tid = (0, utils_1.useTestIds)(otherProps);
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, tid, { css: { ...Css_1.Css.dib.tinyEm.ttu.px1.pyPx(4).gray900.br4.$, ...typeStyles, ...xss }, title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.$ }, { children: text }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, tid, { css: { ...Css_1.Css.dib.tinyEm.ttu.px1.pyPx(4).gray900.br4.$, ...typeStyles, ...xss }, title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
 }
 exports.Tag = Tag;
 function getStyles(type) {

package/dist/components/ToggleChip.js

@@ -18,6 +18,6 @@ function ToggleChip(props) {
             ":hover:not(:disabled)": Css_1.Css.bgGray300.$,
             ":disabled": Css_1.Css.cursorNotAllowed.$,
             ...xss,
-        }, disabled: disabled, onClick: onClick }, tid, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.prPx(6).tl.lineClamp1.if(disabled).prPx(4).$, title: text }, { children: text }), void 0), !disabled && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.br16.bgGray400.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700 }, void 0) }), void 0))] }), void 0));
+        }, disabled: disabled, onClick: onClick }, tid, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.prPx(6).tl.lineClamp1.breakAll.if(disabled).prPx(4).$, title: text }, { children: text }), void 0), !disabled && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.br16.bgGray400.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700 }, void 0) }), void 0))] }), void 0));
 }
 exports.ToggleChip = ToggleChip;

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);
@@ -65,19 +71,19 @@ function ChipSelectField(props) {
         const isPersistent = isPersistentItem(o);
         const value = isPersistent ? o.id : getOptionValue(o);
         const label = isPersistent ? o.name : getOptionLabel(o);
-        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: label }, { children: isPersistent ? (label) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: { ...Css_1.Css.lineClamp1.$, ...chipStyles }, title: label }, { children: label }), void 0)) }), value));
+        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: label }, { children: isPersistent ? (label) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: { ...Css_1.Css.lineClamp1.breakAll.$, ...chipStyles }, title: label }, { children: label }), void 0)) }), value));
     });
     const selectHookProps = {
         label,
         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.$ }, { 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.1",
+  "version": "2.91.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",