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

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

@@ -0,0 +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)}

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

@@ -0,0 +1,11 @@
+/** How the left panel's parts have to behave while its column narrows to a left bar. */
+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
+     *  at the column's edge so nothing inside reflows on the way down. */
+    pinnedContentWidth?: 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;

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

@@ -0,0 +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)}

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"DEFAULT_LAYOUT_RULES",{enumerable:!0,get:function(){return DEFAULT_LAYOUT_RULES}});const 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())}}};
+"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())}}};

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||"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])}
+"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])}

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

@@ -0,0 +1,6 @@
+/** DOM id of the rendered left panel, generated once per `Layout`. Lets a
+ *  control living OUTSIDE the panel - the nav left bar's open button - point
+ *  `aria-controls` at it without the two components knowing each other. Empty
+ *  outside a `Layout`, where there is no panel to reference. */
+export declare const LeftPanelIdContext: React.Context<string>;
+export declare const useLeftPanelId: () => string;

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

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

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

@@ -14,6 +14,12 @@ 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
@@ -26,10 +32,9 @@ 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; 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
+ * 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
  * {@link useExitAnimation} and the Drawer's styled components.
  */
-export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, }: PanelDockedSlideOptions): PanelDockedSlide;
+export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, collapsedSize, }: PanelDockedSlideOptions): PanelDockedSlide;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}};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}}
+"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}}

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

@@ -0,0 +1,19 @@
+import type { CSSObject, Theme } from "@emotion/react";
+type PanelContentFadeOptions = {
+    theme: Theme;
+    /** Whether the content is currently faded out. */
+    isFaded: boolean;
+};
+/**
+ * Fades a docked panel's content out across its collapse, and back in at once
+ * when it reopens - the panel covers the left bar the instant it is shown, so
+ * there is nothing to reveal on the way in.
+ *
+ * Runs on the column's own slide timing, so the two move together.
+ *
+ * Applied per part rather than to the whole panel: a control at the header's
+ * trailing edge travels down onto the left bar's own and has to stay solid the
+ * whole way, so it is left out.
+ */
+export declare function getLeftPanelFadeStyles({ theme, isFaded, }: PanelContentFadeOptions): CSSObject;
+export {};

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

@@ -0,0 +1 @@
+"use strict";function getLeftPanelFadeStyles({theme,isFaded}){let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{opacity:isFaded?theme.variables.opacity.hidden:theme.variables.opacity.visible,transition:isFaded?`opacity ${duration} ${timingFunction}`:"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"getLeftPanelFadeStyles",{enumerable:!0,get:function(){return getLeftPanelFadeStyles}});

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getBaseButtonStyles(){return _getBaseButtonStyles.getBaseButtonStyles},get getButtonAppearanceReset(){return _getButtonAppearanceReset.getButtonAppearanceReset},get getDisabledStyles(){return _getDisabledStyles.getDisabledStyles},get getFocusStyles(){return _getFocusStyles.getFocusStyles},get getInputTextPlaceholder(){return _getInputTextPlaceholder.getInputTextPlaceholder},get getInputTextStyles(){return _getInputTextStyles.getInputTextStyles},get 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");
+"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");

package/build/cjs/web-tokens/_sizes.json

@@ -37,7 +37,7 @@
         "value": "1024px",
         "original": 1024,
         "variableName": "$size-dimension-content-max-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -47,7 +47,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-divider-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -57,7 +57,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-divider-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -67,7 +67,7 @@
         "value": "32px",
         "original": 32,
         "variableName": "$size-dimension-divider-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -77,7 +77,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-checkbox-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -87,7 +87,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-checkbox-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -97,7 +97,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-kbd-min-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -107,7 +107,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-radio-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -117,7 +117,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-radio-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -127,7 +127,7 @@
         "value": "6px",
         "original": 6,
         "variableName": "$size-dimension-radio-point-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -137,7 +137,7 @@
         "value": "10px",
         "original": 10,
         "variableName": "$size-dimension-radio-point-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -147,7 +147,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-toggle-height-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -157,7 +157,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-toggle-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -167,7 +167,7 @@
         "value": "28px",
         "original": 28,
         "variableName": "$size-dimension-toggle-width-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -177,7 +177,7 @@
         "value": "40px",
         "original": 40,
         "variableName": "$size-dimension-toggle-width-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -187,7 +187,7 @@
         "value": "36px",
         "original": 36,
         "variableName": "$size-dimension-textarea-min-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -197,7 +197,7 @@
         "value": "8px",
         "original": 8,
         "variableName": "$size-dimension-toggle-point-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -207,7 +207,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-toggle-point-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -217,7 +217,7 @@
         "value": "32px",
         "original": 32,
         "variableName": "$size-dimension-toggle-button-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -227,7 +227,7 @@
         "value": "120px",
         "original": 120,
         "variableName": "$size-dimension-dropdown-menu-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -237,7 +237,7 @@
         "value": "320px",
         "original": 320,
         "variableName": "$size-dimension-prompt-button-group-popover-min-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -247,7 +247,7 @@
         "value": "560px",
         "original": 560,
         "variableName": "$size-dimension-modal-width-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -257,7 +257,7 @@
         "value": "720px",
         "original": 720,
         "variableName": "$size-dimension-modal-width-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -267,7 +267,7 @@
         "value": "800px",
         "original": 800,
         "variableName": "$size-dimension-modal-max-height-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -277,7 +277,7 @@
         "value": "40px",
         "original": 40,
         "variableName": "$size-dimension-modal-margin-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -287,7 +287,7 @@
         "value": "1280px",
         "original": 1280,
         "variableName": "$size-dimension-modal-full-screen-content-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -297,7 +297,7 @@
         "value": "1px",
         "original": 1,
         "variableName": "$size-dimension-media-viewer-bar-separator-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -307,7 +307,17 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-dimension-legend-key-width",
-        "isUsed": false
+        "isUsed": true
+    },
+    {
+        "category": "size",
+        "type": "dimension",
+        "name": "dimension left-nav-bar",
+        "subitemName": "left-nav-bar width",
+        "value": "56px",
+        "original": 56,
+        "variableName": "$size-dimension-left-nav-bar-width",
+        "isUsed": true
     },
     {
         "category": "size",
@@ -317,7 +327,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-letter-spacing-none",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -327,7 +337,7 @@
         "value": "0.5px",
         "original": 0.5,
         "variableName": "$size-letter-spacing-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -337,7 +347,7 @@
         "value": "1px",
         "original": 1,
         "variableName": "$size-letter-spacing-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -347,7 +357,7 @@
         "value": "10px",
         "original": 10,
         "variableName": "$size-font-xxs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -357,7 +367,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-font-xs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -367,7 +377,7 @@
         "value": "14px",
         "original": 14,
         "variableName": "$size-font-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -377,7 +387,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-font-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -387,7 +397,7 @@
         "value": "18px",
         "original": 18,
         "variableName": "$size-font-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -397,7 +407,7 @@
         "value": "20px",
         "original": 20,
         "variableName": "$size-font-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -407,7 +417,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-font-xxl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -417,7 +427,7 @@
         "value": "26px",
         "original": 26,
         "variableName": "$size-font-xxxl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -437,7 +447,7 @@
         "value": "2px",
         "original": 2,
         "variableName": "$size-spacing-xxxs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -517,7 +527,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-border-radius-none",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -527,7 +537,7 @@
         "value": "4px",
         "original": 4,
         "variableName": "$size-border-radius-xs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -537,7 +547,7 @@
         "value": "8px",
         "original": 8,
         "variableName": "$size-border-radius-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -547,7 +557,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-border-radius-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -557,7 +567,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-border-radius-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -567,7 +577,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-border-radius-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -577,7 +587,7 @@
         "value": "9999px",
         "original": 9999,
         "variableName": "$size-border-radius-full",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -587,7 +597,7 @@
         "value": 1.1428571429,
         "original": 1.1428571429,
         "variableName": "$size-line-height-xs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -597,7 +607,7 @@
         "value": 1.25,
         "original": 1.25,
         "variableName": "$size-line-height-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -607,7 +617,7 @@
         "value": 1.3333333,
         "original": 1.3333333,
         "variableName": "$size-line-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -617,7 +627,7 @@
         "value": 1.4285714286,
         "original": 1.4285714286,
         "variableName": "$size-line-height-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -627,7 +637,7 @@
         "value": 1.5,
         "original": 1.5,
         "variableName": "$size-line-height-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -637,7 +647,7 @@
         "value": 1.625,
         "original": 1.625,
         "variableName": "$size-line-height-xxl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -647,6 +657,6 @@
         "value": 1.714286,
         "original": 1.714286,
         "variableName": "$size-line-height-xxxl",
-        "isUsed": false
+        "isUsed": true
     }
 ]