@octanejs/base-ui 0.1.54 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/base-ui",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -430,11 +430,11 @@
   },
   "dependencies": {
     "@floating-ui/utils": "^0.2.12",
-    "@octanejs/base-ui-utils": "0.1.2",
-    "@octanejs/floating-ui": "0.1.54"
+    "@octanejs/base-ui-utils": "0.1.3",
+    "@octanejs/floating-ui": "0.1.55"
   },
   "peerDependencies": {
-    "octane": "^0.2.5 || ^0.3.0",
+    "octane": "^0.4.0",
     "date-fns": "^4.0.0",
     "@date-fns/tz": "^1.2.0",
     "luxon": "^3.7.2"
@@ -467,9 +467,9 @@
     "typescript-pristine-native": "npm:typescript@7.0.2",
     "jsdom": "27.4.0",
     "semver": "7.8.5",
-    "octane": "0.3.0",
-    "@octanejs/testing-library": "0.1.52",
-    "@octanejs/remix-router": "0.1.49"
+    "octane": "0.4.2",
+    "@octanejs/testing-library": "0.1.53",
+    "@octanejs/remix-router": "0.1.50"
   },
   "imports": {
     "#prehydration/tabs/indicator": {

package/src/combobox/value/ComboboxValue.tsrx

@@ -26,7 +26,7 @@ export function ComboboxValue(props: ComboboxValue.Props): React.ReactElement {
 	const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
 	const hasNullLabel = store.useState('hasNullItemLabel', shouldCheckNullItemLabel);
 
-	let children = null;
+	let children: React.OctaneNode = null;
 	if (typeof childrenProp === 'function' && !React.isChildrenBlock(childrenProp)) {
 		children = childrenProp(selectedValue);
 	} else if (childrenProp != null) {

package/src/drawer/popup/DrawerPopup.tsrx

@@ -234,7 +234,7 @@ export const DrawerPopup = function DrawerPopup(
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserver(measureHeight);
+		const resizeObserver = React.createResizeObserver(measureHeight);
 
 		resizeObserver.observe(popupElement);
 		return () => {

package/src/drawer/root/useDrawerSnapPoints.ts

@@ -109,7 +109,7 @@ export function useDrawerSnapPoints() {
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserver(measureViewportHeight);
+		const resizeObserver = React.createResizeObserver(measureViewportHeight);
 		resizeObserver.observe(viewportElement);
 		return () => {
 			resizeObserver.disconnect();

package/src/scroll-area/content/ScrollAreaContent.tsrx

@@ -23,32 +23,18 @@ export const ScrollAreaContent = function ScrollAreaContent(
 	const { render, className, style, ...elementProps } = componentProps;
 
 	const { computeThumbPosition } = useScrollAreaViewportContext();
-	const { hasMeasuredScrollbar, viewportState } = useScrollAreaRootContext();
+	const { viewportState } = useScrollAreaRootContext();
 
 	const contentWrapperRef = React.useRef<HTMLDivElement | null>(null);
-	const computeOnInitialResizeRef = React.useRef(hasMeasuredScrollbar);
 
 	useIsoLayoutEffect(() => {
 		if (typeof ResizeObserver === 'undefined') {
 			return undefined;
 		}
 
-		let hasInitialized = false;
-		const resizeObserver = new ResizeObserver(() => {
-			if (!hasInitialized) {
-				hasInitialized = true;
-
-				// ResizeObserver fires once upon observing. Skip that initial call to avoid
-				// double-calculating the thumb position on mount, unless the content mounted
-				// after the viewport's initial measurement (in which case this fire is what
-				// brings the overflow state in sync).
-				if (!computeOnInitialResizeRef.current) {
-					return;
-				}
-			}
-
-			computeThumbPosition();
-		});
+		// Deferred notifications can include a resize that happened after the mount
+		// measurement, so the first delivery must also recompute the current geometry.
+		const resizeObserver = React.createResizeObserver(computeThumbPosition);
 
 		if (contentWrapperRef.current) {
 			resizeObserver.observe(contentWrapperRef.current);

package/src/scroll-area/viewport/ScrollAreaViewport.tsrx

@@ -313,7 +313,7 @@ export const ScrollAreaViewport = function ScrollAreaViewport(
 		}
 
 		let hasInitialized = false;
-		const resizeObserver = new ResizeObserver(() => {
+		const resizeObserver = React.createResizeObserver(() => {
 			// Avoid duplicate mount-time recompute when observer data matches what the mount
 			// scheduling pass already measured. If dimensions changed before the first observer
 			// delivery, keep the recompute so overflow transitions stay in sync.

package/src/select/value/SelectValue.tsrx

@@ -49,7 +49,7 @@ export const SelectValue = function SelectValue(
 		placeholder: !hasSelectedValue,
 	};
 
-	let children = null;
+	let children: React.OctaneNode = null;
 	if (typeof childrenProp === 'function' && !React.isChildrenBlock(childrenProp)) {
 		children = childrenProp(value);
 	} else if (childrenProp != null) {

package/src/slider/thumb/SliderThumb.tsrx

@@ -259,7 +259,7 @@ export const SliderThumb = function SliderThumb(
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserverCtor(getInsetPosition);
+		const resizeObserver = React.createResizeObserver(getInsetPosition, ResizeObserverCtor);
 
 		resizeObserver.observe(control);
 		resizeObserver.observe(thumb);
@@ -375,7 +375,7 @@ export const SliderThumb = function SliderThumb(
 					event.stopPropagation();
 				}
 
-				let newValue = null;
+				let newValue: number | null = null;
 				let direction = 0;
 				let increment = event.shiftKey ? largeStep : step;
 				const roundedValue = roundValueToStep(thumbValue, step, min);

package/src/tabs/list/TabsList.tsrx

@@ -45,7 +45,7 @@ export const TabsList = function TabsList(
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserver(() => {
+		const resizeObserver = React.createResizeObserver(() => {
 			indicatorUpdateListenersRef.current.forEach((listener) => {
 				listener();
 			});

package/src/toast/content/ToastContent.tsrx

@@ -31,7 +31,7 @@ export const ToastContent = function ToastContent(
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserver(() => recalculateHeight(true));
+		const resizeObserver = React.createResizeObserver(() => recalculateHeight(true));
 		const mutationObserver = new MutationObserver(() => recalculateHeight(true));
 
 		resizeObserver.observe(node);