@amboss/design-system 4.3.2 → 4.3.3

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

@@ -4,8 +4,12 @@ import type { LayoutStorage, PanelImperativeHandle } from "react-resizable-panel
 type Size = number | string;
 export type PanelItem = {
     /** Stable id — used by react-resizable-panels to track the panel and persist
-     *  its size, and passed back to `hostFor`/`onResize`/`onCollapse`. */
+     *  its size, and passed back to `onResize`/`onCollapse`. */
     id: string;
+    /** This panel's interior. Wrapped in a full-bleed, `relative` host, so it
+     *  fills the column and anchors absolutely-positioned descendants without
+     *  sizing or positioning itself. */
+    child: React.ReactNode;
     defaultSize?: Size;
     minSize?: Size;
     maxSize?: Size;
@@ -23,8 +27,6 @@ export type PanelProps = {
     /** Persist sizes (keyed by `persistenceKey` + the current panel-id set). */
     persistenceKey?: string;
     storage?: LayoutStorage;
-    /** Ref callback for a panel's content host `<div>` (consumer portals into it). */
-    hostFor: (id: string) => (el: HTMLElement | null) => 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. */
@@ -45,9 +47,9 @@ export type PanelProps = {
 };
 /**
  * Internal resizable panel row — the only wrapper around react-resizable-panels.
- * Renders one Panel per item with a content host `<div>` (ref'd back via
- * `hostFor`), persists sizes, and reports drag-resize / drag-to-collapse. The
- * public `Layout` component is the intended consumer.
+ * Renders one Panel per item with that item's `child` in a full-bleed host,
+ * persists sizes, and reports drag-resize / drag-to-collapse. What a panel holds
+ * is the consumer's to decide; the public `Layout` component is the intended one.
  */
-export declare function Panel({ panels, persistenceKey, storage, hostFor, onResize, onCollapse, panelHandleFor, panelElementFor, shouldSuppressLayoutCallback, }: PanelProps): React.ReactElement;
+export declare function Panel({ panels, persistenceKey, storage, onResize, onCollapse, panelHandleFor, panelElementFor, shouldSuppressLayoutCallback, }: PanelProps): React.ReactElement;
 export {};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Panel",{enumerable:!0,get:function(){return Panel}});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:"e17tfb560",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPortalContainer=(0,_styled.default)("div",{target:"e17tfb561",label:"StyledPortalContainer"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,hostFor,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,minSize:item.minSize,maxSize:item.maxSize,panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPortalContainer,{ref:hostFor(item.id)})))}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Panel",{enumerable:!0,get:function(){return Panel}});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:"e1vzb9ge0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"e1vzb9ge1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,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,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/Layout/-constants.d.ts

@@ -26,10 +26,15 @@ export declare const TOGGLABLE_SLOTS: TogglableSlotKey[];
 /** Vertical offset for the right panel — set this (e.g. to a sticky subnav's
  *  height) and the panel tracks it; defaults to `0` when unset. */
 export declare const SUBNAV_OFFSET_VAR: "--ds-layout-subnav-offset";
+/** Widest `Layout.Content` and `Layout.Split` may grow to *together* while the
+ *  split is open; past it they stay centred with space either side. Defaults
+ *  to the `xxl` breakpoint - set it to widen, narrow, or uncap (`none`).
+ *  Ignored while the split is closed. */
+export declare const SPLIT_MAX_WIDTH_VAR: "--ds-layout-split-max-width";
 /** Live pixel width of a layout part. Always defined — falls back to `0px`
  *  while the part is hidden, so consumers don't need a `var(--x, 0px)` default:
  *  `width: calc(100% - var(--ds-layout-rightPanel-width))`.
- *  Keyed by slot; `usePanelWidthVars` publishes one var per entry. */
+ *  Keyed by slot; `useGlobalCssVariables` publishes one var per entry. */
 export declare const PANEL_WIDTH_VAR: {
     readonly content: "--ds-layout-content-width";
     readonly rightPanel: "--ds-layout-rightPanel-width";

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get SIDE_PANELS(){return SIDE_PANELS},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,PANEL_WIDTH_VAR={content:_layoutvars.LAYOUT_VARS.contentWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get PANELS(){return PANELS},get PANEL_ORDER(){return PANEL_ORDER},get PANEL_WIDTH_VAR(){return PANEL_WIDTH_VAR},get SIDE_PANELS(){return SIDE_PANELS},get SPLIT_MAX_WIDTH_VAR(){return SPLIT_MAX_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return SUBNAV_OFFSET_VAR},get Slot(){return Slot},get TOGGLABLE_SLOTS(){return TOGGLABLE_SLOTS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _layoutvars=require("../../web-tokens/layout-vars"),Slot={leftPanel:"leftPanel",content:"content",splitview:"splitview",rightPanel:"rightPanel"},SIDE_PANELS=[Slot.leftPanel,Slot.rightPanel],PANELS=[Slot.content,Slot.splitview],PANEL_ORDER=[Slot.leftPanel,Slot.content,Slot.splitview,Slot.rightPanel],TOGGLABLE_SLOTS=PANEL_ORDER.filter(slot=>slot!==Slot.content),SUBNAV_OFFSET_VAR=_layoutvars.LAYOUT_VARS.subnavOffset,SPLIT_MAX_WIDTH_VAR=_layoutvars.LAYOUT_VARS.splitMaxWidth,PANEL_WIDTH_VAR={content:_layoutvars.LAYOUT_VARS.contentWidth,rightPanel:_layoutvars.LAYOUT_VARS.rightPanelWidth};

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

@@ -1,6 +1,7 @@
 import type React from "react";
 import type { PanelKey, SidePanelKey, SlotKey } from "./-constants";
 import type { PanelHeaderTitle } from "../Internal/PanelHeader/PanelHeader";
+import type { SandwichSeparator } from "../Internal/Sandwich/-types";
 /**
  * Surface = compound components (`Layout.LeftPanel` / `Layout.RightPanel` /
  * `Layout.Content` / `Layout.Split`) + one control hook
@@ -65,7 +66,9 @@ export type RightPanelState = SidePanelStateBase & {
 };
 /** Either side panel, for code that handles both. */
 export type SidePanelState = LeftPanelState | RightPanelState;
-/** Actions every slot handle exposes, whatever its state shape. */
+/** Actions every slot handle exposes, whatever its state shape. No `resize`:
+ *  sizes are declarative (`defaultSize` on the panel, then drag), and the
+ *  content/split pair is CSS-split, so an imperative size wouldn't hold. */
 export type PanelHandleActions = {
     /** Whether the slot is currently shown. */
     isVisible: boolean;
@@ -73,8 +76,6 @@ export type PanelHandleActions = {
     show: () => void;
     /** Hide the slot. */
     hide: () => void;
-    /** Set the slot size (number = px, unitless string = %). */
-    resize: (size: Size) => void;
     /** Restore this slot to its config default (hides it for page panels). */
     reset: () => void;
 };
@@ -119,6 +120,12 @@ export type PanelConfig = {
     minSize?: Size;
     maxSize?: Size;
 };
+/** The split view carries no size of its own: it takes half of
+ *  `Layout.Content`'s column whenever it's open, capped by
+ *  `--ds-layout-split-max-width`. */
+export type SplitConfig = {
+    defaultVisible?: boolean;
+};
 /**
  * Master switch for the side/split panels.
  * - `false` (default) - panel markers declare nothing and render nothing;
@@ -134,10 +141,16 @@ export type LayoutPanelsMode = boolean | "mobile";
 export type LayoutConfig = {
     /** See {@link LayoutPanelsMode}. Default `false`. */
     enablePanels?: LayoutPanelsMode;
+    /** Slots whose markers may mount later, counted as declared for the
+     *  solo-vs-resizable decision - so a marker nested inside another panel
+     *  (which must mount after its ancestor) doesn't flip the mode and remount
+     *  everything once it appears. Renders nothing itself; `splitview` never
+     *  needs it, since it shares `content`'s column rather than a row slot. */
+    reservedSlots?: SlotKey[];
     leftPanel?: LeftPanelConfig;
     rightPanel?: RightPanelConfig;
     content?: PanelConfig;
-    splitview?: PanelConfig;
+    splitview?: SplitConfig;
 };
 /**
  * A layer over the store: `maxDockedPanels` sets columns per breakpoint (pinned
@@ -262,7 +275,14 @@ export type LayoutValue = {
     content: PanelHandle;
     splitview: PanelHandle;
 };
-export type SidePanelProps = {
+/** Forwarded to a panel's underlying scroll container (scroll restoration,
+ *  custom scroll handling). Shared by every panel-like slot backed by a
+ *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `splitview`. */
+export type ForwardedScrollProps = {
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+    onScroll?: React.UIEventHandler<HTMLDivElement>;
+};
+export type SidePanelProps = ForwardedScrollProps & {
     /** Panel content in source order. Header/footer components
      *  (e.g. `<Layout.LeftPanelHeader />`) stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -277,8 +297,8 @@ export type SidePanelProps = {
      *  provider config's `resizable`, which defaults `false` for the left panel
      *  and `true` for the right. When `false`, the column is fixed at
      *  `defaultSize` - neighbours can't resize it either, though they stay
-     *  resizable against each other. Showing and hiding the panel still works.
-     *  No effect on the mobile drawer/sheet. */
+     *  resizable against each other. Showing and hiding the panel still works. No
+     *  effect on the mobile drawer/sheet. */
     resizable?: boolean;
     /** Called whenever the panel's visibility changes, with the new value. */
     onVisibleChange?: (visible: boolean) => void;
@@ -294,27 +314,27 @@ export type ContentProps = {
     minSize?: Size;
     maxSize?: Size;
 };
-export type SplitProps = {
+/**
+ * The split view has no sizing props - open, it takes half of
+ * `Layout.Content`'s column, the pair capped by `--ds-layout-split-max-width`
+ * (default: the `xxl` breakpoint) and centred once past it.
+ */
+export type SplitProps = ForwardedScrollProps & {
     /** Panel content in source order. `<Layout.SplitHeader />` /
      *  `<Layout.SplitFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
     /** Accessible name; when set, the panel renders as a `region` landmark. */
     "aria-label"?: string;
-    /** Number = pixels, unitless string = percent (e.g. `"30%"`). */
-    defaultSize?: Size;
-    minSize?: Size;
-    maxSize?: Size;
-    /** Desktop only: allow drag-resizing the column. Default `true`. When
-     *  `false`, the column is fixed at `defaultSize` - it has no drag handle of
-     *  its own and neighbours can't resize it, though they stay resizable against
-     *  each other. No effect on mobile (a full-area view). */
-    resizable?: boolean;
+    /** Called whenever the panel's visibility changes, with the new value. */
+    onVisibleChange?: (visible: boolean) => void;
+    "data-e2e-test-id"?: string;
 };
 /** Props of the internal mobile presentation of `Layout.Split`. */
-export type MobileSplitViewProps = {
+export type MobileSplitViewProps = ForwardedScrollProps & {
     children: React.ReactNode;
     /** Accessible name; when set, the view renders as a `region` landmark. */
     "aria-label"?: string;
+    "data-e2e-test-id"?: string;
 };
 export type LayoutProviderProps = {
     children: React.ReactNode;
@@ -394,18 +414,36 @@ export type RightPanelHeaderProps = PanelSlotHeaderProps & {
     slotProps: RightPanelHeaderSlotProps;
 };
 export type RightPanelFooterProps = PanelSlotFooterProps;
-export type SplitHeaderProps = PanelSlotHeaderProps;
+/**
+ * Title shown in the split view header, after `leftSlot`. Visual only — the
+ * panel's accessible name comes from `Layout.Split`'s `aria-label`.
+ */
+export type SplitHeaderTitle = PanelHeaderTitle;
+export type SplitHeaderSlotProps = {
+    /** Props for the built-in close button, rendered after `rightSlot`. Clicking
+     *  it hides the panel. Omit to render none - useful when a consumer
+     *  intercepts the close action itself via its own button and
+     *  `onVisibleChange`. */
+    closeButton?: {
+        "aria-label": string;
+    };
+};
+export type SplitHeaderProps = PanelSlotHeaderProps & {
+    /** Title block (icon + heading), rendered after `leftSlot`. */
+    title?: SplitHeaderTitle;
+    /** Props forwarded to internal sub-components. */
+    slotProps?: SplitHeaderSlotProps;
+    /** Bottom divider visibility. `"auto"` (default) shows it only once content
+     *  is scrolled under the header; `"always"` / `"never"` override that. */
+    showSeparator?: SandwichSeparator;
+};
 export type SplitFooterProps = PanelSlotFooterProps;
-export type PanelContainerProps = {
+export type PanelContainerProps = ForwardedScrollProps & {
     /** Content in source order. Per-panel header/footer components stick to the
      *  edges; everything else scrolls. */
     children: React.ReactNode;
     /** Accessible name; when set, the container renders as a `region` landmark. */
     "aria-label"?: string;
-    /** Forwarded to the scroll container element (scroll restoration etc.). */
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    /** Forwarded to the scroll container's scroll handler. */
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Draws a separator border on the panel's left edge. */
     showBorderLeft?: boolean;
     /** Draws a separator border on the panel's right edge. */
@@ -418,10 +456,6 @@ export type RightPanelProps = SidePanelProps & {
     /** Presentation the panel starts in on first load. Runtime state from then on
      *  (the header's toggle, `setVariant`). Default `"sidebar"`. */
     variant?: RightPanelVariant;
-    /** Forwarded to the scrollable body element (scroll restoration etc.). */
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    /** Forwarded to the scrollable body's scroll handler. */
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
     /** Called whenever the panel's render variant changes (docked ↔ float),
      *  with the new value. Not called on initial mount. */
     onVariantChange?: (variant: RightPanelVariant) => void;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Layout",{enumerable:!0,get:function(){return Layout}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_useFloatablePortalTargets=require("./useFloatablePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let 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.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())},[contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"elbydir0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledSoloHost=(0,_styled.default)("div",{target:"elbydir1",label:"StyledSoloHost"})({position:"relative",height:"100%",width:"100%"}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"elbydir2",label:"StyledMobileSplitStackHost"})({position:"absolute",inset:0,overflow:"hidden",pointerEvents:"none"}),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 persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_useFloatablePortalTargets.useFloatablePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let declaredSlots=_constants.PANEL_ORDER.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],defaultSizeFor=slot=>{if(slot!==_constants.Slot.content)return declared[slot]?.defaultSize??layoutState[slot].size},panelItems=_constants.PANEL_ORDER.filter(slot=>declared[slot]&&(isShown(slot)||present[slot])).map(slot=>({id:slot,defaultSize:defaultSizeFor(slot),minSize:declared[slot]?.minSize??layoutState[slot].minSize,maxSize:declared[slot]?.maxSize??layoutState[slot].maxSize,collapsible:slot!==_constants.Slot.content&&(declared[slot]?.collapsible??!0),resizable:declared[slot]?.resizable??resizableFromState(layoutState[slot])})),soloHost=soloSlot&&isShown(soloSlot)?_react.default.createElement(StyledSoloHost,{ref:slotHostRefs[soloSlot]}):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,hostFor:id=>slotHostRefs[id],onResize:(id,size)=>panelCallbacks[id].resize(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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Layout",{enumerable:!0,get:function(){return Layout}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_useFloatablePortalTargets=require("./useFloatablePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let 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.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())},[contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"e1oaall10",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"e1oaall11",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1oaall12",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:"100%",width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e1oaall13",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e1oaall14",label:"StyledMobileSplitStackHost"})({position:"absolute",inset:0,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=(slot,declared,layoutState)=>{if(slot===_constants.Slot.content)return;let declaredSize=declared[slot]?.defaultSize;return void 0!==declaredSize?declaredSize:declared[slot]?.resizable!==!1?layoutState[slot].size:void 0},childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_useFloatablePortalTargets.useFloatablePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=(0,_context.useLayoutReservedSlots)(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>({id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor(slot,declared,layoutState),minSize:declared[slot]?.minSize??layoutState[slot].minSize,maxSize:declared[slot]?.maxSize??layoutState[slot].maxSize,collapsible:slot!==_constants.Slot.content&&(declared[slot]?.collapsible??!0),resizable:declared[slot]?.resizable??resizableFromState(layoutState[slot])})),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;

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

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

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_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})=>{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},children):_react.default.createElement(_LeftPanelDocked.LeftPanelDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,collapsible:collapsible,resizable:resizable},children):null};
+"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,6 +1,6 @@
 import React from "react";
-import type { Size } from "../-types";
-export type LeftPanelDockedProps = {
+import type { ForwardedScrollProps, Size } from "../-types";
+export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
     "aria-label"?: string;
     defaultSize?: Size;

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 _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})=>{let{isMounted,pinnedWidth}=(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable});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},children)):null)};
+"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});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.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export type LeftPanelDrawerProps = {
+import type { ForwardedScrollProps } from "../-types";
+export type LeftPanelDrawerProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
     hide: () => void;

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"),StyledLeftPanelBody=(0,_styled.default)("div",{target:"e14wbnl40",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"}),LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel})=>_react.default.createElement(_Drawer.Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},_react.default.createElement(StyledLeftPanelBody,null,_react.default.createElement(_PanelContainer.PanelContainer,null,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/RightPanel/RightPanelDocked.d.ts

@@ -1,13 +1,11 @@
 import React from "react";
-import type { RightPanelVariant } from "../-types";
-export type RightPanelDockedProps = {
+import type { ForwardedScrollProps, RightPanelVariant } from "../-types";
+export type RightPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
     /** Docked column vs. minimized floating window - only the border differs here. */
     variant: RightPanelVariant;
     "aria-label": string;
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
 };
 /**
  * Docked (desktop) right panel. Portals its content into the `rightPanel` slot's

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelDocked",{enumerable:!0,get:function(){return RightPanelDocked}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_constants=require("../-constants"),_registry=require("../registry"),_PanelContainer=require("../PanelContainer"),StyledRightPanelSlot=(0,_styled.default)("div",{target:"eq48lip0",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,top:`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`})),RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>(0,_registry.useLayoutPortal)(_constants.Slot.rightPanel,isVisible?_react.default.createElement(StyledRightPanelSlot,null,_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelDocked",{enumerable:!0,get:function(){return RightPanelDocked}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_constants=require("../-constants"),_registry=require("../registry"),_PanelContainer=require("../PanelContainer"),StyledRightPanelSlot=(0,_styled.default)("div",{target:"e19zlvfp0",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,top:`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`})),RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>(0,_registry.useLayoutPortal)(_constants.Slot.rightPanel,isVisible?_react.default.createElement(StyledRightPanelSlot,null,_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);

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

@@ -1,11 +1,10 @@
 import React from "react";
-export type RightPanelSheetProps = {
+import type { ForwardedScrollProps } from "../-types";
+export type RightPanelSheetProps = ForwardedScrollProps & {
     children: React.ReactNode;
     isVisible: boolean;
     hide: () => void;
     "aria-label": string;
-    scrollContainerRef?: React.Ref<HTMLDivElement>;
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
 };
 /**
  * Mobile right panel. Renders its content as a bottom {@link Sheet} instead of an

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelSheet",{enumerable:!0,get:function(){return RightPanelSheet}});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")),_PanelContainer=require("../PanelContainer"),_Sheet=require("../../Sheet/Sheet"),StyledSheetPanelShell=(0,_styled.default)("div",{target:"e1wbhy260",label:"StyledSheetPanelShell"})({height:_Sheet.SHEET_MAX_HEIGHT}),RightPanelSheet=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>_react.default.createElement(_Sheet.Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},_react.default.createElement(StyledSheetPanelShell,null,_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelSheet",{enumerable:!0,get:function(){return RightPanelSheet}});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")),_PanelContainer=require("../PanelContainer"),_Sheet=require("../../Sheet/Sheet"),StyledSheetPanelShell=(0,_styled.default)("div",{target:"eqso66w0",label:"StyledSheetPanelShell"})({height:_Sheet.SHEET_MAX_HEIGHT}),RightPanelSheet=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>_react.default.createElement(_Sheet.Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},_react.default.createElement(StyledSheetPanelShell,null,_react.default.createElement(_PanelContainer.PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentSplitBase",{enumerable:!0,get:function(){return ContentSplitBase}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_reactdom=require("react-dom"),_StyledMobileSplitSlideLayer=require("./StyledMobileSplitSlideLayer"),_useMobileSplitStack=require("./useMobileSplitStack"),_useMobileSplitView=require("./useMobileSplitView"),ContentSplitBase=({children})=>{let{isSplitViewActive}=(0,_useMobileSplitView.useMobileSplitView)(),{host}=(0,_useMobileSplitStack.useMobileSplitStack)();return host?(0,_reactdom.createPortal)(_react.default.createElement(_StyledMobileSplitSlideLayer.StyledMobileSplitSlideLayer,{layer:"base",offset:(0,_useMobileSplitView.contentOffsetFor)(isSplitViewActive)},children),host):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentSplitBase",{enumerable:!0,get:function(){return ContentSplitBase}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_reactdom=require("react-dom"),_StyledMobileSplitSlideLayer=require("./StyledMobileSplitSlideLayer"),_useMobileSplitStack=require("./useMobileSplitStack"),_useMobileSplitView=require("./useMobileSplitView"),ContentSplitBase=({children})=>{let{isSplitViewActive}=(0,_useMobileSplitView.useMobileSplitView)(),{host}=(0,_useMobileSplitStack.useMobileSplitStack)();if(!host)return null;let offset=(0,_useMobileSplitView.contentOffsetFor)(isSplitViewActive);return(0,_reactdom.createPortal)(_react.default.createElement(_StyledMobileSplitSlideLayer.StyledMobileSplitSlideLayer,{layer:"base",offset:offset,inert:0===offset?void 0:""},children),host)};

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

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

package/build/cjs/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.d.ts

@@ -8,7 +8,9 @@ export type MobileSplitLayer = keyof typeof LAYER_Z_INDEX;
  * One layer of the two-view mobile split. Slides to `offset` - -1 (parked to the
  * left), 0 (in view), 1 (parked to the right) - so switching pushes the outgoing
  * view toward the side it rests on while the incoming one slides in from the
- * opposite edge, like a Drawer.
+ * opposite edge, like a Drawer. A parked layer is `inert`: besides blocking
+ * pointer events, this keeps its controls out of the tab order and hidden from
+ * assistive tech while it sits off-screen.
  */
 export declare const StyledMobileSplitSlideLayer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledMobileSplitSlideLayer",{enumerable:!0,get:function(){return StyledMobileSplitSlideLayer}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2},StyledMobileSplitSlideLayer=(0,_styled.default)("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e187cevn0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledMobileSplitSlideLayer",{enumerable:!0,get:function(){return StyledMobileSplitSlideLayer}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2},StyledMobileSplitSlideLayer=(0,_styled.default)("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"et3u54n0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});

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

@@ -1,10 +1,9 @@
 import React from "react";
 import type { SplitProps } from "../-types";
 /**
- * Split view panel. Picks its presentation by breakpoint: an in-flow resizable
- * column on desktop ({@link SplitDocked}) and a full-area {@link MobileSplitView}
- * that slides over `content` on mobile. Both are driven by the same state - the
- * `splitview` slot's visibility (`useLayout().splitview` / `useMobileSplitView`)
- * - so showing or hiding the split behaves identically on either breakpoint.
+ * Split view panel. Picks its presentation by breakpoint: an in-flow column
+ * beside `Layout.Content` on desktop ({@link SplitDocked}, always half its
+ * width) or a full-area {@link MobileSplitView} on mobile - both driven by the
+ * same `splitview` slot visibility, so open/close behaves identically either way.
  */
 export declare const Split: React.FC<SplitProps>;

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

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

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

@@ -2,7 +2,7 @@ import React from "react";
 import type { SplitProps } from "../-types";
 /**
  * Desktop split view. Declares the `splitview` slot and portals its content
- * while visible - an in-flow resizable column beside `content`.
+ * while visible - the right-hand half of `Layout.Content`'s column.
  * `Layout.SplitHeader` / `Layout.SplitFooter` children stick to the panel
  * edges; the remaining content scrolls.
  */

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

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

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

@@ -1,7 +1,9 @@
 import React from "react";
 import type { SplitHeaderProps } from "../-types";
 /**
- * Optional sticky header for `Layout.Split` - place it among the panel's
- * children; it sticks to the top while the rest of the content scrolls.
+ * Optional sticky header for `Layout.Split` - sticks to the top while the rest
+ * scrolls. Renders `title` after `leftSlot` and, when `slotProps.closeButton`
+ * is supplied, a close button after `rightSlot` that hides the panel - shown
+ * on mobile too, since `MobileSplitView` has no other way to dismiss it.
  */
-export declare function SplitHeader({ leftSlot, rightSlot, "data-e2e-test-id": dataE2eTestId, }: SplitHeaderProps): React.ReactElement;
+export declare function SplitHeader({ leftSlot, rightSlot, title, slotProps, showSeparator, "data-e2e-test-id": dataE2eTestId, }: SplitHeaderProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitHeader",{enumerable:!0,get:function(){return SplitHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader");function SplitHeader({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}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitHeader",{enumerable:!0,get:function(){return SplitHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton");function SplitHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let{hide}=(0,_useLayout.useLayout)()[_constants.Slot.splitview],closeButtonSlotProps=slotProps?.closeButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,rightSlot,closeButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":closeButtonSlotProps["aria-label"],onClick:hide}))}))}

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

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

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

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

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

@@ -1,4 +1,3 @@
-export { SUBNAV_OFFSET_VAR, PANEL_WIDTH_VAR } from "./-constants";
 export { Layout } from "./Layout";
 export { LayoutProvider } from "./LayoutProvider";
 export { useLayoutVar } from "./LayoutCssVars";

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get DEFAULT_LAYOUT_RULES(){return _rules.DEFAULT_LAYOUT_RULES},get Layout(){return _Layout.Layout},get LayoutProvider(){return _LayoutProvider.LayoutProvider},get PANEL_WIDTH_VAR(){return _constants.PANEL_WIDTH_VAR},get SUBNAV_OFFSET_VAR(){return _constants.SUBNAV_OFFSET_VAR},get createInitialState(){return _reducer.createInitialState},get createLayoutStore(){return _store.createLayoutStore},get layoutReducer(){return _reducer.layoutReducer},get useAutoScrollToBottom(){return _useAutoScrollToBottom.useAutoScrollToBottom},get useLayout(){return _useLayout.useLayout},get useLayoutVar(){return _LayoutCssVars.useLayoutVar},get useMobileSplitView(){return _useMobileSplitView.useMobileSplitView}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_constants=require("./-constants"),_Layout=require("./Layout"),_LayoutProvider=require("./LayoutProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_rules=require("./rules"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_useAutoScrollToBottom=require("./useAutoScrollToBottom"),_store=require("./store"),_reducer=require("./reducer");_export_star._(require("./-types"),exports);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get DEFAULT_LAYOUT_RULES(){return _rules.DEFAULT_LAYOUT_RULES},get Layout(){return _Layout.Layout},get LayoutProvider(){return _LayoutProvider.LayoutProvider},get createInitialState(){return _reducer.createInitialState},get createLayoutStore(){return _store.createLayoutStore},get layoutReducer(){return _reducer.layoutReducer},get useAutoScrollToBottom(){return _useAutoScrollToBottom.useAutoScrollToBottom},get useLayout(){return _useLayout.useLayout},get useLayoutVar(){return _LayoutCssVars.useLayoutVar},get useMobileSplitView(){return _useMobileSplitView.useMobileSplitView}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_Layout=require("./Layout"),_LayoutProvider=require("./LayoutProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_rules=require("./rules"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_useAutoScrollToBottom=require("./useAutoScrollToBottom"),_store=require("./store"),_reducer=require("./reducer");_export_star._(require("./-types"),exports);

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayout",{enumerable:!0,get:function(){return useLayout}});const _react=require("react"),_context=require("./context"),_registry=require("./registry"),selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),resize:size=>dispatch({type:"resize",slot,size}),reset:()=>dispatch({type:"reset",slot})}}function useLayout(){let store=(0,_context.useLayoutStore)(),state=(0,_context.useLayoutSelector)(selectAll),declared=(0,_react.useContext)(_registry.PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useLayout",{enumerable:!0,get:function(){return useLayout}});const _react=require("react"),_context=require("./context"),_registry=require("./registry"),selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}function useLayout(){let store=(0,_context.useLayoutStore)(),state=(0,_context.useLayoutSelector)(selectAll),declared=(0,_react.useContext)(_registry.PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}

package/build/cjs/web-tokens/layout-vars.d.ts

@@ -1,6 +1,7 @@
 export declare const LAYOUT_VARS: {
     readonly contentWidth: "--ds-layout-content-width";
     readonly rightPanelWidth: "--ds-layout-rightPanel-width";
+    readonly splitMaxWidth: "--ds-layout-split-max-width";
     readonly subnavOffset: "--ds-layout-subnav-offset";
     readonly floatWidth: "--ds-layout-float-width";
     readonly floatHeight: "--ds-layout-float-height";

package/build/cjs/web-tokens/layout-vars.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LAYOUT_VARS",{enumerable:!0,get:function(){return LAYOUT_VARS}});const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",rightPanelWidth:"--ds-layout-rightPanel-width",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LAYOUT_VARS",{enumerable:!0,get:function(){return LAYOUT_VARS}});const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",rightPanelWidth:"--ds-layout-rightPanel-width",splitMaxWidth:"--ds-layout-split-max-width",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height"};