@octanejs/base-ui 0.1.49 → 0.1.51

package/src/select/popup/SelectPopup.tsrx

@@ -0,0 +1,596 @@
+'use client';
+import * as React from 'octane';
+import { rectToClientRect } from '@floating-ui/utils';
+import { addEventListener } from '@octanejs/base-ui-utils/addEventListener';
+import { platform } from '@octanejs/base-ui-utils/platform';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { ownerDocument, ownerWindow } from '@octanejs/base-ui-utils/owner';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import { useAnimationFrame } from '@octanejs/base-ui-utils/useAnimationFrame';
+import type { InteractionType } from '@octanejs/base-ui-utils/useEnhancedClickHandler';
+import { clamp } from '@octanejs/base-ui-utils/clamp';
+import { FloatingFocusManager, platform as floatingPlatform } from '../../floating-ui-react';
+import type { ClientRectObject } from '../../floating-ui-react';
+import type { BaseUIComponentProps, HTMLProps } from '../../internals/types';
+import {
+	useSelectFloatingContext,
+	useSelectRootContext,
+	useSelectRootPropsContext,
+} from '../root/SelectRootContext';
+import { popupStateMapping } from '../../utils/popupStateMapping';
+import type { Side, Align } from '../../internals/useAnchorPositioning';
+import type { StateAttributesMapping } from '../../internals/getStateAttributesProps';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+import { useSelectPositionerContext } from '../positioner/SelectPositionerContext';
+import { styleDisableScrollbar } from '../../utils/styles.tsrx';
+import { transitionStatusMapping } from '../../internals/stateAttributesMapping';
+import { useOpenChangeComplete } from '../../internals/useOpenChangeComplete.tsrx';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { clearStyles, LIST_FUNCTIONAL_STYLES } from './utils';
+import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+import { useToolbarRootContext } from '../../toolbar/root/ToolbarRootContext';
+import { COMPOSITE_KEYS } from '../../internals/composite/composite';
+import { getDisabledMountTransitionStyles } from '../../internals/getDisabledMountTransitionStyles';
+import { getMaxScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from '../../utils/scrollEdges';
+import { useCSPContext } from '../../internals/csp-context/CSPContext.tsrx';
+import { useDirection } from '../../internals/direction-context/DirectionContext.tsrx';
+import * as SelectPositionerCssVars from '../positioner/SelectPositionerCssVars';
+
+const stateAttributesMapping: StateAttributesMapping<SelectPopupState> = {
+	...popupStateMapping,
+	...transitionStatusMapping,
+};
+
+/**
+ * A container for the select list.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export const SelectPopup = function SelectPopup(
+	componentPropsWithRef: React.PropsWithoutRef<SelectPopup.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, finalFocus, ...elementProps } = componentProps;
+
+	const store = useSelectRootContext();
+	const { multiple, readOnly, highlightItemOnHover } = useSelectRootPropsContext();
+	const floatingRootContext = useSelectFloatingContext();
+	const {
+		side,
+		align,
+		alignItemWithTriggerActive,
+		isPositioned,
+		setControlledAlignItemWithTrigger,
+	} = useSelectPositionerContext();
+	const insideToolbar = useToolbarRootContext(true) != null;
+	const direction = useDirection();
+
+	const { nonce, disableStyleElements } = useCSPContext();
+
+	const id = store.useState('id');
+	const open = store.useState('open');
+	const openMethod = store.useState('openMethod');
+	const mounted = store.useState('mounted');
+	const popupProps = store.useState('popupProps');
+	const transitionStatus = store.useState('transitionStatus');
+	const triggerElement = store.useState('triggerElement');
+	const positionerElement = store.useState('positionerElement');
+	const listElement = store.useState('listElement');
+	const reachedMaxHeightRef = React.useRef(false);
+	const initialPlacedRef = React.useRef(false);
+	const originalPositionerStylesRef = React.useRef<React.CSSProperties>({});
+
+	const scrollArrowFrame = useAnimationFrame();
+
+	const handleScroll = useStableCallback((scroller: HTMLDivElement) => {
+		if (!positionerElement || !store.context.popupRef.current || !initialPlacedRef.current) {
+			return;
+		}
+
+		const isTopPositioned = positionerElement.style.top === '0px';
+		const isBottomPositioned = positionerElement.style.bottom === '0px';
+
+		if (
+			reachedMaxHeightRef.current ||
+			!alignItemWithTriggerActive ||
+			(!isTopPositioned && !isBottomPositioned)
+		) {
+			store.context.handleScrollArrowVisibility(scroller);
+			return;
+		}
+
+		const scale = getScale(positionerElement);
+		const currentHeight = normalizeSize(
+			positionerElement.getBoundingClientRect().height,
+			'y',
+			scale,
+		);
+		const doc = ownerDocument(positionerElement);
+		const win = ownerWindow(positionerElement);
+		const positionerStyles = win.getComputedStyle(positionerElement);
+		const marginTop = parseFloat(positionerStyles.marginTop);
+		const marginBottom = parseFloat(positionerStyles.marginBottom);
+		const maxPopupHeight = getMaxPopupHeight(win.getComputedStyle(store.context.popupRef.current));
+		const maxAvailableHeight = Math.min(
+			doc.documentElement.clientHeight - marginTop - marginBottom,
+			maxPopupHeight,
+		);
+
+		const scrollTop = scroller.scrollTop;
+		const maxScrollTop = getMaxScrollTop(scroller);
+
+		// `Infinity` requests a scroll to the recomputed maximum offset.
+		let nextScrollTop: number | null = null;
+
+		const setHeight = (height: number) => {
+			positionerElement.style.height = `${height}px`;
+		};
+
+		const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
+		const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
+
+		if (diff <= SCROLL_EDGE_TOLERANCE_PX) {
+			const heightDelta = clamp(diff, 0, maxAvailableHeight - currentHeight);
+			if (heightDelta > 0) {
+				// Consume the remaining scroll in height.
+				setHeight(currentHeight + heightDelta);
+			}
+			scroller.scrollTop = isTopPositioned ? maxScrollTop : 0;
+			if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EDGE_TOLERANCE_PX) {
+				reachedMaxHeightRef.current = true;
+			}
+			store.context.handleScrollArrowVisibility(scroller);
+			return;
+		}
+
+		if (maxAvailableHeight - nextHeight > SCROLL_EDGE_TOLERANCE_PX) {
+			nextScrollTop = isTopPositioned ? Infinity : 0;
+		} else if (isBottomPositioned && scrollTop < maxScrollTop) {
+			const overshoot = currentHeight + diff - maxAvailableHeight;
+			nextScrollTop = scrollTop - (diff - overshoot);
+		}
+
+		const nextPositionerHeight = Math.ceil(nextHeight);
+
+		if (nextPositionerHeight !== 0) {
+			setHeight(nextPositionerHeight);
+		}
+
+		if (nextScrollTop != null) {
+			// Recompute bounds after resizing (clientHeight likely changed).
+			const target = clamp(nextScrollTop, 0, getMaxScrollTop(scroller));
+
+			// Avoid adjustments that re-trigger scroll events forever.
+			if (Math.abs(scroller.scrollTop - target) > SCROLL_EDGE_TOLERANCE_PX) {
+				scroller.scrollTop = target;
+			}
+		}
+
+		if (nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
+			reachedMaxHeightRef.current = true;
+		}
+
+		store.context.handleScrollArrowVisibility(scroller);
+	});
+
+	React.useImperativeHandle(store.context.scrollHandlerRef, () => handleScroll, [handleScroll]);
+
+	useOpenChangeComplete({
+		open,
+		ref: store.context.popupRef,
+		onComplete() {
+			if (open) {
+				store.context.onOpenChangeComplete(true);
+			}
+		},
+	});
+
+	const state: SelectPopupState = {
+		open,
+		transitionStatus,
+		side,
+		align,
+	};
+
+	useIsoLayoutEffect(() => {
+		if (
+			!positionerElement ||
+			!store.context.popupRef.current ||
+			Object.keys(originalPositionerStylesRef.current).length
+		) {
+			return;
+		}
+
+		originalPositionerStylesRef.current = {
+			top: positionerElement.style.top || '0',
+			left: positionerElement.style.left || '0',
+			right: positionerElement.style.right,
+			height: positionerElement.style.height,
+			bottom: positionerElement.style.bottom,
+			minHeight: positionerElement.style.minHeight,
+			maxHeight: positionerElement.style.maxHeight,
+			marginTop: positionerElement.style.marginTop,
+			marginBottom: positionerElement.style.marginBottom,
+		};
+	}, [store, positionerElement]);
+
+	useIsoLayoutEffect(() => {
+		if (open || alignItemWithTriggerActive) {
+			return;
+		}
+
+		initialPlacedRef.current = false;
+		reachedMaxHeightRef.current = false;
+		clearStyles(positionerElement, originalPositionerStylesRef.current);
+	}, [open, alignItemWithTriggerActive, positionerElement]);
+
+	useIsoLayoutEffect(() => {
+		const popupElement = store.context.popupRef.current;
+
+		// Wait for Floating UI's first positioning pass before reading DOM geometry.
+		// We replace the final coordinates for aligned selects, but still need middleware
+		// like `size()` to set CSS variables such as `--anchor-width`.
+		if (
+			!open ||
+			!triggerElement ||
+			!positionerElement ||
+			!popupElement ||
+			(alignItemWithTriggerActive && !isPositioned) ||
+			store.state.transitionStatus === 'ending'
+		) {
+			return;
+		}
+
+		initialPlacedRef.current = true;
+		popupElement.style.removeProperty(SelectPositionerCssVars.transformOrigin);
+
+		if (!alignItemWithTriggerActive) {
+			// The wrapper supplies the scroller: the list owns scrolling once it has mounted, and
+			// this effect re-runs (cancelling the stale frame) when that happens.
+			scrollArrowFrame.request(() =>
+				store.context.handleScrollArrowVisibility(listElement || popupElement),
+			);
+			return;
+		}
+
+		// Ensure we remove any transforms that can affect the location of the popup
+		// and therefore the calculations.
+		const restoreTransformStyles = unsetTransformStyles(popupElement);
+
+		try {
+			let textElement = store.context.selectedItemTextRef.current;
+
+			if (!textElement?.isConnected) {
+				const hasSelectedValue = store.select('hasSelectedValue');
+				textElement =
+					!hasSelectedValue && store.context.firstItemTextRef.current?.isConnected
+						? store.context.firstItemTextRef.current
+						: null;
+			}
+
+			const valueElement = store.context.valueRef.current;
+
+			const win = ownerWindow(positionerElement);
+			const positionerStyles = win.getComputedStyle(positionerElement);
+			const popupStyles = win.getComputedStyle(popupElement);
+
+			const doc = ownerDocument(triggerElement);
+			const scale = getScale(triggerElement);
+			const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+
+			const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
+			const triggerHeight = triggerRect.height;
+			const scroller = listElement || popupElement;
+			const scrollHeight = scroller.scrollHeight;
+
+			const borderBottom = parseFloat(popupStyles.borderBottomWidth);
+			// The `|| N` fallbacks cover an unset/`auto` value (parses to `NaN`). Note a literal `0`
+			// also resolves to the fallback, so an explicit `margin: 0` or `min-height: 0` still takes
+			// the default below.
+			const marginTop = parseFloat(positionerStyles.marginTop) || 10;
+			const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
+			const minHeight = parseFloat(positionerStyles.minHeight) || 100;
+			const maxPopupHeight = getMaxPopupHeight(popupStyles);
+
+			const paddingLeft = 5;
+			const paddingRight = 5;
+			const triggerCollisionThreshold = 20;
+
+			const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+			const viewportWidth = doc.documentElement.clientWidth;
+			const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
+
+			let textRect: ClientRectObject | undefined;
+			let alignedLeft =
+				direction === 'rtl' ? triggerRect.right - positionerRect.width : triggerRect.left;
+			let offsetY = 0;
+
+			if (textElement && valueElement) {
+				const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+				textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
+
+				alignedLeft =
+					positionerRect.left +
+					(direction === 'rtl' ? valueRect.right - textRect.right : valueRect.left - textRect.left);
+				const valueCenterFromTriggerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
+				const textCenterFromPositionerTop = textRect.top - positionerRect.top + textRect.height / 2;
+
+				offsetY = textCenterFromPositionerTop - valueCenterFromTriggerTop;
+			}
+
+			const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
+			let height = Math.min(viewportHeight, idealHeight);
+			const maxHeight = viewportHeight - marginTop - marginBottom;
+			const scrollTop = idealHeight - height;
+
+			const maxRight = viewportWidth - paddingRight;
+
+			positionerElement.style.left = `${clamp(
+				alignedLeft,
+				paddingLeft,
+				maxRight - positionerRect.width,
+			)}px`;
+			positionerElement.style.height = `${height}px`;
+			// `none` (not the invalid `auto`) so the explicit height governs in align mode and isn't
+			// clamped by a `max-height` from user CSS.
+			positionerElement.style.maxHeight = 'none';
+			positionerElement.style.marginTop = `${marginTop}px`;
+			positionerElement.style.marginBottom = `${marginBottom}px`;
+			popupElement.style.height = '100%';
+
+			const maxScrollTop = getMaxScrollTop(scroller);
+			const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EDGE_TOLERANCE_PX;
+
+			if (isTopPositioned) {
+				height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
+			}
+
+			// When the trigger is too close to the top or bottom of the viewport, or the minHeight is
+			// reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
+			const fallbackToAlignPopupToTrigger =
+				triggerRect.top < triggerCollisionThreshold ||
+				triggerRect.bottom > viewportHeight - triggerCollisionThreshold ||
+				Math.ceil(height) + SCROLL_EDGE_TOLERANCE_PX < Math.min(scrollHeight, minHeight);
+
+			// Safari doesn't position the popup correctly when pinch-zoomed.
+			const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && platform.engine.webkit;
+
+			if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
+				clearStyles(positionerElement, originalPositionerStylesRef.current);
+				setControlledAlignItemWithTrigger(false);
+				return;
+			}
+
+			const initialHeight = Math.max(minHeight, height);
+
+			if (isTopPositioned) {
+				const topOffset = Math.max(0, viewportHeight - idealHeight);
+				positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
+				positionerElement.style.height = `${height}px`;
+				scroller.scrollTop = getMaxScrollTop(scroller);
+			} else {
+				positionerElement.style.bottom = '0';
+				scroller.scrollTop = scrollTop;
+			}
+
+			if (textRect) {
+				const popupTop = positionerRect.top;
+				const popupHeight = positionerRect.height;
+				const textCenterY = textRect.top + textRect.height / 2;
+
+				const clampedY = clamp(
+					popupHeight > 0 ? ((textCenterY - popupTop) / popupHeight) * 100 : 50,
+					0,
+					100,
+				);
+
+				popupElement.style.setProperty(SelectPositionerCssVars.transformOrigin, `50% ${clampedY}%`);
+			}
+
+			if (initialHeight === viewportHeight || height >= maxPopupHeight) {
+				reachedMaxHeightRef.current = true;
+			}
+
+			store.context.handleScrollArrowVisibility(scroller);
+
+			if (
+				highlightItemOnHover &&
+				store.state.selectedIndex === null &&
+				store.state.activeIndex === null &&
+				store.context.listRef.current[0] != null
+			) {
+				store.set('activeIndex', 0);
+			}
+		} finally {
+			restoreTransformStyles();
+		}
+	}, [
+		store,
+		open,
+		positionerElement,
+		triggerElement,
+		alignItemWithTriggerActive,
+		setControlledAlignItemWithTrigger,
+		scrollArrowFrame,
+		listElement,
+		highlightItemOnHover,
+		direction,
+		isPositioned,
+	]);
+
+	React.useEffect(() => {
+		if (!alignItemWithTriggerActive || !positionerElement || !open) {
+			return undefined;
+		}
+
+		const win = ownerWindow(positionerElement);
+
+		function handleResize(event: UIEvent) {
+			store.context.setOpen(false, createChangeEventDetails(REASONS.windowResize, event));
+		}
+
+		return addEventListener(win, 'resize', handleResize);
+	}, [store, alignItemWithTriggerActive, positionerElement, open]);
+
+	const defaultProps: HTMLProps = {
+		...(listElement
+			? {
+					role: 'presentation',
+				}
+			: {
+					role: 'listbox',
+					'aria-multiselectable': multiple || undefined,
+					'aria-readonly': readOnly || undefined,
+					id: `${id}-list`,
+				}),
+		onKeyDown(event) {
+			if (insideToolbar && COMPOSITE_KEYS.has(event.key)) {
+				event.stopPropagation();
+			}
+		},
+		onScroll(event) {
+			if (listElement) {
+				return;
+			}
+			handleScroll(event.currentTarget);
+		},
+		...(alignItemWithTriggerActive && {
+			style: listElement ? { height: '100%' } : LIST_FUNCTIONAL_STYLES,
+		}),
+		className:
+			!listElement && alignItemWithTriggerActive ? styleDisableScrollbar.className : undefined,
+	};
+
+	const element = useRenderElement('div', componentProps, {
+		ref: [forwardedRef, store.context.popupRef],
+		state,
+		stateAttributesMapping,
+		props: [
+			popupProps,
+			defaultProps,
+			getDisabledMountTransitionStyles(transitionStatus),
+			elementProps,
+		],
+	});
+
+	return (
+		<React.Fragment>
+			{!disableStyleElements && styleDisableScrollbar.getElement(nonce)}
+			<FloatingFocusManager
+				context={floatingRootContext}
+				modal={false}
+				disabled={!mounted}
+				openInteractionType={openMethod}
+				returnFocus={finalFocus}
+				restoreFocus
+			>
+				{element}
+			</FloatingFocusManager>
+		</React.Fragment>
+	);
+};
+
+export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopupState> {
+	children?: React.OctaneNode;
+	/**
+	 * Determines the element to focus when the select popup is closed.
+	 *
+	 * - `false`: Do not move focus.
+	 * - `true`: Move focus based on the default behavior (trigger or previously focused element).
+	 * - `RefObject`: Move focus to the ref element.
+	 * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
+	 *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
+	 */
+	finalFocus?:
+		| boolean
+		| React.RefObject<HTMLElement | null>
+		| ((closeType: InteractionType) => boolean | HTMLElement | null | void)
+		| undefined;
+}
+
+export interface SelectPopupState {
+	/**
+	 * The side of the anchor the component is placed on.
+	 */
+	side: Side | 'none';
+	/**
+	 * The alignment of the component relative to the anchor.
+	 */
+	align: Align;
+	/**
+	 * Whether the component is open.
+	 */
+	open: boolean;
+	/**
+	 * The transition status of the component.
+	 */
+	transitionStatus: TransitionStatus;
+}
+
+export namespace SelectPopup {
+	export type Props = SelectPopupProps;
+	export type State = SelectPopupState;
+}
+
+function getMaxPopupHeight(popupStyles: CSSStyleDeclaration) {
+	const maxHeightStyle = popupStyles.maxHeight;
+	return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
+}
+
+function getMaxScrollTop(scroller: HTMLElement) {
+	return getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+}
+
+function getScale(element: HTMLElement) {
+	// The platform API is async-capable, but the DOM platform returns a plain scale object.
+	return floatingPlatform.getScale(element) as { x: number; y: number };
+}
+
+function normalizeSize(size: number, axis: 'x' | 'y', scale: { x: number; y: number }) {
+	return size / scale[axis];
+}
+
+function normalizeRect(
+	rect: DOMRect | DOMRectReadOnly,
+	scale: { x: number; y: number },
+): ClientRectObject {
+	return rectToClientRect({
+		x: normalizeSize(rect.x, 'x', scale),
+		y: normalizeSize(rect.y, 'y', scale),
+		width: normalizeSize(rect.width, 'x', scale),
+		height: normalizeSize(rect.height, 'y', scale),
+	});
+}
+
+const TRANSFORM_STYLE_RESETS = [
+	['transform', 'none'],
+	['scale', '1'],
+	['translate', '0 0'],
+] as const;
+
+type TransformStyleProperty = (typeof TRANSFORM_STYLE_RESETS)[number][0];
+
+function unsetTransformStyles(popupElement: HTMLElement) {
+	const { style } = popupElement;
+	const originalStyles = {} as Record<TransformStyleProperty, string>;
+
+	for (const [property, value] of TRANSFORM_STYLE_RESETS) {
+		originalStyles[property] = style.getPropertyValue(property);
+		style.setProperty(property, value, 'important');
+	}
+
+	return () => {
+		for (const [property] of TRANSFORM_STYLE_RESETS) {
+			const originalValue = originalStyles[property];
+			if (originalValue) {
+				style.setProperty(property, originalValue);
+			} else {
+				style.removeProperty(property);
+			}
+		}
+	};
+}

package/src/select/popup/SelectPopupDataAttributes.ts

@@ -0,0 +1,28 @@
+import { CommonPopupDataAttributes } from '../../utils/popupStateMapping';
+
+/**
+ * Present when the select is open.
+ */
+export const open = CommonPopupDataAttributes.open;
+/**
+ * Present when the select is closed.
+ */
+export const closed = CommonPopupDataAttributes.closed;
+/**
+ * Present when the select begins animating in.
+ */
+export const startingStyle = CommonPopupDataAttributes.startingStyle;
+/**
+ * Present when the select is animating out.
+ */
+export const endingStyle = CommonPopupDataAttributes.endingStyle;
+/**
+ * Indicates which side the popup is positioned relative to the trigger.
+ * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export const side = CommonPopupDataAttributes.side;
+/**
+ * Indicates how the popup is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export const align = CommonPopupDataAttributes.align;

package/src/select/popup/utils.ts

@@ -0,0 +1,13 @@
+import type * as React from 'octane';
+export function clearStyles(element: HTMLElement | null, originalStyles: React.CSSProperties) {
+	if (element) {
+		Object.assign(element.style, originalStyles);
+	}
+}
+
+export const LIST_FUNCTIONAL_STYLES = {
+	position: 'relative',
+	maxHeight: '100%',
+	overflowX: 'hidden',
+	overflowY: 'auto',
+} as const;

package/src/select/portal/SelectPortal.tsrx

@@ -0,0 +1,45 @@
+'use client';
+import * as React from 'octane';
+import { FloatingPortal } from '../../floating-ui-react';
+import { type BaseUIComponentProps } from '../../internals/types';
+import { useSelectRootContext } from '../root/SelectRootContext';
+
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export const SelectPortal = function SelectPortal(
+	portalPropsWithRef: React.PropsWithoutRef<SelectPortal.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...portalProps } = portalPropsWithRef;
+	const store = useSelectRootContext();
+	const mounted = store.useState('mounted');
+	const forceMount = store.useState('forceMount');
+
+	const shouldRender = mounted || forceMount;
+	if (!shouldRender) {
+		return null;
+	}
+
+	return <FloatingPortal ref={forwardedRef} {...portalProps} />;
+};
+
+export interface SelectPortalState {}
+
+export interface SelectPortalProps extends BaseUIComponentProps<'div', SelectPortalState> {
+	/**
+	 * A parent element to render the portal element into.
+	 */
+	container?:
+		HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined;
+}
+
+export namespace SelectPortal {
+	export type State = SelectPortalState;
+	export type Props = SelectPortalProps;
+}