@octanejs/base-ui 0.1.49 → 0.1.51

package/src/slider/control/SliderControl.tsrx

@@ -0,0 +1,540 @@
+'use client';
+import * as React from 'octane';
+import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@octanejs/base-ui-utils/addEventListener';
+import { ownerDocument, ownerWindow } from '@octanejs/base-ui-utils/owner';
+import { useAnimationFrame } from '@octanejs/base-ui-utils/useAnimationFrame';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { useValueAsRef } from '@octanejs/base-ui-utils/useValueAsRef';
+import { clamp } from '@octanejs/base-ui-utils/clamp';
+import { activeElement, contains, getTarget } from '../../floating-ui-react/utils';
+import type { Coords } from '../../floating-ui-react/types';
+import type { BaseUIComponentProps } from '../../internals/types';
+import {
+	createChangeEventDetails,
+	createGenericEventDetails,
+} from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useDirection } from '../../internals/direction-context/DirectionContext.tsrx';
+import { useSliderRootContext } from '../root/SliderRootContext';
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping';
+import type { SliderRootState } from '../root/SliderRoot.tsrx';
+import { getMidpoint } from '../utils/getMidpoint';
+import { roundValueToStep } from '../utils/roundValueToStep';
+import { validateMinimumDistance } from '../utils/validateMinimumDistance';
+import { resolveThumbCollision } from '../utils/resolveThumbCollision';
+
+const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+
+function getControlOffset(styles: CSSStyleDeclaration | null, vertical: boolean) {
+	if (!styles) {
+		return {
+			start: 0,
+			end: 0,
+		};
+	}
+
+	function parseSize(value: string | null | undefined) {
+		const parsed = value != null ? parseFloat(value) : 0;
+		return Number.isNaN(parsed) ? 0 : parsed;
+	}
+
+	const start = !vertical ? 'InlineStart' : 'Top';
+	const end = !vertical ? 'InlineEnd' : 'Bottom';
+
+	return {
+		start: parseSize(styles[`border${start}Width`]) + parseSize(styles[`padding${start}`]),
+		end: parseSize(styles[`border${end}Width`]) + parseSize(styles[`padding${end}`]),
+	};
+}
+
+function getFingerCoords(
+	event: TouchEvent | PointerEvent | React.PointerEvent,
+	touchIdRef: React.RefObject<number | null>,
+): Coords | null {
+	// The event is TouchEvent
+	if (touchIdRef.current != null && (event as TouchEvent).changedTouches) {
+		const touchEvent = event as TouchEvent;
+		for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
+			const touch = touchEvent.changedTouches[i];
+			if (touch.identifier === touchIdRef.current) {
+				return {
+					x: touch.clientX,
+					y: touch.clientY,
+				};
+			}
+		}
+
+		return null;
+	}
+
+	// The event is PointerEvent
+	return {
+		x: (event as PointerEvent).clientX,
+		y: (event as PointerEvent).clientY,
+	};
+}
+
+/**
+ * The clickable, interactive part of the slider.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
+ */
+export const SliderControl = function SliderControl(
+	componentPropsWithRef: React.PropsWithoutRef<SliderControl.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render: renderProp, className, style, ...elementProps } = componentProps;
+
+	const {
+		disabled,
+		dragging,
+		inset,
+		lastChangeReasonRef,
+		max,
+		min,
+		minStepsBetweenValues,
+		onValueCommitted,
+		orientation,
+		pressedThumbCenterOffsetRef,
+		pressedThumbIndexRef,
+		pressedValuesRef,
+		registerFieldControlRef,
+		renderBeforeHydration,
+		setActive,
+		setDragging,
+		setValue,
+		state,
+		step,
+		thumbCollisionBehavior,
+		thumbRefs,
+		values,
+	} = useSliderRootContext();
+
+	const direction = useDirection();
+	const range = values.length > 1;
+	const vertical = orientation === 'vertical';
+
+	const controlRef = React.useRef<HTMLElement | null>(null);
+	const stylesRef = React.useRef<CSSStyleDeclaration | null>(null);
+	const setStylesRef = useStableCallback((element: HTMLElement | null) => {
+		if (element && stylesRef.current == null) {
+			stylesRef.current = ownerWindow(element).getComputedStyle(element);
+		}
+	});
+
+	// A number that uniquely identifies the current finger in the touch session.
+	const touchIdRef = React.useRef<number | null>(null);
+	// The number of touch/pointermove events that have fired.
+	const moveCountRef = React.useRef(0);
+	// The offset amount to each side of the control for inset sliders.
+	// This value should be equal to the radius or half the width/height of the thumb.
+	const insetThumbOffsetRef = React.useRef(0);
+	const currentInteractionValueRef = React.useRef<number | number[] | null>(null);
+	const latestValuesRef = useValueAsRef(values);
+
+	function getThumbInput(el: Element | null | undefined) {
+		return el?.querySelector<HTMLInputElement>('input[type="range"]');
+	}
+
+	function updatePressedThumb(nextIndex: number) {
+		pressedThumbIndexRef.current = nextIndex;
+		if (!thumbRefs.current[nextIndex]) {
+			pressedThumbCenterOffsetRef.current = null;
+		}
+	}
+
+	function resetPressedThumb() {
+		pressedThumbIndexRef.current = -1;
+		pressedThumbCenterOffsetRef.current = null;
+	}
+
+	function isTargetDisabledThumb(target: EventTarget | null) {
+		if (!isElement(target)) {
+			return false;
+		}
+
+		return thumbRefs.current.some((thumbEl) => {
+			if (!isElement(thumbEl) || !contains(thumbEl, target)) {
+				return false;
+			}
+
+			return getThumbInput(thumbEl)?.disabled === true;
+		});
+	}
+
+	function getFingerState(fingerCoords: Coords): FingerState | null {
+		const control = controlRef.current;
+		const thumbIndex = pressedThumbIndexRef.current;
+
+		if (!control || thumbIndex < 0 || thumbIndex >= values.length) {
+			if (thumbIndex >= values.length) {
+				currentInteractionValueRef.current = null;
+			}
+			return null;
+		}
+
+		const { width, height, bottom, left, right } = control.getBoundingClientRect();
+
+		const controlOffset = getControlOffset(stylesRef.current, vertical);
+		const insetThumbOffset = insetThumbOffsetRef.current;
+		const controlSize =
+			(vertical ? height : width) - controlOffset.start - controlOffset.end - insetThumbOffset * 2;
+		const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;
+		const fingerX = fingerCoords.x - thumbCenterOffset;
+		const fingerY = fingerCoords.y - thumbCenterOffset;
+
+		const valueSize = vertical
+			? bottom - fingerY - controlOffset.end
+			: (direction === 'rtl' ? right - fingerX : fingerX - left) - controlOffset.start;
+		// the value at the finger origin scaled down to fit the range [0, 1]
+		const valueRescaled = clamp((valueSize - insetThumbOffset) / controlSize, 0, 1);
+
+		let newValue = (max - min) * valueRescaled + min;
+		newValue = roundValueToStep(newValue, step, min);
+		newValue = clamp(newValue, min, max);
+
+		if (!range) {
+			return {
+				value: newValue,
+				thumbIndex,
+				didSwap: false,
+			};
+		}
+
+		return resolveThumbCollision(
+			thumbCollisionBehavior,
+			values,
+			latestValuesRef.current,
+			pressedValuesRef.current,
+			thumbIndex,
+			newValue,
+			min,
+			max,
+			step,
+			minStepsBetweenValues,
+		);
+	}
+
+	function startPressing(fingerCoords: Coords) {
+		pressedValuesRef.current = range ? values.slice() : null;
+		currentInteractionValueRef.current = null;
+		latestValuesRef.current = values;
+
+		const pressedThumbIndex = pressedThumbIndexRef.current;
+		let closestThumbIndex = pressedThumbIndex;
+
+		if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {
+			if (values[pressedThumbIndex] === max) {
+				let candidateIndex = pressedThumbIndex;
+
+				while (candidateIndex > 0 && values[candidateIndex - 1] === max) {
+					candidateIndex -= 1;
+				}
+
+				closestThumbIndex = candidateIndex;
+			}
+		} else {
+			// pressed on control
+			const axis = !vertical ? 'x' : 'y';
+			let minDistance: number | undefined;
+
+			closestThumbIndex = -1;
+
+			for (let i = 0; i < thumbRefs.current.length; i += 1) {
+				const thumbEl = thumbRefs.current[i];
+				if (isElement(thumbEl) && !getThumbInput(thumbEl)?.disabled) {
+					const midpoint = getMidpoint(thumbEl, vertical);
+					const distance = Math.abs(fingerCoords[axis] - midpoint);
+
+					if (minDistance === undefined || distance <= minDistance) {
+						closestThumbIndex = i;
+						minDistance = distance;
+					}
+				}
+			}
+		}
+
+		if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {
+			updatePressedThumb(closestThumbIndex);
+		}
+
+		if (inset) {
+			const thumbEl = thumbRefs.current[closestThumbIndex];
+			if (isElement(thumbEl)) {
+				const thumbRect = thumbEl.getBoundingClientRect();
+				const side = !vertical ? 'width' : 'height';
+				insetThumbOffsetRef.current = thumbRect[side] / 2;
+			}
+		}
+	}
+
+	function focusThumb(thumbIndex: number) {
+		const input = getThumbInput(thumbRefs.current?.[thumbIndex]);
+		if (!input) {
+			return;
+		}
+
+		input.focus({
+			preventScroll: true,
+			// Prevent pointer-driven focus rings in browsers that support this option.
+			// Supported in Chrome from 144+.
+			focusVisible: false,
+		} as FocusOptions & { focusVisible?: boolean });
+	}
+
+	function setValueFromPointer(
+		finger: FingerState,
+		reason: typeof REASONS.trackPress | typeof REASONS.drag,
+		nativeEvent: TouchEvent | PointerEvent,
+	) {
+		const applied = setValue(
+			finger.value,
+			createChangeEventDetails(reason, nativeEvent, undefined, {
+				activeThumbIndex: finger.thumbIndex,
+			}),
+		);
+
+		if (applied) {
+			currentInteractionValueRef.current = finger.value;
+			latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
+
+			// Only track and focus the swapped thumb once the change is actually applied so a
+			// canceled swap doesn't leak the new index into subsequent moves.
+			if (finger.didSwap) {
+				updatePressedThumb(finger.thumbIndex);
+				focusThumb(finger.thumbIndex);
+			}
+		}
+
+		return applied;
+	}
+
+	const handleTouchMove = useStableCallback((nativeEvent: TouchEvent | PointerEvent) => {
+		const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
+
+		if (fingerCoords == null) {
+			return;
+		}
+
+		moveCountRef.current += 1;
+
+		// Cancel move in case some other element consumed a pointerup event and it was not fired.
+		if (nativeEvent.type === 'pointermove' && (nativeEvent as PointerEvent).buttons === 0) {
+			// eslint-disable-next-line @typescript-eslint/no-use-before-define
+			handleTouchEnd(nativeEvent);
+			return;
+		}
+
+		const finger = getFingerState(fingerCoords);
+
+		if (finger == null) {
+			return;
+		}
+
+		if (validateMinimumDistance(finger.value, step, minStepsBetweenValues)) {
+			if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
+				setDragging(true);
+			}
+
+			setValueFromPointer(finger, REASONS.drag, nativeEvent);
+		}
+	});
+
+	const handleTouchEnd = useStableCallback((nativeEvent: TouchEvent | PointerEvent) => {
+		setActive(-1);
+		setDragging(false);
+
+		pressedThumbCenterOffsetRef.current = null;
+
+		// If the value array shrank or grew mid-drag, the cached interaction value no longer
+		// matches the current thumbs (the pressed index can still be in range), so dropping it
+		// keeps a stale or malformed array from being committed on release.
+		const interactionValue = currentInteractionValueRef.current;
+		if (Array.isArray(interactionValue) && interactionValue.length !== values.length) {
+			currentInteractionValueRef.current = null;
+		}
+
+		if (currentInteractionValueRef.current != null) {
+			const commitReason = lastChangeReasonRef.current;
+			onValueCommitted(
+				currentInteractionValueRef.current,
+				createGenericEventDetails(commitReason, nativeEvent),
+			);
+		}
+
+		if (
+			'pointerType' in nativeEvent &&
+			controlRef.current?.hasPointerCapture(nativeEvent.pointerId)
+		) {
+			controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
+		}
+
+		pressedThumbIndexRef.current = -1;
+		touchIdRef.current = null;
+		// eslint-disable-next-line @typescript-eslint/no-use-before-define
+		stopListening();
+	});
+
+	const handleTouchStart = useStableCallback((nativeEvent: TouchEvent) => {
+		if (disabled) {
+			return;
+		}
+
+		if (isTargetDisabledThumb(getTarget(nativeEvent))) {
+			resetPressedThumb();
+			return;
+		}
+
+		const touch = nativeEvent.changedTouches[0];
+		if (touch == null) {
+			return;
+		}
+
+		touchIdRef.current = touch.identifier;
+
+		const fingerCoords = { x: touch.clientX, y: touch.clientY };
+		startPressing(fingerCoords);
+
+		const finger = getFingerState(fingerCoords);
+
+		if (finger == null) {
+			return;
+		}
+
+		focusThumb(finger.thumbIndex);
+		setValueFromPointer(finger, REASONS.trackPress, nativeEvent);
+
+		moveCountRef.current = 0;
+		const doc = ownerDocument(controlRef.current);
+		doc.addEventListener('touchmove', handleTouchMove, { passive: true });
+		doc.addEventListener('touchend', handleTouchEnd, { passive: true });
+	});
+
+	const stopListening = useStableCallback(() => {
+		const doc = ownerDocument(controlRef.current);
+		doc.removeEventListener('pointermove', handleTouchMove);
+		doc.removeEventListener('pointerup', handleTouchEnd);
+		doc.removeEventListener('touchmove', handleTouchMove);
+		doc.removeEventListener('touchend', handleTouchEnd);
+		pressedValuesRef.current = null;
+		currentInteractionValueRef.current = null;
+	});
+
+	const focusFrame = useAnimationFrame();
+
+	React.useEffect(() => {
+		const control = controlRef.current;
+		if (!control) {
+			return () => stopListening();
+		}
+
+		const unsubscribeTouchStart = addEventListener(control, 'touchstart', handleTouchStart, {
+			passive: true,
+		});
+
+		return () => {
+			unsubscribeTouchStart();
+			focusFrame.cancel();
+
+			stopListening();
+		};
+	}, [stopListening, handleTouchStart, controlRef, focusFrame]);
+
+	React.useEffect(() => {
+		if (disabled) {
+			stopListening();
+		}
+	}, [disabled, stopListening]);
+
+	const element = useRenderElement('div', componentProps, {
+		state,
+		ref: [forwardedRef, registerFieldControlRef, controlRef, setStylesRef],
+		props: [
+			{
+				['data-base-ui-slider-control' as string]: renderBeforeHydration ? '' : undefined,
+				onPointerDown(event) {
+					const control = controlRef.current;
+					const target = getTarget(event);
+
+					if (
+						!control ||
+						disabled ||
+						event.defaultPrevented ||
+						!isElement(target) ||
+						// Only handle left clicks
+						event.button !== 0
+					) {
+						return;
+					}
+
+					if (isTargetDisabledThumb(target)) {
+						resetPressedThumb();
+						return;
+					}
+
+					const fingerCoords = { x: event.clientX, y: event.clientY };
+					startPressing(fingerCoords);
+
+					const finger = getFingerState(fingerCoords);
+
+					if (finger == null) {
+						return;
+					}
+
+					const pressedOnFocusedThumb = contains(
+						thumbRefs.current[finger.thumbIndex],
+						activeElement(ownerDocument(control)),
+					);
+
+					if (pressedOnFocusedThumb) {
+						event.preventDefault();
+					} else {
+						focusFrame.request(() => {
+							focusThumb(finger.thumbIndex);
+						});
+					}
+
+					setDragging(true);
+
+					const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
+					if (!pressedOnAnyThumb) {
+						setValueFromPointer(finger, REASONS.trackPress, event);
+					}
+
+					if (event.pointerId) {
+						control.setPointerCapture(event.pointerId);
+					}
+
+					moveCountRef.current = 0;
+					const doc = ownerDocument(control);
+					doc.addEventListener('pointermove', handleTouchMove, { passive: true });
+					doc.addEventListener('pointerup', handleTouchEnd, { once: true });
+				},
+			},
+			elementProps,
+		],
+		stateAttributesMapping: sliderStateAttributesMapping,
+	});
+
+	return element;
+};
+
+interface FingerState {
+	value: number | number[];
+	thumbIndex: number;
+	didSwap: boolean;
+}
+
+export interface SliderControlState extends SliderRootState {}
+
+export interface SliderControlProps extends BaseUIComponentProps<'div', SliderControlState> {}
+
+export namespace SliderControl {
+	export type State = SliderControlState;
+	export type Props = SliderControlProps;
+}

package/src/slider/control/SliderControlDataAttributes.ts

@@ -0,0 +1,33 @@
+/**
+ * Present while the user is dragging.
+ */
+export const dragging = 'data-dragging';
+/**
+ * Indicates the orientation of the slider.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';
+/**
+ * Present when the slider is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the slider is in a valid state (when wrapped in Field.Root).
+ */
+export const valid = 'data-valid';
+/**
+ * Present when the slider is in an invalid state (when wrapped in Field.Root).
+ */
+export const invalid = 'data-invalid';
+/**
+ * Present when the slider has been touched (when wrapped in Field.Root).
+ */
+export const touched = 'data-touched';
+/**
+ * Present when the slider's value has changed (when wrapped in Field.Root).
+ */
+export const dirty = 'data-dirty';
+/**
+ * Present when the slider is focused (when wrapped in Field.Root).
+ */
+export const focused = 'data-focused';

package/src/slider/index.parts.ts

@@ -0,0 +1,7 @@
+export { SliderRoot as Root } from './root/SliderRoot.tsrx';
+export { SliderLabel as Label } from './label/SliderLabel.tsrx';
+export { SliderValue as Value } from './value/SliderValue.tsrx';
+export { SliderControl as Control } from './control/SliderControl.tsrx';
+export { SliderTrack as Track } from './track/SliderTrack.tsrx';
+export { SliderThumb as Thumb } from './thumb/SliderThumb.tsrx';
+export { SliderIndicator as Indicator } from './indicator/SliderIndicator.tsrx';

package/src/slider/index.ts

@@ -0,0 +1,9 @@
+export * as Slider from './index.parts';
+
+export type * from './root/SliderRoot.tsrx';
+export type * from './label/SliderLabel.tsrx';
+export type * from './value/SliderValue.tsrx';
+export type * from './control/SliderControl.tsrx';
+export type * from './track/SliderTrack.tsrx';
+export type * from './thumb/SliderThumb.tsrx';
+export type * from './indicator/SliderIndicator.tsrx';

package/src/slider/indicator/SliderIndicator.tsrx

@@ -0,0 +1,102 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { valueToPercent } from '../../utils/valueToPercent';
+import { useIsHydrating } from '../../utils/useIsHydrating';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useSliderRootContext } from '../root/SliderRootContext';
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping';
+import type { SliderRootState } from '../root/SliderRoot.tsrx';
+
+function getIndicatorStyles(
+	vertical: boolean,
+	range: boolean,
+	inset: boolean,
+	start: number | undefined,
+	end: number | undefined,
+	forceHidden: boolean,
+): React.CSSProperties & Record<string, unknown> {
+	const styles: React.CSSProperties & Record<string, unknown> = {
+		visibility:
+			forceHidden || (inset && (start === undefined || (range && end === undefined)))
+				? ('hidden' as const)
+				: undefined,
+		position: vertical ? 'absolute' : 'relative',
+		[vertical ? 'width' : 'height']: 'inherit',
+	};
+
+	let startValue: string = `${start ?? 0}%`;
+	let sizeValue: string = `${(end ?? 0) - (start ?? 0)}%`;
+
+	if (inset) {
+		styles['--start-position'] = startValue;
+		startValue = 'var(--start-position)';
+
+		if (range) {
+			styles['--relative-size'] = sizeValue;
+			sizeValue = 'var(--relative-size)';
+		}
+	}
+
+	styles[vertical ? 'bottom' : 'insetInlineStart'] = range ? startValue : 0;
+	styles[vertical ? 'height' : 'width'] = range ? sizeValue : startValue;
+
+	return styles;
+}
+
+/**
+ * Visualizes the current value of the slider.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
+ */
+export const SliderIndicator = function SliderIndicator(
+	componentPropsWithRef: React.PropsWithoutRef<SliderIndicator.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style: styleProp, ...elementProps } = componentProps;
+
+	const { indicatorPosition, inset, max, min, orientation, renderBeforeHydration, state, values } =
+		useSliderRootContext();
+
+	const isHydrating = useIsHydrating();
+
+	const vertical = orientation === 'vertical';
+	const range = values.length > 1;
+
+	const style = getIndicatorStyles(
+		vertical,
+		range,
+		inset,
+		inset ? indicatorPosition[0] : valueToPercent(values[0], min, max),
+		inset ? indicatorPosition[1] : valueToPercent(values[values.length - 1], min, max),
+		inset && renderBeforeHydration && isHydrating,
+	);
+
+	const element = useRenderElement('div', componentProps, {
+		state,
+		ref: forwardedRef,
+		props: [
+			{
+				['data-base-ui-slider-indicator' as string]: renderBeforeHydration ? '' : undefined,
+				style,
+				suppressHydrationWarning: renderBeforeHydration || undefined,
+			},
+			elementProps,
+		],
+		stateAttributesMapping: sliderStateAttributesMapping,
+	});
+
+	return element;
+};
+
+export interface SliderIndicatorState extends SliderRootState {}
+
+export interface SliderIndicatorProps extends BaseUIComponentProps<'div', SliderIndicatorState> {}
+
+export namespace SliderIndicator {
+	export type State = SliderIndicatorState;
+	export type Props = SliderIndicatorProps;
+}