@homebound/beam 2.222.4 → 2.223.0

package/dist/components/ButtonGroup.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { IconProps } from "./Icon";
 export interface ButtonGroupProps {
     buttons: ButtonGroupButton[];
@@ -9,10 +10,12 @@ export declare type ButtonGroupButton = {
     icon?: IconProps["icon"];
     text?: string;
     onClick?: VoidFunction;
-    /** Disables the button. Note we don't support the `disabled: ReactNode`/tooltip for now. */
-    disabled?: boolean;
+    /** Disables the button. Pass a ReactNode to disable the button and show a tooltip */
+    disabled?: boolean | ReactNode;
     /** Indicates the active/selected button, as in a tab or toggle. */
     active?: boolean;
+    /** Adds tooltip to the button */
+    tooltip?: ReactNode;
 };
 export declare function ButtonGroup(props: ButtonGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare type ButtonGroupSize = "sm" | "md";

package/dist/components/ButtonGroup.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const Icon_1 = require("./Icon");
+const Tooltip_1 = require("./Tooltip");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
@@ -18,22 +19,26 @@ function ButtonGroup(props) {
 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 { icon, text, active, onClick: onPress, disabled, size, tooltip, ...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(),
-            ...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, 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)),
+    });
 }
 const pressedStyles = Css_1.Css.bgGray200.$;
 const activeStyles = Css_1.Css.bgGray300.$;

package/package.json

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