@octanejs/aria 0.0.4 → 0.0.5

package/src/components/Tooltip.ts

@@ -0,0 +1,249 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/Tooltip.tsx).
+// octane adaptations: `.tsx` → `.ts`, JSX → `createElement`; NO forwardRef — the forwarded ref
+// is `props.ref`, passed into `useContextProps` explicitly; the plain-`.ts` components use the
+// S()/subSlot component-slot convention; `OverlayContainer` comes from the binding's ported
+// `../overlays/useModal`, `FocusableProvider` from `../interactions/useFocusable`, and the
+// enter/exit animation hooks from `../utils/animation`; React's ReactNode/JSX/CSSProperties
+// types → structural aliases.
+import type {
+	AriaLabelingProps,
+	FocusableElement,
+	RefObject as SharedRefObject,
+} from '@react-types/shared';
+import { createContext, createElement, useContext, useRef } from 'octane';
+
+import {
+	type AriaPositionProps,
+	type Placement,
+	type PlacementAxis,
+	type PositionProps,
+	useOverlayPosition,
+} from '../overlays/useOverlayPosition';
+import { S, subSlot } from '../internal';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { FocusableProvider } from '../interactions/useFocusable';
+import { mergeProps } from '../utils/mergeProps';
+import { OverlayArrowContext } from './OverlayArrow';
+import { OverlayContainer } from '../overlays/useModal';
+import type { OverlayTriggerProps } from '../stately/overlays/useOverlayTriggerState';
+import {
+	type TooltipTriggerProps,
+	type TooltipTriggerState,
+	useTooltipTriggerState,
+} from '../stately/tooltip/useTooltipTriggerState';
+import { useEnterAnimation, useExitAnimation } from '../utils/animation';
+import { useTooltip } from '../tooltip/useTooltip';
+import { useTooltipTrigger } from '../tooltip/useTooltipTrigger';
+import {
+	type ClassNameOrFunction,
+	type ContextValue,
+	dom,
+	Provider,
+	type RenderProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+
+// octane adaptations: structural aliases for the React types upstream drags along.
+type ReactNode = any;
+type GlobalDOMAttributes = Record<string, any>;
+type RefObject<T> = SharedRefObject<T>;
+
+export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
+	children: ReactNode;
+}
+
+export interface TooltipProps
+	extends
+		PositionProps,
+		Pick<AriaPositionProps, 'arrowBoundaryOffset'>,
+		OverlayTriggerProps,
+		AriaLabelingProps,
+		RenderProps<TooltipRenderProps>,
+		GlobalDOMAttributes {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-Tooltip'
+	 */
+	className?: ClassNameOrFunction<TooltipRenderProps>;
+	/**
+	 * The ref for the element which the tooltip positions itself with respect to.
+	 *
+	 * When used within a TooltipTrigger this is set automatically. It is only required when used
+	 * standalone.
+	 */
+	triggerRef?: RefObject<Element | null>;
+	/**
+	 * Whether the tooltip is currently performing an entry animation.
+	 */
+	isEntering?: boolean;
+	/**
+	 * Whether the tooltip is currently performing an exit animation.
+	 */
+	isExiting?: boolean;
+	/**
+	 * The container element in which the overlay portal will be placed. This may have unknown
+	 * behavior depending on where it is portalled to.
+	 *
+	 * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
+	 * @default document.body
+	 */
+	UNSTABLE_portalContainer?: Element;
+	/**
+	 * The placement of the tooltip with respect to the trigger.
+	 *
+	 * @default 'top'
+	 */
+	placement?: Placement;
+}
+
+export interface TooltipRenderProps {
+	/**
+	 * The placement of the tooltip relative to the trigger.
+	 *
+	 * @selector [data-placement="left | right | top | bottom"]
+	 */
+	placement: PlacementAxis | null;
+	/**
+	 * Whether the tooltip is currently entering. Use this to apply animations.
+	 *
+	 * @selector [data-entering]
+	 */
+	isEntering: boolean;
+	/**
+	 * Whether the tooltip is currently exiting. Use this to apply animations.
+	 *
+	 * @selector [data-exiting]
+	 */
+	isExiting: boolean;
+	/**
+	 * State of the tooltip.
+	 */
+	state: TooltipTriggerState;
+}
+
+export const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);
+export const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);
+
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+export function TooltipTrigger(props: TooltipTriggerComponentProps): any {
+	const slot = S('TooltipTrigger');
+	let state = useTooltipTriggerState(props, subSlot(slot, 'state'));
+	let ref = useRef<FocusableElement | null>(null, subSlot(slot, 'ref'));
+	let { triggerProps, tooltipProps } = useTooltipTrigger(
+		props,
+		state,
+		ref,
+		subSlot(slot, 'trigger'),
+	);
+
+	return createElement(Provider, {
+		values: [
+			[TooltipTriggerStateContext, state],
+			[TooltipContext, { ...tooltipProps, triggerRef: ref }],
+		] as any,
+		children: createElement(FocusableProvider, {
+			...triggerProps,
+			ref,
+			children: props.children,
+		}),
+	});
+}
+
+/**
+ * A tooltip displays a description of an element on hover or focus.
+ */
+export function Tooltip(allProps: TooltipProps): any {
+	const slot = S('Tooltip');
+	let { UNSTABLE_portalContainer, ...props } = allProps;
+	let ref: any;
+	[props, ref] = useContextProps(props, (props as any).ref, TooltipContext, subSlot(slot, 'ctx'));
+	let contextState = useContext(TooltipTriggerStateContext);
+	let localState = useTooltipTriggerState(props, subSlot(slot, 'state'));
+	let state =
+		props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+	let isExiting =
+		useExitAnimation(ref, state.isOpen, subSlot(slot, 'exit')) || props.isExiting || false;
+	if (!state.isOpen && !isExiting) {
+		return null;
+	}
+
+	return createElement(OverlayContainer, {
+		portalContainer: UNSTABLE_portalContainer,
+		children: createElement(TooltipInner, { ...props, tooltipRef: ref, isExiting }),
+	});
+}
+
+function TooltipInner(
+	allProps: TooltipProps & { isExiting: boolean; tooltipRef: RefObject<HTMLDivElement | null> },
+): any {
+	const slot = S('TooltipInner');
+	let props: any = allProps;
+	let state = useContext(TooltipTriggerStateContext)!;
+	let arrowRef = useRef<HTMLDivElement | null>(null, subSlot(slot, 'arrowRef'));
+
+	let { overlayProps, arrowProps, placement, triggerAnchorPoint } = useOverlayPosition(
+		{
+			placement: props.placement || 'top',
+			targetRef: props.triggerRef!,
+			overlayRef: props.tooltipRef,
+			arrowRef,
+			offset: props.offset,
+			crossOffset: props.crossOffset,
+			isOpen: state.isOpen,
+			arrowBoundaryOffset: props.arrowBoundaryOffset,
+			shouldFlip: props.shouldFlip,
+			containerPadding: props.containerPadding,
+			onClose: () => state.close(true),
+		},
+		subSlot(slot, 'position'),
+	);
+
+	let isEntering =
+		useEnterAnimation(props.tooltipRef, !!placement, subSlot(slot, 'enter')) ||
+		props.isEntering ||
+		false;
+	let renderProps = useRenderProps(
+		{
+			...props,
+			defaultClassName: 'react-aria-Tooltip',
+			values: {
+				placement,
+				isEntering,
+				isExiting: props.isExiting,
+				state,
+			},
+		},
+		subSlot(slot, 'render'),
+	);
+
+	props = mergeProps(props, overlayProps);
+	let { tooltipProps } = useTooltip(props, state, subSlot(slot, 'tooltip'));
+
+	let DOMProps = filterDOMProps(props, { global: true });
+
+	return createElement(dom.div, {
+		...mergeProps(DOMProps, renderProps, tooltipProps),
+		ref: props.tooltipRef,
+		style: {
+			...overlayProps.style,
+			'--trigger-anchor-point': triggerAnchorPoint
+				? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`
+				: undefined,
+			...renderProps.style,
+		},
+		'data-placement': placement ?? undefined,
+		'data-entering': isEntering || undefined,
+		'data-exiting': props.isExiting || undefined,
+		children: createElement(OverlayArrowContext.Provider, {
+			value: { ...arrowProps, placement, ref: arrowRef } as any,
+			children: renderProps.children,
+		}),
+	});
+}

package/src/components/index.ts

@@ -0,0 +1,302 @@
+// @octanejs/aria/components — the react-aria-components surface, ported onto octane.
+// Exports mirror the upstream index (.react-spectrum/packages/react-aria-components/
+// exports/index.ts): the Phase-4 foundation (collections engine, plumbing,
+// non-collection components) plus the Phase-5 collection components (Autocomplete,
+// ListBox, Menu, Select, ComboBox, Tabs, TagGroup, GridList, Breadcrumbs, and the
+// inert DragAndDrop context layer). Tree/Table, date/color families, and the
+// drag-and-drop engine arrive in later phases — see docs/aria-migration-plan.md.
+
+// plumbing
+export {
+	composeRenderProps,
+	DEFAULT_SLOT,
+	Provider,
+	useContextProps,
+	useRenderProps,
+	useSlottedContext,
+} from './utils';
+export type { ContextValue, RenderProps, SlotProps, StyleRenderProps } from './utils';
+
+// collections engine (mirrors the react-aria/CollectionBuilder + Collection exports)
+export {
+	createLeafComponent,
+	createBranchComponent,
+	CollectionBuilder,
+	Collection,
+} from '../collections/CollectionBuilder';
+export type { CollectionProps } from '../collections/CollectionBuilder';
+export { Section, CollectionRendererContext, DefaultCollectionRenderer } from './Collection';
+export type { SectionProps, CollectionRenderer } from './Collection';
+
+// components
+export { Button, ButtonContext } from './Button';
+export type { ButtonProps, ButtonRenderProps } from './Button';
+export {
+	Checkbox,
+	CheckboxGroup,
+	CheckboxField,
+	CheckboxButton,
+	CheckboxContext,
+	CheckboxFieldContext,
+	CheckboxGroupContext,
+	CheckboxGroupStateContext,
+} from './Checkbox';
+export type {
+	CheckboxGroupProps,
+	CheckboxGroupRenderProps,
+	CheckboxRenderProps,
+	CheckboxProps,
+	CheckboxFieldProps,
+	CheckboxFieldRenderProps,
+	CheckboxButtonProps,
+	CheckboxButtonRenderProps,
+} from './Checkbox';
+export { DialogTrigger, Dialog, DialogContext, OverlayTriggerStateContext } from './Dialog';
+export type { DialogProps, DialogTriggerProps, DialogRenderProps } from './Dialog';
+export {
+	Disclosure,
+	DisclosureGroup,
+	DisclosureGroupStateContext,
+	DisclosurePanel,
+	DisclosureStateContext,
+	DisclosureContext,
+} from './Disclosure';
+export type {
+	DisclosureProps,
+	DisclosureRenderProps,
+	DisclosurePanelProps,
+	DisclosurePanelRenderProps,
+	DisclosureGroupProps,
+	DisclosureGroupRenderProps,
+} from './Disclosure';
+export { FieldError, FieldErrorContext } from './FieldError';
+export type { FieldErrorProps, FieldErrorRenderProps } from './FieldError';
+export { Form, FormContext } from './Form';
+export type { FormProps } from './Form';
+export { Group, GroupContext } from './Group';
+export type { GroupProps, GroupRenderProps } from './Group';
+export { Header, HeaderContext } from './Header';
+export type { HeaderProps } from './Header';
+export { Heading, HeadingContext } from './Heading';
+export type { HeadingProps } from './Heading';
+export { Input, InputContext } from './Input';
+export type { InputProps, InputRenderProps } from './Input';
+export { Keyboard, KeyboardContext } from './Keyboard';
+export { Label, LabelContext } from './Label';
+export type { LabelProps } from './Label';
+export { Link, LinkContext } from './Link';
+export type { LinkProps, LinkRenderProps } from './Link';
+export { Meter, MeterContext } from './Meter';
+export type { MeterProps, MeterRenderProps } from './Meter';
+export { Modal, ModalOverlay, ModalContext } from './Modal';
+export type { ModalOverlayProps, ModalRenderProps } from './Modal';
+export { NumberField, NumberFieldContext, NumberFieldStateContext } from './NumberField';
+export type { NumberFieldProps, NumberFieldRenderProps } from './NumberField';
+export { OverlayArrow } from './OverlayArrow';
+export type { OverlayArrowProps, OverlayArrowRenderProps } from './OverlayArrow';
+export { Popover, PopoverContext } from './Popover';
+export type { PopoverProps, PopoverRenderProps } from './Popover';
+export { ProgressBar, ProgressBarContext } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarRenderProps } from './ProgressBar';
+export {
+	RadioGroup,
+	Radio,
+	RadioField,
+	RadioButton,
+	RadioGroupContext,
+	RadioContext,
+	RadioFieldContext,
+	RadioGroupStateContext,
+} from './RadioGroup';
+export type {
+	RadioGroupProps,
+	RadioGroupRenderProps,
+	RadioProps,
+	RadioRenderProps,
+	RadioFieldProps,
+	RadioFieldRenderProps,
+	RadioButtonProps,
+	RadioButtonRenderProps,
+} from './RadioGroup';
+export { SearchField, SearchFieldContext } from './SearchField';
+export type { SearchFieldProps, SearchFieldRenderProps } from './SearchField';
+export { SelectionIndicator, SelectionIndicatorContext } from './SelectionIndicator';
+export type { SelectionIndicatorProps } from './SelectionIndicator';
+export { Separator, SeparatorContext } from './Separator';
+export type { SeparatorProps } from './Separator';
+export { SharedElementTransition, SharedElement } from './SharedElementTransition';
+export type {
+	SharedElementTransitionProps,
+	SharedElementProps,
+	SharedElementRenderProps,
+} from './SharedElementTransition';
+export {
+	Slider,
+	SliderOutput,
+	SliderTrack,
+	SliderThumb,
+	SliderFill,
+	SliderContext,
+	SliderOutputContext,
+	SliderTrackContext,
+	SliderFillContext,
+	SliderStateContext,
+} from './Slider';
+export type {
+	SliderOutputProps,
+	SliderProps,
+	SliderRenderProps,
+	SliderThumbProps,
+	SliderTrackProps,
+	SliderTrackRenderProps,
+	SliderFillProps,
+	SliderFillRenderProps,
+	SliderThumbRenderProps,
+} from './Slider';
+export { Switch, SwitchField, SwitchButton, SwitchContext, SwitchFieldContext } from './Switch';
+export type {
+	SwitchProps,
+	SwitchRenderProps,
+	SwitchFieldProps,
+	SwitchFieldRenderProps,
+	SwitchButtonProps,
+	SwitchButtonRenderProps,
+} from './Switch';
+export { Text, TextContext } from './Text';
+export type { TextProps } from './Text';
+export { TextArea, TextAreaContext } from './TextArea';
+export type { TextAreaProps } from './TextArea';
+export { TextField, TextFieldContext } from './TextField';
+export type { TextFieldProps, TextFieldRenderProps } from './TextField';
+export { ToggleButton, ToggleButtonContext } from './ToggleButton';
+export type { ToggleButtonProps, ToggleButtonRenderProps } from './ToggleButton';
+export {
+	ToggleButtonGroup,
+	ToggleButtonGroupContext,
+	ToggleGroupStateContext,
+} from './ToggleButtonGroup';
+export type { ToggleButtonGroupProps, ToggleButtonGroupRenderProps } from './ToggleButtonGroup';
+export { Toolbar, ToolbarContext } from './Toolbar';
+export type { ToolbarProps, ToolbarRenderProps } from './Toolbar';
+export { TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext } from './Tooltip';
+export type { TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps } from './Tooltip';
+
+// collection components (Phase 5)
+export {
+	Autocomplete,
+	AutocompleteContext,
+	AutocompleteStateContext,
+	SelectableCollectionContext,
+	FieldInputContext,
+} from './Autocomplete';
+export type { AutocompleteProps, SelectableCollectionContextValue } from './Autocomplete';
+export {
+	ListBoxLoadMoreItem,
+	ListBox,
+	ListBoxItem,
+	ListBoxSection,
+	ListBoxContext,
+	ListStateContext,
+} from './ListBox';
+export type {
+	ListBoxProps,
+	ListBoxRenderProps,
+	ListBoxItemProps,
+	ListBoxItemRenderProps,
+	ListBoxSectionProps,
+	ListBoxLoadMoreItemProps,
+} from './ListBox';
+export {
+	Menu,
+	MenuItem,
+	MenuTrigger,
+	MenuSection,
+	MenuContext,
+	MenuStateContext,
+	RootMenuTriggerStateContext,
+	SubmenuTrigger,
+} from './Menu';
+export type {
+	MenuProps,
+	MenuItemProps,
+	MenuItemRenderProps,
+	MenuTriggerProps,
+	SubmenuTriggerProps,
+	MenuSectionProps,
+} from './Menu';
+export {
+	Select,
+	SelectValue,
+	SelectContext,
+	SelectValueContext,
+	SelectStateContext,
+} from './Select';
+export type {
+	SelectProps,
+	SelectValueProps,
+	SelectValueRenderProps,
+	SelectRenderProps,
+} from './Select';
+export {
+	ComboBox,
+	ComboBoxValue,
+	ComboBoxContext,
+	ComboBoxStateContext,
+	ComboBoxValueContext,
+} from './ComboBox';
+export type {
+	ComboBoxProps,
+	ComboBoxRenderProps,
+	ComboBoxValueProps,
+	ComboBoxValueRenderProps,
+} from './ComboBox';
+export { Tabs, TabList, TabPanels, TabPanel, Tab, TabsContext, TabListStateContext } from './Tabs';
+export type {
+	TabListProps,
+	TabListRenderProps,
+	TabPanelsProps,
+	TabPanelProps,
+	TabPanelRenderProps,
+	TabProps,
+	TabsProps,
+	TabRenderProps,
+	TabsRenderProps,
+} from './Tabs';
+export { TagGroup, TagGroupContext, TagList, TagListContext, Tag } from './TagGroup';
+export type {
+	TagGroupProps,
+	TagListProps,
+	TagListRenderProps,
+	TagProps,
+	TagRenderProps,
+} from './TagGroup';
+export {
+	GridListLoadMoreItem,
+	GridList,
+	GridListItem,
+	GridListContext,
+	GridListHeader,
+	GridListHeaderContext,
+	GridListSection,
+} from './GridList';
+export type {
+	GridListProps,
+	GridListRenderProps,
+	GridListItemProps,
+	GridListItemRenderProps,
+	GridListLoadMoreItemProps,
+	GridListSectionProps,
+} from './GridList';
+export { Breadcrumbs, BreadcrumbsContext, Breadcrumb } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps } from './Breadcrumbs';
+export { DropIndicator, DropIndicatorContext, DragAndDropContext } from './DragAndDrop';
+export type { DropIndicatorProps, DropIndicatorRenderProps } from './DragAndDrop';
+export { useDragAndDrop } from './useDragAndDrop';
+export type { DragAndDropHooks, DragAndDropOptions } from './useDragAndDrop';
+
+// re-exports from the hooks surface, as upstream's index does
+export { VisuallyHidden } from '../visually-hidden/VisuallyHidden';
+export type { VisuallyHiddenProps } from '../visually-hidden/VisuallyHidden';
+export type { Placement } from '../overlays/useOverlayPosition';
+export { useFilter } from '../i18n/useFilter';
+export type { Filter } from '../i18n/useFilter';