@octanejs/base-ui 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/base-ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -41,10 +41,10 @@
     "@floating-ui/utils": "^0.2.12",
     "aria-hidden": "^1.2.6",
     "tabbable": "^6.5.0",
-    "@octanejs/floating-ui": "0.1.22"
+    "@octanejs/floating-ui": "0.1.23"
   },
   "peerDependencies": {
-    "octane": "0.1.23"
+    "octane": "0.1.24"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",
@@ -53,7 +53,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.23"
+    "octane": "0.1.24"
   },
   "scripts": {
     "test": "vitest run"

package/src/checkbox.ts

@@ -12,6 +12,7 @@
 import {
 	createContext,
 	createElement,
+	Fragment,
 	useContext,
 	useEffect,
 	useLayoutEffect,
@@ -499,7 +500,13 @@ function CheckboxRoot(props: CheckboxRootProps): any {
 
 	return createElement(CheckboxRootContext.Provider, {
 		value: state,
-		children: [element, hiddenValueInput, createElement('input', inputProps)],
+		// Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+		// values that cannot be keyed in place go through a keyed Fragment.
+		children: [
+			createElement(Fragment, { key: 'element', children: element }),
+			createElement(Fragment, { key: 'hidden-value', children: hiddenValueInput }),
+			createElement('input', { key: 'input', ...inputProps }),
+		],
 	});
 }
 

package/src/dialog.ts

@@ -634,14 +634,18 @@ function DialogPortal(props: any): any {
 		value: keepMounted,
 		children: createElement(FloatingPortal, {
 			container,
+			// Octane reconciles an ARRAY child as a keyed list, so every entry needs a key —
+			// including the consumer's, which is why it goes through a keyed Fragment rather than
+			// being keyed in place. Same shape as the Popup path below.
 			children: [
 				mounted && modal === true
 					? createElement(InternalBackdrop, {
+							key: 'internal-backdrop',
 							ref: store.context.internalBackdropRef,
 							inert: inertValue(!open),
 						})
 					: null,
-				children,
+				createElement(Fragment, { key: 'children', children }),
 			],
 		}),
 	});

package/src/meter.ts

@@ -5,7 +5,7 @@
 // A meter visualizes a value within a known range. `Meter.Root` (`role="meter"`) owns
 // the range math and screen-reader aria; `Track`/`Indicator` draw the bar; `Value`/`Label`
 // render text. Base UI uses a PLAIN React context — ported as a plain octane createContext.
-import { createContext, createElement, useContext, useMemo, useState } from 'octane';
+import { createContext, createElement, Fragment, useContext, useMemo, useState } from 'octane';
 
 import { S, subSlot } from './internal';
 import { useRenderElement, type RenderProp } from './utils/useRenderElement';
@@ -98,10 +98,17 @@ function MeterRoot(props: MeterRootProps): any {
 		'aria-valuenow': clampedValue,
 		'aria-valuetext': ariaValuetext,
 		role: 'meter',
+		// Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+		// values that cannot be keyed in place go through a keyed Fragment.
 		children: [
-			children,
+			createElement(Fragment, { key: 'children', children }),
 			// force NVDA to read the label (mui/base-ui#4184)
-			createElement('span', { role: 'presentation', style: visuallyHidden, children: 'x' }),
+			createElement('span', {
+				key: 'sr-hint',
+				role: 'presentation',
+				style: visuallyHidden,
+				children: 'x',
+			}),
 		],
 	};
 

package/src/number-field.ts

@@ -11,6 +11,7 @@
 import {
 	createContext,
 	createElement,
+	Fragment,
 	useContext,
 	useEffect,
 	useLayoutEffect,
@@ -482,7 +483,12 @@ function NumberFieldRoot(props: any): any {
 
 	return createElement(NumberFieldRootContext.Provider, {
 		value: contextValue,
-		children: [element, hiddenInput],
+		// Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+		// values that cannot be keyed in place go through a keyed Fragment.
+		children: [
+			createElement(Fragment, { key: 'element', children: element }),
+			createElement(Fragment, { key: 'hidden-input', children: hiddenInput }),
+		],
 	});
 }
 

package/src/popover.ts

@@ -879,15 +879,18 @@ function PopoverPositioner(componentProps: any): any {
 
 	return createElement(PopoverPositionerContext.Provider, {
 		value: positioning as unknown as PopoverPositionerContextValue,
+		// Octane reconciles an ARRAY child as a keyed list, so both slots carry a key. Only the
+		// modal path renders the backdrop, which is why a non-modal popover never warned.
 		children: [
 			mounted && modal === true && openReason !== REASONS.triggerHover
 				? createElement(InternalBackdrop, {
+						key: 'internal-backdrop',
 						ref: store.context.internalBackdropRef,
 						inert: inertValue(!open),
 						cutout: triggerElement,
 					})
 				: null,
-			createElement(FloatingNode, { id: nodeId, children: element }),
+			createElement(FloatingNode, { key: 'floating-node', id: nodeId, children: element }),
 		],
 	});
 }

package/src/progress.ts

@@ -7,7 +7,7 @@
 // the `status` state ('indeterminate' | 'progressing' | 'complete') is exposed on every
 // part as `data-progressing`/`data-complete`/`data-indeterminate`. Base UI uses a PLAIN
 // React context — ported as a plain octane createContext.
-import { createContext, createElement, useContext, useMemo, useState } from 'octane';
+import { createContext, createElement, Fragment, useContext, useMemo, useState } from 'octane';
 
 import { S, subSlot } from './internal';
 import { useRenderElement, type RenderProp } from './utils/useRenderElement';
@@ -129,9 +129,16 @@ function ProgressRoot(props: ProgressRootProps): any {
 		'aria-valuenow': value ?? undefined,
 		'aria-valuetext': getAriaValueText(formattedValue, value),
 		role: 'progressbar',
+		// Array children reconcile as a keyed list in octane, so both slots carry a key. The
+		// consumer's go through a keyed Fragment because they cannot be keyed in place.
 		children: [
-			children,
-			createElement('span', { role: 'presentation', style: visuallyHidden, children: 'x' }),
+			createElement(Fragment, { key: 'children', children }),
+			createElement('span', {
+				key: 'sr-hint',
+				role: 'presentation',
+				style: visuallyHidden,
+				children: 'x',
+			}),
 		],
 	};
 

package/src/radio.ts

@@ -6,7 +6,15 @@
 // for roving focus when inside a <RadioGroup>). octane adaptations mirror Switch/Checkbox:
 // native events; the hidden input takes the live `checked` prop (octane inputs are CONTROLLED
 // exactly like React's) with native click dispatch.
-import { createContext, createElement, useContext, useLayoutEffect, useMemo, useRef } from 'octane';
+import {
+	createContext,
+	createElement,
+	Fragment,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'octane';
 
 import { S, subSlot } from './internal';
 import { useRenderElement, type RenderProp } from './utils/useRenderElement';
@@ -318,7 +326,12 @@ function RadioRoot(props: RadioRootProps): any {
 
 	return createElement(RadioRootContext.Provider, {
 		value: state,
-		children: [rendered, createElement('input', inputProps)],
+		// Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+		// values that cannot be keyed in place go through a keyed Fragment.
+		children: [
+			createElement(Fragment, { key: 'rendered', children: rendered }),
+			createElement('input', { key: 'input', ...inputProps }),
+		],
 	});
 }
 

package/src/slider.ts

@@ -17,6 +17,7 @@
 import {
 	createContext,
 	createElement,
+	Fragment,
 	useContext,
 	useEffect,
 	useLayoutEffect,
@@ -1460,7 +1461,7 @@ function SliderThumb(componentProps: any): any {
 		subSlot(slot, 'inputRefs'),
 	);
 
-	const inputElement = createElement('input', { ...inputProps, ref: mergedInputRef });
+	const inputElement = createElement('input', { key: 'input', ...inputProps, ref: mergedInputRef });
 
 	return useRenderElement(
 		'div',
@@ -1471,7 +1472,12 @@ function SliderThumb(componentProps: any): any {
 			props: [
 				{
 					['data-index']: index,
-					children: [childrenProp, inputElement],
+					// Keyed for the same reason as dialog and progress: octane reconciles an array
+					// child as a keyed list, and the consumer's children cannot be keyed in place.
+					children: [
+						createElement(Fragment, { key: 'children', children: childrenProp }),
+						inputElement,
+					],
 					id,
 					onBlur: onBlurProp,
 					onFocus: onFocusProp,

package/src/switch.ts

@@ -8,7 +8,15 @@
 // are CONTROLLED exactly like React's (property-driven, reasserted on every commit and after
 // discrete events; only the INITIAL checked reflects to the attribute). Field/Form
 // integration is inert when standalone (default contexts).
-import { createContext, createElement, useContext, useLayoutEffect, useMemo, useRef } from 'octane';
+import {
+	createContext,
+	createElement,
+	Fragment,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'octane';
 
 import { S, subSlot } from './internal';
 import { useRenderElement, type RenderProp } from './utils/useRenderElement';
@@ -322,7 +330,13 @@ function SwitchRoot(props: SwitchRootProps): any {
 
 	return createElement(SwitchRootContext.Provider, {
 		value: state,
-		children: [element, hiddenValueInput, createElement('input', inputProps)],
+		// Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+		// values that cannot be keyed in place go through a keyed Fragment.
+		children: [
+			createElement(Fragment, { key: 'element', children: element }),
+			createElement(Fragment, { key: 'hidden-value', children: hiddenValueInput }),
+			createElement('input', { key: 'input', ...inputProps }),
+		],
 	});
 }
 

package/src/utils/FloatingPortalLite.ts

@@ -24,6 +24,11 @@ export function FloatingPortalLite(componentProps: any): any {
 	}
 
 	return createElement(Fragment, {
-		children: [portalSubtree, portalNode ? createPortal(children, portalNode) : null],
+		children: [
+			createElement(Fragment, { key: 'subtree', children: portalSubtree }),
+			portalNode
+				? createElement(Fragment, { key: 'portal', children: createPortal(children, portalNode) })
+				: null,
+		],
 	});
 }

package/src/utils/floating/FloatingFocusManager.ts

@@ -4,7 +4,7 @@
 // every hook threads an explicit slot; returns `[beforeGuard?, children, afterGuard?]`. Traps focus
 // inside the popup, hides the rest of the page from assistive tech (`markOthers`), restores focus on
 // close. Emits `data-base-ui-*` attributes for parity with Base UI.
-import { createElement, useState, useRef, useEffect, useLayoutEffect } from 'octane';
+import { createElement, Fragment, useState, useRef, useEffect, useLayoutEffect } from 'octane';
 import { getNodeName, isHTMLElement } from '@floating-ui/utils/dom';
 
 import { S, subSlot } from '../../internal';
@@ -786,9 +786,12 @@ export function FloatingFocusManager(props: {
 	const shouldRenderGuards =
 		!disabled && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
 
+	// Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key; the
+	// consumer's children go through a keyed Fragment, matching popover's trigger guards.
 	return [
 		shouldRenderGuards
 			? createElement(FocusGuard, {
+					key: 'guard-inside-before',
 					'data-type': 'inside',
 					ref: mergedBeforeGuardRef,
 					onFocus(event: any) {
@@ -807,9 +810,10 @@ export function FloatingFocusManager(props: {
 					},
 				})
 			: null,
-		children,
+		createElement(Fragment, { key: 'children', children }),
 		shouldRenderGuards
 			? createElement(FocusGuard, {
+					key: 'guard-inside-after',
 					'data-type': 'inside',
 					ref: mergedAfterGuardRef,
 					onFocus(event: any) {

package/src/utils/floating/FloatingPortal.ts

@@ -5,6 +5,7 @@
 import {
 	createContext,
 	createElement,
+	Fragment,
 	createPortal,
 	useContext,
 	useState,
@@ -219,13 +220,17 @@ export function FloatingPortal(componentProps: any): any {
 		subSlot(slot, 'ctx'),
 	);
 
+	// Octane reconciles an ARRAY child as a keyed list, so every entry below carries a stable key.
+	// The slots are positional and fixed, so literal keys are correct here.
 	return [
-		portalSubtree,
+		createElement(Fragment, { key: 'portal-subtree', children: portalSubtree }),
 		createElement(PortalContext.Provider, {
+			key: 'portal-context',
 			value: portalContextValue,
 			children: [
 				shouldRenderGuards && portalNode
 					? createElement(FocusGuard, {
+							key: 'guard-before',
 							'data-type': 'outside',
 							ref: beforeOutsideRef,
 							onFocus(event: any) {
@@ -239,11 +244,18 @@ export function FloatingPortal(componentProps: any): any {
 						})
 					: null,
 				shouldRenderGuards && portalNode
-					? createElement('span', { 'aria-owns': portalNode.id, style: ownerVisuallyHidden })
+					? createElement('span', {
+							key: 'aria-owns',
+							'aria-owns': portalNode.id,
+							style: ownerVisuallyHidden,
+						})
+					: null,
+				portalNode
+					? createElement(Fragment, { key: 'portal', children: createPortal(children, portalNode) })
 					: null,
-				portalNode ? createPortal(children, portalNode) : null,
 				shouldRenderGuards && portalNode
 					? createElement(FocusGuard, {
+							key: 'guard-after',
 							'data-type': 'outside',
 							ref: afterOutsideRef,
 							onFocus(event: any) {