@octanejs/base-ui 0.1.1 → 0.1.3

package/src/field.ts

@@ -4,8 +4,8 @@
 //
 // Field groups a control with its label/description/error and runs validation. The default
 // (inert) field contexts are overridden here by the real providers. octane adaptations:
-// native events; forwardRef → ref-as-prop; the text-input value adaptation (initial value →
-// the `value` ATTRIBUTE; controlled value driven via the property).
+// native events; forwardRef → ref-as-prop. The control's `value`/`defaultValue` pass straight
+// through — octane inputs are CONTROLLED exactly like React's.
 import {
 	createContext,
 	createElement,
@@ -20,7 +20,7 @@ import {
 
 import { S, subSlot } from './internal';
 import { useRenderElement, type RenderProp } from './utils/useRenderElement';
-import { ownerDocument, ownerWindow } from './utils/owner';
+import { ownerDocument } from './utils/owner';
 import { createChangeEventDetails, REASONS } from './utils/createChangeEventDetails';
 import { useControlled } from './utils/useControlled';
 import { useStableCallback } from './utils/useStableCallback';
@@ -341,32 +341,6 @@ function FieldControl(props: any): any {
 	const isControlled = valueProp !== undefined;
 	const value = isControlled ? valueUnwrapped : undefined;
 
-	// octane text-input adaptation: the INITIAL value is the `value` ATTRIBUTE; a controlled
-	// value is driven imperatively via the property.
-	const initialValueRef = useRef(
-		isControlled ? value : defaultValue,
-		subSlot(slot, 'initialValue'),
-	);
-
-	useLayoutEffect(
-		() => {
-			if (!isControlled) {
-				return;
-			}
-			const input = validation.inputRef.current;
-			if (!input) {
-				return;
-			}
-			const setNativeValue = Object.getOwnPropertyDescriptor(
-				ownerWindow(input).HTMLInputElement.prototype,
-				'value',
-			)?.set;
-			setNativeValue?.call(input, value ?? '');
-		},
-		[isControlled, value],
-		subSlot(slot, 'e:syncValue'),
-	);
-
 	const getValueFromInput = useStableCallback(
 		() => validation.inputRef.current?.value,
 		subSlot(slot, 'getValue'),
@@ -396,7 +370,7 @@ function FieldControl(props: any): any {
 					ref: validation.inputRef,
 					'aria-labelledby': labelId,
 					autoFocus: autoFocus || undefined,
-					value: initialValueRef.current,
+					...(isControlled ? { value } : { defaultValue }),
 					onChange(event: any) {
 						const inputValue = event.currentTarget.value;
 						onValueChange?.(inputValue, createChangeEventDetails(REASONS.none, event));

package/src/index.ts

@@ -3,9 +3,11 @@
 // (`@octanejs/base-ui/separator`, `@octanejs/base-ui/use-render`, …). This barrel
 // re-exports the public surface for convenience as components land.
 export { Separator } from './separator';
+export { AlertDialog } from './alert-dialog';
 export { Avatar } from './avatar';
 export { Checkbox } from './checkbox';
 export { CheckboxGroup } from './checkbox-group';
+export { Dialog } from './dialog';
 export { Field } from './field';
 export { Fieldset } from './fieldset';
 export { Form } from './form';
@@ -15,6 +17,7 @@ export { NumberField } from './number-field';
 export { Progress } from './progress';
 export { Radio } from './radio';
 export { RadioGroup } from './radio-group';
+export { Popover } from './popover';
 export { Slider } from './slider';
 export { Switch } from './switch';
 export { Toggle } from './toggle';

package/src/number-field.ts

@@ -3,10 +3,11 @@
 // decrement/NumberFieldDecrement, root/useNumberFieldButton + useNumberFieldStepperButton, and
 // utils/stateAttributesMapping — plus its `index.parts` (the `NumberField` namespace).
 //
-// octane adaptations: native events (no `.nativeEvent`); forwardRef → ref-as-prop; the
-// text-input value adaptation (initial value → the `value` ATTRIBUTE; the live value driven via
-// the `.value` PROPERTY). The scrub area + press-and-hold auto-repeat are deferred (see
-// `usePressAndHold` stub). Field/Form integration is inert when standalone.
+// octane adaptations: native events (no `.nativeEvent`); forwardRef → ref-as-prop. The visible
+// and hidden inputs take live controlled `value` props — octane inputs are CONTROLLED exactly
+// like React's (property-driven, reasserted on every commit and after discrete events). The
+// scrub area + press-and-hold auto-repeat are deferred (see `usePressAndHold` stub).
+// Field/Form integration is inert when standalone.
 import {
 	createContext,
 	createElement,
@@ -29,7 +30,7 @@ import { useValueChanged } from './utils/useValueChanged';
 import { useForcedRerendering } from './utils/useForcedRerendering';
 import { addEventListener } from './utils/addEventListener';
 import { platform } from './utils/platform';
-import { ownerDocument, ownerWindow } from './utils/owner';
+import { ownerDocument } from './utils/owner';
 import { visuallyHidden, visuallyHiddenInput } from './utils/visuallyHidden';
 import { stopEvent } from './utils/composite/list-utils';
 import { useButton } from './utils/useButton';
@@ -212,9 +213,6 @@ function NumberFieldRoot(props: any): any {
 	);
 	const [inputMode, setInputMode] = useState<InputMode>('numeric', subSlot(slot, 'inputMode'));
 
-	// octane: reflect the INITIAL numeric value as the hidden input's `value` ATTRIBUTE.
-	const initialHiddenValueRef = useRef(value ?? '', subSlot(slot, 'initialHidden'));
-
 	const getAllowedNonNumericKeys = useStableCallback(
 		() => {
 			const { decimal, group, currency, literal } = getNumberLocaleDetails(locale, format);
@@ -467,8 +465,7 @@ function NumberFieldRoot(props: any): any {
 		type: 'number',
 		form,
 		name,
-		// octane: initial value → attribute; live value driven via the property (sync effect below).
-		value: initialHiddenValueRef.current,
+		value: value ?? '',
 		min,
 		max,
 		step: stepProp,
@@ -480,21 +477,6 @@ function NumberFieldRoot(props: any): any {
 		style: name ? visuallyHiddenInput : visuallyHidden,
 	});
 
-	// octane: drive the hidden input's live `.value` PROPERTY.
-	useLayoutEffect(
-		() => {
-			const el = validation.inputRef.current ?? inputRef.current;
-			if (!el) return;
-			const setNativeValue = Object.getOwnPropertyDescriptor(
-				ownerWindow(el).HTMLInputElement.prototype,
-				'value',
-			)?.set;
-			setNativeValue?.call(el, value ?? '');
-		},
-		[value],
-		subSlot(slot, 'e:syncHidden'),
-	);
-
 	return createElement(NumberFieldRootContext.Provider, {
 		value: contextValue,
 		children: [element, hiddenInput],
@@ -558,9 +540,6 @@ function NumberFieldInput(props: any): any {
 	const blockRevalidationRef = useRef(false, subSlot(slot, 'blockReval'));
 	const pendingCaretRef = useRef<number | null>(null, subSlot(slot, 'caret'));
 
-	// octane: reflect the INITIAL formatted text as the `value` ATTRIBUTE; live via the property.
-	const initialInputValueRef = useRef(inputValue, subSlot(slot, 'initialInput'));
-
 	useRegisterFieldControl(
 		inputRef,
 		id,
@@ -583,21 +562,6 @@ function NumberFieldInput(props: any): any {
 		subSlot(slot, 'e:caret'),
 	);
 
-	// octane: drive the visible input's live `.value` PROPERTY (matches React's controlled input).
-	useLayoutEffect(
-		() => {
-			const el = inputRef.current;
-			if (!el) return;
-			const setNativeValue = Object.getOwnPropertyDescriptor(
-				ownerWindow(el).HTMLInputElement.prototype,
-				'value',
-			)?.set;
-			setNativeValue?.call(el, inputValue);
-		},
-		[inputValue],
-		subSlot(slot, 'e:syncValue'),
-	);
-
 	useValueChanged(
 		value,
 		() => {
@@ -617,8 +581,7 @@ function NumberFieldInput(props: any): any {
 		disabled,
 		readOnly,
 		inputMode,
-		// octane: initial formatted text → attribute; live value via the property (sync effect above).
-		value: initialInputValueRef.current,
+		value: inputValue,
 		type: 'text',
 		autoComplete: 'off',
 		autoCorrect: 'off',