@octanejs/resizable-panels 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/resizable-panels",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -29,17 +29,17 @@
     ".": "./src/index.tsrx"
   },
   "peerDependencies": {
-    "octane": "^0.10.0"
+    "octane": "^0.11.0"
   },
   "devDependencies": {
-    "@octanejs/testing-library": "0.1.59",
+    "@octanejs/testing-library": "0.1.61",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@tsrx/react": "^0.3.7",
-    "octane": "0.10.0",
+    "@tsrx/react": "^0.4.5",
+    "octane": "0.11.0",
     "jsdom": "26.1.0",
     "playwright": "^1.61.1",
     "react": "19.2.3",
@@ -55,7 +55,7 @@
     "upstream:materialize": "node ../../scripts/react-port/materialize.mjs run --package-dir .",
     "upstream:verify": "node ../../scripts/react-parity/verify-provenance.mjs && node audit/verify-provenance.mjs",
     "upstream:verify:negative-controls": "node audit/verify-provenance.mjs --negative-controls",
-    "typecheck:probes": "tsc --noEmit -p audit/type-probes/tsconfig.pristine.json && tsrx-tsc --noEmit -p typetests/tsconfig.json",
+    "typecheck:probes": "tsc --noEmit -p audit/type-probes/tsconfig.pristine.json",
     "typecheck": "octane-tsc -p tsconfig.json -p typetests/tsconfig.json"
   }
 }

package/src/components/group/Group.tsrx

@@ -79,10 +79,10 @@ export function Group(props: GroupProps) @{
 		if (state) {
 			const dragActive =
 				interaction.state === 'active' &&
-					interaction.hitRegions.some((region) => region.group === group);
+				interaction.hitRegions.some((region) => region.group === group);
 			return {
 				flexGrow: state.layout[panelId] ?? 1,
-				pointerEvents: dragActive ? 'none' as const : undefined,
+				pointerEvents: dragActive ? ('none' as const) : undefined,
 			};
 		}
 		const initialSize = defaultLayout?.[panelId];
@@ -128,10 +128,11 @@ export function Group(props: GroupProps) @{
 				if (panel) panel.panelConstraints.disabled = next.disabled;
 				const group = getRegisteredGroup(id);
 				const state = getMountedGroupState(id);
-				if (group && state) updateMountedGroup(group, {
-					...state,
-					derivedPanelConstraints: calculatePanelConstraints(group),
-				});
+				if (group && state)
+					updateMountedGroup(group, {
+						...state,
+						derivedPanelConstraints: calculatePanelConstraints(group),
+					});
 			},
 			updateSeparatorProps(separatorId, next) {
 				const separator = valuesRef.current.separators.find(
@@ -151,7 +152,7 @@ export function Group(props: GroupProps) @{
 		let sortedDefaultLayout: Layout | undefined;
 		if (
 			stableProps.defaultLayout &&
-				Object.keys(stableProps.defaultLayout).length === values.panels.length
+			Object.keys(stableProps.defaultLayout).length === values.panels.length
 		) {
 			sortedDefaultLayout = {};
 			for (const panel of values.panels) {
@@ -189,26 +190,33 @@ export function Group(props: GroupProps) @{
 			for (const constraints of derivedPanelConstraints) {
 				const previousLayout = event.prev?.layout;
 				if (
-					constraints.collapsible && previousLayout &&
-						layoutNumbersEqual(constraints.collapsedSize, layout[constraints.panelId]) &&
-						!layoutNumbersEqual(constraints.collapsedSize, previousLayout[constraints.panelId])
+					constraints.collapsible &&
+					previousLayout &&
+					layoutNumbersEqual(constraints.collapsedSize, layout[constraints.panelId]) &&
+					!layoutNumbersEqual(constraints.collapsedSize, previousLayout[constraints.panelId])
 				) {
 					group.mutableState.expandedPanelSizes[constraints.panelId] =
 						previousLayout[constraints.panelId];
 				}
 			}
 			onLayoutChange(layout);
-			if (getInteractionState().state !== 'active') onLayoutChanged(
-				layout,
-				event.isUserInteraction,
-			);
+			if (getInteractionState().state !== 'active')
+				onLayoutChanged(layout, event.isUserInteraction);
 		});
 		return () => {
 			registeredGroupRef.current = null;
 			unmount();
 			unsubscribe();
 		};
-	}, [disabled, id, onLayoutChange, onLayoutChanged, orientation, panelOrSeparatorChangeSigil, stableProps]);
+	}, [
+		disabled,
+		id,
+		onLayoutChange,
+		onLayoutChanged,
+		orientation,
+		panelOrSeparatorChangeSigil,
+		stableProps,
+	]);
 
 	// Match upstream: prop updates only refresh mutable state; they do not reapply
 	// defaultLayout via setLayout (React leaves the live layout alone).
@@ -219,26 +227,30 @@ export function Group(props: GroupProps) @{
 		group.mutableState.disableCursor = !!disableCursor;
 	}, [defaultLayout, disableCursor]);
 
-	return <GroupContext value={context}>
-		<div
-			{...rest}
-			className={className}
-			data-group
-			data-testid={id}
-			id={id}
-			ref={mergedRef}
-			style={{
-				height: '100%',
-				width: '100%',
-				overflow: 'hidden',
-				...style,
-				display: 'flex',
-				flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-				flexWrap: 'nowrap',
-				touchAction: orientation === 'horizontal' ? 'pan-y' : 'pan-x',
-			}}
-		>{children}</div>
-	</GroupContext>;
+	return (
+		<GroupContext value={context}>
+			<div
+				{...rest}
+				className={className}
+				data-group
+				data-testid={id}
+				id={id}
+				ref={mergedRef}
+				style={{
+					height: '100%',
+					width: '100%',
+					overflow: 'hidden',
+					...style,
+					display: 'flex',
+					flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+					flexWrap: 'nowrap',
+					touchAction: orientation === 'horizontal' ? 'pan-y' : 'pan-x',
+				}}
+			>
+				{children}
+			</div>
+		</GroupContext>
+	);
 }
 
 (Group as { displayName?: string }).displayName = 'Group';

package/src/components/panel/Panel.tsrx

@@ -32,16 +32,23 @@ export function Panel(props: PanelProps) @{
 	const stableProps = useStableObject({ disabled });
 	const elementRef = useRef<HTMLDivElement | null>(null);
 	const mergedRef = useMergedRefs(elementRef, elementRefProp);
-	const { getPanelStyles, id: groupId, orientation, registerPanel, updatePanelProps } =
-		useGroupContext();
+	const {
+		getPanelStyles,
+		id: groupId,
+		orientation,
+		registerPanel,
+		updatePanelProps,
+	} = useGroupContext();
 	const hasOnResize = onResizeUnstable != null;
-	const onResizeStable = useStableCallback((
-		panelSize: PanelSize,
-		_id: string | number | undefined,
-		prevPanelSize: PanelSize | undefined,
-	) => {
-		onResizeUnstable?.(panelSize, idProp, prevPanelSize);
-	});
+	const onResizeStable = useStableCallback(
+		(
+			panelSize: PanelSize,
+			_id: string | number | undefined,
+			prevPanelSize: PanelSize | undefined,
+		) => {
+			onResizeUnstable?.(panelSize, idProp, prevPanelSize);
+		},
+	);
 
 	useIsomorphicLayoutEffect(() => {
 		const element = elementRef.current;
@@ -63,7 +70,20 @@ export function Panel(props: PanelProps) @{
 			},
 		};
 		return registerPanel(registeredPanel);
-	}, [groupResizeBehavior, collapsedSize, collapsible, defaultSize, hasOnResize, id, idIsStable, maxSize, minSize, onResizeStable, registerPanel, stableProps]);
+	}, [
+		groupResizeBehavior,
+		collapsedSize,
+		collapsible,
+		defaultSize,
+		hasOnResize,
+		id,
+		idIsStable,
+		maxSize,
+		minSize,
+		onResizeStable,
+		registerPanel,
+		stableProps,
+	]);
 
 	useEffect(() => updatePanelProps(id, { disabled }), [disabled, id, updatePanelProps]);
 	usePanelImperativeHandle(id, panelRef);
@@ -77,41 +97,44 @@ export function Panel(props: PanelProps) @{
 		read,
 		read,
 	);
-	const panelStyles =
-		panelStylesString
-			? JSON.parse(panelStylesString) as Record<string, unknown>
-			: defaultSize !== undefined
-				? { flexGrow: undefined, flexShrink: undefined, flexBasis: defaultSize }
-				: { flexGrow: 1 };
+	const panelStyles = panelStylesString
+		? (JSON.parse(panelStylesString) as Record<string, unknown>)
+		: defaultSize !== undefined
+			? { flexGrow: undefined, flexShrink: undefined, flexBasis: defaultSize }
+			: { flexGrow: 1 };
 
-	return <div
-		{...rest}
-		data-disabled={disabled || undefined}
-		data-panel
-		data-testid={id}
-		id={id}
-		ref={mergedRef}
-		style={{
-			...PROHIBITED_CSS_PROPERTIES,
-			display: 'flex',
-			flexBasis: 0,
-			flexShrink: 1,
-			overflow: 'visible',
-			...panelStyles,
-		}}
-	>
+	return (
 		<div
-			className={className}
+			{...rest}
+			data-disabled={disabled || undefined}
+			data-panel
+			data-testid={id}
+			id={id}
+			ref={mergedRef}
 			style={{
-				maxHeight: '100%',
-				maxWidth: '100%',
-				flexGrow: 1,
-				overflow: 'auto',
-				...style,
-				touchAction: orientation === 'horizontal' ? 'pan-y' : 'pan-x',
+				...PROHIBITED_CSS_PROPERTIES,
+				display: 'flex',
+				flexBasis: 0,
+				flexShrink: 1,
+				overflow: 'visible',
+				...panelStyles,
 			}}
-		>{children}</div>
-	</div>;
+		>
+			<div
+				className={className}
+				style={{
+					maxHeight: '100%',
+					maxWidth: '100%',
+					flexGrow: 1,
+					overflow: 'auto',
+					...style,
+					touchAction: orientation === 'horizontal' ? 'pan-y' : 'pan-x',
+				}}
+			>
+				{children}
+			</div>
+		</div>
+	);
 }
 
 (Panel as { displayName?: string }).displayName = 'Panel';

package/src/components/separator/Separator.tsrx

@@ -42,8 +42,7 @@ export function Separator(props: SeparatorProps) @{
 		registerSeparator,
 		updateSeparatorProps,
 	} = useGroupContext();
-	const orientation =
-		groupOrientation === 'horizontal' ? 'vertical' : 'horizontal';
+	const orientation = groupOrientation === 'horizontal' ? 'vertical' : 'horizontal';
 
 	useIsomorphicLayoutEffect(() => {
 		const element = elementRef.current;
@@ -58,7 +57,7 @@ export function Separator(props: SeparatorProps) @{
 		const removeInteractionListener = subscribeToInteractionState((event) => {
 			setDragState(
 				event.next.state !== 'inactive' &&
-				event.next.hitRegions.some((region) => region.separator === separator)
+					event.next.hitRegions.some((region) => region.separator === separator)
 					? event.next.state
 					: 'inactive',
 			);
@@ -85,42 +84,49 @@ export function Separator(props: SeparatorProps) @{
 		};
 	}, [groupId, id, registerSeparator, stableProps]);
 
-	useEffect(() => updateSeparatorProps(id, { disabled, disableDoubleClick }), [
-		disabled,
-		disableDoubleClick,
-		id,
-		updateSeparatorProps,
-	]);
-	const cursor =
-		disabled && !disableCursor ? 'not-allowed' : undefined;
-	const dataSeparator =
-		disabled
-			? 'disabled'
-			: dragState === 'active'
-				? 'active'
-				: isFocused
-					? 'focus'
-					: dragState;
+	useEffect(
+		() => updateSeparatorProps(id, { disabled, disableDoubleClick }),
+		[disabled, disableDoubleClick, id, updateSeparatorProps],
+	);
+	const cursor = disabled && !disableCursor ? 'not-allowed' : undefined;
+	const dataSeparator = disabled
+		? 'disabled'
+		: dragState === 'active'
+			? 'active'
+			: isFocused
+				? 'focus'
+				: dragState;
 
-	return <div
-		{...rest}
-		aria-controls={aria.valueControls}
-		aria-disabled={disabled || undefined}
-		aria-orientation={orientation}
-		aria-valuemax={aria.valueMax}
-		aria-valuemin={aria.valueMin}
-		aria-valuenow={aria.valueNow}
-		className={className}
-		data-separator={dataSeparator}
-		data-testid={id}
-		id={id}
-		onBlur={() => setIsFocused(false)}
-		onFocus={() => setIsFocused(true)}
-		ref={mergedRef}
-		role="separator"
-		style={{ flexBasis: 'auto', cursor, ...style, flexGrow: 0, flexShrink: 0, touchAction: 'none' }}
-		tabIndex={disabled ? undefined : 0}
-	>{children}</div>;
+	return (
+		<div
+			{...rest}
+			aria-controls={aria.valueControls}
+			aria-disabled={disabled || undefined}
+			aria-orientation={orientation}
+			aria-valuemax={aria.valueMax}
+			aria-valuemin={aria.valueMin}
+			aria-valuenow={aria.valueNow}
+			className={className}
+			data-separator={dataSeparator}
+			data-testid={id}
+			id={id}
+			onBlur={() => setIsFocused(false)}
+			onFocus={() => setIsFocused(true)}
+			ref={mergedRef}
+			role="separator"
+			style={{
+				flexBasis: 'auto',
+				cursor,
+				...style,
+				flexGrow: 0,
+				flexShrink: 0,
+				touchAction: 'none',
+			}}
+			tabIndex={disabled ? undefined : 0}
+		>
+			{children}
+		</div>
+	);
 }
 
 (Separator as { displayName?: string }).displayName = 'Separator';

package/src/index.tsrx

@@ -7,6 +7,20 @@ export { useDefaultLayout } from './components/group/useDefaultLayout';
 export { usePanelCallbackRef } from './components/panel/usePanelCallbackRef';
 export { usePanelRef } from './components/panel/usePanelRef';
 export { isCoarsePointer } from './global/utils/isCoarsePointer';
-export type { GroupImperativeHandle, GroupProps, Layout, LayoutChangedMeta, LayoutStorage, OnGroupLayoutChange, Orientation } from './components/group/types';
-export type { OnPanelResize, PanelImperativeHandle, PanelProps, PanelSize, SizeUnit } from './components/panel/types';
+export type {
+	GroupImperativeHandle,
+	GroupProps,
+	Layout,
+	LayoutChangedMeta,
+	LayoutStorage,
+	OnGroupLayoutChange,
+	Orientation,
+} from './components/group/types';
+export type {
+	OnPanelResize,
+	PanelImperativeHandle,
+	PanelProps,
+	PanelSize,
+	SizeUnit,
+} from './components/panel/types';
 export type { SeparatorProps } from './components/separator/types';