@amboss/design-system 4.8.2-canary.0 → 4.8.2-canary.1

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { IconProps } from "../../Icon/Icon";
+import type { HeaderProps } from "../../Typography/Header/Header";
 /**
  * Title shown in the header, after `leftSlot`. Visual only — the owning
  * panel's accessible name comes from its `aria-label`.
@@ -8,6 +9,9 @@ export type PanelHeaderTitle = {
     /** Visible title label. Clamped, so a label that outruns the header
      *  truncates on one line rather than reflowing the panel body beneath it. */
     label: React.ReactNode;
+    /** Element the label renders as, to fit the page's heading outline. Styling
+     *  stays `H5`'s whatever the tag. Default `"h5"`. */
+    as?: HeaderProps["as"];
     /** Optional leading icon. Decorative — the visible label names it. */
     icon?: Omit<IconProps, "size" | "aria-label" | "aria-labelledby" | "role">;
     /** Show the title block. Default `true`. */

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

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

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

@@ -19,6 +19,10 @@ export declare const PANEL_ORDER: readonly ["leftPanel", "content", "splitview",
 export type SlotKey = (typeof PANEL_ORDER)[number];
 export type SidePanelKey = (typeof SIDE_PANELS)[number];
 export type PanelKey = (typeof PANELS)[number];
+/** Presentation the left panel is in until the config or a `setVariant`
+ *  says otherwise. The store leaves `variant` unset until then, so every
+ *  reader resolves it against this. */
+export declare const DEFAULT_LEFT_PANEL_VARIANT = "sidebar";
 /** Everything but pinned `content`, which never competes for row space. */
 export type TogglableSlotKey = Exclude<SlotKey, typeof Slot.content>;
 /** Slots the app opens/closes, in `PANEL_ORDER`. */

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

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

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

@@ -103,15 +103,14 @@ export type LayoutState = {
 export type SidePanelConfig = {
     defaultVisible?: boolean;
     collapsible?: boolean;
-    /** Desktop only: allow drag-resizing the panel's column. Defaults `false` for
-     *  the left panel, `true` for the right. The panel's own `resizable` prop
-     *  overrides this. */
+    /** Desktop only: allow drag-resizing the panel's column. Default `true`. The
+     *  panel's own `resizable` prop overrides this. */
     resizable?: boolean;
     defaultSize?: Size;
     minSize?: Size;
     maxSize?: Size;
 };
-export type LeftPanelConfig = SidePanelConfig & {
+export type LeftPanelConfig = Omit<SidePanelConfig, "defaultSize" | "minSize" | "maxSize" | "resizable"> & {
     /** Presentation the panel starts in. Default `"sidebar"`. */
     variant?: LeftPanelVariant;
 };
@@ -300,8 +299,7 @@ export type SidePanelProps = ForwardedScrollProps & {
     minSize?: Size;
     maxSize?: Size;
     /** Desktop only: allow drag-resizing the panel's column. Overrides the
-     *  provider config's `resizable`, which defaults `false` for the left panel
-     *  and `true` for the right. When `false`, the column is fixed at
+     *  provider config's `resizable`. When `false`, the column is fixed at
      *  `defaultSize` - neighbours can't resize it either, though they stay
      *  resizable against each other. Showing and hiding the panel still works. No
      *  effect on the mobile drawer/sheet. */
@@ -309,28 +307,22 @@ 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 the left panel hands to the parts it renders itself. */
+export type LeftPanelSlotProps = {
+    toggleButton: {
+        /** Accessible name for the left bar's open button, which is icon-only. */
+        "aria-label": string;
+        "data-e2e-test-id"?: string;
+    };
+};
+/** No sizing or resizing props: the left panel always opens to the
+ *  `layout.leftPanel.width.open` token. */
+export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "minSize" | "maxSize" | "resizable"> & {
     /** 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;
-        };
-    };
+    slotProps: LeftPanelSlotProps;
     /** 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;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { CSSObject, Theme } from "@emotion/react";
-import type { ForwardedScrollProps } from "../-types";
+import type { ForwardedScrollProps, LeftPanelSlotProps } from "../-types";
 /**
  * The box the layers live in: one surface, one divider, and a clip. Shared by
  * the two presentations that carry a left bar - the in-row column and the offcanvas
@@ -31,8 +31,7 @@ export type LeftBarLayersProps = ForwardedScrollProps & {
     isVisible: boolean;
     /** Width the panel's content holds on to while the box is narrower. */
     openWidth: string;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
+    slotProps: LeftPanelSlotProps;
     "aria-label"?: string;
 };
 /**

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LEFT_BAR_TOP_INSET(){return LEFT_BAR_TOP_INSET},get LeftBarLayers(){return LeftBarLayers},get getLeftBarColumnStyles(){return getLeftBarColumnStyles},get getLeftBarTopTransition(){return getLeftBarTopTransition}};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")),_useDocument=require("../../../shared/useDocument"),_mixins=require("../../../shared/mixins"),_constants=require("../-constants"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelId=require("../useLeftPanelId"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),_useLeftBarContext=require("./useLeftBarContext"),_LeftBarToggle=require("./LeftBarToggle"),getLeftBarColumnStyles=theme=>({overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}}),LEFT_BAR_TOP_INSET=`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,getLeftBarTopTransition=theme=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return`top ${duration} ${timingFunction}`},StyledLeftBarLayer=(0,_styled.default)("div",{target:"e1oedn8k0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=(0,_styled.default)("div",{target:"e1oedn8k1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=(0,_styled.default)("div",{target:"e1oedn8k2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=(0,_styled.default)("div",{target:"e1oedn8k3",label:"StyledFadingContent"})(({theme,isFaded,pinnedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:pinnedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()},LeftBarLayers=({children,isVisible,openWidth,toggleButtonLabel,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)(),document=(0,_useDocument.useDocument)(),leftBarLayerRef=(0,_react.useRef)(null),panelLayerRef=(0,_react.useRef)(null),toggleRef=(0,_react.useRef)(null),[leftBarSlotNode,setLeftBarSlotNode]=(0,_react.useState)(null),leftBarSlot=(0,_react.useMemo)(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=(0,_react.useMemo)(()=>({isContentFaded,pinnedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=(0,_react.useRef)(isVisible);return(0,_react.useEffect)(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),_react.default.createElement(_useLeftBarContext.LeftBarProvider,{value:leftBarSlot},_react.default.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},_react.default.createElement(_LeftBarToggle.LeftBarToggle,{"aria-label":toggleButtonLabel,buttonRef:toggleRef}),_react.default.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),_react.default.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(_useLeftPanelCollapseContext.LeftPanelCollapseProvider,{value:collapseState},_react.default.createElement(StyledFadingContent,{isFaded:isContentFaded,pinnedContentWidth:openWidth},children)))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LEFT_BAR_TOP_INSET(){return LEFT_BAR_TOP_INSET},get LeftBarLayers(){return LeftBarLayers},get getLeftBarColumnStyles(){return getLeftBarColumnStyles},get getLeftBarTopTransition(){return getLeftBarTopTransition}};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")),_useDocument=require("../../../shared/useDocument"),_mixins=require("../../../shared/mixins"),_constants=require("../-constants"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_useLeftPanelId=require("../useLeftPanelId"),_useLeftPanelCollapseContext=require("./useLeftPanelCollapseContext"),_useLeftBarContext=require("./useLeftBarContext"),_LeftBarToggle=require("./LeftBarToggle"),getLeftBarColumnStyles=theme=>({overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}}),LEFT_BAR_TOP_INSET=`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,getLeftBarTopTransition=theme=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return`top ${duration} ${timingFunction}`},StyledLeftBarLayer=(0,_styled.default)("div",{target:"e1gwfcgt0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=(0,_styled.default)("div",{target:"e1gwfcgt1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=(0,_styled.default)("div",{target:"e1gwfcgt2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=(0,_styled.default)("div",{target:"e1gwfcgt3",label:"StyledFadingContent"})(({theme,isFaded,fixedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:fixedContentWidth,...(0,_mixins.getLeftPanelFadeStyles)({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()},LeftBarLayers=({children,isVisible,openWidth,slotProps,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=(0,_useLeftPanelId.useLeftPanelId)(),document=(0,_useDocument.useDocument)(),leftBarLayerRef=(0,_react.useRef)(null),panelLayerRef=(0,_react.useRef)(null),toggleRef=(0,_react.useRef)(null),[leftBarSlotNode,setLeftBarSlotNode]=(0,_react.useState)(null),leftBarSlot=(0,_react.useMemo)(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=(0,_react.useMemo)(()=>({isContentFaded,fixedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=(0,_react.useRef)(isVisible);return(0,_react.useEffect)(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),_react.default.createElement(_useLeftBarContext.LeftBarProvider,{value:leftBarSlot},_react.default.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},_react.default.createElement(_LeftBarToggle.LeftBarToggle,{...slotProps.toggleButton,buttonRef:toggleRef}),_react.default.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),_react.default.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},_react.default.createElement(_Sandwich.Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(_useLeftPanelCollapseContext.LeftPanelCollapseProvider,{value:collapseState},_react.default.createElement(StyledFadingContent,{isFaded:isContentFaded,fixedContentWidth:openWidth},children)))))};

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

@@ -1,7 +1,6 @@
 import React from "react";
-export type LeftBarToggleProps = {
-    /** Accessible name for the button, which is icon-only. */
-    "aria-label"?: string;
+import type { LeftPanelSlotProps } from "../-types";
+export type LeftBarToggleProps = LeftPanelSlotProps["toggleButton"] & {
     /** Handed out so the layer above can put focus here when the panel closes -
      *  this is the control that replaces the one the panel is taking away. */
     buttonRef?: React.Ref<HTMLButtonElement>;
@@ -12,4 +11,4 @@ export type LeftBarToggleProps = {
  * adds content beneath it - because a panel that authored no nav bar would
  * otherwise close to a strip with no way back out of it.
  */
-export declare function LeftBarToggle({ "aria-label": ariaLabel, buttonRef, }: LeftBarToggleProps): React.ReactElement;
+export declare function LeftBarToggle({ "aria-label": ariaLabel, "data-e2e-test-id": dataE2eTestId, buttonRef, }: LeftBarToggleProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftBarToggle",{enumerable:!0,get:function(){return LeftBarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId");function LeftBarToggle({"aria-label":ariaLabel,buttonRef}){let{show,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftBarToggle",{enumerable:!0,get:function(){return LeftBarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId");function LeftBarToggle({"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,buttonRef}){let{show,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Box.Box,{space:"s",vSpace:"xs"},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import type { LeftPanelProps } from "../-types";
 /**
- * Left side panel. Picks its presentation by breakpoint: an in-flow resizable
- * column on desktop ({@link LeftPanelDocked}) and a modal left-edge drawer on
+ * Left side panel. Picks its presentation by breakpoint: an in-flow column on
+ * desktop ({@link LeftPanelDocked}) and a modal left-edge drawer on
  * mobile ({@link LeftPanelDrawer}). Both are driven by the same `leftPanel`
  * layout state, so `useLayout()` controls it the same way at any width.
  */

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

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

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

@@ -1,21 +1,16 @@
 import React from "react";
-import type { ForwardedScrollProps } from "../-types";
+import type { ForwardedScrollProps, LeftPanelSlotProps } from "../-types";
 export type LeftPanelDockedProps = ForwardedScrollProps & {
     children: React.ReactNode;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
+    slotProps: LeftPanelSlotProps;
     "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. */
+    /** Pixel width the column widens to. */
     defaultSize: number;
-    minSize?: number;
-    maxSize?: number;
     collapsible?: boolean;
-    resizable?: boolean;
 };
 /**
  * Docked (desktop) left panel. Declares the `leftPanel` slot and portals its
- * content into the Group's host - an in-flow, resizable column whose width
+ * content into the Group's host - an in-flow column whose width
  * slides open/closed via {@link usePanelDockedSlide} (when collapsible). Content
  * lives in {@link LeftBarLayers} so `Layout.LeftPanelHeader` /
  * `Layout.LeftPanelFooter` children stick to the edges. The mobile presentation

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

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

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

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

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

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

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

@@ -1,9 +1,8 @@
 import React from "react";
-import type { ForwardedScrollProps } from "../-types";
+import type { ForwardedScrollProps, LeftPanelSlotProps } from "../-types";
 export type LeftPanelOffcanvasProps = ForwardedScrollProps & {
     children: React.ReactNode;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
+    slotProps: LeftPanelSlotProps;
     isVisible: boolean;
     hide: () => void;
     openWidth: string;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelOffcanvas",{enumerable:!0,get:function(){return LeftPanelOffcanvas}});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")),_react1=require("@emotion/react"),_LeftBarLayers=require("./LeftBarLayers"),_constants=require("../-constants"),_registry=require("../registry"),_useOnEscapePress=require("../../../shared/useOnEscapePress"),_useOutsideClick=require("../../../shared/useOutsideClick"),getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:_LeftBarLayers.LEFT_BAR_TOP_INSET,bottom:_constants.PAGE_BOTTOM_BAR_INSET,zIndex:1,width:isVisible?openWidth:leftBarWidth}),StyledOffcanvasShadow=(0,_styled.default)("div",{target:"exeyzov0",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:[`width ${duration} ${timingFunction}`,`opacity ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=(0,_styled.default)("div",{target:"exeyzov1",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:[`width ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)}}),LeftPanelOffcanvas=({children,toggleButtonLabel,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)();(0,_registry.useDeclarePanel)(_constants.Slot.leftPanel,{});let columnRef=(0,_react.useRef)(null);(0,_useOnEscapePress.useOnEscapePress)(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),(0,_useOutsideClick.useOutsideClick)(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),_react.default.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelOffcanvas",{enumerable:!0,get:function(){return LeftPanelOffcanvas}});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")),_react1=require("@emotion/react"),_LeftBarLayers=require("./LeftBarLayers"),_constants=require("../-constants"),_registry=require("../registry"),_useOnEscapePress=require("../../../shared/useOnEscapePress"),_useOutsideClick=require("../../../shared/useOutsideClick"),getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:_LeftBarLayers.LEFT_BAR_TOP_INSET,bottom:_constants.PAGE_BOTTOM_BAR_INSET,zIndex:1,width:isVisible?openWidth:leftBarWidth}),StyledOffcanvasShadow=(0,_styled.default)("div",{target:"elm45s90",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:[`width ${duration} ${timingFunction}`,`opacity ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=(0,_styled.default)("div",{target:"elm45s91",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:[`width ${duration} ${timingFunction}`,(0,_LeftBarLayers.getLeftBarTopTransition)(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...(0,_LeftBarLayers.getLeftBarColumnStyles)(theme)}}),LeftPanelOffcanvas=({children,slotProps,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=(0,_react1.useTheme)();(0,_registry.useDeclarePanel)(_constants.Slot.leftPanel,{});let columnRef=(0,_react.useRef)(null);(0,_useOnEscapePress.useOnEscapePress)(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),(0,_useOutsideClick.useOutsideClick)(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),_react.default.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},_react.default.createElement(_LeftBarLayers.LeftBarLayers,{isVisible:isVisible,slotProps:slotProps,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

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

@@ -8,4 +8,4 @@ export type LeftBarSlot = {
 };
 export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
 /** The left bar slot behind the left panel, if this presentation has one. */
-export declare function useLeftBarContext(): LeftBarSlot;
+export declare const useLeftBarContext: () => LeftBarSlot;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftBarProvider(){return LeftBarProvider},get useLeftBarContext(){return useLeftBarContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftBarContext=(0,_react.createContext)({slotNode:null}),LeftBarProvider=LeftBarContext.Provider;function useLeftBarContext(){return(0,_react.useContext)(LeftBarContext)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftBarProvider(){return LeftBarProvider},get useLeftBarContext(){return useLeftBarContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftBarContext=(0,_react.createContext)({slotNode:null}),LeftBarProvider=LeftBarContext.Provider,useLeftBarContext=()=>(0,_react.useContext)(LeftBarContext);

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

@@ -2,10 +2,10 @@
 export type LeftPanelCollapseState = {
     /** The content is dissolving into the left bar beneath it. */
     isContentFaded: boolean;
-    /** Width the content holds on to while the column narrows around it, clipped
+    /** Width the content is held at while the column narrows around it, clipped
      *  at the column's edge so nothing inside reflows on the way down. */
-    pinnedContentWidth?: string;
+    fixedContentWidth?: string;
 };
 export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
 /** How the left panel's parts have to behave while its column narrows. */
-export declare function useLeftPanelCollapseContext(): LeftPanelCollapseState;
+export declare const useLeftPanelCollapseContext: () => LeftPanelCollapseState;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftPanelCollapseProvider(){return LeftPanelCollapseProvider},get useLeftPanelCollapseContext(){return useLeftPanelCollapseContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftPanelCollapseContext=(0,_react.createContext)({isContentFaded:!1}),LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider;function useLeftPanelCollapseContext(){return(0,_react.useContext)(LeftPanelCollapseContext)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LeftPanelCollapseProvider(){return LeftPanelCollapseProvider},get useLeftPanelCollapseContext(){return useLeftPanelCollapseContext}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),LeftPanelCollapseContext=(0,_react.createContext)({isContentFaded:!1}),LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider,useLeftPanelCollapseContext=()=>(0,_react.useContext)(LeftPanelCollapseContext);

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get createInitialState(){return createInitialState},get layoutReducer(){return layoutReducer}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}function createInitialState(config={}){return{leftPanel:{...sidePanelFields({resizable:!1,...config.leftPanel}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get createInitialState(){return createInitialState},get layoutReducer(){return layoutReducer}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,resizable:config.resizable??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}function createInitialState(config={}){return{leftPanel:{...sidePanelFields({...config.leftPanel,resizable:!1}),variant:config.leftPanel?.variant},rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};

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

@@ -50,7 +50,7 @@ export declare const PanelDeclarationsContext: React.Context<Partial<Record<"con
  */
 export declare const PanelRowContext: React.Context<string>;
 /** The row's current column set, as a stable key. Empty outside a Layout. */
-export declare function usePanelRow(): string;
+export declare const usePanelRow: () => string;
 /**
  * Keeps an animating-out panel in the resizable row while its exit plays - the
  * Group would otherwise drop the column the instant it's hidden. The panel

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

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

package/build/cjs/components/Layout/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}),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"),_constants=require("./-constants"),selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),reset:()=>dispatch({type:"reset",slot})}}function useLayout(){let store=(0,_context.useLayoutStore)(),state=(0,_context.useLayoutSelector)(selectAll),declared=(0,_react.useContext)(_registry.PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:{...state.leftPanel,variant:state.leftPanel.variant??_constants.DEFAULT_LEFT_PANEL_VARIANT},setVariant:variant=>dispatch({type:"setVariant",panel:"leftPanel",variant}),...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}

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

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

@@ -27,7 +27,7 @@ export type PanelDockedSlide = {
     isMounted: boolean;
     /** Body width (px) while the column slides; `null` at rest, where the body
      *  fills the column and the panel stays resizable. */
-    pinnedWidth: number | null;
+    fixedWidth: number | null;
 };
 /**
  * Animates a docked side panel's open/close as a width slide on its

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

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

package/build/cjs/web-tokens/visualConfig.d.ts

@@ -220,6 +220,7 @@ type Variables = {
         "leftPanel": {
             "width": {
                 "default": string;
+                "open": string;
             };
         };
         "rightPanel": {