@amboss/design-system 4.4.6 → 4.5.1

package/build/cjs/components/RangePopover/RangePopover.d.ts

@@ -10,6 +10,11 @@ export type RangePopoverProps = {
     isVisible: boolean;
     /** Called when the popover is dismissed by an outside click or the Escape key. */
     onClose: () => void;
+    /**
+     * Controls whether the popover closes on an outside click. When false, only
+     * the Escape key dismisses it.
+     */
+    dismissOnOutsideClick?: boolean;
     /** Preferred placement relative to the range. */
     placement?: RangePopoverPlacement;
     /** Portal target; falls back to the document body when omitted. */
@@ -40,17 +45,18 @@ export type RangePopoverProps = {
  * A click-dismissed popover anchored on a DOM {@link Range} rather than a
  * trigger element.
  *
- * It pairs the design-system tooltip positioner — which places content purely
- * from `triggerRef.current.getBoundingClientRect()`, a method a `Range` also
- * provides — with the focus-trap dismissal model used by the design-system
- * Popover. This lets it anchor on a painted text selection that has no DOM node
- * of its own, the same way `UserHighlightTooltip` does, while opening and
- * closing on explicit interaction instead of hover.
+ * It pairs the design-system tooltip positioner — which accepts a `Range` in
+ * `triggerRef` and anchors on it as a floating-ui virtual element — with the
+ * focus-trap dismissal model used by the design-system Popover. This lets it
+ * anchor on a painted text selection that has no DOM node of its own, the same
+ * way `UserHighlightTooltip` does, while opening and closing on explicit
+ * interaction instead of hover.
  *
  * @param content - The popover body.
  * @param range - The range to anchor on.
  * @param isVisible - Whether the popover is shown.
  * @param onClose - Called when dismissed by an outside click or the Escape key.
+ * @param dismissOnOutsideClick - Whether an outside click dismisses the popover.
  * @param placement - Preferred placement relative to the range.
  * @param portalContainer - Portal target; falls back to the document body.
  * @param contentPadding - Inner padding of the popover surface.
@@ -60,5 +66,5 @@ export type RangePopoverProps = {
  * @param aria-label - Accessible name for the popover surface.
  * @param disableInitialFocus - When true, does not move focus into the popover.
  */
-export declare function RangePopover({ content, range, isVisible, onClose, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
+export declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
 export {};

package/build/cjs/components/RangePopover/RangePopover.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RangePopover",{enumerable:!0,get:function(){return RangePopover}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TooltipContent=require("../Tooltip/TooltipContent"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),StyledContent=(0,_styled.default)("div",{target:"e115t0yz0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));function RangePopover({content,range,isVisible,onClose,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=(0,_react.useId)(),rangeRef=(0,_react.useRef)(null);rangeRef.current=range;let contentRef=(0,_react.useRef)(null),trappedContent=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},_react.default.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return _react.default.createElement(_TooltipContent.TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RangePopover",{enumerable:!0,get:function(){return RangePopover}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TooltipContent=require("../Tooltip/TooltipContent"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),StyledContent=(0,_styled.default)("div",{target:"e1cdfvza0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));function RangePopover({content,range,isVisible,onClose,dismissOnOutsideClick=!0,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=(0,_react.useId)(),rangeRef=(0,_react.useRef)(null);rangeRef.current=range;let contentRef=(0,_react.useRef)(null),trappedContent=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:dismissOnOutsideClick,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},_react.default.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return _react.default.createElement(_TooltipContent.TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}

package/build/cjs/components/Toggletip/BasePopover.d.ts

@@ -1,8 +1,8 @@
 import type { ReactElement } from "react";
 import React from "react";
+import type { PopupRole } from "../Sheet/Sheet";
 import type { TooltipContentProps } from "../Tooltip/TooltipContent";
 import type { TooltipConditionalProps } from "../Tooltip/types";
-import type { PopupRole } from "../Sheet/Sheet";
 type BaseProps = Pick<TooltipContentProps, "placement" | "portalContainer" | "maxWidth" | "contentPadding" | "hideArrow" | "subTheme" | "defaultVerticalPlacement" | "onOverflowViewport"> & {
     name?: string;
     /**  Popover content */

package/build/cjs/components/Toggletip/BasePopover.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BasePopover",{enumerable:!0,get:function(){return BasePopover}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../web-tokens/_breakpoints.json")),_useWindow=require("../../shared/useWindow"),_TooltipContent=require("../Tooltip/TooltipContent"),_Sheet=require("../Sheet/Sheet"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),_ariaAttributes=require("../../shared/ariaAttributes"),_PopoverContext=require("../Patterns/Popover/PopoverContext"),StyledContainer=(0,_styled.default)("div",{target:"e1f33nt10",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=_react.default.forwardRef(({children},ref)=>_react.default.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}function getMobileBreakpoint(renderAsSheetOnMobile,win){if(!win)return!1;let isMobileInPortrait=win.innerWidth<=_breakpointsjson.default.m.value,isSmallHeight=win.innerHeight<=450,isLandscape=win.matchMedia?.("(orientation: landscape)").matches;return renderAsSheetOnMobile&&(isMobileInPortrait||isLandscape&&isSmallHeight)}function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let win=(0,_useWindow.useWindow)(),tooltipId=(0,_react.useMemo)(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=(0,_react.useState)(isPopoverVisible),[isMobileBreakPoint,setIsMobileBreakpoint]=(0,_react.useState)(()=>forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win)),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=(0,_react.useRef)(!1),ariaAttributes=(0,_ariaAttributes.getAriaAttributes)(restContentProps),popoverContextValue=(0,_react.useMemo)(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=_react.default.createElement(_PopoverContext.PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=(0,_react.useCallback)((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=(0,_react.useCallback)(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=(0,_react.useCallback)(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=(0,_react.useCallback)(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);(0,_react.useEffect)(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),(0,_react.useLayoutEffect)(()=>{setIsMobileBreakpoint(forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win))},[win,isVisible,renderAsSheetOnMobile,forceSheetLayout]),(0,_react.useEffect)(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(isMobileBreakPoint){let sheetElm=_react.default.createElement(_Sheet.Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return _react.default.createElement(_react.default.Fragment,null,triggerElm,sheetElm)}let contentElm=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},_react.default.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return _react.default.createElement(_react.default.Fragment,null,triggerElm,tooltipElm)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BasePopover",{enumerable:!0,get:function(){return BasePopover}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_ariaAttributes=require("../../shared/ariaAttributes"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),_useWindow=require("../../shared/useWindow"),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../web-tokens/_breakpoints.json")),_PopoverContext=require("../Patterns/Popover/PopoverContext"),_Sheet=require("../Sheet/Sheet"),_TooltipContent=require("../Tooltip/TooltipContent"),StyledContainer=(0,_styled.default)("div",{target:"e2uwtlo0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=_react.default.forwardRef(({children},ref)=>_react.default.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}function getMobileBreakpoint(renderAsSheetOnMobile,win){if(!win)return!1;let isMobileInPortrait=win.innerWidth<=_breakpointsjson.default.m.value,isSmallHeight=win.innerHeight<=450,isLandscape=win.matchMedia?.("(orientation: landscape)").matches;return renderAsSheetOnMobile&&(isMobileInPortrait||isLandscape&&isSmallHeight)}function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let win=(0,_useWindow.useWindow)(),tooltipId=(0,_react.useMemo)(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=(0,_react.useState)(isPopoverVisible),[isMobileBreakPoint,setIsMobileBreakpoint]=(0,_react.useState)(()=>forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win)),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=(0,_react.useRef)(!1),ariaAttributes=(0,_ariaAttributes.getAriaAttributes)(restContentProps),popoverContextValue=(0,_react.useMemo)(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=_react.default.createElement(_PopoverContext.PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=(0,_react.useCallback)((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=(0,_react.useCallback)(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=(0,_react.useCallback)(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=(0,_react.useCallback)(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);(0,_react.useEffect)(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),(0,_react.useLayoutEffect)(()=>{setIsMobileBreakpoint(forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win))},[win,isVisible,renderAsSheetOnMobile,forceSheetLayout]),(0,_react.useEffect)(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(isMobileBreakPoint){let sheetElm=_react.default.createElement(_Sheet.Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return _react.default.createElement(_react.default.Fragment,null,triggerElm,sheetElm)}let contentElm=_react.default.createElement(_FocusTrapWrapper.FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},_react.default.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return _react.default.createElement(_react.default.Fragment,null,triggerElm,tooltipElm)}

package/build/cjs/components/Tooltip/BaseTooltip.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import type { ReactElement, FocusEvent as ReactFocusEvent, MouseEvent as ReactMouseEvent } from "react";
+import React from "react";
 import type { TooltipContentProps } from "./TooltipContent";
 type BaseProps = Pick<TooltipContentProps, "placement" | "portalContainer" | "contentPadding" | "maxWidth" | "subTheme" | "onOverflowViewport" | "privateProps"> & {
     /**  Tooltip content */

package/build/cjs/components/Tooltip/BaseTooltip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseTooltip",{enumerable:!0,get:function(){return BaseTooltip}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_interactions=require("@react-aria/interactions"),_TooltipContent=require("./TooltipContent");function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=(0,_react.useMemo)(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=(0,_interactions.useFocusVisible)(),[isVisible,setVisible]=(0,_react.useState)(!1),triggeredByEvent=(0,_react.useRef)(null),isTooltipHovered=(0,_react.useRef)(!1),isTriggerHovered=(0,_react.useRef)(!1),hideTooltipTimeoutId=(0,_react.useRef)(null),showTooltipTimeoutId=(0,_react.useRef)(null),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=(0,_react.useCallback)(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=(0,_react.useCallback)(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=(0,_react.useCallback)(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=(0,_react.useCallback)(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=(0,_react.useCallback)(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=(0,_react.useCallback)(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=(0,_react.useCallback)(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);(0,_react.useEffect)(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),(0,_react.useEffect)(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,"aria-hidden":!0,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,"hover"===triggeredByEvent.current&&toggleVisibility(!1)},privateProps:privateProps});return _react.default.createElement(_react.default.Fragment,null,triggerElm,tooltipElm)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseTooltip",{enumerable:!0,get:function(){return BaseTooltip}});const _interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_interactions=require("@react-aria/interactions"),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_TooltipContent=require("./TooltipContent");function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=(0,_react.useMemo)(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=(0,_interactions.useFocusVisible)(),[isVisible,setVisible]=(0,_react.useState)(!1),triggeredByEvent=(0,_react.useRef)(null),isTooltipHovered=(0,_react.useRef)(!1),isTriggerHovered=(0,_react.useRef)(!1),hideTooltipTimeoutId=(0,_react.useRef)(null),showTooltipTimeoutId=(0,_react.useRef)(null),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=(0,_react.useCallback)(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=(0,_react.useCallback)(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=(0,_react.useCallback)(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=(0,_react.useCallback)(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=(0,_react.useCallback)(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=(0,_react.useCallback)(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=(0,_react.useCallback)(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);(0,_react.useEffect)(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),(0,_react.useEffect)(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,"aria-hidden":!0,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,"hover"===triggeredByEvent.current&&toggleVisibility(!1)},privateProps:privateProps});return _react.default.createElement(_react.default.Fragment,null,triggerElm,tooltipElm)}

package/build/cjs/components/Tooltip/FloatingPositionedContext.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether the nearest ancestor `TooltipContent` has been measured and
+ * positioned by `useFloatingPosition`. Lets content rendered inside it (e.g.
+ * `BasePopover`'s focus trap) wait for that before activating, since a focus
+ * trap scans for focusable elements only once, on activation, and elements
+ * under a `visibility: hidden` ancestor never count as focusable.
+ */
+export declare const FloatingPositionedContext: React.Context<boolean>;

package/build/cjs/components/Tooltip/FloatingPositionedContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FloatingPositionedContext",{enumerable:!0,get:function(){return FloatingPositionedContext}});const FloatingPositionedContext=(0,require("react").createContext)(!0);

package/build/cjs/components/Tooltip/TooltipContent.d.ts

@@ -1,8 +1,10 @@
-import type { AriaAttributes, MutableRefObject, ReactElement } from "react";
-import React from "react";
 import type { Property } from "csstype";
+import React from "react";
+import type { AriaAttributes, MutableRefObject, ReactElement } from "react";
 import type { SubThemeTypes } from "../../web-tokens/_subThemeType";
 import { type PortalProps } from "../Portal/Portal";
+export type TooltipPlacement = "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type TooltipVerticalPlacement = "top" | "bottom";
 export type TooltipPrivateProps = {
     /**
      * @internal
@@ -29,7 +31,7 @@ export type TooltipPrivateProps = {
 export type TooltipContentProps = {
     content: ReactElement;
     triggerRef: MutableRefObject<any>;
-    placement?: "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement?: TooltipPlacement;
     dataE2eTestId?: string;
     dataDSId: string;
     isVisible?: boolean;
@@ -39,7 +41,7 @@ export type TooltipContentProps = {
     contentPadding?: "s" | "m";
     subTheme?: SubThemeTypes;
     maxWidth?: Property.MaxWidth | number;
-    defaultVerticalPlacement?: TooltipStyle["verticalPlacement"];
+    defaultVerticalPlacement?: TooltipVerticalPlacement;
     hideArrow?: boolean;
     /** Sets css visibility hidden when trigger is scrolled out of view */
     isHiddenOnInvisibleTrigger?: boolean;
@@ -49,12 +51,5 @@ export type TooltipContentProps = {
     onOverflowViewport?: (triggerRect: DOMRect, tooltipRect: DOMRect, viewportHeight: number) => void;
     privateProps?: TooltipPrivateProps;
 } & Pick<PortalProps, "portalContainer"> & AriaAttributes;
-export type TooltipStyle = {
-    top: number;
-    left: number;
-    horizontalPlacement: "left" | "right" | "center";
-    verticalPlacement: "top" | "bottom";
-    isSidePlacement?: boolean;
-};
 /** This component is used to display the overlay for both Toggletip and Tooltip components */
 export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, subTheme, defaultVerticalPlacement, hideArrow, isHiddenOnInvisibleTrigger, onTooltipPointerEnter, onTooltipPointerLeave, onOverflowViewport, privateProps, ...ariaAttributes }: TooltipContentProps): React.ReactElement;

package/build/cjs/components/Tooltip/TooltipContent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"TooltipContent",{enumerable:!0,get:function(){return TooltipContent}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=require("@emotion/react"),_useDocument=require("../../shared/useDocument"),_useWindow=require("../../shared/useWindow"),_SubThemeProvider=require("../SubThemeProvider/SubThemeProvider"),_Portal=require("../Portal/Portal"),_utils=require("./utils"),StyledContainer=(0,_styled.default)("div",{target:"e1uqkw9f0",label:"StyledContainer"})(({theme,horizontalPlacement,verticalPlacement,maxWidth,contentPadding,subTheme,isHidden,isSidePlacement})=>{let animationDistance="top"===verticalPlacement?`${_utils.ANIMATION_DISTANCE}px`:`-${_utils.ANIMATION_DISTANCE}px`,animation=(0,_react1.keyframes)({to:{opacity:theme.variables.opacity.visible,...!isSidePlacement&&{transform:"center"===horizontalPlacement?`translate(-50%, ${animationDistance})`:`translateY(${animationDistance})`}}}),contentPaddingMap={s:theme.variables.size.spacing.xxs,m:theme.variables.size.spacing.s},invertedSubThemeStyles={padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,...contentPadding&&{padding:contentPaddingMap[contentPadding]}};return{position:"absolute",zIndex:(0,_Portal.usePortalChildZIndex)(theme.variables.zIndex.tooltip),opacity:theme.variables.opacity.hidden,animation:`200ms ease-out forwards ${animation}`,maxWidth,width:"max-content",boxSizing:"border-box",backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,borderRadius:subTheme?theme.variables.size.borderRadius.xs:theme.variables.size.borderRadius.s,...isHidden&&{visibility:"hidden"},...!!subTheme&&invertedSubThemeStyles,..."center"===horizontalPlacement&&{transform:"translate(-50%)"},...!subTheme&&{":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}}),StyledArrow=(0,_styled.default)("div",{target:"e1uqkw9f1",label:"StyledArrow"})(({theme,subTheme,verticalPlacement,horizontalPlacement,size=_utils.ARROW_SIZE})=>{let offset=(0,_utils.getArrowOffset)(size),adjustmentForShadow=+!subTheme,arrowContainerHeight=size+_utils.DISTANCE_FROM_TRIGGER,arrowSideLength=Math.sqrt(size**2+(size+adjustmentForShadow)**2);return{position:"absolute",width:40,height:arrowContainerHeight,zIndex:1,overflow:"hidden",..."top"===verticalPlacement&&{top:`calc(100% - ${adjustmentForShadow}px)`},..."bottom"===verticalPlacement&&{top:`-${arrowContainerHeight-adjustmentForShadow}px`},..."center"===horizontalPlacement&&{left:"50%",transform:"translate(-50%)"},..."right"===horizontalPlacement&&{left:`${offset-(20-size)}px`},..."left"===horizontalPlacement&&{right:`${offset-(20-size)}px`},"&::after":{content:'" "',position:"absolute",top:"top"===verticalPlacement?0:"100%",left:"50%",width:arrowSideLength,height:arrowSideLength,backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,transform:"translate(-50%, -50%) rotate(45deg)",...!subTheme&&{boxShadow:theme.values.elevation[3]}}}}),initialStyle={top:0,left:0,verticalPlacement:"top",horizontalPlacement:"center"};let lastTooltipHideTimestamp=0;function TooltipContent({placement="auto",content,tooltipId,triggerRef,portalContainer,dataE2eTestId,dataDSId,isVisible,"aria-hidden":ariaHidden,role,tabIndex,contentPadding,maxWidth=224,subTheme,defaultVerticalPlacement,hideArrow=!1,isHiddenOnInvisibleTrigger=!1,onTooltipPointerEnter,onTooltipPointerLeave,onOverflowViewport,privateProps,...ariaAttributes}){let animationDuration,[style,setStyle]=(0,_react.useState)(initialStyle),[isHidden,setIsHidden]=(0,_react.useState)(!1),tooltipRef=(0,_react.useRef)(null),isOverflowCallbackCalledRef=(0,_react.useRef)(!1),document=(0,_useDocument.useDocument)(),window=(0,_useWindow.useWindow)(),{placement:sidePlacement,offset:sideOffset,maxWidth:privateMaxWidth}=privateProps??{},arrowSize=(0,_react.useMemo)(()=>hideArrow?0:subTheme?_utils.ARROW_SIZE:_utils.ARROW_SIZE_BIG,[subTheme,hideArrow]),handleViewportOverflow=(0,_react.useCallback)((triggerRect,tooltipRect,viewportHeight)=>{isOverflowCallbackCalledRef.current||(onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),isOverflowCallbackCalledRef.current=!0)},[onOverflowViewport,isOverflowCallbackCalledRef]),calculateStyle=(0,_react.useCallback)(()=>{triggerRef.current&&tooltipRef.current&&setStyle((0,_utils.getTooltipStyle)({placement,defaultVerticalPlacement,triggerRef,tooltipRef,document,window,arrowSize,onOverflowViewport:handleViewportOverflow,sidePlacement,sideOffset}))},[triggerRef,tooltipRef,document,window,placement,arrowSize,defaultVerticalPlacement,handleViewportOverflow,sidePlacement,sideOffset]);if((0,_react.useLayoutEffect)(()=>{isVisible&&calculateStyle()},[isVisible,calculateStyle,contentPadding]),(0,_react.useEffect)(()=>(isVisible&&tooltipRef.current?window.addEventListener("resize",calculateStyle):isVisible||(lastTooltipHideTimestamp=Date.now()),()=>{window.removeEventListener("resize",calculateStyle)}),[isVisible,calculateStyle,window,tooltipRef]),(0,_react.useEffect)(()=>{let resizeObserver;return isVisible&&tooltipRef.current&&"undefined"!=typeof ResizeObserver&&(resizeObserver=new ResizeObserver(entries=>{entries.forEach(entry=>{entry.contentRect.width>0&&entry.contentRect.height>0&&calculateStyle()})})).observe(tooltipRef.current),()=>{resizeObserver&&resizeObserver.disconnect()}},[isVisible,calculateStyle,tooltipRef]),(0,_react.useEffect)(()=>{let requestAnimationFrameId,prevRect;if(!isVisible)return;let recalculatePosition=()=>{let nextRect=triggerRef.current?.getBoundingClientRect();prevRect&&nextRect&&(prevRect.x!==nextRect.x||prevRect.y!==nextRect.y||prevRect.width!==nextRect.width||prevRect.height!==nextRect.height)&&calculateStyle(),prevRect=nextRect,requestAnimationFrameId=requestAnimationFrame(recalculatePosition)};return requestAnimationFrameId=requestAnimationFrame(recalculatePosition),()=>cancelAnimationFrame(requestAnimationFrameId)},[isVisible,calculateStyle,triggerRef]),(0,_react.useEffect)(()=>{isOverflowCallbackCalledRef.current=!1},[isVisible,isOverflowCallbackCalledRef]),(0,_react.useEffect)(()=>{let observer;return isHiddenOnInvisibleTrigger&&triggerRef.current&&isVisible&&"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{let rect=entry.boundingClientRect;(rect?.width!==0||rect?.height!==0)&&setIsHidden(!entry.isIntersecting)}),{root:null,threshold:.99})).observe(triggerRef.current),()=>{observer&&observer.disconnect()}},[triggerRef,isVisible,isHiddenOnInvisibleTrigger]),!isVisible)return null;let tooltipElm=_react.default.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDSId,style:{top:style.top,left:style.left,animationDuration:(animationDuration="200ms",lastTooltipHideTimestamp&&Date.now()-lastTooltipHideTimestamp<700&&(animationDuration="0ms"),animationDuration)},ref:tooltipRef,id:tooltipId,role:role,...ariaAttributes,"aria-hidden":ariaHidden,subTheme:subTheme,tabIndex:tabIndex,horizontalPlacement:style.horizontalPlacement,verticalPlacement:style.verticalPlacement,maxWidth:privateMaxWidth??maxWidth,contentPadding:contentPadding,isHidden:isHidden,isSidePlacement:style.isSidePlacement,onPointerEnter:onTooltipPointerEnter,onPointerLeave:onTooltipPointerLeave},content,!hideArrow&&!style.isSidePlacement&&_react.default.createElement(StyledArrow,{"data-e2e-test-id":`${dataE2eTestId}_arrow`,subTheme:subTheme,horizontalPlacement:style.horizontalPlacement,verticalPlacement:style.verticalPlacement,size:arrowSize})),wrapperElm=subTheme?_react.default.createElement(_SubThemeProvider.SubThemeProvider,{name:subTheme},tooltipElm):tooltipElm;return _react.default.createElement(_Portal.Portal,{portalContainer:portalContainer},wrapperElm)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"TooltipContent",{enumerable:!0,get:function(){return TooltipContent}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_react=require("@emotion/react"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react1=/*#__PURE__*/_interop_require_wildcard._(require("react")),_Portal=require("../Portal/Portal"),_SubThemeProvider=require("../SubThemeProvider/SubThemeProvider"),_useFloatingPosition=require("../Utilities/FloatingPosition/useFloatingPosition"),_FloatingPositionedContext=require("./FloatingPositionedContext"),_utils=require("./utils"),StyledContainer=(0,_styled.default)("div",{target:"e1l7l62c0",label:"StyledContainer"})(({theme,side,maxWidth,contentPadding,subTheme,isHidden,isSidePlacement})=>{let zIndex=(0,_Portal.usePortalChildZIndex)(theme.variables.zIndex.tooltip),animationDistance="top"===side?`${-_utils.ANIMATION_DISTANCE}px`:`${_utils.ANIMATION_DISTANCE}px`,animation=(0,_react.keyframes)({from:{opacity:theme.variables.opacity.hidden,...!isSidePlacement&&{transform:`translateY(${animationDistance})`}},to:{opacity:theme.variables.opacity.visible,...!isSidePlacement&&{transform:"translateY(0)"}}}),contentPaddingMap={s:theme.variables.size.spacing.xxs,m:theme.variables.size.spacing.s},invertedSubThemeStyles={padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,...contentPadding&&{padding:contentPaddingMap[contentPadding]}};return{zIndex,opacity:theme.variables.opacity.hidden,animation:`200ms ease-out forwards ${animation}`,maxWidth,width:"max-content",boxSizing:"border-box",backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,borderRadius:subTheme?theme.variables.size.borderRadius.xs:theme.variables.size.borderRadius.s,...isHidden&&{visibility:"hidden"},...!!subTheme&&invertedSubThemeStyles,...!subTheme&&{":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}}),StyledArrow=(0,_styled.default)("div",{target:"e1l7l62c1",label:"StyledArrow"})(({theme,subTheme,side,size=_utils.ARROW_SIZE,arrowOffsetLeft})=>{let adjustmentForShadow=+!subTheme,arrowContainerHeight=size+_utils.DISTANCE_FROM_TRIGGER,arrowSideLength=Math.sqrt(size**2+(size+adjustmentForShadow)**2);return{position:"absolute",left:arrowOffsetLeft,width:40,height:arrowContainerHeight,zIndex:1,overflow:"hidden",..."top"===side&&{top:`calc(100% - ${adjustmentForShadow}px)`},..."bottom"===side&&{top:`-${arrowContainerHeight-adjustmentForShadow}px`},"&::after":{content:'" "',position:"absolute",top:"top"===side?0:"100%",left:"50%",width:arrowSideLength,height:arrowSideLength,backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,transform:"translate(-50%, -50%) rotate(45deg)",...!subTheme&&{boxShadow:theme.values.elevation[3]}}}});let lastTooltipHideTimestamp=0;function TooltipContent({placement="auto",content,tooltipId,triggerRef,portalContainer,dataE2eTestId,dataDSId,isVisible,"aria-hidden":ariaHidden,role,tabIndex,contentPadding,maxWidth=224,subTheme,defaultVerticalPlacement,hideArrow=!1,isHiddenOnInvisibleTrigger=!1,onTooltipPointerEnter,onTooltipPointerLeave,onOverflowViewport,privateProps,...ariaAttributes}){let animationDuration,[isHidden,setIsHidden]=(0,_react1.useState)(!1),arrowRef=(0,_react1.useRef)(null),isOverflowCallbackCalledRef=(0,_react1.useRef)(!1),{placement:sidePlacement,offset:sideOffset=_utils.sidePlacementOffset,maxWidth:privateMaxWidth}=privateProps??{},arrowSize=(0,_react1.useMemo)(()=>hideArrow?0:subTheme?_utils.ARROW_SIZE:_utils.ARROW_SIZE_BIG,[subTheme,hideArrow]),handleViewportOverflow=(0,_react1.useCallback)((triggerRect,tooltipRect,viewportHeight)=>{isOverflowCallbackCalledRef.current||(onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),isOverflowCallbackCalledRef.current=!0)},[onOverflowViewport,isOverflowCallbackCalledRef]),overflowMiddleware=(0,_react1.useMemo)(()=>"auto"===placement?[(0,_utils.createOverflowViewportReporter)(handleViewportOverflow)]:void 0,[placement,handleViewportOverflow]),{placement:preferredPlacement,fallbackPlacements}=(0,_react1.useMemo)(()=>(0,_utils.toFloatingPlacement)({placement,defaultVerticalPlacement,sidePlacement}),[placement,defaultVerticalPlacement,sidePlacement]),offset=(0,_react1.useMemo)(()=>(0,_utils.getTooltipOffsetOptions)({arrowSize,sideOffset}),[arrowSize,sideOffset]),anchorRef=(0,_react1.useRef)(null),anchorSourceRef=(0,_react1.useRef)(null);anchorSourceRef.current!==triggerRef.current&&(anchorSourceRef.current=triggerRef.current,anchorRef.current=(0,_utils.toFloatingAnchor)(triggerRef.current));let{setFloating,floatingStyles,placement:resolvedPlacement,isPositioned,middlewareData}=(0,_useFloatingPosition.useFloatingPosition)({anchorRef,placement:preferredPlacement,offset,flip:{fallbackPlacements},arrowRef:hideArrow?void 0:arrowRef,disableTransform:!0,trackAnimationFrame:!0,isOpen:!!isVisible,extraMiddleware:overflowMiddleware});if((0,_react1.useEffect)(()=>{isVisible||(lastTooltipHideTimestamp=Date.now())},[isVisible]),(0,_react1.useEffect)(()=>{isOverflowCallbackCalledRef.current=!1},[isVisible,isOverflowCallbackCalledRef]),(0,_react1.useEffect)(()=>{let observer;return isHiddenOnInvisibleTrigger&&triggerRef.current&&isVisible&&"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{let rect=entry.boundingClientRect;(rect?.width!==0||rect?.height!==0)&&setIsHidden(!entry.isIntersecting)}),{root:null,threshold:.99})).observe(triggerRef.current),()=>{observer&&observer.disconnect()}},[triggerRef,isVisible,isHiddenOnInvisibleTrigger]),!isVisible)return null;let side=(0,_utils.getPlacementSide)(resolvedPlacement),isSidePlacement=side===_utils.SIDE_PLACEMENT_SIDE,tooltipElm=_react1.default.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDSId,"data-placement":resolvedPlacement,style:{...floatingStyles,animationDuration:(animationDuration="200ms",lastTooltipHideTimestamp&&Date.now()-lastTooltipHideTimestamp<700&&(animationDuration="0ms"),animationDuration)},ref:setFloating,id:tooltipId,role:role,...ariaAttributes,"aria-hidden":ariaHidden,subTheme:subTheme,tabIndex:tabIndex,side:side,maxWidth:privateMaxWidth??maxWidth,contentPadding:contentPadding,isHidden:isHidden||!isPositioned,isSidePlacement:isSidePlacement,onPointerEnter:onTooltipPointerEnter,onPointerLeave:onTooltipPointerLeave},_react1.default.createElement(_FloatingPositionedContext.FloatingPositionedContext.Provider,{value:isPositioned},content),!hideArrow&&side!==_utils.SIDE_PLACEMENT_SIDE&&_react1.default.createElement(StyledArrow,{ref:arrowRef,"data-e2e-test-id":`${dataE2eTestId}_arrow`,subTheme:subTheme,side:side,size:arrowSize,arrowOffsetLeft:middlewareData.arrow?.x})),wrapperElm=subTheme?_react1.default.createElement(_SubThemeProvider.SubThemeProvider,{name:subTheme},tooltipElm):tooltipElm;return _react1.default.createElement(_Portal.Portal,{portalContainer:portalContainer},wrapperElm)}

package/build/cjs/components/Tooltip/utils.d.ts

@@ -1,6 +1,6 @@
-import type { RefObject } from "react";
-import type { TooltipProps } from "./Tooltip";
-import type { TooltipStyle, TooltipContentProps, TooltipPrivateProps } from "./TooltipContent";
+import type { OffsetOptions } from "@floating-ui/react-dom";
+import type { Middleware, Placement, VirtualElement } from "../Utilities/FloatingPosition/useFloatingPosition";
+import type { TooltipContentProps, TooltipPlacement, TooltipPrivateProps, TooltipVerticalPlacement } from "./TooltipContent";
 export declare const DISTANCE_FROM_TRIGGER = 4;
 export declare const ANIMATION_DISTANCE = 8;
 export declare const ARROW_SIZE = 6;
@@ -8,21 +8,65 @@ export declare const ARROW_SIZE_BIG = 8;
 /** TODO: remove temporary side placement. Matches the gap top/bottom tooltips settle at. */
 export declare const sidePlacementOffset: number;
 export declare const getArrowOffset: (size: number) => number;
-type GetTooltipStyleParams = {
-    placement: TooltipProps["placement"];
-    defaultVerticalPlacement?: TooltipStyle["verticalPlacement"];
-    triggerRef: RefObject<any>;
-    tooltipRef: RefObject<any>;
-    document: Document;
-    window: Window;
-    arrowSize: number;
-    onOverflowViewport: TooltipContentProps["onOverflowViewport"];
-    /** TODO: remove temporary side placement, both fields */
+export type FloatingPlacementConfig = {
+    placement: Placement;
+    /** The placements `flip` may fall back to, in order of preference. */
+    fallbackPlacements: Placement[];
+};
+type ToFloatingPlacementParams = {
+    placement: TooltipPlacement | undefined;
+    defaultVerticalPlacement: TooltipVerticalPlacement | undefined;
+    /** TODO: remove temporary side placement */
     sidePlacement?: TooltipPrivateProps["placement"];
-    sideOffset?: number;
 };
 /**
- * Get tooltip position and width
+ * Resolves the DS placement to the preferred floating-ui placement plus its
+ * flip fallbacks. Tooltips only ever move between the top and bottom side; an
+ * explicit placement may only flip to the opposite side with the same
+ * alignment, while automatic placement may also switch alignment.
+ *
+ * A side placement takes precedence and falls back to whatever the DS
+ * placement resolved to, so it lands beside the trigger when there is room and
+ * behaves like an ordinary tooltip when there is not.
+ */
+export declare const toFloatingPlacement: ({ placement, defaultVerticalPlacement, sidePlacement, }: ToFloatingPlacementParams) => FloatingPlacementConfig;
+/**
+ * The side of the trigger the resolved floating-ui placement puts the tooltip
+ * on. `"right"` only ever comes from the temporary side placement.
+ * TODO: drop `"right"` with the temporary side placement
+ */
+export type TooltipPlacementSide = TooltipVerticalPlacement | "right";
+/** TODO: remove temporary side placement */
+export declare const SIDE_PLACEMENT_SIDE: "right";
+/** The side of the trigger the resolved floating-ui placement puts the tooltip on. */
+export declare const getPlacementSide: (placement: Placement) => TooltipPlacementSide;
+type TooltipOffsetParams = {
+    arrowSize: number;
+    /**
+     * Gap between trigger and a side-placed tooltip.
+     * TODO: remove temporary side placement
+     */
+    sideOffset: number;
+};
+/**
+ * Distance between trigger and tooltip, plus — for aligned placements — the
+ * offset that anchors the tooltip's near edge to the trigger center instead of
+ * floating-ui's default trigger-edge alignment, keeping the arrow (which sits
+ * `getArrowOffset` + arrow size from the tooltip edge) pointed at the trigger
+ * center. With no arrow the tooltip stays edge-aligned, as before.
+ */
+export declare const getTooltipOffsetOptions: ({ arrowSize, sideOffset }: TooltipOffsetParams) => OffsetOptions;
+type OnOverflowViewport = NonNullable<TooltipContentProps["onOverflowViewport"]>;
+/**
+ * Reproduces the legacy `onOverflowViewport` contract: reports when the
+ * tooltip fits neither fully above nor fully below the trigger.
+ */
+export declare const createOverflowViewportReporter: (onOverflowViewport: OnOverflowViewport) => Middleware;
+/**
+ * Normalizes what consumers put into `triggerRef` — a DOM element, or a
+ * `Range` (RangePopover, UserHighlightTooltip) — into a floating-ui anchor.
+ * A `Range` is wrapped as a virtual element with a `contextElement` so
+ * `autoUpdate` can attach scroll listeners to the right ancestors.
  */
-export declare function getTooltipStyle({ placement, defaultVerticalPlacement, triggerRef, tooltipRef, document, window, arrowSize, onOverflowViewport, sidePlacement, sideOffset, }: GetTooltipStyleParams): TooltipStyle;
+export declare const toFloatingAnchor: (trigger: unknown) => Element | VirtualElement | null;
 export {};

package/build/cjs/components/Tooltip/utils.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get ANIMATION_DISTANCE(){return ANIMATION_DISTANCE},get ARROW_SIZE(){return ARROW_SIZE},get ARROW_SIZE_BIG(){return ARROW_SIZE_BIG},get DISTANCE_FROM_TRIGGER(){return DISTANCE_FROM_TRIGGER},get getArrowOffset(){return getArrowOffset},get getTooltipStyle(){return getTooltipStyle},get sidePlacementOffset(){return sidePlacementOffset}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _getSideTooltipStyle=require("./getSideTooltipStyle"),DISTANCE_FROM_TRIGGER=4,ANIMATION_DISTANCE=8,ARROW_SIZE=6,ARROW_SIZE_BIG=8,sidePlacementOffset=10,getArrowOffset=size=>2*size;function getTooltipStyle({placement,defaultVerticalPlacement="top",triggerRef,tooltipRef,document,window,arrowSize,onOverflowViewport,sidePlacement,sideOffset=sidePlacementOffset}){let triggerRect=triggerRef.current.getBoundingClientRect(),tooltipRect=tooltipRef.current.getBoundingClientRect(),viewportWidth=document.documentElement.clientWidth,viewportHeight=document.documentElement.clientHeight;if("right-top"===sidePlacement){let fitsRightOfTrigger=triggerRect.right+sideOffset+tooltipRect.width<=viewportWidth,fitsBelowTriggerTop=triggerRect.top+tooltipRect.height<=viewportHeight;if(fitsRightOfTrigger&&fitsBelowTriggerTop)return(0,_getSideTooltipStyle.getSideTooltipStyle)({triggerRect,offset:sideOffset,window})}let top=0,left=0,verticalPlacement=defaultVerticalPlacement,horizontalPlacement="center",arrowOffset=getArrowOffset(arrowSize),tooltipMargin=arrowSize+ANIMATION_DISTANCE+DISTANCE_FROM_TRIGGER;switch(placement){case"top":case"bottom":verticalPlacement=placement;break;case"top-left":case"top-right":case"bottom-left":case"bottom-right":{let placements=placement.split("-");verticalPlacement=placements[0],horizontalPlacement=placements[1];break}default:{let canPlaceAboveTrigger=triggerRect.top>=tooltipRect.height,canPlaceBelowTrigger=triggerRect.bottom+tooltipRect.height<viewportHeight;canPlaceBelowTrigger||canPlaceAboveTrigger||onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),"top"===verticalPlacement&&!canPlaceAboveTrigger&&canPlaceBelowTrigger?verticalPlacement="bottom":"bottom"!==verticalPlacement||canPlaceBelowTrigger||(verticalPlacement="top"),triggerRect.left>=tooltipRect.width/2?triggerRect.left+triggerRect.width/2+tooltipRect.width/2>=viewportWidth&&(horizontalPlacement="left"):horizontalPlacement="right"}}switch(top="top"===verticalPlacement?triggerRect.top-tooltipRect.height-tooltipMargin:triggerRect.bottom+tooltipMargin,horizontalPlacement){case"left":left=arrowSize?triggerRect.left+triggerRect.width/2-tooltipRect.width+arrowOffset+arrowSize:triggerRect.right-tooltipRect.width;break;case"right":left=arrowSize?triggerRect.left+triggerRect.width/2-arrowOffset-arrowSize:triggerRect.left;break;default:left=triggerRect.left+triggerRect.width/2}return{top:top+window.scrollY,left:left+window.scrollX,horizontalPlacement,verticalPlacement}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get ANIMATION_DISTANCE(){return ANIMATION_DISTANCE},get ARROW_SIZE(){return ARROW_SIZE},get ARROW_SIZE_BIG(){return ARROW_SIZE_BIG},get DISTANCE_FROM_TRIGGER(){return DISTANCE_FROM_TRIGGER},get SIDE_PLACEMENT_SIDE(){return SIDE_PLACEMENT_SIDE},get createOverflowViewportReporter(){return createOverflowViewportReporter},get getArrowOffset(){return getArrowOffset},get getPlacementSide(){return getPlacementSide},get getTooltipOffsetOptions(){return getTooltipOffsetOptions},get sidePlacementOffset(){return sidePlacementOffset},get toFloatingAnchor(){return toFloatingAnchor},get toFloatingPlacement(){return toFloatingPlacement}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const DISTANCE_FROM_TRIGGER=4,ANIMATION_DISTANCE=8,ARROW_SIZE=6,ARROW_SIZE_BIG=8,sidePlacementOffset=10,getArrowOffset=size=>2*size,START_SUFFIX="-start",END_SUFFIX="-end",SIDE_PLACEMENT="right-start",DS_TO_FLOATING_PLACEMENT={top:"top",bottom:"bottom","top-left":`top${END_SUFFIX}`,"top-right":`top${START_SUFFIX}`,"bottom-left":`bottom${END_SUFFIX}`,"bottom-right":`bottom${START_SUFFIX}`},OPPOSITE_SIDE={top:"bottom",bottom:"top"},sideWithAlignments=side=>[side,`${side}${START_SUFFIX}`,`${side}${END_SUFFIX}`],toFloatingPlacement=({placement,defaultVerticalPlacement,sidePlacement})=>{let isAutomatic=!placement||"auto"===placement,preferred=isAutomatic?defaultVerticalPlacement??"top":DS_TO_FLOATING_PLACEMENT[placement],[side,alignment]=preferred.split("-"),oppositeSide=OPPOSITE_SIDE[side],resolved=isAutomatic?{placement:preferred,fallbackPlacements:[...sideWithAlignments(side).slice(1),...sideWithAlignments(oppositeSide)]}:{placement:preferred,fallbackPlacements:[alignment?`${oppositeSide}-${alignment}`:oppositeSide]};return"right-top"===sidePlacement?{placement:SIDE_PLACEMENT,fallbackPlacements:[resolved.placement,...resolved.fallbackPlacements]}:resolved},SIDE_PLACEMENT_SIDE="right",getPlacementSide=placement=>placement.split("-")[0],getTooltipOffsetOptions=({arrowSize,sideOffset})=>({rects,placement})=>{if(placement===SIDE_PLACEMENT)return{mainAxis:sideOffset};let mainAxis=arrowSize+DISTANCE_FROM_TRIGGER;return(placement.endsWith(START_SUFFIX)||placement.endsWith(END_SUFFIX))&&0!==arrowSize?{mainAxis,alignmentAxis:rects.reference.width/2-getArrowOffset(arrowSize)-arrowSize}:{mainAxis}},createOverflowViewportReporter=onOverflowViewport=>({name:"reportOverflowViewport",fn({elements}){let triggerRect=elements.reference.getBoundingClientRect(),tooltipRect=elements.floating.getBoundingClientRect(),viewportHeight=elements.floating.ownerDocument.documentElement.clientHeight,canPlaceAboveTrigger=triggerRect.top>=tooltipRect.height,canPlaceBelowTrigger=triggerRect.bottom+tooltipRect.height<viewportHeight;return canPlaceAboveTrigger||canPlaceBelowTrigger||onOverflowViewport(triggerRect,tooltipRect,viewportHeight),{}}}),toFloatingAnchor=trigger=>{if(!trigger)return null;if("undefined"!=typeof Range&&trigger instanceof Range){let container=trigger.commonAncestorContainer;return{getBoundingClientRect:()=>trigger.getBoundingClientRect(),getClientRects:()=>trigger.getClientRects(),contextElement:container instanceof Element?container:container.parentElement??void 0}}return trigger};

package/build/cjs/components/Utilities/FloatingPosition/useFloatingPosition.d.ts

@@ -1,20 +1,53 @@
 import type { CSSProperties, RefObject } from "react";
-import type { OffsetOptions, Placement, Strategy } from "@floating-ui/react-dom";
+import type { Middleware, MiddlewareData, OffsetOptions, Placement, Strategy, VirtualElement } from "@floating-ui/react-dom";
 export type { ViewportPlacement } from "./utils";
-export type { Placement } from "@floating-ui/react-dom";
+export type { Middleware, MiddlewareData, Placement, VirtualElement, } from "@floating-ui/react-dom";
+export type FlipOptions = {
+    /** Restrict which placements `flip` may fall back to. */
+    fallbackPlacements?: Placement[];
+};
 /** Position relative to an anchor element. */
 type AnchorModeProps = {
     mode?: "anchor";
-    /** The element to position the floating element against. */
-    anchorRef: RefObject<HTMLElement | null>;
+    /**
+     * The element to position the floating element against. Also accepts a
+     * virtual element (anything with `getBoundingClientRect`, e.g. a `Range`
+     * wrapper) — set its `contextElement` so scroll/resize tracking works.
+     */
+    anchorRef: RefObject<Element | VirtualElement | null>;
     /** Side (and optional alignment) to place the element on. Default `"bottom"`. */
     placement?: Placement;
     /** Gap between the anchor and the floating element. Default `0`. */
     offset?: OffsetOptions;
-    /** Flip to the opposite side when it would overflow. Default `true`. */
-    flip?: boolean;
+    /**
+     * Flip to the opposite side when it would overflow. Default `true`.
+     * Pass an options object to restrict the fallback placements.
+     */
+    flip?: boolean | FlipOptions;
     /** Slide along the axis to stay in view near edges. Default `true`. */
     shift?: boolean;
+    /**
+     * Arrow element to keep pointed at the anchor; its offset along the
+     * floating element is returned in `middlewareData.arrow`.
+     */
+    arrowRef?: RefObject<HTMLElement | null>;
+    /** Minimum distance the arrow keeps from the floating element's corners. Default `0`. */
+    arrowPadding?: number;
+    /**
+     * Emit `top`/`left` instead of a `transform` in `floatingStyles`, freeing
+     * `transform` for the caller's own animations. Default `false` (transform).
+     */
+    disableTransform?: boolean;
+    /**
+     * Reposition every animation frame while open — needed when the anchor moves
+     * without scroll/resize events (CSS transforms, canvas pan). Default `false`.
+     */
+    trackAnimationFrame?: boolean;
+    /**
+     * Extra floating-ui middleware, run after the built-ins (before `arrow`).
+     * Keep the array referentially stable (module-level or memoized).
+     */
+    extraMiddleware?: Middleware[];
 };
 /**
  * The viewport spot to pin to, expressed as separate axes. At least one axis is
@@ -54,6 +87,8 @@ export type UseFloatingPositionReturn = {
     strategy: Strategy;
     /** `false` until the element has been measured — gate visibility on this to avoid a flash. */
     isPositioned: boolean;
+    /** Per-middleware positioning data, e.g. `middlewareData.arrow` for the arrow offset. */
+    middlewareData: MiddlewareData;
     /** Imperatively recompute the position. */
     update: () => void;
 };

package/build/cjs/components/Utilities/FloatingPosition/useFloatingPosition.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useFloatingPosition",{enumerable:!0,get:function(){return useFloatingPosition}});const _react=require("react"),_reactdom=require("@floating-ui/react-dom"),_useWindow=require("../../../shared/useWindow"),_useDocument=require("../../../shared/useDocument"),_utils=require("./utils");function useFloatingPosition(props){let{isOpen=!0}=props,isViewportMode="viewport"===props.mode,window=(0,_useWindow.useWindow)(),document=(0,_useDocument.useDocument)(),{anchorPlacement,viewportPlacement,anchorOffset,viewportOffset,flipEnabled,shiftEnabled,anchorRef}="viewport"===props.mode?{anchorPlacement:void 0,viewportPlacement:(0,_utils.axesToViewportPlacement)(props.positionY,props.positionX),anchorOffset:0,viewportOffset:props.offset??0,flipEnabled:!1,shiftEnabled:!1,anchorRef:null}:{anchorPlacement:props.placement??"bottom",viewportPlacement:void 0,anchorOffset:props.offset??0,viewportOffset:0,flipEnabled:!1!==props.flip,shiftEnabled:!1!==props.shift,anchorRef:props.anchorRef??null},middleware=(0,_react.useMemo)(()=>isViewportMode?[]:[(0,_reactdom.offset)(anchorOffset),...flipEnabled?[(0,_reactdom.flip)()]:[],...shiftEnabled?[(0,_reactdom.shift)({padding:8})]:[]],[isViewportMode,anchorOffset,flipEnabled,shiftEnabled]),virtualReference=(0,_react.useMemo)(()=>viewportPlacement?{getBoundingClientRect(){let vw=document&&document.documentElement.clientWidth||window&&window.innerWidth||0,vh=window&&window.innerHeight||document&&document.documentElement.clientHeight||0;return(0,_utils.getViewportReferenceRect)(viewportPlacement,vw,vh,viewportOffset)}}:null,[viewportPlacement,viewportOffset,window,document]),{refs,floatingStyles,placement,strategy,isPositioned,update}=(0,_reactdom.useFloating)({open:isOpen,strategy:isViewportMode?"fixed":"absolute",placement:viewportPlacement?(0,_utils.viewportToFloatingPlacement)(viewportPlacement):anchorPlacement,middleware,whileElementsMounted:isOpen?_reactdom.autoUpdate:void 0});return(0,_react.useLayoutEffect)(()=>{virtualReference?refs.setReference(virtualReference):anchorRef&&refs.setReference(anchorRef.current)},[virtualReference,anchorRef,refs,isOpen]),{setFloating:refs.setFloating,floatingStyles,placement,strategy,isPositioned,update}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useFloatingPosition",{enumerable:!0,get:function(){return useFloatingPosition}});const _react=require("react"),_reactdom=require("@floating-ui/react-dom"),_useWindow=require("../../../shared/useWindow"),_useDocument=require("../../../shared/useDocument"),_utils=require("./utils"),NO_EXTRA_MIDDLEWARE=[];function useFloatingPosition(props){let{isOpen=!0}=props,isViewportMode="viewport"===props.mode,window=(0,_useWindow.useWindow)(),document=(0,_useDocument.useDocument)(),{anchorPlacement,viewportPlacement,anchorOffset,viewportOffset,flipEnabled,flipFallbackPlacements,shiftEnabled,anchorRef,arrowRef,arrowPadding,disableTransform,trackAnimationFrame,extraMiddleware}="viewport"===props.mode?{anchorPlacement:void 0,viewportPlacement:(0,_utils.axesToViewportPlacement)(props.positionY,props.positionX),anchorOffset:0,viewportOffset:props.offset??0,flipEnabled:!1,flipFallbackPlacements:void 0,shiftEnabled:!1,anchorRef:null,arrowRef:null,arrowPadding:0,disableTransform:!1,trackAnimationFrame:!1,extraMiddleware:NO_EXTRA_MIDDLEWARE}:{anchorPlacement:props.placement??"bottom",viewportPlacement:void 0,anchorOffset:props.offset??0,viewportOffset:0,flipEnabled:!1!==props.flip,flipFallbackPlacements:"object"==typeof props.flip?props.flip.fallbackPlacements:void 0,shiftEnabled:!1!==props.shift,anchorRef:props.anchorRef??null,arrowRef:props.arrowRef??null,arrowPadding:props.arrowPadding??0,disableTransform:props.disableTransform??!1,trackAnimationFrame:props.trackAnimationFrame??!1,extraMiddleware:props.extraMiddleware??NO_EXTRA_MIDDLEWARE},middleware=(0,_react.useMemo)(()=>isViewportMode?[]:[(0,_reactdom.offset)(anchorOffset),...flipEnabled?[(0,_reactdom.flip)({fallbackPlacements:flipFallbackPlacements})]:[],...shiftEnabled?[(0,_reactdom.shift)({padding:8})]:[],...extraMiddleware,...arrowRef?[(0,_reactdom.arrow)({element:arrowRef,padding:arrowPadding})]:[]],[isViewportMode,anchorOffset,flipEnabled,flipFallbackPlacements,shiftEnabled,arrowRef,arrowPadding,extraMiddleware]),virtualReference=(0,_react.useMemo)(()=>viewportPlacement?{getBoundingClientRect(){let vw=document&&document.documentElement.clientWidth||window&&window.innerWidth||0,vh=window&&window.innerHeight||document&&document.documentElement.clientHeight||0;return(0,_utils.getViewportReferenceRect)(viewportPlacement,vw,vh,viewportOffset)}}:null,[viewportPlacement,viewportOffset,window,document]),{refs,elements:{reference:referenceElement,floating:floatingElement},floatingStyles,placement,strategy,isPositioned,middlewareData,update}=(0,_reactdom.useFloating)({open:isOpen,strategy:isViewportMode?"fixed":"absolute",transform:!disableTransform,placement:viewportPlacement?(0,_utils.viewportToFloatingPlacement)(viewportPlacement):anchorPlacement,middleware});return(0,_react.useLayoutEffect)(()=>{if(isOpen&&referenceElement&&floatingElement)return(0,_reactdom.autoUpdate)(referenceElement,floatingElement,update,{animationFrame:trackAnimationFrame})},[isOpen,trackAnimationFrame,referenceElement,floatingElement,update]),(0,_react.useLayoutEffect)(()=>{virtualReference?refs.setReference(virtualReference):anchorRef&&refs.setReference(anchorRef.current)}),{setFloating:refs.setFloating,floatingStyles,placement,strategy,isPositioned,middlewareData,update}}

package/build/cjs/shared/FocusTrapWrapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FocusTrapWrapper",{enumerable:!0,get:function(){return FocusTrapWrapper}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_focustrapreact=/*#__PURE__*/_interop_require_default._(require("focus-trap-react")),FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=(0,_react.useRef)(!1),isEscaped=(0,_react.useRef)(!1),{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=(0,_react.useRef)(onPostDeactivate),clickOutsideDeactivatesRef=(0,_react.useRef)(clickOutsideDeactivates),escapeDeactivatesRef=(0,_react.useRef)(escapeDeactivates);return(0,_react.useEffect)(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),(0,_react.useEffect)(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),(0,_react.useEffect)(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]),_react.default.createElement(_focustrapreact.default,{active:active,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},children)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FocusTrapWrapper",{enumerable:!0,get:function(){return FocusTrapWrapper}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_focustrapreact=/*#__PURE__*/_interop_require_default._(require("focus-trap-react")),_FloatingPositionedContext=require("../components/Tooltip/FloatingPositionedContext"),FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=(0,_react.useRef)(!1),isEscaped=(0,_react.useRef)(!1),isPositioned=(0,_react.useContext)(_FloatingPositionedContext.FloatingPositionedContext),{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=(0,_react.useRef)(onPostDeactivate),clickOutsideDeactivatesRef=(0,_react.useRef)(clickOutsideDeactivates),escapeDeactivatesRef=(0,_react.useRef)(escapeDeactivates);return(0,_react.useEffect)(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),(0,_react.useEffect)(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),(0,_react.useEffect)(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]),_react.default.createElement(_focustrapreact.default,{active:active&&isPositioned,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},children)};

package/build/esm/components/RangePopover/RangePopover.d.ts

@@ -10,6 +10,11 @@ export type RangePopoverProps = {
     isVisible: boolean;
     /** Called when the popover is dismissed by an outside click or the Escape key. */
     onClose: () => void;
+    /**
+     * Controls whether the popover closes on an outside click. When false, only
+     * the Escape key dismisses it.
+     */
+    dismissOnOutsideClick?: boolean;
     /** Preferred placement relative to the range. */
     placement?: RangePopoverPlacement;
     /** Portal target; falls back to the document body when omitted. */
@@ -40,17 +45,18 @@ export type RangePopoverProps = {
  * A click-dismissed popover anchored on a DOM {@link Range} rather than a
  * trigger element.
  *
- * It pairs the design-system tooltip positioner — which places content purely
- * from `triggerRef.current.getBoundingClientRect()`, a method a `Range` also
- * provides — with the focus-trap dismissal model used by the design-system
- * Popover. This lets it anchor on a painted text selection that has no DOM node
- * of its own, the same way `UserHighlightTooltip` does, while opening and
- * closing on explicit interaction instead of hover.
+ * It pairs the design-system tooltip positioner — which accepts a `Range` in
+ * `triggerRef` and anchors on it as a floating-ui virtual element — with the
+ * focus-trap dismissal model used by the design-system Popover. This lets it
+ * anchor on a painted text selection that has no DOM node of its own, the same
+ * way `UserHighlightTooltip` does, while opening and closing on explicit
+ * interaction instead of hover.
  *
  * @param content - The popover body.
  * @param range - The range to anchor on.
  * @param isVisible - Whether the popover is shown.
  * @param onClose - Called when dismissed by an outside click or the Escape key.
+ * @param dismissOnOutsideClick - Whether an outside click dismisses the popover.
  * @param placement - Preferred placement relative to the range.
  * @param portalContainer - Portal target; falls back to the document body.
  * @param contentPadding - Inner padding of the popover surface.
@@ -60,5 +66,5 @@ export type RangePopoverProps = {
  * @param aria-label - Accessible name for the popover surface.
  * @param disableInitialFocus - When true, does not move focus into the popover.
  */
-export declare function RangePopover({ content, range, isVisible, onClose, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
+export declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, "data-e2e-test-id": dataE2eTestId, }: RangePopoverProps): React.ReactElement;
 export {};

package/build/esm/components/RangePopover/RangePopover.js

@@ -1 +1 @@
-import React,{useId,useRef}from"react";import styled from"@emotion/styled";import{TooltipContent}from"../Tooltip/TooltipContent";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";let StyledContent=styled("div",{target:"e115t0yz0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));export function RangePopover({content,range,isVisible,onClose,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=useId(),rangeRef=useRef(null);rangeRef.current=range;let contentRef=useRef(null),trappedContent=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},React.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return React.createElement(TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}
+import React,{useId,useRef}from"react";import styled from"@emotion/styled";import{TooltipContent}from"../Tooltip/TooltipContent";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";let StyledContent=styled("div",{target:"e1cdfvza0",label:"StyledContent"})(({theme,contentPadding})=>({padding:"m"===contentPadding?theme.variables.size.spacing.s:theme.variables.size.spacing.xxs}));export function RangePopover({content,range,isVisible,onClose,dismissOnOutsideClick=!0,placement="top",portalContainer,contentPadding="s",maxWidth,hideArrow=!1,role="dialog","aria-label":ariaLabel,disableInitialFocus=!1,"data-e2e-test-id":dataE2eTestId}){let tooltipId=useId(),rangeRef=useRef(null);rangeRef.current=range;let contentRef=useRef(null),trappedContent=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:dismissOnOutsideClick,escapeDeactivates:!0,fallbackFocus:()=>contentRef.current,initialFocus:!disableInitialFocus&&void 0,onPostDeactivate:onClose,preventScroll:!0,returnFocusOnDeactivate:!disableInitialFocus}},React.createElement(StyledContent,{ref:contentRef,tabIndex:-1,contentPadding:contentPadding},content));return React.createElement(TooltipContent,{"aria-label":ariaLabel,content:trappedContent,dataDSId:"RangePopover",dataE2eTestId:dataE2eTestId,hideArrow:hideArrow,isVisible:isVisible,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,role:role,tooltipId:tooltipId,triggerRef:rangeRef})}

package/build/esm/components/Toggletip/BasePopover.d.ts

@@ -1,8 +1,8 @@
 import type { ReactElement } from "react";
 import React from "react";
+import type { PopupRole } from "../Sheet/Sheet";
 import type { TooltipContentProps } from "../Tooltip/TooltipContent";
 import type { TooltipConditionalProps } from "../Tooltip/types";
-import type { PopupRole } from "../Sheet/Sheet";
 type BaseProps = Pick<TooltipContentProps, "placement" | "portalContainer" | "maxWidth" | "contentPadding" | "hideArrow" | "subTheme" | "defaultVerticalPlacement" | "onOverflowViewport"> & {
     name?: string;
     /**  Popover content */

package/build/esm/components/Toggletip/BasePopover.js

@@ -1 +1 @@
-import React,{useState,useRef,useEffect,useLayoutEffect,useCallback,useMemo}from"react";import styled from"@emotion/styled";import breakpoints from"../../web-tokens/_breakpoints.json";import{useWindow}from"../../shared/useWindow";import{TooltipContent}from"../Tooltip/TooltipContent";import{Sheet}from"../Sheet/Sheet";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{getAriaAttributes}from"../../shared/ariaAttributes";import{PopoverContext}from"../Patterns/Popover/PopoverContext";let StyledContainer=styled("div",{target:"e1f33nt10",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=React.forwardRef(({children},ref)=>React.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}function getMobileBreakpoint(renderAsSheetOnMobile,win){if(!win)return!1;let isMobileInPortrait=win.innerWidth<=breakpoints.m.value,isSmallHeight=win.innerHeight<=450,isLandscape=win.matchMedia?.("(orientation: landscape)").matches;return renderAsSheetOnMobile&&(isMobileInPortrait||isLandscape&&isSmallHeight)}export function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let win=useWindow(),tooltipId=useMemo(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=useState(isPopoverVisible),[isMobileBreakPoint,setIsMobileBreakpoint]=useState(()=>forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win)),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=useRef(!1),ariaAttributes=getAriaAttributes(restContentProps),popoverContextValue=useMemo(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=React.createElement(PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=useCallback((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=useCallback(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=useCallback(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=useCallback(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);useEffect(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),useLayoutEffect(()=>{setIsMobileBreakpoint(forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win))},[win,isVisible,renderAsSheetOnMobile,forceSheetLayout]),useEffect(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(isMobileBreakPoint){let sheetElm=React.createElement(Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return React.createElement(React.Fragment,null,triggerElm,sheetElm)}let contentElm=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},React.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=React.createElement(TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}
+import styled from"@emotion/styled";import React,{useCallback,useEffect,useLayoutEffect,useMemo,useRef,useState}from"react";import{getAriaAttributes}from"../../shared/ariaAttributes";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useWindow}from"../../shared/useWindow";import breakpoints from"../../web-tokens/_breakpoints.json";import{PopoverContext}from"../Patterns/Popover/PopoverContext";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";let StyledContainer=styled("div",{target:"e2uwtlo0",label:"StyledContainer"})(()=>({borderRadius:"inherit"})),FocusTrapContent=React.forwardRef(({children},ref)=>React.createElement(StyledContainer,{ref:ref},children)),VisibilityChangeReason={triggerClick:"triggerClick",outsideClick:"outsideClick"};function getAriaPopupType(role){let popupType=String(role);return(role||(popupType="true"),"alertdialog"===role)?"dialog":popupType}function getMobileBreakpoint(renderAsSheetOnMobile,win){if(!win)return!1;let isMobileInPortrait=win.innerWidth<=breakpoints.m.value,isSmallHeight=win.innerHeight<=450,isLandscape=win.matchMedia?.("(orientation: landscape)").matches;return renderAsSheetOnMobile&&(isMobileInPortrait||isLandscape&&isSmallHeight)}export function BasePopover({placement="auto",content,children,contentPadding="m",maxWidth,externalTriggerRef,portalContainer,name="Popover",isVisible:isPopoverVisible,dismissOnOutsideClick=!0,retainOnOutsideClick,"data-e2e-test-id":dataE2eTestId,subTheme,defaultVerticalPlacement,onVisibilityChange,disableInitialFocus=!1,disableReturnFocusToTrigger=!1,renderAsSheetOnMobile=!1,forceSheetLayout=!1,role,sheetProps,...restContentProps}){let win=useWindow(),tooltipId=useMemo(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=useState(isPopoverVisible),[isMobileBreakPoint,setIsMobileBreakpoint]=useState(()=>forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win)),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,isOutsideClickOnTrigger=useRef(!1),ariaAttributes=getAriaAttributes(restContentProps),popoverContextValue=useMemo(()=>({isWithinPopover:!0,portalContainer}),[portalContainer]),contentWithProvider=React.createElement(PopoverContext.Provider,{value:popoverContextValue},content),toggleVisibility=useCallback((status,reason)=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status,reason)},[onVisibilityChange]),handleTriggerClick=useCallback(()=>{isOutsideClickOnTrigger.current?isOutsideClickOnTrigger.current=!1:toggleVisibility(!isVisible,VisibilityChangeReason.triggerClick)},[toggleVisibility,isVisible]),handleClickOutsideDeactivates=useCallback(evt=>!retainOnOutsideClick?.(evt)&&(triggerRef.current&&triggerRef.current.contains(evt.target)&&(isOutsideClickOnTrigger.current=!0),!0),[triggerRef,isOutsideClickOnTrigger,retainOnOutsideClick]),handlePostDeactivate=useCallback(()=>{toggleVisibility(!1,isOutsideClickOnTrigger.current?VisibilityChangeReason.triggerClick:VisibilityChangeReason.outsideClick)},[toggleVisibility]);useEffect(()=>{setVisible(isPopoverVisible)},[isPopoverVisible]),useLayoutEffect(()=>{setIsMobileBreakpoint(forceSheetLayout||getMobileBreakpoint(renderAsSheetOnMobile,win))},[win,isVisible,renderAsSheetOnMobile,forceSheetLayout]),useEffect(()=>{let trigger=triggerRef.current;if(trigger)return trigger.addEventListener("click",handleTriggerClick),()=>{trigger.removeEventListener("click",handleTriggerClick)}},[handleTriggerClick,triggerRef]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current,triggerTabIndex=trigger.getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0")}},[externalTriggerRef,children]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;trigger.setAttribute("aria-haspopup",getAriaPopupType(role)),trigger.setAttribute("aria-expanded",String(!!isVisible)),isVisible?trigger.setAttribute("aria-controls",tooltipId):trigger.removeAttribute("aria-controls")}},[externalTriggerRef,children,role,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,"aria-expanded":!!isVisible,...isVisible&&{"aria-controls":tooltipId},tabIndex:children.props.tabIndex??0,"aria-haspopup":getAriaPopupType(role)}):null;if(isMobileBreakPoint){let sheetElm=React.createElement(Sheet,{id:tooltipId,isVisible:isVisible,portalContainer:portalContainer,dismissOnOutsideClick:dismissOnOutsideClick,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableReturnFocusToTrigger,onClose:handlePostDeactivate,onClickOutsideDeactivates:handleClickOutsideDeactivates,role:role,...sheetProps??{},...ariaAttributes},contentWithProvider);return React.createElement(React.Fragment,null,triggerElm,sheetElm)}let contentElm=React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&handleClickOutsideDeactivates,allowOutsideClick:!0,escapeDeactivates:!0,fallbackFocus:`#${tooltipId}`,onPostDeactivate:handlePostDeactivate,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger}},React.createElement(FocusTrapContent,null,contentWithProvider)),tooltipElm=React.createElement(TooltipContent,{...restContentProps,role:role,defaultVerticalPlacement:defaultVerticalPlacement,dataDSId:name,content:contentElm,contentPadding:contentPadding,maxWidth:maxWidth,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,subTheme:subTheme,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,isHiddenOnInvisibleTrigger:!0});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}

package/build/esm/components/Tooltip/BaseTooltip.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import type { ReactElement, FocusEvent as ReactFocusEvent, MouseEvent as ReactMouseEvent } from "react";
+import React from "react";
 import type { TooltipContentProps } from "./TooltipContent";
 type BaseProps = Pick<TooltipContentProps, "placement" | "portalContainer" | "contentPadding" | "maxWidth" | "subTheme" | "onOverflowViewport" | "privateProps"> & {
     /**  Tooltip content */

package/build/esm/components/Tooltip/BaseTooltip.js

@@ -1 +1 @@
-import React,{useState,useRef,useEffect,useCallback,useMemo}from"react";import{useFocusVisible}from"@react-aria/interactions";import{TooltipContent}from"./TooltipContent";export function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=useMemo(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=useFocusVisible(),[isVisible,setVisible]=useState(!1),triggeredByEvent=useRef(null),isTooltipHovered=useRef(!1),isTriggerHovered=useRef(!1),hideTooltipTimeoutId=useRef(null),showTooltipTimeoutId=useRef(null),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=useCallback(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=useCallback(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=useCallback(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=useCallback(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=useCallback(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=useCallback(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=useCallback(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),useEffect(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=React.createElement(TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,"aria-hidden":!0,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,"hover"===triggeredByEvent.current&&toggleVisibility(!1)},privateProps:privateProps});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}
+import{useFocusVisible}from"@react-aria/interactions";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{TooltipContent}from"./TooltipContent";export function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=useMemo(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=useFocusVisible(),[isVisible,setVisible]=useState(!1),triggeredByEvent=useRef(null),isTooltipHovered=useRef(!1),isTriggerHovered=useRef(!1),hideTooltipTimeoutId=useRef(null),showTooltipTimeoutId=useRef(null),internalTriggerRef=useRef(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=useCallback(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=useCallback(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=useCallback(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=useCallback(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=useCallback(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=useCallback(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=useCallback(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);useEffect(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),useEffect(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),useEffect(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?React.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=React.createElement(TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,"aria-hidden":!0,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,"hover"===triggeredByEvent.current&&toggleVisibility(!1)},privateProps:privateProps});return React.createElement(React.Fragment,null,triggerElm,tooltipElm)}

package/build/esm/components/Tooltip/FloatingPositionedContext.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether the nearest ancestor `TooltipContent` has been measured and
+ * positioned by `useFloatingPosition`. Lets content rendered inside it (e.g.
+ * `BasePopover`'s focus trap) wait for that before activating, since a focus
+ * trap scans for focusable elements only once, on activation, and elements
+ * under a `visibility: hidden` ancestor never count as focusable.
+ */
+export declare const FloatingPositionedContext: React.Context<boolean>;

package/build/esm/components/Tooltip/FloatingPositionedContext.js

@@ -0,0 +1 @@
+import{createContext}from"react";export const FloatingPositionedContext=createContext(!0);

package/build/esm/components/Tooltip/TooltipContent.d.ts

@@ -1,8 +1,10 @@
-import type { AriaAttributes, MutableRefObject, ReactElement } from "react";
-import React from "react";
 import type { Property } from "csstype";
+import React from "react";
+import type { AriaAttributes, MutableRefObject, ReactElement } from "react";
 import type { SubThemeTypes } from "../../web-tokens/_subThemeType";
 import { type PortalProps } from "../Portal/Portal";
+export type TooltipPlacement = "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type TooltipVerticalPlacement = "top" | "bottom";
 export type TooltipPrivateProps = {
     /**
      * @internal
@@ -29,7 +31,7 @@ export type TooltipPrivateProps = {
 export type TooltipContentProps = {
     content: ReactElement;
     triggerRef: MutableRefObject<any>;
-    placement?: "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement?: TooltipPlacement;
     dataE2eTestId?: string;
     dataDSId: string;
     isVisible?: boolean;
@@ -39,7 +41,7 @@ export type TooltipContentProps = {
     contentPadding?: "s" | "m";
     subTheme?: SubThemeTypes;
     maxWidth?: Property.MaxWidth | number;
-    defaultVerticalPlacement?: TooltipStyle["verticalPlacement"];
+    defaultVerticalPlacement?: TooltipVerticalPlacement;
     hideArrow?: boolean;
     /** Sets css visibility hidden when trigger is scrolled out of view */
     isHiddenOnInvisibleTrigger?: boolean;
@@ -49,12 +51,5 @@ export type TooltipContentProps = {
     onOverflowViewport?: (triggerRect: DOMRect, tooltipRect: DOMRect, viewportHeight: number) => void;
     privateProps?: TooltipPrivateProps;
 } & Pick<PortalProps, "portalContainer"> & AriaAttributes;
-export type TooltipStyle = {
-    top: number;
-    left: number;
-    horizontalPlacement: "left" | "right" | "center";
-    verticalPlacement: "top" | "bottom";
-    isSidePlacement?: boolean;
-};
 /** This component is used to display the overlay for both Toggletip and Tooltip components */
 export declare function TooltipContent({ placement, content, tooltipId, triggerRef, portalContainer, dataE2eTestId, dataDSId, isVisible, "aria-hidden": ariaHidden, role, tabIndex, contentPadding, maxWidth, subTheme, defaultVerticalPlacement, hideArrow, isHiddenOnInvisibleTrigger, onTooltipPointerEnter, onTooltipPointerLeave, onOverflowViewport, privateProps, ...ariaAttributes }: TooltipContentProps): React.ReactElement;

package/build/esm/components/Tooltip/TooltipContent.js

@@ -1 +1 @@
-import React,{useCallback,useEffect,useLayoutEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useDocument}from"../../shared/useDocument";import{useWindow}from"../../shared/useWindow";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{ANIMATION_DISTANCE,ARROW_SIZE,ARROW_SIZE_BIG,DISTANCE_FROM_TRIGGER,getArrowOffset,getTooltipStyle}from"./utils";let StyledContainer=styled("div",{target:"e1uqkw9f0",label:"StyledContainer"})(({theme,horizontalPlacement,verticalPlacement,maxWidth,contentPadding,subTheme,isHidden,isSidePlacement})=>{let animationDistance="top"===verticalPlacement?`${ANIMATION_DISTANCE}px`:`-${ANIMATION_DISTANCE}px`,animation=keyframes({to:{opacity:theme.variables.opacity.visible,...!isSidePlacement&&{transform:"center"===horizontalPlacement?`translate(-50%, ${animationDistance})`:`translateY(${animationDistance})`}}}),contentPaddingMap={s:theme.variables.size.spacing.xxs,m:theme.variables.size.spacing.s},invertedSubThemeStyles={padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,...contentPadding&&{padding:contentPaddingMap[contentPadding]}};return{position:"absolute",zIndex:usePortalChildZIndex(theme.variables.zIndex.tooltip),opacity:theme.variables.opacity.hidden,animation:`200ms ease-out forwards ${animation}`,maxWidth,width:"max-content",boxSizing:"border-box",backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,borderRadius:subTheme?theme.variables.size.borderRadius.xs:theme.variables.size.borderRadius.s,...isHidden&&{visibility:"hidden"},...!!subTheme&&invertedSubThemeStyles,..."center"===horizontalPlacement&&{transform:"translate(-50%)"},...!subTheme&&{":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}}),StyledArrow=styled("div",{target:"e1uqkw9f1",label:"StyledArrow"})(({theme,subTheme,verticalPlacement,horizontalPlacement,size=ARROW_SIZE})=>{let offset=getArrowOffset(size),adjustmentForShadow=+!subTheme,arrowContainerHeight=size+DISTANCE_FROM_TRIGGER,arrowSideLength=Math.sqrt(size**2+(size+adjustmentForShadow)**2);return{position:"absolute",width:40,height:arrowContainerHeight,zIndex:1,overflow:"hidden",..."top"===verticalPlacement&&{top:`calc(100% - ${adjustmentForShadow}px)`},..."bottom"===verticalPlacement&&{top:`-${arrowContainerHeight-adjustmentForShadow}px`},..."center"===horizontalPlacement&&{left:"50%",transform:"translate(-50%)"},..."right"===horizontalPlacement&&{left:`${offset-(20-size)}px`},..."left"===horizontalPlacement&&{right:`${offset-(20-size)}px`},"&::after":{content:'" "',position:"absolute",top:"top"===verticalPlacement?0:"100%",left:"50%",width:arrowSideLength,height:arrowSideLength,backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,transform:"translate(-50%, -50%) rotate(45deg)",...!subTheme&&{boxShadow:theme.values.elevation[3]}}}}),initialStyle={top:0,left:0,verticalPlacement:"top",horizontalPlacement:"center"},lastTooltipHideTimestamp=0;export function TooltipContent({placement="auto",content,tooltipId,triggerRef,portalContainer,dataE2eTestId,dataDSId,isVisible,"aria-hidden":ariaHidden,role,tabIndex,contentPadding,maxWidth=224,subTheme,defaultVerticalPlacement,hideArrow=!1,isHiddenOnInvisibleTrigger=!1,onTooltipPointerEnter,onTooltipPointerLeave,onOverflowViewport,privateProps,...ariaAttributes}){let animationDuration,[style,setStyle]=useState(initialStyle),[isHidden,setIsHidden]=useState(!1),tooltipRef=useRef(null),isOverflowCallbackCalledRef=useRef(!1),document=useDocument(),window=useWindow(),{placement:sidePlacement,offset:sideOffset,maxWidth:privateMaxWidth}=privateProps??{},arrowSize=useMemo(()=>hideArrow?0:subTheme?ARROW_SIZE:ARROW_SIZE_BIG,[subTheme,hideArrow]),handleViewportOverflow=useCallback((triggerRect,tooltipRect,viewportHeight)=>{isOverflowCallbackCalledRef.current||(onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),isOverflowCallbackCalledRef.current=!0)},[onOverflowViewport,isOverflowCallbackCalledRef]),calculateStyle=useCallback(()=>{triggerRef.current&&tooltipRef.current&&setStyle(getTooltipStyle({placement,defaultVerticalPlacement,triggerRef,tooltipRef,document,window,arrowSize,onOverflowViewport:handleViewportOverflow,sidePlacement,sideOffset}))},[triggerRef,tooltipRef,document,window,placement,arrowSize,defaultVerticalPlacement,handleViewportOverflow,sidePlacement,sideOffset]);if(useLayoutEffect(()=>{isVisible&&calculateStyle()},[isVisible,calculateStyle,contentPadding]),useEffect(()=>(isVisible&&tooltipRef.current?window.addEventListener("resize",calculateStyle):isVisible||(lastTooltipHideTimestamp=Date.now()),()=>{window.removeEventListener("resize",calculateStyle)}),[isVisible,calculateStyle,window,tooltipRef]),useEffect(()=>{let resizeObserver;return isVisible&&tooltipRef.current&&"undefined"!=typeof ResizeObserver&&(resizeObserver=new ResizeObserver(entries=>{entries.forEach(entry=>{entry.contentRect.width>0&&entry.contentRect.height>0&&calculateStyle()})})).observe(tooltipRef.current),()=>{resizeObserver&&resizeObserver.disconnect()}},[isVisible,calculateStyle,tooltipRef]),useEffect(()=>{let requestAnimationFrameId,prevRect;if(!isVisible)return;let recalculatePosition=()=>{let nextRect=triggerRef.current?.getBoundingClientRect();prevRect&&nextRect&&(prevRect.x!==nextRect.x||prevRect.y!==nextRect.y||prevRect.width!==nextRect.width||prevRect.height!==nextRect.height)&&calculateStyle(),prevRect=nextRect,requestAnimationFrameId=requestAnimationFrame(recalculatePosition)};return requestAnimationFrameId=requestAnimationFrame(recalculatePosition),()=>cancelAnimationFrame(requestAnimationFrameId)},[isVisible,calculateStyle,triggerRef]),useEffect(()=>{isOverflowCallbackCalledRef.current=!1},[isVisible,isOverflowCallbackCalledRef]),useEffect(()=>{let observer;return isHiddenOnInvisibleTrigger&&triggerRef.current&&isVisible&&"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{let rect=entry.boundingClientRect;(rect?.width!==0||rect?.height!==0)&&setIsHidden(!entry.isIntersecting)}),{root:null,threshold:.99})).observe(triggerRef.current),()=>{observer&&observer.disconnect()}},[triggerRef,isVisible,isHiddenOnInvisibleTrigger]),!isVisible)return null;let tooltipElm=React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDSId,style:{top:style.top,left:style.left,animationDuration:(animationDuration="200ms",lastTooltipHideTimestamp&&Date.now()-lastTooltipHideTimestamp<700&&(animationDuration="0ms"),animationDuration)},ref:tooltipRef,id:tooltipId,role:role,...ariaAttributes,"aria-hidden":ariaHidden,subTheme:subTheme,tabIndex:tabIndex,horizontalPlacement:style.horizontalPlacement,verticalPlacement:style.verticalPlacement,maxWidth:privateMaxWidth??maxWidth,contentPadding:contentPadding,isHidden:isHidden,isSidePlacement:style.isSidePlacement,onPointerEnter:onTooltipPointerEnter,onPointerLeave:onTooltipPointerLeave},content,!hideArrow&&!style.isSidePlacement&&React.createElement(StyledArrow,{"data-e2e-test-id":`${dataE2eTestId}_arrow`,subTheme:subTheme,horizontalPlacement:style.horizontalPlacement,verticalPlacement:style.verticalPlacement,size:arrowSize})),wrapperElm=subTheme?React.createElement(SubThemeProvider,{name:subTheme},tooltipElm):tooltipElm;return React.createElement(Portal,{portalContainer:portalContainer},wrapperElm)}
+import{keyframes}from"@emotion/react";import styled from"@emotion/styled";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Portal,usePortalChildZIndex}from"../Portal/Portal";import{SubThemeProvider}from"../SubThemeProvider/SubThemeProvider";import{useFloatingPosition}from"../Utilities/FloatingPosition/useFloatingPosition";import{FloatingPositionedContext}from"./FloatingPositionedContext";import{ANIMATION_DISTANCE,ARROW_SIZE,ARROW_SIZE_BIG,createOverflowViewportReporter,DISTANCE_FROM_TRIGGER,getPlacementSide,getTooltipOffsetOptions,SIDE_PLACEMENT_SIDE,sidePlacementOffset,toFloatingAnchor,toFloatingPlacement}from"./utils";let StyledContainer=styled("div",{target:"e1l7l62c0",label:"StyledContainer"})(({theme,side,maxWidth,contentPadding,subTheme,isHidden,isSidePlacement})=>{let zIndex=usePortalChildZIndex(theme.variables.zIndex.tooltip),animationDistance="top"===side?`${-ANIMATION_DISTANCE}px`:`${ANIMATION_DISTANCE}px`,animation=keyframes({from:{opacity:theme.variables.opacity.hidden,...!isSidePlacement&&{transform:`translateY(${animationDistance})`}},to:{opacity:theme.variables.opacity.visible,...!isSidePlacement&&{transform:"translateY(0)"}}}),contentPaddingMap={s:theme.variables.size.spacing.xxs,m:theme.variables.size.spacing.s},invertedSubThemeStyles={padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,...contentPadding&&{padding:contentPaddingMap[contentPadding]}};return{zIndex,opacity:theme.variables.opacity.hidden,animation:`200ms ease-out forwards ${animation}`,maxWidth,width:"max-content",boxSizing:"border-box",backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,borderRadius:subTheme?theme.variables.size.borderRadius.xs:theme.variables.size.borderRadius.s,...isHidden&&{visibility:"hidden"},...!!subTheme&&invertedSubThemeStyles,...!subTheme&&{":after":{content:'" "',position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",borderRadius:"inherit",boxShadow:theme.values.elevation[3]}}}}),StyledArrow=styled("div",{target:"e1l7l62c1",label:"StyledArrow"})(({theme,subTheme,side,size=ARROW_SIZE,arrowOffsetLeft})=>{let adjustmentForShadow=+!subTheme,arrowContainerHeight=size+DISTANCE_FROM_TRIGGER,arrowSideLength=Math.sqrt(size**2+(size+adjustmentForShadow)**2);return{position:"absolute",left:arrowOffsetLeft,width:40,height:arrowContainerHeight,zIndex:1,overflow:"hidden",..."top"===side&&{top:`calc(100% - ${adjustmentForShadow}px)`},..."bottom"===side&&{top:`-${arrowContainerHeight-adjustmentForShadow}px`},"&::after":{content:'" "',position:"absolute",top:"top"===side?0:"100%",left:"50%",width:arrowSideLength,height:arrowSideLength,backgroundColor:subTheme?theme.values.color.background.primary.default:theme.values.color.background.elevated.default,transform:"translate(-50%, -50%) rotate(45deg)",...!subTheme&&{boxShadow:theme.values.elevation[3]}}}}),lastTooltipHideTimestamp=0;export function TooltipContent({placement="auto",content,tooltipId,triggerRef,portalContainer,dataE2eTestId,dataDSId,isVisible,"aria-hidden":ariaHidden,role,tabIndex,contentPadding,maxWidth=224,subTheme,defaultVerticalPlacement,hideArrow=!1,isHiddenOnInvisibleTrigger=!1,onTooltipPointerEnter,onTooltipPointerLeave,onOverflowViewport,privateProps,...ariaAttributes}){let animationDuration,[isHidden,setIsHidden]=useState(!1),arrowRef=useRef(null),isOverflowCallbackCalledRef=useRef(!1),{placement:sidePlacement,offset:sideOffset=sidePlacementOffset,maxWidth:privateMaxWidth}=privateProps??{},arrowSize=useMemo(()=>hideArrow?0:subTheme?ARROW_SIZE:ARROW_SIZE_BIG,[subTheme,hideArrow]),handleViewportOverflow=useCallback((triggerRect,tooltipRect,viewportHeight)=>{isOverflowCallbackCalledRef.current||(onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),isOverflowCallbackCalledRef.current=!0)},[onOverflowViewport,isOverflowCallbackCalledRef]),overflowMiddleware=useMemo(()=>"auto"===placement?[createOverflowViewportReporter(handleViewportOverflow)]:void 0,[placement,handleViewportOverflow]),{placement:preferredPlacement,fallbackPlacements}=useMemo(()=>toFloatingPlacement({placement,defaultVerticalPlacement,sidePlacement}),[placement,defaultVerticalPlacement,sidePlacement]),offset=useMemo(()=>getTooltipOffsetOptions({arrowSize,sideOffset}),[arrowSize,sideOffset]),anchorRef=useRef(null),anchorSourceRef=useRef(null);anchorSourceRef.current!==triggerRef.current&&(anchorSourceRef.current=triggerRef.current,anchorRef.current=toFloatingAnchor(triggerRef.current));let{setFloating,floatingStyles,placement:resolvedPlacement,isPositioned,middlewareData}=useFloatingPosition({anchorRef,placement:preferredPlacement,offset,flip:{fallbackPlacements},arrowRef:hideArrow?void 0:arrowRef,disableTransform:!0,trackAnimationFrame:!0,isOpen:!!isVisible,extraMiddleware:overflowMiddleware});if(useEffect(()=>{isVisible||(lastTooltipHideTimestamp=Date.now())},[isVisible]),useEffect(()=>{isOverflowCallbackCalledRef.current=!1},[isVisible,isOverflowCallbackCalledRef]),useEffect(()=>{let observer;return isHiddenOnInvisibleTrigger&&triggerRef.current&&isVisible&&"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{let rect=entry.boundingClientRect;(rect?.width!==0||rect?.height!==0)&&setIsHidden(!entry.isIntersecting)}),{root:null,threshold:.99})).observe(triggerRef.current),()=>{observer&&observer.disconnect()}},[triggerRef,isVisible,isHiddenOnInvisibleTrigger]),!isVisible)return null;let side=getPlacementSide(resolvedPlacement),isSidePlacement=side===SIDE_PLACEMENT_SIDE,tooltipElm=React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDSId,"data-placement":resolvedPlacement,style:{...floatingStyles,animationDuration:(animationDuration="200ms",lastTooltipHideTimestamp&&Date.now()-lastTooltipHideTimestamp<700&&(animationDuration="0ms"),animationDuration)},ref:setFloating,id:tooltipId,role:role,...ariaAttributes,"aria-hidden":ariaHidden,subTheme:subTheme,tabIndex:tabIndex,side:side,maxWidth:privateMaxWidth??maxWidth,contentPadding:contentPadding,isHidden:isHidden||!isPositioned,isSidePlacement:isSidePlacement,onPointerEnter:onTooltipPointerEnter,onPointerLeave:onTooltipPointerLeave},React.createElement(FloatingPositionedContext.Provider,{value:isPositioned},content),!hideArrow&&side!==SIDE_PLACEMENT_SIDE&&React.createElement(StyledArrow,{ref:arrowRef,"data-e2e-test-id":`${dataE2eTestId}_arrow`,subTheme:subTheme,side:side,size:arrowSize,arrowOffsetLeft:middlewareData.arrow?.x})),wrapperElm=subTheme?React.createElement(SubThemeProvider,{name:subTheme},tooltipElm):tooltipElm;return React.createElement(Portal,{portalContainer:portalContainer},wrapperElm)}

package/build/esm/components/Tooltip/utils.d.ts

@@ -1,6 +1,6 @@
-import type { RefObject } from "react";
-import type { TooltipProps } from "./Tooltip";
-import type { TooltipStyle, TooltipContentProps, TooltipPrivateProps } from "./TooltipContent";
+import type { OffsetOptions } from "@floating-ui/react-dom";
+import type { Middleware, Placement, VirtualElement } from "../Utilities/FloatingPosition/useFloatingPosition";
+import type { TooltipContentProps, TooltipPlacement, TooltipPrivateProps, TooltipVerticalPlacement } from "./TooltipContent";
 export declare const DISTANCE_FROM_TRIGGER = 4;
 export declare const ANIMATION_DISTANCE = 8;
 export declare const ARROW_SIZE = 6;
@@ -8,21 +8,65 @@ export declare const ARROW_SIZE_BIG = 8;
 /** TODO: remove temporary side placement. Matches the gap top/bottom tooltips settle at. */
 export declare const sidePlacementOffset: number;
 export declare const getArrowOffset: (size: number) => number;
-type GetTooltipStyleParams = {
-    placement: TooltipProps["placement"];
-    defaultVerticalPlacement?: TooltipStyle["verticalPlacement"];
-    triggerRef: RefObject<any>;
-    tooltipRef: RefObject<any>;
-    document: Document;
-    window: Window;
-    arrowSize: number;
-    onOverflowViewport: TooltipContentProps["onOverflowViewport"];
-    /** TODO: remove temporary side placement, both fields */
+export type FloatingPlacementConfig = {
+    placement: Placement;
+    /** The placements `flip` may fall back to, in order of preference. */
+    fallbackPlacements: Placement[];
+};
+type ToFloatingPlacementParams = {
+    placement: TooltipPlacement | undefined;
+    defaultVerticalPlacement: TooltipVerticalPlacement | undefined;
+    /** TODO: remove temporary side placement */
     sidePlacement?: TooltipPrivateProps["placement"];
-    sideOffset?: number;
 };
 /**
- * Get tooltip position and width
+ * Resolves the DS placement to the preferred floating-ui placement plus its
+ * flip fallbacks. Tooltips only ever move between the top and bottom side; an
+ * explicit placement may only flip to the opposite side with the same
+ * alignment, while automatic placement may also switch alignment.
+ *
+ * A side placement takes precedence and falls back to whatever the DS
+ * placement resolved to, so it lands beside the trigger when there is room and
+ * behaves like an ordinary tooltip when there is not.
+ */
+export declare const toFloatingPlacement: ({ placement, defaultVerticalPlacement, sidePlacement, }: ToFloatingPlacementParams) => FloatingPlacementConfig;
+/**
+ * The side of the trigger the resolved floating-ui placement puts the tooltip
+ * on. `"right"` only ever comes from the temporary side placement.
+ * TODO: drop `"right"` with the temporary side placement
+ */
+export type TooltipPlacementSide = TooltipVerticalPlacement | "right";
+/** TODO: remove temporary side placement */
+export declare const SIDE_PLACEMENT_SIDE: "right";
+/** The side of the trigger the resolved floating-ui placement puts the tooltip on. */
+export declare const getPlacementSide: (placement: Placement) => TooltipPlacementSide;
+type TooltipOffsetParams = {
+    arrowSize: number;
+    /**
+     * Gap between trigger and a side-placed tooltip.
+     * TODO: remove temporary side placement
+     */
+    sideOffset: number;
+};
+/**
+ * Distance between trigger and tooltip, plus — for aligned placements — the
+ * offset that anchors the tooltip's near edge to the trigger center instead of
+ * floating-ui's default trigger-edge alignment, keeping the arrow (which sits
+ * `getArrowOffset` + arrow size from the tooltip edge) pointed at the trigger
+ * center. With no arrow the tooltip stays edge-aligned, as before.
+ */
+export declare const getTooltipOffsetOptions: ({ arrowSize, sideOffset }: TooltipOffsetParams) => OffsetOptions;
+type OnOverflowViewport = NonNullable<TooltipContentProps["onOverflowViewport"]>;
+/**
+ * Reproduces the legacy `onOverflowViewport` contract: reports when the
+ * tooltip fits neither fully above nor fully below the trigger.
+ */
+export declare const createOverflowViewportReporter: (onOverflowViewport: OnOverflowViewport) => Middleware;
+/**
+ * Normalizes what consumers put into `triggerRef` — a DOM element, or a
+ * `Range` (RangePopover, UserHighlightTooltip) — into a floating-ui anchor.
+ * A `Range` is wrapped as a virtual element with a `contextElement` so
+ * `autoUpdate` can attach scroll listeners to the right ancestors.
  */
-export declare function getTooltipStyle({ placement, defaultVerticalPlacement, triggerRef, tooltipRef, document, window, arrowSize, onOverflowViewport, sidePlacement, sideOffset, }: GetTooltipStyleParams): TooltipStyle;
+export declare const toFloatingAnchor: (trigger: unknown) => Element | VirtualElement | null;
 export {};

package/build/esm/components/Tooltip/utils.js

@@ -1 +1 @@
-import{getSideTooltipStyle}from"./getSideTooltipStyle";export const DISTANCE_FROM_TRIGGER=4;export const ANIMATION_DISTANCE=8;export const ARROW_SIZE=6;export const ARROW_SIZE_BIG=8;export const sidePlacementOffset=10;export const getArrowOffset=size=>2*size;export function getTooltipStyle({placement,defaultVerticalPlacement="top",triggerRef,tooltipRef,document,window,arrowSize,onOverflowViewport,sidePlacement,sideOffset=10}){let triggerRect=triggerRef.current.getBoundingClientRect(),tooltipRect=tooltipRef.current.getBoundingClientRect(),viewportWidth=document.documentElement.clientWidth,viewportHeight=document.documentElement.clientHeight;if("right-top"===sidePlacement){let fitsRightOfTrigger=triggerRect.right+sideOffset+tooltipRect.width<=viewportWidth,fitsBelowTriggerTop=triggerRect.top+tooltipRect.height<=viewportHeight;if(fitsRightOfTrigger&&fitsBelowTriggerTop)return getSideTooltipStyle({triggerRect,offset:sideOffset,window})}let top=0,left=0,verticalPlacement=defaultVerticalPlacement,horizontalPlacement="center",arrowOffset=getArrowOffset(arrowSize),tooltipMargin=arrowSize+8+4;switch(placement){case"top":case"bottom":verticalPlacement=placement;break;case"top-left":case"top-right":case"bottom-left":case"bottom-right":{let placements=placement.split("-");verticalPlacement=placements[0],horizontalPlacement=placements[1];break}default:{let canPlaceAboveTrigger=triggerRect.top>=tooltipRect.height,canPlaceBelowTrigger=triggerRect.bottom+tooltipRect.height<viewportHeight;canPlaceBelowTrigger||canPlaceAboveTrigger||onOverflowViewport?.(triggerRect,tooltipRect,viewportHeight),"top"===verticalPlacement&&!canPlaceAboveTrigger&&canPlaceBelowTrigger?verticalPlacement="bottom":"bottom"!==verticalPlacement||canPlaceBelowTrigger||(verticalPlacement="top"),triggerRect.left>=tooltipRect.width/2?triggerRect.left+triggerRect.width/2+tooltipRect.width/2>=viewportWidth&&(horizontalPlacement="left"):horizontalPlacement="right"}}switch(top="top"===verticalPlacement?triggerRect.top-tooltipRect.height-tooltipMargin:triggerRect.bottom+tooltipMargin,horizontalPlacement){case"left":left=arrowSize?triggerRect.left+triggerRect.width/2-tooltipRect.width+arrowOffset+arrowSize:triggerRect.right-tooltipRect.width;break;case"right":left=arrowSize?triggerRect.left+triggerRect.width/2-arrowOffset-arrowSize:triggerRect.left;break;default:left=triggerRect.left+triggerRect.width/2}return{top:top+window.scrollY,left:left+window.scrollX,horizontalPlacement,verticalPlacement}}
+export const DISTANCE_FROM_TRIGGER=4;export const ANIMATION_DISTANCE=8;export const ARROW_SIZE=6;export const ARROW_SIZE_BIG=8;export const sidePlacementOffset=10;export const getArrowOffset=size=>2*size;let START_SUFFIX="-start",END_SUFFIX="-end",SIDE_PLACEMENT="right-start",DS_TO_FLOATING_PLACEMENT={top:"top",bottom:"bottom","top-left":`top${END_SUFFIX}`,"top-right":`top${START_SUFFIX}`,"bottom-left":`bottom${END_SUFFIX}`,"bottom-right":`bottom${START_SUFFIX}`},OPPOSITE_SIDE={top:"bottom",bottom:"top"},sideWithAlignments=side=>[side,`${side}${START_SUFFIX}`,`${side}${END_SUFFIX}`];export const toFloatingPlacement=({placement,defaultVerticalPlacement,sidePlacement})=>{let isAutomatic=!placement||"auto"===placement,preferred=isAutomatic?defaultVerticalPlacement??"top":DS_TO_FLOATING_PLACEMENT[placement],[side,alignment]=preferred.split("-"),oppositeSide=OPPOSITE_SIDE[side],resolved=isAutomatic?{placement:preferred,fallbackPlacements:[...sideWithAlignments(side).slice(1),...sideWithAlignments(oppositeSide)]}:{placement:preferred,fallbackPlacements:[alignment?`${oppositeSide}-${alignment}`:oppositeSide]};return"right-top"===sidePlacement?{placement:SIDE_PLACEMENT,fallbackPlacements:[resolved.placement,...resolved.fallbackPlacements]}:resolved};export const SIDE_PLACEMENT_SIDE="right";export const getPlacementSide=placement=>placement.split("-")[0];export const getTooltipOffsetOptions=({arrowSize,sideOffset})=>({rects,placement})=>{if(placement===SIDE_PLACEMENT)return{mainAxis:sideOffset};let mainAxis=arrowSize+4;return(placement.endsWith(START_SUFFIX)||placement.endsWith(END_SUFFIX))&&0!==arrowSize?{mainAxis,alignmentAxis:rects.reference.width/2-getArrowOffset(arrowSize)-arrowSize}:{mainAxis}};export const createOverflowViewportReporter=onOverflowViewport=>({name:"reportOverflowViewport",fn({elements}){let triggerRect=elements.reference.getBoundingClientRect(),tooltipRect=elements.floating.getBoundingClientRect(),viewportHeight=elements.floating.ownerDocument.documentElement.clientHeight,canPlaceAboveTrigger=triggerRect.top>=tooltipRect.height,canPlaceBelowTrigger=triggerRect.bottom+tooltipRect.height<viewportHeight;return canPlaceAboveTrigger||canPlaceBelowTrigger||onOverflowViewport(triggerRect,tooltipRect,viewportHeight),{}}});export const toFloatingAnchor=trigger=>{if(!trigger)return null;if("undefined"!=typeof Range&&trigger instanceof Range){let container=trigger.commonAncestorContainer;return{getBoundingClientRect:()=>trigger.getBoundingClientRect(),getClientRects:()=>trigger.getClientRects(),contextElement:container instanceof Element?container:container.parentElement??void 0}}return trigger};

package/build/esm/components/Utilities/FloatingPosition/useFloatingPosition.d.ts

@@ -1,20 +1,53 @@
 import type { CSSProperties, RefObject } from "react";
-import type { OffsetOptions, Placement, Strategy } from "@floating-ui/react-dom";
+import type { Middleware, MiddlewareData, OffsetOptions, Placement, Strategy, VirtualElement } from "@floating-ui/react-dom";
 export type { ViewportPlacement } from "./utils";
-export type { Placement } from "@floating-ui/react-dom";
+export type { Middleware, MiddlewareData, Placement, VirtualElement, } from "@floating-ui/react-dom";
+export type FlipOptions = {
+    /** Restrict which placements `flip` may fall back to. */
+    fallbackPlacements?: Placement[];
+};
 /** Position relative to an anchor element. */
 type AnchorModeProps = {
     mode?: "anchor";
-    /** The element to position the floating element against. */
-    anchorRef: RefObject<HTMLElement | null>;
+    /**
+     * The element to position the floating element against. Also accepts a
+     * virtual element (anything with `getBoundingClientRect`, e.g. a `Range`
+     * wrapper) — set its `contextElement` so scroll/resize tracking works.
+     */
+    anchorRef: RefObject<Element | VirtualElement | null>;
     /** Side (and optional alignment) to place the element on. Default `"bottom"`. */
     placement?: Placement;
     /** Gap between the anchor and the floating element. Default `0`. */
     offset?: OffsetOptions;
-    /** Flip to the opposite side when it would overflow. Default `true`. */
-    flip?: boolean;
+    /**
+     * Flip to the opposite side when it would overflow. Default `true`.
+     * Pass an options object to restrict the fallback placements.
+     */
+    flip?: boolean | FlipOptions;
     /** Slide along the axis to stay in view near edges. Default `true`. */
     shift?: boolean;
+    /**
+     * Arrow element to keep pointed at the anchor; its offset along the
+     * floating element is returned in `middlewareData.arrow`.
+     */
+    arrowRef?: RefObject<HTMLElement | null>;
+    /** Minimum distance the arrow keeps from the floating element's corners. Default `0`. */
+    arrowPadding?: number;
+    /**
+     * Emit `top`/`left` instead of a `transform` in `floatingStyles`, freeing
+     * `transform` for the caller's own animations. Default `false` (transform).
+     */
+    disableTransform?: boolean;
+    /**
+     * Reposition every animation frame while open — needed when the anchor moves
+     * without scroll/resize events (CSS transforms, canvas pan). Default `false`.
+     */
+    trackAnimationFrame?: boolean;
+    /**
+     * Extra floating-ui middleware, run after the built-ins (before `arrow`).
+     * Keep the array referentially stable (module-level or memoized).
+     */
+    extraMiddleware?: Middleware[];
 };
 /**
  * The viewport spot to pin to, expressed as separate axes. At least one axis is
@@ -54,6 +87,8 @@ export type UseFloatingPositionReturn = {
     strategy: Strategy;
     /** `false` until the element has been measured — gate visibility on this to avoid a flash. */
     isPositioned: boolean;
+    /** Per-middleware positioning data, e.g. `middlewareData.arrow` for the arrow offset. */
+    middlewareData: MiddlewareData;
     /** Imperatively recompute the position. */
     update: () => void;
 };

package/build/esm/components/Utilities/FloatingPosition/useFloatingPosition.js

@@ -1 +1 @@
-import{useLayoutEffect,useMemo}from"react";import{useFloating,autoUpdate,offset as offsetMiddleware,flip as flipMiddleware,shift as shiftMiddleware}from"@floating-ui/react-dom";import{useWindow}from"../../../shared/useWindow";import{useDocument}from"../../../shared/useDocument";import{axesToViewportPlacement,getViewportReferenceRect,viewportToFloatingPlacement}from"./utils";export function useFloatingPosition(props){let{isOpen=!0}=props,isViewportMode="viewport"===props.mode,window=useWindow(),document=useDocument(),{anchorPlacement,viewportPlacement,anchorOffset,viewportOffset,flipEnabled,shiftEnabled,anchorRef}="viewport"===props.mode?{anchorPlacement:void 0,viewportPlacement:axesToViewportPlacement(props.positionY,props.positionX),anchorOffset:0,viewportOffset:props.offset??0,flipEnabled:!1,shiftEnabled:!1,anchorRef:null}:{anchorPlacement:props.placement??"bottom",viewportPlacement:void 0,anchorOffset:props.offset??0,viewportOffset:0,flipEnabled:!1!==props.flip,shiftEnabled:!1!==props.shift,anchorRef:props.anchorRef??null},middleware=useMemo(()=>isViewportMode?[]:[offsetMiddleware(anchorOffset),...flipEnabled?[flipMiddleware()]:[],...shiftEnabled?[shiftMiddleware({padding:8})]:[]],[isViewportMode,anchorOffset,flipEnabled,shiftEnabled]),virtualReference=useMemo(()=>viewportPlacement?{getBoundingClientRect:()=>getViewportReferenceRect(viewportPlacement,document&&document.documentElement.clientWidth||window&&window.innerWidth||0,window&&window.innerHeight||document&&document.documentElement.clientHeight||0,viewportOffset)}:null,[viewportPlacement,viewportOffset,window,document]),{refs,floatingStyles,placement,strategy,isPositioned,update}=useFloating({open:isOpen,strategy:isViewportMode?"fixed":"absolute",placement:viewportPlacement?viewportToFloatingPlacement(viewportPlacement):anchorPlacement,middleware,whileElementsMounted:isOpen?autoUpdate:void 0});return useLayoutEffect(()=>{virtualReference?refs.setReference(virtualReference):anchorRef&&refs.setReference(anchorRef.current)},[virtualReference,anchorRef,refs,isOpen]),{setFloating:refs.setFloating,floatingStyles,placement,strategy,isPositioned,update}}
+import{useLayoutEffect,useMemo}from"react";import{useFloating,autoUpdate,offset as offsetMiddleware,flip as flipMiddleware,shift as shiftMiddleware,arrow as arrowMiddleware}from"@floating-ui/react-dom";import{useWindow}from"../../../shared/useWindow";import{useDocument}from"../../../shared/useDocument";import{axesToViewportPlacement,getViewportReferenceRect,viewportToFloatingPlacement}from"./utils";let NO_EXTRA_MIDDLEWARE=[];export function useFloatingPosition(props){let{isOpen=!0}=props,isViewportMode="viewport"===props.mode,window=useWindow(),document=useDocument(),{anchorPlacement,viewportPlacement,anchorOffset,viewportOffset,flipEnabled,flipFallbackPlacements,shiftEnabled,anchorRef,arrowRef,arrowPadding,disableTransform,trackAnimationFrame,extraMiddleware}="viewport"===props.mode?{anchorPlacement:void 0,viewportPlacement:axesToViewportPlacement(props.positionY,props.positionX),anchorOffset:0,viewportOffset:props.offset??0,flipEnabled:!1,flipFallbackPlacements:void 0,shiftEnabled:!1,anchorRef:null,arrowRef:null,arrowPadding:0,disableTransform:!1,trackAnimationFrame:!1,extraMiddleware:NO_EXTRA_MIDDLEWARE}:{anchorPlacement:props.placement??"bottom",viewportPlacement:void 0,anchorOffset:props.offset??0,viewportOffset:0,flipEnabled:!1!==props.flip,flipFallbackPlacements:"object"==typeof props.flip?props.flip.fallbackPlacements:void 0,shiftEnabled:!1!==props.shift,anchorRef:props.anchorRef??null,arrowRef:props.arrowRef??null,arrowPadding:props.arrowPadding??0,disableTransform:props.disableTransform??!1,trackAnimationFrame:props.trackAnimationFrame??!1,extraMiddleware:props.extraMiddleware??NO_EXTRA_MIDDLEWARE},middleware=useMemo(()=>isViewportMode?[]:[offsetMiddleware(anchorOffset),...flipEnabled?[flipMiddleware({fallbackPlacements:flipFallbackPlacements})]:[],...shiftEnabled?[shiftMiddleware({padding:8})]:[],...extraMiddleware,...arrowRef?[arrowMiddleware({element:arrowRef,padding:arrowPadding})]:[]],[isViewportMode,anchorOffset,flipEnabled,flipFallbackPlacements,shiftEnabled,arrowRef,arrowPadding,extraMiddleware]),virtualReference=useMemo(()=>viewportPlacement?{getBoundingClientRect:()=>getViewportReferenceRect(viewportPlacement,document&&document.documentElement.clientWidth||window&&window.innerWidth||0,window&&window.innerHeight||document&&document.documentElement.clientHeight||0,viewportOffset)}:null,[viewportPlacement,viewportOffset,window,document]),{refs,elements:{reference:referenceElement,floating:floatingElement},floatingStyles,placement,strategy,isPositioned,middlewareData,update}=useFloating({open:isOpen,strategy:isViewportMode?"fixed":"absolute",transform:!disableTransform,placement:viewportPlacement?viewportToFloatingPlacement(viewportPlacement):anchorPlacement,middleware});return useLayoutEffect(()=>{if(isOpen&&referenceElement&&floatingElement)return autoUpdate(referenceElement,floatingElement,update,{animationFrame:trackAnimationFrame})},[isOpen,trackAnimationFrame,referenceElement,floatingElement,update]),useLayoutEffect(()=>{virtualReference?refs.setReference(virtualReference):anchorRef&&refs.setReference(anchorRef.current)}),{setFloating:refs.setFloating,floatingStyles,placement,strategy,isPositioned,middlewareData,update}}

package/build/esm/shared/FocusTrapWrapper.js

@@ -1 +1 @@
-import React,{useEffect,useRef}from"react";import FocusTrap from"focus-trap-react";export const FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=useRef(!1),isEscaped=useRef(!1),{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=useRef(onPostDeactivate),clickOutsideDeactivatesRef=useRef(clickOutsideDeactivates),escapeDeactivatesRef=useRef(escapeDeactivates);return useEffect(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),useEffect(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),useEffect(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]),React.createElement(FocusTrap,{active:active,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},children)};
+import React,{useContext,useEffect,useRef}from"react";import FocusTrap from"focus-trap-react";import{FloatingPositionedContext}from"../components/Tooltip/FloatingPositionedContext";export const FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=useRef(!1),isEscaped=useRef(!1),isPositioned=useContext(FloatingPositionedContext),{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=useRef(onPostDeactivate),clickOutsideDeactivatesRef=useRef(clickOutsideDeactivates),escapeDeactivatesRef=useRef(escapeDeactivates);return useEffect(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),useEffect(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),useEffect(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]),React.createElement(FocusTrap,{active:active&&isPositioned,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},children)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "4.4.6",
+  "version": "4.5.1",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",

package/build/cjs/components/Tooltip/getSideTooltipStyle.d.ts

@@ -1,14 +0,0 @@
-import type { TooltipStyle } from "./TooltipContent";
-type GetSideTooltipStyleParams = {
-    triggerRect: DOMRect;
-    offset: number;
-    window: Window;
-};
-/**
- * TODO: remove temporary side placement
- *
- * Places the tooltip beside the trigger with their top edges aligned. Callers
- * must verify the tooltip fits beforehand, as this applies no viewport clamping.
- */
-export declare const getSideTooltipStyle: ({ triggerRect, offset, window, }: GetSideTooltipStyleParams) => TooltipStyle;
-export {};

package/build/cjs/components/Tooltip/getSideTooltipStyle.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getSideTooltipStyle",{enumerable:!0,get:function(){return getSideTooltipStyle}});const getSideTooltipStyle=({triggerRect,offset,window})=>({top:triggerRect.top+window.scrollY,left:triggerRect.right+offset+window.scrollX,horizontalPlacement:"right",verticalPlacement:"top",isSidePlacement:!0});

package/build/esm/components/Tooltip/getSideTooltipStyle.d.ts

@@ -1,14 +0,0 @@
-import type { TooltipStyle } from "./TooltipContent";
-type GetSideTooltipStyleParams = {
-    triggerRect: DOMRect;
-    offset: number;
-    window: Window;
-};
-/**
- * TODO: remove temporary side placement
- *
- * Places the tooltip beside the trigger with their top edges aligned. Callers
- * must verify the tooltip fits beforehand, as this applies no viewport clamping.
- */
-export declare const getSideTooltipStyle: ({ triggerRect, offset, window, }: GetSideTooltipStyleParams) => TooltipStyle;
-export {};

package/build/esm/components/Tooltip/getSideTooltipStyle.js

@@ -1 +0,0 @@
-export const getSideTooltipStyle=({triggerRect,offset,window})=>({top:triggerRect.top+window.scrollY,left:triggerRect.right+offset+window.scrollX,horizontalPlacement:"right",verticalPlacement:"top",isSidePlacement:!0});