@amboss/design-system 4.6.7-canary.0 → 4.7.1

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps, PanelSize } from "react-resizable-panels";
+import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps } from "react-resizable-panels";
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
@@ -37,12 +37,8 @@ export type PanelProps = {
     /** Persist sizes (keyed by `persistenceKey` + the current panel-id set). */
     persistenceKey?: string;
     storage?: LayoutStorage;
-    /** Reports a panel's size whenever its column is measured at a new one -
-     *  after a drag, a window resize, or a sibling opening. Both units come from
-     *  the library's own measurement of the column, so a consumer remembering
-     *  a width never has to read the DOM for it. Collapses are reported through
-     *  `onCollapse` instead, never as a size. */
-    onResize: (id: string, size: PanelSize) => void;
+    /** Reports a settled drag-resize (size as a "%" string). */
+    onResize: (id: string, size: string) => void;
     /** Reports a drag past `minSize` on a collapsible panel. */
     onCollapse: (id: string) => void;
     /** Ref callback for a panel's imperative handle (resize/getSize), used to

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:"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)))}))}
+"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:"e1q4b9dw0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"e1q4b9dw1",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];if("number"==typeof pct){if(collapsible&&pct<.5)return void onCollapse(id);pct>=.5&&onResize(id,`${pct}%`)}}))}},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,panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}

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

@@ -5,9 +5,8 @@ import type { IconProps } from "../../Icon/Icon";
  * panel's accessible name comes from its `aria-label`.
  */
 export type PanelHeaderTitle = {
-    /** Visible title label. Clamped, so a label that outruns the header
-     *  truncates on one line rather than reflowing the panel body beneath it. */
-    label: React.ReactNode;
+    /** Visible title label. */
+    label: string;
     /** Optional leading icon. Decorative — the visible label names it. */
     icon?: Omit<IconProps, "size" | "aria-label" | "aria-labelledby" | "role">;
     /** Show the title block. Default `true`. */
@@ -18,11 +17,8 @@ export type PanelHeaderProps = {
     leftSlot?: React.ReactNode;
     /** Title block (icon + heading), rendered after `leftSlot`. */
     title?: PanelHeaderTitle;
-    /** Rendered at the header end, aligned to the top of multi-line content. */
+    /** Rendered at the header end, vertically centered. */
     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. */
-    isContentFaded?: boolean;
     "data-e2e-test-id"?: string;
 };
 /**
@@ -32,4 +28,4 @@ export type PanelHeaderProps = {
  * carries the semantics (heading, buttons). Place it inside `Sandwich.Header`
  * to get the sticky positioning and scroll separator.
  */
-export declare function PanelHeader({ leftSlot, title, rightSlot, isContentFaded, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;
+export declare function PanelHeader({ leftSlot, title, rightSlot, "data-e2e-test-id": dataE2eTestId, }: PanelHeaderProps): React.ReactElement;

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"),_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:"e1ck2tjp0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"e1ck2tjp1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"e1ck2tjp2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledSlotContent=(0,_styled.default)("div",{target:"e1ck2tjp3",label:"StyledSlotContent"})({width:"max-content"}),StyledTrailingGroup=(0,_styled.default)("div",{target:"e1ck2tjp4",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(StyledHeaderRow,null,_react.default.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot&&_react.default.createElement(StyledSlotContent,null,leftSlot),title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label)))))),_react.default.createElement(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 _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_TextClamped=require("../../../components/Typography/TextClamped/TextClamped"),_Box=require("../../Box/Box"),_Inline=require("../../Inline/Inline"),_Icon=require("../../Icon/Icon"),_Header=require("../../Typography/Header/Header");function PanelHeader({leftSlot,title,rightSlot,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",vAlignItems:"center",noWrap:!0,fullWidth:!0},_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,leftSlot,title&&!1!==title.isVisible&&_react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&_react.default.createElement(_Icon.Icon,{...title.icon,color:colorTitleItems,size:"s"}),_react.default.createElement(_TextClamped.TextClamped,{as:"span"},_react.default.createElement(_Header.H5,{color:colorTitleItems},title.label))))),_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_react.default.Fragment,null,rightSlot))))}

package/build/cjs/components/Internal/Sandwich/-types.d.ts

@@ -7,11 +7,6 @@ export type SandwichProps = {
     onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Forwarded to the scroll container element (e.g. for scroll restoration). */
     scrollRef?: React.Ref<HTMLDivElement>;
-    /** Hides the scroll region's scrollbar and stops it scrolling sideways. For
-     *  frames too narrow to spare a scrollbar's width - which are the frames
-     *  holding content wider than themselves, clipped at the edge. The region
-     *  still scrolls vertically by wheel and keyboard. */
-    hideScrollbar?: boolean;
 };
 /**
  * Separator visibility:

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

@@ -12,7 +12,7 @@ import { SandwichFooter } from "./SandwichFooter";
  * content is scrolled under them; edge state is shared through context (see
  * `useSandwichContext.tsx`).
  */
-declare function SandwichRoot({ children, scrollRef, onScroll, hideScrollbar, }: SandwichProps): React.ReactElement;
+declare function SandwichRoot({ children, scrollRef, onScroll, }: SandwichProps): React.ReactElement;
 /**
  * Compound export: `Sandwich` with `.Header` / `.Footer` attached.
  * Object.assign keeps the static sub-components typed on the root

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});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")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"e13bq2vk0",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"e13bq2vk1",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"e13bq2vk2",label:"StyledScrollBody"})(({hideScrollbar})=>({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative",...hideScrollbar&&{scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},overflowX:"hidden"}})),StyledScrollContent=(0,_styled.default)("div",{target:"e13bq2vk3",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll,hideScrollbar=!1}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,hideScrollbar:hideScrollbar,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Sandwich",{enumerable:!0,get:function(){return Sandwich}});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")),_useSandwichContext=require("./useSandwichContext"),_SandwichHeader=require("./SandwichHeader"),_SandwichFooter=require("./SandwichFooter"),useScrollEdgeTracking=({scrollRef,onScroll,setEdges})=>{let[containerEl,setContainerEl]=(0,_react.useState)(null),[contentEl,setContentEl]=(0,_react.useState)(null),setContainerRef=(0,_react.useCallback)(node=>{setContainerEl(node),"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=(0,_react.useCallback)(()=>{if(!containerEl)return;let{scrollTop,scrollHeight,clientHeight}=containerEl;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[containerEl,setEdges]),onContainerScroll=(0,_react.useCallback)(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return(0,_react.useLayoutEffect)(recalculateEdges,[recalculateEdges]),(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerEl&&observer.observe(containerEl),contentEl&&observer.observe(contentEl),()=>observer.disconnect()},[containerEl,contentEl,recalculateEdges]),{setContainerRef,setContentRef:setContentEl,onContainerScroll}},useSandwichEdgesState=()=>{let[edges,setEdgesState]=(0,_react.useState)({atTop:!0,atBottom:!0}),setEdges=(0,_react.useCallback)(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]);return(0,_react.useMemo)(()=>({...edges,setEdges}),[edges,setEdges])},StyledRoot=(0,_styled.default)("div",{target:"ejnp4220",label:"StyledRoot"})({height:"100%",display:"flex",flexDirection:"column",position:"relative"}),StyledEdgeSlot=(0,_styled.default)("div",{target:"ejnp4221",label:"StyledEdgeSlot"})({flex:"0 0 auto"}),StyledScrollBody=(0,_styled.default)("div",{target:"ejnp4222",label:"StyledScrollBody"})({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative"}),StyledScrollContent=(0,_styled.default)("div",{target:"ejnp4223",label:"StyledScrollContent"})({minHeight:"100%",display:"flex",flexDirection:"column"}),Sandwich=Object.assign(function({children,scrollRef,onScroll}){let edgesValue=useSandwichEdgesState(),{setContainerRef,setContentRef,onContainerScroll}=useScrollEdgeTracking({scrollRef,onScroll,setEdges:edgesValue.setEdges}),[headerSlotNode,setHeaderSlotNode]=(0,_react.useState)(null),[footerSlotNode,setFooterSlotNode]=(0,_react.useState)(null),contextValue=(0,_react.useMemo)(()=>({...edgesValue,headerSlotNode,footerSlotNode}),[edgesValue,headerSlotNode,footerSlotNode]);return _react.default.createElement(_useSandwichContext.SandwichProvider,{value:contextValue},_react.default.createElement(StyledRoot,{"data-ds-id":"Sandwich"},_react.default.createElement(StyledEdgeSlot,{ref:setHeaderSlotNode}),_react.default.createElement(StyledScrollBody,{ref:setContainerRef,onScroll:onContainerScroll,tabIndex:0,"data-ds-id":"SandwichBody"},_react.default.createElement(StyledScrollContent,{ref:setContentRef},children)),_react.default.createElement(StyledEdgeSlot,{ref:setFooterSlotNode})))},{Header:_SandwichHeader.SandwichHeader,Footer:_SandwichFooter.SandwichFooter});

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

@@ -15,9 +15,7 @@ import type { SandwichSeparator } from "../Internal/Sandwich/-types";
 export type Size = number | string;
 /**
  * - `sidebar` - in-flow resizable panel.
- * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED on the right panel -
- *   not implemented there yet.** Implemented for the left panel, which declares
- *   it through {@link LeftPanelVariant}.
+ * - `offcanvas` - detached desktop overlay. ⚠️ **RESERVED - not implemented yet.**
  *   Currently treated like `sidebar` (renders in-flow); the overlay
  *   implementation lands in a later commit.
  * - `float` - detached floating window pinned to the bottom-right viewport
@@ -31,15 +29,11 @@ export type Variant = "sidebar" | "offcanvas" | "float";
 export type RightPanelVariant = Variant;
 /**
  * - `sidebar` - in-flow resizable column.
- * - `drawer` - modal overlay pinned to the left edge, with a backdrop and a
- *   focus trap. Out of the resizable row, so it costs no docked column - the
- *   mobile presentation.
- * - `offcanvas` - the same overlay without the dialog: no backdrop, no focus
- *   trap, the page behind stays live. Also out of the row, so it is what a rule
- *   switches to when the docked budget has no column left but the panel should
- *   stay reachable rather than be hidden.
+ * - `drawer` - modal overlay pinned to the left edge. Out of the resizable row,
+ *   so it costs no docked column - the mobile presentation, and what a rule
+ *   switches to when the budget has no column left.
  */
-export type LeftPanelVariant = "sidebar" | "drawer" | "offcanvas";
+export type LeftPanelVariant = "sidebar" | "drawer";
 export type { PanelKey, SidePanelKey, SlotKey };
 /** Everything both side panels hold. `variant` is declared per slot below, so
  *  each panel's state only admits the variants it can actually render. */
@@ -251,8 +245,7 @@ export type LeftPanelHandle = PanelHandleActions & {
     state: LeftPanelState & {
         variant: LeftPanelVariant;
     };
-    /** Switch render variant: an in-flow column, the modal drawer, or the
-     *  non-modal offcanvas overlay. */
+    /** Switch render variant: an in-flow column, or the modal drawer. */
     setVariant: (variant: LeftPanelVariant) => void;
 };
 export type RightPanelHandle = PanelHandleActions & {
@@ -309,28 +302,7 @@ export type SidePanelProps = ForwardedScrollProps & {
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
 };
-export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize"> & {
-    /** Pixels. Unlike the other panels the left panel takes no percentage: with a
-     *  left bar its content is pinned to this width and clipped as the column narrows,
-     *  and a percentage would resolve against the narrowing column instead of the
-     *  width it opens to - so the content would reflow mid-slide, which is the one
-     *  thing the pin exists to prevent.
-     *
-     *  Sets the column's starting width only: the docked panel keeps that width
-     *  when the window resizes, and `Layout.Content` grows and shrinks around it.
-     *  Drag-resizing is a separate story - see `resizable`. */
-    defaultSize?: number;
-    minSize?: number;
-    maxSize?: number;
-    /** Props forwarded to the panel's internal parts. Required: the left bar
-     *  always carries the button that opens the panel, and it is icon-only, so its
-     *  accessible name can only come from here. Give it the action - the panel's
-     *  own `aria-label` already names the region it opens. */
-    slotProps: {
-        toggleButton: {
-            "aria-label": string;
-        };
-    };
+export type LeftPanelProps = SidePanelProps & {
     /** Accessible name for the panel. Used to label the modal drawer it renders
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
@@ -405,31 +377,8 @@ export type PanelSlotFooterProps = {
     children: React.ReactNode;
     "data-e2e-test-id"?: string;
 };
-export type LeftPanelHeaderProps = PanelSlotHeaderProps & {
-    /** Title block (icon + heading), rendered after `leftSlot`. Reach for it
-     *  rather than `leftSlot` for a title that can outrun the header: the block
-     *  clamps, where `leftSlot` keeps its content at full width and lets the
-     *  header clip it. */
-    title?: PanelHeaderTitle;
-    /** Rendered beneath the title row, still inside the header: content that
-     *  belongs with the header rather than with the scrolling body, such as a
-     *  progress strip or a filter row. It sticks with the header and dissolves
-     *  with it when the panel narrows to its bar. */
-    children?: React.ReactNode;
-};
+export type LeftPanelHeaderProps = PanelSlotHeaderProps;
 export type LeftPanelFooterProps = PanelSlotFooterProps;
-/**
- * Left bar contents for a `Layout.LeftPanel` whose left bar differs from its panel.
- * Holds the button that opens the panel, plus the consumer's own navigation.
- */
-export type LeftNavBarProps = {
-    /** Content in source order; `Layout.LeftNavBarFooter` sticks to the bottom,
-     *  everything else scrolls. Optional - a left bar that carries nothing but the
-     *  button that opens the panel is a left bar too. */
-    children?: React.ReactNode;
-    "data-e2e-test-id"?: string;
-};
-export type LeftNavBarFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the right panel header, after `leftSlot`. Visual only — the
  * panel's accessible name comes from `Layout.RightPanel`'s `aria-label`.
@@ -492,17 +441,12 @@ export type PanelContainerProps = ForwardedScrollProps & {
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
-    /** DOM id of the container, so a control outside the panel can reference it. */
-    id?: string;
     /** Accessible name; when set, the container renders as a `region` landmark. */
     "aria-label"?: string;
     /** Draws a separator border on the panel's left edge. */
     showBorderLeft?: boolean;
     /** Draws a separator border on the panel's right edge. */
     showBorderRight?: boolean;
-    /** Hides the scroll region's scrollbar - for panels too narrow to spare its
-     *  width. */
-    hideScrollbar?: boolean;
     "data-e2e-test-id"?: string;
 };
 export type RightPanelProps = SidePanelProps & {

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

@@ -7,8 +7,6 @@ import { RightPanelFooter } from "./RightPanel/RightPanelFooter";
 import { LeftPanel } from "./LeftPanel/LeftPanel";
 import { LeftPanelHeader } from "./LeftPanel/LeftPanelHeader";
 import { LeftPanelFooter } from "./LeftPanel/LeftPanelFooter";
-import { LeftNavBar } from "./LeftNavBar/LeftNavBar";
-import { LeftNavBarFooter } from "./LeftNavBar/LeftNavBarFooter";
 import { Split } from "./Split/Split";
 import { SplitHeader } from "./Split/SplitHeader";
 import { SplitFooter } from "./Split/SplitFooter";
@@ -21,8 +19,6 @@ declare function LayoutBase({ children, persistenceKey, storage, rules, addition
 type LayoutComponent = typeof LayoutBase & {
     Provider: typeof LayoutProvider;
     LeftPanel: typeof LeftPanel;
-    LeftNavBar: typeof LeftNavBar;
-    LeftNavBarFooter: typeof LeftNavBarFooter;
     LeftPanelHeader: typeof LeftPanelHeader;
     LeftPanelFooter: typeof LeftPanelFooter;
     RightPanel: typeof RightPanel;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_useLeftPanelId=require("../useLeftPanelId"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),_LeftPanelOffcanvas=require("./LeftPanelOffcanvas"),pixelsOf=size=>"number"==typeof size?size:void 0,defaultSizeOf=({defaultSize,minSize,state})=>defaultSize??minSize??pixelsOf(state.size)??pixelsOf(state.minSize)??320,LeftPanel=({children,slotProps,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)(),leftPanelId=(0,_react.useId)(),resolvedDefaultSize=defaultSizeOf({defaultSize,minSize,state});if((0,_registry.useVisibleChange)(isVisible,onVisibleChange),!canRender)return null;let drawer=_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),offcanvas=_react.default.createElement(_LeftPanelOffcanvas.LeftPanelOffcanvas,{toggleButtonLabel:slotProps.toggleButton["aria-label"],isVisible:isVisible,hide:hide,openWidth:`${resolvedDefaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children),docked=_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{toggleButtonLabel:slotProps.toggleButton["aria-label"],"aria-label":ariaLabel,defaultSize:resolvedDefaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children);return _react.default.createElement(_useLeftPanelId.LeftPanelIdContext.Provider,{value:leftPanelId},{drawer,offcanvas,sidebar:docked}[state.variant])};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanel",{enumerable:!0,get:function(){return LeftPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_LeftPanelDocked=require("./LeftPanelDocked"),_LeftPanelDrawer=require("./LeftPanelDrawer"),LeftPanel=({children,defaultSize,minSize,maxSize,collapsible=!0,resizable,onVisibleChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],canRender=(0,_context.useCanRenderPanel)();(0,_registry.useVisibleChange)(isVisible,onVisibleChange);let isDrawer="drawer"===state.variant;return canRender?isDrawer?_react.default.createElement(_LeftPanelDrawer.LeftPanelDrawer,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};

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

@@ -1,15 +1,11 @@
 import React from "react";
-import type { ForwardedScrollProps } from "../-types";
+import type { ForwardedScrollProps, Size } from "../-types";
 export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
     "aria-label"?: string;
-    /** Pixel width the column widens to. Resolved by `LeftPanel` from its own
-     *  prop and the provider config, so it is always a width. */
-    defaultSize: number;
-    minSize?: number;
-    maxSize?: number;
+    defaultSize?: Size;
+    minSize?: Size;
+    maxSize?: Size;
     collapsible?: boolean;
     resizable?: boolean;
 };
@@ -17,15 +13,9 @@ export type LeftPanelDockedProps = ForwardedScrollProps & {
  * Docked (desktop) left panel. Declares the `leftPanel` slot and portals its
  * content into the Group's host - an in-flow, resizable column whose width
  * slides open/closed via {@link usePanelDockedSlide} (when collapsible). Content
- * lives in {@link LeftBarLayers} so `Layout.LeftPanelHeader` /
+ * lives in a {@link PanelContainer} so `Layout.LeftPanelHeader` /
  * `Layout.LeftPanelFooter` children stick to the edges. The mobile presentation
  * lives in {@link LeftPanelDrawer}; `LeftPanel` picks between the two by
  * breakpoint.
- *
- * The column never leaves the row: it rests at the left bar's width and widens
- * to `defaultSize`. Content and footer hold the open width and are clipped, so
- * nothing in them moves - the panel simply shows less of itself. The header is
- * left to narrow with the column, which walks a control at its trailing edge
- * down into the left bar.
  */
 export declare const LeftPanelDocked: React.FC<LeftPanelDockedProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});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")),_react1=require("@emotion/react"),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_LeftBarLayers=require("./LeftBarLayers"),_useLayout=require("../useLayout"),StyledLeftBarColumn=(0,_styled.default)("div",{target:"e1apd56i0",label:"StyledLeftBarColumn"})(({theme})=>({position:"absolute",left:0,right:0,top:_LeftBarLayers.LEFT_BAR_TOP_INSET,bottom:_constants.PAGE_BOTTOM_BAR_INSET,transition:(0,_LeftBarLayers.getLeftBarTopTransition)(theme),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)})),LeftPanelDocked=({children,toggleButtonLabel,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)(),{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel];return(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,collapsedSize:parseFloat(theme.variables.size.dimension.leftNavBar.width)}),(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,_react.default.createElement(StyledLeftBarColumn,null,_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:`${defaultSize}px`,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_PanelSlideBody=require("../PanelSlideBody"),_PanelContainer=require("../PanelContainer"),LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0});return(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,isMounted?_react.default.createElement(_PanelSlideBody.PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},_react.default.createElement(_PanelContainer.PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};

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")),_Drawer=require("../../Internal/Drawer/Drawer"),_PanelContainer=require("../PanelContainer"),_useLeftPanelId=require("../useLeftPanelId"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e158aetq0",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)))};
+"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"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e1pciy730",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>_react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,{scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});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")),_mixins=require("../../../shared/mixins"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),StyledFadingFooter=(0,_styled.default)("div",{target:"emmyo1o0",label:"StyledFadingFooter"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})}));function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)();return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(StyledFadingFooter,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelFooter",{enumerable:!0,get:function(){return LeftPanelFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function LeftPanelFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}

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

@@ -1,9 +1,7 @@
 import React from "react";
 import type { LeftPanelHeaderProps } from "../-types";
 /**
- * Header for the left panel. Place among `Layout.LeftPanel`'s children; it
- * sticks to the top while the rest of the content scrolls. Content is a left
- * slot, an optional title, a right slot, and beneath them whatever is passed as
- * `children`.
+ * Optional sticky header for `Layout.LeftPanel` - place it among the panel's
+ * children; it sticks to the top while the rest of the content scrolls.
  */
-export declare function LeftPanelHeader({ leftSlot, title, rightSlot, children, "data-e2e-test-id": dataE2eTestId, }: LeftPanelHeaderProps): React.ReactElement;
+export declare function LeftPanelHeader({ leftSlot, rightSlot, "data-e2e-test-id": dataE2eTestId, }: LeftPanelHeaderProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});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")),_getLeftPanelFadeStyles=require("../../../shared/mixins/getLeftPanelFadeStyles"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),StyledHeaderStrip=(0,_styled.default)("div",{target:"e1asip2n0",label:"StyledHeaderStrip"})(({theme,isFaded,pinnedContentWidth})=>({minWidth:pinnedContentWidth,...(0,_getLeftPanelFadeStyles.getLeftPanelFadeStyles)({theme,isFaded})}));function LeftPanelHeader({leftSlot,title,rightSlot,children,"data-e2e-test-id":dataE2eTestId}){let{isContentFaded,pinnedContentWidth}=(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)();return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:rightSlot,isContentFaded:isContentFaded}),children&&_react.default.createElement(StyledHeaderStrip,{isFaded:isContentFaded,pinnedContentWidth:pinnedContentWidth},children))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelHeader",{enumerable:!0,get:function(){return LeftPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader");function LeftPanelHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot}))}

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

@@ -0,0 +1,18 @@
+import React from "react";
+/** Edge the body is pinned to while the column slides - the panel's docked
+ *  edge (`right` for the left panel, `left` for the right panel). */
+export type PanelSlideAnchor = "left" | "right";
+export type PanelSlideBodyProps = {
+    /** Body width (px) while sliding; `null` at rest (fills the column). Comes
+     *  from {@link usePanelDockedSlide}. */
+    pinnedWidth: number | null;
+    /** The edge the panel docks against. */
+    anchor: PanelSlideAnchor;
+    children: React.ReactNode;
+};
+/**
+ * The clipped, edge-anchored body a docked side panel's content lives in so
+ * its open/close width animation reads as a drawer slide. Pair with
+ * {@link usePanelDockedSlide}, which supplies `pinnedWidth`.
+ */
+export declare const PanelSlideBody: React.FC<PanelSlideBodyProps>;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelSlideBody",{enumerable:!0,get:function(){return PanelSlideBody}});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"),StyledPanelSlideClip=(0,_styled.default)("div",{target:"e1mhh3wi0",label:"StyledPanelSlideClip"})({position:"relative",width:"100%",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,overflow:"hidden"}),StyledPanelSlideBody=(0,_styled.default)("div",{shouldForwardProp:prop=>"pinnedWidth"!==prop&&"anchor"!==prop,target:"e1mhh3wi1",label:"StyledPanelSlideBody"})(({pinnedWidth,anchor})=>({width:"100%",height:"100%",...null!=pinnedWidth&&{position:"absolute",top:0,[anchor]:0,width:`${pinnedWidth}px`}})),PanelSlideBody=({pinnedWidth,anchor,children})=>_react.default.createElement(StyledPanelSlideClip,null,_react.default.createElement(StyledPanelSlideBody,{pinnedWidth:pinnedWidth,anchor:anchor},children));

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

@@ -40,17 +40,6 @@ export declare const PanelRegistryContext: React.Context<PanelRegistry>;
 export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
 export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
 export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", PanelReg>>>;
-/**
- * The ids of the columns in the resizable row, in order, joined with commas.
- * Changes when a column joins or leaves the row, and only then. A column that
- * has to hold a width of its own across such a change - the left bar column,
- * which react-resizable-panels would otherwise put back at whatever width it
- * had the last time the same set of columns was on screen - re-checks its rest
- * against it.
- */
-export declare const PanelRowContext: React.Context<string>;
-/** The row's current column set, as a stable key. Empty outside a Layout. */
-export declare function usePanelRow(): string;
 /**
  * Keeps an animating-out panel in the resizable row while its exit plays - the
  * Group would otherwise drop the column the instant it's hidden. The panel

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPortalContext(){return LayoutPortalContext},get PanelAnimationContext(){return PanelAnimationContext},get PanelDeclarationsContext(){return PanelDeclarationsContext},get PanelPresenceContext(){return PanelPresenceContext},get PanelRegistryContext(){return PanelRegistryContext},get PanelRowContext(){return PanelRowContext},get useDeclarePanel(){return useDeclarePanel},get useLayoutPortal(){return useLayoutPortal},get usePanelAnimationControl(){return usePanelAnimationControl},get usePanelPresence(){return usePanelPresence},get usePanelRow(){return usePanelRow},get useRunCallbackOnValueChange(){return useRunCallbackOnValueChange},get useVisibleChange(){return useVisibleChange}};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"),_constants=require("./-constants"),_context=require("./context"),LayoutPortalContext=(0,_react.createContext)({});function useLayoutPortal(slot,children){let slotNode=(0,_react.useContext)(LayoutPortalContext)[slot]??null;return slotNode?(0,_reactdom.createPortal)(children,slotNode):null}const PanelRegistryContext=(0,_react.createContext)(null);function useDeclarePanel(slot,reg){let registry=(0,_react.useContext)(PanelRegistryContext),declarationEnabled=!0===(0,_context.useLayoutPanelsEnabled)()||slot===_constants.Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;(0,_react.useLayoutEffect)(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}const PanelDeclarationsContext=(0,_react.createContext)({}),PanelRowContext=(0,_react.createContext)("");function usePanelRow(){return(0,_react.useContext)(PanelRowContext)}const PanelPresenceContext=(0,_react.createContext)(null);function usePanelPresence(slot,isPresent){let presence=(0,_react.useContext)(PanelPresenceContext);(0,_react.useLayoutEffect)(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}const PanelAnimationContext=(0,_react.createContext)(null);function usePanelAnimationControl(){return(0,_react.useContext)(PanelAnimationContext)}function useRunCallbackOnValueChange(value,onChange){let prev=(0,_react.useRef)(value);(0,_react.useEffect)(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPortalContext(){return LayoutPortalContext},get PanelAnimationContext(){return PanelAnimationContext},get PanelDeclarationsContext(){return PanelDeclarationsContext},get PanelPresenceContext(){return PanelPresenceContext},get PanelRegistryContext(){return PanelRegistryContext},get useDeclarePanel(){return useDeclarePanel},get useLayoutPortal(){return useLayoutPortal},get usePanelAnimationControl(){return usePanelAnimationControl},get usePanelPresence(){return usePanelPresence},get useRunCallbackOnValueChange(){return useRunCallbackOnValueChange},get useVisibleChange(){return useVisibleChange}};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"),_constants=require("./-constants"),_context=require("./context"),LayoutPortalContext=(0,_react.createContext)({});function useLayoutPortal(slot,children){let slotNode=(0,_react.useContext)(LayoutPortalContext)[slot]??null;return slotNode?(0,_reactdom.createPortal)(children,slotNode):null}const PanelRegistryContext=(0,_react.createContext)(null);function useDeclarePanel(slot,reg){let registry=(0,_react.useContext)(PanelRegistryContext),declarationEnabled=!0===(0,_context.useLayoutPanelsEnabled)()||slot===_constants.Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;(0,_react.useLayoutEffect)(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}const PanelDeclarationsContext=(0,_react.createContext)({}),PanelPresenceContext=(0,_react.createContext)(null);function usePanelPresence(slot,isPresent){let presence=(0,_react.useContext)(PanelPresenceContext);(0,_react.useLayoutEffect)(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}const PanelAnimationContext=(0,_react.createContext)(null);function usePanelAnimationControl(){return(0,_react.useContext)(PanelAnimationContext)}function useRunCallbackOnValueChange(value,onChange){let prev=(0,_react.useRef)(value);(0,_react.useEffect)(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"DEFAULT_LAYOUT_RULES",{enumerable:!0,get:function(){return DEFAULT_LAYOUT_RULES}});const leftPanelVariantFor=({isMobile,isLowPrio})=>isMobile?"drawer":isLowPrio?"offcanvas":"sidebar",DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=leftPanelVariantFor({isMobile,isLowPrio});variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"offcanvas"===variant&&layout.leftPanel.hide())}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"DEFAULT_LAYOUT_RULES",{enumerable:!0,get:function(){return DEFAULT_LAYOUT_RULES}});const DEFAULT_LAYOUT_RULES={maxDockedPanels:{xs:1,m:2,l:3},rightPanel:{priority:1,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.rightPanel.setVariant("float")}},splitview:{priority:2,condition:({isLowPrio,isMobile,layout})=>{isLowPrio&&!isMobile&&layout.splitview.hide()}},leftPanel:{priority:3,condition:({isLowPrio,isMobile,layout})=>{let variant=isMobile||isLowPrio?"drawer":"sidebar";variant!==layout.leftPanel.state.variant&&(layout.leftPanel.setVariant(variant),"drawer"!==variant||isMobile||layout.leftPanel.hide())}}};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayoutRules",{enumerable:!0,get:function(){return useLayoutRules}});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),DEFAULT_PRIORITY={[_constants.Slot.rightPanel]:1,[_constants.Slot.splitview]:2,[_constants.Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===_constants.Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==_constants.Slot.leftPanel||"sidebar"===state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:_constants.PANEL_ORDER.indexOf(slot)<_constants.PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>_constants.TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return _constants.TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=(0,_react.useRef)(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=(0,_useBreakpoints.useBreakpoints)(),{state}=layout;(0,_react.useEffect)(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});_constants.TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayoutRules",{enumerable:!0,get:function(){return useLayoutRules}});const _react=require("react"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),DEFAULT_PRIORITY={[_constants.Slot.rightPanel]:1,[_constants.Slot.splitview]:2,[_constants.Slot.leftPanel]:3},maxDockedFor=(maxDockedPanels,breakpoints)=>{let{xs,m=xs,l=m}=maxDockedPanels;return breakpoints.isMobile?xs:breakpoints.isTablet?m:l},isDockedPanel=({state,declared,slot})=>!!declared[slot]&&!!state[slot].visible&&(slot===_constants.Slot.rightPanel?"float"!==state.rightPanel.variant:slot!==_constants.Slot.leftPanel||"drawer"!==state.leftPanel.variant),resolveLowPrioSlots=({rules,state,declared,breakpoints})=>{let freeSlots=Math.max(0,maxDockedFor(rules.maxDockedPanels,breakpoints)-1),priorityFor=slot=>rules[slot]?.priority??DEFAULT_PRIORITY[slot],outranks=(slot,other)=>{let byPriority=priorityFor(slot)-priorityFor(other);return 0!==byPriority?byPriority<0:_constants.PANEL_ORDER.indexOf(slot)<_constants.PANEL_ORDER.indexOf(other)},countStrongerDocked=slot=>_constants.TOGGLABLE_SLOTS.filter(other=>other!==slot&&isDockedPanel({state,declared,slot:other})&&outranks(other,slot)).length;return _constants.TOGGLABLE_SLOTS.filter(slot=>countStrongerDocked(slot)>=freeSlots)};function useLayoutRules({layout,declared,rules,additionalData}){let layoutRef=(0,_react.useRef)(layout);layoutRef.current=layout;let{isMobile,isTablet,isDesktop}=(0,_useBreakpoints.useBreakpoints)(),{state}=layout;(0,_react.useEffect)(()=>{if(!rules)return;let lowPrioSlots=resolveLowPrioSlots({rules,state,declared,breakpoints:{isMobile,isTablet,isDesktop}});_constants.TOGGLABLE_SLOTS.forEach(slot=>{let condition=rules[slot]?.condition;condition&&condition({...additionalData,isLowPrio:lowPrioSlots.includes(slot),isMobile,isTablet,isDesktop,layout:layoutRef.current})})},[rules,additionalData,state,declared,isMobile,isTablet,isDesktop])}

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

@@ -14,12 +14,6 @@ export type PanelDockedSlideOptions = {
     /** Forwarded to the declaration: lock the column's width when the window
      *  resizes. Doesn't affect the slide, which resizes the column outright. */
     lockWidthOnWindowResize?: boolean;
-    /** Width the column rests at while hidden, instead of collapsing to nothing.
-     *  Set it and the column never unmounts: closing narrows it to this, opening
-     *  widens it back, so one box carries both states (a nav left bar that widens
-     *  into the panel). The column stops being collapsible - there is no zero to
-     *  collapse to - and this becomes its `minSize` while it is hidden. */
-    collapsedSize?: Size;
 };
 export type PanelDockedSlide = {
     /** Whether the panel's content should render at all (entering, open, or
@@ -32,9 +26,10 @@ export type PanelDockedSlide = {
 /**
  * Animates a docked side panel's open/close as a width slide on its
  * `react-resizable-panels` column, pushing neighbouring content smoothly
- * instead of snapping. Slot-generic - works for either side panel. Falls back to
- * an instant open/close when the panel isn't collapsible, no handle is
- * available, or reduced motion is requested. The mobile modal-drawer lifecycle lives in
+ * instead of snapping. Slot-generic - works for either side panel; render the
+ * returned state with {@link PanelSlideBody}. Falls back to an instant
+ * open/close when the panel isn't collapsible, no handle is available, or
+ * reduced motion is requested. The mobile modal-drawer lifecycle lives in
  * {@link useExitAnimation} and the Drawer's styled components.
  */
-export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, collapsedSize, }: PanelDockedSlideOptions): PanelDockedSlide;
+export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, }: PanelDockedSlideOptions): PanelDockedSlide;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},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;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"),[pinnedWidth,setPinnedWidth]=(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:hasCollapsedRest&&!isVisible?collapsedSize:minSize??collapsedSize,maxSize,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=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{}setPinnedWidth(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);setPinnedWidth("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)},waitsForRelaxedMinimum="exiting"===phase&&hasCollapsedRest,waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&waitsForRelaxedMinimum){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,pinnedWidth}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},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}};function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[pinnedWidth,setPinnedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),(0,_registry.useDeclarePanel)(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,isMounted),(0,_react.useLayoutEffect)(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"===phase&&setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let targetPx=resolveSizePx(targetSize,element.closest("[data-group]")?.getBoundingClientRect().width??null);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),durationMs+80)},waitForColumn=attempt=>{if(cancelled)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||reducedMotion?settle(animation?.getHandle(slot)??null):waitForColumn(0),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,animation,window,theme]),{isMounted,pinnedWidth}}

package/build/cjs/shared/mixins/index.d.ts

@@ -6,5 +6,4 @@ export { getBaseButtonStyles } from "./Button/getBaseButtonStyles";
 export { getPressedStyles } from "./Button/getPressedStyles";
 export { getPillStyles } from "./Button/getPillStyles";
 export { getFocusStyles } from "./getFocusStyles";
-export { getLeftPanelFadeStyles } from "./getLeftPanelFadeStyles";
 export { getPrimaryVariantStyles, getSecondaryVariantStyles, getTertiaryVariantStyles, } from "./Button/getVariantStyles";

package/build/cjs/shared/mixins/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getBaseButtonStyles(){return _getBaseButtonStyles.getBaseButtonStyles},get getButtonAppearanceReset(){return _getButtonAppearanceReset.getButtonAppearanceReset},get getDisabledStyles(){return _getDisabledStyles.getDisabledStyles},get getFocusStyles(){return _getFocusStyles.getFocusStyles},get getInputTextPlaceholder(){return _getInputTextPlaceholder.getInputTextPlaceholder},get getInputTextStyles(){return _getInputTextStyles.getInputTextStyles},get getLeftPanelFadeStyles(){return _getLeftPanelFadeStyles.getLeftPanelFadeStyles},get getPillStyles(){return _getPillStyles.getPillStyles},get getPressedStyles(){return _getPressedStyles.getPressedStyles},get getPrimaryVariantStyles(){return _getVariantStyles.getPrimaryVariantStyles},get getSecondaryVariantStyles(){return _getVariantStyles.getSecondaryVariantStyles},get getTertiaryVariantStyles(){return _getVariantStyles.getTertiaryVariantStyles}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _getInputTextPlaceholder=require("./TextInput/getInputTextPlaceholder"),_getInputTextStyles=require("./TextInput/getInputTextStyles"),_getDisabledStyles=require("./Button/getDisabledStyles"),_getButtonAppearanceReset=require("./Button/getButtonAppearanceReset"),_getBaseButtonStyles=require("./Button/getBaseButtonStyles"),_getPressedStyles=require("./Button/getPressedStyles"),_getPillStyles=require("./Button/getPillStyles"),_getFocusStyles=require("./getFocusStyles"),_getLeftPanelFadeStyles=require("./getLeftPanelFadeStyles"),_getVariantStyles=require("./Button/getVariantStyles");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getBaseButtonStyles(){return _getBaseButtonStyles.getBaseButtonStyles},get getButtonAppearanceReset(){return _getButtonAppearanceReset.getButtonAppearanceReset},get getDisabledStyles(){return _getDisabledStyles.getDisabledStyles},get getFocusStyles(){return _getFocusStyles.getFocusStyles},get getInputTextPlaceholder(){return _getInputTextPlaceholder.getInputTextPlaceholder},get getInputTextStyles(){return _getInputTextStyles.getInputTextStyles},get getPillStyles(){return _getPillStyles.getPillStyles},get getPressedStyles(){return _getPressedStyles.getPressedStyles},get getPrimaryVariantStyles(){return _getVariantStyles.getPrimaryVariantStyles},get getSecondaryVariantStyles(){return _getVariantStyles.getSecondaryVariantStyles},get getTertiaryVariantStyles(){return _getVariantStyles.getTertiaryVariantStyles}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _getInputTextPlaceholder=require("./TextInput/getInputTextPlaceholder"),_getInputTextStyles=require("./TextInput/getInputTextStyles"),_getDisabledStyles=require("./Button/getDisabledStyles"),_getButtonAppearanceReset=require("./Button/getButtonAppearanceReset"),_getBaseButtonStyles=require("./Button/getBaseButtonStyles"),_getPressedStyles=require("./Button/getPressedStyles"),_getPillStyles=require("./Button/getPillStyles"),_getFocusStyles=require("./getFocusStyles"),_getVariantStyles=require("./Button/getVariantStyles");