@homebound/beam 2.223.0 → 2.223.2

package/dist/components/ButtonGroup.js

@@ -12,7 +12,7 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonGroup(props) {
     const { buttons, disabled = false, size = "sm" } = props;
     const tid = (0, utils_1.useTestIds)(props, "buttonGroup");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tid, { css: sizeStyles[size] }, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tid, { css: Css_1.Css.df.add(sizeStyles[size]).$ }, { 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));
 }
@@ -26,19 +26,18 @@ function GroupButton(props) {
     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, Tooltip_1.maybeTooltip)({
-        title: (0, Tooltip_1.resolveTooltip)(disabled, tooltip),
-        placement: "top",
-        children: ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, focusProps, hoverProps, { css: {
-                ...Css_1.Css.buttonBase.$,
-                ...getButtonStyles(),
-                ...sizeStyles[size],
-                ...(isFocusVisible ? defaultFocusRingStyles : {}),
-                ...(active ? activeStyles : {}),
-                ...(isPressed ? pressedStyles : isHovered ? hoverStyles : {}),
-                ...(icon ? iconStyles[size] : {}),
-            } }, 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)),
-    });
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: getButtonStyles() }, { children: (0, Tooltip_1.maybeTooltip)({
+            title: (0, Tooltip_1.resolveTooltip)(disabled, tooltip),
+            placement: "top",
+            children: ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, focusProps, hoverProps, { css: {
+                    ...Css_1.Css.buttonBase.px2.br0.h100.$,
+                    "&:disabled": Css_1.Css.gray400.cursorNotAllowed.bGray300.$,
+                    ...(isFocusVisible ? defaultFocusRingStyles : {}),
+                    ...(active ? activeStyles : {}),
+                    ...(isPressed ? pressedStyles : isHovered ? hoverStyles : {}),
+                    ...(icon ? iconStyles[size] : {}),
+                } }, 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)),
+        }) }), void 0));
 }
 const pressedStyles = Css_1.Css.bgGray200.$;
 const activeStyles = Css_1.Css.bgGray300.$;
@@ -46,8 +45,7 @@ const hoverStyles = Css_1.Css.bgGray100.$;
 const defaultFocusRingStyles = Css_1.Css.relative.z2.bshFocus.$;
 function getButtonStyles() {
     return {
-        ...Css_1.Css.z1.px2.bgWhite.bGray300.bw1.ba.gray900.br0.$,
-        "&:disabled": Css_1.Css.gray400.cursorNotAllowed.bGray300.$,
+        ...Css_1.Css.z1.bgWhite.bGray300.bw1.ba.gray900.br0.overflowHidden.$,
         // Our first button should have a rounded left border
         "&:first-of-type": Css_1.Css.add("borderRadius", "4px 0 0 4px").$,
         // Our last button should have a rounded right border

package/dist/forms/BoundCheckboxField.js

@@ -8,7 +8,7 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `Checkbox` and binds it to a form field. */
 function BoundCheckboxField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, disabled, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
@@ -22,7 +22,7 @@ function BoundCheckboxField(props) {
                 }, onBlur: () => {
                     field.blur();
                     (0, utils_1.maybeCall)(onBlur);
-                } }, testId, others), void 0));
+                }, disabled: disabled || field.readOnly }, testId, others), void 0));
         } }, void 0));
 }
 exports.BoundCheckboxField = BoundCheckboxField;

package/dist/forms/BoundDateRangeField.js

@@ -8,7 +8,7 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextField` and binds it to a form field. */
 function BoundDateRangeField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, readOnly, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
                 onChange(value);
@@ -22,6 +22,6 @@ function BoundDateRangeField(props) {
             }, onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
                 field.maybeAutoSave();
-            } }, testId, others), void 0)) }, void 0));
+            }, readOnly: readOnly || field.readOnly }, testId, others), void 0)) }, void 0));
 }
 exports.BoundDateRangeField = BoundDateRangeField;

package/dist/forms/BoundSwitchField.js

@@ -8,14 +8,14 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `Switch` and binds it to a form field. */
 function BoundSwitchField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), labelStyle = "form", ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), labelStyle = "form", disabled, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
             return ((0, jsx_runtime_1.jsx)(inputs_1.Switch, Object.assign({ label: label, labelStyle: labelStyle, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
                     onChange(selected);
                     field.maybeAutoSave();
-                } }, testId, others), void 0));
+                }, disabled: disabled || field.readOnly }, testId, others), void 0));
         } }, void 0));
 }
 exports.BoundSwitchField = BoundSwitchField;

package/package.json

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