@amboss/design-system 4.19.2-canary.0 → 4.19.2-canary.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/Layout/LeftPanel/LeftBarToggle.js +1 -1
- package/build/cjs/components/Layout/Split/LayoutSplitColumns.js +1 -1
- package/build/esm/components/Layout/LeftPanel/LeftBarToggle.js +1 -1
- package/build/esm/components/Layout/Split/LayoutSplitColumns.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"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"),_context=require("../context"),_useLeftPanelId=require("../useLeftPanelId"),StyledToggleCell=(0,_styled.default)("div",{target:"
|
|
1
|
+
"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"),_context=require("../context"),_useLeftPanelId=require("../useLeftPanelId"),StyledToggleCell=(0,_styled.default)("div",{target:"e1akbyj60",label:"StyledToggleCell"})(({theme,applyNegativeMargins})=>({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& > button":{padding:theme.variables.size.spacing.s,marginBlock:`calc(-1 * ${theme.variables.size.spacing[_constants.LEFT_BAR_BUTTON_INSET.vSpace]})`},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 isVisible=(0,_context.useLayoutSelector)(state=>state.leftPanel.visible),{dispatch}=(0,_context.useLayoutStore)(),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:()=>dispatch({type:"setVisible",slot:_constants.Slot.leftPanel,visible:!isVisible}),"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)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutSplitColumns",{enumerable:!0,get:function(){return LayoutSplitColumns}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_interactions=require("@react-aria/interactions"),_useWindow=require("../../../shared/useWindow"),_constants=require("../-constants"),_context=require("../context"),RESIZING_CURSOR_STYLES={"*, *::before, *::after":{cursor:"col-resize !important"}},StyledColumns=(0,_styled.default)("div",{target:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LayoutSplitColumns",{enumerable:!0,get:function(){return LayoutSplitColumns}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_react1=require("@emotion/react"),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_interactions=require("@react-aria/interactions"),_useWindow=require("../../../shared/useWindow"),_constants=require("../-constants"),_context=require("../context"),RESIZING_CURSOR_STYLES={"*, *::before, *::after":{cursor:"col-resize !important"}},StyledColumns=(0,_styled.default)("div",{target:"esbaf730",label:"StyledColumns"})(({theme,isSplitOpen})=>({position:"relative",display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",overflow:isSplitOpen?"hidden":void 0,...isSplitOpen&&{gap:theme.variables.size.spacing.xxs,maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto"}})),StyledContentHost=(0,_styled.default)("div",{target:"esbaf731",label:"StyledContentHost"})(({columnWidth,overlapOffset})=>({position:"relative",height:"100%",width:columnWidth??"100%",minWidth:0,flexShrink:0,marginInlineEnd:overlapOffset})),StyledSplitHost=(0,_styled.default)("div",{target:"esbaf732",label:"StyledSplitHost"})(({columnWidth,isOverlapping})=>({position:isOverlapping?"absolute":"relative",...isOverlapping&&{right:0,top:0},height:"100%",width:columnWidth,maxWidth:"100%",flexShrink:0})),StyledSeparator=(0,_styled.default)("div",{target:"esbaf733",label:"StyledSeparator"})(({theme,position,isOverlapping,canResize})=>({position:"absolute",top:0,bottom:0,left:position,width:theme.variables.size.spacing.xxs,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:isOverlapping?1:"100%",backgroundColor:theme.values.color.canvas,pointerEvents:"none"},cursor:canResize?"col-resize":"default",touchAction:"none",userSelect:"none","&:focus":{outline:"none","&::after":{left:"50%",right:"auto",width:0,outlineWidth:1,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:0,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color"}}}})),resolveSplitSize=size=>{if(void 0===size)return{fraction:.5,pixels:0};if("number"==typeof size)return{fraction:0,pixels:Number.isFinite(size)?size:0};let parsed=Number.parseFloat(size);return Number.isFinite(parsed)?size.endsWith("px")?{fraction:0,pixels:parsed}:{fraction:parsed/100,pixels:0}:{fraction:.5,pixels:0}};function LayoutSplitColumns({isSplitOpen,declared,splitState,contentHostRef,splitHostRef,"data-e2e-test-id":dataE2eTestId}){let{dispatch}=(0,_context.useLayoutStore)(),currentWindow=(0,_useWindow.useWindow)(),splitId=(0,_react.useId)(),columnRef=(0,_react.useRef)(null),separatorRef=(0,_react.useRef)(null),[dimensions,setDimensions]=(0,_react.useState)({width:0,gap:0}),[resizeReference,setResizeReference]=(0,_react.useState)(null),{width:available,gap}=dimensions;(0,_react.useLayoutEffect)(()=>{let column=columnRef.current;if(!column||!currentWindow)return;let measureColumns=()=>{let{width}=column.getBoundingClientRect(),separator=separatorRef.current,measuredGap=separator?.getBoundingClientRect().width??0;setDimensions(previous=>previous.width===width&&previous.gap===measuredGap?previous:{width,gap:measuredGap})};if(measureColumns(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(measureColumns);return observer.observe(column),separatorRef.current&&observer.observe(separatorRef.current),()=>observer.disconnect()},[currentWindow,isSplitOpen]);let contentMinimumSize=resolveSplitSize(declared.content?.minSize??0),splitMinimumSize=Math.max(0,Number(declared.splitview?.minSize??0)),contentMinimum=Math.min(available,Math.max(0,available*contentMinimumSize.fraction+contentMinimumSize.pixels)),splitMinimum=Math.min(available,splitMinimumSize),allowsOverlap="overlap"===splitState.resizeBehavior,maximumSize=resolveSplitSize(declared.splitview?.maxSize??"90%"),splitMaximum=Math.max(0,Math.min(available,available*maximumSize.fraction+maximumSize.pixels)),maximum=allowsOverlap?splitMaximum:Math.min(splitMaximum,Math.max(0,available-contentMinimum-gap)),minimum=Math.min(splitMinimum,maximum),initialSize=resolveSplitSize(splitState.size??declared.splitview?.defaultSize),{fraction,pixels}=resizeReference&&splitState.size===resizeReference.size?{fraction:.5,pixels:resizeReference.size-resizeReference.available/2}:{fraction:initialSize.fraction,pixels:initialSize.pixels-gap*initialSize.fraction},splitWidth=Math.min(maximum,Math.max(minimum,available*fraction+pixels)),remaining=Math.max(0,available-splitWidth-gap),contentMinimumWidth=`max(0px, calc(${100*contentMinimumSize.fraction}% + ${contentMinimumSize.pixels}px))`,splitMaximumWidth=`max(0px, min(100%, calc(${100*maximumSize.fraction}% + ${maximumSize.pixels}px)))`,maximumWidth=allowsOverlap?splitMaximumWidth:`min(${splitMaximumWidth}, max(0px, calc(100% - ${contentMinimumWidth} - ${gap}px)))`,splitColumnWidth=`min(${maximumWidth}, max(${splitMinimumSize}px, calc(${100*fraction}% + ${pixels}px)))`,remainingWidth=`max(0px, calc(100% - ${splitColumnWidth} - ${gap}px))`,contentWidth=allowsOverlap?`min(100%, max(${contentMinimumWidth}, ${remainingWidth}))`:remainingWidth,isOverlapping=isSplitOpen&&allowsOverlap&&remaining<contentMinimum,canResize=declared.splitview?.resizable??splitState.resizable??!1,dragWidth=(0,_react.useRef)(splitWidth),[isPointerResizing,setIsPointerResizing]=(0,_react.useState)(!1);(0,_react.useEffect)(()=>{if(isSplitOpen&&canResize||setIsPointerResizing(!1),!isPointerResizing||!currentWindow)return;let stopResizeCursor=()=>setIsPointerResizing(!1);return currentWindow.addEventListener("blur",stopResizeCursor),()=>currentWindow.removeEventListener("blur",stopResizeCursor)},[isPointerResizing,isSplitOpen,canResize,currentWindow]),(0,_react.useLayoutEffect)(()=>{dispatch({type:"setSplitOverlap",overlapping:isOverlapping})},[dispatch,isOverlapping,splitState.isOverlapping]);let resizeSplit=width=>{let nextWidth=Math.min(maximum,Math.max(minimum,width));setResizeReference({size:nextWidth,available}),dispatch({type:"resize",slot:"splitview",size:nextWidth})},{moveProps}=(0,_interactions.useMove)({onMoveStart:()=>{dragWidth.current=splitWidth,separatorRef.current?.focus(),setIsPointerResizing(!0)},onMove:event=>{dragWidth.current-=event.deltaX,resizeSplit(dragWidth.current)},onMoveEnd:()=>setIsPointerResizing(!1)});return _react.default.createElement(StyledColumns,{ref:columnRef,isSplitOpen:isSplitOpen,"data-e2e-test-id":dataE2eTestId},isPointerResizing&&isSplitOpen&&canResize&&_react.default.createElement(_react1.Global,{styles:[RESIZING_CURSOR_STYLES]}),_react.default.createElement(StyledContentHost,{ref:contentHostRef,columnWidth:isSplitOpen?contentWidth:void 0,overlapOffset:isSplitOpen?`min(0px, calc(${remainingWidth} - ${contentWidth}))`:void 0}),isSplitOpen&&_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(StyledSplitHost,{ref:splitHostRef,id:splitId,columnWidth:splitColumnWidth,isOverlapping:isOverlapping}),_react.default.createElement(StyledSeparator,{...canResize?moveProps:{},ref:separatorRef,position:remainingWidth,isOverlapping:isOverlapping,canResize:canResize,role:"separator","aria-orientation":"vertical","aria-controls":splitId,"aria-label":declared.splitview?.resizeHandleLabel,"aria-valuemin":minimum,"aria-valuemax":maximum,"aria-valuenow":splitWidth,"aria-disabled":!canResize||minimum===maximum,tabIndex:-1,onKeyDown:void 0})))}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import styled from"@emotion/styled";import{StyledHeader}from"../../Internal/Sandwich/SandwichHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{LEFT_BAR_BUTTON_INSET,Slot}from"../-constants";import{useLayoutSelector,useLayoutStore}from"../context";import{useLeftPanelId}from"../useLeftPanelId";let StyledToggleCell=styled("div",{target:"
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{StyledHeader}from"../../Internal/Sandwich/SandwichHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{LEFT_BAR_BUTTON_INSET,Slot}from"../-constants";import{useLayoutSelector,useLayoutStore}from"../context";import{useLeftPanelId}from"../useLeftPanelId";let StyledToggleCell=styled("div",{target:"e1akbyj60",label:"StyledToggleCell"})(({theme,applyNegativeMargins})=>({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& > button":{padding:theme.variables.size.spacing.s,marginBlock:`calc(-1 * ${theme.variables.size.spacing[LEFT_BAR_BUTTON_INSET.vSpace]})`},paddingBlock:theme.variables.size.spacing.s,...applyNegativeMargins&&{width:`calc(${theme.variables.size.dimension.leftNavBar.width} - 2 * (${theme.variables.size.spacing[LEFT_BAR_BUTTON_INSET.hSpace]} - ${theme.variables.size.spacing[LEFT_BAR_BUTTON_INSET.vSpace]}))`,margin:`calc(-1 * ${theme.variables.size.spacing[LEFT_BAR_BUTTON_INSET.vSpace]})`}}));export function LeftBarToggle({"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,buttonRef,inHeader=!1}){let isVisible=useLayoutSelector(state=>state.leftPanel.visible),{dispatch}=useLayoutStore(),leftPanelId=useLeftPanelId(),toggle=React.createElement(StyledToggleCell,{applyNegativeMargins:inHeader},React.createElement(PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:()=>dispatch({type:"setVisible",slot:Slot.leftPanel,visible:!isVisible}),"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId,"aria-controls":leftPanelId,"aria-expanded":isVisible}));return inHeader?toggle:React.createElement(StyledHeader,{showBorder:!1},toggle)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useId,useLayoutEffect,useRef,useState}from"react";import{Global}from"@emotion/react";import styled from"@emotion/styled";import{useMove}from"@react-aria/interactions";import{useWindow}from"../../../shared/useWindow";import{PAGE_BOTTOM_BAR_INSET}from"../-constants";import{useLayoutStore}from"../context";let RESIZING_CURSOR_STYLES={"*, *::before, *::after":{cursor:"col-resize !important"}},StyledColumns=styled("div",{target:"
|
|
1
|
+
import React,{useEffect,useId,useLayoutEffect,useRef,useState}from"react";import{Global}from"@emotion/react";import styled from"@emotion/styled";import{useMove}from"@react-aria/interactions";import{useWindow}from"../../../shared/useWindow";import{PAGE_BOTTOM_BAR_INSET}from"../-constants";import{useLayoutStore}from"../context";let RESIZING_CURSOR_STYLES={"*, *::before, *::after":{cursor:"col-resize !important"}},StyledColumns=styled("div",{target:"esbaf730",label:"StyledColumns"})(({theme,isSplitOpen})=>({position:"relative",display:"flex",height:`calc(100% - ${PAGE_BOTTOM_BAR_INSET})`,width:"100%",overflow:isSplitOpen?"hidden":void 0,...isSplitOpen&&{gap:theme.variables.size.spacing.xxs,maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto"}})),StyledContentHost=styled("div",{target:"esbaf731",label:"StyledContentHost"})(({columnWidth,overlapOffset})=>({position:"relative",height:"100%",width:columnWidth??"100%",minWidth:0,flexShrink:0,marginInlineEnd:overlapOffset})),StyledSplitHost=styled("div",{target:"esbaf732",label:"StyledSplitHost"})(({columnWidth,isOverlapping})=>({position:isOverlapping?"absolute":"relative",...isOverlapping&&{right:0,top:0},height:"100%",width:columnWidth,maxWidth:"100%",flexShrink:0})),StyledSeparator=styled("div",{target:"esbaf733",label:"StyledSeparator"})(({theme,position,isOverlapping,canResize})=>({position:"absolute",top:0,bottom:0,left:position,width:theme.variables.size.spacing.xxs,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:isOverlapping?1:"100%",backgroundColor:theme.values.color.canvas,pointerEvents:"none"},cursor:canResize?"col-resize":"default",touchAction:"none",userSelect:"none","&:focus":{outline:"none","&::after":{left:"50%",right:"auto",width:0,outlineWidth:1,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:0,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color"}}}})),resolveSplitSize=size=>{if(void 0===size)return{fraction:.5,pixels:0};if("number"==typeof size)return{fraction:0,pixels:Number.isFinite(size)?size:0};let parsed=Number.parseFloat(size);return Number.isFinite(parsed)?size.endsWith("px")?{fraction:0,pixels:parsed}:{fraction:parsed/100,pixels:0}:{fraction:.5,pixels:0}};export function LayoutSplitColumns({isSplitOpen,declared,splitState,contentHostRef,splitHostRef,"data-e2e-test-id":dataE2eTestId}){let{dispatch}=useLayoutStore(),currentWindow=useWindow(),splitId=useId(),columnRef=useRef(null),separatorRef=useRef(null),[dimensions,setDimensions]=useState({width:0,gap:0}),[resizeReference,setResizeReference]=useState(null),{width:available,gap}=dimensions;useLayoutEffect(()=>{let column=columnRef.current;if(!column||!currentWindow)return;let measureColumns=()=>{let{width}=column.getBoundingClientRect(),separator=separatorRef.current,measuredGap=separator?.getBoundingClientRect().width??0;setDimensions(previous=>previous.width===width&&previous.gap===measuredGap?previous:{width,gap:measuredGap})};if(measureColumns(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(measureColumns);return observer.observe(column),separatorRef.current&&observer.observe(separatorRef.current),()=>observer.disconnect()},[currentWindow,isSplitOpen]);let contentMinimumSize=resolveSplitSize(declared.content?.minSize??0),splitMinimumSize=Math.max(0,Number(declared.splitview?.minSize??0)),contentMinimum=Math.min(available,Math.max(0,available*contentMinimumSize.fraction+contentMinimumSize.pixels)),splitMinimum=Math.min(available,splitMinimumSize),allowsOverlap="overlap"===splitState.resizeBehavior,maximumSize=resolveSplitSize(declared.splitview?.maxSize??"90%"),splitMaximum=Math.max(0,Math.min(available,available*maximumSize.fraction+maximumSize.pixels)),maximum=allowsOverlap?splitMaximum:Math.min(splitMaximum,Math.max(0,available-contentMinimum-gap)),minimum=Math.min(splitMinimum,maximum),initialSize=resolveSplitSize(splitState.size??declared.splitview?.defaultSize),{fraction,pixels}=resizeReference&&splitState.size===resizeReference.size?{fraction:.5,pixels:resizeReference.size-resizeReference.available/2}:{fraction:initialSize.fraction,pixels:initialSize.pixels-gap*initialSize.fraction},splitWidth=Math.min(maximum,Math.max(minimum,available*fraction+pixels)),remaining=Math.max(0,available-splitWidth-gap),contentMinimumWidth=`max(0px, calc(${100*contentMinimumSize.fraction}% + ${contentMinimumSize.pixels}px))`,splitMaximumWidth=`max(0px, min(100%, calc(${100*maximumSize.fraction}% + ${maximumSize.pixels}px)))`,maximumWidth=allowsOverlap?splitMaximumWidth:`min(${splitMaximumWidth}, max(0px, calc(100% - ${contentMinimumWidth} - ${gap}px)))`,splitColumnWidth=`min(${maximumWidth}, max(${splitMinimumSize}px, calc(${100*fraction}% + ${pixels}px)))`,remainingWidth=`max(0px, calc(100% - ${splitColumnWidth} - ${gap}px))`,contentWidth=allowsOverlap?`min(100%, max(${contentMinimumWidth}, ${remainingWidth}))`:remainingWidth,isOverlapping=isSplitOpen&&allowsOverlap&&remaining<contentMinimum,canResize=declared.splitview?.resizable??splitState.resizable??!1,dragWidth=useRef(splitWidth),[isPointerResizing,setIsPointerResizing]=useState(!1);useEffect(()=>{if(isSplitOpen&&canResize||setIsPointerResizing(!1),!isPointerResizing||!currentWindow)return;let stopResizeCursor=()=>setIsPointerResizing(!1);return currentWindow.addEventListener("blur",stopResizeCursor),()=>currentWindow.removeEventListener("blur",stopResizeCursor)},[isPointerResizing,isSplitOpen,canResize,currentWindow]),useLayoutEffect(()=>{dispatch({type:"setSplitOverlap",overlapping:isOverlapping})},[dispatch,isOverlapping,splitState.isOverlapping]);let resizeSplit=width=>{let nextWidth=Math.min(maximum,Math.max(minimum,width));setResizeReference({size:nextWidth,available}),dispatch({type:"resize",slot:"splitview",size:nextWidth})},{moveProps}=useMove({onMoveStart:()=>{dragWidth.current=splitWidth,separatorRef.current?.focus(),setIsPointerResizing(!0)},onMove:event=>{dragWidth.current-=event.deltaX,resizeSplit(dragWidth.current)},onMoveEnd:()=>setIsPointerResizing(!1)});return React.createElement(StyledColumns,{ref:columnRef,isSplitOpen:isSplitOpen,"data-e2e-test-id":dataE2eTestId},isPointerResizing&&isSplitOpen&&canResize&&React.createElement(Global,{styles:[RESIZING_CURSOR_STYLES]}),React.createElement(StyledContentHost,{ref:contentHostRef,columnWidth:isSplitOpen?contentWidth:void 0,overlapOffset:isSplitOpen?`min(0px, calc(${remainingWidth} - ${contentWidth}))`:void 0}),isSplitOpen&&React.createElement(React.Fragment,null,React.createElement(StyledSplitHost,{ref:splitHostRef,id:splitId,columnWidth:splitColumnWidth,isOverlapping:isOverlapping}),React.createElement(StyledSeparator,{...canResize?moveProps:{},ref:separatorRef,position:remainingWidth,isOverlapping:isOverlapping,canResize:canResize,role:"separator","aria-orientation":"vertical","aria-controls":splitId,"aria-label":declared.splitview?.resizeHandleLabel,"aria-valuemin":minimum,"aria-valuemax":maximum,"aria-valuenow":splitWidth,"aria-disabled":!canResize||minimum===maximum,tabIndex:-1,onKeyDown:void 0})))}
|