npm - @amboss/design-system - Versions diffs - 4.6.6-canary.0 → 4.6.6 - Mend

@amboss/design-system 4.6.6-canary.0 → 4.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

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

@@ -19,9 +19,6 @@ export type PanelHeaderProps = {
     title?: PanelHeaderTitle;
     /** 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;
 };
 /**
@@ -31,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 CHANGED Viewed

	@@ -1 +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:"erbiwc20",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=(0,_styled.default)("div",{target:"erbiwc21",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=(0,_styled.default)("div",{target:"erbiwc22",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded:isContentFaded})})),StyledTrailingGroup=(0,_styled.default)("div",{target:"erbiwc23",label:"StyledTrailingGroup"})({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,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))))))}
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeader",{enumerable:!0,get:function(){return PanelHeader}});const _react=/#__PURE__/require("@swc/helpers/_/_interop_require_default")._(require("react")),_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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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});
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:"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 CHANGED Viewed

@@ -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;
@@ -407,18 +379,6 @@ export type PanelSlotFooterProps = {
 };
 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`.
@@ -481,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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:"e9afqos0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e9afqos1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e9afqos2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e9afqos3",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:"e9afqos4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e9afqos5",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)}}),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})},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"},_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;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/#__PURE__/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/#__PURE__/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_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 CHANGED Viewed

	@@ -1 +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])}~~;
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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:"e1qhx45f0",label:"StyledLeftBarColumn"})(({theme})=>({position:"relative",...(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)))};
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,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 CHANGED Viewed

	@@ -1 +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)))};
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:"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 CHANGED Viewed

	@@ -1 +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))}
1	+ "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.js CHANGED Viewed

	@@ -1 +1 @@
1	- "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")~~,_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext")~~;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~~,isContentFaded:(0,_useLeftPanelCollapseContext.useLeftPanelCollapseContext)().isContentFaded~~}))}
1	+ "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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/rules.js CHANGED Viewed

	@@ -1 +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())}}};
1	+ "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 CHANGED Viewed

	@@ -1 +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])}
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\|\|"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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")?1e3parseFloat(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/100groupWidthPx: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)(),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))~~;let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;return~~(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),(0,_react.useLayoutEffect)(()=>{if(!hasCollapsedRest)return;let frame=0,restSize=isVisible?openSize??minSize:collapsedSize,resizeToRest=attempt=>{let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return resizeToRest(0),()=>window.cancelAnimationFrame(frame)},[]),(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}}
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")?1e3parseFloat(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/100groupWidthPx: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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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");
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 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");