@octanejs/base-ui 0.1.50 → 0.1.51

package/src/utils/scrollEdges.ts

@@ -0,0 +1,33 @@
+import { clamp } from '@octanejs/base-ui-utils/clamp';
+
+export const SCROLL_EDGE_TOLERANCE_PX = 1;
+
+export function getMaxScrollOffset(scrollSize: number, clientSize: number) {
+	return Math.max(0, scrollSize - clientSize);
+}
+
+export function normalizeScrollOffset(value: number, max: number) {
+	if (max <= 0) {
+		return 0;
+	}
+
+	const clamped = clamp(value, 0, max);
+	const startDistance = clamped;
+	const endDistance = max - clamped;
+	const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
+	const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
+
+	if (withinStartTolerance && withinEndTolerance) {
+		return startDistance <= endDistance ? 0 : max;
+	}
+
+	if (withinStartTolerance) {
+		return 0;
+	}
+
+	if (withinEndTolerance) {
+		return max;
+	}
+
+	return clamped;
+}

package/src/utils/scrollable.ts

@@ -0,0 +1,77 @@
+import {
+	getComputedStyle,
+	getParentNode,
+	isHTMLElement,
+	isLastTraversableNode,
+} from '@floating-ui/utils/dom';
+
+export type ScrollAxis = 'horizontal' | 'vertical';
+
+export function isScrollableY(element: HTMLElement, allowOverflowIntent = false): boolean {
+	const { overflowY } = getComputedStyle(element);
+	if (overflowY !== 'auto' && overflowY !== 'scroll') {
+		return false;
+	}
+	// When `allowOverflowIntent` is true, a container that overflows only once extra space is
+	// added (e.g. drawer keyboard scroll slack) still counts, as long as it has layout size on
+	// the axis.
+	return allowOverflowIntent
+		? element.clientHeight > 0
+		: element.scrollHeight > element.clientHeight;
+}
+
+export function isScrollableX(element: HTMLElement, allowOverflowIntent = false): boolean {
+	const { overflowX } = getComputedStyle(element);
+	if (overflowX !== 'auto' && overflowX !== 'scroll') {
+		return false;
+	}
+	return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
+}
+
+export function isScrollable(
+	element: HTMLElement,
+	axis: ScrollAxis,
+	allowOverflowIntent = false,
+): boolean {
+	return axis === 'vertical'
+		? isScrollableY(element, allowOverflowIntent)
+		: isScrollableX(element, allowOverflowIntent);
+}
+
+export function hasScrollableAncestor(
+	target: HTMLElement,
+	root: HTMLElement,
+	axes: ScrollAxis[],
+): boolean {
+	// `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
+	// still walks up to scrollable ancestors in the light DOM.
+	let node: Node | null = target;
+	while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
+		for (const axis of axes) {
+			if (isScrollable(node, axis)) {
+				return true;
+			}
+		}
+		node = getParentNode(node);
+	}
+	return false;
+}
+
+export function findScrollableTouchTarget(
+	target: EventTarget | null,
+	root: HTMLElement,
+	axis: ScrollAxis = 'vertical',
+	allowOverflowIntent = false,
+): HTMLElement | null {
+	// `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
+	// still reaches a scrollable ancestor in the light DOM.
+	let node: Node | null = isHTMLElement(target) ? target : null;
+	while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
+		if (isScrollable(node, axis, allowOverflowIntent)) {
+			return node;
+		}
+		node = getParentNode(node);
+	}
+
+	return isScrollable(root, axis, allowOverflowIntent) ? root : null;
+}

package/src/utils/styles.tsrx

@@ -0,0 +1,15 @@
+const DISABLE_SCROLLBAR_CLASS_NAME = 'base-ui-disable-scrollbar';
+
+export const styleDisableScrollbar = {
+	className: DISABLE_SCROLLBAR_CLASS_NAME,
+	getElement(nonce?: string) {
+		return (
+			<style
+				nonce={nonce}
+				href={DISABLE_SCROLLBAR_CLASS_NAME}
+				precedence="base-ui:low"
+				children={`.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`}
+			/>
+		);
+	},
+};

package/src/utils/useAnchoredPopupScrollLock.ts

@@ -1,50 +1,44 @@
-// Ported from .base-ui/packages/react/src/utils/useAnchoredPopupScrollLock.ts (v1.6.0),
-// octane-adapted (slot-threaded). Touch-opened popups normally skip scroll lock so a swipe outside
-// can still dismiss; this re-enables scroll lock only when the popup is effectively full-width
-// (leaving too little outside space for a reliable swipe).
-import { useState, useLayoutEffect } from 'octane';
-
-import { S, subSlot } from '../internal';
-import { ownerDocument } from './owner';
-import { useScrollLock } from './useScrollLock';
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import { ownerDocument } from '@octanejs/base-ui-utils/owner';
+import { useScrollLock } from '@octanejs/base-ui-utils/useScrollLock';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
 
+// Touch-opened popups normally avoid scroll locking so users can still swipe outside to dismiss.
+// This hook re-enables scroll lock only when the popup is effectively full-width.
+// Treat popups with up to 20px of total horizontal gutter as full-width so common ~10px side
+// padding still locks scroll, since that leaves too little outside space for a reliable swipe.
 const VIEWPORT_WIDTH_TOLERANCE_PX = 20;
 
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
 export function useAnchoredPopupScrollLock(
 	enabled: boolean,
 	touchOpen: boolean,
 	positionerElement: HTMLElement | null,
 	referenceElement: Element | null,
-): void {
-	const slot = S('useAnchoredPopupScrollLock');
-	const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = useState(
-		false,
-		subSlot(slot, 'lock'),
-	);
+) {
+	const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = React.useState(false);
 
-	useLayoutEffect(
-		() => {
-			if (!enabled || !touchOpen || positionerElement == null) {
-				setTouchOpenShouldLockScroll(false);
-				return;
-			}
+	useIsoLayoutEffect(() => {
+		if (!enabled || !touchOpen || positionerElement == null) {
+			setTouchOpenShouldLockScroll(false);
+			return;
+		}
 
-			const viewportWidth = ownerDocument(positionerElement).documentElement.clientWidth;
-			const popupWidth = positionerElement.offsetWidth;
+		const viewportWidth = ownerDocument(positionerElement).documentElement.clientWidth;
+		const popupWidth = positionerElement.offsetWidth;
 
-			setTouchOpenShouldLockScroll(
-				viewportWidth > 0 &&
-					popupWidth > 0 &&
-					popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX,
-			);
-		},
-		[enabled, touchOpen, positionerElement],
-		subSlot(slot, 'eff'),
-	);
+		setTouchOpenShouldLockScroll(
+			viewportWidth > 0 &&
+				popupWidth > 0 &&
+				popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX,
+		);
+	}, [enabled, touchOpen, positionerElement]);
 
-	useScrollLock(
-		enabled && (!touchOpen || touchOpenShouldLockScroll),
-		referenceElement,
-		subSlot(slot, 'scroll'),
-	);
+	useScrollLock(enabled && (!touchOpen || touchOpenShouldLockScroll), referenceElement);
 }

package/src/utils/useFocusableWhenDisabled.ts

@@ -1,84 +1,100 @@
-// Ported verbatim from .base-ui/packages/react/src/utils/useFocusableWhenDisabled.ts.
-// Computes the tabIndex / aria-disabled / disabled / onKeyDown props a button-like element
-// needs so it can (optionally) stay focusable while disabled. Pure prop computation.
-//
-// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
-import { useMemo } from 'octane';
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
 
-import { S, splitSlot } from '../internal';
-
-export interface UseFocusableWhenDisabledParameters {
-	focusableWhenDisabled?: boolean;
-	disabled: boolean;
-	composite?: boolean;
-	tabIndex?: number;
-	isNativeButton: boolean;
-}
-
-export interface FocusableWhenDisabledProps {
-	'aria-disabled'?: boolean;
-	disabled?: boolean;
-	onKeyDown: (event: KeyboardEvent) => void;
-	tabIndex: number;
-}
-
-export function useFocusableWhenDisabled(...args: any[]): { props: FocusableWhenDisabledProps } {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useFocusableWhenDisabled');
+export function useFocusableWhenDisabled(
+	parameters: UseFocusableWhenDisabledParameters,
+): UseFocusableWhenDisabledReturnValue {
 	const {
 		focusableWhenDisabled,
 		disabled,
 		composite = false,
 		tabIndex: tabIndexProp = 0,
 		isNativeButton,
-	} = user[0] as UseFocusableWhenDisabledParameters;
+	} = parameters;
 
 	const isFocusableComposite = composite && focusableWhenDisabled !== false;
 	const isNonFocusableComposite = composite && focusableWhenDisabled === false;
 
-	// We can't explicitly assign `undefined` to any of these props — that would prevent a
-	// subsequently merged prop from setting them.
-	const props = useMemo(
-		() => {
-			const additionalProps = {
-				onKeyDown(event: KeyboardEvent) {
-					if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
-						event.preventDefault();
-					}
-				},
-			} as FocusableWhenDisabledProps;
-
-			if (!composite) {
-				additionalProps.tabIndex = tabIndexProp;
-				if (!isNativeButton && disabled) {
-					additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
+	// we can't explicitly assign `undefined` to any of these props because it
+	// would otherwise prevent subsequently merged props from setting them
+	const props = React.useMemo(() => {
+		const additionalProps = {
+			// allow Tabbing away from focusableWhenDisabled elements
+			onKeyDown(event: React.KeyboardEvent) {
+				if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
+					event.preventDefault();
 				}
-			}
+			},
+		} as FocusableWhenDisabledProps;
 
-			if (
-				(isNativeButton && (focusableWhenDisabled || isFocusableComposite)) ||
-				(!isNativeButton && disabled)
-			) {
-				additionalProps['aria-disabled'] = disabled;
-			}
+		if (!composite) {
+			additionalProps.tabIndex = tabIndexProp;
 
-			if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
-				additionalProps.disabled = disabled;
+			if (!isNativeButton && disabled) {
+				additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
 			}
+		}
+
+		if (
+			(isNativeButton && (focusableWhenDisabled || isFocusableComposite)) ||
+			(!isNativeButton && disabled)
+		) {
+			additionalProps['aria-disabled'] = disabled;
+		}
+
+		if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
+			additionalProps.disabled = disabled;
+		}
 
-			return additionalProps;
-		},
-		[
-			composite,
-			disabled,
-			focusableWhenDisabled,
-			isFocusableComposite,
-			isNonFocusableComposite,
-			isNativeButton,
-			tabIndexProp,
-		],
-		slot,
-	);
+		return additionalProps;
+	}, [
+		composite,
+		disabled,
+		focusableWhenDisabled,
+		isFocusableComposite,
+		isNonFocusableComposite,
+		isNativeButton,
+		tabIndexProp,
+	]);
 
 	return { props };
 }
+
+interface FocusableWhenDisabledProps {
+	'aria-disabled'?: boolean | undefined;
+	disabled?: boolean | undefined;
+	onKeyDown: (event: React.KeyboardEvent) => void;
+	tabIndex: number;
+}
+
+export interface UseFocusableWhenDisabledParameters {
+	/**
+	 * Whether the component should be focusable when disabled.
+	 * When `undefined`, composite items are focusable when disabled by default.
+	 */
+	focusableWhenDisabled?: boolean | undefined;
+	/**
+	 * The disabled state of the component.
+	 */
+	disabled: boolean;
+	/**
+	 * Whether this is a composite item or not.
+	 * @default false
+	 */
+	composite?: boolean | undefined;
+	/**
+	 * @default 0
+	 */
+	tabIndex?: number | undefined;
+	/**
+	 * @default true
+	 */
+	isNativeButton: boolean;
+}
+
+export interface UseFocusableWhenDisabledReturnValue {
+	props: FocusableWhenDisabledProps;
+}
+
+export interface UseFocusableWhenDisabledState {}

package/src/utils/useIsHydrating.ts

@@ -1,26 +1,23 @@
-// Ported from Base UI's useIsHydrating: the server snapshot must also be used
-// for the first hydration render so layout-dependent slider styles are adopted
-// before the client snapshot makes the hydrated controls visible.
+/** @jsxImportSource octane */
 import { useSyncExternalStore } from 'octane';
+import { NOOP } from '../internals/noop';
 
-import { S, splitSlot, subSlot } from '../internal';
-
-function subscribe(): () => void {
-	return () => {};
+function subscribe() {
+	return NOOP;
 }
 
-function getSnapshot(): boolean {
+function getSnapshot() {
 	return false;
 }
 
-function getServerSnapshot(): boolean {
+function getServerSnapshot() {
 	return true;
 }
 
-export function useIsHydrating(): boolean;
-export function useIsHydrating(slot: symbol | undefined): boolean;
-export function useIsHydrating(...args: unknown[]): boolean {
-	const [, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useIsHydrating');
-	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot, subSlot(slot, 'store'));
+/**
+ * Returns `true` while React is hydrating server-rendered markup and `false`
+ * for fresh client-only mounts.
+ */
+export function useIsHydrating() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }

package/src/utils/useMixedToggleClickHandler.ts

@@ -1,19 +1,47 @@
-// Ported from .base-ui/packages/react/src/utils/useMixedToggleClickHandler.ts (v1.6.0),
-// octane-adapted (slot-threaded; native events). Returns `click`/`mousedown` handlers for a trigger
-// whose popup is toggled by two different events — opened on mousedown, closed on click — so the
-// click that follows the opening mousedown does not immediately close the popup again.
-//
-// octane adaptations: events are NATIVE (not synthetic), so the handlers take the native event
-// and `preventBaseUIHandler` is the shim `mergeProps`/`makeEventPreventable` attaches to it.
-// Upstream's empty `UseMixedToggleClickHandlerState` interface is a docs-pipeline artifact with no
-// members, so it is dropped.
-//
-// SLOT: plain-`.ts` hook; the trailing arg is the caller's slot.
-import { useMemo, useRef } from 'octane';
-
-import { S, splitSlot, subSlot } from '../internal';
-import { EMPTY_OBJECT } from './empty';
-import { ownerDocument } from './owner';
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import { ownerDocument } from '@octanejs/base-ui-utils/owner';
+import { EMPTY_OBJECT } from '@octanejs/base-ui-utils/empty';
+import type { BaseUIEvent } from '../internals/types';
+
+/**
+ * Returns `click` and `mousedown` handlers that fix the behavior of triggers of popups that are toggled by different events.
+ * For example, a button that opens a popup on mousedown and closes it on click.
+ * This hook prevents the popup from closing immediately after the mouse button is released.
+ */
+export function useMixedToggleClickHandler(params: UseMixedToggleClickHandlerParameters) {
+	const { enabled = true, mouseDownAction, open } = params;
+	const ignoreClickRef = React.useRef(false);
+
+	return React.useMemo(() => {
+		if (!enabled) {
+			return EMPTY_OBJECT;
+		}
+
+		return {
+			onMouseDown: (event: React.MouseEvent) => {
+				if ((mouseDownAction === 'open' && !open) || (mouseDownAction === 'close' && open)) {
+					ignoreClickRef.current = true;
+
+					ownerDocument(event.currentTarget as Element).addEventListener(
+						'click',
+						() => {
+							ignoreClickRef.current = false;
+						},
+						{ once: true },
+					);
+				}
+			},
+			onClick: (event: BaseUIEvent<React.MouseEvent>) => {
+				if (ignoreClickRef.current) {
+					ignoreClickRef.current = false;
+					event.preventBaseUIHandler();
+				}
+			},
+		};
+	}, [enabled, mouseDownAction, open]);
+}
 
 export interface UseMixedToggleClickHandlerParameters {
 	/**
@@ -31,47 +59,4 @@ export interface UseMixedToggleClickHandlerParameters {
 	open: boolean;
 }
 
-export interface UseMixedToggleClickHandlerReturnValue {
-	onMouseDown?: (event: any) => void;
-	onClick?: (event: any) => void;
-}
-
-export function useMixedToggleClickHandler(...args: any[]): UseMixedToggleClickHandlerReturnValue {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useMixedToggleClickHandler');
-	const { enabled = true, mouseDownAction, open } = user[0] as UseMixedToggleClickHandlerParameters;
-
-	const ignoreClickRef = useRef(false, subSlot(slot, 'ignore'));
-
-	return useMemo(
-		() => {
-			if (!enabled) {
-				return EMPTY_OBJECT;
-			}
-
-			return {
-				onMouseDown: (event: any) => {
-					if ((mouseDownAction === 'open' && !open) || (mouseDownAction === 'close' && open)) {
-						ignoreClickRef.current = true;
-
-						ownerDocument(event.currentTarget as Element).addEventListener(
-							'click',
-							() => {
-								ignoreClickRef.current = false;
-							},
-							{ once: true },
-						);
-					}
-				},
-				onClick: (event: any) => {
-					if (ignoreClickRef.current) {
-						ignoreClickRef.current = false;
-						event.preventBaseUIHandler();
-					}
-				},
-			};
-		},
-		[enabled, mouseDownAction, open],
-		subSlot(slot, 'm'),
-	);
-}
+export interface UseMixedToggleClickHandlerState {}

package/src/utils/useOpenInteractionType.ts

@@ -1,68 +1,66 @@
-// Ported from .base-ui/packages/react/src/utils/useOpenInteractionType.ts (v1.6.0), octane-adapted
-// (slot-threaded; native events). Records the interaction type (mouse/touch/pen/keyboard) that
-// opened a popup, so trigger-owned focus can behave correctly.
-import { useMemo, useState } from 'octane';
-
-import { subSlot } from '../internal';
-import { useStableCallback } from './useStableCallback';
-import { useEnhancedClickHandler, type InteractionType } from './useEnhancedClickHandler';
-import { useValueChanged } from './useValueChanged';
-import { platform } from './platform';
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import {
+	type InteractionType,
+	useEnhancedClickHandler,
+} from '@octanejs/base-ui-utils/useEnhancedClickHandler';
+import { platform } from '@octanejs/base-ui-utils/platform';
+import { useValueChanged } from '../internals/useValueChanged';
 
 export function useOpenMethodTriggerProps(
 	open: boolean | (() => boolean),
 	setOpenMethod: (interactionType: InteractionType | null) => void,
-	slot: symbol | undefined,
-): { onClick: (event: any) => void; onPointerDown: (event: any) => void } {
+) {
 	const handleTriggerClick = useStableCallback(
-		(_: any, interactionType: InteractionType) => {
+		(_: React.MouseEvent, interactionType: InteractionType) => {
 			const isOpen = typeof open === 'function' ? open() : open;
+
 			if (!isOpen) {
-				setOpenMethod(interactionType || (platform.os.ios ? 'touch' : ''));
+				setOpenMethod(
+					interactionType ||
+						// On iOS Safari, the hitslop around touch targets means tapping outside an element's
+						// bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
+						// will be "" in that case.
+						(platform.os.ios ? 'touch' : ''),
+				);
 			}
 		},
-		subSlot(slot, 'h'),
 	);
 
-	const { onClick, onPointerDown } = useEnhancedClickHandler(
-		handleTriggerClick,
-		subSlot(slot, 'ech'),
-	);
+	const { onClick, onPointerDown } = useEnhancedClickHandler(handleTriggerClick);
 
-	return useMemo(() => ({ onClick, onPointerDown }), [onClick, onPointerDown], subSlot(slot, 'm'));
+	return React.useMemo(
+		() => ({
+			onClick,
+			onPointerDown,
+		}),
+		[onClick, onPointerDown],
+	);
 }
 
 /**
- * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component, and
- * returns it alongside the trigger props that record it. Resets to `null` once the popup closes.
+ * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *
- * Used by roots that own the open method locally (Menu) rather than delegating it to each trigger
- * (Popover, which calls `useOpenMethodTriggerProps` directly and stores the result in its store).
+ * @param open The open state of the component.
  */
-export function useOpenInteractionType(
-	open: boolean,
-	slot: symbol | undefined,
-): {
-	openMethod: InteractionType | null;
-	triggerProps: { onClick: (event: any) => void; onPointerDown: (event: any) => void };
-} {
-	const [openMethod, setOpenMethod] = useState<InteractionType | null>(null, subSlot(slot, 's'));
+export function useOpenInteractionType(open: boolean) {
+	const [openMethod, setOpenMethod] = React.useState<InteractionType | null>(null);
 
-	const triggerProps = useOpenMethodTriggerProps(open, setOpenMethod, subSlot(slot, 'tp'));
+	const triggerProps = useOpenMethodTriggerProps(open, setOpenMethod);
 
-	useValueChanged(
-		open,
-		(previousOpen: boolean) => {
-			if (previousOpen && !open) {
-				setOpenMethod(null);
-			}
-		},
-		subSlot(slot, 'vc'),
-	);
+	useValueChanged(open, (previousOpen) => {
+		if (previousOpen && !open) {
+			setOpenMethod(null);
+		}
+	});
 
-	return useMemo(
-		() => ({ openMethod, triggerProps }),
+	return React.useMemo(
+		() => ({
+			openMethod,
+			triggerProps,
+		}),
 		[openMethod, triggerProps],
-		subSlot(slot, 'r'),
 	);
 }