@amboss/design-system 4.3.2-canary.1 → 4.3.3

package/build/esm/components/Layout/LeftPanel/LeftPanelDrawer.d.ts

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

package/build/esm/components/Layout/LeftPanel/LeftPanelDrawer.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";let StyledLeftPanelBody=styled("div",{target:"e14wbnl40",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel})=>React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,null,children)));
+import React from"react";import styled from"@emotion/styled";import{Drawer}from"../../Internal/Drawer/Drawer";import{PanelContainer}from"../PanelContainer";let StyledLeftPanelBody=styled("div",{target:"e1pciy730",label:"StyledLeftPanelBody"})({width:"80vw",height:"100dvh"});export const LeftPanelDrawer=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Drawer,{isVisible:isVisible,positionX:"left",handleClose:hide,"aria-label":ariaLabel},React.createElement(StyledLeftPanelBody,null,React.createElement(PanelContainer,{scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));

package/build/esm/components/Layout/RightPanel/RightPanelDocked.d.ts

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

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"eq48lip0",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);
+import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"e19zlvfp0",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);

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

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

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{PanelContainer}from"../PanelContainer";import{Sheet,SHEET_MAX_HEIGHT}from"../../Sheet/Sheet";let StyledSheetPanelShell=styled("div",{target:"e1wbhy260",label:"StyledSheetPanelShell"})({height:SHEET_MAX_HEIGHT});export const RightPanelSheet=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},React.createElement(StyledSheetPanelShell,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
+import React from"react";import styled from"@emotion/styled";import{PanelContainer}from"../PanelContainer";import{Sheet,SHEET_MAX_HEIGHT}from"../../Sheet/Sheet";let StyledSheetPanelShell=styled("div",{target:"eqso66w0",label:"StyledSheetPanelShell"})({height:SHEET_MAX_HEIGHT});export const RightPanelSheet=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},React.createElement(StyledSheetPanelShell,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));

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

@@ -1 +1 @@
-import React from"react";import{createPortal}from"react-dom";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{contentOffsetFor,useMobileSplitView}from"./useMobileSplitView";export const ContentSplitBase=({children})=>{let{isSplitViewActive}=useMobileSplitView(),{host}=useMobileSplitStack();return host?createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"base",offset:contentOffsetFor(isSplitViewActive)},children),host):null};
+import React from"react";import{createPortal}from"react-dom";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{contentOffsetFor,useMobileSplitView}from"./useMobileSplitView";export const ContentSplitBase=({children})=>{let{isSplitViewActive}=useMobileSplitView(),{host}=useMobileSplitStack();if(!host)return null;let offset=contentOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"base",offset:offset,inert:0===offset?void 0:""},children),host)};

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

@@ -1 +1 @@
-import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,"aria-label":ariaLabel})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();return(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),enabled&&host)?createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:splitViewOffsetFor(isSplitViewActive)},React.createElement(PanelContainer,{"aria-label":ariaLabel},children)),host):null};
+import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();if(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),!enabled||!host)return null;let offset=splitViewOffsetFor(isSplitViewActive);return createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:offset,inert:0===offset?void 0:""},React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)),host)};

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

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

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

@@ -1 +1 @@
-import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e187cevn0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});
+import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"et3u54n0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}});

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

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

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

@@ -1 +1 @@
-import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{useCanRenderPanel}from"../context";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,resizable})=>{let{isMobile}=useBreakpoints();return useCanRenderPanel()?isMobile?React.createElement(MobileSplitView,{"aria-label":ariaLabel},children):React.createElement(SplitDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,resizable:resizable},children):null};
+import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Slot}from"../-constants";import{useVisibleChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,"aria-label":ariaLabel,onVisibleChange,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isMobile}=useBreakpoints(),{isVisible}=useLayout()[Slot.splitview],canRender=useCanRenderPanel();return(useVisibleChange(isVisible,onVisibleChange),canRender)?isMobile?React.createElement(MobileSplitView,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):React.createElement(SplitDocked,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null};

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

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

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

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,resizable})=>{let{isVisible}=useLayout()[Slot.splitview],canResize=!1!==resizable;return useDeclarePanel(Slot.splitview,{defaultSize,minSize,maxSize,collapsible:canResize,resizable:canResize}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,showBorderLeft:!0},children):null)};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};

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

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

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

@@ -1 +1 @@
-import React from"react";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";export function SplitHeader({leftSlot,rightSlot,"data-e2e-test-id":dataE2eTestId}){return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,rightSlot:rightSlot}))}
+import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";export function SplitHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let{hide}=useLayout()[Slot.splitview],closeButtonSlotProps=slotProps?.closeButton;return React.createElement(Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:React.createElement(React.Fragment,null,rightSlot,closeButtonSlotProps&&React.createElement(PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":closeButtonSlotProps["aria-label"],onClick:hide}))}))}

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

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

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

@@ -1 +1 @@
-import{createContext,useContext,useSyncExternalStore}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPanelsEnabledContext=createContext(!1);export const LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;export function useLayoutPanelsEnabled(){return useContext(LayoutPanelsEnabledContext)}export function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=useBreakpoints();return!0===mode||"mobile"===mode&&isMobile}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}
+import{createContext,useContext,useSyncExternalStore}from"react";import{useBreakpoints}from"../../shared/useBreakpoints";let LayoutStoreContext=createContext(null);export const LayoutStoreProvider=LayoutStoreContext.Provider;export function useLayoutStore(){let store=useContext(LayoutStoreContext);if(!store)throw Error("useLayout must be used within a <LayoutProvider>.");return store}let LayoutPanelsEnabledContext=createContext(!1);export const LayoutPanelsEnabledProvider=LayoutPanelsEnabledContext.Provider;export function useLayoutPanelsEnabled(){return useContext(LayoutPanelsEnabledContext)}export function useCanRenderPanel(){let mode=useLayoutPanelsEnabled(),{isMobile}=useBreakpoints();return!0===mode||"mobile"===mode&&isMobile}let LayoutReservedSlotsContext=createContext([]);export const LayoutReservedSlotsProvider=LayoutReservedSlotsContext.Provider;export function useLayoutReservedSlots(){return useContext(LayoutReservedSlotsContext)}let LayoutPersistenceContext=createContext({});export const LayoutPersistenceProvider=LayoutPersistenceContext.Provider;export function useLayoutPersistence(){return useContext(LayoutPersistenceContext)}export function useLayoutSelector(selector){let store=useLayoutStore(),getSnapshot=()=>selector(store.getState());return useSyncExternalStore(store.subscribe,getSnapshot,getSnapshot)}

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

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

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

@@ -1 +1 @@
-export{SUBNAV_OFFSET_VAR,PANEL_WIDTH_VAR}from"./-constants";export{Layout}from"./Layout";export{LayoutProvider}from"./LayoutProvider";export{useLayoutVar}from"./LayoutCssVars";export{useLayout}from"./useLayout";export{DEFAULT_LAYOUT_RULES}from"./rules";export{useMobileSplitView}from"./Split/MobileSplitView/useMobileSplitView";export{useAutoScrollToBottom}from"./useAutoScrollToBottom";export{createLayoutStore}from"./store";export{createInitialState,layoutReducer}from"./reducer";export*from"./-types";
+export{Layout}from"./Layout";export{LayoutProvider}from"./LayoutProvider";export{useLayoutVar}from"./LayoutCssVars";export{useLayout}from"./useLayout";export{DEFAULT_LAYOUT_RULES}from"./rules";export{useMobileSplitView}from"./Split/MobileSplitView/useMobileSplitView";export{useAutoScrollToBottom}from"./useAutoScrollToBottom";export{createLayoutStore}from"./store";export{createInitialState,layoutReducer}from"./reducer";export*from"./-types";

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

@@ -1 +1 @@
-import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),resize:size=>dispatch({type:"resize",slot,size}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(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})}}}
+import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";let 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})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(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})}}}