@octanejs/base-ui 0.1.50 → 0.1.52

package/src/progress.ts

@@ -1,267 +0,0 @@
-// Ported from .base-ui/packages/react/src/progress/ (v1.6.0): root/ProgressRoot,
-// root/ProgressRootContext, root/stateAttributesMapping, track/ProgressTrack,
-// indicator/ProgressIndicator, value/ProgressValue, label/ProgressLabel — plus its
-// `index.parts` (the `Progress` namespace).
-//
-// A progress bar. `Progress.Root` (`role="progressbar"`) owns the value/status and aria;
-// 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, Fragment, useContext, useMemo, useState } from 'octane';
-
-import { S, subSlot } from './internal';
-import { useRenderElement, type RenderProp } from './utils/useRenderElement';
-import type { StateAttributesMapping } from './utils/getStateAttributesProps';
-import { useRegisteredLabelId } from './utils/useRegisteredLabelId';
-import { useValueAsRef } from './utils/useValueAsRef';
-import { valueToPercent } from './utils/valueToPercent';
-import { formatNumberValue } from './utils/formatNumber';
-import { visuallyHidden } from './utils/visuallyHidden';
-
-export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
-
-export interface ProgressRootState {
-	status: ProgressStatus;
-}
-
-// Custom state→data-* mapping: `status` maps to a presence attribute per value, not the
-// default `data-status="<value>"`.
-const progressStateAttributesMapping: StateAttributesMapping<ProgressRootState> = {
-	status(value: ProgressStatus): Record<string, string> | null {
-		if (value === 'progressing') {
-			return { 'data-progressing': '' };
-		}
-		if (value === 'complete') {
-			return { 'data-complete': '' };
-		}
-		if (value === 'indeterminate') {
-			return { 'data-indeterminate': '' };
-		}
-		return null;
-	},
-};
-
-// --- Context -----------------------------------------------------------------
-
-export interface ProgressRootContextValue {
-	formattedValue: string;
-	max: number;
-	min: number;
-	value: number | null;
-	setLabelId: (id: string | undefined) => void;
-	state: ProgressRootState;
-	status: ProgressStatus;
-}
-
-const ProgressRootContext = createContext<ProgressRootContextValue | undefined>(undefined);
-
-function useProgressRootContext(): ProgressRootContextValue {
-	const context = useContext(ProgressRootContext);
-	if (context === undefined) {
-		throw new Error(
-			'Base UI: ProgressRootContext is missing. Progress parts must be placed within <Progress.Root>.',
-		);
-	}
-	return context;
-}
-
-function getDefaultAriaValueText(formattedValue: string | null, value: number | null): string {
-	if (value == null) {
-		return 'indeterminate progress';
-	}
-	return formattedValue || `${value}%`;
-}
-
-// --- Root --------------------------------------------------------------------
-
-export interface ProgressRootProps {
-	'aria-valuetext'?: string;
-	format?: Intl.NumberFormatOptions;
-	getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
-	locale?: Intl.LocalesArgument;
-	max?: number;
-	min?: number;
-	value: number | null;
-	render?: RenderProp<ProgressRootState>;
-	className?: string | ((state: ProgressRootState) => string | undefined);
-	style?: Record<string, any> | ((state: ProgressRootState) => Record<string, any> | undefined);
-	ref?: any;
-	[key: string]: any;
-}
-
-function ProgressRoot(props: ProgressRootProps): any {
-	const slot = S('ProgressRoot');
-	const {
-		format,
-		getAriaValueText = getDefaultAriaValueText,
-		locale,
-		max = 100,
-		min = 0,
-		value,
-		render,
-		className,
-		children,
-		style,
-		ref,
-		...elementProps
-	} = props;
-
-	const [labelId, setLabelId] = useState<string | undefined>(undefined, subSlot(slot, 'labelId'));
-
-	const formatOptionsRef = useValueAsRef<Intl.NumberFormatOptions | undefined>(
-		format,
-		subSlot(slot, 'fmt'),
-	);
-
-	let status: ProgressStatus = 'indeterminate';
-	if (Number.isFinite(value)) {
-		status = value === max ? 'complete' : 'progressing';
-	}
-
-	const formattedValue = formatNumberValue(value, locale, formatOptionsRef.current);
-
-	const state: ProgressRootState = useMemo(() => ({ status }), [status], subSlot(slot, 'state'));
-
-	const defaultProps = {
-		'aria-labelledby': labelId,
-		'aria-valuemax': max,
-		'aria-valuemin': min,
-		'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: [
-			createElement(Fragment, { key: 'children', children }),
-			createElement('span', {
-				key: 'sr-hint',
-				role: 'presentation',
-				style: visuallyHidden,
-				children: 'x',
-			}),
-		],
-	};
-
-	const contextValue: ProgressRootContextValue = useMemo(
-		() => ({ formattedValue, max, min, setLabelId, state, status, value }),
-		[formattedValue, max, min, setLabelId, state, status, value],
-		subSlot(slot, 'ctx'),
-	);
-
-	const element = useRenderElement(
-		'div',
-		{ render, className, style },
-		{
-			state,
-			ref,
-			props: [defaultProps, elementProps],
-			stateAttributesMapping: progressStateAttributesMapping,
-		},
-		subSlot(slot, 're'),
-	);
-
-	return createElement(ProgressRootContext.Provider, { value: contextValue, children: element });
-}
-
-// --- Track -------------------------------------------------------------------
-
-function ProgressTrack(props: any): any {
-	const slot = S('ProgressTrack');
-	const { render, className, style, ref, ...elementProps } = props;
-	const { state } = useProgressRootContext();
-	return useRenderElement(
-		'div',
-		{ render, className, style },
-		{ state, ref, props: elementProps, stateAttributesMapping: progressStateAttributesMapping },
-		subSlot(slot, 're'),
-	);
-}
-
-// --- Indicator ---------------------------------------------------------------
-
-function ProgressIndicator(props: any): any {
-	const slot = S('ProgressIndicator');
-	const { render, className, style, ref, ...elementProps } = props;
-	const { max, min, value, state } = useProgressRootContext();
-
-	const percentageValue =
-		Number.isFinite(value) && value !== null ? valueToPercent(value, min, max) : null;
-	const indicatorStyle =
-		percentageValue == null
-			? {}
-			: { insetInlineStart: 0, height: 'inherit', width: `${percentageValue}%` };
-
-	return useRenderElement(
-		'div',
-		{ render, className, style },
-		{
-			state,
-			ref,
-			props: [{ style: indicatorStyle }, elementProps],
-			stateAttributesMapping: progressStateAttributesMapping,
-		},
-		subSlot(slot, 're'),
-	);
-}
-
-// --- Value -------------------------------------------------------------------
-
-function ProgressValue(props: any): any {
-	const slot = S('ProgressValue');
-	const { className, render, children, style, ref, ...elementProps } = props;
-	const { value, formattedValue, state } = useProgressRootContext();
-
-	const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
-	const formattedValueDisplay = value == null ? null : formattedValue;
-
-	return useRenderElement(
-		'span',
-		{ render, className, style },
-		{
-			state,
-			ref,
-			props: [
-				{
-					'aria-hidden': true,
-					children:
-						typeof children === 'function'
-							? children(formattedValueArg, value)
-							: formattedValueDisplay,
-				},
-				elementProps,
-			],
-			stateAttributesMapping: progressStateAttributesMapping,
-		},
-		subSlot(slot, 're'),
-	);
-}
-
-// --- Label -------------------------------------------------------------------
-
-function ProgressLabel(props: any): any {
-	const slot = S('ProgressLabel');
-	const { render, className, style, id: idProp, ref, ...elementProps } = props;
-	const { setLabelId, state } = useProgressRootContext();
-	const id = useRegisteredLabelId(idProp, setLabelId, subSlot(slot, 'labelId'));
-	return useRenderElement(
-		'span',
-		{ render, className, style },
-		{
-			state,
-			ref,
-			props: [{ id, role: 'presentation' }, elementProps],
-			stateAttributesMapping: progressStateAttributesMapping,
-		},
-		subSlot(slot, 're'),
-	);
-}
-
-// --- Namespace (mirrors `export * as Progress`) ------------------------------
-
-export const Progress = {
-	Root: ProgressRoot,
-	Track: ProgressTrack,
-	Indicator: ProgressIndicator,
-	Value: ProgressValue,
-	Label: ProgressLabel,
-};

package/src/radio-group.ts

@@ -1,285 +0,0 @@
-// Ported from .base-ui/packages/react/src/radio-group/RadioGroup.tsx (v1.6.0). Provides a
-// shared value + roving focus (via CompositeRoot) to a series of <Radio.Root>s, rendering a
-// `<div role="radiogroup">`. octane: forwardRef → ref-as-prop; native events.
-import { createElement, useMemo, useRef, useState } from 'octane';
-
-import { S, subSlot } from './internal';
-import { CompositeRoot } from './utils/composite/CompositeRoot';
-import { SHIFT } from './utils/composite/keys';
-import { contains } from './utils/contains';
-import { useBaseUiId } from './utils/useBaseUiId';
-import { useControlled } from './utils/useControlled';
-import { useStableCallback } from './utils/useStableCallback';
-import { useValueChanged } from './utils/useValueChanged';
-import { fieldValidityMapping, type FieldRootState } from './utils/field/constants';
-import { useFieldRootContext } from './utils/field/FieldRootContext';
-import { useFormContext } from './utils/field/FormContext';
-import { useLabelableContext } from './utils/field/LabelableContext';
-import { useRegisterFieldControl } from './utils/field/useRegisterFieldControl';
-import { RadioGroupContext, type RadioGroupContextValue } from './utils/RadioGroupContext';
-import { useFieldsetRootContext } from './fieldset';
-
-const MODIFIER_KEYS = [SHIFT];
-
-export interface RadioGroupState extends FieldRootState {
-	readOnly: boolean;
-	required: boolean;
-}
-
-export interface RadioGroupProps<Value = any> {
-	disabled?: boolean;
-	readOnly?: boolean;
-	required?: boolean;
-	value?: Value;
-	defaultValue?: Value;
-	onValueChange?: (value: Value, eventDetails: any) => void;
-	form?: string;
-	name?: string;
-	inputRef?: any;
-	id?: string;
-	render?: any;
-	className?: any;
-	style?: any;
-	ref?: any;
-	[key: string]: any;
-}
-
-function RadioGroup<Value = any>(props: RadioGroupProps<Value>): any {
-	const slot = S('RadioGroup');
-	const {
-		render,
-		className,
-		disabled: disabledProp,
-		readOnly,
-		required,
-		onValueChange: onValueChangeProp,
-		value: externalValue,
-		defaultValue,
-		form,
-		name: nameProp,
-		inputRef: inputRefProp,
-		id: idProp,
-		style,
-		ref,
-		...elementProps
-	} = props;
-
-	const {
-		setTouched: setFieldTouched,
-		setFocused,
-		validationMode,
-		name: fieldName,
-		disabled: fieldDisabled,
-		state: fieldState,
-		validation,
-		setDirty,
-		setFilled,
-		validityData,
-	} = useFieldRootContext();
-	const { labelId } = useLabelableContext();
-	const { clearErrors } = useFormContext();
-	const fieldsetContext = useFieldsetRootContext(true);
-
-	const disabled = fieldDisabled || disabledProp;
-	const name = fieldName ?? nameProp;
-	const id = useBaseUiId(idProp, subSlot(slot, 'id'));
-
-	const [checkedValue, setCheckedValueUnwrapped] = useControlled<Value>(
-		{ controlled: externalValue, default: defaultValue, name: 'RadioGroup', state: 'value' },
-		subSlot(slot, 'value'),
-	);
-	const [touched, setTouched] = useState(false, subSlot(slot, 'touched'));
-
-	const setCheckedValue = useStableCallback(
-		(value: Value, eventDetails: any) => {
-			onValueChangeProp?.(value, eventDetails);
-			if (eventDetails.isCanceled) {
-				return;
-			}
-			setCheckedValueUnwrapped(value);
-		},
-		subSlot(slot, 'setValue'),
-	);
-
-	const controlRef = useRef<HTMLElement | null>(null, subSlot(slot, 'controlRef'));
-	const groupInputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'groupInput'));
-	const firstEnabledInputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'firstInput'));
-
-	function setInputRef(hiddenInput: HTMLInputElement | null): void | (() => void) {
-		let cleanup: void | (() => void) | undefined;
-		if (inputRefProp) {
-			if (typeof inputRefProp === 'function') {
-				cleanup = inputRefProp(hiddenInput);
-			} else {
-				inputRefProp.current = hiddenInput;
-			}
-		}
-		groupInputRef.current = hiddenInput;
-		validation.inputRef.current = hiddenInput;
-		return cleanup;
-	}
-
-	const registerControlRef = useStableCallback(
-		(element: HTMLElement | null, isDisabled = false) => {
-			if (!element) {
-				return;
-			}
-			if (isDisabled) {
-				if (controlRef.current === element) {
-					controlRef.current = null;
-				}
-				return;
-			}
-			if (controlRef.current == null) {
-				controlRef.current = element;
-			}
-		},
-		subSlot(slot, 'registerControl'),
-	);
-
-	const registerInputRef = useStableCallback(
-		(input: HTMLInputElement | null) => {
-			if (!input || input.disabled) {
-				return undefined;
-			}
-			if (!firstEnabledInputRef.current) {
-				firstEnabledInputRef.current = input;
-			}
-			const currentInput = groupInputRef.current;
-			if (input.checked || currentInput == null || currentInput.disabled) {
-				return setInputRef(input);
-			}
-			return undefined;
-		},
-		subSlot(slot, 'registerInput'),
-	);
-
-	const getFormValue = useStableCallback(
-		() => {
-			const input = groupInputRef.current;
-			if (!input || input.disabled || !input.checked) {
-				return null;
-			}
-			return checkedValue ?? null;
-		},
-		subSlot(slot, 'getFormValue'),
-	);
-
-	useRegisterFieldControl(
-		controlRef,
-		id,
-		checkedValue ?? null,
-		getFormValue,
-		!disabled,
-		nameProp,
-		subSlot(slot, 'register'),
-	);
-
-	useValueChanged(
-		checkedValue,
-		() => {
-			clearErrors(name);
-			setDirty(checkedValue !== validityData.initialValue);
-			setFilled(checkedValue != null);
-			validation.change(checkedValue);
-			const fallbackInput = firstEnabledInputRef.current;
-			if (checkedValue == null && fallbackInput && !fallbackInput.disabled) {
-				setInputRef(fallbackInput);
-			}
-		},
-		subSlot(slot, 'valueChanged'),
-	);
-
-	const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
-
-	const state: RadioGroupState = {
-		...fieldState,
-		disabled: disabled ?? false,
-		required: required ?? false,
-		readOnly: readOnly ?? false,
-	};
-
-	const contextValue: RadioGroupContextValue<Value> = useMemo(
-		() => ({
-			...fieldState,
-			checkedValue,
-			disabled,
-			form,
-			validation,
-			name,
-			readOnly,
-			registerControlRef,
-			registerInputRef,
-			required,
-			setCheckedValue,
-			setTouched,
-			touched,
-		}),
-		[
-			checkedValue,
-			disabled,
-			form,
-			validation,
-			fieldState,
-			name,
-			readOnly,
-			registerControlRef,
-			registerInputRef,
-			required,
-			setCheckedValue,
-			setTouched,
-			touched,
-		],
-		subSlot(slot, 'ctx'),
-	);
-
-	const defaultProps: Record<string, any> = {
-		id: idProp,
-		role: 'radiogroup',
-		'aria-required': required || undefined,
-		'aria-disabled': disabled || undefined,
-		'aria-readonly': readOnly || undefined,
-		'aria-labelledby': ariaLabelledby,
-		onFocus() {
-			setFocused(true);
-		},
-		onBlur(event: any) {
-			if (!contains(event.currentTarget, event.relatedTarget)) {
-				setFieldTouched(true);
-				setFocused(false);
-				if (validationMode === 'onBlur') {
-					validation.commit(checkedValue);
-				}
-			}
-		},
-		onKeyDownCapture(event: any) {
-			if (event.key.startsWith('Arrow')) {
-				setTouched(true);
-				setFocused(true);
-			}
-		},
-	};
-
-	const compositeRoot = createElement(CompositeRoot, {
-		render,
-		className,
-		style,
-		state,
-		props: [
-			defaultProps,
-			elementProps,
-			(p: any) => validation.getValidationProps(disabled ?? false, p),
-		],
-		refs: [ref],
-		stateAttributesMapping: fieldValidityMapping,
-		enableHomeAndEndKeys: false,
-		modifierKeys: MODIFIER_KEYS,
-	});
-
-	return createElement(RadioGroupContext.Provider, {
-		value: contextValue,
-		children: compositeRoot,
-	});
-}
-
-export { RadioGroup };