@octanejs/base-ui 0.1.50 → 0.1.51

package/src/tabs/tab/TabsTab.tsrx

@@ -0,0 +1,280 @@
+'use client';
+import * as React from 'octane';
+import { ownerDocument } from '@octanejs/base-ui-utils/owner';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { useBaseUiId } from '../../internals/useBaseUiId';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import type { BaseUIComponentProps, NativeButtonProps } from '../../internals/types';
+import { useButton } from '../../internals/use-button';
+import { ACTIVE_COMPOSITE_ITEM } from '../../internals/composite/constants';
+import { useCompositeItem } from '../../internals/composite/item/useCompositeItem';
+import { useCompositeRootContext } from '../../internals/composite/root/CompositeRootContext';
+import type { TabsRoot } from '../root/TabsRoot.tsrx';
+import { useTabsRootContext } from '../root/TabsRootContext';
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping';
+import { useTabsListContext } from '../list/TabsListContext';
+import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+import { activeElement, contains } from '../../floating-ui-react/utils';
+
+/**
+ * An individual interactive tab button that toggles the corresponding panel.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export const TabsTab = function TabsTab(
+	componentPropsWithRef: React.PropsWithoutRef<TabsTab.Props> & { ref?: React.Ref<HTMLElement> },
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		className,
+		disabled = false,
+		render,
+		value,
+		id: idProp,
+		nativeButton = true,
+		style,
+		...elementProps
+	} = componentProps;
+
+	const {
+		value: activeTabValue,
+		getTabPanelIdByValue,
+		onValueChange,
+		orientation,
+		tabActivationDirection,
+	} = useTabsRootContext();
+
+	const { activateOnFocus, registerTabResizeObserverElement, tabsListElement } =
+		useTabsListContext();
+
+	const { highlightedIndex, onHighlightedIndexChange } = useCompositeRootContext();
+
+	const id = useBaseUiId(idProp);
+
+	const tabMetadata = React.useMemo(() => ({ disabled, id, value }), [disabled, id, value]);
+
+	const {
+		compositeProps,
+		compositeRef,
+		index,
+		// hook is used instead of the CompositeItem component
+		// because the index is needed for Tab internals
+	} = useCompositeItem<TabsTab.Metadata>({
+		metadata: tabMetadata,
+	});
+
+	const active = value === activeTabValue;
+
+	const isNavigatingRef = React.useRef(false);
+	const unobserveTabElementRef = React.useRef<(() => void) | null>(null);
+
+	// Registered from the ref callback rather than an effect so the observer
+	// follows the rendered element when the `render` prop swaps the host element.
+	const observeTabElement = useStableCallback((element: HTMLElement | null) => {
+		unobserveTabElementRef.current?.();
+		unobserveTabElementRef.current = element ? registerTabResizeObserverElement(element) : null;
+	});
+
+	// Keep the highlighted item in sync with the currently active tab
+	// when the value prop changes externally (controlled mode)
+	useIsoLayoutEffect(() => {
+		if (isNavigatingRef.current) {
+			isNavigatingRef.current = false;
+			return;
+		}
+
+		if (!(active && index > -1 && highlightedIndex !== index)) {
+			return;
+		}
+
+		// If focus is currently within the tabs list, don't override the roving
+		// focus highlight. This keeps keyboard navigation relative to the focused
+		// item after an external/asynchronous selection change.
+		const listElement = tabsListElement;
+		if (listElement != null) {
+			const activeEl = activeElement(ownerDocument(listElement));
+			if (activeEl && contains(listElement, activeEl)) {
+				return;
+			}
+		}
+
+		// Don't highlight disabled tabs to prevent them from interfering with keyboard navigation.
+		// Keyboard focus (tabIndex) should remain on an enabled tab even when a disabled tab is selected.
+		if (!disabled) {
+			onHighlightedIndexChange(index);
+		}
+	}, [active, index, highlightedIndex, onHighlightedIndexChange, disabled, tabsListElement]);
+
+	const { getButtonProps, buttonRef } = useButton({
+		disabled,
+		native: nativeButton,
+		focusableWhenDisabled: true,
+	});
+
+	const tabPanelId = getTabPanelIdByValue(value);
+
+	const isPressingRef = React.useRef(false);
+	const isMainButtonRef = React.useRef(false);
+
+	// Both callers guard on `!active`, so the current value is never re-committed.
+	function activate(event: React.NativeEvent) {
+		onValueChange(
+			value,
+			createChangeEventDetails(REASONS.none, event, undefined, {
+				activationDirection: 'none',
+			}),
+		);
+	}
+
+	function onClick(event: React.MouseEvent<HTMLButtonElement>) {
+		if (active || disabled) {
+			return;
+		}
+
+		activate(event);
+	}
+
+	function onFocus(event: React.FocusEvent<HTMLButtonElement>) {
+		if (active || disabled) {
+			return;
+		}
+
+		if (
+			activateOnFocus &&
+			(!isPressingRef.current || // keyboard or touch focus
+				isMainButtonRef.current) // main mouse button focus
+		) {
+			activate(event);
+		}
+	}
+
+	function onPointerDown(event: React.PointerEvent<HTMLButtonElement>) {
+		if (active || disabled) {
+			return;
+		}
+
+		isPressingRef.current = true;
+		// Secondary presses (context menu, middle click) may focus the tab, but
+		// must not activate it with `activateOnFocus`.
+		isMainButtonRef.current = event.button === 0;
+
+		// Registered for every button so a secondary press doesn't leave the tab
+		// stuck in the pressing state, which would suppress later focus activation.
+		const doc = ownerDocument(event.currentTarget);
+
+		function handlePointerEnd() {
+			isPressingRef.current = false;
+			isMainButtonRef.current = false;
+			doc.removeEventListener('pointerup', handlePointerEnd);
+			doc.removeEventListener('pointercancel', handlePointerEnd);
+		}
+
+		doc.addEventListener('pointerup', handlePointerEnd);
+		doc.addEventListener('pointercancel', handlePointerEnd);
+	}
+
+	const state: TabsTabState = {
+		disabled,
+		active,
+		orientation,
+		tabActivationDirection,
+	};
+
+	const element = useRenderElement('button', componentProps, {
+		state,
+		ref: [forwardedRef, buttonRef, compositeRef, observeTabElement],
+		props: [
+			compositeProps,
+			{
+				role: 'tab',
+				'aria-controls': tabPanelId,
+				'aria-selected': active,
+				id,
+				onClick,
+				onFocus,
+				onPointerDown,
+				[ACTIVE_COMPOSITE_ITEM as string]: active ? '' : undefined,
+				onKeyDownCapture() {
+					isNavigatingRef.current = true;
+				},
+			},
+			elementProps,
+			getButtonProps,
+		],
+		stateAttributesMapping: tabsStateAttributesMapping,
+	});
+
+	return element;
+};
+
+export type TabsTabValue = any | null;
+
+export type TabsTabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
+
+export interface TabsTabPosition {
+	left: number;
+	right: number;
+	top: number;
+	bottom: number;
+}
+
+export interface TabsTabSize {
+	width: number;
+	height: number;
+}
+
+export interface TabsTabMetadata {
+	disabled: boolean;
+	id: string | undefined;
+	value: TabsTab.Value | undefined;
+}
+
+export interface TabsTabState {
+	/**
+	 * Whether the component should ignore user interaction.
+	 */
+	disabled: boolean;
+	/**
+	 * Whether the component is active.
+	 */
+	active: boolean;
+	/**
+	 * The component orientation.
+	 */
+	orientation: TabsRoot.Orientation;
+	/**
+	 * The direction used for tab activation.
+	 */
+	tabActivationDirection: TabsTab.ActivationDirection;
+}
+
+export interface TabsTabProps
+	extends NativeButtonProps, BaseUIComponentProps<'button', TabsTabState> {
+	/**
+	 * The value of the Tab.
+	 */
+	value: TabsTab.Value;
+	/**
+	 * Whether the Tab is disabled.
+	 *
+	 * If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected.
+	 * Instead, the next enabled Tab will be selected.
+	 * However, it does not work like this during server-side rendering, as it is not known
+	 * during pre-rendering which Tabs are disabled.
+	 * To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
+	 */
+	disabled?: boolean | undefined;
+}
+
+export namespace TabsTab {
+	export type Value = TabsTabValue;
+	export type ActivationDirection = TabsTabActivationDirection;
+	export type Position = TabsTabPosition;
+	export type Size = TabsTabSize;
+	export type Metadata = TabsTabMetadata;
+	export type State = TabsTabState;
+	export type Props = TabsTabProps;
+}

package/src/tabs/tab/TabsTabDataAttributes.ts

@@ -0,0 +1,18 @@
+/**
+ * Indicates the direction of the activation (based on the previous active tab).
+ * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+ */
+export const activationDirection = 'data-activation-direction';
+/**
+ * Indicates the orientation of the tabs.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';
+/**
+ * Present when the tab is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the tab is active.
+ */
+export const active = 'data-active';

package/src/toast/action/ToastAction.tsrx

@@ -0,0 +1,72 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps, NativeButtonProps } from '../../internals/types';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useButton } from '../../internals/use-button/useButton';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { hasRenderableChildren } from '../utils/isRenderableNode';
+
+/**
+ * Performs an action when clicked.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+export const ToastAction = function ToastAction(
+	componentPropsWithRef: React.PropsWithoutRef<ToastAction.Props> & {
+		ref?: React.Ref<HTMLButtonElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		render,
+		className,
+		style,
+		disabled,
+		nativeButton = true,
+		...elementProps
+	} = componentProps;
+
+	const { toast } = useToastRootContext();
+
+	const computedChildren = toast.actionProps?.children ?? elementProps.children;
+
+	const { getButtonProps, buttonRef } = useButton({
+		disabled,
+		native: nativeButton,
+	});
+
+	const state: ToastActionState = {
+		type: toast.type,
+	};
+
+	const element = useRenderElement('button', componentProps, {
+		ref: [forwardedRef, buttonRef],
+		state,
+		props: [
+			elementProps,
+			toast.actionProps,
+			getButtonProps,
+			{
+				children: computedChildren,
+			},
+		],
+	});
+
+	return hasRenderableChildren(element) ? element : null;
+};
+
+export interface ToastActionState {
+	/**
+	 * The type of the toast.
+	 */
+	type: string | undefined;
+}
+
+export interface ToastActionProps
+	extends NativeButtonProps, BaseUIComponentProps<'button', ToastActionState> {}
+
+export namespace ToastAction {
+	export type State = ToastActionState;
+	export type Props = ToastActionProps;
+}

package/src/toast/action/ToastActionDataAttributes.ts

@@ -0,0 +1,5 @@
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export const type = 'data-type';

package/src/toast/arrow/ToastArrow.tsrx

@@ -0,0 +1,57 @@
+'use client';
+import type * as React from 'octane';
+import { useToastPositionerContext } from '../positioner/ToastPositionerContext';
+import type { BaseUIComponentProps } from '../../internals/types';
+import type { Side, Align } from '../../internals/useAnchorPositioning';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+
+/**
+ * Displays an element positioned against the toast anchor.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+export const ToastArrow = function ToastArrow(
+	componentPropsWithRef: React.PropsWithoutRef<ToastArrow.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { className, render, style, ...elementProps } = componentProps;
+
+	const { arrowRef, side, align, arrowUncentered, arrowStyles } = useToastPositionerContext();
+
+	const state: ToastArrowState = {
+		side,
+		align,
+		uncentered: arrowUncentered,
+	};
+
+	return useRenderElement('div', componentProps, {
+		state,
+		ref: [forwardedRef, arrowRef],
+		props: [{ style: arrowStyles, 'aria-hidden': true }, elementProps],
+	});
+};
+
+export interface ToastArrowState {
+	/**
+	 * The side of the anchor the component is placed on.
+	 */
+	side: Side;
+	/**
+	 * The alignment of the component relative to the anchor.
+	 */
+	align: Align;
+	/**
+	 * Whether the arrow cannot be centered on the anchor.
+	 */
+	uncentered: boolean;
+}
+
+export interface ToastArrowProps extends BaseUIComponentProps<'div', ToastArrowState> {}
+
+export namespace ToastArrow {
+	export type State = ToastArrowState;
+	export type Props = ToastArrowProps;
+}

package/src/toast/arrow/ToastArrowDataAttributes.ts

@@ -0,0 +1,16 @@
+import { CommonPopupDataAttributes } from '../../utils/popupStateMapping';
+
+/**
+ * Indicates which side the toast is positioned relative to the anchor.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export const side = CommonPopupDataAttributes.side;
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export const align = CommonPopupDataAttributes.align;
+/**
+ * Present when the toast arrow is uncentered.
+ */
+export const uncentered = 'data-uncentered';

package/src/toast/close/ToastClose.tsrx

@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'octane';
+import type { BaseUIComponentProps, NativeButtonProps } from '../../internals/types';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useToastProviderContext } from '../provider/ToastProviderContext';
+import { useButton } from '../../internals/use-button/useButton';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+
+/**
+ * Closes the toast when clicked.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+export const ToastClose = function ToastClose(
+	componentPropsWithRef: React.PropsWithoutRef<ToastClose.Props> & {
+		ref?: React.Ref<HTMLButtonElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		render,
+		className,
+		style,
+		disabled,
+		nativeButton = true,
+		...elementProps
+	} = componentProps;
+
+	const store = useToastProviderContext();
+	const { toast, expanded } = useToastRootContext();
+
+	const [hasFocus, setHasFocus] = React.useState(false);
+
+	const { getButtonProps, buttonRef } = useButton({
+		disabled,
+		native: nativeButton,
+	});
+
+	const state: ToastCloseState = {
+		type: toast.type,
+	};
+
+	return useRenderElement('button', componentProps, {
+		ref: [forwardedRef, buttonRef],
+		state,
+		props: [
+			{
+				'aria-hidden': !expanded && !hasFocus,
+				onClick() {
+					store.closeToast(toast.id);
+				},
+				onFocus() {
+					setHasFocus(true);
+				},
+				onBlur() {
+					setHasFocus(false);
+				},
+			},
+			elementProps,
+			getButtonProps,
+		],
+	});
+};
+
+export interface ToastCloseState {
+	/**
+	 * The type of the toast.
+	 */
+	type: string | undefined;
+}
+
+export interface ToastCloseProps
+	extends NativeButtonProps, BaseUIComponentProps<'button', ToastCloseState> {}
+
+export namespace ToastClose {
+	export type State = ToastCloseState;
+	export type Props = ToastCloseProps;
+}

package/src/toast/close/ToastCloseDataAttributes.ts

@@ -0,0 +1,5 @@
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export const type = 'data-type';

package/src/toast/content/ToastContent.tsrx

@@ -0,0 +1,76 @@
+'use client';
+import * as React from 'octane';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+
+/**
+ * A container for the contents of a toast.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
+ */
+export const ToastContent = function ToastContent(
+	componentPropsWithRef: React.PropsWithoutRef<ToastContent.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, ...elementProps } = componentProps;
+
+	const { visibleIndex, expanded, recalculateHeight } = useToastRootContext();
+
+	const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+	useIsoLayoutEffect(() => {
+		recalculateHeight();
+
+		const node = contentRef.current;
+		if (!node || typeof ResizeObserver !== 'function' || typeof MutationObserver !== 'function') {
+			return undefined;
+		}
+
+		const resizeObserver = new ResizeObserver(() => recalculateHeight(true));
+		const mutationObserver = new MutationObserver(() => recalculateHeight(true));
+
+		resizeObserver.observe(node);
+		mutationObserver.observe(node, { childList: true, subtree: true, characterData: true });
+
+		return () => {
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+		};
+	}, [recalculateHeight]);
+
+	const behind = visibleIndex > 0;
+
+	const state: ToastContentState = {
+		expanded,
+		behind,
+	};
+
+	return useRenderElement('div', componentProps, {
+		ref: [forwardedRef, contentRef],
+		state,
+		props: elementProps,
+	});
+};
+
+export interface ToastContentState {
+	/**
+	 * Whether the toast viewport is expanded.
+	 */
+	expanded: boolean;
+	/**
+	 * Whether the toast is behind the frontmost toast in the stack.
+	 */
+	behind: boolean;
+}
+
+export interface ToastContentProps extends BaseUIComponentProps<'div', ToastContentState> {}
+
+export namespace ToastContent {
+	export type State = ToastContentState;
+	export type Props = ToastContentProps;
+}

package/src/toast/content/ToastContentDataAttributes.ts

@@ -0,0 +1,10 @@
+/**
+ * Present when the toast viewport is expanded.
+ * @type {boolean}
+ */
+export const expanded = 'data-expanded';
+/**
+ * Present when the toast is behind the frontmost toast in the stack.
+ * @type {boolean}
+ */
+export const behind = 'data-behind';