@amboss/design-system 4.9.3 → 4.9.4-canary.1

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{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{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}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:"e1izvg960",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1izvg961",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1izvg962",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1izvg963",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:"e1izvg964",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1izvg965",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]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===Slot.leftPanel&&hasOffcanvasLeftBar),[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,maxSize:panel?.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),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)=>{isShown(id)&&declared[id]?.resizable!==!1&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},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(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:portalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},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.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,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,useLayoutEffect,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,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/LayoutBottomBarItem";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{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}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,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content||slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e1kh2kot0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1kh2kot1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1kh2kot2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kh2kot3",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:"e1kh2kot4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1kh2kot5",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]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[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}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});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,gapBefore:slot===Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),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)=>{isShown(id)&&declared[id]?.resizable!==!1&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},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(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,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/LayoutPortal.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+type LayoutPortalProps = {
+    /** Content rendered at the nearest Layout root. */
+    children: ReactNode;
+};
+export declare function LayoutPortal({ children }: LayoutPortalProps): ReactNode;
+export {};

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

@@ -0,0 +1 @@
+import{useLayoutPortal}from"./registry";export function LayoutPortal({children}){return useLayoutPortal("root",children)}

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

@@ -1 +1 @@
-import React,{useMemo,useRef}from"react";import{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(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),children)))}
+import React,{useMemo,useRef}from"react";import{LayoutPersistenceProvider,LayoutStoreProvider}from"./context";import{LayoutCssVars,LayoutCssVarStoreProvider}from"./LayoutCssVars";import{createLayoutCssVarStore}from"./cssVarStore";import{createPanelAnimationsStore,PanelAnimationsProvider}from"./usePanelAnimations";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 animations=useMemo(createPanelAnimationsStore,[]),persistence=useMemo(()=>({persistenceKey,storage}),[persistenceKey,storage]);return React.createElement(LayoutStoreProvider,{value:storeRef.current},React.createElement(LayoutPersistenceProvider,{value:persistence},React.createElement(LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},React.createElement(LayoutCssVars,null),React.createElement(PanelAnimationsProvider,{value:animations},children))))}

package/build/esm/components/Layout/LeftPanel/LeftPanelDrawer.d.ts

@@ -8,9 +8,8 @@ export type LeftPanelDrawerProps = ForwardedScrollProps & {
 };
 /**
  * Mobile left panel. Renders its content as a modal {@link Drawer} pinned to the
- * left edge instead of an in-flow column - so it does NOT declare a resizable
- * slot. Visibility is the shared `leftPanel` layout state, so `useLayout()`
- * drives it identically to the docked desktop panel; outside-click / Escape
- * routes back through `hide`.
+ * left edge. Registers the region so `useLayout()` reports an open drawer as
+ * `overlay`; Layout excludes it from the resizable row. Visibility is the shared
+ * `leftPanel` state; outside-click / Escape routes back through `hide`.
  */
 export declare const LeftPanelDrawer: React.FC<LeftPanelDrawerProps>;

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";import{useLeftPanelId}from"../useLeftPanelId";let StyledLeftPanelBody=styled("div",{target:"e1gnrffs0",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId();return React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};
+import React from"react";import styled from"@emotion/styled";import{Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";import{useLeftPanelId}from"../useLeftPanelId";let StyledLeftPanelBody=styled("div",{target:"e1q5nxh70",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId();return useDeclarePanel(Slot.leftPanel,{}),React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/esm/components/Layout/PanelContainer.d.ts

@@ -6,4 +6,4 @@ import type { PanelContainerProps } from "./-types";
  * (`Layout.LeftPanelHeader` etc.) render anywhere among `children` and stick
  * to the edges; everything else scrolls.
  */
-export declare function PanelContainer({ children, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;
+export declare function PanelContainer({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../Internal/Sandwich/Sandwich";import{Container}from"../Container/Container";let CustomContainer=styled(Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop,target:"e1ypgo8f0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight})=>({height:"100%",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));export function PanelContainer({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return React.createElement(CustomContainer,{elevation:0,squareCorners:!0,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}
+import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../Internal/Sandwich/Sandwich";import{Container}from"../Container/Container";let CustomContainer=styled(Container,{shouldForwardProp:prop=>"showBorderLeft"!==prop&&"showBorderRight"!==prop&&"background"!==prop,target:"eetiugt0",label:"CustomContainer"})(({theme,showBorderLeft,showBorderRight,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent",borderLeft:showBorderLeft?`1px solid ${theme.values.color.border.secondary.default}`:void 0,borderRight:showBorderRight?`1px solid ${theme.values.color.border.secondary.default}`:void 0}));export function PanelContainer({children,background="primary","aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return React.createElement(CustomContainer,{elevation:0,squareCorners:!0,background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,showBorderLeft:showBorderLeft,showBorderRight:showBorderRight,"data-ds-id":"PanelContainer","data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}

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

@@ -1 +1 @@
-import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize=378,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),{minWidth,maxWidth}=useTheme().variables.layout.rightPanel;useDeclarePanel(Slot.rightPanel,{defaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:!0,variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};
+import React from"react";import{useTheme}from"@emotion/react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize=378,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),{minWidth,maxWidth}=useTheme().variables.layout.rightPanel;useDeclarePanel(Slot.rightPanel,{defaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:"number"==typeof defaultSize||defaultSize.trim().endsWith("px"),variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};

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

@@ -1 +1 @@
-import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();if(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=splitViewOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};
+import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();if(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=splitViewOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};

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

@@ -1 +1 @@
-import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,"aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=useBreakpoints(),{isVisible}=useLayout()[Slot.splitview];return useVisibleChange(isVisible,onVisibleChange),isMobile?React.createElement(MobileSplitView,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):React.createElement(SplitDocked,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};
+import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,background="primary","aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=useBreakpoints(),{isVisible}=useLayout()[Slot.splitview];return useVisibleChange(isVisible,onVisibleChange),isMobile?React.createElement(MobileSplitView,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):React.createElement(SplitDocked,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};

package/build/esm/components/Layout/index.d.ts

@@ -7,3 +7,4 @@ export { useAutoScrollToBottom } from "./useAutoScrollToBottom";
 export { createLayoutStore } from "./store";
 export { createInitialState, layoutReducer } from "./reducer";
 export * from "./-types";
+export type { LayoutBottomBarProps } from "./BottomBar/LayoutBottomBar";

package/build/esm/components/Layout/registry.d.ts

@@ -2,13 +2,16 @@ import { type ReactNode } from "react";
 import type { PanelImperativeHandle } from "react-resizable-panels";
 import type { RightPanelVariant, Size, SlotKey } from "./-types";
 export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
-export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", HTMLElement | null>>>;
+type LayoutPortalTargets = PortalTargets & {
+    root?: HTMLElement | null;
+};
+export declare const LayoutPortalContext: React.Context<LayoutPortalTargets>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
  * gate content by passing `null` as `children`, not by skipping the call.
  */
-export declare function useLayoutPortal(slot: SlotKey, children: ReactNode): ReactNode;
+export declare function useLayoutPortal(slot: SlotKey | "root", children: ReactNode): ReactNode;
 /**
  * Panel descriptor a marker contributes. The Group renders one resizable Panel
  * per *declared* panel that is currently shown - regardless of nesting depth.
@@ -20,8 +23,8 @@ export type PanelReg = {
     minSize?: Size;
     maxSize?: Size;
     collapsible?: boolean;
-    /** When `false`, the panel is fixed at `defaultSize` and can't be drag-resized
-     *  (directly or via a neighbour). Defaults to resizable. */
+    /** When `false`, user input can't resize the panel (directly or via a
+     *  neighbour). Container resizing still applies. Defaults to resizable. */
     resizable?: boolean;
     /** Lock this column's width when the window resizes, leaving the change to
      *  the columns without it. Declared by the docked side panels, which are
@@ -89,3 +92,4 @@ export declare function usePanelAnimationControl(): PanelAnimationControl | null
 export declare function useRunCallbackOnValueChange<T>(value: T, onChange?: (value: T) => void): void;
 /** Fire `onChange(visible)` when `visible` transitions (not on initial mount). */
 export declare function useVisibleChange(visible: boolean, onChange?: (visible: boolean) => void): void;
+export {};

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

@@ -1 +1 @@
-import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
+import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{usePanelAnimations}from"./usePanelAnimations";import{useBreakpoints}from"../../shared/useBreakpoints";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{PanelDeclarationsContext}from"./registry";import{DEFAULT_LEFT_PANEL_VARIANT}from"./-constants";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store,{isMobile}=useBreakpoints(),animations=usePanelAnimations(),mobileStack=useContext(MobileSplitStackContext),presentationFor=slot=>state[slot].visible&&("splitview"===slot&&isMobile?mobileStack?.isSplitPresent:declared[slot])?"content"===slot?isMobile&&mobileStack?.isSplitPresent&&state.splitview.visible?"hidden":"column":"splitview"===slot?"column":"leftPanel"===slot?(state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT)==="sidebar"?"column":"overlay":isMobile||(state.rightPanel.variant??declared.rightPanel?.variant)==="float"?"overlay":"column":"hidden";return{state,leftPanel:{presentation:presentationFor("leftPanel"),animation:animations.leftPanel??null,state:{...state.leftPanel,variant:state.leftPanel.variant??DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{presentation:presentationFor("rightPanel"),animation:animations.rightPanel??null,state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{presentation:presentationFor("content"),animation:animations.content??null,state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{presentation:presentationFor("splitview"),animation:animations.splitview??null,state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}

package/build/esm/components/Layout/usePanelAnimations.d.ts

@@ -0,0 +1,12 @@
+import type { SlotKey, PanelAnimation } from "./-types";
+type Animations = Partial<Record<SlotKey, PanelAnimation | null>>;
+type PanelAnimationsStore = {
+    getSnapshot: () => Animations;
+    subscribe: (listener: () => void) => () => void;
+    set: (slot: SlotKey, animation: PanelAnimation | null) => void;
+};
+export declare const PanelAnimationsProvider: React.Provider<PanelAnimationsStore | null>;
+export declare const usePanelAnimationsStore: () => PanelAnimationsStore | null;
+export declare const createPanelAnimationsStore: () => PanelAnimationsStore;
+export declare const usePanelAnimations: () => Animations;
+export {};

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

@@ -0,0 +1 @@
+import{createContext,useContext,useSyncExternalStore}from"react";let EMPTY={},NOOP_SUBSCRIBE=()=>()=>{},Context=createContext(null);export const PanelAnimationsProvider=Context.Provider;export const usePanelAnimationsStore=()=>useContext(Context);export const createPanelAnimationsStore=()=>{let snapshot={},listeners=new Set;return{getSnapshot:()=>snapshot,subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)}),set:(slot,animation)=>{(snapshot[slot]??null)!==animation&&(snapshot={...snapshot,[slot]:animation},listeners.forEach(listener=>listener()))}}};export const usePanelAnimations=()=>{let store=usePanelAnimationsStore();return useSyncExternalStore(store?.subscribe??NOOP_SUBSCRIBE,store?.getSnapshot??(()=>EMPTY),()=>EMPTY)};

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

@@ -1 +1 @@
-import{useLayoutEffect,useRef,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{useLayout}from"./useLayout";let resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize})=>void 0===collapsedSize?minSize:isVisible?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}
+import{useLayoutEffect,useMemo,useRef,useState}from"react";import{flushSync}from"react-dom";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{parseDurationMs}from"../../shared/parseDurationMs";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence,usePanelRow}from"./registry";import{usePanelAnimationsStore}from"./usePanelAnimations";import{useLayout}from"./useLayout";let resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize,phase})=>void 0===collapsedSize?minSize:isVisible&&"idle"===phase?minSize??collapsedSize:collapsedSize;export const getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),rowKey=usePanelRow(),reducedMotion=prefersReducedMotion(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[fixedWidth,setFixedWidth]=useState(null),animations=usePanelAnimationsStore(),panelSlideAnimation=useMemo(()=>{let timing=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open;return{property:"flex-grow",duration:reducedMotion?0:parseDurationMs(timing.duration),easing:timing.timingFunction}},[theme,hasCollapsedRest,reducedMotion]);useLayoutEffect(()=>{animations?.set(slot,"idle"===phase||reducedMotion||!collapsible&&!hasCollapsedRest?null:panelSlideAnimation)},[animations,slot,phase,panelSlideAnimation,reducedMotion,collapsible,hasCollapsedRest]),useLayoutEffect(()=>()=>animations?.set(slot,null),[animations,slot]);let[prevVisible,setPrevVisible]=useState(isVisible),declaredMountSize=useRef(hasCollapsedRest&&!isVisible?collapsedSize:state.size??defaultSize),chosenOpenSize=useRef(state.size??defaultSize),needsRestCorrection=useRef(!1);isVisible!==prevVisible&&(chosenOpenSize.current=state.size??defaultSize,needsRestCorrection.current=!0,hasCollapsedRest&&setFixedWidth(resolveSizePx(state.size??defaultSize,null)),setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;useDeclarePanel(slot,{defaultSize:hasCollapsedRest?declaredMountSize.current:mountDefaultSizeFor({defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize,phase}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable:(!hasCollapsedRest||!!isVisible&&"idle"===phase)&&resizable,lockWidthOnWindowResize}),usePanelPresence(slot,hasCollapsedRest||isMounted),useLayoutEffect(()=>{if(!hasCollapsedRest||"idle"!==phase||!needsRestCorrection.current)return;let restSize=isVisible?chosenOpenSize.current:collapsedSize,cancelled=!1;return animation?.setResizeSuppressed(slot,!0),Promise.resolve().then(()=>{if(cancelled)return;let handle=animation?.getHandle(slot);try{handle&&isHandleReady(handle)&&void 0!==restSize&&flushSync(()=>handle.resize(restSize))}finally{needsRestCorrection.current=!1,animation?.setResizeSuppressed(slot,!1)}}),()=>{cancelled=!0,animation?.setResizeSuppressed(slot,!1)}},[phase,hasCollapsedRest,isVisible,collapsedSize,animation,slot]);let latestRest=useRef({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},useLayoutEffect(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),useLayoutEffect(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let durationMs=panelSlideAnimation.duration,setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`${panelSlideAnimation.property} ${panelSlideAnimation.duration}ms ${panelSlideAnimation.easing}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase||hasCollapsedRest?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest)return void Promise.resolve().then(()=>waitForColumn(attempt+1));let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;if(handle&&element&&isHandleReady(handle)){if(hasCollapsedRest){let startSize="entering"===phase?collapsedSize:chosenOpenSize.current;void 0!==startSize&&flushSync(()=>handle.resize(startSize))}runSlide(handle,element);return}if("exiting"===phase||!animation||attempt>=30)return void settle(handle);frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme,panelSlideAnimation]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}