@onehat/ui 0.4.82 → 0.4.84

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.82",
+	"version": "0.4.84",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -58,17 +58,18 @@
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@legendapp/motion": "^2.4.0",
 		"@onehat/data": "^1.22.0",
-		"clsx": "^2.1.1",
-		"nativewind": "4.1.23",
-		"normalize-css-color": "^1.0.2",
 		"@react-native-community/slider": "^4.5.2",
 		"@reduxjs/toolkit": "^2.6.1",
+		"clsx": "^2.1.1",
 		"decimal.js": "^10.5.0",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",
+		"nativewind": "4.1.23",
+		"normalize-css-color": "^1.0.2",
 		"react-hook-form": "^7.55.0",
 		"react-native-progress": "^5.0.1",
 		"react-redux": "^9.2.0",
+		"tailwind-scrollbar": "^3.1.0",
 		"tailwindcss": "^3.4.17",
 		"yup": "^1.6.1"
 	},
@@ -79,10 +80,10 @@
 		"react": "*",
 		"react-color": "^2.19.3",
 		"react-datetime": "^3.2.0",
-		"react-dom": "*",
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",
-		"react-dnd-touch-backend":"16.0.1",
+		"react-dnd-touch-backend": "16.0.1",
+		"react-dom": "*",
 		"react-draggable": "^4.4.5",
 		"react-native": "*",
 		"react-native-draggable": "^3.3.0",

package/src/Components/Container/Container.js

@@ -1,5 +1,6 @@
-import { cloneElement, useState, useEffect, } from 'react';
+import { cloneElement, useState, useEffect, useRef, } from 'react';
 import {
+	BoxNative,
 	HStack,
 	VStack,
 } from '@project-components/Gluestack';
@@ -14,6 +15,7 @@ import {
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
 import withComponent from '../Hoc/withComponent.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import Splitter from './Splitter.js';
@@ -60,96 +62,225 @@ import _ from 'lodash';
 
 function Container(props) {
 	const {
+			isDisabled = false,
+
+			// components
 			center,
 			north,
 			south,
 			east,
 			west,
 
-			isNorthCollapsed,
-			setIsNorthCollapsed,
-			isSouthCollapsed,
-			setIsSouthCollapsed,
-			isEastCollapsed,
-			setIsEastCollapsed,
-			isWestCollapsed,
-			setIsWestCollapsed,
+			// configuration
+			northIsResizable = false,
+			southIsResizable = false,
+			eastIsResizable = false,
+			westIsResizable = false,
+
+			// initial states
+			northInitialHeight = null,
+			southInitialHeight = null,
+			eastInitialWidth = null,
+			westInitialWidth = null,
+
+			northInitialFlex = null,
+			southInitialFlex = null,
+			eastInitialFlex = null,
+			westInitialFlex = null,
+
+			northInitialIsCollapsed = false,
+			southInitialIsCollapsed = false,
+			eastInitialIsCollapsed = false,
+			westInitialIsCollapsed = false,
+
+			// optional external control of collapse states
+			northIsCollapsed = false,
+			southIsCollapsed = false,
+			eastIsCollapsed = false,
+			westIsCollapsed = false,
+
+			setNorthIsCollapsed: setExternalNorthIsCollapsed,
+			setSouthIsCollapsed: setExternalSouthIsCollapsed,
+			setEastIsCollapsed: setExternalEastIsCollapsed,
+			setWestIsCollapsed: setExternalWestIsCollapsed,
 		} = props,
 		id = props.id || props.self?.path,
-		canResize = CURRENT_MODE === UI_MODE_WEB,
+		isWeb = CURRENT_MODE === UI_MODE_WEB,
+		forceUpdate = useForceUpdate(),
+		centerRef = useRef(null),
+		northRef = useRef(null),
+		southRef = useRef(null),
+		eastRef = useRef(null),
+		westRef = useRef(null),
+		northHeightRef = useRef(northInitialHeight),
+		southHeightRef = useRef(southInitialHeight),
+		eastWidthRef = useRef(eastInitialWidth),
+		westWidthRef = useRef(westInitialWidth),
 		[isReady, setIsReady] = useState(false),
-		[localIsNorthCollapsed, setLocalIsNorthCollapsedRaw] = useState(north ? !!north.props.startsCollapsed : false),
-		[localIsSouthCollapsed, setLocalIsSouthCollapsedRaw] = useState(south ? !!south.props.startsCollapsed : false),
-		[localIsEastCollapsed, setLocalIsEastCollapsedRaw] = useState(east ? !!east.props.startsCollapsed : false),
-		[localIsWestCollapsed, setLocalIsWestCollapsedRaw] = useState(west ? !!west.props.startsCollapsed : false),
-		[northHeight, setNorthHeightRaw] = useState(north ? north.props.h : 0),
-		[southHeight, setSouthHeightRaw] = useState(south ? south.props.h : 0),
-		[eastWidth, setEastWidthRaw] = useState(east ? east.props.w : 0),
-		[westWidth, setWestWidthRaw] = useState(west ? west.props.w : 0),
-		setLocalIsNorthCollapsed = (bool) => {
-			setLocalIsNorthCollapsedRaw(bool);
+		[isComponentsDisabled, setIsComponentsDisabled] = useState(false),
+		[localNorthIsCollapsed, setLocalNorthIsCollapsed] = useState(northInitialIsCollapsed),
+		[localSouthIsCollapsed, setLocalSouthIsCollapsed] = useState(southInitialIsCollapsed),
+		[localEastIsCollapsed, setLocalEastIsCollapsed] = useState(eastInitialIsCollapsed),
+		[localWestIsCollapsed, setLocalWestIsCollapsed] = useState(westInitialIsCollapsed),
+		setNorthIsCollapsed = (bool) => {
+			if (setExternalNorthIsCollapsed) {
+				setExternalNorthIsCollapsed(bool);
+			} else {
+				setLocalNorthIsCollapsed(bool);
+			}
 
 			if (id) {
-				setSaved(id + '-localIsNorthCollapsed', bool);
+				setSaved(id + '-northIsCollapsed', bool);
+			}
+		},
+		getNorthIsCollapsed = () => {
+			if (setExternalNorthIsCollapsed) {
+				return northIsCollapsed;
 			}
+			return localNorthIsCollapsed;
 		},
-		setLocalIsSouthCollapsed = (bool) => {
-			setLocalIsSouthCollapsedRaw(bool);
+		setSouthIsCollapsed = (bool) => {
+			if (setExternalSouthIsCollapsed) {
+				setExternalSouthIsCollapsed(bool);
+			} else {
+				setLocalSouthIsCollapsed(bool);
+			}
+
 			if (id) {
-				setSaved(id + '-localIsSouthCollapsed', bool);
+				setSaved(id + '-southIsCollapsed', bool);
 			}
 		},
-		setLocalIsEastCollapsed = (bool) => {
-			setLocalIsEastCollapsedRaw(bool);
+		getSouthIsCollapsed = () => {
+			if (setExternalSouthIsCollapsed) {
+				return southIsCollapsed;
+			}
+			return localSouthIsCollapsed;
+		},
+		setEastIsCollapsed = (bool) => {
+			if (setExternalEastIsCollapsed) {
+				setExternalEastIsCollapsed(bool);
+			} else {
+				setLocalEastIsCollapsed(bool);
+			}
+
 			if (id) {
-				setSaved(id + '-localIsEastCollapsed', bool);
+				setSaved(id + '-eastIsCollapsed', bool);
+			}
+		},
+		getEastIsCollapsed = () => {
+			if (setExternalEastIsCollapsed) {
+				return eastIsCollapsed;
 			}
+			return localEastIsCollapsed;
 		},
-		setLocalIsWestCollapsed = (bool) => {
-			setLocalIsWestCollapsedRaw(bool);
+		setWestIsCollapsed = (bool) => {
+			if (setExternalWestIsCollapsed) {
+				setExternalWestIsCollapsed(bool);
+			} else {
+				setLocalWestIsCollapsed(bool);
+			}
+
 			if (id) {
-				setSaved(id + '-localIsWestCollapsed', bool);
+				setSaved(id + '-westIsCollapsed', bool);
+			}
+		},
+		getWestIsCollapsed = () => {
+			if (setExternalWestIsCollapsed) {
+				return westIsCollapsed;
 			}
+			return localWestIsCollapsed;
 		},
 		setNorthHeight = (height) => {
-			setNorthHeightRaw(height);
-			if (id) {
-				setSaved(id + '-northHeight', height);
+			if (!getNorthIsCollapsed()) {
+				northHeightRef.current = height;
+				if (id) {
+					setSaved(id + '-northHeight', height);
+				}
 			}
 		},
+		getNorthHeight = () => {
+			return northHeightRef.current;
+		},
 		setSouthHeight = (height) => {
-			setSouthHeightRaw(height);
-			if (id) {
-				setSaved(id + '-southHeight', height);
+			if (!getSouthIsCollapsed()) {
+				southHeightRef.current = height;
+				if (id) {
+					setSaved(id + '-southHeight', height);
+				}
 			}
 		},
+		getSouthHeight = () => {
+			return southHeightRef.current;
+		},
 		setEastWidth = (width) => {
-			setEastWidthRaw(width);
-			if (id) {
-				setSaved(id + '-eastWidth', width);
+			if (!getEastIsCollapsed()) {
+				eastWidthRef.current = width;
+				if (id) {
+					setSaved(id + '-eastWidth', width);
+				}
 			}
 		},
+		getEastWidth = () => {
+			return eastWidthRef.current;
+		},
 		setWestWidth = (width) => {
-			setWestWidthRaw(width);
-			if (id) {
-				setSaved(id + '-westWidth', width);
+			if (!getWestIsCollapsed()) {
+				westWidthRef.current = width;
+				if (id) {
+					setSaved(id + '-westWidth', width);
+				}
 			}
 		},
+		getWestWidth = () => {
+			return westWidthRef.current;
+		},
 		onNorthResize = (delta) => {
-			const newHeight = northHeight + delta;
-			setNorthHeight(newHeight);
+			if (!getNorthIsCollapsed()) {
+				const newHeight = getNorthHeight() + delta;
+				setNorthHeight(newHeight);
+				forceUpdate();
+			}
 		},
 		onSouthResize = (delta) => {
-			const newHeight = southHeight - delta; // minus
-			setSouthHeight(newHeight);
+			if (!getSouthIsCollapsed()) {
+				const newHeight = getSouthHeight() - delta; // minus
+				setSouthHeight(newHeight);
+				forceUpdate();
+			}
 		},
 		onEastResize = (delta) => {
-			const newWidth = eastWidth - delta; // minus
-			setEastWidth(newWidth);
+			if (!getEastIsCollapsed()) {
+				const newWidth = getEastWidth() - delta; // minus
+				setEastWidth(newWidth);
+				forceUpdate();
+			}
 		},
 		onWestResize = (delta) => {
-			const newWidth = westWidth + delta;
-			setWestWidth(newWidth);
+			if (!getWestIsCollapsed()) {
+				const newWidth = getWestWidth() + delta;
+				setWestWidth(newWidth);
+				forceUpdate();
+			}
+		},
+		onSplitterDragStart = () => {
+			setIsComponentsDisabled(true);
+		},
+		onSplitterDragStop = (delta, which) => {
+			setIsComponentsDisabled(false);
+			switch(which) {
+				case 'north':
+					onNorthResize(delta);
+					break;
+				case 'south':
+					onSouthResize(delta);
+					break;
+				case 'east':
+					onEastResize(delta);
+					break;
+				case 'west':
+					onWestResize(delta);
+					break;
+			}
 		};
 
 	useEffect(() => {
@@ -158,52 +289,52 @@ function Container(props) {
 
 			if (id) {
 				let key, val;
-				key = id + '-localIsNorthCollapsed';
+				key = id + '-northIsCollapsed';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setLocalIsNorthCollapsedRaw(val);
+					setNorthIsCollapsed(val);
 				}
 
-				key = id + '-localIsSouthCollapsed';
+				key = id + '-southIsCollapsed';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setLocalIsSouthCollapsedRaw(val);
+					setSouthIsCollapsed(val);
 				}
 
-				key = id + '-localIsEastCollapsed';
+				key = id + '-eastIsCollapsed';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setLocalIsEastCollapsedRaw(val);
+					setEastIsCollapsed(val);
 				}
 
-				key = id + '-localIsWestCollapsed';
+				key = id + '-westIsCollapsed';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setLocalIsWestCollapsedRaw(val);
+					setWestIsCollapsed(val);
 				}
 
 				key = id + '-northHeight';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setNorthHeightRaw(val);
+					setNorthHeight(val);
 				}
 
 				key = id + '-southHeight';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setSouthHeightRaw(val);
+					setSouthHeight(val);
 				}
 
 				key = id + '-eastWidth';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setEastWidthRaw(val);
+					setEastWidth(val);
 				}
 
 				key = id + '-westWidth';
 				val = await getSaved(key);
 				if (!_.isNil(val)) {
-					setWestWidthRaw(val);
+					setWestWidth(val);
 				}
 			}
 
@@ -216,8 +347,9 @@ function Container(props) {
 	if (!isReady) {
 		return null;
 	}
-		
+	
 	let componentProps = {},
+		wrapperProps = null,
 		centerComponent = null,
 		northComponent = null,
 		northSplitter = null,
@@ -228,117 +360,174 @@ function Container(props) {
 		westComponent = null,
 		westSplitter = null;
 
-	centerComponent = cloneElement(center, { isCollapsible: false, });
+	componentProps.isCollapsible = false;
+	componentProps.isDisabled = isDisabled || isComponentsDisabled;
+	centerComponent = cloneElement(center, componentProps);
 	if (north) {
-		componentProps.collapseDirection = VERTICAL;
-		if (!north.props.h && !north.props.flex) {
-			componentProps.flex = 50;
-		}
-		if (canResize && north.props.isResizable) {
-			if (northHeight) {
-				componentProps.h = northHeight;
-				componentProps.flex = null;
+		componentProps = {};
+		wrapperProps = {};
+		
+		componentProps.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps.className = (north.props.className || '') + ' h-full w-full';
+		wrapperProps.onLayout = (e) => {
+			const height = parseFloat(e.nativeEvent.layout.height);
+			if (height && height !== northHeight) {
+				setNorthHeight(height);
 			}
-			componentProps.w = '100%';
-			componentProps.isCollapsed = setIsNorthCollapsed ? isNorthCollapsed : localIsNorthCollapsed;
-			componentProps.setIsCollapsed = setIsNorthCollapsed || setLocalIsNorthCollapsed;
-			componentProps.onLayout = (e) => {
-				const height = parseFloat(e.nativeEvent.layout.height);
-				if (height && height !== northHeight) {
-					setNorthHeight(height);
-				}
+		};
+		if (getNorthIsCollapsed()) {
+			wrapperProps.style = {
+				height: 33,
 			};
-			northSplitter = <Splitter mode={VERTICAL} onDragStop={onNorthResize} />;
+		} else {
+			const northHeight = getNorthHeight();
+			if (_.isNil(northHeight)) {
+				wrapperProps.style = { flex: northInitialFlex || 50, };
+			} else {
+				wrapperProps.style = { height: northHeight, };
+			}
 		}
-		northComponent = cloneElement(north, { ...componentProps, w: '100%', });
-		componentProps = {};
-	}
-	if (south) {
 		componentProps.collapseDirection = VERTICAL;
-		if (!south.props.h && !south.props.flex) {
-			componentProps.flex = 50;
+		componentProps.isCollapsed = getNorthIsCollapsed();
+		componentProps.setIsCollapsed = setNorthIsCollapsed;
+		if (isWeb && northIsResizable) {
+			northSplitter = <Splitter
+								mode={VERTICAL}
+								onDragStart={onSplitterDragStart}
+								onDragStop={(delta) => onSplitterDragStop(delta, 'north')}
+							/>;
 		}
-		if (canResize && south.props.isResizable) {
-			if (southHeight) {
-				componentProps.h = southHeight;
-				componentProps.flex = null;
+		northComponent = <BoxNative className="northWrapper w-full" {...wrapperProps}>
+							{cloneElement(north, componentProps)}
+						</BoxNative>;
+	}
+	if (south) {
+		componentProps = {};
+		wrapperProps = {};
+		
+		componentProps.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps.className = (south.props.className || '') + ' h-full w-full';
+		wrapperProps.onLayout = (e) => {
+			const height = parseFloat(e.nativeEvent.layout.height);
+			if (height && height !== getSouthHeight()) {
+				setSouthHeight(height);
 			}
-			componentProps.w = '100%';
-			componentProps.isCollapsed = setIsSouthCollapsed ? isSouthCollapsed : localIsSouthCollapsed;
-			componentProps.setIsCollapsed = setIsSouthCollapsed || setLocalIsSouthCollapsed;
-			componentProps.onLayout = (e) => {
-				const height = parseFloat(e.nativeEvent.layout.height);
-				if (height && height !== southHeight) {
-					setSouthHeight(height);
-				}
+		};
+		if (getSouthIsCollapsed()) {
+			wrapperProps.style = {
+				height: 33,
 			};
-			southSplitter = <Splitter mode={VERTICAL} onDragStop={onSouthResize} />;
+		} else {
+			const southHeight = getSouthHeight();
+			if (_.isNil(southHeight)) {
+				wrapperProps.style = { flex: southInitialFlex || 50, };
+			} else {
+				wrapperProps.style = { height: southHeight, };
+			}
 		}
-		southComponent = cloneElement(south, { ...componentProps, w: '100%', });
-		componentProps = {};
+		componentProps.collapseDirection = VERTICAL;
+		componentProps.isCollapsed = getSouthIsCollapsed();
+		componentProps.setIsCollapsed = setSouthIsCollapsed;
+		if (isWeb && southIsResizable) {
+			southSplitter = <Splitter
+								mode={VERTICAL}
+								onDragStart={onSplitterDragStart}
+								onDragStop={(delta) => onSplitterDragStop(delta, 'south')}
+							/>;
+		}
+		southComponent = <BoxNative className="southWrapper w-full" {...wrapperProps}>
+							{cloneElement(south, componentProps)}
+						</BoxNative>;
 	}
 	if (east) {
-		componentProps.collapseDirection = HORIZONTAL;
-		if (!east.props.w && !east.props.flex) {
-			componentProps.flex = 50;
-		}
-		if (canResize && east.props.isResizable) {
-			if (eastWidth) {
-				componentProps.w = eastWidth;
-				componentProps.flex = null;
+		componentProps = {};
+		wrapperProps = {};
+		
+		componentProps.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps.className = (east.props.className || '') + ' h-full w-full';
+		wrapperProps.onLayout = (e) => {
+			const width = parseFloat(e.nativeEvent.layout.width);
+			if (width && width !== getEastWidth()) {
+				setEastWidth(width);
 			}
-			componentProps.h = '100%';
-			componentProps.isCollapsed = setIsEastCollapsed ? isEastCollapsed : localIsEastCollapsed;
-			componentProps.setIsCollapsed = setIsEastCollapsed || setLocalIsEastCollapsed;
-			componentProps.onLayout = (e) => {
-				const width = parseFloat(e.nativeEvent.layout.width);
-				if (width && width !== eastWidth) {
-					setEastWidth(width);
-				}
+		};
+		if (getEastIsCollapsed()) {
+			wrapperProps.style = {
+				width: 33,
 			};
-			eastSplitter = <Splitter mode={HORIZONTAL} onDragStop={onEastResize} />;
+		} else {
+			const eastWidth = getEastWidth();
+			if (_.isNil(eastWidth)) {
+				wrapperProps.style = { flex: eastInitialFlex || 50, };
+			} else {
+				wrapperProps.style = { width: eastWidth, };
+			}
 		}
-		eastComponent = cloneElement(east, { ...componentProps, h: '100%', });
-		componentProps = {};
-	}
-	if (west) {
 		componentProps.collapseDirection = HORIZONTAL;
-		if (!west.props.w && !west.props.flex) {
-			componentProps.flex = 50;
+		componentProps.isCollapsed = getEastIsCollapsed();
+		componentProps.setIsCollapsed = setEastIsCollapsed;
+		if (isWeb && eastIsResizable) {
+			eastSplitter = <Splitter
+								mode={HORIZONTAL}
+								onDragStart={onSplitterDragStart}
+								onDragStop={(delta) => onSplitterDragStop(delta, 'east')}
+							/>;
 		}
-		if (canResize && west.props.isResizable) {
-			if (westWidth) {
-				componentProps.w = westWidth;
-				componentProps.flex = null;
+		eastComponent = <BoxNative className="eastWrapper h-full" {...wrapperProps}>
+							{cloneElement(east, componentProps)}
+						</BoxNative>;
+	}
+	if (west) {
+		componentProps = {};
+		wrapperProps = {};
+		
+		componentProps.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps.className = (west.props.className || '') + ' h-full w-full';
+		wrapperProps.onLayout = (e) => {
+			const width = parseFloat(e.nativeEvent.layout.width);
+			if (width && width !== getWestWidth()) {
+				setWestWidth(width);
 			}
-			componentProps.h = '100%';
-			componentProps.isCollapsed = setIsWestCollapsed ? isWestCollapsed : localIsWestCollapsed;
-			componentProps.setIsCollapsed = setIsWestCollapsed || setLocalIsWestCollapsed;
-			componentProps.onLayout = (e) => {
-				const width = parseFloat(e.nativeEvent.layout.width);
-				if (width && width !== westWidth) {
-					setWestWidth(width);
-				}
+		};
+		if (getWestIsCollapsed()) {
+			wrapperProps.style = {
+				width: 33,
 			};
-			westSplitter = <Splitter mode={HORIZONTAL} onDragStop={onWestResize} />;
+		} else {
+			const westWidth = getWestWidth();
+			if (_.isNil(westWidth)) {
+				wrapperProps.style = { flex: westInitialFlex || 50, };
+			} else {
+				wrapperProps.style = { width: westWidth, };
+			}
 		}
-		westComponent = cloneElement(west, { ...componentProps, h: '100%', });
-		componentProps = {};
+		componentProps.collapseDirection = HORIZONTAL;
+		componentProps.isCollapsed = getWestIsCollapsed();
+		componentProps.setIsCollapsed = setWestIsCollapsed;
+		if (isWeb && westIsResizable) {
+			westSplitter = <Splitter
+								mode={HORIZONTAL}
+								onDragStart={onSplitterDragStart}
+								onDragStop={(delta) => onSplitterDragStop(delta, 'west')}
+							/>;
+		}
+		westComponent = <BoxNative className="westWrapper h-full" {...wrapperProps}>
+							{cloneElement(west, componentProps)}
+						</BoxNative>;
 	}
-	
 	return <VStack className="Container-all w-full flex-1">
 				{northComponent}
-				{(!isNorthCollapsed && !localIsNorthCollapsed) && northSplitter}
-				<HStack className="Container-mid w-full" style={{ flex: 100 }}>
+				{!northIsCollapsed && !localNorthIsCollapsed && northSplitter}
+				<HStack className="Container-mid w-full flex-[100]">
 					{westComponent}
-					{(!isWestCollapsed && !localIsWestCollapsed) && westSplitter}
-					<VStack className="Container-center h-full overflow-auto" style={{ flex: 100 }}>
+					{!westIsCollapsed && !localWestIsCollapsed && westSplitter}
+					<VStack className="Container-center h-full overflow-auto flex-[100]">
 						{centerComponent}
 					</VStack>
-					{(!isEastCollapsed && !localIsEastCollapsed) && eastSplitter}
+					{!eastIsCollapsed && !localEastIsCollapsed && eastSplitter}
 					{eastComponent}
 				</HStack>
-				{(!isSouthCollapsed && !localIsSouthCollapsed) && southSplitter}
+				{!southIsCollapsed && !localSouthIsCollapsed && southSplitter}
 				{southComponent}
 			</VStack>;
 }