@amboss/design-system 4.6.2 → 4.6.4

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/-types.d.ts

@@ -141,12 +141,6 @@ export type LayoutPanelsMode = boolean | "mobile";
 export type LayoutConfig = {
     /** See {@link LayoutPanelsMode}. Default `false`. */
     enablePanels?: LayoutPanelsMode;
-    /** Slots whose markers may mount later, counted as declared for the
-     *  solo-vs-resizable decision - so a marker nested inside another panel
-     *  (which must mount after its ancestor) doesn't flip the mode and remount
-     *  everything once it appears. Renders nothing itself; `splitview` never
-     *  needs it, since it shares `content`'s column rather than a row slot. */
-    reservedSlots?: SlotKey[];
     leftPanel?: LeftPanelConfig;
     rightPanel?: RightPanelConfig;
     content?: PanelConfig;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});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")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_useFloatablePortalTargets=require("./useFloatablePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"ec2opau0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"ec2opau1",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"ec2opau2",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"ec2opau3",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"ec2opau4",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_useFloatablePortalTargets.useFloatablePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=(0,_context.useLayoutReservedSlots)(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});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")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"e1kuzc310",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"e1kuzc311",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kuzc312",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e1kuzc313",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1kuzc314",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},isSolo?soloHost:panelGroup,isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;

package/build/cjs/components/Layout/LayoutProvider.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutProvider",{enumerable:!0,get:function(){return LayoutProvider}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_context=require("./context"),_LayoutCssVars=require("./LayoutCssVars"),_cssVarStore=require("./cssVarStore"),_reducer=require("./reducer"),_store=require("./store");function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=(0,_react.useRef)(null);null===storeRef.current&&(storeRef.current=store??(0,_store.createLayoutStore)((0,_reducer.createInitialState)(config)));let cssVarStoreRef=(0,_react.useRef)(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=(0,_cssVarStore.createLayoutCssVarStore)());let reservedSlotsRef=(0,_react.useRef)(null);null===reservedSlotsRef.current&&(reservedSlotsRef.current=config?.reservedSlots??[]);let persistence=(0,_react.useMemo)(()=>({persistenceKey,storage}),[persistenceKey,storage]);return _react.default.createElement(_context.LayoutStoreProvider,{value:storeRef.current},_react.default.createElement(_context.LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},_react.default.createElement(_context.LayoutReservedSlotsProvider,{value:reservedSlotsRef.current},_react.default.createElement(_context.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),children)))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutProvider",{enumerable:!0,get:function(){return LayoutProvider}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_context=require("./context"),_LayoutCssVars=require("./LayoutCssVars"),_cssVarStore=require("./cssVarStore"),_reducer=require("./reducer"),_store=require("./store");function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=(0,_react.useRef)(null);null===storeRef.current&&(storeRef.current=store??(0,_store.createLayoutStore)((0,_reducer.createInitialState)(config)));let cssVarStoreRef=(0,_react.useRef)(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=(0,_cssVarStore.createLayoutCssVarStore)());let persistence=(0,_react.useMemo)(()=>({persistenceKey,storage}),[persistenceKey,storage]);return _react.default.createElement(_context.LayoutStoreProvider,{value:storeRef.current},_react.default.createElement(_context.LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},_react.default.createElement(_context.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),children))))}

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/Layout/context.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore, SlotKey } from "./-types";
+import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
 export declare const LayoutStoreProvider: React.Provider<LayoutStore>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
@@ -15,10 +15,6 @@ export declare function useLayoutPanelsEnabled(): LayoutPanelsMode;
  *  breakpoint (the overlay presentations - drawer/sheet - which never mount
  *  the resizable row); `false` never allows. */
 export declare function useCanRenderPanel(): boolean;
-export declare const LayoutReservedSlotsProvider: React.Provider<("content" | "leftPanel" | "splitview" | "rightPanel")[]>;
-/** Slots the nearest `Layout.Provider` reserved for markers that mount later.
- *  See `LayoutConfig.reservedSlots`. */
-export declare function useLayoutReservedSlots(): SlotKey[];
 /**
  * Persistence config for the layout namespace. Set on `Layout.Provider` (single
  * external surface) and read by the nested `<Layout>`. The Provider only

package/build/cjs/components/Layout/context.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPanelsEnabledProvider(){return LayoutPanelsEnabledProvider},get LayoutPersistenceProvider(){return LayoutPersistenceProvider},get LayoutReservedSlotsProvider(){return LayoutReservedSlotsProvider},get LayoutStoreProvider(){return LayoutStoreProvider},get useCanRenderPanel(){return useCanRenderPanel},get useLayoutPanelsEnabled(){return useLayoutPanelsEnabled},get useLayoutPersistence(){return useLayoutPersistence},get useLayoutReservedSlots(){return useLayoutReservedSlots},get useLayoutSelector(){return useLayoutSelector},get useLayoutStore(){return useLayoutStore}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),LayoutStoreContext=(0,_react.createContext)(null),LayoutStoreProvider=LayoutStoreContext.Provider;function useLayoutStore(){let store=(0,_react.useContext)(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}const LayoutPanelsEnabledContext=(0,_react.createContext)(!1),LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;function useLayoutPanelsEnabled(){return(0,_react.useContext)(LayoutPanelsEnabledContext)}function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=(0,_useBreakpoints.useBreakpoints)();return!0===mode||"mobile"===mode&&isMobile}const LayoutReservedSlotsContext=(0,_react.createContext)([]),LayoutReservedSlotsProvider=LayoutReservedSlotsContext.Provider;function useLayoutReservedSlots(){return(0,_react.useContext)(LayoutReservedSlotsContext)}const LayoutPersistenceContext=(0,_react.createContext)({}),LayoutPersistenceProvider=LayoutPersistenceContext.Provider;function useLayoutPersistence(){return(0,_react.useContext)(LayoutPersistenceContext)}function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return(0,_react.useSyncExternalStore)(store.subscribe,getSnapshot,getSnapshot)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPanelsEnabledProvider(){return LayoutPanelsEnabledProvider},get LayoutPersistenceProvider(){return LayoutPersistenceProvider},get LayoutStoreProvider(){return LayoutStoreProvider},get useCanRenderPanel(){return useCanRenderPanel},get useLayoutPanelsEnabled(){return useLayoutPanelsEnabled},get useLayoutPersistence(){return useLayoutPersistence},get useLayoutSelector(){return useLayoutSelector},get useLayoutStore(){return useLayoutStore}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),LayoutStoreContext=(0,_react.createContext)(null),LayoutStoreProvider=LayoutStoreContext.Provider;function useLayoutStore(){let store=(0,_react.useContext)(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}const LayoutPanelsEnabledContext=(0,_react.createContext)(!1),LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;function useLayoutPanelsEnabled(){return(0,_react.useContext)(LayoutPanelsEnabledContext)}function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=(0,_useBreakpoints.useBreakpoints)();return!0===mode||"mobile"===mode&&isMobile}const LayoutPersistenceContext=(0,_react.createContext)({}),LayoutPersistenceProvider=LayoutPersistenceContext.Provider;function useLayoutPersistence(){return(0,_react.useContext)(LayoutPersistenceContext)}function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return(0,_react.useSyncExternalStore)(store.subscribe,getSnapshot,getSnapshot)}

package/build/cjs/components/Layout/{useFloatablePortalTargets.d.ts → usePortalTargets.d.ts}

@@ -7,15 +7,13 @@ import type { SlotKey } from "./-types";
  * - **slot host** - the `<div>` a panel occupies in the docked row (one per
  *   shown slot, captured via ref).
  * - **float host** - the `<div>` inside the floating window's shell.
- * - **carrier** - a persistent `<div>` that carries the floatable slot's
- *   children, physically reparented between its slot host (docked) and the
- *   float host (floating).
- * - **portal target** - what a marker portals its content into. For normal
- *   slots the target IS the slot host; for the floatable slot it is the
- *   carrier, whose identity never changes - so the panel's children keep
- *   their state across dock ↔ float instead of remounting.
+ * - **carrier** - a persistent `<div>` that carries one slot's children,
+ *   physically reparented whenever that slot's host changes.
+ * - **portal target** - what a marker portals its content into: always the
+ *   slot's carrier, whose identity never changes - so a panel's children keep
+ *   their state across a host change instead of remounting.
  */
-type FloatablePortalTargetsArgs = {
+type PortalTargetsArgs = {
     /** All slots, in row order. */
     slots: readonly SlotKey[];
     /** The single slot whose content may move into the floating window. */
@@ -23,7 +21,7 @@ type FloatablePortalTargetsArgs = {
     /** Whether the floatable slot is currently floating. */
     isFloating: boolean;
 };
-type FloatablePortalTargetsResult = {
+type PortalTargetsResult = {
     /** Per-slot portal targets - what markers portal content into. */
     portalTargets: PortalTargets;
     /** The docked-row host elements, keyed by slot (for width observers etc.). */
@@ -33,5 +31,5 @@ type FloatablePortalTargetsResult = {
     /** Ref callback for the floating window's content host `<div>`. */
     floatHostRef: (el: HTMLElement | null) => void;
 };
-export declare const useFloatablePortalTargets: ({ slots, floatableSlot, isFloating, }: FloatablePortalTargetsArgs) => FloatablePortalTargetsResult;
+export declare const usePortalTargets: ({ slots, floatableSlot, isFloating, }: PortalTargetsArgs) => PortalTargetsResult;
 export {};

package/build/cjs/components/Layout/usePortalTargets.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePortalTargets",{enumerable:!0,get:function(){return usePortalTargets}});const _react=require("react"),_useDocument=require("../../shared/useDocument"),usePortalContainerRefs=keys=>{let[elements,setElements]=(0,_react.useState)({});return[elements,(0,_react.useMemo)(()=>{let map={};return keys.forEach(key=>{map[key]=el=>setElements(prev=>prev[key]===el?prev:{...prev,[key]:el})}),map},[keys])]},createCarrierNode=document=>{let node=document.createElement("div");return node.style.height="100%",node.style.width="100%",node.style.position="relative",node},useReparentingPortalNodes=({slots,hosts})=>{let document=(0,_useDocument.useDocument)(),[carriers]=(0,_react.useState)(()=>document?slots.reduce((created,slot)=>({...created,[slot]:createCarrierNode(document)}),{}):{});return(0,_react.useLayoutEffect)(()=>{slots.forEach(slot=>{let carrier=carriers[slot],host=hosts[slot];carrier&&host&&carrier.parentElement!==host&&host.appendChild(carrier)})},[slots,carriers,hosts]),carriers},takePlacedCarriers=({slots,hosts,carriers})=>slots.reduce((targets,slot)=>{let carrier=carriers[slot];return hosts[slot]||carrier?.parentElement?{...targets,[slot]:carrier}:targets},{}),usePortalTargets=({slots,floatableSlot,isFloating})=>{let[slotHosts,slotHostRefs]=usePortalContainerRefs(slots),[floatHost,setFloatHost]=(0,_react.useState)(null),carrierHosts=(0,_react.useMemo)(()=>isFloating?{...slotHosts,[floatableSlot]:floatHost}:slotHosts,[slotHosts,floatableSlot,isFloating,floatHost]),carriers=useReparentingPortalNodes({slots,hosts:carrierHosts});return{portalTargets:(0,_react.useMemo)(()=>takePlacedCarriers({slots,hosts:carrierHosts,carriers}),[slots,carrierHosts,carriers]),slotHosts,slotHostRefs,floatHostRef:setFloatHost}};

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/-types.d.ts

@@ -141,12 +141,6 @@ export type LayoutPanelsMode = boolean | "mobile";
 export type LayoutConfig = {
     /** See {@link LayoutPanelsMode}. Default `false`. */
     enablePanels?: LayoutPanelsMode;
-    /** Slots whose markers may mount later, counted as declared for the
-     *  solo-vs-resizable decision - so a marker nested inside another panel
-     *  (which must mount after its ancestor) doesn't flip the mode and remount
-     *  everything once it appears. Renders nothing itself; `splitview` never
-     *  needs it, since it shares `content`'s column rather than a row slot. */
-    reservedSlots?: SlotKey[];
     leftPanel?: LeftPanelConfig;
     rightPanel?: RightPanelConfig;
     content?: PanelConfig;

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

@@ -1 +1 @@
-import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutReservedSlots,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext}from"./registry";import{useFloatablePortalTargets}from"./useFloatablePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"ec2opau0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=styled("div",{target:"ec2opau1",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"ec2opau2",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"ec2opau3",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"ec2opau4",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=useFloatablePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=useLayoutReservedSlots(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;
+import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,Slot}from"./-constants";import{useLayoutPanelsEnabled,useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel);useEffect(()=>{let targets=[[Slot.leftPanel,leftPanelWidthCssVar],[Slot.content,contentWidthCssVar],[Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=styled("div",{target:"e1kuzc310",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=styled("div",{target:"e1kuzc311",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kuzc312",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e1kuzc313",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1kuzc314",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=useLayoutPanelsEnabled(),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},isSolo?soloHost:panelGroup,isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=LayoutProvider,Layout.LeftPanel=LeftPanel,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;

package/build/esm/components/Layout/LayoutProvider.js

@@ -1 +1 @@
-import React,{useMemo,useRef}from"react";import{LayoutPanelsEnabledProvider,LayoutPersistenceProvider,LayoutReservedSlotsProvider,LayoutStoreProvider}from"./context";import{LayoutCssVars,LayoutCssVarStoreProvider}from"./LayoutCssVars";import{createLayoutCssVarStore}from"./cssVarStore";import{createInitialState}from"./reducer";import{createLayoutStore}from"./store";export function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=useRef(null);null===storeRef.current&&(storeRef.current=store??createLayoutStore(createInitialState(config)));let cssVarStoreRef=useRef(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=createLayoutCssVarStore());let reservedSlotsRef=useRef(null);null===reservedSlotsRef.current&&(reservedSlotsRef.current=config?.reservedSlots??[]);let persistence=useMemo(()=>({persistenceKey,storage}),[persistenceKey,storage]);return React.createElement(LayoutStoreProvider,{value:storeRef.current},React.createElement(LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},React.createElement(LayoutReservedSlotsProvider,{value:reservedSlotsRef.current},React.createElement(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),children)))))}
+import React,{useMemo,useRef}from"react";import{LayoutPanelsEnabledProvider,LayoutPersistenceProvider,LayoutStoreProvider}from"./context";import{LayoutCssVars,LayoutCssVarStoreProvider}from"./LayoutCssVars";import{createLayoutCssVarStore}from"./cssVarStore";import{createInitialState}from"./reducer";import{createLayoutStore}from"./store";export function LayoutProvider({children,config,store,persistenceKey,storage}){let storeRef=useRef(null);null===storeRef.current&&(storeRef.current=store??createLayoutStore(createInitialState(config)));let cssVarStoreRef=useRef(null);null===cssVarStoreRef.current&&(cssVarStoreRef.current=createLayoutCssVarStore());let persistence=useMemo(()=>({persistenceKey,storage}),[persistenceKey,storage]);return React.createElement(LayoutStoreProvider,{value:storeRef.current},React.createElement(LayoutPanelsEnabledProvider,{value:config?.enablePanels??!1},React.createElement(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),children))))}

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/Layout/context.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore, SlotKey } from "./-types";
+import type { LayoutPanelsMode, LayoutState, LayoutStorage, LayoutStore } from "./-types";
 export declare const LayoutStoreProvider: React.Provider<LayoutStore>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
@@ -15,10 +15,6 @@ export declare function useLayoutPanelsEnabled(): LayoutPanelsMode;
  *  breakpoint (the overlay presentations - drawer/sheet - which never mount
  *  the resizable row); `false` never allows. */
 export declare function useCanRenderPanel(): boolean;
-export declare const LayoutReservedSlotsProvider: React.Provider<("content" | "leftPanel" | "splitview" | "rightPanel")[]>;
-/** Slots the nearest `Layout.Provider` reserved for markers that mount later.
- *  See `LayoutConfig.reservedSlots`. */
-export declare function useLayoutReservedSlots(): SlotKey[];
 /**
  * Persistence config for the layout namespace. Set on `Layout.Provider` (single
  * external surface) and read by the nested `<Layout>`. The Provider only

package/build/esm/components/Layout/context.js

@@ -1 +1 @@
-import{createContext,useContext,useSyncExternalStore}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPanelsEnabledContext=createContext(!1);export const LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;export function useLayoutPanelsEnabled(){return useContext(LayoutPanelsEnabledContext)}export function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=useBreakpoints();return!0===mode||"mobile"===mode&&isMobile}let LayoutReservedSlotsContext=createContext([]);export const LayoutReservedSlotsProvider=LayoutReservedSlotsContext.Provider;export function useLayoutReservedSlots(){return useContext(LayoutReservedSlotsContext)}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}
+import{createContext,useContext,useSyncExternalStore}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPanelsEnabledContext=createContext(!1);export const LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;export function useLayoutPanelsEnabled(){return useContext(LayoutPanelsEnabledContext)}export function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=useBreakpoints();return!0===mode||"mobile"===mode&&isMobile}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}

package/build/esm/components/Layout/{useFloatablePortalTargets.d.ts → usePortalTargets.d.ts}

@@ -7,15 +7,13 @@ import type { SlotKey } from "./-types";
  * - **slot host** - the `<div>` a panel occupies in the docked row (one per
  *   shown slot, captured via ref).
  * - **float host** - the `<div>` inside the floating window's shell.
- * - **carrier** - a persistent `<div>` that carries the floatable slot's
- *   children, physically reparented between its slot host (docked) and the
- *   float host (floating).
- * - **portal target** - what a marker portals its content into. For normal
- *   slots the target IS the slot host; for the floatable slot it is the
- *   carrier, whose identity never changes - so the panel's children keep
- *   their state across dock ↔ float instead of remounting.
+ * - **carrier** - a persistent `<div>` that carries one slot's children,
+ *   physically reparented whenever that slot's host changes.
+ * - **portal target** - what a marker portals its content into: always the
+ *   slot's carrier, whose identity never changes - so a panel's children keep
+ *   their state across a host change instead of remounting.
  */
-type FloatablePortalTargetsArgs = {
+type PortalTargetsArgs = {
     /** All slots, in row order. */
     slots: readonly SlotKey[];
     /** The single slot whose content may move into the floating window. */
@@ -23,7 +21,7 @@ type FloatablePortalTargetsArgs = {
     /** Whether the floatable slot is currently floating. */
     isFloating: boolean;
 };
-type FloatablePortalTargetsResult = {
+type PortalTargetsResult = {
     /** Per-slot portal targets - what markers portal content into. */
     portalTargets: PortalTargets;
     /** The docked-row host elements, keyed by slot (for width observers etc.). */
@@ -33,5 +31,5 @@ type FloatablePortalTargetsResult = {
     /** Ref callback for the floating window's content host `<div>`. */
     floatHostRef: (el: HTMLElement | null) => void;
 };
-export declare const useFloatablePortalTargets: ({ slots, floatableSlot, isFloating, }: FloatablePortalTargetsArgs) => FloatablePortalTargetsResult;
+export declare const usePortalTargets: ({ slots, floatableSlot, isFloating, }: PortalTargetsArgs) => PortalTargetsResult;
 export {};

package/build/esm/components/Layout/usePortalTargets.js

@@ -0,0 +1 @@
+import{useLayoutEffect,useMemo,useState}from"react";import{useDocument}from"../../shared/useDocument";let usePortalContainerRefs=keys=>{let[elements,setElements]=useState({});return[elements,useMemo(()=>{let map={};return keys.forEach(key=>{map[key]=el=>setElements(prev=>prev[key]===el?prev:{...prev,[key]:el})}),map},[keys])]},createCarrierNode=document=>{let node=document.createElement("div");return node.style.height="100%",node.style.width="100%",node.style.position="relative",node},useReparentingPortalNodes=({slots,hosts})=>{let document=useDocument(),[carriers]=useState(()=>document?slots.reduce((created,slot)=>({...created,[slot]:createCarrierNode(document)}),{}):{});return useLayoutEffect(()=>{slots.forEach(slot=>{let carrier=carriers[slot],host=hosts[slot];carrier&&host&&carrier.parentElement!==host&&host.appendChild(carrier)})},[slots,carriers,hosts]),carriers},takePlacedCarriers=({slots,hosts,carriers})=>slots.reduce((targets,slot)=>{let carrier=carriers[slot];return hosts[slot]||carrier?.parentElement?{...targets,[slot]:carrier}:targets},{});export const usePortalTargets=({slots,floatableSlot,isFloating})=>{let[slotHosts,slotHostRefs]=usePortalContainerRefs(slots),[floatHost,setFloatHost]=useState(null),carrierHosts=useMemo(()=>isFloating?{...slotHosts,[floatableSlot]:floatHost}:slotHosts,[slotHosts,floatableSlot,isFloating,floatHost]),carriers=useReparentingPortalNodes({slots,hosts:carrierHosts});return{portalTargets:useMemo(()=>takePlacedCarriers({slots,hosts:carrierHosts,carriers}),[slots,carrierHosts,carriers]),slotHosts,slotHostRefs,floatHostRef:setFloatHost}};

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.4",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",

package/build/cjs/components/Layout/useFloatablePortalTargets.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useFloatablePortalTargets",{enumerable:!0,get:function(){return useFloatablePortalTargets}});const _react=require("react"),_useDocument=require("../../shared/useDocument"),usePortalContainerRefs=keys=>{let[elements,setElements]=(0,_react.useState)({});return[elements,(0,_react.useMemo)(()=>{let map={};return keys.forEach(key=>{map[key]=el=>setElements(prev=>prev[key]===el?prev:{...prev,[key]:el})}),map},[keys])]},useReparentingPortalNode=hostNode=>{let document=(0,_useDocument.useDocument)(),[portalNode]=(0,_react.useState)(()=>{if(!document)return null;let node=document.createElement("div");return node.style.height="100%",node.style.width="100%",node.style.position="relative",node});return(0,_react.useLayoutEffect)(()=>{portalNode&&hostNode&&portalNode.parentElement!==hostNode&&hostNode.appendChild(portalNode)},[portalNode,hostNode]),portalNode},useFloatablePortalTargets=({slots,floatableSlot,isFloating})=>{let[slotHosts,slotHostRefs]=usePortalContainerRefs(slots),[floatHost,setFloatHost]=(0,_react.useState)(null),carrier=useReparentingPortalNode(isFloating?floatHost:slotHosts[floatableSlot]??null);return{portalTargets:(0,_react.useMemo)(()=>carrier?{...slotHosts,[floatableSlot]:carrier}:slotHosts,[slotHosts,floatableSlot,carrier]),slotHosts,slotHostRefs,floatHostRef:setFloatHost}};

package/build/esm/components/Layout/useFloatablePortalTargets.js

@@ -1 +0,0 @@
-import{useLayoutEffect,useMemo,useState}from"react";import{useDocument}from"../../shared/useDocument";let usePortalContainerRefs=keys=>{let[elements,setElements]=useState({});return[elements,useMemo(()=>{let map={};return keys.forEach(key=>{map[key]=el=>setElements(prev=>prev[key]===el?prev:{...prev,[key]:el})}),map},[keys])]},useReparentingPortalNode=hostNode=>{let document=useDocument(),[portalNode]=useState(()=>{if(!document)return null;let node=document.createElement("div");return node.style.height="100%",node.style.width="100%",node.style.position="relative",node});return useLayoutEffect(()=>{portalNode&&hostNode&&portalNode.parentElement!==hostNode&&hostNode.appendChild(portalNode)},[portalNode,hostNode]),portalNode};export const useFloatablePortalTargets=({slots,floatableSlot,isFloating})=>{let[slotHosts,slotHostRefs]=usePortalContainerRefs(slots),[floatHost,setFloatHost]=useState(null),carrier=useReparentingPortalNode(isFloating?floatHost:slotHosts[floatableSlot]??null);return{portalTargets:useMemo(()=>carrier?{...slotHosts,[floatableSlot]:carrier}:slotHosts,[slotHosts,floatableSlot,carrier]),slotHosts,slotHostRefs,floatHostRef:setFloatHost}};