@homebound/beam 3.10.0 → 3.11.0

package/dist/index.d.cts

@@ -5758,9 +5758,9 @@ interface AvatarProps {
     name?: string;
     size?: AvatarSize;
     showName?: boolean;
-    disableTooltip?: boolean;
+    preventTooltip?: boolean;
 }
-declare function Avatar({ src, name, size, showName, disableTooltip, ...others }: AvatarProps): JSX.Element;
+declare function Avatar({ src, name, size, showName, preventTooltip, ...others }: AvatarProps): JSX.Element;
 type AvatarSize = "sm" | "md" | "lg" | "xl";
 
 /** Base Interfaced */
@@ -6033,6 +6033,11 @@ type IconButtonProps = {
     download?: boolean;
     /** Provides label for screen readers - Will become a required soon */
     label?: string;
+    /**
+     * By default the `label` is also surfaced as a hover tooltip. Set this to keep the `aria-label`
+     * for screen readers without showing the tooltip. An explicit `tooltip` or disabled reason still shows.
+     */
+    preventTooltip?: boolean;
 } & BeamButtonProps & BeamFocusableProps;
 declare function IconButton(props: IconButtonProps): JSX.Element;
 declare const iconButtonStylesHover: Pick<Properties, never> & {
@@ -6096,7 +6101,7 @@ declare function NavGroup(props: NavGroupProps): JSX.Element;
 
 type TextButtonTriggerProps = Pick<ButtonProps, "label" | "variant" | "size" | "icon">;
 type IconButtonTriggerProps = Pick<IconButtonProps, "icon" | "color" | "compact" | "inc">;
-type AvatarButtonTriggerProps = Pick<AvatarButtonProps, "src" | "name" | "size">;
+type AvatarButtonTriggerProps = Pick<AvatarButtonProps, "src" | "name" | "size" | "preventTooltip">;
 type NavLinkButtonTriggerProps = {
     navLabel: string;
 } & Pick<NavLinkProps, "active" | "variant" | "icon">;
@@ -8796,10 +8801,10 @@ declare const zIndices: {
     readonly tableExpandableTitle: 20;
     readonly tableStickyColumn: 30;
     readonly tableStickyHeader: 40;
-    readonly scrollShadow: 30;
-    readonly superDrawerScrim: 30;
-    readonly modalUnderlay: 40;
-    readonly pageStickyHeader: 50;
+    readonly scrollShadow: 50;
+    readonly superDrawerScrim: 50;
+    readonly modalUnderlay: 60;
+    readonly pageStickyHeader: 70;
     readonly dragHandle: 80;
     readonly sideNav: 100;
     readonly snackbar: 120;

package/dist/index.d.ts

@@ -5758,9 +5758,9 @@ interface AvatarProps {
     name?: string;
     size?: AvatarSize;
     showName?: boolean;
-    disableTooltip?: boolean;
+    preventTooltip?: boolean;
 }
-declare function Avatar({ src, name, size, showName, disableTooltip, ...others }: AvatarProps): JSX.Element;
+declare function Avatar({ src, name, size, showName, preventTooltip, ...others }: AvatarProps): JSX.Element;
 type AvatarSize = "sm" | "md" | "lg" | "xl";
 
 /** Base Interfaced */
@@ -6033,6 +6033,11 @@ type IconButtonProps = {
     download?: boolean;
     /** Provides label for screen readers - Will become a required soon */
     label?: string;
+    /**
+     * By default the `label` is also surfaced as a hover tooltip. Set this to keep the `aria-label`
+     * for screen readers without showing the tooltip. An explicit `tooltip` or disabled reason still shows.
+     */
+    preventTooltip?: boolean;
 } & BeamButtonProps & BeamFocusableProps;
 declare function IconButton(props: IconButtonProps): JSX.Element;
 declare const iconButtonStylesHover: Pick<Properties, never> & {
@@ -6096,7 +6101,7 @@ declare function NavGroup(props: NavGroupProps): JSX.Element;
 
 type TextButtonTriggerProps = Pick<ButtonProps, "label" | "variant" | "size" | "icon">;
 type IconButtonTriggerProps = Pick<IconButtonProps, "icon" | "color" | "compact" | "inc">;
-type AvatarButtonTriggerProps = Pick<AvatarButtonProps, "src" | "name" | "size">;
+type AvatarButtonTriggerProps = Pick<AvatarButtonProps, "src" | "name" | "size" | "preventTooltip">;
 type NavLinkButtonTriggerProps = {
     navLabel: string;
 } & Pick<NavLinkProps, "active" | "variant" | "icon">;
@@ -8796,10 +8801,10 @@ declare const zIndices: {
     readonly tableExpandableTitle: 20;
     readonly tableStickyColumn: 30;
     readonly tableStickyHeader: 40;
-    readonly scrollShadow: 30;
-    readonly superDrawerScrim: 30;
-    readonly modalUnderlay: 40;
-    readonly pageStickyHeader: 50;
+    readonly scrollShadow: 50;
+    readonly superDrawerScrim: 50;
+    readonly modalUnderlay: 60;
+    readonly pageStickyHeader: 70;
     readonly dragHandle: 80;
     readonly sideNav: 100;
     readonly snackbar: 120;

package/dist/index.js

@@ -5323,7 +5323,8 @@ function IconButton(props) {
     circle = false,
     download = false,
     forceFocusStyles = false,
-    label
+    label,
+    preventTooltip = false
   } = props;
   const isDisabled = !!disabled;
   const ariaProps = {
@@ -5374,7 +5375,7 @@ function IconButton(props) {
   };
   const buttonContent = /* @__PURE__ */ jsx11(Icon, { icon, color: color || (isDisabled ? "--b-text-disabled" /* TextDisabled */ : circle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : circle ? 2.5 : inc });
   return maybeTooltip({
-    title: resolveTooltip(disabled ?? label, tooltip),
+    title: resolveTooltip(disabled ?? (preventTooltip ? void 0 : label), tooltip),
     placement: "top",
     children: getButtonOrLink(buttonContent, onPress, buttonAttrs, openInNew, download)
   });
@@ -5718,11 +5719,11 @@ var zIndices = {
   tableExpandableTitle: 20,
   tableStickyColumn: 30,
   tableStickyHeader: 40,
-  // Page chrome.
-  scrollShadow: 30,
-  superDrawerScrim: 30,
-  modalUnderlay: 40,
-  pageStickyHeader: 50,
+  // Page chrome - ensure these items sit above the table
+  scrollShadow: 50,
+  superDrawerScrim: 50,
+  modalUnderlay: 60,
+  pageStickyHeader: 70,
   dragHandle: 80,
   // Side-nav layer. Mobile rail overlays page content when expanded; sits below
   // snackbar so toasts still land on top.
@@ -8840,7 +8841,7 @@ function Avatar({
   name,
   size = "md",
   showName = false,
-  disableTooltip = false,
+  preventTooltip = false,
   ...others
 }) {
   const tid = useTestIds(others, "avatar");
@@ -8888,7 +8889,7 @@ function Avatar({
       ...__typography4[sizeToTypeScale[size]] ?? {}
     }), children: name })
   ] }) : maybeTooltip({
-    title: disableTooltip ? void 0 : name,
+    title: preventTooltip ? void 0 : name,
     children: img,
     placement: "top"
   });
@@ -8937,6 +8938,7 @@ function AvatarButton(props) {
     openInNew,
     forceFocusStyles = false,
     __storyState,
+    preventTooltip = false,
     ...avatarProps
   } = props;
   const isDisabled = !!disabled;
@@ -8983,12 +8985,11 @@ function AvatarButton(props) {
     ...mergeProps7(typeof onPress === "string" ? navLink : void 0, void 0, styles)
   };
   const content = /* @__PURE__ */ jsxs21(Fragment11, { children: [
-    /* @__PURE__ */ jsx34(Avatar, { ...avatarProps, ...tid, disableTooltip: true }),
+    /* @__PURE__ */ jsx34(Avatar, { ...avatarProps, ...tid, preventTooltip: true }),
     isPressed && /* @__PURE__ */ jsx34("span", { ...trussProps23(pressedOverlayCss) })
   ] });
   return maybeTooltip({
-    // Default the tooltip to the avatar's name, if defined.
-    title: resolveTooltip(disabled, tooltip ?? avatarProps.name),
+    title: resolveTooltip(disabled, tooltip ?? (preventTooltip ? void 0 : avatarProps.name)),
     placement: "top",
     // Disable the auto-tooltip in Avatar to prevent nested tooltips which can cause issues with interactions
     children: getButtonOrLink(content, onPress, buttonAttrs, openInNew)