@olenbetong/synergi-react 1.0.5 → 2.0.1

package/src/DateNavigator/index.scss

@@ -3,58 +3,91 @@
 $date-select-height: 3rem;
 
 .ObDateNavigator-icon {
-	display: inline-block;
+  display: inline-block;
 
-	svg {
-		width: 0.625em;
-		position: relative;
-		top: -1px;
-	}
+  svg {
+    width: 0.625em;
+    position: relative;
+    top: -1px;
+  }
 }
 
 .ObDateNavigator-root {
-	background-color: hsl(220, 20%, 96%);
-	background-color: var(--block-header-color-bg);
-	display: flex;
-	font-size: 1rem;
+  background-color: hsl(220, 20%, 96%);
+  background-color: var(--block-header-color-bg);
+  display: flex;
+  font-size: 1rem;
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--brand-dark, #336699);
+    outline-offset: 2px;
+  }
 }
 
 .ObDateNavigator-arrow {
-	@include mixins.btn-reset;
-	display: flex;
-	align-items: center;
-	flex: 0 0 $date-select-height;
-	justify-content: center;
+  @include mixins.btn-reset;
+  display: flex;
+  align-items: center;
+  flex: 0 0 $date-select-height;
+  justify-content: center;
 
-	height: $date-select-height;
+  height: $date-select-height;
 
-	cursor: pointer;
-	text-align: center;
+  cursor: pointer;
+  text-align: center;
 
-	&:hover {
-		background-color: #e3e3e3;
-		background-color: var(--block-header-button-hover);
-	}
+  &:hover {
+    background-color: #e3e3e3;
+    background-color: var(--block-header-button-hover);
+  }
 }
 
 .ObDateNavigator-arrowLeft {
-	border-right: 1px solid #dddddd;
-	order: 1;
+  border-right: 1px solid #dddddd;
+  order: 1;
 }
 
 .ObDateNavigator-arrowRight {
-	border-left: 1px solid #dddddd;
-	order: 3;
+  border-left: 1px solid #dddddd;
+  order: 3;
 }
 
 .ObDateNavigator-date {
-	display: flex;
-	flex: 1 1 100%;
-	flex-direction: column;
-	justify-content: center;
-	order: 2;
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  justify-content: center;
+  order: 2;
 
-	height: $date-select-height;
+  height: $date-select-height;
 
-	text-align: center;
+  text-align: center;
 }
+
+.ObDateNavigator-today {
+  @include mixins.btn-reset;
+  order: 4;
+  padding: 0 1rem;
+  height: $date-select-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  color: var(--brand-dark, #336699);
+  text-transform: uppercase;
+  cursor: pointer;
+
+	text-wrap: nowrap;
+
+	border-left: 1px solid #dddddd;
+
+  &:hover {
+    background-color: var(--block-header-button-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--brand-dark, #336699);
+    outline-offset: 2px;
+  }
+} 

package/src/DateNavigator/index.tsx

@@ -1,35 +1,36 @@
 import "./index.scss";
 
 import { getLocalizedString } from "@olenbetong/appframe-core";
-
 import clsx from "clsx";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 function getUiCulture() {
 	return af?.userSession?.culture ?? "default";
 }
 
-function Arrow(props) {
-	const { direction, ...rest } = props;
-
+function Arrow({
+	direction,
+	...rest
+}: { direction: "left" | "right" } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
 	return (
 		<button
 			className={clsx(
 				"ObDateNavigator-arrow",
 				direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight",
 			)}
+			aria-label={direction === "left" ? getLocalizedString("Previous day") : getLocalizedString("Next day")}
 			{...rest}
 		>
 			<span className="ObDateNavigator-icon">
 				{direction === "left" ? (
-					<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 320 512">
+					<svg aria-hidden="true" viewBox="0 0 320 512">
 						<path
 							fill="currentColor"
 							d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
 						/>
 					</svg>
 				) : (
-					<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 320 512">
+					<svg aria-hidden="true" viewBox="0 0 320 512">
 						<path
 							fill="currentColor"
 							d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
@@ -48,45 +49,109 @@ const formatter = new Intl.DateTimeFormat(getUiCulture(), {
 	year: "numeric",
 	timeZone: "utc",
 });
-const today = new Date();
-const todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
 
 const oneDay = 24 * 60 * 60 * 1000;
 
-export function DateNavigator({ date: dateProp, onChange }: { date?: Date; onChange?: (date: Date) => void }) {
+export function DateNavigator({
+	date: dateProp,
+	onChange,
+	minDate,
+	maxDate,
+}: {
+	date?: Date;
+	onChange?: (date: Date) => void;
+	minDate?: Date;
+	maxDate?: Date;
+}) {
 	let [internalDate, setInternalDate] = useState(new Date());
-	const date = dateProp ?? internalDate;
-	const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
-	let dateValue = new Date(dateUtc);
-
-	let text = formatter.format(dateValue);
-	let altText;
-
-	if (todayUtc === dateUtc) {
-		altText = getLocalizedString("Today");
-	} else if (todayUtc === dateUtc + oneDay) {
-		altText = getLocalizedString("Yesterday");
-	} else if (todayUtc === dateUtc - oneDay) {
-		altText = getLocalizedString("Tomorrow");
+	let date = dateProp ?? internalDate;
+	let dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+	let today = new Date();
+	let todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
+	let liveRef = useRef<HTMLDivElement>(null);
+
+	let text = (() => {
+		let base = formatter.format(new Date(dateUtc));
+		if (todayUtc === dateUtc) return `${getLocalizedString("Today")}, ${base}`;
+		if (todayUtc === dateUtc + oneDay) return `${getLocalizedString("Yesterday")}, ${base}`;
+		if (todayUtc === dateUtc - oneDay) return `${getLocalizedString("Tomorrow")}, ${base}`;
+		return base;
+	})();
+
+	let disablePrev = !!minDate && dateUtc <= Date.UTC(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+	let disableNext = !!maxDate && dateUtc >= Date.UTC(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
+
+	function updateDate(newDate: Date) {
+		if (minDate && newDate < minDate) {
+			newDate = new Date(minDate); // Ensure we don't go below minDate
+		} else if (maxDate && newDate > maxDate) {
+			newDate = new Date(maxDate); // Ensure we don't go above maxDate
+		}
+
+		if (onChange) onChange(newDate);
+		else setInternalDate(newDate);
 	}
 
-	if (altText) {
-		text = `${altText}, ${text}`;
+	function jumpToToday() {
+		updateDate(new Date());
 	}
 
-	function handleDateChanged(date: Date) {
-		if (typeof onChange === "function") {
-			onChange(date);
-		} else {
-			setInternalDate(date);
+	useEffect(() => {
+		if (liveRef.current) {
+			liveRef.current.textContent = text;
+		}
+	}, [text]);
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		if (event.defaultPrevented) return;
+		if (event.altKey || event.metaKey) return; // Ignore if alt or meta key is pressed
+
+		if (disablePrev && event.key === "ArrowLeft") return;
+		if (disableNext && event.key === "ArrowRight") return;
+
+		if (event.ctrlKey && event.shiftKey) {
+			// If both ctrl and shift are pressed, navigate by 1 year
+			let newDate = new Date(dateUtc);
+			if (event.key === "ArrowLeft") {
+				newDate.setFullYear(newDate.getFullYear() - 1);
+			} else if (event.key === "ArrowRight") {
+				newDate.setFullYear(newDate.getFullYear() + 1);
+			}
+			updateDate(newDate);
+			return;
+		}
+
+		if (event.ctrlKey) {
+			// Navigate by month
+			let newDate = new Date(dateUtc);
+			if (event.key === "ArrowLeft") {
+				newDate.setMonth(newDate.getMonth() - 1);
+			} else if (event.key === "ArrowRight") {
+				newDate.setMonth(newDate.getMonth() + 1);
+			}
+			updateDate(newDate);
+			return;
+		}
+
+		let modifier = event.shiftKey ? 7 : 1;
+		if (event.key === "ArrowLeft") {
+			updateDate(new Date(dateUtc - oneDay * modifier));
+		} else if (event.key === "ArrowRight") {
+			updateDate(new Date(dateUtc + oneDay * modifier));
 		}
 	}
 
 	return (
-		<div className="ObDateNavigator-root">
-			<Arrow direction="left" onClick={() => handleDateChanged(new Date(dateUtc - oneDay))} />
+		// biome-ignore lint/a11y/noNoninteractiveTabindex: I hate this component
+		<div className="ObDateNavigator-root" onKeyDown={handleKeyDown} tabIndex={0} aria-label="Date navigator">
+			<Arrow direction="left" onClick={() => updateDate(new Date(dateUtc - oneDay))} disabled={disablePrev} />
 			<div className="ObDateNavigator-date">{text}</div>
-			<Arrow direction="right" onClick={() => handleDateChanged(new Date(dateUtc + oneDay))} />
+			<Arrow direction="right" onClick={() => updateDate(new Date(dateUtc + oneDay))} disabled={disableNext} />
+			<button type="button" className="ObDateNavigator-today" onClick={jumpToToday}>
+				{getLocalizedString("Today")}
+			</button>
+			<div aria-live="polite" ref={liveRef} style={{ position: "absolute", left: "-9999px" }} />
 		</div>
 	);
 }

package/src/LinkedCardList/index.scss

@@ -3,7 +3,13 @@
 $bullet-size: 0.7em;
 $line-width: 0.2em;
 
+:root {
+	--ob-linked-list-bullet-size: 0.7em;
+	--ob-linked-list-line-width: 0.2em;
+}
+
 .ObLinkedList-root {
+	
 	list-style-type: none;
 	margin-left: 0;
 	padding-left: 0;
@@ -47,10 +53,11 @@ $line-width: 0.2em;
 	left: 0;
 	top: 50%;
 
-	transform: translate(calc(-1 * ($bullet-size / 2) + ($line-width / 2)), -50%);
+	transform: translate(calc(-1 * (var(--ob-linked-list-bullet-size) / 2) + (var(--ob-linked-list-line-width) / 2)), -50%);
 }
 
 .ObLinkedList-card {
+	display: block;
 	background: white;
 	border: 1px solid;
 	border-color: variables.$color-border-top variables.$color-border-side variables.$color-border-bottom;

package/src/LinkedCardList/index.tsx

@@ -2,7 +2,7 @@ import "./index.scss";
 
 import clsx from "clsx";
 
-export function List({ children, className, ...other }: React.HTMLProps<HTMLUListElement>) {
+export function LinkedList({ children, className, ...other }: React.HTMLProps<HTMLUListElement>) {
 	return (
 		<ul className={clsx("ObLinkedList-root", className)} {...other}>
 			{children}
@@ -10,7 +10,7 @@ export function List({ children, className, ...other }: React.HTMLProps<HTMLULis
 	);
 }
 
-export function ListItem({
+export function LinkedListItem({
 	children,
 	className,
 	label,

package/src/PageBanner/index.tsx

@@ -26,7 +26,8 @@ export const BannerImage = React.forwardRef<HTMLImageElement, BannerImageProps>(
 	ref,
 ) {
 	const { className, ...other } = props;
-	return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} {...other} />;
+	// biome-ignore lint/a11y/useAltText: should be provided by the user
+	return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} alt="" {...other} />;
 });
 
 export type TabListProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {

package/src/Portal/index.tsx

@@ -10,15 +10,16 @@ function useForceUpdate() {
 export function Portal({ children, root, type = "div" }) {
 	const forceUpdate = useForceUpdate();
 	const mountNode = useRef<HTMLDivElement>(null);
-	const portalNode = useRef<HTMLElement>(null);
+	const portalNode = useRef<HTMLElement | null>(null);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: because reasons
 	useEffect(() => {
 		const ownerDocument = mountNode.current?.ownerDocument;
-		let portalElem = portalNode.current;
-		if (ownerDocument && portalElem) {
+		if (ownerDocument && !portalNode.current) {
 			let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
+
 			const node = ownerDocument.createElement(type);
-			portalElem = node;
+			portalNode.current = node;
 			parent.appendChild(node);
 			forceUpdate();
 
@@ -26,11 +27,11 @@ export function Portal({ children, root, type = "div" }) {
 				parent.removeChild(node);
 			};
 		}
-	}, []);
+	}, [root, type]);
 
 	if (!portalNode.current) {
 		return <div ref={mountNode} />;
-	} else {
-		return createPortal(children, portalNode.current);
 	}
+
+	return createPortal(children, portalNode.current);
 }

package/src/ProgressBar/index.scss

@@ -28,7 +28,7 @@
 				transparent 66%
 			),
 			linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-			linear-gradient(left, var(--brand-primary, variables.$brand-primary), var(--brand-light, variables.$brand-light));
+			linear-gradient(left, var(--brand-primary), var(--brand-light));
 		background-image:
 			-webkit-linear-gradient(
 				135deg,
@@ -39,7 +39,7 @@
 				transparent 66%
 			),
 			-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-			-webkit-linear-gradient(left, var(--brand-primary), variables.$brand-primary, var(--brand-light, variables.$brand-light));
+			-webkit-linear-gradient(left, var(--brand-primary), var(--brand-light));
 		background-size:
 			35px 20px,
 			100% 100%,

package/src/Sidebar/index.tsx

@@ -49,6 +49,7 @@ export function Sidebar(props: SidebarProps) {
 		return () => element?.removeEventListener("transitionend", toggleHiddenContent);
 	}, [open]);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO
 	useEffect(() => {
 		function handleCloseSidebar(evt) {
 			if (evt.key === "Escape") {

package/src/Spinner/{index.scss → index.css}

@@ -1,4 +1,7 @@
-$bullet-size: 0.5em;
+
+.ObSpinner-wrapper, .ObSpinner-fullPage {
+	--bullet-size: 0.5em;
+}
 
 .ObSpinner-root {
 	display: inline-block;
@@ -15,38 +18,38 @@ $bullet-size: 0.5em;
 
 .ObSpinner-spinner {
 	display: inline-block;
-	height: $bullet-size * 1.5;
+	height: calc(var(--bullet-size) * 1.5);
 	position: relative;
-	width: $bullet-size * 5;
+	width: calc(var(--bullet-size) * 5);
 }
 
 .ObSpinner-bullet {
 	animation-timing-function: cubic-bezier(0, 1, 1, 0);
 	background: #666;
 	border-radius: 50%;
-	height: $bullet-size;
+	height: var(--bullet-size);
 	position: absolute;
 	top: 0.2rem;
-	width: $bullet-size;
+	width: var(--bullet-size);
 
 	&:nth-child(1) {
 		animation: scaleAnimation 0.6s infinite ease-in-out;
-		left: $bullet-size * 0.5;
+		left: calc(var(--bullet-size) * 0.5);
 	}
 
 	&:nth-child(2) {
 		animation: translateAnimation 0.6s infinite ease-in-out;
-		left: $bullet-size * 0.5;
+		left: calc(var(--bullet-size) * 0.5);
 	}
 
 	&:nth-child(3) {
 		animation: translateAnimation 0.6s infinite ease-in-out;
-		left: $bullet-size * 2.4;
+		left: calc(var(--bullet-size) * 2.4);
 	}
 
 	&:nth-child(4) {
 		animation: scaleAnimation 0.6s infinite ease-in-out reverse;
-		left: $bullet-size * 4;
+		left: calc(var(--bullet-size) * 4);
 	}
 }
 
@@ -66,6 +69,6 @@ $bullet-size: 0.5em;
 	}
 
 	to {
-		transform: translate($bullet-size * 1.65, 0);
+		transform: translate(calc(var(--bullet-size) * 1.65), 0);
 	}
 }

package/src/Spinner/index.tsx

@@ -1,7 +1,7 @@
-import "./index.scss";
+import "./index.css";
 
 import clsx from "clsx";
-import React from "react";
+import type React from "react";
 
 export type SpinnerProps = React.HTMLProps<HTMLDivElement> & {
 	fullPage?: boolean;

package/src/SplitContainer/index.tsx

@@ -2,7 +2,8 @@ import "./index.scss";
 
 import clsx from "clsx";
 import localforage from "localforage";
-import React, { Children, forwardRef, useEffect, useRef, useState } from "react";
+import type React from "react";
+import { Children, forwardRef, useEffect, useRef, useState } from "react";
 
 const article = globalThis.af?.article?.id ?? globalThis.window?.location.pathname.substring(1).split("/")[0];
 const settingsStore = localforage.createInstance({
@@ -59,11 +60,24 @@ type DividerProps = {
 	className?: string;
 	direction: "horizontal" | "vertical";
 	isDragging: boolean;
+	min: number;
+	max: number;
+	size: number;
 };
 
 const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(props: DividerProps, ref) {
 	return (
-		<div tabIndex={0} className={clsx("ObSplitContainer-divider", props.className)} ref={ref}>
+		<div
+			className={clsx("ObSplitContainer-divider", props.className)}
+			tabIndex={0}
+			ref={ref}
+			// biome-ignore lint/a11y/useSemanticElements: this is allowed according to WAI-ARIA
+			role="separator"
+			aria-orientation={props.direction}
+			aria-valuemin={props.min}
+			aria-valuemax={props.max}
+			aria-valuenow={props.size}
+		>
 			<span>•••</span>
 		</div>
 	);
@@ -114,6 +128,8 @@ export type SplitContainerProps = {
 	direction?: "horizontal" | "vertical";
 	fixedPanel?: 1 | 2;
 	defaultFixedSize?: number;
+	min?: number;
+	max?: number;
 	/**
 	 * When the fixed size is persisted, changing the layoutVersion will force clients
 	 * to reset to the default value.
@@ -133,6 +149,8 @@ export function SplitContainer({
 	panelClassName,
 	defaultFixedSize = 400,
 	layoutVersion = 1,
+	min = 0,
+	max,
 	id,
 }: SplitContainerProps) {
 	let [fixedSize, setFixedSize] = useState<number>(defaultFixedSize);
@@ -143,18 +161,23 @@ export function SplitContainer({
 		throw Error("SplitContainer requires exactly 2 children");
 	}
 
-	function handleFixedSizeChanged(size: React.SetStateAction<number>) {
-		setFixedSize((current) => {
-			let newValue: number = typeof size === "function" ? size(current) : size;
+	let containerRef = useRef<HTMLDivElement>(null);
+	let [containerSize, setContainerSize] = useState<number>(0);
 
-			if (id) {
-				let key = `${article}.${id}`;
-				persistState(key, layoutVersion, newValue);
-			}
+	useEffect(() => {
+		if (!containerRef.current) return;
 
-			return newValue;
+		let resizeObserver = new ResizeObserver((entries) => {
+			for (let entry of entries) {
+				if (entry.contentRect) {
+					setContainerSize(direction === "horizontal" ? entry.contentRect.width : entry.contentRect.height);
+				}
+			}
 		});
-	}
+
+		resizeObserver.observe(containerRef.current);
+		return () => resizeObserver.disconnect();
+	}, [direction]);
 
 	useEffect(() => {
 		if (id) {
@@ -186,6 +209,17 @@ export function SplitContainer({
 				fixedPanel === 1 ? divider.previousElementSibling : divider.nextElementSibling
 			) as HTMLElement;
 
+			function clampSize(size: number) {
+				let adjustedContainerSize = containerSize - 10; // make sure divider will not be stuck outside the container
+				let maxSize = Math.min(max ?? adjustedContainerSize, adjustedContainerSize);
+				if (size < min) {
+					size = min;
+				} else if (size > maxSize) {
+					size = maxSize;
+				}
+				return size;
+			}
+
 			function getNewSize(event: PointerEvent) {
 				let deltaSize =
 					direction === "horizontal"
@@ -194,7 +228,20 @@ export function SplitContainer({
 
 				deltaSize *= fixedPanel === 1 ? -1 : 1;
 
-				return initialPosition.size - deltaSize;
+				return clampSize(initialPosition.size - deltaSize);
+			}
+
+			function handleFixedSizeChanged(size: React.SetStateAction<number>) {
+				setFixedSize((current) => {
+					let newValue: number = clampSize(typeof size === "function" ? size(current) : size);
+
+					if (id) {
+						let key = `${article}.${id}`;
+						persistState(key, layoutVersion, newValue);
+					}
+
+					return newValue;
+				});
 			}
 
 			function handlePointerUp(event: PointerEvent) {
@@ -210,6 +257,10 @@ export function SplitContainer({
 				event.preventDefault();
 
 				let newSize = getNewSize(event);
+				let divider = dividerRef.current;
+				if (divider) {
+					divider.setAttribute("aria-valuenow", String(newSize));
+				}
 				movingPanel.style.flex = `0 0 ${newSize}px`;
 			}
 
@@ -229,8 +280,8 @@ export function SplitContainer({
 			}
 
 			function handleKeyDown(event: KeyboardEvent) {
-				let reduce: boolean = true;
-				let shouldHandle: boolean = false;
+				let reduce = true;
+				let shouldHandle = false;
 				if (!event.altKey && !event.ctrlKey && !event.metaKey) {
 					if (direction === "horizontal" && ["ArrowLeft", "ArrowRight"].includes(event.key)) {
 						shouldHandle = true;
@@ -260,14 +311,21 @@ export function SplitContainer({
 				divider?.removeEventListener("keydown", handleKeyDown);
 			};
 		}
-	}, [direction, fixedPanel]);
+	}, [direction, fixedPanel, layoutVersion, id, min, max, containerSize]);
 
 	return (
-		<SplitRoot direction={direction} className={className}>
+		<SplitRoot direction={direction} className={className} ref={containerRef}>
 			<SplitPanel className={clsx(isDragging && "dragging", panelClassName)} fixed={fixedPanel === 1} size={fixedSize}>
 				{childrenArray[0]}
 			</SplitPanel>
-			<Divider ref={dividerRef} direction={direction} isDragging={isDragging} />
+			<Divider
+				ref={dividerRef}
+				direction={direction}
+				isDragging={isDragging}
+				size={fixedSize}
+				min={min}
+				max={max ?? containerSize}
+			/>
 			<SplitPanel className={clsx(isDragging && "dragging", panelClassName)} fixed={fixedPanel === 2} size={fixedSize}>
 				{childrenArray[1]}
 			</SplitPanel>