@octanejs/aria 0.0.4 → 0.0.6

package/src/components/index.ts

@@ -0,0 +1,359 @@
+// @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';
+
+// tree + table (Tree/Table phase)
+export {
+	TreeLoadMoreItem,
+	Tree,
+	TreeItem,
+	TreeContext,
+	TreeItemContent,
+	TreeHeader,
+	TreeSection,
+	TreeStateContext,
+} from './Tree';
+export type {
+	TreeProps,
+	TreeRenderProps,
+	TreeEmptyStateRenderProps,
+	TreeItemProps,
+	TreeItemRenderProps,
+	TreeItemContentProps,
+	TreeItemContentRenderProps,
+	TreeLoadMoreItemProps,
+	TreeLoadMoreItemRenderProps,
+} from './Tree';
+export {
+	TableLoadMoreItem,
+	Table,
+	Row,
+	Cell,
+	Column,
+	ColumnResizer,
+	TableHeader,
+	TableBody,
+	TableContext,
+	ResizableTableContainer,
+	useTableOptions,
+	TableStateContext,
+	TableColumnResizeStateContext,
+	TableFooter,
+} from './Table';
+export type {
+	TableProps,
+	TableRenderProps,
+	TableHeaderProps,
+	TableBodyProps,
+	TableBodyRenderProps,
+	ResizableTableContainerProps,
+	ColumnProps,
+	ColumnRenderProps,
+	ColumnResizerProps,
+	ColumnResizerRenderProps,
+	RowProps,
+	RowRenderProps,
+	CellProps,
+	CellRenderProps,
+	TableLoadMoreItemProps,
+	TableFooterProps,
+} from './Table';

package/src/components/useDragAndDrop.ts

@@ -0,0 +1,164 @@
+// Ported from react-aria-components (source: .react-spectrum/packages/react-aria-components/src/useDragAndDrop.tsx).
+// PHASE-7: the react-aria drag-and-drop ENGINE (useDraggableCollection(State),
+// useDroppableCollection(State), useDropIndicator, DragManager, ListDropTargetDelegate)
+// is NOT ported yet. This module ships the `DragAndDropHooks` / `DragAndDropOptions`
+// TYPE surface so collection components can accept a `dragAndDropHooks` prop (their dnd
+// branches stay inert until a consumer can construct hooks), with every engine-referencing
+// member typed via local structural aliases below. The `useDragAndDrop()` function itself
+// is a THROWING STUB (the remix-router framework-stub precedent): importing is safe;
+// CALLING throws with a pointer to the phase plan instead of failing somewhere deep inside.
+// octane adaptations: `.tsx` → `.ts`; `JSX.Element` → a structural `any` alias.
+import type {
+	DragItem,
+	DraggableCollectionProps,
+	DropTarget,
+	DropTargetDelegate,
+	DroppableCollectionProps,
+	Key,
+	RefObject,
+} from '@react-types/shared';
+
+export { DropIndicator, DropIndicatorContext, DragAndDropContext } from './DragAndDrop';
+export type { DropIndicatorProps, DropIndicatorRenderProps } from './DragAndDrop';
+
+// octane adaptation: structural alias for React's JSX.Element.
+type JSXElement = any;
+
+// ── PHASE-7 structural aliases ──────────────────────────────────────────────
+// Stand-ins for the unported react-aria/react-stately dnd engine types. They keep
+// `DragAndDropHooks` importable as a TYPE without pulling any engine code; Phase 7
+// replaces them with the real ported definitions.
+/** PHASE-7: react-stately/useDraggableCollectionState's DraggableCollectionState (engine unported). */
+export type DraggableCollectionState = any;
+/** PHASE-7: react-stately/useDraggableCollectionState's DraggableCollectionStateOptions (engine unported). */
+export type DraggableCollectionStateOptions = any;
+/** PHASE-7: react-aria/useDraggableCollection's DraggableCollectionOptions (engine unported). */
+export type DraggableCollectionOptions = any;
+/** PHASE-7: react-aria/useDraggableCollection's DraggableItemProps (engine unported). */
+export type DraggableItemProps = any;
+/** PHASE-7: react-aria/useDraggableCollection's DraggableItemResult (engine unported). */
+export type DraggableItemResult = any;
+/** PHASE-7: react-aria/useDraggableCollection's DragPreview component type (engine unported). */
+export type DragPreview = any;
+/** PHASE-7: react-stately/useDroppableCollectionState's DroppableCollectionState (engine unported). */
+export type DroppableCollectionState = any;
+/** PHASE-7: react-stately/useDroppableCollectionState's DroppableCollectionStateOptions (engine unported). */
+export type DroppableCollectionStateOptions = any;
+/** PHASE-7: react-aria/useDroppableCollection's DroppableCollectionOptions (engine unported). */
+export type DroppableCollectionOptions = any;
+/** PHASE-7: react-aria/useDroppableCollection's DroppableCollectionResult (engine unported). */
+export type DroppableCollectionResult = any;
+/** PHASE-7: react-aria/useDroppableCollection's DroppableItemOptions (engine unported). */
+export type DroppableItemOptions = any;
+/** PHASE-7: react-aria/useDroppableCollection's DroppableItemResult (engine unported). */
+export type DroppableItemResult = any;
+/** PHASE-7: react-aria/useDropIndicator's DropIndicatorProps (engine unported; `target` is real). */
+export interface AriaDropIndicatorProps {
+	/** The drop target that the drop indicator represents. */
+	target: DropTarget;
+	/** PHASE-7: the activate-button ref (engine unported). */
+	activateButtonRef?: RefObject<any>;
+}
+/** PHASE-7: react-aria/useDropIndicator's DropIndicatorAria (engine unported). */
+export type DropIndicatorAria = any;
+/** PHASE-7: react-aria/ListDropTargetDelegate's class type (engine unported). */
+export type ListDropTargetDelegate = any;
+
+interface DraggableCollectionStateOpts<T = object> extends Omit<
+	DraggableCollectionStateOptions,
+	'getItems'
+> {}
+
+interface DragHooks<T = object> {
+	useDraggableCollectionState?: (
+		props: DraggableCollectionStateOpts<T>,
+	) => DraggableCollectionState;
+	useDraggableCollection?: (
+		props: DraggableCollectionOptions,
+		state: DraggableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => void;
+	useDraggableItem?: (
+		props: DraggableItemProps,
+		state: DraggableCollectionState,
+	) => DraggableItemResult;
+	DragPreview?: DragPreview;
+	renderDragPreview?: (
+		items: DragItem[],
+	) => JSXElement | { element: JSXElement; x: number; y: number };
+	isVirtualDragging?: () => boolean;
+}
+
+interface DropHooks {
+	useDroppableCollectionState?: (
+		props: DroppableCollectionStateOptions,
+	) => DroppableCollectionState;
+	useDroppableCollection?: (
+		props: DroppableCollectionOptions,
+		state: DroppableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => DroppableCollectionResult;
+	useDroppableItem?: (
+		options: DroppableItemOptions,
+		state: DroppableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => DroppableItemResult;
+	useDropIndicator?: (
+		props: AriaDropIndicatorProps,
+		state: DroppableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => DropIndicatorAria;
+	renderDropIndicator?: (target: DropTarget) => JSXElement;
+	dropTargetDelegate?: DropTargetDelegate;
+	ListDropTargetDelegate: ListDropTargetDelegate;
+}
+
+export type DragAndDropHooks<T = object> = DragHooks<T> & DropHooks;
+
+export interface DragAndDrop<T = object> {
+	/** Drag and drop hooks for the collection element. */
+	dragAndDropHooks: DragAndDropHooks<T>;
+}
+
+export interface DragAndDropOptions<T = object>
+	extends Omit<DraggableCollectionProps, 'preview' | 'getItems'>, DroppableCollectionProps {
+	/**
+	 * A function that returns the items being dragged. If not specified, we assume that the
+	 * collection is not draggable.
+	 *
+	 * @default () => []
+	 */
+	getItems?: (keys: Set<Key>, items: T[]) => DragItem[];
+	/**
+	 * A function that renders a drag preview, which is shown under the user's cursor while dragging.
+	 * By default, a copy of the dragged element is rendered.
+	 */
+	renderDragPreview?: (
+		items: DragItem[],
+	) => JSXElement | { element: JSXElement; x: number; y: number };
+	/**
+	 * A function that renders a drop indicator element between two items in a collection.
+	 * This should render a `<DropIndicator>` element. If this function is not provided, a
+	 * default DropIndicator is provided.
+	 */
+	renderDropIndicator?: (target: DropTarget) => JSXElement;
+	/**
+	 * A custom delegate object that provides drop targets for pointer coordinates within the
+	 * collection.
+	 */
+	dropTargetDelegate?: DropTargetDelegate;
+	/** Whether the drag and drop events should be disabled. */
+	isDisabled?: boolean;
+}
+
+/**
+ * Provides the hooks required to enable drag and drop behavior for a drag and drop compatible
+ * collection component.
+ *
+ * PHASE-7: throwing stub — the dnd engine is not ported yet.
+ */
+export function useDragAndDrop<T = object>(options: DragAndDropOptions<T>): DragAndDrop<T> {
+	throw new Error(
+		'@octanejs/aria: useDragAndDrop is not ported yet (drag and drop arrives in a later phase)',
+	);
+}