@amboss/design-system 4.9.4-canary.2 → 4.9.4

package/build/cjs/components/Internal/Panel/Panel.d.ts

@@ -3,8 +3,6 @@ import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanel
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
-    /** Leave a transparent spacing token before this panel's column. */
-    gapBefore?: boolean;
     /** Stable id — used by react-resizable-panels to track the panel and persist
      *  its size, and passed back to `onResize`/`onCollapse`. */
     id: string;
@@ -17,9 +15,9 @@ export type PanelItem = {
     maxSize?: Size;
     /** Allow drag-to-collapse; collapsing fires `onCollapse(id)`. */
     collapsible?: boolean;
-    /** When `false`, user input can't resize this panel directly or through a
-     *  neighbour. Container resizing still applies. Separators stay usable if a
-     *  resizable panel remains on each side - the drag passes this panel by. */
+    /** When `false`, this panel is fixed: it can't be resized directly or by a
+     *  neighbour. Separators beside it stay usable as long as a resizable panel
+     *  remains on each of their sides - the drag just passes this panel by. */
     resizable?: boolean;
     /** Hold this panel's width when the window (or the containing group) is
      *  resized, rather than its share of the group - so the change lands on the

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};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__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"e1qc2hi70",label:"CustomGroup"})({height:"100%",width:"100%"}),CustomSeparator=(0,_styled.default)(_reactresizablepanels.Separator,{target:"e1qc2hi71",label:"CustomSeparator"})(({theme})=>({flexShrink:0,width:theme.variables.size.spacing.xxs})),StyledPanelChild=(0,_styled.default)("div",{target:"e1qc2hi72",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index}),SeparatorComponent=item.gapBefore?CustomSeparator:_reactresizablepanels.Separator;return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(SeparatorComponent,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};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__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"ervy0ss0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"ervy0ss1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(_reactresizablepanels.Separator,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}

package/build/cjs/components/Internal/PanelHeader/PanelHeader.d.ts

@@ -22,7 +22,7 @@ export type PanelHeaderProps = {
     leftSlot?: React.ReactNode;
     /** Title block (icon + heading), rendered after `leftSlot`. */
     title?: PanelHeaderTitle;
-    /** Rendered at the header end, vertically centered. */
+    /** Rendered at the header end, aligned to the top of multi-line content. */
     rightSlot?: React.ReactNode;
     /** Fade the leading group out. `rightSlot` is left solid: it is the control
      *  that travels down onto the left bar's own and has to survive the dissolve. */

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 _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_constants=require("../../Layout/-constants"),_mixins=require("../../../shared/mixins"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header"),StyledHeaderSurface=(0,_styled.default)("div",{target:"e1fxsx1e0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e1fxsx1e1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e1fxsx1e2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e1fxsx1e3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=(0,_styled.default)("div",{target:"e1fxsx1e4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=(0,_styled.default)("div",{target:"e1fxsx1e5",label:"StyledTrailingGroup"})({flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{vSpace:_constants.LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:_constants.LEFT_BAR_BUTTON_INSET.hSpace},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),hasTitle&&_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,{as:title.as,color:colorTitleItems},title.label)))))),_react.default.createElement(StyledTrailingGroup,null,_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 _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_constants=require("../../Layout/-constants"),_mixins=require("../../../shared/mixins"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header"),StyledHeaderSurface=(0,_styled.default)("div",{target:"e13e79rk0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e13e79rk1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e13e79rk2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e13e79rk3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=(0,_styled.default)("div",{target:"e13e79rk4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=(0,_styled.default)("div",{target:"e13e79rk5",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{vSpace:_constants.LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:_constants.LEFT_BAR_BUTTON_INSET.hSpace},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),hasTitle&&_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,{as:title.as,color:colorTitleItems},title.label)))))),_react.default.createElement(StyledTrailingGroup,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))))}

package/build/cjs/components/Layout/-constants.d.ts

@@ -82,16 +82,6 @@ export declare const RIGHT_PANEL_BOTTOM_BAR_INSET: string;
 export declare const PANEL_WIDTH_VAR: {
     readonly leftPanel: "--ds-layout-leftPanel-width";
     readonly content: "--ds-layout-content-width";
-    readonly splitview: "--ds-layout-splitview-width";
     readonly rightPanel: "--ds-layout-rightPanel-width";
 };
-/** Live start of each column relative to the Layout root. */
-export declare const PANEL_START_VAR: {
-    readonly leftPanel: "--ds-layout-leftPanel-start";
-    readonly content: "--ds-layout-content-start";
-    readonly splitview: "--ds-layout-splitview-start";
-    readonly rightPanel: "--ds-layout-rightPanel-start";
-};
-/** Set once column geometry is available to align the bottom bar. */
-export declare const LAYOUT_REGIONS_READY_VAR: "--ds-layout-regions-ready";
 export {};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BOTTOM_BAR_HEIGHT_VAR(){return BOTTOM_BAR_HEIGHT_VAR},get DEFAULT_LEFT_PANEL_VARIANT(){return DEFAULT_LEFT_PANEL_VARIANT},get LAYOUT_REGIONS_READY_VAR(){return LAYOUT_REGIONS_READY_VAR},get LEFT_BAR_BUTTON_INSET(){return LEFT_BAR_BUTTON_INSET},get PAGE_BOTTOM_BAR_INSET(){return PAGE_BOTTOM_BAR_INSET},get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_START_VAR(){return PANEL_START_VAR},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR(){return RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR},get RIGHT_PANEL_BOTTOM_BAR_INSET(){return RIGHT_PANEL_BOTTOM_BAR_INSET},get SIDE_PANELS(){return SIDE_PANELS},get SPLIT_MAX_WIDTH_VAR(){return SPLIT_MAX_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],DEFAULT_LEFT_PANEL_VARIANT="sidebar",LEFT_BAR_BUTTON_INSET={hSpace:"s",vSpace:"xs"},TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,SPLIT_MAX_WIDTH_VAR=_layoutvars.LAYOUT_VARS.splitMaxWidth,BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.bottomBarHeight,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.rightPanelBottomBarHeight,PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`,RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`,PANEL_WIDTH_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelWidth,content:_layoutvars.LAYOUT_VARS.contentWidth,splitview:_layoutvars.LAYOUT_VARS.splitviewWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth},PANEL_START_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelStart,content:_layoutvars.LAYOUT_VARS.contentStart,splitview:_layoutvars.LAYOUT_VARS.splitviewStart,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelStart},LAYOUT_REGIONS_READY_VAR=_layoutvars.LAYOUT_VARS.regionsReady;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BOTTOM_BAR_HEIGHT_VAR(){return BOTTOM_BAR_HEIGHT_VAR},get DEFAULT_LEFT_PANEL_VARIANT(){return DEFAULT_LEFT_PANEL_VARIANT},get LEFT_BAR_BUTTON_INSET(){return LEFT_BAR_BUTTON_INSET},get PAGE_BOTTOM_BAR_INSET(){return PAGE_BOTTOM_BAR_INSET},get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR(){return RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR},get RIGHT_PANEL_BOTTOM_BAR_INSET(){return RIGHT_PANEL_BOTTOM_BAR_INSET},get SIDE_PANELS(){return SIDE_PANELS},get SPLIT_MAX_WIDTH_VAR(){return SPLIT_MAX_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],DEFAULT_LEFT_PANEL_VARIANT="sidebar",LEFT_BAR_BUTTON_INSET={hSpace:"s",vSpace:"xs"},TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,SPLIT_MAX_WIDTH_VAR=_layoutvars.LAYOUT_VARS.splitMaxWidth,BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.bottomBarHeight,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR=_layoutvars.LAYOUT_VARS.rightPanelBottomBarHeight,PAGE_BOTTOM_BAR_INSET=`var(${BOTTOM_BAR_HEIGHT_VAR}, 0px)`,RIGHT_PANEL_BOTTOM_BAR_INSET=`var(${RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}, ${PAGE_BOTTOM_BAR_INSET})`,PANEL_WIDTH_VAR={leftPanel:_layoutvars.LAYOUT_VARS.leftPanelWidth,content:_layoutvars.LAYOUT_VARS.contentWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth};

package/build/cjs/components/Layout/-types.d.ts

@@ -69,21 +69,10 @@ export type RightPanelState = SidePanelStateBase & {
 };
 /** Either side panel, for code that handles both. */
 export type SidePanelState = LeftPanelState | RightPanelState;
-export type RegionPresentation = "column" | "overlay" | "hidden";
-export type PanelAnimation = Readonly<{
-    property: "flex-grow";
-    /** Applied transition duration in milliseconds. */
-    duration: number;
-    easing: string;
-}>;
 /** Actions every slot handle exposes, whatever its state shape. No `resize`:
  *  sizes are declarative (`defaultSize` on the panel, then drag), and the
  *  content/split pair is CSS-split, so an imperative size wouldn't hold. */
 export type PanelHandleActions = {
-    /** Whether the region occupies a footer-aligned column, an overlay, or neither. */
-    readonly presentation: RegionPresentation;
-    /** Parameters of the width transition currently applied by Layout. */
-    readonly animation: PanelAnimation | null;
     /** Whether the slot is currently shown. */
     isVisible: boolean;
     /** Show the slot. */
@@ -276,15 +265,18 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Accessible name; when set, the panel renders as a `region` landmark. */
     "aria-label"?: string;
     collapsible?: boolean;
-    /** Number or `"320px"` = pixels; `"30%"` or `"30"` = percentage.
-     *  Pixel sizes keep their width when the container resizes. Percentage sizes
-     *  follow the container, subject to the panel's min/max constraints.
-     *  Independent of whether the user may resize the panel. */
+    /** Number = pixels, unitless string = percent (e.g. `"30%"`).
+     *
+     *  Either unit sets the column's starting width only: a docked side panel
+     *  then keeps that width when the window resizes, and `Layout.Content` grows
+     *  and shrinks around it. Drag-resizing is a separate story - see
+     *  `resizable`. */
     defaultSize?: Size;
-    /** Desktop only: allow the user to resize the column by pointer or keyboard.
-     *  Overrides the provider config's `resizable`. When `false`, dragging a
-     *  neighbour cannot resize this panel either. Percentage widths still follow
-     *  the container; showing and hiding still works. No effect on mobile. */
+    /** Desktop only: allow drag-resizing the panel's column. Overrides the
+     *  provider config's `resizable`. When `false`, the column is fixed at
+     *  `defaultSize` - neighbours can't resize it either, though they stay
+     *  resizable against each other. Showing and hiding the panel still works. No
+     *  effect on the mobile drawer/sheet. */
     resizable?: boolean;
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
@@ -318,9 +310,6 @@ export type ContentProps = {
  * (default: the `xxl` breakpoint) and centred once past it.
  */
 export type SplitProps = ForwardedScrollProps & {
-    /** Panel surface. Defaults to primary.
-     *  TODO: Move background ownership to the client-rendered content. */
-    background?: "primary" | "transparent";
     /** Panel content in source order. `<Layout.SplitHeader />` /
      *  `<Layout.SplitFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -332,8 +321,6 @@ export type SplitProps = ForwardedScrollProps & {
 };
 /** Props of the internal mobile presentation of `Layout.Split`. */
 export type MobileSplitViewProps = ForwardedScrollProps & {
-    /** Surface forwarded from Layout.Split. */
-    background?: SplitProps["background"];
     children: React.ReactNode;
     /** Accessible name; when set, the view renders as a `region` landmark. */
     "aria-label"?: string;
@@ -465,8 +452,6 @@ export type SplitHeaderProps = PanelSlotHeaderProps & {
 };
 export type SplitFooterProps = PanelSlotFooterProps;
 export type PanelContainerProps = ForwardedScrollProps & {
-    /** Panel surface. Defaults to primary. */
-    background?: SplitProps["background"];
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;

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

@@ -1,7 +1,5 @@
 import React from "react";
 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";
@@ -22,8 +20,6 @@ export declare const PANEL_HOST_DS_ID = "PanelHost";
 declare function LayoutBase({ children, persistenceKey, storage, rules, additionalRulesData, }: LayoutProps): React.ReactElement;
 type LayoutComponent = typeof LayoutBase & {
     Provider: typeof LayoutProvider;
-    BottomBar: typeof LayoutBottomBar;
-    BottomBarItem: typeof LayoutBottomBarItem;
     LeftPanel: typeof LeftPanel;
     LeftNavBar: typeof LeftNavBar;
     LeftNavBarFooter: typeof LeftNavBarFooter;

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"),_LayoutBottomBar=require("./BottomBar/LayoutBottomBar"),_LayoutBottomBarItem=require("./BottomBar/LayoutBottomBarItem"),_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"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_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,root,mobileHost})=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),splitviewWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.leftPanel),contentStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.content),splitviewStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.splitview),rightPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.rightPanel),regionsReadyCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.LAYOUT_REGIONS_READY_VAR),publishRegions=(0,_react.useCallback)(()=>{if(!root)return;let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[_constants.Slot.content,contentWidthCssVar,contentStartCssVar],[_constants.Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===_constants.Slot.content||slot===_constants.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]);(0,_react.useLayoutEffect)(()=>{publishRegions()},[publishRegions]),(0,_react.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=(0,_styled.default)("div",{target:"e1kh2kot0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e1kh2kot1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e1kh2kot2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kh2kot3",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:"e1kh2kot4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1kh2kot5",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]),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==_constants.Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[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}),[layoutRoot,setLayoutRoot]=(0,_react.useState)(null),rootPortalTargets=(0,_react.useMemo)(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});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,gapBefore:slot===_constants.Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==_constants.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.default.createElement(_Panel.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.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.PanelRowContext.Provider,{value:rowKey},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:rootPortalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},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.BottomBar=_LayoutBottomBar.LayoutBottomBar,Layout.BottomBarItem=_LayoutBottomBarItem.LayoutBottomBarItem,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,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"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_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:"e1izvg960",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e1izvg961",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e1izvg962",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1izvg963",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:"e1izvg964",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1izvg965",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]),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&!(slot===_constants.Slot.leftPanel&&hasOffcanvasLeftBar),[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,maxSize:panel?.maxSize,collapsible:slot!==_constants.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.default.createElement(_Panel.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.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.PanelRowContext.Provider,{value:rowKey},_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"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},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.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,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"),_usePanelAnimations=require("./usePanelAnimations"),_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 animations=(0,_react.useMemo)(_usePanelAnimations.createPanelAnimationsStore,[]),persistence=(0,_react.useMemo)(()=>({persistenceKey,storage}),[persistenceKey,storage]);return _react.default.createElement(_context.LayoutStoreProvider,{value:storeRef.current},_react.default.createElement(_context.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),_react.default.createElement(_usePanelAnimations.PanelAnimationsProvider,{value:animations},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.LayoutPersistenceProvider,{value:persistence},_react.default.createElement(_LayoutCssVars.LayoutCssVarStoreProvider,{value:cssVarStoreRef.current},_react.default.createElement(_LayoutCssVars.LayoutCssVars,null),children)))}

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

@@ -8,8 +8,9 @@ export type LeftPanelDrawerProps = ForwardedScrollProps & {
 };
 /**
  * Mobile left panel. Renders its content as a modal {@link Drawer} pinned to the
- * 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`.
+ * 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`.
  */
 export declare const LeftPanelDrawer: React.FC<LeftPanelDrawerProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_constants=require("../-constants"),_registry=require("../registry"),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),_useLeftPanelId=require("../useLeftPanelId"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e1q5nxh70",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return(0,_registry.useDeclarePanel)(_constants.Slot.leftPanel,{}),_react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDrawer",{enumerable:!0,get:function(){return LeftPanelDrawer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),_useLeftPanelId=require("../useLeftPanelId"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e1gnrffs0",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{id:leftPanelId,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/cjs/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, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;
+export declare function PanelContainer({ children, "aria-label": ariaLabel, scrollContainerRef, onScroll, showBorderLeft, showBorderRight, "data-e2e-test-id": dataE2eTestId, }: PanelContainerProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelContainer",{enumerable:!0,get:function(){return PanelContainer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../Internal/Sandwich/Sandwich"),_Container=require("../Container/Container"),CustomContainer=(0,_styled.default)(_Container.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}));function PanelContainer({children,background="primary","aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return _react.default.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.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelContainer",{enumerable:!0,get:function(){return PanelContainer}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../Internal/Sandwich/Sandwich"),_Container=require("../Container/Container"),CustomContainer=(0,_styled.default)(_Container.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}));function PanelContainer({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,showBorderLeft=!1,showBorderRight=!1,"data-e2e-test-id":dataE2eTestId}){return _react.default.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.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},children))}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanel",{enumerable:!0,get:function(){return RightPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_RightPanelDocked=require("./RightPanelDocked"),_RightPanelSheet=require("./RightPanelSheet"),RightPanel=({children,defaultSize=378,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[_constants.Slot.rightPanel]:panel}=(0,_useLayout.useLayout)(),{isVisible,hide}=panel,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),{minWidth,maxWidth}=(0,_react1.useTheme)().variables.layout.rightPanel;(0,_registry.useDeclarePanel)(_constants.Slot.rightPanel,{defaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:"number"==typeof defaultSize||defaultSize.trim().endsWith("px"),variant});let resolvedVariant=layoutState[_constants.Slot.rightPanel].variant??variant;return(0,_registry.useRunCallbackOnValueChange)(isVisible,onVisibleChange),(0,_registry.useRunCallbackOnValueChange)(resolvedVariant,onVariantChange),isMobile?_react.default.createElement(_RightPanelSheet.RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_RightPanelDocked.RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanel",{enumerable:!0,get:function(){return RightPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_RightPanelDocked=require("./RightPanelDocked"),_RightPanelSheet=require("./RightPanelSheet"),RightPanel=({children,defaultSize=378,collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[_constants.Slot.rightPanel]:panel}=(0,_useLayout.useLayout)(),{isVisible,hide}=panel,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),{minWidth,maxWidth}=(0,_react1.useTheme)().variables.layout.rightPanel;(0,_registry.useDeclarePanel)(_constants.Slot.rightPanel,{defaultSize,minSize:minWidth.default,maxSize:maxWidth.default,collapsible,resizable,lockWidthOnWindowResize:!0,variant});let resolvedVariant=layoutState[_constants.Slot.rightPanel].variant??variant;return(0,_registry.useRunCallbackOnValueChange)(isVisible,onVisibleChange),(0,_registry.useRunCallbackOnValueChange)(resolvedVariant,onVariantChange),isMobile?_react.default.createElement(_RightPanelSheet.RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_RightPanelDocked.RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"MobileSplitView",{enumerable:!0,get:function(){return MobileSplitView}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_reactdom=require("react-dom"),_PanelContainer=require("../../PanelContainer"),_StyledMobileSplitSlideLayer=require("./StyledMobileSplitSlideLayer"),_useMobileSplitStack=require("./useMobileSplitStack"),_useMobileSplitView=require("./useMobileSplitView"),MobileSplitView=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{isSplitViewActive}=(0,_useMobileSplitView.useMobileSplitView)(),{host,registerSplit}=(0,_useMobileSplitStack.useMobileSplitStack)();if((0,_react.useLayoutEffect)(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=(0,_useMobileSplitView.splitViewOffsetFor)(isSplitViewActive);return(0,_reactdom.createPortal)(_react.default.createElement(_StyledMobileSplitSlideLayer.StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},_react.default.createElement(_PanelContainer.PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"MobileSplitView",{enumerable:!0,get:function(){return MobileSplitView}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_reactdom=require("react-dom"),_PanelContainer=require("../../PanelContainer"),_StyledMobileSplitSlideLayer=require("./StyledMobileSplitSlideLayer"),_useMobileSplitStack=require("./useMobileSplitStack"),_useMobileSplitView=require("./useMobileSplitView"),MobileSplitView=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{isSplitViewActive}=(0,_useMobileSplitView.useMobileSplitView)(),{host,registerSplit}=(0,_useMobileSplitStack.useMobileSplitStack)();if((0,_react.useLayoutEffect)(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=(0,_useMobileSplitView.splitViewOffsetFor)(isSplitViewActive);return(0,_reactdom.createPortal)(_react.default.createElement(_StyledMobileSplitSlideLayer.StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Split",{enumerable:!0,get:function(){return Split}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_useBreakpoints=require("../../../shared/useBreakpoints"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_MobileSplitView=require("./MobileSplitView/MobileSplitView"),_SplitDocked=require("./SplitDocked"),Split=({children,background="primary","aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=(0,_useBreakpoints.useBreakpoints)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useVisibleChange)(isVisible,onVisibleChange),isMobile?_react.default.createElement(_MobileSplitView.MobileSplitView,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):_react.default.createElement(_SplitDocked.SplitDocked,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Split",{enumerable:!0,get:function(){return Split}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_useBreakpoints=require("../../../shared/useBreakpoints"),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_MobileSplitView=require("./MobileSplitView/MobileSplitView"),_SplitDocked=require("./SplitDocked"),Split=({children,"aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=(0,_useBreakpoints.useBreakpoints)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useVisibleChange)(isVisible,onVisibleChange),isMobile?_react.default.createElement(_MobileSplitView.MobileSplitView,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):_react.default.createElement(_SplitDocked.SplitDocked,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_PanelContainer=require("../PanelContainer"),SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useDeclarePanel)(_constants.Slot.splitview,{}),(0,_registry.useLayoutPortal)(_constants.Slot.splitview,isVisible?_react.default.createElement(_PanelContainer.PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_PanelContainer=require("../PanelContainer"),SplitDocked=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useDeclarePanel)(_constants.Slot.splitview,{}),(0,_registry.useLayoutPortal)(_constants.Slot.splitview,isVisible?_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};

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

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

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

@@ -2,16 +2,13 @@ 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>>;
-type LayoutPortalTargets = PortalTargets & {
-    root?: HTMLElement | null;
-};
-export declare const LayoutPortalContext: React.Context<LayoutPortalTargets>;
+export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", HTMLElement | null>>>;
 /**
  * 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 | "root", children: ReactNode): ReactNode;
+export declare function useLayoutPortal(slot: SlotKey, 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.
@@ -23,8 +20,8 @@ export type PanelReg = {
     minSize?: Size;
     maxSize?: Size;
     collapsible?: boolean;
-    /** When `false`, user input can't resize the panel (directly or via a
-     *  neighbour). Container resizing still applies. Defaults to resizable. */
+    /** When `false`, the panel is fixed at `defaultSize` and can't be drag-resized
+     *  (directly or via a neighbour). 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
@@ -92,4 +89,3 @@ 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/cjs/components/Layout/useLayout.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayout",{enumerable:!0,get:function(){return useLayout}});const _react=require("react"),_context=require("./context"),_usePanelAnimations=require("./usePanelAnimations"),_useBreakpoints=require("../../shared/useBreakpoints"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_registry=require("./registry"),_constants=require("./-constants"),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})}}function useLayout(){let store=(0,_context.useLayoutStore)(),state=(0,_context.useLayoutSelector)(selectAll),declared=(0,_react.useContext)(_registry.PanelDeclarationsContext),{dispatch}=store,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),animations=(0,_usePanelAnimations.usePanelAnimations)(),mobileStack=(0,_react.useContext)(_useMobileSplitStack.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??_constants.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??_constants.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})}}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayout",{enumerable:!0,get:function(){return useLayout}});const _react=require("react"),_context=require("./context"),_registry=require("./registry"),_constants=require("./-constants"),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})}}function useLayout(){let store=(0,_context.useLayoutStore)(),state=(0,_context.useLayoutSelector)(selectAll),declared=(0,_react.useContext)(_registry.PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??_constants.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})}}}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getMaxSize(){return getMaxSize},get usePanelDockedSlide(){return usePanelDockedSlide}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_reactdom=require("react-dom"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_parseDurationMs=require("../../shared/parseDurationMs"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_usePanelAnimations=require("./usePanelAnimations"),_useLayout=require("./useLayout"),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,getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),rowKey=(0,_registry.usePanelRow)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[fixedWidth,setFixedWidth]=(0,_react.useState)(null),animations=(0,_usePanelAnimations.usePanelAnimationsStore)(),panelSlideAnimation=(0,_react.useMemo)(()=>{let timing=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open;return{property:"flex-grow",duration:reducedMotion?0:(0,_parseDurationMs.parseDurationMs)(timing.duration),easing:timing.timingFunction}},[theme,hasCollapsedRest,reducedMotion]);(0,_react.useLayoutEffect)(()=>{animations?.set(slot,"idle"===phase||reducedMotion||!collapsible&&!hasCollapsedRest?null:panelSlideAnimation)},[animations,slot,phase,panelSlideAnimation,reducedMotion,collapsible,hasCollapsedRest]),(0,_react.useLayoutEffect)(()=>()=>animations?.set(slot,null),[animations,slot]);let[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible),declaredMountSize=(0,_react.useRef)(hasCollapsedRest&&!isVisible?collapsedSize:state.size??defaultSize),chosenOpenSize=(0,_react.useRef)(state.size??defaultSize),needsRestCorrection=(0,_react.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;(0,_registry.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}),(0,_registry.usePanelPresence)(slot,hasCollapsedRest||isMounted),(0,_react.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&&(0,_reactdom.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=(0,_react.useRef)({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},(0,_react.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]),(0,_react.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&&(0,_reactdom.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}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getMaxSize(){return getMaxSize},get usePanelDockedSlide(){return usePanelDockedSlide}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_parseDurationMs=require("../../shared/parseDurationMs"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),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,getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),rowKey=(0,_registry.usePanelRow)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[fixedWidth,setFixedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;(0,_registry.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}),(0,_registry.usePanelPresence)(slot,hasCollapsedRest||isMounted);let latestRest=(0,_react.useRef)({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},(0,_react.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]),(0,_react.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=(0,_parseDurationMs.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}}

package/build/cjs/components/VirtualScrollList/VirtualScrollList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"VirtualScrollList",{enumerable:!0,get:function(){return VirtualScrollList}});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")),_VirtualScrollListReducer=require("./VirtualScrollListReducer"),StyledContainer=(0,_styled.default)("div",{target:"eyhrtu0",label:"StyledContainer"})(({maxHeight})=>({overflow:"auto",width:"100%",height:"100%",maxHeight})),StyledScrollableContent=(0,_styled.default)("div",{target:"eyhrtu1",label:"StyledScrollableContent"})(({maxContentHeight})=>({overflow:"hidden",boxSizing:"border-box",height:maxContentHeight}));function VirtualScrollList({id,maxHeight,itemHeight,itemAmount,emptyState=()=>null,itemInView,itemTemplate,containerStyle,"data-e2e-test-id":dataE2eTestId,onContentHeightChange,role,...ariaAttributes}){let scrollableContainerRef=(0,_react.useRef)(null),viewportRef=(0,_react.useRef)(null),adjustedForReflow=(0,_react.useRef)(!1),[{scrolledItemCount=0,amountOfItemsInView=0,scrolledInPx,maxContentHeight=maxHeight,recommendedScrollPosition},dispatch]=(0,_react.useReducer)(_VirtualScrollListReducer.VirtualScrollReducer,{});(0,_react.useLayoutEffect)(()=>{dispatch({type:"reset",itemHeight,maxHeight,overscan:10});let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=0)},[itemHeight,itemAmount,maxHeight]),(0,_react.useEffect)(()=>{let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&dispatch({type:"recommendScrollPosition",scrollTop:scrollableContainer.scrollTop,itemToBeInView:itemInView})},[itemInView]),(0,_react.useEffect)(()=>{if(null==recommendedScrollPosition)return;let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=recommendedScrollPosition)},[recommendedScrollPosition]),(0,_react.useLayoutEffect)(()=>{viewportRef.current&&dispatch({type:"updateViewport",viewportNode:viewportRef.current,itemAmount})},[itemAmount,scrolledItemCount,amountOfItemsInView]),(0,_react.useEffect)(()=>{onContentHeightChange?.()},[maxContentHeight,onContentHeightChange]);let itemCountToBeRendered=Math.min(Math.max(0,itemAmount-scrolledItemCount),amountOfItemsInView);return maxContentHeight>maxHeight&&!adjustedForReflow.current&&viewportRef.current&&(setTimeout(()=>{let viewportNode=viewportRef.current;viewportNode&&dispatch({type:"updateViewport",viewportNode,itemAmount})}),adjustedForReflow.current=!0),_react.default.createElement(StyledContainer,{ref:scrollableContainerRef,maxHeight:maxHeight,style:{maxHeight,...containerStyle},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"VirtualScrollList",onScroll:e=>{dispatch({type:"scroll",scrollTop:e.currentTarget.scrollTop})}},0===itemAmount?emptyState():_react.default.createElement(StyledScrollableContent,{maxContentHeight:maxContentHeight},_react.default.createElement("div",{ref:viewportRef,style:{transform:`translateY(${scrolledInPx}px`},role:role,id:id,...ariaAttributes},!!itemCountToBeRendered&&Array(itemCountToBeRendered).fill(0).map((_,index)=>itemTemplate(scrolledItemCount+index)))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"VirtualScrollList",{enumerable:!0,get:function(){return VirtualScrollList}});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")),_VirtualScrollListReducer=require("./VirtualScrollListReducer"),StyledContainer=(0,_styled.default)("div",{target:"eawkr7u0",label:"StyledContainer"})(({maxHeight})=>({overflow:"auto",width:"100%",height:"100%",maxHeight})),StyledScrollableContent=(0,_styled.default)("div",{target:"eawkr7u1",label:"StyledScrollableContent"})(({maxContentHeight})=>({overflow:"hidden",boxSizing:"border-box",height:maxContentHeight})),measureViewport=node=>({height:node.getBoundingClientRect().height,items:Array.from(node.children,child=>({offsetTop:child.offsetTop,height:child.getBoundingClientRect().height}))});function VirtualScrollList({id,maxHeight,itemHeight,itemAmount,emptyState=()=>null,itemInView,itemTemplate,containerStyle,"data-e2e-test-id":dataE2eTestId,onContentHeightChange,role,...ariaAttributes}){let scrollableContainerRef=(0,_react.useRef)(null),viewportRef=(0,_react.useRef)(null),adjustedForReflow=(0,_react.useRef)(!1),[{scrolledItemCount=0,amountOfItemsInView=0,scrolledInPx,maxContentHeight=maxHeight,recommendedScrollPosition},dispatch]=(0,_react.useReducer)(_VirtualScrollListReducer.VirtualScrollReducer,{});(0,_react.useLayoutEffect)(()=>{dispatch({type:"reset",itemHeight,maxHeight,overscan:10});let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=0)},[itemHeight,itemAmount,maxHeight]),(0,_react.useEffect)(()=>{let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&dispatch({type:"recommendScrollPosition",scrollTop:scrollableContainer.scrollTop,itemToBeInView:itemInView})},[itemInView]),(0,_react.useEffect)(()=>{if(null==recommendedScrollPosition)return;let scrollableContainer=scrollableContainerRef.current;scrollableContainer&&(scrollableContainer.scrollTop=recommendedScrollPosition)},[recommendedScrollPosition]),(0,_react.useLayoutEffect)(()=>{viewportRef.current&&dispatch({type:"updateViewport",measurements:measureViewport(viewportRef.current),itemAmount})},[itemAmount,scrolledItemCount,amountOfItemsInView]),(0,_react.useEffect)(()=>{onContentHeightChange?.()},[maxContentHeight,onContentHeightChange]);let itemCountToBeRendered=Math.min(Math.max(0,itemAmount-scrolledItemCount),amountOfItemsInView);return maxContentHeight>maxHeight&&!adjustedForReflow.current&&viewportRef.current&&(setTimeout(()=>{let viewportNode=viewportRef.current;viewportNode&&dispatch({type:"updateViewport",measurements:measureViewport(viewportNode),itemAmount})}),adjustedForReflow.current=!0),_react.default.createElement(StyledContainer,{ref:scrollableContainerRef,maxHeight:maxHeight,style:{maxHeight,...containerStyle},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"VirtualScrollList",onScroll:e=>{dispatch({type:"scroll",scrollTop:e.currentTarget.scrollTop})}},0===itemAmount?emptyState():_react.default.createElement(StyledScrollableContent,{maxContentHeight:maxContentHeight},_react.default.createElement("div",{ref:viewportRef,style:{transform:`translateY(${scrolledInPx}px`},role:role,id:id,...ariaAttributes},!!itemCountToBeRendered&&Array(itemCountToBeRendered).fill(0).map((_,index)=>itemTemplate(scrolledItemCount+index)))))}

package/build/cjs/components/VirtualScrollList/VirtualScrollListReducer.d.ts

@@ -2,6 +2,13 @@ type Offset = {
     amount: number;
     isInterpolated: boolean;
 };
+export type ViewportMeasurements = {
+    readonly height: number;
+    readonly items: readonly {
+        readonly offsetTop: number;
+        readonly height: number;
+    }[];
+};
 type State = {
     avgItemHeight?: number;
     overscan?: number;
@@ -20,7 +27,7 @@ type Action = {
     scrollTop: number;
 } | {
     type: "updateViewport";
-    viewportNode: HTMLDivElement;
+    measurements: ViewportMeasurements;
     itemAmount: number;
 } | {
     type: "reset";

package/build/cjs/components/VirtualScrollList/VirtualScrollListReducer.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"VirtualScrollReducer",{enumerable:!0,get:function(){return VirtualScrollReducer}});const findClosestOffsetIndex=(arr,val)=>{let start=0,end=arr.length-1,mid=Math.floor((start+end)/2);for(;start<=end&&arr[mid=Math.floor((start+end)/2)].amount!==val;)val<arr[mid].amount?end=mid-1:start=mid+1;return mid},getMaxHeight=(maxAmountOfItems,offsets,lastItemHeight)=>{let amountOfOffsets=Math.min(offsets.length,maxAmountOfItems);return(offsets[amountOfOffsets-1]?.amount||0)+(lastItemHeight??0)},reduceScroll=(prevState,scrollTop)=>{let{topOffsets=[],overscan:tolerance=0}=prevState,scrolledItemCount=Math.max(0,findClosestOffsetIndex(topOffsets,scrollTop)-tolerance/2),scrolledInPx=topOffsets[scrolledItemCount]?.amount||0;return{...prevState,scrolledItemCount,scrolledInPx}},reduceUpdateViewport=(prevState,viewportNode,itemAmount)=>{let{topOffsets=[],scrolledInPx=0,scrolledItemCount=0,avgItemHeight=0,lastItemHeight,maxHeight=0,overscan:tolerance=0}=prevState,newTopOffsets=[...topOffsets],updatedLastItemHeight=lastItemHeight;Array.from(viewportNode.children).forEach((child,i)=>{newTopOffsets[i+scrolledItemCount]={amount:scrolledInPx+child.offsetTop,isInterpolated:!1},i+scrolledItemCount!==itemAmount-1||lastItemHeight||(updatedLastItemHeight=child.getBoundingClientRect().height)});let newAvgItemHeight=Math.max(avgItemHeight,viewportNode.getBoundingClientRect().height/(viewportNode.childElementCount||1));for(let i=0;i<itemAmount;i+=1)(!newTopOffsets[i]||newTopOffsets[i].isInterpolated)&&(newTopOffsets[i]={amount:newTopOffsets[i-1].amount+newAvgItemHeight,isInterpolated:!0});let maxContentHeight=getMaxHeight(itemAmount,newTopOffsets,updatedLastItemHeight);return{...prevState,lastItemHeight:updatedLastItemHeight,avgItemHeight:newAvgItemHeight,topOffsets:newTopOffsets,amountOfItemsInView:Math.round(maxHeight/newAvgItemHeight)+tolerance,maxContentHeight}},reduceReset=(prevState,itemHeight,maxHeight,overscan)=>({...prevState,lastItemHeight:null,topOffsets:[{amount:0,isInterpolated:!1}],scrolledInPx:0,scrolledItemCount:0,maxHeight,avgItemHeight:itemHeight,overscan}),reduceRecommendScrollPosition=(prevState,scrollTop,itemToBeInView)=>{let{topOffsets,maxHeight}=prevState;if(!topOffsets||void 0===maxHeight)return prevState;let bottomOfTarget=topOffsets[itemToBeInView+1]?.amount,topOfTarget=topOffsets[itemToBeInView]?.amount,recommendedScrollPosition=null;return topOfTarget<scrollTop&&(recommendedScrollPosition=topOfTarget),bottomOfTarget>=scrollTop+maxHeight&&(recommendedScrollPosition=bottomOfTarget-maxHeight),itemToBeInView===topOffsets.length-1&&(recommendedScrollPosition=topOffsets[itemToBeInView].amount),{...prevState,recommendedScrollPosition}},VirtualScrollReducer=(prevState,action)=>{switch(action.type){case"reset":return reduceReset(prevState,action.itemHeight,action.maxHeight,action.overscan);case"scroll":return reduceScroll(prevState,action.scrollTop);case"updateViewport":return reduceUpdateViewport(prevState,action.viewportNode,action.itemAmount);case"recommendScrollPosition":return reduceRecommendScrollPosition(prevState,action.scrollTop,action.itemToBeInView);default:throw Error()}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"VirtualScrollReducer",{enumerable:!0,get:function(){return VirtualScrollReducer}});const findClosestOffsetIndex=(arr,val)=>{let start=0,end=arr.length-1,mid=Math.floor((start+end)/2);for(;start<=end&&arr[mid=Math.floor((start+end)/2)].amount!==val;)val<arr[mid].amount?end=mid-1:start=mid+1;return mid},getMaxHeight=(maxAmountOfItems,offsets,lastItemHeight)=>{let amountOfOffsets=Math.min(offsets.length,maxAmountOfItems);return(offsets[amountOfOffsets-1]?.amount||0)+(lastItemHeight??0)},reduceScroll=(prevState,scrollTop)=>{let{topOffsets=[],overscan:tolerance=0}=prevState,scrolledItemCount=Math.max(0,findClosestOffsetIndex(topOffsets,scrollTop)-tolerance/2),scrolledInPx=topOffsets[scrolledItemCount]?.amount||0;return{...prevState,scrolledItemCount,scrolledInPx}},reduceUpdateViewport=({prevState,measurements,itemAmount})=>{let{topOffsets=[],scrolledInPx=0,scrolledItemCount=0,avgItemHeight=0,lastItemHeight,maxHeight=0,overscan:tolerance=0}=prevState,newTopOffsets=[...topOffsets],updatedLastItemHeight=lastItemHeight;measurements.items.forEach((child,i)=>{newTopOffsets[i+scrolledItemCount]={amount:scrolledInPx+child.offsetTop,isInterpolated:!1},i+scrolledItemCount!==itemAmount-1||lastItemHeight||(updatedLastItemHeight=child.height)});let newAvgItemHeight=Math.max(avgItemHeight,measurements.height/(measurements.items.length||1));for(let i=0;i<itemAmount;i+=1)(!newTopOffsets[i]||newTopOffsets[i].isInterpolated)&&(newTopOffsets[i]={amount:newTopOffsets[i-1].amount+newAvgItemHeight,isInterpolated:!0});let maxContentHeight=getMaxHeight(itemAmount,newTopOffsets,updatedLastItemHeight);return{...prevState,lastItemHeight:updatedLastItemHeight,avgItemHeight:newAvgItemHeight,topOffsets:newTopOffsets,amountOfItemsInView:Math.round(maxHeight/newAvgItemHeight)+tolerance,maxContentHeight}},reduceReset=(prevState,itemHeight,maxHeight,overscan)=>({...prevState,lastItemHeight:null,topOffsets:[{amount:0,isInterpolated:!1}],scrolledInPx:0,scrolledItemCount:0,maxHeight,avgItemHeight:itemHeight,overscan}),reduceRecommendScrollPosition=(prevState,scrollTop,itemToBeInView)=>{let{topOffsets,maxHeight}=prevState;if(!topOffsets||void 0===maxHeight)return prevState;let bottomOfTarget=topOffsets[itemToBeInView+1]?.amount,topOfTarget=topOffsets[itemToBeInView]?.amount,recommendedScrollPosition=null;return topOfTarget<scrollTop&&(recommendedScrollPosition=topOfTarget),bottomOfTarget>=scrollTop+maxHeight&&(recommendedScrollPosition=bottomOfTarget-maxHeight),itemToBeInView===topOffsets.length-1&&(recommendedScrollPosition=topOffsets[itemToBeInView].amount),{...prevState,recommendedScrollPosition}},VirtualScrollReducer=(prevState,action)=>{switch(action.type){case"reset":return reduceReset(prevState,action.itemHeight,action.maxHeight,action.overscan);case"scroll":return reduceScroll(prevState,action.scrollTop);case"updateViewport":return reduceUpdateViewport({prevState,measurements:action.measurements,itemAmount:action.itemAmount});case"recommendScrollPosition":return reduceRecommendScrollPosition(prevState,action.scrollTop,action.itemToBeInView);default:throw Error()}};

package/build/cjs/shared/FocusTrapWrapper.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 /**
-  This wrapper is added to handle onPostDeactivate from react-focus-trap. onPostDeactivate is fired before component unmounts. Often, onPostDeactivate is used to close the popup element (see BasePopover and Sheet). We are overriding it here to fire only when component recieves an outside click or esc key event so that popover and sheet can close correctly.
+  Wraps focus-trap-react. It fires onPostDeactivate only on an outside click or Escape, not on unmount, and it pauses the trap while an aria-modal="true" dialog outside every wrapped trap holds focus or takes a pointer press.
 */
 type FocusTrapWrapperProps = {
     active?: boolean;

package/build/cjs/shared/FocusTrapWrapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FocusTrapWrapper",{enumerable:!0,get:function(){return FocusTrapWrapper}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_focustrapreact=/*#__PURE__*/_interop_require_default._(require("focus-trap-react")),_FloatingPositionedContext=require("../components/Tooltip/FloatingPositionedContext"),FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=(0,_react.useRef)(!1),isEscaped=(0,_react.useRef)(!1),isPositioned=(0,_react.useContext)(_FloatingPositionedContext.FloatingPositionedContext),{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=(0,_react.useRef)(onPostDeactivate),clickOutsideDeactivatesRef=(0,_react.useRef)(clickOutsideDeactivates),escapeDeactivatesRef=(0,_react.useRef)(escapeDeactivates);return(0,_react.useEffect)(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),(0,_react.useEffect)(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),(0,_react.useEffect)(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]),_react.default.createElement(_focustrapreact.default,{active:active&&isPositioned,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},children)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FocusTrapWrapper",{enumerable:!0,get:function(){return FocusTrapWrapper}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_reactdom=require("react-dom"),_focustrapreact=/*#__PURE__*/_interop_require_default._(require("focus-trap-react")),_FloatingPositionedContext=require("../components/Tooltip/FloatingPositionedContext"),_useWindow=require("./useWindow"),isReact19OrLater=parseInt(_react.default.version,10)>=19,getElementRef=element=>isReact19OrLater?element.props.ref:element.ref,focusTrapContainers=new Set,isInsideFocusTrap=element=>Array.from(focusTrapContainers).some(container=>container.contains(element)),findForeignModalDialog=(target,container)=>{if(!container||!(target instanceof Element))return null;let dialog=target.closest('[aria-modal="true"]');return!dialog||dialog.contains(container)||isInsideFocusTrap(dialog)?null:dialog},isDisplayed=dialog=>!!dialog?.isConnected&&("function"!=typeof dialog?.checkVisibility||dialog.checkVisibility()),FocusTrapWrapper=({active,focusTrapOptions,children})=>{let isClickedOutside=(0,_react.useRef)(!1),isEscaped=(0,_react.useRef)(!1),isPositioned=(0,_react.useContext)(_FloatingPositionedContext.FloatingPositionedContext),containerRef=(0,_react.useRef)(null),foreignModalDialog=(0,_react.useRef)(null),[isYieldingToForeignModal,setIsYieldingToForeignModal]=(0,_react.useState)(!1),isPauseRendered=(0,_react.useRef)(!1),win=(0,_useWindow.useWindow)();(0,_react.useLayoutEffect)(()=>{isPauseRendered.current=isYieldingToForeignModal},[isYieldingToForeignModal]);let{onPostDeactivate,clickOutsideDeactivates,escapeDeactivates,...rest}=focusTrapOptions,onPostDeactivateRef=(0,_react.useRef)(onPostDeactivate),clickOutsideDeactivatesRef=(0,_react.useRef)(clickOutsideDeactivates),escapeDeactivatesRef=(0,_react.useRef)(escapeDeactivates);(0,_react.useEffect)(()=>{onPostDeactivateRef.current=onPostDeactivate},[onPostDeactivate]),(0,_react.useEffect)(()=>{clickOutsideDeactivatesRef.current=clickOutsideDeactivates},[clickOutsideDeactivates]),(0,_react.useEffect)(()=>{escapeDeactivatesRef.current=escapeDeactivates},[escapeDeactivates]);let isTrapActive=!1!==active&&isPositioned;(0,_react.useEffect)(()=>{if(!isTrapActive){foreignModalDialog.current=null,setIsYieldingToForeignModal(!1);return}let yieldToForeignModal=dialog=>{foreignModalDialog.current=dialog,(0,_reactdom.flushSync)(()=>setIsYieldingToForeignModal(!0))},handleFocusIn=evt=>{let container=containerRef.current,dialog=findForeignModalDialog(evt.target,container);if(dialog){yieldToForeignModal(dialog),isPauseRendered.current||evt.stopPropagation();return}foreignModalDialog.current&&(evt.target instanceof Node&&container?.contains(evt.target)||!isDisplayed(foreignModalDialog.current))&&(foreignModalDialog.current=null,setIsYieldingToForeignModal(!1))},handlePointerDown=evt=>{let dialog=findForeignModalDialog(evt.target,containerRef.current);dialog&&yieldToForeignModal(dialog)};return win.addEventListener("focusin",handleFocusIn,!0),win.addEventListener("pointerdown",handlePointerDown,!0),()=>{win.removeEventListener("focusin",handleFocusIn,!0),win.removeEventListener("pointerdown",handlePointerDown,!0)}},[isTrapActive,win]);let child=_react.Children.only(children),childRef=getElementRef(child),setContainer=(0,_react.useCallback)(element=>{containerRef.current&&focusTrapContainers.delete(containerRef.current),element&&focusTrapContainers.add(element),containerRef.current=element,"function"==typeof childRef?childRef(element):childRef&&(childRef.current=element)},[childRef]);return _react.default.createElement(_focustrapreact.default,{active:isTrapActive,paused:isYieldingToForeignModal,focusTrapOptions:{...rest,clickOutsideDeactivates:evt=>{let cb=clickOutsideDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isClickedOutside.current=!0),shouldDeactivate},escapeDeactivates:evt=>{let cb=escapeDeactivatesRef.current,shouldDeactivate="function"==typeof cb?cb(evt):cb;return!1!==shouldDeactivate&&(isEscaped.current=!0),shouldDeactivate},onPostDeactivate:()=>{(isClickedOutside.current||isEscaped.current)&&onPostDeactivateRef.current?.(),isEscaped.current=!1,isClickedOutside.current=!1}}},(0,_react.cloneElement)(child,{ref:setContainer}))};