@amboss/design-system 4.6.2 → 4.6.3

package/build/cjs/components/Internal/PanelHeader/PanelHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label)))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label))))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}

package/build/cjs/components/Layout/RightPanel/RightPanelHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelHeader",{enumerable:!0,get:function(){return RightPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_Inline=require("../../Inline/Inline"),_LayoutFloatDragHandle=require("../../Internal/LayoutFloat/LayoutFloatDragHandle");function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=(0,_useLayout.useLayout)()[_constants.Slot.rightPanel],{isMobile}=(0,_useBreakpoints.useBreakpoints)(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:isFloating?"open-sidebar-right":"minimize",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelHeader",{enumerable:!0,get:function(){return RightPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_Inline=require("../../Inline/Inline"),_LayoutFloatDragHandle=require("../../Internal/LayoutFloat/LayoutFloatDragHandle");function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=(0,_useLayout.useLayout)()[_constants.Slot.rightPanel],{isMobile}=(0,_useBreakpoints.useBreakpoints)(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:isFloating?"open-sidebar-right":"open-bottom-right",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}

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

@@ -1,6 +1,10 @@
 import React from "react";
 /** Placement options accepted by the underlying tooltip positioner. */
 type RangePopoverPlacement = "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type RangePopoverSheetProps = {
+    /** Show the dark scrim backdrop behind the Sheet. */
+    hasBackdrop?: boolean;
+};
 export type RangePopoverProps = {
     /** The popover body. */
     content: React.ReactElement;
@@ -39,6 +43,10 @@ export type RangePopoverProps = {
      * selection) and stealing focus would disturb the user's context.
      */
     disableInitialFocus?: boolean;
+    /** When true, renders as a Sheet on mobile viewports. */
+    renderAsSheetOnMobile?: boolean;
+    /** Props for configuring the Sheet rendered on mobile viewports. */
+    sheetProps?: RangePopoverSheetProps;
     "data-e2e-test-id"?: string;
 };
 /**
@@ -65,6 +73,8 @@ export type RangePopoverProps = {
  * @param role - ARIA role for the popover surface.
  * @param aria-label - Accessible name for the popover surface.
  * @param disableInitialFocus - When true, does not move focus into the popover.
+ * @param renderAsSheetOnMobile - When true, renders as a Sheet on mobile viewports.
+ * @param sheetProps - Props for configuring the Sheet rendered on mobile viewports.
  */
-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 declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, renderAsSheetOnMobile, sheetProps, "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:"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})}
+"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")),_Sheet=require("../Sheet/Sheet"),_TooltipContent=require("../Tooltip/TooltipContent"),_FocusTrapWrapper=require("../../shared/FocusTrapWrapper"),_useBreakpoints=require("../../shared/useBreakpoints"),StyledContent=(0,_styled.default)("div",{target:"e1w5dmk80",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,renderAsSheetOnMobile=!1,sheetProps,"data-e2e-test-id":dataE2eTestId}){let tooltipId=(0,_react.useId)(),{isMobileInPortrait,isMobileInLandscape}=(0,_useBreakpoints.useBreakpoints)(),rangeRef=(0,_react.useRef)(null);rangeRef.current=range;let contentRef=(0,_react.useRef)(null);if(renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape))return _react.default.createElement(_Sheet.Sheet,{"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableInitialFocus,dismissOnOutsideClick:dismissOnOutsideClick,hasBackdrop:sheetProps?.hasBackdrop,id:tooltipId,isVisible:isVisible,onClose:onClose,portalContainer:portalContainer??void 0,role:role},content);let 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.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"),_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)}
+"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"),_useBreakpoints=require("../../shared/useBreakpoints"),_PopoverContext=require("../Patterns/Popover/PopoverContext"),_Sheet=require("../Sheet/Sheet"),_TooltipContent=require("../Tooltip/TooltipContent"),StyledContainer=(0,_styled.default)("div",{target:"e39b55t0",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 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 tooltipId=(0,_react.useMemo)(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=(0,_react.useState)(isPopoverVisible),{isMobileInPortrait,isMobileInLandscape}=(0,_useBreakpoints.useBreakpoints)(),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.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(forceSheetLayout||renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape)){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/shared/useBreakpoints.d.ts

@@ -9,6 +9,10 @@ interface BreakpointsReturn {
     isDesktop: boolean;
     /** >= 1280px */
     isLargeDesktop: boolean;
+    /** <= 768px, the popover-to-Sheet threshold */
+    isMobileInPortrait: boolean;
+    /** Landscape viewport no taller than 450px, e.g. a phone held sideways */
+    isMobileInLandscape: boolean;
 }
 export declare function useBreakpoints(): BreakpointsReturn;
 export {};

package/build/cjs/shared/useBreakpoints.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useBreakpoints",{enumerable:!0,get:function(){return useBreakpoints}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=require("react"),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../web-tokens/_breakpoints.json")),_useWindow=require("./useWindow");function useBreakpoints(){let window=(0,_useWindow.useWindow)(),[width,setWidth]=(0,_react.useState)(()=>window?window.innerWidth:_breakpointsjson.default.xl.value);return(0,_react.useEffect)(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),(0,_react.useMemo)(()=>({isSmallMobile:width<_breakpointsjson.default.s.value,isMobile:width<_breakpointsjson.default.m.value,isTablet:width>=_breakpointsjson.default.m.value&&width<_breakpointsjson.default.l.value,isDesktop:width>=_breakpointsjson.default.l.value,isLargeDesktop:width>=_breakpointsjson.default.xl.value}),[width])}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useBreakpoints",{enumerable:!0,get:function(){return useBreakpoints}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=require("react"),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../web-tokens/_breakpoints.json")),_useWindow=require("./useWindow");function useBreakpoints(){let window=(0,_useWindow.useWindow)(),[width,setWidth]=(0,_react.useState)(()=>window?window.innerWidth:_breakpointsjson.default.xl.value),[height,setHeight]=(0,_react.useState)(()=>window?window.innerHeight:_breakpointsjson.default.m.value);return(0,_react.useEffect)(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth),setHeight(window.innerHeight)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),(0,_react.useMemo)(()=>({isSmallMobile:width<_breakpointsjson.default.s.value,isMobile:width<_breakpointsjson.default.m.value,isTablet:width>=_breakpointsjson.default.m.value&&width<_breakpointsjson.default.l.value,isDesktop:width>=_breakpointsjson.default.l.value,isLargeDesktop:width>=_breakpointsjson.default.xl.value,isMobileInPortrait:width<=_breakpointsjson.default.m.value,isMobileInLandscape:width>height&&height<=450}),[width,height])}

package/build/esm/components/Internal/PanelHeader/PanelHeader.js

@@ -1 +1 @@
-import React from"react";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";export function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return React.createElement(Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},React.createElement(Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,leftSlot,title&&!1!==title.isVisible&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(H5,{color:colorTitleItems},title.label)))),React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))}
+import React from"react";import{TextClamped}from"../../../components/Typography/TextClamped/TextClamped";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";export function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return React.createElement(Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},React.createElement(Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,leftSlot,title&&!1!==title.isVisible&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(TextClamped,{as:"span"},React.createElement(H5,{color:colorTitleItems},title.label))))),React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))}

package/build/esm/components/Layout/RightPanel/RightPanelHeader.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Inline}from"../../Inline/Inline";import{LayoutFloatDragHandle}from"../../Internal/LayoutFloat/LayoutFloatDragHandle";export function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=useLayout()[Slot.rightPanel],{isMobile}=useBreakpoints(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},React.createElement(PanelHeader,{leftSlot:React.createElement(LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:React.createElement(React.Fragment,null,React.createElement(LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&React.createElement(LayoutFloatDragHandle.Guard,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&React.createElement(PictogramButton,{icon:isFloating?"open-sidebar-right":"minimize",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),React.createElement(PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
+import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Inline}from"../../Inline/Inline";import{LayoutFloatDragHandle}from"../../Internal/LayoutFloat/LayoutFloatDragHandle";export function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=useLayout()[Slot.rightPanel],{isMobile}=useBreakpoints(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},React.createElement(PanelHeader,{leftSlot:React.createElement(LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:React.createElement(React.Fragment,null,React.createElement(LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&React.createElement(LayoutFloatDragHandle.Guard,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&React.createElement(PictogramButton,{icon:isFloating?"open-sidebar-right":"open-bottom-right",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),React.createElement(PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}

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

@@ -1,6 +1,10 @@
 import React from "react";
 /** Placement options accepted by the underlying tooltip positioner. */
 type RangePopoverPlacement = "auto" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type RangePopoverSheetProps = {
+    /** Show the dark scrim backdrop behind the Sheet. */
+    hasBackdrop?: boolean;
+};
 export type RangePopoverProps = {
     /** The popover body. */
     content: React.ReactElement;
@@ -39,6 +43,10 @@ export type RangePopoverProps = {
      * selection) and stealing focus would disturb the user's context.
      */
     disableInitialFocus?: boolean;
+    /** When true, renders as a Sheet on mobile viewports. */
+    renderAsSheetOnMobile?: boolean;
+    /** Props for configuring the Sheet rendered on mobile viewports. */
+    sheetProps?: RangePopoverSheetProps;
     "data-e2e-test-id"?: string;
 };
 /**
@@ -65,6 +73,8 @@ export type RangePopoverProps = {
  * @param role - ARIA role for the popover surface.
  * @param aria-label - Accessible name for the popover surface.
  * @param disableInitialFocus - When true, does not move focus into the popover.
+ * @param renderAsSheetOnMobile - When true, renders as a Sheet on mobile viewports.
+ * @param sheetProps - Props for configuring the Sheet rendered on mobile viewports.
  */
-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 declare function RangePopover({ content, range, isVisible, onClose, dismissOnOutsideClick, placement, portalContainer, contentPadding, maxWidth, hideArrow, role, "aria-label": ariaLabel, disableInitialFocus, renderAsSheetOnMobile, sheetProps, "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:"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})}
+import React,{useId,useRef}from"react";import styled from"@emotion/styled";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useBreakpoints}from"../../shared/useBreakpoints";let StyledContent=styled("div",{target:"e1w5dmk80",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,renderAsSheetOnMobile=!1,sheetProps,"data-e2e-test-id":dataE2eTestId}){let tooltipId=useId(),{isMobileInPortrait,isMobileInLandscape}=useBreakpoints(),rangeRef=useRef(null);rangeRef.current=range;let contentRef=useRef(null);if(renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape))return React.createElement(Sheet,{"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,disableInitialFocus:disableInitialFocus,disableReturnFocusToTrigger:disableInitialFocus,dismissOnOutsideClick:dismissOnOutsideClick,hasBackdrop:sheetProps?.hasBackdrop,id:tooltipId,isVisible:isVisible,onClose:onClose,portalContainer:portalContainer??void 0,role:role},content);let 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.js

@@ -1 +1 @@
-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)}
+import styled from"@emotion/styled";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{getAriaAttributes}from"../../shared/ariaAttributes";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{useBreakpoints}from"../../shared/useBreakpoints";import{PopoverContext}from"../Patterns/Popover/PopoverContext";import{Sheet}from"../Sheet/Sheet";import{TooltipContent}from"../Tooltip/TooltipContent";let StyledContainer=styled("div",{target:"e39b55t0",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}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 tooltipId=useMemo(()=>`DS${name}_${Math.floor(Date.now()*Math.random())}`,[name]),[isVisible,setVisible]=useState(isPopoverVisible),{isMobileInPortrait,isMobileInLandscape}=useBreakpoints(),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]),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(forceSheetLayout||renderAsSheetOnMobile&&(isMobileInPortrait||isMobileInLandscape)){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/shared/useBreakpoints.d.ts

@@ -9,6 +9,10 @@ interface BreakpointsReturn {
     isDesktop: boolean;
     /** >= 1280px */
     isLargeDesktop: boolean;
+    /** <= 768px, the popover-to-Sheet threshold */
+    isMobileInPortrait: boolean;
+    /** Landscape viewport no taller than 450px, e.g. a phone held sideways */
+    isMobileInLandscape: boolean;
 }
 export declare function useBreakpoints(): BreakpointsReturn;
 export {};

package/build/esm/shared/useBreakpoints.js

@@ -1 +1 @@
-import{useState,useEffect,useMemo}from"react";import breakpoints from"../web-tokens/_breakpoints.json";import{useWindow}from"./useWindow";export function useBreakpoints(){let window=useWindow(),[width,setWidth]=useState(()=>window?window.innerWidth:breakpoints.xl.value);return useEffect(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),useMemo(()=>({isSmallMobile:width<breakpoints.s.value,isMobile:width<breakpoints.m.value,isTablet:width>=breakpoints.m.value&&width<breakpoints.l.value,isDesktop:width>=breakpoints.l.value,isLargeDesktop:width>=breakpoints.xl.value}),[width])}
+import{useState,useEffect,useMemo}from"react";import breakpoints from"../web-tokens/_breakpoints.json";import{useWindow}from"./useWindow";export function useBreakpoints(){let window=useWindow(),[width,setWidth]=useState(()=>window?window.innerWidth:breakpoints.xl.value),[height,setHeight]=useState(()=>window?window.innerHeight:breakpoints.m.value);return useEffect(()=>{if(!window)return;let handleResize=()=>{setWidth(window.innerWidth),setHeight(window.innerHeight)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[window]),useMemo(()=>({isSmallMobile:width<breakpoints.s.value,isMobile:width<breakpoints.m.value,isTablet:width>=breakpoints.m.value&&width<breakpoints.l.value,isDesktop:width>=breakpoints.l.value,isLargeDesktop:width>=breakpoints.xl.value,isMobileInPortrait:width<=breakpoints.m.value,isMobileInLandscape:width>height&&height<=450}),[width,height])}

package/package.json

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