@amboss/design-system 4.9.4-canary.4 → 4.10.0

package/build/esm/components/Internal/Drawer/Drawer.js

@@ -1,13 +1,13 @@
-import React,{useCallback,useEffect,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../../shared/useOutsideClickDeactivatesWithinPortal";import{useDocument}from"../../../shared/useDocument";import{FOCUSABLE_SELECTOR}from"../../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../../Portal/Portal";import{FocusTrapWrapper}from"../../../shared/FocusTrapWrapper";import{DialogContext}from"../../Patterns/Dialog/DialogContext";import{Backdrop}from"../../Utilities/Backdrop/Backdrop";import{useExitAnimation}from"./useExitAnimation";let StyledViewportLayer=styled("div",{target:"e11o9pe90",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes`
+import React,{useCallback,useEffect,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../../shared/useOutsideClickDeactivatesWithinPortal";import{useDocument}from"../../../shared/useDocument";import{FOCUSABLE_SELECTOR}from"../../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../../Portal/Portal";import{FocusTrapWrapper}from"../../../shared/FocusTrapWrapper";import{DialogContext}from"../../Patterns/Dialog/DialogContext";import{Backdrop}from"../../Utilities/Backdrop/Backdrop";import{useExitAnimation}from"../../../shared/useExitAnimation";let StyledViewportLayer=styled("div",{target:"e1h3k5750",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes`
       from { opacity: ${hidden}; }
       to { opacity: ${visible}; }
     `,fadeOut=keyframes`
       from { opacity: ${visible}; }
       to { opacity: ${hidden}; }
-    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=styled("div",{target:"e11o9pe91",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=keyframes`
+    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=styled("div",{target:"e1h3k5751",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=keyframes`
       from { transform: ${offscreen}; }
       to { transform: ${resting}; }
     `,slideOut=keyframes`
       from { transform: ${resting}; }
       to { transform: ${offscreen}; }
-    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=styled(Backdrop,{target:"e11o9pe92",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(FOCUSABLE_SELECTOR)??container??document.body}export function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=usePortalContainerElement(portalContainer),contentRef=useRef(null),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=useRef(null),setLayerNode=useCallback(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=React.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&React.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},React.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}
+    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=styled(Backdrop,{target:"e1h3k5752",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(FOCUSABLE_SELECTOR)??container??document.body}export function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=usePortalContainerElement(portalContainer),contentRef=useRef(null),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=useRef(null),setLayerNode=useCallback(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=React.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&React.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},React.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}

package/build/esm/components/Internal/LayoutFloat/LayoutFloat.d.ts

@@ -13,4 +13,16 @@ export type LayoutFloatProps = {
     hostRef: (el: HTMLDivElement | null) => void;
     "data-e2e-test-id"?: string;
 };
-export declare const LayoutFloat: React.MemoExoticComponent<({ width, height, hostRef, "data-e2e-test-id": dataE2eTestId, }: LayoutFloatProps) => React.ReactElement>;
+/**
+ * The floating shell hosting a layout panel's content while its variant is
+ * `"float"`. Pins to the bottom-right viewport corner via the internal
+ * `Float` positioner, then becomes freely draggable by its header across the
+ * viewport (clamped to `spacing.m` from the edges, matching `Float`'s inset).
+ * The header carries the `useMove` handle; this float owns the drag geometry
+ * and publishes its move handlers via `useLayoutFloatDrag` for the header to drive.
+ * Purely presentational otherwise: the content arrives by the panel's persistent
+ * host node being appended into `hostRef`'s element.
+ */
+declare const LayoutFloatBase: ({ width, height, hostRef, "data-e2e-test-id": dataE2eTestId, }: LayoutFloatProps) => React.ReactElement;
+export declare const LayoutFloat: React.MemoExoticComponent<typeof LayoutFloatBase>;
+export {};

package/build/esm/components/Internal/LayoutFloat/useLayoutFloatDrag.d.ts

@@ -10,7 +10,7 @@ export type LayoutFloatDragContextValue = {
     /** Publish/clear the handlers - for the float. */
     setHandlers: (handlers: LayoutFloatDragHandlers) => void;
 };
-export declare const LayoutFloatDragContext: React.Context<LayoutFloatDragContextValue>;
+export declare const LayoutFloatDragContext: import("react").Context<LayoutFloatDragContextValue>;
 /** Read the float-drag channel. Outside a `LayoutFloatDragProvider` the handlers are
  *  `null` and the setter a no-op, so consumers need no existence checks. */
 export declare const useLayoutFloatDrag: () => LayoutFloatDragContextValue;

package/build/esm/components/Internal/Sandwich/useSandwichContext.d.ts

@@ -16,6 +16,6 @@ export type SandwichContextValue = SandwichEdges & {
     /** Static host below the scroll body - `Sandwich.Footer` portals into it. */
     footerSlotNode: HTMLElement | null;
 };
-export declare const SandwichProvider: React.Provider<SandwichContextValue | null>;
+export declare const SandwichProvider: import("react").Provider<SandwichContextValue | null>;
 /** Read the Sandwich context, or throw if used outside `<Sandwich>`. */
 export declare function useSandwichContext(): SandwichContextValue;

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

@@ -1,4 +1,5 @@
 import type React from "react";
+import type { ConditionalAccessibleName } from "../../types/a11y";
 import type { PanelKey, SidePanelKey, SlotKey } from "./-constants";
 import type { PanelHeaderTitle } from "../Internal/PanelHeader/PanelHeader";
 import type { SandwichSeparator } from "../Internal/Sandwich/-types";
@@ -496,3 +497,11 @@ export type RightPanelProps = SidePanelProps & {
      *  floating panel isn't part of the resizable row. */
     collapsible?: boolean;
 };
+export type LayoutBottomBarProps = ConditionalAccessibleName & {
+    /** Layout.BottomBarItem declarations for the page's actions. */
+    children: React.ReactNode;
+    /** Background of each section; gaps stay transparent. Defaults to transparent. */
+    background?: "primary" | "secondary" | "transparent";
+    /** Identifier applied to the action group. */
+    "data-e2e-test-id"?: string;
+};

package/build/{cjs/components/Layout/BottomBar → esm/components/Layout/BottomBar/BottomBarItem}/LayoutBottomBarItem.d.ts

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from "react";
-import type { SlotKey } from "../-types";
+import type { SlotKey } from "../../-types";
 export type LayoutBottomBarFallback = "hide" | "remaining" | "full";
 export type LayoutBottomBarItemProps = {
     /** Layout region whose column the item follows. */

package/build/esm/components/Layout/BottomBar/LayoutBottomBar.d.ts

@@ -1,11 +1,3 @@
-import { type ReactElement, type ReactNode } from "react";
-import type { ConditionalAccessibleName } from "../../../types/a11y";
-export type LayoutBottomBarProps = ConditionalAccessibleName & {
-    /** Layout.BottomBarItem declarations for the page's actions. */
-    children: ReactNode;
-    /** Background of each section; gaps stay transparent. Defaults to transparent. */
-    background?: "primary" | "secondary" | "transparent";
-    /** Identifier applied to the action group. */
-    "data-e2e-test-id"?: string;
-};
+import { type ReactElement } from "react";
+import type { LayoutBottomBarProps } from "../-types";
 export declare function LayoutBottomBar({ children, background, "data-e2e-test-id": dataE2eTestId, ...accessibleName }: LayoutBottomBarProps): ReactElement | null;

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBar.d.ts

@@ -7,5 +7,5 @@ type StyledLayoutBottomBarProps = {
 export declare const StyledLayoutBottomBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & StyledLayoutBottomBarProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & StyledLayoutBottomBarProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutBottomBarProps } from "./LayoutBottomBar";
+import type { LayoutBottomBarProps } from "../-types";
 type StyledLayoutBottomBarSectionProps = {
     background: NonNullable<LayoutBottomBarProps["background"]>;
     columnIndex?: number;
@@ -9,5 +9,5 @@ type StyledLayoutBottomBarSectionProps = {
 export declare const StyledLayoutBottomBarSection: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & StyledLayoutBottomBarSectionProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & StyledLayoutBottomBarSectionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.js

@@ -1 +1 @@
-import styled from"@emotion/styled";export const StyledLayoutBottomBarSection=styled("div",{target:"e5xujxr0",label:"StyledLayoutBottomBarSection"})(({theme,background,columnIndex,rowIndex,fullWidth,hasPanelDivider})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",backgroundColor:"transparent"===background?"transparent":theme.values.color.background[background].default,display:"flex",minWidth:0,whiteSpace:"nowrap",...hasPanelDivider&&{position:"relative","&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default,pointerEvents:"none"}}}));
+import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";export const StyledLayoutBottomBarSection=styled("div",{shouldForwardProp:prop=>"background"!==prop&&isPropValid(prop),target:"e1dq38by0",label:"StyledLayoutBottomBarSection"})(({theme,background,columnIndex,rowIndex,fullWidth,hasPanelDivider})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",backgroundColor:"transparent"===background?"transparent":theme.values.color.background[background].default,display:"flex",minWidth:0,whiteSpace:"nowrap",...hasPanelDivider&&{position:"relative","&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default,pointerEvents:"none"}}}));

package/build/esm/components/Layout/BottomBar/getBottomBarLayout.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { LayoutValue, SlotKey } from "../-types";
-import { type LayoutBottomBarItemProps, type LayoutBottomBarFallback } from "./LayoutBottomBarItem";
+import { type LayoutBottomBarItemProps, type LayoutBottomBarFallback } from "./BottomBarItem/LayoutBottomBarItem";
 type BottomBarLayout = Pick<LayoutValue, SlotKey>;
 type BottomBarItemMode = "column" | LayoutBottomBarFallback;
 type VisibleSection = LayoutBottomBarItemProps & {

package/build/esm/components/Layout/BottomBar/getBottomBarLayout.js

@@ -1 +1 @@
-import{Children,isValidElement}from"react";import{PANEL_ORDER}from"../-constants";import{LayoutBottomBarItem}from"./LayoutBottomBarItem";let getBottomBarItemMode=({region,fallback,layout})=>{let handle=layout[region];return"column"===handle.presentation?"column":("leftPanel"!==region||"sidebar"!==layout.leftPanel.state.variant)&&("rightPanel"!==region||"sidebar"!==layout.rightPanel.state.variant)||handle.isVisible||null===handle.animation?fallback:"column"},getVisibleSections=(children,layout)=>Children.toArray(children).flatMap(child=>{if(!isValidElement(child)||child.type!==LayoutBottomBarItem||null==child.props.children||!1===child.props.children)return[];let{region,fallback="hide"}=child.props,placement=getBottomBarItemMode({region,fallback,layout});return"hide"===placement?[]:[{...child.props,placement,fallback}]}),shouldPreserveSplitColumnWidth=sections=>{let hasLeftFallback=sections.some(({region,fallback})=>"leftPanel"===region&&"remaining"===fallback),hasContentColumn=sections.some(({region,placement})=>"content"===region&&"column"===placement),hasSplitColumn=sections.some(({region,placement})=>"splitview"===region&&"column"===placement),hasRightFallback=sections.some(({region,fallback})=>"rightPanel"===region&&"remaining"===fallback);return hasLeftFallback&&hasContentColumn&&hasSplitColumn&&!hasRightFallback},getSharedRowCells=sections=>{if(!sections.length)return[];let firstSection=sections[0],lastSection=sections[sections.length-1],hasRemainingActions=sections.some(({fallback})=>"remaining"===fallback),preserveSplitColumn=shouldPreserveSplitColumnWidth(sections),flexibleColumns={leftPanel:!1,content:hasRemainingActions,splitview:hasRemainingActions&&!preserveSplitColumn,rightPanel:!1},hasFlexibleColumn=sections.some(({region,placement})=>"column"===placement&&flexibleColumns[region]),needsFlexibleGap=hasRemainingActions&&!hasFlexibleColumn,rightActions=sections.find(({region})=>"rightPanel"===region);return[..."column"===firstSection.placement?[{kind:"leading-gap",region:firstSection.region}]:[],...sections.flatMap((section,index)=>{let previousSection=sections[index-1];return[..."column"===section.placement&&previousSection?.placement==="column"?[{kind:"column-gap",region:section.region,previousRegion:previousSection.region}]:[],...needsFlexibleGap&&section===rightActions?[{kind:"flexible-gap"}]:[],{kind:"section",section,flexible:flexibleColumns[section.region]}]}),...!hasRemainingActions||preserveSplitColumn?[{kind:"trailing-gap",region:lastSection.region}]:[],...needsFlexibleGap&&!rightActions?[{kind:"flexible-gap"}]:[]]};export const getBottomBarLayout=({children,layout})=>{let sections=getVisibleSections(children,layout),sharedSections=PANEL_ORDER.flatMap(region=>sections.filter(section=>section.region===region&&"full"!==section.placement)),fullWidthSections=sections.filter(({placement})=>"full"===placement),sharedRowCount=+!!sharedSections.length,cells=getSharedRowCells(sharedSections);return{cells,sections:[...cells.flatMap((cell,column)=>"section"===cell.kind?[{...cell.section,columnIndex:column,rowIndex:0}]:[]),...fullWidthSections.map((section,row)=>({...section,rowIndex:sharedRowCount+row}))],rowCount:sharedRowCount+fullWidthSections.length,hasRightPanel:sections.some(({region})=>"rightPanel"===region)}};
+import{Children,isValidElement}from"react";import{PANEL_ORDER}from"../-constants";import{LayoutBottomBarItem}from"./BottomBarItem/LayoutBottomBarItem";let getBottomBarItemMode=({region,fallback,layout})=>{let handle=layout[region];return"column"===handle.presentation?"column":("leftPanel"!==region||"sidebar"!==layout.leftPanel.state.variant)&&("rightPanel"!==region||"sidebar"!==layout.rightPanel.state.variant)||handle.isVisible||null===handle.animation?fallback:"column"},getVisibleSections=(children,layout)=>Children.toArray(children).flatMap(child=>{if(!isValidElement(child)||child.type!==LayoutBottomBarItem||null==child.props.children||!1===child.props.children)return[];let{region,fallback="hide"}=child.props,placement=getBottomBarItemMode({region,fallback,layout});return"hide"===placement?[]:[{...child.props,placement,fallback}]}),shouldPreserveSplitColumnWidth=sections=>{let hasLeftFallback=sections.some(({region,fallback})=>"leftPanel"===region&&"remaining"===fallback),hasContentColumn=sections.some(({region,placement})=>"content"===region&&"column"===placement),hasSplitColumn=sections.some(({region,placement})=>"splitview"===region&&"column"===placement),hasRightFallback=sections.some(({region,fallback})=>"rightPanel"===region&&"remaining"===fallback);return hasLeftFallback&&hasContentColumn&&hasSplitColumn&&!hasRightFallback},getSharedRowCells=sections=>{if(!sections.length)return[];let firstSection=sections[0],lastSection=sections[sections.length-1],hasRemainingActions=sections.some(({fallback})=>"remaining"===fallback),preserveSplitColumn=shouldPreserveSplitColumnWidth(sections),flexibleColumns={leftPanel:!1,content:hasRemainingActions,splitview:hasRemainingActions&&!preserveSplitColumn,rightPanel:!1},hasFlexibleColumn=sections.some(({region,placement})=>"column"===placement&&flexibleColumns[region]),needsFlexibleGap=hasRemainingActions&&!hasFlexibleColumn,rightActions=sections.find(({region})=>"rightPanel"===region);return[..."column"===firstSection.placement?[{kind:"leading-gap",region:firstSection.region}]:[],...sections.flatMap((section,index)=>{let previousSection=sections[index-1];return[..."column"===section.placement&&previousSection?.placement==="column"?[{kind:"column-gap",region:section.region,previousRegion:previousSection.region}]:[],...needsFlexibleGap&&section===rightActions?[{kind:"flexible-gap"}]:[],{kind:"section",section,flexible:flexibleColumns[section.region]}]}),...!hasRemainingActions||preserveSplitColumn?[{kind:"trailing-gap",region:lastSection.region}]:[],...needsFlexibleGap&&!rightActions?[{kind:"flexible-gap"}]:[]]};export const getBottomBarLayout=({children,layout})=>{let sections=getVisibleSections(children,layout),sharedSections=PANEL_ORDER.flatMap(region=>sections.filter(section=>section.region===region&&"full"!==section.placement)),fullWidthSections=sections.filter(({placement})=>"full"===placement),sharedRowCount=+!!sharedSections.length,cells=getSharedRowCells(sharedSections);return{cells,sections:[...cells.flatMap((cell,column)=>"section"===cell.kind?[{...cell.section,columnIndex:column,rowIndex:0}]:[]),...fullWidthSections.map((section,row)=>({...section,rowIndex:sharedRowCount+row}))],rowCount:sharedRowCount+fullWidthSections.length,hasRightPanel:sections.some(({region})=>"rightPanel"===region)}};

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { LayoutProvider } from "./LayoutProvider";
 import { LayoutBottomBar } from "./BottomBar/LayoutBottomBar";
-import { LayoutBottomBarItem } from "./BottomBar/LayoutBottomBarItem";
+import { LayoutBottomBarItem } from "./BottomBar/BottomBarItem/LayoutBottomBarItem";
 import { Content } from "./Content/Content";
 import { RightPanel } from "./RightPanel/RightPanel";
 import { RightPanelHeader } from "./RightPanel/RightPanelHeader";

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

@@ -1 +1 @@
-import React,{useCallback,useLayoutEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/LayoutBottomBarItem";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=({slotHosts,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content||slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e1kh2kot0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1kh2kot1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1kh2kot2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1kh2kot3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e1kh2kot4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1kh2kot5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,gapBefore:slot===Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&declared[id]?.resizable!==!1&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;
+import React,{useCallback,useLayoutEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{Panel}from"../Internal/Panel/Panel";import{LayoutFloat}from"../Internal/LayoutFloat/LayoutFloat";import{useBreakpoints}from"../../shared/useBreakpoints";import{PAGE_BOTTOM_BAR_INSET,PANEL_ORDER,PANEL_WIDTH_VAR,PANEL_START_VAR,LAYOUT_REGIONS_READY_VAR,Slot}from"./-constants";import{useLayoutPersistence,useLayoutStore}from"./context";import{MobileSplitStackContext}from"./Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"./Split/MobileSplitView/useMobileSplitView";import{LayoutProvider}from"./LayoutProvider";import{LayoutBottomBar}from"./BottomBar/LayoutBottomBar";import{LayoutBottomBarItem}from"./BottomBar/BottomBarItem/LayoutBottomBarItem";import{Content}from"./Content/Content";import{RightPanel}from"./RightPanel/RightPanel";import{RightPanelHeader}from"./RightPanel/RightPanelHeader";import{RightPanelFooter}from"./RightPanel/RightPanelFooter";import{LeftPanel}from"./LeftPanel/LeftPanel";import{LeftPanelHeader}from"./LeftPanel/LeftPanelHeader";import{LeftPanelFooter}from"./LeftPanel/LeftPanelFooter";import{LeftNavBar}from"./LeftNavBar/LeftNavBar";import{LeftNavBarFooter}from"./LeftNavBar/LeftNavBarFooter";import{Split}from"./Split/Split";import{SplitHeader}from"./Split/SplitHeader";import{SplitFooter}from"./Split/SplitFooter";import{LayoutPortalContext,PanelRegistryContext,PanelDeclarationsContext,PanelPresenceContext,PanelAnimationContext,PanelRowContext}from"./registry";import{usePortalTargets}from"./usePortalTargets";import{LayoutFloatDragProvider}from"../Internal/LayoutFloat/LayoutFloatDragProvider";import{useLayoutVar}from"./LayoutCssVars";import{useLayout}from"./useLayout";import{useLayoutRules}from"./useLayoutRules";import{DEFAULT_LAYOUT_RULES}from"./rules";let resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=({slotHosts,root,mobileHost})=>{let leftPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.content),splitviewWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=useLayoutVar(PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=useLayoutVar(PANEL_START_VAR.leftPanel),contentStartCssVar=useLayoutVar(PANEL_START_VAR.content),splitviewStartCssVar=useLayoutVar(PANEL_START_VAR.splitview),rightPanelStartCssVar=useLayoutVar(PANEL_START_VAR.rightPanel),regionsReadyCssVar=useLayoutVar(LAYOUT_REGIONS_READY_VAR),publishRegions=useCallback(()=>{if(!root)return;let targets=[[Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[Slot.content,contentWidthCssVar,contentStartCssVar],[Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===Slot.content||slot===Slot.splitview),width=isMobileRegion?rootRect.width:rect?.width??0,start=isMobileRegion||!rect?0:rect.left-rootRect.left;widthCssVar.set(`${width}px`),startCssVar.set(`${start}px`)}),regionsReadyCssVar.set("1")},[slotHosts,root,mobileHost,leftPanelWidthCssVar,contentWidthCssVar,splitviewWidthCssVar,rightPanelWidthCssVar,leftPanelStartCssVar,contentStartCssVar,splitviewStartCssVar,rightPanelStartCssVar,regionsReadyCssVar]);useLayoutEffect(()=>{publishRegions()},[publishRegions]),useLayoutEffect(()=>{if(!root||"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishRegions);return observer.observe(root),Object.values(slotHosts).forEach(host=>{host&&observer.observe(host)}),()=>observer.disconnect()},[root,slotHosts,publishRegions])},StyledLayout=styled("div",{target:"e1tobjas0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=styled("div",{target:"e1tobjas1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=styled("div",{target:"e1tobjas2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"});export const PANEL_HOST_DS_ID="PanelHost";let StyledContentColumn=styled("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e1tobjas3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=styled("div",{target:"e1tobjas4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=styled("div",{target:"e1tobjas5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===Slot.content?contentColumn:React.createElement(StyledPanelHost,{"data-ds-id":"PanelHost",ref:slotHostRefs[slot]});export const Layout=function({children,persistenceKey,storage,rules=DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=useState({}),layout=useLayout(),{state:layoutState,...panelCallbacks}=layout;useLayoutRules({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=useLayoutStore(),persistence=useLayoutPersistence(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=useBreakpoints(),showMobileSplitStack=useMobileSplitViewEnabled(),[mobileSplitStackHost,setMobileSplitStackHost]=useState(null),[splitCount,setSplitCount]=useState(0),registerSplit=useCallback(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=useMemo(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[Slot.rightPanel].variant??declared[Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[Slot.leftPanel]&&"offcanvas"===layoutState[Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[present,setPresent]=useState({}),presence=useMemo(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=useRef({}),panelElements=useRef({}),resizeSuppressed=useRef({}),animationControl=useMemo(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=useMemo(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=useCallback(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=useMemo(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=usePortalTargets({slots:PANEL_ORDER,floatableSlot:Slot.rightPanel,isFloating:isRightPanelFloating}),[layoutRoot,setLayoutRoot]=useState(null),rootPortalTargets=useMemo(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});let rowSlots=PANEL_ORDER.filter(slot=>slot!==Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:Slot.content,declared,present,isShown}),contentColumn=React.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.content]}),isSplitOpen&&React.createElement(StyledContentColumnHalf,{ref:slotHostRefs[Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,gapBefore:slot===Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),rowKey=panelItems.map(item=>item.id).join(","),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?React.createElement(Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>{isShown(id)&&declared[id]?.resizable!==!1&&dispatch({type:"resize",slot:id,size:declared[id]?.lockWidthOnWindowResize?Math.round(size.inPixels):`${size.asPercentage}%`})},onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return React.createElement(PanelRegistryContext.Provider,{value:registry},React.createElement(PanelDeclarationsContext.Provider,{value:declared},React.createElement(PanelPresenceContext.Provider,{value:presence},React.createElement(PanelAnimationContext.Provider,{value:animationControl},React.createElement(PanelRowContext.Provider,{value:rowKey},React.createElement(LayoutPortalContext.Provider,{value:rootPortalTargets},React.createElement(LayoutFloatDragProvider,null,React.createElement(MobileSplitStackContext.Provider,{value:mobileSplitStack},React.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},React.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[Slot.rightPanel].visible&&React.createElement(LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&React.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=LayoutProvider,Layout.BottomBar=LayoutBottomBar,Layout.BottomBarItem=LayoutBottomBarItem,Layout.LeftPanel=LeftPanel,Layout.LeftNavBar=LeftNavBar,Layout.LeftNavBarFooter=LeftNavBarFooter,Layout.LeftPanelHeader=LeftPanelHeader,Layout.LeftPanelFooter=LeftPanelFooter,Layout.RightPanel=RightPanel,Layout.RightPanelHeader=RightPanelHeader,Layout.RightPanelFooter=RightPanelFooter,Layout.Content=Content,Layout.Split=Split,Layout.SplitHeader=SplitHeader,Layout.SplitFooter=SplitFooter;

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

@@ -6,6 +6,6 @@ export type LeftBarSlot = {
      *  content alone. */
     slotNode: HTMLElement | null;
 };
-export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
+export declare const LeftBarProvider: import("react").Provider<LeftBarSlot>;
 /** The left bar slot behind the left panel, if this presentation has one. */
 export declare const useLeftBarContext: () => LeftBarSlot;

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

@@ -6,6 +6,6 @@ export type LeftPanelCollapseState = {
      *  at the column's edge so nothing inside reflows on the way down. */
     fixedContentWidth?: string;
 };
-export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
+export declare const LeftPanelCollapseProvider: import("react").Provider<LeftPanelCollapseState>;
 /** How the left panel's parts have to behave while its column narrows. */
 export declare const useLeftPanelCollapseContext: () => LeftPanelCollapseState;

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

@@ -18,5 +18,5 @@ export declare const StyledMobileSplitSlideLayer: import("@emotion/styled").Styl
 } & {
     offset: MobileSplitViewOffset;
     layer: MobileSplitLayer;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -16,5 +16,5 @@ export type MobileSplitStackValue = {
  * front isn't stored here - it derives from the `splitview` slot's visibility
  * (see {@link useMobileSplitView}).
  */
-export declare const MobileSplitStackContext: React.Context<MobileSplitStackValue | null>;
+export declare const MobileSplitStackContext: import("react").Context<MobileSplitStackValue | null>;
 export declare const useMobileSplitStack: () => MobileSplitStackValue;

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

@@ -1,5 +1,5 @@
 import type { LayoutState, LayoutStorage, LayoutStore } from "./-types";
-export declare const LayoutStoreProvider: React.Provider<LayoutStore | null>;
+export declare const LayoutStoreProvider: import("react").Provider<LayoutStore | null>;
 /** Get the store from context, or throw if used outside the provider. */
 export declare function useLayoutStore(): LayoutStore;
 /**
@@ -11,7 +11,7 @@ export type LayoutPersistence = {
     persistenceKey?: string;
     storage?: LayoutStorage;
 };
-export declare const LayoutPersistenceProvider: React.Provider<LayoutPersistence>;
+export declare const LayoutPersistenceProvider: import("react").Provider<LayoutPersistence>;
 /** Persistence config from the nearest `Layout.Provider` (empty if none). */
 export declare function useLayoutPersistence(): LayoutPersistence;
 /**

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

@@ -7,4 +7,3 @@ export { useAutoScrollToBottom } from "./useAutoScrollToBottom";
 export { createLayoutStore } from "./store";
 export { createInitialState, layoutReducer } from "./reducer";
 export * from "./-types";
-export type { LayoutBottomBarProps } from "./BottomBar/LayoutBottomBar";

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

@@ -5,7 +5,7 @@ export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
 type LayoutPortalTargets = PortalTargets & {
     root?: HTMLElement | null;
 };
-export declare const LayoutPortalContext: React.Context<LayoutPortalTargets>;
+export declare const LayoutPortalContext: import("react").Context<LayoutPortalTargets>;
 /**
  * Portal `children` into the host DOM node registered for `slot`. Returns the
  * portal (or `null` if the host isn't mounted yet). Call unconditionally -
@@ -38,11 +38,11 @@ export type PanelRegistry = {
     register: (slot: SlotKey, reg: PanelReg) => void;
     unregister: (slot: SlotKey) => void;
 };
-export declare const PanelRegistryContext: React.Context<PanelRegistry | null>;
+export declare const PanelRegistryContext: import("react").Context<PanelRegistry | null>;
 /** Register this slot as a panel for the marker's lifetime. */
 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" | "rightPanel" | "splitview", PanelReg>>>;
+export declare const PanelDeclarationsContext: import("react").Context<Partial<Record<"content" | "leftPanel" | "rightPanel" | "splitview", 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
@@ -51,7 +51,7 @@ export declare const PanelDeclarationsContext: React.Context<Partial<Record<"con
  * 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>;
+export declare const PanelRowContext: import("react").Context<string>;
 /** The row's current column set, as a stable key. Empty outside a Layout. */
 export declare const usePanelRow: () => string;
 /**
@@ -63,7 +63,7 @@ export declare const usePanelRow: () => string;
 export type PanelPresence = {
     setPresent: (slot: SlotKey, isPresent: boolean) => void;
 };
-export declare const PanelPresenceContext: React.Context<PanelPresence | null>;
+export declare const PanelPresenceContext: import("react").Context<PanelPresence | null>;
 /** Report this slot's live presence so the Layout keeps its column mounted
  *  through the exit animation. No-op outside a Layout. */
 export declare function usePanelPresence(slot: SlotKey, isPresent: boolean): void;
@@ -85,7 +85,7 @@ export type PanelAnimationControl = {
     /** Mute the Group's resize/collapse/persist callbacks for a slot mid-slide. */
     setResizeSuppressed: (slot: SlotKey, suppressed: boolean) => void;
 };
-export declare const PanelAnimationContext: React.Context<PanelAnimationControl | null>;
+export declare const PanelAnimationContext: import("react").Context<PanelAnimationControl | null>;
 /** Access the Layout's panel-animation control. Null outside a Layout. */
 export declare function usePanelAnimationControl(): PanelAnimationControl | null;
 /** Run `onChange(value)` when `value` transitions (not on initial mount). */

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

@@ -2,5 +2,5 @@
  *  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 LeftPanelIdContext: import("react").Context<string>;
 export declare const useLeftPanelId: () => string;

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

@@ -5,7 +5,7 @@ type PanelAnimationsStore = {
     subscribe: (listener: () => void) => () => void;
     set: (slot: SlotKey, animation: PanelAnimation | null) => void;
 };
-export declare const PanelAnimationsProvider: React.Provider<PanelAnimationsStore | null>;
+export declare const PanelAnimationsProvider: import("react").Provider<PanelAnimationsStore | null>;
 export declare const usePanelAnimationsStore: () => PanelAnimationsStore | null;
 export declare const createPanelAnimationsStore: () => PanelAnimationsStore;
 export declare const usePanelAnimations: () => Animations;

package/build/esm/components/NavBar/NavBar.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
+import { NavBarSubMenuContainer } from "./NavBarSubMenuContainer";
+import { NavBarDropdownTriggerButton } from "./NavBarDropdownTriggerButton";
+import { NavBarSearchInput } from "./NavBarSearchInput";
 import { NavBarOverlayBar } from "./NavBarOverlayBar";
+import { PrimaryNavContainer, PrimaryNav } from "./NavBarPrimaryNav";
+import { PrimaryNavLinkItem } from "./NavBarPrimaryNavLinkItem";
+import { SecondaryNav } from "./NavBarSecondaryNav";
 import { NavBarName } from "./types";
 type NavBarProps = React.PropsWithChildren<{
     subTheme: NavBarName;
@@ -7,23 +13,13 @@ type NavBarProps = React.PropsWithChildren<{
 }>;
 export declare function NavBar({ children, subTheme, isCompact, }: NavBarProps): React.ReactElement;
 export declare namespace NavBar {
-    var PrimaryNavContainer: typeof import("./NavBarPrimaryNav").PrimaryNavContainer;
-    var PrimaryNav: typeof import("./NavBarPrimaryNav").PrimaryNav;
-    var PrimaryNavItem: React.ForwardRefExoticComponent<{
-        label: string;
-        isActive?: boolean;
-        as?: React.ElementType;
-        to?: string;
-    } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & React.RefAttributes<HTMLAnchorElement>>;
-    var SubMenuContainer: React.ForwardRefExoticComponent<{
-        "data-e2e-test-id"?: string;
-        children: React.ReactNode;
-    } & React.RefAttributes<HTMLDivElement>>;
-    var OverlayBar: typeof NavBarOverlayBar;
-    var SecondaryNav: typeof import("./NavBarSecondaryNav").SecondaryNav;
-    var DropdownTriggerButton: React.ForwardRefExoticComponent<Pick<import("../..").ButtonProps, "onFocus" | "onBlur" | "onClick" | "disabled"> & {
-        children?: React.ReactNode | undefined;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    var SearchInput: React.ForwardRefExoticComponent<import("./NavBarSearchInput").NavBarSearchInputProps & React.RefAttributes<HTMLButtonElement>>;
+    export { PrimaryNavContainer };
+    export { PrimaryNav };
+    export { PrimaryNavLinkItem as PrimaryNavItem };
+    export { NavBarSubMenuContainer as SubMenuContainer };
+    export { NavBarOverlayBar as OverlayBar };
+    export { SecondaryNav };
+    export { NavBarDropdownTriggerButton as DropdownTriggerButton };
+    export { NavBarSearchInput as SearchInput };
 }
 export {};

package/build/esm/components/NavBar/NavBarContext.d.ts

@@ -6,6 +6,6 @@ type NavBarContextValue = {
     primaryNavRef: RefObject<HTMLElement>;
     secondaryNavRef: RefObject<HTMLElement>;
 };
-export declare const NavBarContext: React.Context<NavBarContextValue>;
+export declare const NavBarContext: import("react").Context<NavBarContextValue>;
 export declare function useNavBarContext(): NavBarContextValue;
 export {};

package/build/esm/components/NavBar/NavBarDropdownTriggerButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { ButtonProps } from "../Button/Button";
-export declare const NavBarDropdownTriggerButton: React.ForwardRefExoticComponent<Pick<ButtonProps, "onFocus" | "onBlur" | "onClick" | "disabled"> & {
+export declare const NavBarDropdownTriggerButton: React.ForwardRefExoticComponent<Pick<ButtonProps, "disabled" | "onBlur" | "onClick" | "onFocus"> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/build/esm/components/Patterns/Dialog/DialogContext.d.ts

@@ -1 +1 @@
-export declare const DialogContext: React.Context<boolean>;
+export declare const DialogContext: import("react").Context<boolean>;

package/build/esm/components/Patterns/EmptyState/EmptyState.d.ts

@@ -20,8 +20,8 @@ export type EmptyStateProps = {
 };
 export declare function EmptyState({ title, titleAs, description, variant, icon, children, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: EmptyStateProps): React.ReactElement;
 export declare namespace EmptyState {
-    var ButtonGroup: typeof EmptyStateButtonGroup;
-    var Link: typeof EmptyStateLink;
+    export { EmptyStateButtonGroup as ButtonGroup };
+    export { EmptyStateLink as Link };
 }
 declare function EmptyStateButtonGroup<C extends React.ElementType = "button">({ ...rest }: Omit<ButtonGroupProps<C>, "buttonSize">): React.ReactElement;
 declare function EmptyStateLink({ children, ...rest }: Omit<LinkProps, "size" | "color" | "weight"> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {

package/build/esm/components/Patterns/Modal/Modal.d.ts

@@ -102,9 +102,11 @@ type ImageProps = {
     ImageComponent: React.ElementType<any>;
 };
 export type ModalProps = BaseProps & ConditionalRoleProps & LabelProps & ImageProps & Pick<PortalProps, "portalContainer">;
+declare const ModalStack: ({ children, ...rest }: Omit<StackProps, "space">) => React.JSX.Element;
+declare const ModalText: ({ children, ...rest }: Omit<TextProps, "size" | "variant">) => React.JSX.Element;
 export declare function Modal({ header, subHeader, labelHeader, children, imageUrl, ImageComponent, secondaryButton, cancelButtonLabel, isDismissible, isFullScreen, isMaxWidthLimit, actionButton, role, onAction, size, privateProps: { skipPortal, height, zeroPadding, tabbableOptions }, portalContainer, closeButtonAriaLabel, "data-e2e-test-id": dataE2eTestId, imageAlt, initialFocus, ...ariaAttributes }: ModalProps): React.ReactElement;
 export declare namespace Modal {
-    var Stack: ({ children, ...rest }: Omit<StackProps, "space">) => React.JSX.Element;
-    var Text: ({ children, ...rest }: Omit<TextProps, "size" | "variant">) => React.JSX.Element;
+    export { ModalStack as Stack };
+    export { ModalText as Text };
 }
 export {};

package/build/esm/components/Patterns/Popover/PopoverContext.d.ts

@@ -6,4 +6,4 @@ export type PopoverContextValue = {
      */
     portalContainer?: HTMLElement | null;
 };
-export declare const PopoverContext: React.Context<PopoverContextValue>;
+export declare const PopoverContext: import("react").Context<PopoverContextValue>;

package/build/esm/components/PromptInput/PromptInput.d.ts

@@ -70,5 +70,5 @@ export declare const PromptInput: React.ForwardRefExoticComponent<{
     onEnterKey: () => void;
     /** Renders an icon to the left inside the textarea */
     leftIcon?: IconName;
-} & Omit<PromptTextAreaProps, "size" | "selectedListItem" | "isAutocompleteListOpen" | "hasAutocomplete" | "hasLeftIcon"> & Pick<AutocompleteListProps, "portalContainer" | "autocompleteListItems" | "autocompleteListFooter"> & React.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<PromptTextAreaProps, "hasAutocomplete" | "hasLeftIcon" | "isAutocompleteListOpen" | "selectedListItem" | "size"> & Pick<AutocompleteListProps, "autocompleteListFooter" | "autocompleteListItems" | "portalContainer"> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/build/esm/components/RadioCard/RadioCard.d.ts

@@ -13,4 +13,4 @@ export declare const RadioCard: React.ForwardRefExoticComponent<{
     renderContent?: (params: {
         isSelected: boolean;
     }) => React.ReactNode;
-} & Omit<RadioProps, "errorMessages" | "hint" | "hideLabel"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<RadioProps, "errorMessages" | "hideLabel" | "hint"> & React.RefAttributes<HTMLInputElement>>;

package/build/esm/components/SearchResult/SearchResult.d.ts

@@ -33,7 +33,9 @@ export type SearchResultProps = {
     /** The test id for the result's primary target. */
     "data-e2e-test-id"?: string;
 };
+declare const defaultProps: Partial<SearchResultProps>;
 export declare function SearchResult({ title, subtitle, icon, details, body, secondaryTargets, link, labels, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: SearchResultProps): React.ReactElement;
 export declare namespace SearchResult {
-    var defaultProps: Partial<SearchResultProps>;
+    export { defaultProps };
 }
+export {};

package/build/esm/components/Sheet/Sheet.js

@@ -1 +1 @@
-import React,{useRef,useLayoutEffect,useState,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{createPortal}from"react-dom";import{keyframes,Global}from"@emotion/react";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{Container}from"../Container/Container";import{useDragDown}from"../../shared/useDragDown";import{StyledBackdrop}from"../Lightbox/Lightbox";import{isWithinScrolledElement}from"../../shared/isWithinScrolledElement";export const SHEET_MAX_HEIGHT="80svh";let StyledContainer=styled("div",{target:"e137uunh0",label:"StyledContainer"})(({theme,containerHeight,isClosing,isOpening,dragOffset=0})=>{let animation;if(containerHeight){let slideOut=keyframes({from:{transform:`translateY(${dragOffset}px)`},to:{transform:`translateY(${containerHeight}px)`}}),slideIn=keyframes({from:{transform:`translateY(${containerHeight}px)`},to:{transform:"translateY(0px)"}});animation=isClosing?`200ms ease-out forwards ${slideOut}`:isOpening?`300ms ease-out forwards ${slideIn}`:"none"}return{position:"fixed",left:0,bottom:0,width:"100vw",transformOrigin:"bottom",animation,boxSizing:"border-box",zIndex:theme.variables.zIndex.modal,"> div":{borderBottomLeftRadius:0,borderBottomRightRadius:0}}}),StyledContentContainer=styled("div",{target:"e137uunh1",label:"StyledContentContainer"})(({theme,isClosing,isOpening})=>{let animation,fadeOut=keyframes({from:{opacity:theme.variables.opacity.visible},to:{opacity:theme.variables.opacity.hidden}}),fadeIn=keyframes({from:{opacity:theme.variables.opacity.hidden},to:{opacity:theme.variables.opacity.visible}}),opacity=theme.variables.opacity.hidden;return isClosing?animation=`50ms ease-out forwards ${fadeOut}`:isOpening?animation=`50ms ease-out 250ms forwards ${fadeIn}`:(animation="none",opacity=theme.variables.opacity.visible),{overflow:"auto",maxHeight:"80svh",boxSizing:"border-box",overscrollBehavior:"none",backgroundColor:theme.values.color.background.elevated.default,opacity,animation}}),StyledHandleContainer=styled("div",{target:"e137uunh2",label:"StyledHandleContainer"})(({theme,isContentContainerScrolled})=>({padding:`${theme.variables.size.spacing.xs} 0`,display:"flex",justifyContent:"center",backgroundColor:theme.values.color.background.elevated.default,...isContentContainerScrolled&&{boxShadow:theme.values.elevation[1]}})),StyledHandle=styled("div",{target:"e137uunh3",label:"StyledHandle"})(({theme})=>({width:"80px",height:"4px",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.divider.secondary}));export function Sheet({id,children,hasBackdrop,isVisible,onClose,onUnmount,portalContainer,dismissOnOutsideClick=!0,disableInitialFocus,disableReturnFocusToTrigger,onClickOutsideDeactivates,"data-e2e-test-id":dataE2eTestId,role,...ariaAttributes}){let[isClosing,setClosing]=useState(!1),[isOpening,setOpening]=useState(!1),[containerHeight,setContainerHeight]=useState(0),[isContentContainerScrolled,setContentContainerScrolled]=useState(!1),containerRef=useRef(null),contentContainerRef=useRef(null),handleContainerRef=useRef(null),prevVisibleState=useRef(!1),dragOffset=useRef(0),isDragStarted=useRef(!1);useLayoutEffect(()=>{isVisible&&setOpening(!0)},[isVisible]),useLayoutEffect(()=>{isVisible&&containerRef.current&&setContainerHeight(containerRef.current.getBoundingClientRect().height)},[isVisible,children]),useEffect(()=>{!isVisible&&prevVisibleState.current&&setClosing(!0),prevVisibleState.current=isVisible},[isVisible]),useEffect(()=>{isVisible&&isClosing&&onClose()},[isVisible,isClosing,onClose]);let handleDragStart=useCallback(()=>{requestAnimationFrame(()=>{contentContainerRef.current?.scrollTop===0&&containerRef.current&&(containerRef.current.style.animation="none",containerRef.current.style.transition="transform 0.1s ease",containerRef.current.style.transform="translateY(0px)",dragOffset.current=0,isDragStarted.current=!0)})},[containerRef,contentContainerRef]),handleDrag=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0;requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&contentContainerRef.current?.scrollTop===0&&offsetFromStart<containerCurrentHeight&&(containerRef.current.style.transform=`translateY(${offsetFromStart}px)`,dragOffset.current=offsetFromStart)})},[containerRef,contentContainerRef]),handleDragEnd=useCallback((_,offsetFromStart)=>{let containerCurrentHeight=containerRef.current?.getBoundingClientRect()?.height??0,minDragDistance=containerCurrentHeight<300?containerCurrentHeight/4:150;requestAnimationFrame(()=>{isDragStarted.current&&(offsetFromStart>=minDragDistance&&contentContainerRef.current?.scrollTop===0?onClose():containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0)),isDragStarted.current=!1})},[containerRef,onClose]),handleDragCancel=useCallback(()=>{requestAnimationFrame(()=>{isDragStarted.current&&containerRef.current&&(containerRef.current.style.transform="translateY(0px)",dragOffset.current=0),isDragStarted.current=!1})},[containerRef]),shouldInitiateDrag=useCallback(event=>{let target=event.target;return!!handleContainerRef.current?.contains(target)||!(isWithinScrolledElement(target,containerRef.current)||(contentContainerRef.current?.scrollTop??0)>0)},[containerRef,contentContainerRef,handleContainerRef]);useDragDown({ref:containerRef,isVisible,onDragStart:handleDragStart,onDrag:handleDrag,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,shouldInitiateDrag});let handlePostDeactivate=useCallback(()=>{onClose()},[onClose]);if(!((isVisible||isClosing)&&!(isVisible&&isClosing)))return null;let sheetElm=React.createElement(React.Fragment,null,React.createElement(Global,{styles:[{html:{overflow:"hidden",overscrollBehavior:"none"}}]}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&onClickOutsideDeactivates?onClickOutsideDeactivates:dismissOnOutsideClick,allowOutsideClick:!0,escapeDeactivates:!0,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger,fallbackFocus:'[data-ds-id="Sheet"]',onPostDeactivate:handlePostDeactivate}},React.createElement(StyledContainer,{...id?{id}:{},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Sheet",containerHeight:containerHeight,isClosing:isClosing,isOpening:isOpening,ref:containerRef,dragOffset:dragOffset.current,onAnimationEnd:()=>{isClosing?(setClosing(!1),setContainerHeight(0),dragOffset.current=0,onUnmount&&onUnmount()):isOpening&&setOpening(!1)},role:role,...ariaAttributes},React.createElement(Container,{elevation:4},React.createElement(StyledHandleContainer,{ref:handleContainerRef,isContentContainerScrolled:isContentContainerScrolled},React.createElement(StyledHandle,null)),React.createElement(StyledContentContainer,{isClosing:isClosing,isOpening:isOpening,ref:contentContainerRef,onScroll:()=>{setContentContainerScrolled(contentContainerRef.current?.scrollTop!==0)},onAnimationEnd:evt=>evt.stopPropagation()},children))))),wrappedSheet=hasBackdrop&&!isClosing?React.createElement(StyledBackdrop,null,sheetElm):sheetElm,container=portalContainer||!!document&&document.body;return container&&createPortal(wrappedSheet,container)}
+import React,{useRef,useState,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{createPortal}from"react-dom";import{keyframes,Global,useTheme}from"@emotion/react";import{FocusTrapWrapper}from"../../shared/FocusTrapWrapper";import{Container}from"../Container/Container";import{useExitAnimation}from"../../shared/useExitAnimation";import{useDocument}from"../../shared/useDocument";import{SHEET_HEIGHT_VAR,useSheetHeightSync}from"./useSheetHeightSync";export const SHEET_MAX_HEIGHT="80svh";let SCROLL_TIMELINE="--sheet-scroll",supportsScrollDrivenAnimations=()=>"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("animation-timeline: scroll()"),globalStyles={html:{overflow:"hidden",overscrollBehavior:"none"}},slideIn=keyframes({from:{transform:"translateY(100%)"},to:{transform:"translateY(0)"}},"label:slideIn"),slideOut=keyframes({from:{transform:"translateY(0)"},to:{transform:"translateY(100%)"}},"label:slideOut"),canScrollFurther=({element,direction})=>{if(!(direction<0?element.scrollTop>0:element.scrollTop+element.clientHeight<element.scrollHeight-1))return!1;let overflowY=element.ownerDocument.defaultView?.getComputedStyle(element).overflowY;return!!overflowY&&["auto","scroll","overlay"].includes(overflowY)},canContentTakeScroll=({target,boundary,direction})=>{let element=target instanceof Element?target:null;for(;element&&element!==boundary;){if(canScrollFurther({element,direction}))return!0;element=element.parentElement}return!1},SCROLL_KEY_DIRECTIONS={ArrowUp:-1,PageUp:-1,Home:-1,ArrowDown:1,PageDown:1,End:1},getScrollKeyDirection=({event,scroller})=>{let{target,key,shiftKey}=event;if(!(target instanceof HTMLElement&&(target.isContentEditable||["INPUT","TEXTAREA","SELECT"].includes(target.tagName)))){if(" "===key){if(target!==scroller)return;return shiftKey?-1:1}return SCROLL_KEY_DIRECTIONS[key]}},StyledRoot=styled("div",{target:"e1prhk2x0",label:"StyledRoot"})(({theme})=>({position:"fixed",inset:0,zIndex:theme.variables.zIndex.modal,pointerEvents:"none",timelineScope:SCROLL_TIMELINE})),holdStill=keyframes({from:{transform:"translateY(0)"},to:{transform:"translateY(0)"}},"label:holdStill"),getSlideAnimation=({isLeaving,isSwipedAway,theme})=>{let{enter,exit}=theme.variables.animation.sheet;return isLeaving?isSwipedAway?`${holdStill} ${exit.duration} linear forwards`:`${slideOut} ${exit.duration} ${exit.timingFunction} forwards`:`${slideIn} ${enter.duration} ${enter.timingFunction} both`},StyledBackdrop=styled("div",{target:"e1prhk2x1",label:"StyledBackdrop"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes({from:{opacity:hidden},to:{opacity:visible}}),fadeOut=keyframes({from:{opacity:visible},to:{opacity:hidden}}),{enter,exit}=theme.variables.animation.sheet;return{position:"absolute",inset:0,pointerEvents:isLeaving?"none":"auto",animation:isLeaving?`${fadeOut} ${exit.duration} ${enter.timingFunction} forwards`:`${fadeIn} ${enter.duration} ${enter.timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdropFill=styled("div",{target:"e1prhk2x2",label:"StyledBackdropFill"})(({theme})=>{let{hidden,visible}=theme.variables.opacity,dimWithSheet=keyframes({from:{opacity:hidden},to:{opacity:visible}});return{position:"absolute",inset:0,background:theme.values.color.background.backdrop.default,"@supports (animation-timeline: scroll())":{animation:`${dimWithSheet} linear both`,animationTimeline:SCROLL_TIMELINE}}}),StyledFrame=styled("div",{target:"e1prhk2x3",label:"StyledFrame"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,height:`var(${SHEET_HEIGHT_VAR}, auto)`,"::after":{content:'""',position:"absolute",top:"calc(100% - 1px)",left:0,right:0,height:SHEET_MAX_HEIGHT,backgroundColor:theme.values.color.background.elevated.default}})),StyledScroller=styled("div",{target:"e1prhk2x4",label:"StyledScroller"})(({theme,isLeaving,isSwipedAway})=>({position:"absolute",left:0,right:0,bottom:0,height:"calc(100% + 112px)",overflowY:"scroll",scrollSnapType:"y mandatory",overscrollBehavior:"none",scrollbarWidth:"none","::-webkit-scrollbar":{display:"none"},scrollTimeline:`${SCROLL_TIMELINE} y`,pointerEvents:isLeaving?"none":"auto",outline:"none",animation:getSlideAnimation({isLeaving,isSwipedAway,theme}),"@media (prefers-reduced-motion: reduce)":{animation:"none"}})),StyledClosedSnapPoint=styled("div",{target:"e1prhk2x5",label:"StyledClosedSnapPoint"})({height:"calc(100% + 64px + 1px)",scrollSnapAlign:"start"}),StyledSurface=styled("div",{target:"e1prhk2x6",label:"StyledSurface"})({scrollSnapAlign:"end","> div":{borderBottomLeftRadius:0,borderBottomRightRadius:0}}),StyledContentContainer=styled("div",{target:"e1prhk2x7",label:"StyledContentContainer"})(({theme})=>({overflow:"auto",maxHeight:SHEET_MAX_HEIGHT,boxSizing:"border-box",backgroundColor:theme.values.color.background.elevated.default})),StyledHandleContainer=styled("div",{target:"e1prhk2x8",label:"StyledHandleContainer"})(({theme,isContentContainerScrolled})=>({padding:`${theme.variables.size.spacing.xs} 0`,display:"flex",justifyContent:"center",backgroundColor:theme.values.color.background.elevated.default,...isContentContainerScrolled&&{boxShadow:theme.values.elevation[1]}})),StyledHandle=styled("div",{target:"e1prhk2x9",label:"StyledHandle"})(({theme})=>({width:"80px",height:"4px",borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.divider.secondary}));export function Sheet({id,children,hasBackdrop,isVisible,onClose,onUnmount,portalContainer,dismissOnOutsideClick=!0,disableInitialFocus,disableReturnFocusToTrigger,onClickOutsideDeactivates,"data-e2e-test-id":dataE2eTestId,role,...ariaAttributes}){let theme=useTheme(),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),[isContentContainerScrolled,setContentContainerScrolled]=useState(!1),[isSwipedAway,setSwipedAway]=useState(!1),frameRef=useRef(null),scrollerRef=useRef(null),surfaceRef=useRef(null),backdropFillRef=useRef(null),contentContainerRef=useRef(null),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]),useSheetHeightSync({frameRef,scrollerRef,surfaceRef,isOpen:isVisible,resize:theme.variables.animation.sheet.resize}),useEffect(()=>{isVisible&&setSwipedAway(!1)},[isVisible]),useEffect(()=>{let scroller=scrollerRef.current,surface=surfaceRef.current;if(!isVisible||!scroller||!surface||"undefined"==typeof IntersectionObserver)return;let isHidden=!1,isTouching=!1,closeIfHidden=()=>{isHidden&&!isTouching&&(setSwipedAway(!0),onClose())},intersectionObserver=new IntersectionObserver(([entry])=>{isHidden=entry.intersectionRatio<.01,closeIfHidden()},{root:scroller,threshold:[.01]}),handleTouchStart=()=>{isTouching=!0},handleTouchEnd=()=>{isTouching=!1,closeIfHidden()};return intersectionObserver.observe(surface),scroller.addEventListener("touchstart",handleTouchStart,{passive:!0}),scroller.addEventListener("touchend",handleTouchEnd,{passive:!0}),scroller.addEventListener("touchcancel",handleTouchEnd,{passive:!0}),()=>{intersectionObserver.disconnect(),scroller.removeEventListener("touchstart",handleTouchStart),scroller.removeEventListener("touchend",handleTouchEnd),scroller.removeEventListener("touchcancel",handleTouchEnd)}},[isVisible,onClose]),useEffect(()=>{let scroller=scrollerRef.current;if(!isMounted||!scroller)return;let handleScrollerWheel=event=>{if(event.ctrlKey||0===event.deltaY)return;let direction=event.deltaY<0?-1:1;canContentTakeScroll({target:event.target,boundary:scroller,direction})||event.preventDefault()},handleScrollerKeyDown=event=>{let direction=getScrollKeyDirection({event,scroller});direction&&!canContentTakeScroll({target:event.target,boundary:scroller,direction})&&event.preventDefault()};return scroller.addEventListener("wheel",handleScrollerWheel,{passive:!1}),scroller.addEventListener("keydown",handleScrollerKeyDown),()=>{scroller.removeEventListener("wheel",handleScrollerWheel),scroller.removeEventListener("keydown",handleScrollerKeyDown)}},[isMounted]),useEffect(()=>{let scroller=scrollerRef.current,backdropFill=backdropFillRef.current;if(!isMounted||!scroller||!backdropFill||supportsScrollDrivenAnimations())return;let handleScrollerScroll=()=>{let maxScrollTop=scroller.scrollHeight-scroller.clientHeight;backdropFill.style.opacity=String(maxScrollTop>0?scroller.scrollTop/maxScrollTop:1)};return handleScrollerScroll(),scroller.addEventListener("scroll",handleScrollerScroll,{passive:!0}),()=>scroller.removeEventListener("scroll",handleScrollerScroll)},[isMounted,hasBackdrop]);let handlePostDeactivate=useCallback(()=>{onClose()},[onClose]);if(!isMounted)return null;let sheetElm=React.createElement(React.Fragment,null,React.createElement(Global,{styles:[globalStyles]}),React.createElement(StyledRoot,null,hasBackdrop&&React.createElement(StyledBackdrop,{isLeaving:isLeaving},React.createElement(StyledBackdropFill,{ref:backdropFillRef})),React.createElement(StyledFrame,{ref:frameRef},React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{clickOutsideDeactivates:dismissOnOutsideClick&&onClickOutsideDeactivates?onClickOutsideDeactivates:dismissOnOutsideClick,allowOutsideClick:!0,escapeDeactivates:!0,preventScroll:!0,initialFocus:()=>!disableInitialFocus,returnFocusOnDeactivate:!disableReturnFocusToTrigger,fallbackFocus:'[data-ds-id="Sheet"]',onPostDeactivate:handlePostDeactivate}},React.createElement(StyledScroller,{...id?{id}:{},"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Sheet",ref:scrollerRef,isLeaving:isLeaving,isSwipedAway:isSwipedAway,onAnimationEnd:onAnimationEnd,onClick:event=>{!surfaceRef.current?.contains(event.target)&&dismissOnOutsideClick&&onClose()},role:role,...ariaAttributes},React.createElement(StyledClosedSnapPoint,null),React.createElement(StyledSurface,{ref:surfaceRef},React.createElement(Container,{elevation:4},React.createElement(StyledHandleContainer,{isContentContainerScrolled:isContentContainerScrolled},React.createElement(StyledHandle,null)),React.createElement(StyledContentContainer,{ref:contentContainerRef,onScroll:()=>{setContentContainerScrolled(contentContainerRef.current?.scrollTop!==0)}},children)))))))),container=portalContainer||document?.body;return container?createPortal(sheetElm,container):null}

package/build/esm/components/Sheet/useSheetHeightSync.d.ts

@@ -0,0 +1,26 @@
+import type { RefObject } from "react";
+/** CSS variable the scroller reads its height from */
+export declare const SHEET_HEIGHT_VAR = "--sheet-height";
+type Motion = {
+    duration: string;
+    timingFunction: string;
+};
+type UseSheetHeightSyncOptions = {
+    /** Wraps the scroller: sized to the sheet, and moved to glide height changes */
+    frameRef: RefObject<HTMLElement | null>;
+    /** Snap scroller filling the frame */
+    scrollerRef: RefObject<HTMLElement | null>;
+    /** The sheet surface inside it */
+    surfaceRef: RefObject<HTMLElement | null>;
+    isOpen: boolean;
+    resize: Motion;
+};
+/**
+ * Keeps the snap scroller sized to the sheet and parked at the open position,
+ * and glides height changes instead of jumping: the sheet takes its new size
+ * at once and a compositor transform on the frame plays its top edge from the
+ * old position into place (FLIP). The frame sits outside the scroller, where a
+ * transform can't stretch the scrollable area and upset the snap position.
+ */
+export declare function useSheetHeightSync({ frameRef, scrollerRef, surfaceRef, isOpen, resize: { duration, timingFunction }, }: UseSheetHeightSyncOptions): void;
+export {};

package/build/esm/components/Sheet/useSheetHeightSync.js

@@ -0,0 +1 @@
+import{useEffect,useLayoutEffect}from"react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";export const SHEET_HEIGHT_VAR="--sheet-height";let sizeFrameToSheet=({frame,sheetHeight})=>frame.style.setProperty("--sheet-height",`${sheetHeight}px`),fitScrollerToSheet=({frame,scroller,sheetHeight})=>{sizeFrameToSheet({frame,sheetHeight}),scroller.scrollTop=scroller.scrollHeight},toMilliseconds=duration=>{let value=parseFloat(duration);return duration.trim().endsWith("ms")?value:duration.trim().endsWith("s")?1e3*value:value},getRenderedTranslateY=(element,window)=>{let{transform}=window.getComputedStyle(element);return"none"===transform?0:new DOMMatrixReadOnly(transform).m42};export function useSheetHeightSync({frameRef,scrollerRef,surfaceRef,isOpen,resize:{duration,timingFunction}}){let window=useWindow();useLayoutEffect(()=>{let frame=frameRef.current,scroller=scrollerRef.current,surface=surfaceRef.current;isOpen&&frame&&scroller&&surface&&fitScrollerToSheet({frame,scroller,sheetHeight:surface.offsetHeight})},[isOpen,frameRef,scrollerRef,surfaceRef]),useEffect(()=>{let heightAnimation,frame=frameRef.current,scroller=scrollerRef.current,surface=surfaceRef.current;if(!isOpen||!frame||!scroller||!surface||"undefined"==typeof ResizeObserver)return;let previousHeight=surface.offsetHeight,isTouching=!1,handleTouchStart=()=>{isTouching=!0,heightAnimation?.playState==="running"&&heightAnimation.pause()},handleTouchEnd=()=>{isTouching=!1,heightAnimation?.playState==="paused"&&heightAnimation.play()},resizeObserver=new ResizeObserver(()=>{let sheetHeight=surface.offsetHeight,heightDelta=sheetHeight-previousHeight;if(previousHeight=sheetHeight,0===heightDelta)return;if(isTouching)return void sizeFrameToSheet({frame,sheetHeight});let inFlightOffset=heightAnimation&&"finished"!==heightAnimation.playState?getRenderedTranslateY(frame,window):0;heightAnimation?.cancel(),fitScrollerToSheet({frame,scroller,sheetHeight}),"function"!=typeof frame.animate||prefersReducedMotion(window)||(heightAnimation=frame.animate([{transform:`translateY(${heightDelta+inFlightOffset}px)`},{transform:"none"}],{duration:toMilliseconds(duration),easing:timingFunction}))});return resizeObserver.observe(surface),scroller.addEventListener("touchstart",handleTouchStart,{passive:!0}),scroller.addEventListener("touchend",handleTouchEnd,{passive:!0}),scroller.addEventListener("touchcancel",handleTouchEnd,{passive:!0}),()=>{resizeObserver.disconnect(),heightAnimation?.cancel(),scroller.removeEventListener("touchstart",handleTouchStart),scroller.removeEventListener("touchend",handleTouchEnd),scroller.removeEventListener("touchcancel",handleTouchEnd)}},[isOpen,frameRef,scrollerRef,surfaceRef,window,duration,timingFunction])}