@octanejs/base-ui 0.1.50 → 0.1.51

package/src/fieldset.ts

@@ -1,150 +0,0 @@
-// Ported from .base-ui/packages/react/src/fieldset/ (v1.6.0):
-//   index.ts / index.parts.ts (the `Fieldset` namespace),
-//   root/FieldsetRoot.tsx, root/FieldsetRootContext.ts, legend/FieldsetLegend.tsx.
-//
-// Groups a shared legend with related controls. `Fieldset.Root` renders a
-// `<fieldset>`; `Fieldset.Legend` renders a `<div>` whose generated id is fed back
-// into the root as `aria-labelledby`. Base UI uses a PLAIN React context here (not the
-// scoped-context factory) — ported as a plain octane createContext. octane is
-// ref-as-prop (React-19 shape), so `forwardRef` collapses to a `ref` prop.
-import {
-	createContext,
-	createElement,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useState,
-} from 'octane';
-
-import { S, splitSlot, subSlot } from './internal';
-import { useRenderElement, type RenderProp } from './utils/useRenderElement';
-import { useBaseUiId } from './utils/useBaseUiId';
-
-// --- Context -----------------------------------------------------------------
-
-export interface FieldsetRootContextValue {
-	legendId: string | undefined;
-	setLegendId: (id: string | undefined) => void;
-	disabled: boolean | undefined;
-}
-
-const FieldsetRootContext = createContext<FieldsetRootContextValue | undefined>(undefined);
-
-export function useFieldsetRootContext(optional: true): FieldsetRootContextValue | undefined;
-export function useFieldsetRootContext(optional?: false): FieldsetRootContextValue;
-export function useFieldsetRootContext(optional = false): FieldsetRootContextValue | undefined {
-	// octane context reads are not slot-threaded (see runtime `useContext`).
-	const context = useContext(FieldsetRootContext);
-	if (!context && !optional) {
-		throw new Error(
-			'Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>.',
-		);
-	}
-	return context;
-}
-
-// --- Root --------------------------------------------------------------------
-
-export interface FieldsetRootState {
-	/** Whether the component should ignore user interaction. */
-	disabled: boolean;
-}
-
-export interface FieldsetRootProps {
-	disabled?: boolean;
-	className?: string | ((state: FieldsetRootState) => string | undefined);
-	render?: RenderProp<FieldsetRootState>;
-	style?: Record<string, any> | ((state: FieldsetRootState) => Record<string, any> | undefined);
-	ref?: any;
-	[key: string]: any;
-}
-
-function FieldsetRoot(props: FieldsetRootProps): any {
-	const slot = S('FieldsetRoot');
-	const { render, className, style, disabled: disabledProp = false, ref, ...elementProps } = props;
-
-	const [legendId, setLegendId] = useState<string | undefined>(
-		undefined,
-		subSlot(slot, 'legendId'),
-	);
-
-	const parentDisabled = useFieldsetRootContext(true)?.disabled;
-	const disabled = parentDisabled || disabledProp;
-
-	const state: FieldsetRootState = { disabled };
-
-	const element = useRenderElement(
-		'fieldset',
-		{ render, className, style },
-		{
-			ref,
-			state,
-			props: [{ 'aria-labelledby': legendId, disabled }, elementProps],
-		},
-		subSlot(slot, 're'),
-	);
-
-	const contextValue: FieldsetRootContextValue = useMemo(
-		() => ({ legendId, setLegendId, disabled }),
-		[legendId, setLegendId, disabled],
-		subSlot(slot, 'ctx'),
-	);
-
-	return createElement(FieldsetRootContext.Provider, { value: contextValue, children: element });
-}
-
-// --- Legend ------------------------------------------------------------------
-
-export interface FieldsetLegendState {
-	/** Whether the component should ignore user interaction. */
-	disabled: boolean;
-}
-
-export interface FieldsetLegendProps {
-	id?: string;
-	className?: string | ((state: FieldsetLegendState) => string | undefined);
-	render?: RenderProp<FieldsetLegendState>;
-	style?: Record<string, any> | ((state: FieldsetLegendState) => Record<string, any> | undefined);
-	ref?: any;
-	[key: string]: any;
-}
-
-function FieldsetLegend(props: FieldsetLegendProps): any {
-	const slot = S('FieldsetLegend');
-	const { render, className, style, id: idProp, ref, ...elementProps } = props;
-
-	const { disabled, setLegendId } = useFieldsetRootContext();
-
-	const id = useBaseUiId(idProp, subSlot(slot, 'id'));
-
-	useLayoutEffect(
-		() => {
-			setLegendId(id);
-			return () => {
-				setLegendId(undefined);
-			};
-		},
-		[setLegendId, id],
-		subSlot(slot, 'e:legendId'),
-	);
-
-	const state: FieldsetLegendState = { disabled: disabled ?? false };
-
-	return useRenderElement(
-		'div',
-		{ render, className, style },
-		{
-			state,
-			ref,
-			props: [{ id }, elementProps],
-		},
-		subSlot(slot, 're'),
-	);
-}
-
-// --- Namespace (mirrors `export * as Fieldset`) ------------------------------
-
-export const Fieldset = {
-	Root: FieldsetRoot,
-	Legend: FieldsetLegend,
-};

package/src/form.ts

@@ -1,183 +0,0 @@
-// Ported from .base-ui/packages/react/src/form/Form.tsx (v1.6.0). A `<form noValidate>` with
-// consolidated error handling: provides the real FormContext (field registry + errors), runs
-// submit-time validation, and focuses the first invalid control. octane: native events;
-// forwardRef → ref-as-prop.
-import { createElement, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'octane';
-
-import { S, subSlot } from './internal';
-import { useRenderElement, type RenderProp } from './utils/useRenderElement';
-import { useStableCallback } from './utils/useStableCallback';
-import { useValueChanged } from './utils/useValueChanged';
-import { FormContext, type FormContextValue, type Errors } from './utils/field/FormContext';
-import { createChangeEventDetails, REASONS } from './utils/createChangeEventDetails';
-import type { FormValidationMode } from './utils/field/constants';
-
-export interface FormProps {
-	validationMode?: FormValidationMode;
-	errors?: Errors;
-	onSubmit?: (event: any) => void;
-	onFormSubmit?: (formValues: Record<string, any>, eventDetails: any) => void;
-	actionsRef?: any;
-	render?: RenderProp<Record<string, never>>;
-	className?: string | ((state: Record<string, never>) => string | undefined);
-	style?: Record<string, any>;
-	ref?: any;
-	[key: string]: any;
-}
-
-function Form(props: FormProps): any {
-	const slot = S('Form');
-	const {
-		render,
-		className,
-		validationMode = 'onSubmit',
-		errors: externalErrors,
-		onSubmit,
-		onFormSubmit,
-		actionsRef,
-		style,
-		ref,
-		...elementProps
-	} = props;
-
-	const formRef = useRef<{ fields: Map<string, any> }>(
-		{ fields: new Map() },
-		subSlot(slot, 'formRef'),
-	);
-	const submittedRef = useRef(false, subSlot(slot, 'submitted'));
-	const submitAttemptedRef = useRef(false, subSlot(slot, 'attempted'));
-
-	const focusControl = useStableCallback(
-		(control: HTMLElement | null) => {
-			if (!control) {
-				return;
-			}
-			control.focus();
-			if (control.tagName === 'INPUT') {
-				(control as HTMLInputElement).select();
-			}
-		},
-		subSlot(slot, 'focusControl'),
-	);
-
-	const [errors, setErrors] = useState<Errors | undefined>(externalErrors, subSlot(slot, 'errors'));
-
-	useValueChanged(
-		externalErrors,
-		() => {
-			setErrors(externalErrors);
-		},
-		subSlot(slot, 'errorsChanged'),
-	);
-
-	useEffect(
-		() => {
-			if (!submittedRef.current) {
-				return;
-			}
-			submittedRef.current = false;
-			const invalidFields = Array.from(formRef.current.fields.values()).filter(
-				(field: any) => field.validityData.state.valid === false,
-			);
-			if (invalidFields.length) {
-				focusControl(invalidFields[0].controlRef.current);
-			}
-		},
-		[errors, focusControl],
-		subSlot(slot, 'e:focus'),
-	);
-
-	const handleImperativeValidate = useStableCallback(
-		(fieldName?: string) => {
-			const values = Array.from(formRef.current.fields.values());
-			if (fieldName) {
-				const namedField = values.find((field: any) => field.name === fieldName);
-				if (namedField) {
-					(namedField as any).validate();
-				}
-			} else {
-				values.forEach((field: any) => {
-					field.validate();
-				});
-			}
-		},
-		subSlot(slot, 'imperativeValidate'),
-	);
-
-	useImperativeHandle(
-		actionsRef,
-		() => ({ validate: handleImperativeValidate }),
-		[handleImperativeValidate],
-		subSlot(slot, 'imperative'),
-	);
-
-	const element = useRenderElement(
-		'form',
-		{ render, className, style },
-		{
-			ref,
-			props: [
-				{
-					noValidate: true,
-					onSubmit(event: any) {
-						submitAttemptedRef.current = true;
-						let values = Array.from(formRef.current.fields.values());
-						values.forEach((field: any) => {
-							field.validate();
-						});
-						values = Array.from(formRef.current.fields.values());
-						const invalidField = values.find(
-							(field: any) => field.validityData.state.valid === false,
-						);
-						if (invalidField) {
-							event.preventDefault();
-							focusControl((invalidField as any).controlRef.current);
-						} else {
-							submittedRef.current = true;
-							onSubmit?.(event);
-							if (onFormSubmit) {
-								event.preventDefault();
-								const formValues = values.reduce((acc: Record<string, any>, field: any) => {
-									if (field.name) {
-										acc[field.name] = field.getValue();
-									}
-									return acc;
-								}, {});
-								onFormSubmit(formValues, createChangeEventDetails(REASONS.none, event));
-							}
-						}
-					},
-				},
-				elementProps,
-			],
-		},
-		subSlot(slot, 're'),
-	);
-
-	const clearErrors = useStableCallback(
-		(name: string | undefined) => {
-			if (name && errors && Object.prototype.hasOwnProperty.call(errors, name)) {
-				const nextErrors = { ...errors };
-				delete nextErrors[name];
-				setErrors(nextErrors);
-			}
-		},
-		subSlot(slot, 'clearErrors'),
-	);
-
-	const contextValue: FormContextValue = useMemo(
-		() => ({
-			formRef,
-			validationMode,
-			errors: errors ?? {},
-			clearErrors,
-			submitAttemptedRef,
-		}),
-		[formRef, validationMode, errors, clearErrors],
-		subSlot(slot, 'ctx'),
-	);
-
-	return createElement(FormContext.Provider, { value: contextValue, children: element });
-}
-
-export { Form };

package/src/input.ts

@@ -1,9 +0,0 @@
-// Ported from .base-ui/packages/react/src/input/Input.tsx (v1.6.0). A native `<input>` that
-// works with Field out of the box — literally `<Field.Control/>`.
-import { createElement } from 'octane';
-
-import { Field } from './field';
-
-export function Input(props: any): any {
-	return createElement(Field.Control, props);
-}

package/src/internal.ts

@@ -1,29 +0,0 @@
-// Slot mechanics for @octanejs/base-ui's plain-`.ts` hooks. octane's compiler injects a
-// per-call-site Symbol slot as the trailing arg of every hook call in a compiled
-// `.tsx`/`.tsrx`. These hook files are published source (consumed from node_modules,
-// where the auto-slotting pass is skipped), so each hook receives the caller's slot as
-// its trailing argument and derives a distinct sub-slot for every base hook it composes.
-// (Same pattern as @octanejs/floating-ui and the other bindings.)
-
-import { subSlot } from 'octane';
-
-export { subSlot };
-
-// Split the compiler-injected trailing slot off a hook's args. Needed because the public
-// hooks take optional args, so the slot can't be located positionally.
-export function splitSlot(args: any[]): [any[], symbol | undefined] {
-	const tail = args[args.length - 1];
-	const slot = typeof tail === 'symbol' ? (tail as symbol) : undefined;
-	return [slot !== undefined ? args.slice(0, -1) : args, slot];
-}
-
-// A stable per-call-site slot for the binding's plain-`.ts` COMPONENTS (written with
-// createElement, not compiled, so they get no auto-injected slots). A component runs in
-// its OWN per-instance scope (componentSlot), so a globally stable Symbol.for(tag)
-// resolves to a distinct slot per instance.
-const sCache = new Map<string, symbol>();
-export function S(tag: string): symbol {
-	let sym = sCache.get(tag);
-	if (sym === undefined) sCache.set(tag, (sym = Symbol.for('@octanejs/base-ui:' + tag)));
-	return sym;
-}