@amboss/design-system 4.14.0 → 4.16.0

package/build/cjs/components/DataTable/DataTable.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BaseDataTable(){return BaseDataTable},get DataTable(){return DataTable}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_mediaQueries=require("../../shared/mediaQueries"),_Container=require("../Container/Container"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),_buildColumnSegments=require("./internal/buildColumnSegments"),_buildInternalColumns=require("./internal/buildInternalColumns"),_TableHeader=/*#__PURE__*/_interop_require_default._(require("./header/TableHeader")),_TableBody=/*#__PURE__*/_interop_require_default._(require("./TableBody")),_TableColumnGroups=/*#__PURE__*/_interop_require_default._(require("./TableColumnGroups")),_useDataTableScrollContainer=require("./useDataTableScrollContainer"),_useDataTableSort=require("./useDataTableSort"),_DataTableToolbar=require("./DataTableToolbar/DataTableToolbar");function getTableScrolledToRight(elm){let elmRect=elm.getBoundingClientRect();return elm.scrollLeft+elmRect.width>=elm.scrollWidth}const TableContainer=(0,_styled.default)("div",{target:"e17u2o1w0",label:"TableContainer"})(({theme,footer,maxHeight})=>({position:"relative",zIndex:0,overflow:"auto",backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",...(0,_mediaQueries.useResponsiveValue)({maxHeight}),...footer&&{borderBottomLeftRadius:0,borderBottomRightRadius:0}})),StyledTable=(0,_styled.default)("table",{target:"e17u2o1w1",label:"StyledTable"})(({layout,tableWidth})=>({borderSpacing:0,tableLayout:layout,...(0,_mediaQueries.useResponsiveValue)({width:tableWidth})})),StyledFooter=(0,_styled.default)("div",{target:"e17u2o1w2",label:"StyledFooter"})(({theme})=>({padding:theme.variables.size.spacing.xs,backgroundColor:theme.values.color.background.primary.default,borderBottomLeftRadius:"inherit",borderBottomRightRadius:"inherit"})),NO_SELECTED_ROW_IDS=[];function BaseDataTable({caption,columns,rows=[],footer,currentlySortedByColumn,isFirstColumnSticky=!0,isLastColumnSticky=!1,"data-e2e-test-id":dataE2eTestId,isLoading=!1,loadingStateScreenReaderText="Loading",isEmpty=!1,slotProps,children,emptyTableContentHeight="15rem",layout="auto",width="100%",bodyCellVerticalPadding="m",emptyCellContent="--",maxHeight,isSelectable,selectedRowIds=NO_SELECTED_ROW_IDS,allRowsSelected,selectAllRowsCheckboxAriaLabel,getRowProps=()=>({}),onRowSelectionChange,onAllRowsSelectionChange,isExpandable,expandedRowIds:expandedRowIdsProp,onRowExpansionChange,expandRowAriaLabel,collapseRowAriaLabel,onSort,...ariaAttributes}){let[isScrolledToRight,setIsScrolledToRight]=(0,_react.useState)(isLastColumnSticky),[isScrolledToLeft,setIsScrolledToLeft]=(0,_react.useState)(isFirstColumnSticky),[uncontrolledExpandedRowIds,setUncontrolledExpandedRowIds]=(0,_react.useState)([]),tableRef=(0,_react.useRef)(null),containerRef=(0,_react.useRef)(null),containerWidth=(0,_useDataTableScrollContainer.useDataTableScrollContainerWidth)(containerRef),isExpandedControlled=void 0!==expandedRowIdsProp,expandedRowIds=isExpandedControlled?expandedRowIdsProp:uncontrolledExpandedRowIds,activeSelectedRowIds=isSelectable?selectedRowIds:NO_SELECTED_ROW_IDS,internalColumns=(0,_buildInternalColumns.buildInternalColumns)({columns,features:{selectable:isSelectable,expandable:isExpandable}}),columnSegments=(0,_buildColumnSegments.buildColumnSegments)(internalColumns),hasColumnGroups=columnSegments.some(({group})=>group),handleRowExpansionChange=(0,_react.useCallback)(nextExpandedRowIds=>{isExpandedControlled||setUncontrolledExpandedRowIds(nextExpandedRowIds),onRowExpansionChange?.(nextExpandedRowIds)},[isExpandedControlled,onRowExpansionChange]),handleScroll=(0,_react.useCallback)(evt=>{let elm=evt.currentTarget;setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))},[]);(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver||!containerRef.current)return;let elm=containerRef.current,observer=new ResizeObserver(()=>{setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))});return observer.observe(elm),()=>observer.disconnect()},[]);let footerElm=footer?_react.default.createElement(StyledFooter,null,footer):null;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(TableContainer,{ref:containerRef,footer:footer,maxHeight:maxHeight,onScroll:handleScroll},_react.default.createElement(StyledTable,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"DataTable",ref:tableRef,layout:layout,tableWidth:width,"aria-busy":isLoading||void 0,...ariaAttributes},_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"caption"},caption),hasColumnGroups&&_react.default.createElement(_TableColumnGroups.default,{segments:columnSegments}),_react.default.createElement(_TableHeader.default,{columns:internalColumns,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,currentlySortedByColumn:currentlySortedByColumn,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,maxHeight:maxHeight,allRowsSelected:allRowsSelected,selectedRowIds:activeSelectedRowIds,onAllRowsSelectionChange:onAllRowsSelectionChange,selectAllRowsCheckboxAriaLabel:selectAllRowsCheckboxAriaLabel,onSort:onSort}),_react.default.createElement(_TableBody.default,{columns:internalColumns,rows:rows,bodyCellVerticalPadding:bodyCellVerticalPadding,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,isEmpty:isEmpty,emptyState:slotProps?.emptyState,isLoading:isLoading,loadingStateScreenReaderText:loadingStateScreenReaderText,emptyTableContentHeight:emptyTableContentHeight,containerWidth:containerWidth,footer:footer,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,emptyCellContent:emptyCellContent,selectedRowIds:activeSelectedRowIds,onRowSelectionChange:onRowSelectionChange,getRowProps:getRowProps,expandedRowIds:expandedRowIds,isTableExpandable:isExpandable,expandRowAriaLabel:expandRowAriaLabel,collapseRowAriaLabel:collapseRowAriaLabel,onRowExpansionChange:handleRowExpansionChange},children))),footerElm)}function DataTable({children,...rest}){return _react.default.createElement(_Container.Container,{elevation:1},_react.default.createElement(BaseDataTable,rest,children))}DataTable.sortCompareFn=_useDataTableSort.defaultSortCompareFn,DataTable.Toolbar=_DataTableToolbar.DataTableToolbar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get BaseDataTable(){return BaseDataTable},get DataTable(){return DataTable}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_mediaQueries=require("../../shared/mediaQueries"),_Container=require("../Container/Container"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),_buildColumnSegments=require("./internal/buildColumnSegments"),_buildInternalColumns=require("./internal/buildInternalColumns"),_TableHeader=/*#__PURE__*/_interop_require_default._(require("./header/TableHeader")),_TableBody=/*#__PURE__*/_interop_require_default._(require("./TableBody")),_TableColumnGroups=/*#__PURE__*/_interop_require_default._(require("./TableColumnGroups")),_useDataTableScrollContainer=require("./useDataTableScrollContainer"),_useDataTableSort=require("./useDataTableSort"),_DataTableToolbar=require("./DataTableToolbar/DataTableToolbar");function getTableScrolledToRight(elm){let elmRect=elm.getBoundingClientRect();return elm.scrollLeft+elmRect.width>=elm.scrollWidth}const TableContainer=(0,_styled.default)("div",{target:"epu297i0",label:"TableContainer"})(({theme,footer,maxHeight})=>({position:"relative",zIndex:0,overflow:"auto",backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",...(0,_mediaQueries.useResponsiveValue)({maxHeight}),...footer&&{borderBottomLeftRadius:0,borderBottomRightRadius:0}})),StyledTable=(0,_styled.default)("table",{target:"epu297i1",label:"StyledTable"})(({layout,tableWidth})=>({borderSpacing:0,tableLayout:layout,...(0,_mediaQueries.useResponsiveValue)({width:tableWidth})})),StyledFooter=(0,_styled.default)("div",{target:"epu297i2",label:"StyledFooter"})(({theme})=>({padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.m}`,backgroundColor:theme.values.color.background.primary.default,borderBottomLeftRadius:"inherit",borderBottomRightRadius:"inherit"})),NO_SELECTED_ROW_IDS=[];function BaseDataTable({caption,columns,rows=[],footer,currentlySortedByColumn,isFirstColumnSticky=!0,isLastColumnSticky=!1,"data-e2e-test-id":dataE2eTestId,isLoading=!1,loadingStateScreenReaderText="Loading",isEmpty=!1,slotProps,children,emptyTableContentHeight="15rem",layout="auto",width="100%",bodyCellVerticalPadding="m",emptyCellContent="--",maxHeight,isSelectable,selectedRowIds=NO_SELECTED_ROW_IDS,allRowsSelected,selectAllRowsCheckboxAriaLabel,getRowProps=()=>({}),onRowSelectionChange,onAllRowsSelectionChange,isExpandable,expandedRowIds:expandedRowIdsProp,onRowExpansionChange,expandRowAriaLabel,collapseRowAriaLabel,onSort,...ariaAttributes}){let[isScrolledToRight,setIsScrolledToRight]=(0,_react.useState)(isLastColumnSticky),[isScrolledToLeft,setIsScrolledToLeft]=(0,_react.useState)(isFirstColumnSticky),[uncontrolledExpandedRowIds,setUncontrolledExpandedRowIds]=(0,_react.useState)([]),tableRef=(0,_react.useRef)(null),containerRef=(0,_react.useRef)(null),containerWidth=(0,_useDataTableScrollContainer.useDataTableScrollContainerWidth)(containerRef),isExpandedControlled=void 0!==expandedRowIdsProp,expandedRowIds=isExpandedControlled?expandedRowIdsProp:uncontrolledExpandedRowIds,activeSelectedRowIds=isSelectable?selectedRowIds:NO_SELECTED_ROW_IDS,internalColumns=(0,_buildInternalColumns.buildInternalColumns)({columns,features:{selectable:isSelectable,expandable:isExpandable}}),columnSegments=(0,_buildColumnSegments.buildColumnSegments)(internalColumns),hasColumnGroups=columnSegments.some(({group})=>group),handleRowExpansionChange=(0,_react.useCallback)(nextExpandedRowIds=>{isExpandedControlled||setUncontrolledExpandedRowIds(nextExpandedRowIds),onRowExpansionChange?.(nextExpandedRowIds)},[isExpandedControlled,onRowExpansionChange]),handleScroll=(0,_react.useCallback)(evt=>{let elm=evt.currentTarget;setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))},[]);(0,_react.useEffect)(()=>{if("undefined"==typeof ResizeObserver||!containerRef.current)return;let elm=containerRef.current,observer=new ResizeObserver(()=>{setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))});return observer.observe(elm),()=>observer.disconnect()},[]);let footerElm=footer?_react.default.createElement(StyledFooter,null,footer):null;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(TableContainer,{ref:containerRef,footer:footer,maxHeight:maxHeight,onScroll:handleScroll},_react.default.createElement(StyledTable,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"DataTable",ref:tableRef,layout:layout,tableWidth:width,"aria-busy":isLoading||void 0,...ariaAttributes},_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"caption"},caption),hasColumnGroups&&_react.default.createElement(_TableColumnGroups.default,{segments:columnSegments}),_react.default.createElement(_TableHeader.default,{columns:internalColumns,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,currentlySortedByColumn:currentlySortedByColumn,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,maxHeight:maxHeight,allRowsSelected:allRowsSelected,selectedRowIds:activeSelectedRowIds,onAllRowsSelectionChange:onAllRowsSelectionChange,selectAllRowsCheckboxAriaLabel:selectAllRowsCheckboxAriaLabel,onSort:onSort}),_react.default.createElement(_TableBody.default,{columns:internalColumns,rows:rows,bodyCellVerticalPadding:bodyCellVerticalPadding,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,isEmpty:isEmpty,emptyState:slotProps?.emptyState,isLoading:isLoading,loadingStateScreenReaderText:loadingStateScreenReaderText,emptyTableContentHeight:emptyTableContentHeight,containerWidth:containerWidth,footer:footer,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,emptyCellContent:emptyCellContent,selectedRowIds:activeSelectedRowIds,onRowSelectionChange:onRowSelectionChange,getRowProps:getRowProps,expandedRowIds:expandedRowIds,isTableExpandable:isExpandable,expandRowAriaLabel:expandRowAriaLabel,collapseRowAriaLabel:collapseRowAriaLabel,onRowExpansionChange:handleRowExpansionChange},children))),footerElm)}function DataTable({children,...rest}){return _react.default.createElement(_Container.Container,{elevation:1},_react.default.createElement(BaseDataTable,rest,children))}DataTable.sortCompareFn=_useDataTableSort.defaultSortCompareFn,DataTable.Toolbar=_DataTableToolbar.DataTableToolbar;

package/build/cjs/components/EntityList/BaseEntityList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityList",{enumerable:!0,get:function(){return BaseEntityList}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styledcomponents=require("./styled-components"),_useKeyboard=require("../../shared/useKeyboard"),_Icon=require("../Icon/Icon"),_EntityListItem=require("./EntityListItem"),_VirtualizedEntityList=require("./VirtualizedEntityList"),_useFocusByIndex=require("./useFocusByIndex"),_roles=require("./roles");function BaseEntityList({data,size="m",onClick,focusOnMount,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,renderItemWrapper,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,ariaAttributes:deprecatedAriaAttributes,slotProps,role:roleProp,truncateLabels=!1,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let rootRole,{itemRole,...rootAriaProps}=(rootRole=roleProp??"list",isSelectable&&(rootRole="listbox"),{role:rootRole,itemRole:_roles.ROLE_TO_ITEM_ROLE[rootRole],"aria-multiselectable":"listbox"===rootRole&&!!isSelectable||void 0}),ariaLabelExpand=slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse=slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse,dataShown=(0,_react.useMemo)(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=(0,_react.useMemo)(()=>new Set(selectedIds),[selectedIds]),listRef=(0,_react.useRef)(null),focusableItems=(0,_react.useMemo)(()=>dataShown.map(item=>({id:item.id,isDisabled:!!item.isDisabled})),[dataShown]),initialActiveIndex=(0,_react.useMemo)(()=>{let index=dataShown.findIndex(item=>item.isActive);return -1!==index?index:0},[dataShown]),{moveFocus,focusItemAtIndex,focusedIndex:selectedIndex}=(0,_useFocusByIndex.useFocusByIndex)({containerRef:listRef,nodeSelector:"data-list-item",data:focusableItems,preventScroll:isVirtualized,initialIndex:initialActiveIndex});(0,_react.useEffect)(()=>{focusOnMount&&focusItemAtIndex(selectedIndex)},[]),(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)}},listRef,isSelectable||!!onClick);let handleOnClick=(0,_react.useCallback)(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),renderEntityItem=index=>{let tabIndex,item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,isSelected=selectedIdsSet.has(item.id);if(isSelectable||onClick){let defaultTabIndex=0===index&&!selectedIndex;tabIndex=!item.isDisabled&&(index===selectedIndex||defaultTabIndex)?0:-1}let itemElm=_react.default.createElement(_EntityListItem.EntityListItem,{"data-list-item":index,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),isSelected:isSelectable?isSelected:void 0,role:itemRole,description:item.description,truncateLabel:truncateLabels,onSpaceEnterPress:()=>handleOnClick(item),tabIndex:tabIndex,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,onClick:e=>{e.target instanceof Element&&e.target.closest("label")||handleOnClick(item)},checkboxProps:isSelectable?{name:"list-checkbox",size:"s",checked:isSelected,onChange:()=>handleOnClick(item)}:void 0,renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>_react.default.createElement(_Icon.Icon,{...getLeftIconProps(item),size:textSize}):void 0,renderRight:renderRightProps=>renderRightContent?renderRightContent({...renderRightProps,...item}):void 0});return _react.default.createElement(_react.default.Fragment,{key:item.id},renderItemWrapper?renderItemWrapper({item,children:itemElm}):itemElm)};return _react.default.createElement("div",{ref:listRef},isVirtualized&&maxHeight?_react.default.createElement(_VirtualizedEntityList.VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId,...rootAriaProps,...ariaAttributes}):_react.default.createElement(_styledcomponents.StyledList,{size:size,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityList",...rootAriaProps,...ariaAttributes},dataShown.map((_item,i)=>renderEntityItem(i))))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityList",{enumerable:!0,get:function(){return BaseEntityList}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styledcomponents=require("./styled-components"),_useKeyboard=require("../../shared/useKeyboard"),_Icon=require("../Icon/Icon"),_EntityListItem=require("./EntityListItem"),_VirtualizedEntityList=require("./VirtualizedEntityList"),_useFocusByIndex=require("./useFocusByIndex"),_roles=require("./roles");function BaseEntityList({data,size="m",onClick,focusOnMount,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,renderItemWrapper,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,ariaAttributes:deprecatedAriaAttributes,slotProps,role:roleProp,truncateLabels=!1,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let rootRole,{itemRole,...rootAriaProps}=(rootRole=roleProp??"list",isSelectable&&(rootRole="listbox"),{role:rootRole,itemRole:_roles.ROLE_TO_ITEM_ROLE[rootRole],"aria-multiselectable":"listbox"===rootRole&&!!isSelectable||void 0}),ariaLabelExpand=slotProps?.toggle?.["aria-label-expand"]??deprecatedAriaAttributes?.ariaLabelExpand,ariaLabelCollapse=slotProps?.toggle?.["aria-label-collapse"]??deprecatedAriaAttributes?.ariaLabelCollapse,dataShown=(0,_react.useMemo)(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=(0,_react.useMemo)(()=>new Set(selectedIds),[selectedIds]),listRef=(0,_react.useRef)(null),focusableItems=(0,_react.useMemo)(()=>dataShown.map(item=>({id:item.id,isDisabled:!!item.isDisabled})),[dataShown]),initialActiveIndex=(0,_react.useMemo)(()=>{let index=dataShown.findIndex(item=>item.isActive);return -1!==index?index:0},[dataShown]),{moveFocus,focusItemAtIndex,focusedIndex:selectedIndex}=(0,_useFocusByIndex.useFocusByIndex)({containerRef:listRef,nodeSelector:"data-list-item",data:focusableItems,preventScroll:isVirtualized,initialIndex:initialActiveIndex});(0,_react.useEffect)(()=>{focusOnMount&&focusItemAtIndex(selectedIndex)},[]),(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{moveFocus(1)},ArrowUp:()=>{moveFocus(-1)}},listRef,isSelectable||!!onClick);let handleOnClick=(0,_react.useCallback)(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),renderEntityItem=index=>{let tabIndex,item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,isSelected=selectedIdsSet.has(item.id);if(isSelectable||onClick){let defaultTabIndex=0===index&&!selectedIndex;tabIndex=!item.isDisabled&&(index===selectedIndex||defaultTabIndex)?0:-1}let itemElm=_react.default.createElement(_EntityListItem.EntityListItem,{"data-list-item":index,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),isSelected:isSelectable?isSelected:void 0,role:itemRole,description:item.description,truncateLabel:truncateLabels,onSpaceEnterPress:()=>handleOnClick(item),tabIndex:tabIndex,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,onClick:e=>{e.target instanceof Element&&e.target.closest("label")||handleOnClick(item)},checkboxProps:isSelectable?{name:"list-checkbox",size:"s",checked:isSelected,onChange:()=>handleOnClick(item)}:void 0,renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>_react.default.createElement(_Icon.Icon,{...getLeftIconProps(item),size:slotProps?.leftIcon?.size??textSize}):void 0,renderRight:renderRightProps=>renderRightContent?renderRightContent({...renderRightProps,...item}):void 0});return _react.default.createElement(_react.default.Fragment,{key:item.id},renderItemWrapper?renderItemWrapper({item,children:itemElm}):itemElm)};return _react.default.createElement("div",{ref:listRef},isVirtualized&&maxHeight?_react.default.createElement(_VirtualizedEntityList.VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId,...rootAriaProps,...ariaAttributes}):_react.default.createElement(_styledcomponents.StyledList,{size:size,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityList",...rootAriaProps,...ariaAttributes},dataShown.map((_item,i)=>renderEntityItem(i))))}

package/build/cjs/components/EntityList/EntityItemBody.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityItemBody",{enumerable:!0,get:function(){return EntityItemBody}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Checkbox=require("../Form/Checkbox/Checkbox"),_EntityListItemText=require("./EntityListItemText"),_Inline=require("../Inline/Inline"),_styledcomponents=require("./styled-components"),StyledLabel=(0,_styled.default)(_styledcomponents.StyledWrapperOffset,{target:"e1acsa3u0",label:"StyledLabel"})(({theme,size})=>({cursor:"pointer",display:"block",margin:`-${theme.variables.size.spacing["xs"===size?"xxs":size]} 0`})),StyledMinHeightCell=(0,_styled.default)("div",{target:"e1acsa3u1",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"})),hasInteractiveProps=element=>["onClick","onMouseDown","onPointerDown"].some(p=>"function"==typeof element.props?.[p]),isInteractiveElement=element=>(0,_react.isValidElement)(element)&&(hasInteractiveProps(element)||"href"in(element.props??{}));function EntityItemBody({checkboxProps,description,renderLabel,renderLeft,renderRight,tabIndex,size="m",truncateLabel}){let textSize="xs"===size?"s":"m",rightElement=renderRight?.({textSize,actionSize:"l"===size?"m":"s",tabIndex});return _react.default.createElement(_Inline.Inline,{noWrap:!0,alignItems:"spaceBetween",space:["xs","m"]},checkboxProps?_react.default.createElement(StyledLabel,{as:"label",size:size,"aria-hidden":"true"},_react.default.createElement(_Inline.Inline,{noWrap:!0,space:["xs","m"]},_react.default.createElement(_Checkbox.CheckboxRaw,{...checkboxProps,inert:""}),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize})))):_react.default.createElement(_Inline.Inline,{noWrap:!0,space:["xs","m"]},renderLeft&&renderLeft({textSize}),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize}))),rightElement&&_react.default.createElement(StyledMinHeightCell,{textSize:textSize},isInteractiveElement(rightElement)?(0,_react.cloneElement)(rightElement,{tabIndex,onClick:event=>{event.stopPropagation(),rightElement.props.onClick?.(event)},...rightElement.props.onMouseDown&&{onMouseDown:event=>{event.stopPropagation(),rightElement.props.onMouseDown?.(event)}},...rightElement.props.onPointerDown&&{onPointerDown:event=>{event.stopPropagation(),rightElement.props.onPointerDown?.(event)}}}):rightElement))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityItemBody",{enumerable:!0,get:function(){return EntityItemBody}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Checkbox=require("../Form/Checkbox/Checkbox"),_Icon=require("../Icon/Icon"),_EntityListItemText=require("./EntityListItemText"),_Inline=require("../Inline/Inline"),_styledcomponents=require("./styled-components"),StyledLabel=(0,_styled.default)(_styledcomponents.StyledWrapperOffset,{target:"e12o862m0",label:"StyledLabel"})(({theme,size})=>({cursor:"pointer",display:"block",margin:`-${theme.variables.size.spacing["xs"===size?"xxs":size]} 0`})),StyledMinHeightCell=(0,_styled.default)("div",{target:"e12o862m1",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"})),hasInteractiveProps=element=>["onClick","onMouseDown","onPointerDown"].some(p=>"function"==typeof element.props?.[p]),isInteractiveElement=element=>(0,_react.isValidElement)(element)&&(hasInteractiveProps(element)||"href"in(element.props??{}));function EntityItemBody({checkboxProps,description,renderLabel,renderLeft,renderRight,tabIndex,size="m",truncateLabel}){let textSize="xs"===size?"s":"m",leftElement=checkboxProps?void 0:renderLeft?.({textSize}),leftIconSize=(0,_react.isValidElement)(leftElement)&&leftElement.type===_Icon.Icon?leftElement.props.size:void 0,rightElement=renderRight?.({textSize,actionSize:"l"===size?"m":"s",tabIndex});return _react.default.createElement(_Inline.Inline,{noWrap:!0,alignItems:"spaceBetween",space:["xs","m"]},checkboxProps?_react.default.createElement(StyledLabel,{as:"label",size:size,"aria-hidden":"true"},_react.default.createElement(_Inline.Inline,{noWrap:!0,space:["xs","m"]},_react.default.createElement(_Checkbox.CheckboxRaw,{...checkboxProps,inert:""}),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize})))):_react.default.createElement(_Inline.Inline,{noWrap:!0,space:"s"===leftIconSize&&"m"===textSize?"s":["xs","m"]},leftElement&&_react.default.createElement(StyledMinHeightCell,{textSize:textSize},leftElement),_react.default.createElement(_EntityListItemText.EntityListItemText,{size:textSize,description:description,truncateLabel:truncateLabel},renderLabel({textSize}))),rightElement&&_react.default.createElement(StyledMinHeightCell,{textSize:textSize},isInteractiveElement(rightElement)?(0,_react.cloneElement)(rightElement,{tabIndex,onClick:event=>{event.stopPropagation(),rightElement.props.onClick?.(event)},...rightElement.props.onMouseDown&&{onMouseDown:event=>{event.stopPropagation(),rightElement.props.onMouseDown?.(event)}},...rightElement.props.onPointerDown&&{onPointerDown:event=>{event.stopPropagation(),rightElement.props.onPointerDown?.(event)}}}):rightElement))}

package/build/cjs/components/EntityList/types.d.ts

@@ -1,4 +1,4 @@
-import type { TextSize, ListSize, ForbiddenProp } from "../../types";
+import type { TextSize, ListSize, ForbiddenProp, IconSizes } from "../../types";
 import type { IconProps } from "../Icon/Icon";
 import type { CheckboxProps } from "../Form/Checkbox/Checkbox";
 import type { SlotProps } from "../../shared/slotProps";
@@ -20,6 +20,10 @@ export type TextSizeProps = {
 type RenderProps = (props: TextSizeProps) => React.ReactNode;
 export type ListNodeProps = ListNode & TextSizeProps;
 export type EntityListSlotProps = SlotProps<{
+    /** Shared sizing for all left-side icons. Defaults to the label's size. */
+    leftIcon: {
+        size?: IconSizes;
+    };
     toggle: {
         "aria-label-expand"?: string;
         "aria-label-collapse"?: string;

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

@@ -0,0 +1,12 @@
+import React from "react";
+type PanelHeaderCloseButtonProps = {
+    "aria-label": string;
+    onClick: () => void;
+};
+/**
+ * Internal primitive: the close button at a panel header's end, set off from
+ * what precedes it by a vertical divider. Shared by the content, split and
+ * right panel headers.
+ */
+export declare function PanelHeaderCloseButton({ "aria-label": ariaLabel, onClick, }: PanelHeaderCloseButtonProps): React.ReactElement;
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"PanelHeaderCloseButton",{enumerable:!0,get:function(){return PanelHeaderCloseButton}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Divider=require("../../Divider/Divider"),_Inline=require("../../Inline/Inline"),_PictogramButton=require("../../PictogramButton/PictogramButton");function PanelHeaderCloseButton({"aria-label":ariaLabel,onClick}){return _react.default.createElement(_Inline.Inline,{space:"xs",vAlignItems:"center",noWrap:!0},_react.default.createElement(_Divider.Divider,{orientation:"vertical",size:"l"}),_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":ariaLabel,onClick:onClick}))}

package/build/cjs/components/Internal/Sandwich/-types.d.ts

@@ -15,8 +15,9 @@ export type SandwichProps = {
 };
 /**
  * Separator visibility:
- * - `auto`: show only while the content is scrolled away from the edge (default).
- * - `always`: always visible.
+ * - `auto`: show only while the content is scrolled away from the edge (the
+ *   footer default).
+ * - `always`: always visible (the header default).
  * - `never`: never visible.
  */
 export type SandwichSeparator = "auto" | "always" | "never";

package/build/cjs/components/Internal/Sandwich/SandwichHeader.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
 import type { SandwichHeaderProps } from "./-types";
 export declare const SANDWICH_HEADER_DS_ID = "SandwichHeader";
+export declare const StyledHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    showBorder: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * May be authored at any depth among the Sandwich's children - the content is
  * PORTALED into the root's static header slot, above the scrollable body.

package/build/cjs/components/Internal/Sandwich/SandwichHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get SANDWICH_HEADER_DS_ID(){return SANDWICH_HEADER_DS_ID},get SandwichHeader(){return SandwichHeader}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_reactdom=require("react-dom"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useSandwichContext=require("./useSandwichContext"),SANDWICH_HEADER_DS_ID="SandwichHeader",StyledHeader=(0,_styled.default)("div",{shouldForwardProp:prop=>"showBorder"!==prop,target:"e17zdauu0",label:"StyledHeader"})(({theme,showBorder})=>({borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:showBorder?theme.values.color.border.secondary.default:"transparent",transition:"border-color 0.15s ease"}));function SandwichHeader({children,showSeparator="auto","data-e2e-test-id":dataE2eTestId}){let{atTop,headerSlotNode}=(0,_useSandwichContext.useSandwichContext)();return headerSlotNode?(0,_reactdom.createPortal)(_react.default.createElement(StyledHeader,{showBorder:"always"===showSeparator||"auto"===showSeparator&&!atTop,"data-ds-id":SANDWICH_HEADER_DS_ID,"data-e2e-test-id":dataE2eTestId},children),headerSlotNode):null}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get SANDWICH_HEADER_DS_ID(){return SANDWICH_HEADER_DS_ID},get SandwichHeader(){return SandwichHeader},get StyledHeader(){return StyledHeader}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_reactdom=require("react-dom"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_useSandwichContext=require("./useSandwichContext"),SANDWICH_HEADER_DS_ID="SandwichHeader",StyledHeader=(0,_styled.default)("div",{target:"e1cxpfr20",label:"StyledHeader"})(({theme,showBorder})=>({borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:showBorder?theme.values.color.border.secondary.default:"transparent",transition:"border-color 0.15s ease"}));function SandwichHeader({children,showSeparator="always","data-e2e-test-id":dataE2eTestId}){let{atTop,headerSlotNode}=(0,_useSandwichContext.useSandwichContext)();return headerSlotNode?(0,_reactdom.createPortal)(_react.default.createElement(StyledHeader,{showBorder:"always"===showSeparator||"auto"===showSeparator&&!atTop,"data-ds-id":SANDWICH_HEADER_DS_ID,"data-e2e-test-id":dataE2eTestId},children),headerSlotNode):null}

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

@@ -24,11 +24,6 @@ export type PanelKey = (typeof PANELS)[number];
  *  says otherwise. The store leaves `variant` unset until then, so every
  *  reader resolves it against this. */
 export declare const DEFAULT_LEFT_PANEL_VARIANT = "sidebar";
-/** Both axes of the inset between a bar button and the edge of the left bar's
- *  column. Shared by `LeftBarToggle`'s own button and `PanelHeader`'s trailing
- *  slot: the header's control walks down onto the bar's as the panel
- *  collapses, and the two only land on the same spot because both read this
- *  one value - on both axes - rather than each writing its own. */
 type BarButtonInset = {
     hSpace: SpaceSizes;
     vSpace: SpaceSizes;

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

@@ -265,7 +265,7 @@ export type LayoutValue = {
 };
 /** Forwarded to a panel's underlying scroll container (scroll restoration,
  *  custom scroll handling). Shared by every panel-like slot backed by a
- *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `splitview`. */
+ *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `content`, `splitview`. */
 export type ForwardedScrollProps = {
     scrollContainerRef?: React.Ref<HTMLDivElement>;
     onScroll?: React.UIEventHandler<HTMLDivElement>;
@@ -310,8 +310,15 @@ export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "resizable"> &
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
 };
-export type ContentProps = {
+export type ContentProps = ForwardedScrollProps & {
+    /** Panel content in source order. `<Layout.ContentHeader />` /
+     *  `<Layout.ContentFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
+    /** Panel surface. Defaults to transparent: content paints its own. */
+    background?: "primary" | "transparent";
+    /** Accessible name; when set, the panel renders as a `region` landmark. */
+    "aria-label"?: string;
+    "data-e2e-test-id"?: string;
 };
 /**
  * The split view has no sizing props - open, it takes half of
@@ -363,8 +370,8 @@ export type LayoutProps = {
 };
 /**
  * Shared contract of the per-panel header components
- * (`Layout.LeftPanelHeader` / `Layout.RightPanelHeader` / `Layout.SplitHeader`).
- * Place among the panel's children; it sticks to the top.
+ * (`Layout.LeftPanelHeader` / `Layout.RightPanelHeader` / `Layout.ContentHeader` /
+ * `Layout.SplitHeader`). Place among the panel's children; it sticks to the top.
  */
 export type PanelSlotHeaderProps = {
     /** Rendered at the header start. */
@@ -375,8 +382,8 @@ export type PanelSlotHeaderProps = {
 };
 /**
  * Shared contract of the per-panel footer components
- * (`Layout.LeftPanelFooter` / `Layout.RightPanelFooter` / `Layout.SplitFooter`).
- * Place among the panel's children; it sticks to the bottom.
+ * (`Layout.LeftPanelFooter` / `Layout.RightPanelFooter` / `Layout.ContentFooter` /
+ * `Layout.SplitFooter`). Place among the panel's children; it sticks to the bottom.
  */
 export type PanelSlotFooterProps = {
     children: React.ReactNode;
@@ -441,6 +448,31 @@ export type RightPanelHeaderProps = PanelSlotHeaderProps & {
     slotProps: RightPanelHeaderSlotProps;
 };
 export type RightPanelFooterProps = PanelSlotFooterProps;
+/**
+ * Title shown in the content header, after `leftSlot`. Visual only — the
+ * panel's accessible name comes from `Layout.Content`'s `aria-label`.
+ */
+export type ContentHeaderTitle = PanelHeaderTitle;
+export type ContentHeaderSlotProps = {
+    /** Props for the built-in close button, rendered after `rightSlot`. Content
+     *  is never hidden, so what closing does is the consumer's to decide (e.g.
+     *  promote the split view into content). Omit to render none. */
+    closeButton?: {
+        "aria-label": string;
+        onClick: () => void;
+    };
+};
+export type ContentHeaderProps = PanelSlotHeaderProps & {
+    /** Title block (icon + heading), rendered after `leftSlot`. */
+    title?: ContentHeaderTitle;
+    /** Props forwarded to internal sub-components. */
+    slotProps?: ContentHeaderSlotProps;
+    /** Bottom divider visibility. `"always"` (default) keeps it shown; `"auto"`
+     *  shows it only once the panel's scroll region is scrolled under the header;
+     *  `"never"` hides it. */
+    showSeparator?: SandwichSeparator;
+};
+export type ContentFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the split view header, after `leftSlot`. Visual only — the
  * panel's accessible name comes from `Layout.Split`'s `aria-label`.
@@ -460,8 +492,9 @@ export type SplitHeaderProps = PanelSlotHeaderProps & {
     title?: SplitHeaderTitle;
     /** Props forwarded to internal sub-components. */
     slotProps?: SplitHeaderSlotProps;
-    /** Bottom divider visibility. `"auto"` (default) shows it only once content
-     *  is scrolled under the header; `"always"` / `"never"` override that. */
+    /** Bottom divider visibility. `"always"` (default) keeps it shown; `"auto"`
+     *  shows it only once content is scrolled under the header; `"never"` hides
+     *  it. */
     showSeparator?: SandwichSeparator;
 };
 export type SplitFooterProps = PanelSlotFooterProps;

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

@@ -6,6 +6,8 @@ import type { ContentProps } from "../-types";
  * presentation: in-flow in the `content` slot ({@link ContentDocked}) normally,
  * and the mobile split's sliding base layer ({@link ContentSplitBase}) when a
  * `Layout.Split` is stacked over it - so the split pushes content aside instead
- * of just covering it.
+ * of just covering it. Either way the content sits in a {@link ContentPanel},
+ * so `Layout.ContentHeader` / `Layout.ContentFooter` children stick to the
+ * panel edges; the remaining content scrolls.
  */
 export declare const Content: React.FC<ContentProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),Content=({children})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)();return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,children):_react.default.createElement(_ContentDocked.ContentDocked,null,children)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),_ContentPanel=require("./ContentPanel"),Content=({children,...panelProps})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)(),panel=_react.default.createElement(_ContentPanel.ContentPanel,panelProps,children);return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,panel):_react.default.createElement(_ContentDocked.ContentDocked,null,panel)};

package/build/cjs/components/Layout/Content/ContentFooter.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ContentFooterProps } from "../-types";
+/**
+ * Optional sticky footer for `Layout.Content` - place it among the panel's
+ * children; it sticks to the bottom while the rest of the content scrolls.
+ */
+export declare function ContentFooter({ children, "data-e2e-test-id": dataE2eTestId, }: ContentFooterProps): React.ReactElement;

package/build/cjs/components/Layout/Content/ContentFooter.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentFooter",{enumerable:!0,get:function(){return ContentFooter}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich");function ContentFooter({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(_Sandwich.Sandwich.Footer,{"data-e2e-test-id":dataE2eTestId},children)}

package/build/cjs/components/Layout/Content/ContentHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ContentHeaderProps } from "../-types";
+/**
+ * Optional sticky header for `Layout.Content` - place it among the panel's
+ * children; it sticks to the top while the rest scrolls. Renders `title` after
+ * `leftSlot` and, when `slotProps.closeButton` is supplied, a close button after
+ * `rightSlot`. Content is never hidden, so the button runs the consumer's own
+ * `onClick` rather than hiding the panel.
+ */
+export declare function ContentHeader({ leftSlot, rightSlot, title, slotProps, showSeparator, "data-e2e-test-id": dataE2eTestId, }: ContentHeaderProps): React.ReactElement;

package/build/cjs/components/Layout/Content/ContentHeader.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentHeader",{enumerable:!0,get:function(){return ContentHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PanelHeaderCloseButton=require("../../Internal/PanelHeader/PanelHeaderCloseButton");function ContentHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let closeButtonSlotProps=slotProps?.closeButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,rightSlot,closeButtonSlotProps&&_react.default.createElement(_PanelHeaderCloseButton.PanelHeaderCloseButton,{"aria-label":closeButtonSlotProps["aria-label"],onClick:closeButtonSlotProps.onClick}))}))}

package/build/cjs/components/Layout/Content/ContentPanel.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ContentProps } from "../-types";
+/**
+ * Frame shared by both `Layout.Content` presentations: the same `Sandwich` every
+ * panel scrolls in, so `Layout.ContentHeader` / `Layout.ContentFooter` stick to
+ * the edges, without `PanelContainer`'s Container - as with the left panel's
+ * layers - so content keeps the layout and stacking it had without one.
+ */
+export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentProps): React.ReactElement;

package/build/cjs/components/Layout/Content/ContentPanel.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentPanel",{enumerable:!0,get:function(){return ContentPanel}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),StyledContentFrame=(0,_styled.default)("div",{target:"e168plsf0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=(0,_styled.default)("div",{target:"e168plsf1",label:"StyledContentFill"})({position:"absolute",inset:0});function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(StyledContentFill,null,children)))}

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

@@ -3,6 +3,8 @@ import { LayoutProvider } from "./LayoutProvider";
 import { LayoutBottomBar } from "./BottomBar/LayoutBottomBar";
 import { LayoutBottomBarItem } from "./BottomBar/BottomBarItem/LayoutBottomBarItem";
 import { Content } from "./Content/Content";
+import { ContentHeader } from "./Content/ContentHeader";
+import { ContentFooter } from "./Content/ContentFooter";
 import { RightPanel } from "./RightPanel/RightPanel";
 import { RightPanelHeader } from "./RightPanel/RightPanelHeader";
 import { RightPanelFooter } from "./RightPanel/RightPanelFooter";
@@ -33,6 +35,8 @@ type LayoutComponent = typeof LayoutBase & {
     RightPanelHeader: typeof RightPanelHeader;
     RightPanelFooter: typeof RightPanelFooter;
     Content: typeof Content;
+    ContentHeader: typeof ContentHeader;
+    ContentFooter: typeof ContentFooter;
     Split: typeof Split;
     SplitHeader: typeof SplitHeader;
     SplitFooter: typeof SplitFooter;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_LayoutBottomBar=require("./BottomBar/LayoutBottomBar"),_LayoutBottomBarItem=require("./BottomBar/BottomBarItem/LayoutBottomBarItem"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=({slotHosts,root,mobileHost})=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),splitviewWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.leftPanel),contentStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.content),splitviewStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.splitview),rightPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.rightPanel),regionsReadyCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.LAYOUT_REGIONS_READY_VAR),publishRegions=(0,_react.useCallback)(()=>{if(!root)return;let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[_constants.Slot.content,contentWidthCssVar,contentStartCssVar],[_constants.Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===_constants.Slot.content||slot===_constants.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]);(0,_react.useLayoutEffect)(()=>{publishRegions()},[publishRegions]),(0,_react.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=(0,_styled.default)("div",{target:"e101g12t0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"e101g12t1",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"e101g12t2",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e101g12t3",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e101g12t4",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e101g12t5",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==_constants.Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating}),[layoutRoot,setLayoutRoot]=(0,_react.useState)(null),rootPortalTargets=(0,_react.useMemo)(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,gapBefore:slot===_constants.Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==_constants.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.default.createElement(_Panel.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.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.PanelRowContext.Provider,{value:rowKey},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:rootPortalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.BottomBar=_LayoutBottomBar.LayoutBottomBar,Layout.BottomBarItem=_LayoutBottomBarItem.LayoutBottomBarItem,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_LayoutBottomBar=require("./BottomBar/LayoutBottomBar"),_LayoutBottomBarItem=require("./BottomBar/BottomBarItem/LayoutBottomBarItem"),_Content=require("./Content/Content"),_ContentHeader=require("./Content/ContentHeader"),_ContentFooter=require("./Content/ContentFooter"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_LeftNavBar=require("./LeftNavBar/LeftNavBar"),_LeftNavBarFooter=require("./LeftNavBar/LeftNavBarFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_usePortalTargets=require("./usePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=({slotHosts,root,mobileHost})=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),splitviewWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.splitview),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel),leftPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.leftPanel),contentStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.content),splitviewStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.splitview),rightPanelStartCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_START_VAR.rightPanel),regionsReadyCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.LAYOUT_REGIONS_READY_VAR),publishRegions=(0,_react.useCallback)(()=>{if(!root)return;let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar,leftPanelStartCssVar],[_constants.Slot.content,contentWidthCssVar,contentStartCssVar],[_constants.Slot.splitview,splitviewWidthCssVar,splitviewStartCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar,rightPanelStartCssVar]],rootRect=root.getBoundingClientRect();targets.forEach(([slot,widthCssVar,startCssVar])=>{let rect=slotHosts[slot]?.getBoundingClientRect(),isMobileRegion=!!mobileHost&&(slot===_constants.Slot.content||slot===_constants.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]);(0,_react.useLayoutEffect)(()=>{publishRegions()},[publishRegions]),(0,_react.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=(0,_styled.default)("div",{target:"ejiwr150",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelRow=(0,_styled.default)("div",{target:"ejiwr151",label:"StyledPanelRow"})(({theme,hasOffcanvasLeftBar})=>({height:"100%",boxSizing:"border-box",...hasOffcanvasLeftBar&&{paddingLeft:theme.variables.size.dimension.leftNavBar.width}})),StyledPanelHost=(0,_styled.default)("div",{target:"ejiwr152",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"ejiwr153",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"ejiwr154",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"ejiwr155",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!(declared[slot]&&(isShown(slot)||present[slot])),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!isMobile&&"float"===rightPanelVariant,hasOffcanvasLeftBar=!!declared[_constants.Slot.leftPanel]&&"offcanvas"===layoutState[_constants.Slot.leftPanel].variant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile))&&(slot!==_constants.Slot.leftPanel||"sidebar"===layoutState.leftPanel.variant),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_usePortalTargets.usePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating}),[layoutRoot,setLayoutRoot]=(0,_react.useState)(null),rootPortalTargets=(0,_react.useMemo)(()=>({...portalTargets,root:layoutRoot}),[portalTargets,layoutRoot]);useGlobalCssVariables({slotHosts,root:layoutRoot,mobileHost:mobileSplitStackHost});let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),isSolo=declaredSlots.length<=1,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,gapBefore:slot===_constants.Slot.rightPanel,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize,maxSize:panel?.maxSize,collapsible:slot!==_constants.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.default.createElement(_Panel.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.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.PanelRowContext.Provider,{value:rowKey},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:rootPortalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{ref:setLayoutRoot,"data-ds-id":"Layout"},_react.default.createElement(StyledPanelRow,{hasOffcanvasLeftBar:hasOffcanvasLeftBar},isSolo?soloHost:panelGroup),isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost}))))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.BottomBar=_LayoutBottomBar.LayoutBottomBar,Layout.BottomBarItem=_LayoutBottomBarItem.LayoutBottomBarItem,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftNavBar=_LeftNavBar.LeftNavBar,Layout.LeftNavBarFooter=_LeftNavBarFooter.LeftNavBarFooter,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.ContentHeader=_ContentHeader.ContentHeader,Layout.ContentFooter=_ContentFooter.ContentFooter,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;

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

@@ -1,14 +1,11 @@
 import React from "react";
 import type { LeftPanelSlotProps } from "../-types";
 export type LeftBarToggleProps = LeftPanelSlotProps["toggleButton"] & {
+    /** Render inside a panel header: compensate its padding and reuse its separator space. Defaults to false. */
+    inHeader?: boolean;
     /** Handed out so the layer above can put focus here when the panel closes -
      *  this is the control that replaces the one the panel is taking away. */
     buttonRef?: React.Ref<HTMLButtonElement>;
 };
-/**
- * The one control the left bar always carries: the button that opens the panel
- * back up. It belongs to the bar rather than to `Layout.LeftNavBar` - which only
- * adds content beneath it - because a panel that authored no nav bar would
- * otherwise close to a strip with no way back out of it.
- */
-export declare function LeftBarToggle({ "aria-label": ariaLabel, "data-e2e-test-id": dataE2eTestId, buttonRef, }: LeftBarToggleProps): React.ReactElement;
+/** Shared control for the collapsed bar and the expanded panel header. */
+export declare function LeftBarToggle({ "aria-label": ariaLabel, "data-e2e-test-id": dataE2eTestId, buttonRef, inHeader, }: LeftBarToggleProps): React.ReactElement;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftBarToggle",{enumerable:!0,get:function(){return LeftBarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Box=require("../../Box/Box"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId");function LeftBarToggle({"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,buttonRef}){let{show,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)();return _react.default.createElement(_Box.Box,{space:_constants.LEFT_BAR_BUTTON_INSET.hSpace,vSpace:_constants.LEFT_BAR_BUTTON_INSET.vSpace},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftBarToggle",{enumerable:!0,get:function(){return LeftBarToggle}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_SandwichHeader=require("../../Internal/Sandwich/SandwichHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useLeftPanelId=require("../useLeftPanelId"),StyledToggleCell=(0,_styled.default)("div",{target:"es7jo4k0",label:"StyledToggleCell"})(({theme,applyNegativeMargins})=>({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& > button":{padding:theme.variables.size.spacing.s},paddingBlock:theme.variables.size.spacing.s,...applyNegativeMargins&&{width:`calc(${theme.variables.size.dimension.leftNavBar.width} - 2 * (${theme.variables.size.spacing[_constants.LEFT_BAR_BUTTON_INSET.hSpace]} - ${theme.variables.size.spacing[_constants.LEFT_BAR_BUTTON_INSET.vSpace]}))`,margin:`calc(-1 * ${theme.variables.size.spacing[_constants.LEFT_BAR_BUTTON_INSET.vSpace]})`}}));function LeftBarToggle({"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,buttonRef,inHeader=!1}){let{show,hide,isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.leftPanel],leftPanelId=(0,_useLeftPanelId.useLeftPanelId)(),toggle=_react.default.createElement(StyledToggleCell,{applyNegativeMargins:inHeader},_react.default.createElement(_PictogramButton.PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:isVisible?hide:show,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,"aria-controls":leftPanelId,"aria-expanded":isVisible}));return inHeader?toggle:_react.default.createElement(_SandwichHeader.StyledHeader,{showBorder:!1},toggle)}

package/build/cjs/components/Layout/RightPanel/RightPanelHeader.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelHeader",{enumerable:!0,get:function(){return RightPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_Inline=require("../../Inline/Inline"),_LayoutFloatDragHandle=require("../../Internal/LayoutFloat/LayoutFloatDragHandle");function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=(0,_useLayout.useLayout)()[_constants.Slot.rightPanel],{isMobile}=(0,_useBreakpoints.useBreakpoints)(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:isFloating?"open-sidebar-right":"open-bottom-right",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanelHeader",{enumerable:!0,get:function(){return RightPanelHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_useBreakpoints=require("../../../shared/useBreakpoints"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton"),_PanelHeaderCloseButton=require("../../Internal/PanelHeader/PanelHeaderCloseButton"),_Inline=require("../../Inline/Inline"),_LayoutFloatDragHandle=require("../../Internal/LayoutFloat/LayoutFloatDragHandle");function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=(0,_useLayout.useLayout)()[_constants.Slot.rightPanel],{isMobile}=(0,_useBreakpoints.useBreakpoints)(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&_react.default.createElement(_LayoutFloatDragHandle.LayoutFloatDragHandle.Guard,null,_react.default.createElement(_Inline.Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:isFloating?"open-sidebar-right":"open-bottom-right",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),_react.default.createElement(_PanelHeaderCloseButton.PanelHeaderCloseButton,{"aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}

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

@@ -5,10 +5,10 @@ declare const LAYER_Z_INDEX: {
 };
 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. A parked layer is `inert`: besides blocking
+ * One layer of the two-view mobile split. Moves to `offset` - -1 (parked to the
+ * left), 0 (in view), 1 (parked to the right) - so switching jumps the outgoing
+ * view to the side it rests on and brings the incoming one in, without animation.
+ * 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.
  */

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledMobileSplitSlideLayer",{enumerable:!0,get:function(){return StyledMobileSplitSlideLayer}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2},StyledMobileSplitSlideLayer=(0,_styled.default)("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e99d5g40",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"}}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StyledMobileSplitSlideLayer",{enumerable:!0,get:function(){return StyledMobileSplitSlideLayer}});const _styled=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("@emotion/styled")),OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2},StyledMobileSplitSlideLayer=(0,_styled.default)("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e1thbhjv0",label:"StyledMobileSplitSlideLayer"})(({offset,layer})=>({position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],pointerEvents:0===offset?"auto":"none"}));

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitHeader",{enumerable:!0,get:function(){return SplitHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PictogramButton=require("../../PictogramButton/PictogramButton");function SplitHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let{hide}=(0,_useLayout.useLayout)()[_constants.Slot.splitview],closeButtonSlotProps=slotProps?.closeButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,rightSlot,closeButtonSlotProps&&_react.default.createElement(_PictogramButton.PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":closeButtonSlotProps["aria-label"],onClick:hide}))}))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitHeader",{enumerable:!0,get:function(){return SplitHeader}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_useLayout=require("../useLayout"),_Sandwich=require("../../Internal/Sandwich/Sandwich"),_PanelHeader=require("../../Internal/PanelHeader/PanelHeader"),_PanelHeaderCloseButton=require("../../Internal/PanelHeader/PanelHeaderCloseButton");function SplitHeader({leftSlot,rightSlot,title,slotProps,showSeparator,"data-e2e-test-id":dataE2eTestId}){let{hide}=(0,_useLayout.useLayout)()[_constants.Slot.splitview],closeButtonSlotProps=slotProps?.closeButton;return _react.default.createElement(_Sandwich.Sandwich.Header,{showSeparator:showSeparator,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_PanelHeader.PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:_react.default.createElement(_react.default.Fragment,null,rightSlot,closeButtonSlotProps&&_react.default.createElement(_PanelHeaderCloseButton.PanelHeaderCloseButton,{"aria-label":closeButtonSlotProps["aria-label"],onClick:hide}))}))}

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

@@ -314,8 +314,8 @@
         "type": "dimension",
         "name": "dimension left-nav-bar",
         "subitemName": "left-nav-bar width",
-        "value": "56px",
-        "original": 56,
+        "value": "64px",
+        "original": 64,
         "variableName": "$size-dimension-left-nav-bar-width",
         "isUsed": false
     },