@homebound/beam 2.395.0 → 2.397.0

package/dist/index.d.cts

@@ -8298,6 +8298,7 @@ interface UseToastProps {
 }
 declare function useToast(): UseToastProps;
 
+type TooltipXss = Xss<Padding | "borderRadius">;
 interface TooltipProps {
     /** The content that shows up when hovered */
     title: ReactNode;
@@ -8306,6 +8307,7 @@ interface TooltipProps {
     delay?: number;
     disabled?: boolean;
     bgColor?: Palette;
+    xss?: TooltipXss;
 }
 declare function Tooltip(props: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
 type Placement = "top" | "bottom" | "left" | "right" | "auto";

package/dist/index.d.ts

@@ -8298,6 +8298,7 @@ interface UseToastProps {
 }
 declare function useToast(): UseToastProps;
 
+type TooltipXss = Xss<Padding | "borderRadius">;
 interface TooltipProps {
     /** The content that shows up when hovered */
     title: ReactNode;
@@ -8306,6 +8307,7 @@ interface TooltipProps {
     delay?: number;
     disabled?: boolean;
     bgColor?: Palette;
+    xss?: TooltipXss;
 }
 declare function Tooltip(props: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
 type Placement = "top" | "bottom" | "left" | "right" | "auto";

package/dist/index.js

@@ -4169,7 +4169,7 @@ import { usePopper } from "react-popper";
 import { useTooltipTriggerState } from "react-stately";
 import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
 function Tooltip(props) {
-  const { placement, children, title, disabled, delay = 0, bgColor } = props;
+  const { placement, children, title, disabled, delay = 0, bgColor, xss } = props;
   const state = useTooltipTriggerState({ delay, isDisabled: disabled });
   const triggerRef = useRef2(null);
   const { triggerProps, tooltipProps: _tooltipProps } = useTooltipTrigger({ isDisabled: disabled }, state, triggerRef);
@@ -4196,12 +4196,13 @@ function Tooltip(props) {
         triggerRef,
         content: title,
         placement,
-        bgColor
+        bgColor,
+        xss
       }
     )
   ] });
 }
-function Popper({ triggerRef, content, placement = "auto", bgColor = "rgba(36, 36, 36, 1)" /* Gray900 */ }) {
+function Popper({ triggerRef, content, placement = "auto", xss, bgColor = "rgba(36, 36, 36, 1)" /* Gray900 */ }) {
   const popperRef = useRef2(null);
   const [arrowRef, setArrowRef] = useState2(null);
   const targetElement = triggerRef.current ? triggerRef.current.children[0] ?? triggerRef.current.parentElement : null;
@@ -4219,7 +4220,10 @@ function Popper({ triggerRef, content, placement = "auto", bgColor = "rgba(36, 3
         ref: popperRef,
         style: styles.popper,
         ...attributes.popper,
-        css: Css.maxw("320px").bgColor(bgColor).bshBasic.white.px1.py("4px").br4.xs.add("zIndex", 999999).$,
+        css: {
+          ...Css.maxw("320px").bgColor(bgColor).bshBasic.white.px1.py("4px").br4.xs.z(999999).$,
+          ...xss
+        },
         children: [
           /* @__PURE__ */ jsx2("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }),
           content
@@ -5373,7 +5377,7 @@ function IconButton(props) {
     }
   );
   return maybeTooltip({
-    title: resolveTooltip(disabled, tooltip),
+    title: resolveTooltip(disabled ?? label, tooltip),
     placement: "top",
     children: getButtonOrLink(buttonContent, onPress, buttonAttrs, openInNew, download)
   });