+ 
+
+ No results
});
+ await open();
+ await userEvent.type(getSearch(), 'zzz');
+
+ expect(await screen.findByText('No results')).toBeInTheDocument();
+ });
+
+ it('should keep DOM focus in the search input while navigating', async () => {
+ renderSearchable();
+ await open();
+ await userEvent.keyboard('{ArrowDown}');
+
+ expect(getSearch()).toHaveFocus();
+
+ await waitFor(() =>
+ expect(getSearch()).toHaveAttribute('aria-activedescendant')
+ );
+ });
+
+ it('should clear the query on Escape before closing the menu', async () => {
+ renderSearchable();
+ await open();
+ await userEvent.type(getSearch(), 'pas');
+ await waitFor(() => expect(getItems()).toHaveLength(1));
+
+ await pressEscape();
+ await waitFor(() => expect(getItems()).toHaveLength(3));
+
+ expect(getSearch()).toHaveValue('');
+ expect(getMenu()).toBeInTheDocument();
+ });
+
+ it('should reset the query after the menu is reopened', async () => {
+ renderSearchable();
+ await open();
+ await userEvent.type(getSearch(), 'pas');
+ await waitFor(() => expect(getItems()).toHaveLength(1));
+
+ // The first Escape clears the query, the second closes the menu. Waiting
+ // between them lets the rebuilt collection settle inside `act`.
+ await pressEscape();
+ await waitFor(() => expect(getItems()).toHaveLength(3));
+
+ await userEvent.keyboard('{Escape}');
+ await waitFor(() => expect(queryMenu()).not.toBeInTheDocument());
+ await open();
+
+ expect(getSearch()).toHaveValue('');
+ expect(getItems()).toHaveLength(3);
+ });
+
+ it('should support a controlled inputValue', async () => {
+ function Controlled() {
+ const [value, setValue] = useState('pas');
+
+ return (
+
+ {t.format(query ? 'nothing found' : 'empty items')}
+
+ ))
+ }
+ className={composeRenderProps(className, (className) =>
+ clsx(s.base, list, className)
+ )}
+ {...props}
+ />
+ );
+}
+
+DropdownMenuContent.displayName = 'DropdownMenu.Content';
diff --git a/packages/components/src/components/DropdownMenu/components/DropdownMenuContent/index.ts b/packages/components/src/components/DropdownMenu/components/DropdownMenuContent/index.ts
new file mode 100644
index 000000000..21838dd3f
--- /dev/null
+++ b/packages/components/src/components/DropdownMenu/components/DropdownMenuContent/index.ts
@@ -0,0 +1,2 @@
+export * from './DropdownMenuContent';
+export * from './types';
diff --git a/packages/components/src/components/DropdownMenu/components/DropdownMenuContent/types.ts b/packages/components/src/components/DropdownMenu/components/DropdownMenuContent/types.ts
new file mode 100644
index 000000000..bc67f545a
--- /dev/null
+++ b/packages/components/src/components/DropdownMenu/components/DropdownMenuContent/types.ts
@@ -0,0 +1,8 @@
+import type { DataAttributeProps } from '@koobiq/react-core';
+import type { MenuProps as AriaMenuProps } from '@koobiq/react-primitives';
+
+export type DropdownMenuContentProps
+ {showArrow && }
+
+ );
+
return (
<>
{control?.({
@@ -148,42 +189,32 @@ export const PopoverInner: FC
+ {type === 'dialog' ? (
+
+ ) : (
+ resolvedChildren
+ )}
+
+
+ groupContainer ? (
+ // Inside the group container, so a click here is not an outside one.
+
+ {renderPopover(transition)}
+
+ ) : (
+
- {showArrow && }
-
- )}
+
+ )
+ }
);
diff --git a/packages/components/src/components/Popover/types.ts b/packages/components/src/components/Popover/types.ts
index c5a9ca55c..cd9c636da 100644
--- a/packages/components/src/components/Popover/types.ts
+++ b/packages/components/src/components/Popover/types.ts
@@ -117,6 +117,12 @@ export type PopoverProps = {
* @default 'top'
*/
placement?: PopoverPropPlacement;
+ /**
+ * Whether the popover should flip to the opposite side when it reaches the
+ * viewport boundary.
+ * @default true
+ */
+ shouldFlip?: boolean;
/** The ref for the element which the popover positions itself with respect to. */
anchorRef?: RefObject;
/**
@@ -182,4 +188,14 @@ export type PopoverProps = {
export type PopoverInnerProps = {
state: OverlayTriggerState;
popoverRef?: Ref;
-} & Omit;
+ /**
+ * Same as in `PopoverProps`, but as wide as `usePopover` itself: React Aria
+ * hands its overlays an `Element` ref.
+ */
+ anchorRef?: RefObject;
+ /**
+ * What opened the popover. React Aria reads it to tell a submenu from any
+ * other overlay and treats it differently on outside clicks and scroll.
+ */
+ trigger?: string;
+} & Omit;
diff --git a/packages/components/src/components/SearchInput/SearchInput.tsx b/packages/components/src/components/SearchInput/SearchInput.tsx
index 4125ae43c..92b1596f8 100644
--- a/packages/components/src/components/SearchInput/SearchInput.tsx
+++ b/packages/components/src/components/SearchInput/SearchInput.tsx
@@ -1,8 +1,8 @@
'use client';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
-import { clsx, mergeProps, useDOMRef } from '@koobiq/react-core';
+import { clsx, mergeProps, useDOMRef, useMultiRef } from '@koobiq/react-core';
import { IconMagnifyingGlass16 } from '@koobiq/react-icons';
import {
removeDataAttributes,
@@ -14,6 +14,8 @@ import {
ButtonContext,
DEFAULT_SLOT,
Provider,
+ FieldInputContext,
+ useContextProps,
} from '@koobiq/react-primitives';
import { useForm } from '../Form';
@@ -28,11 +30,39 @@ import type {
import { FormField, FormFieldClearButton } from '../FormField';
import s from './SearchInput.module.css';
+import {
+ SearchInputContext,
+ type SearchInputContextProps,
+} from './SearchInputContext';
import type { SearchInputProps, SearchInputRef } from './types';
/** A search input allows a user to enter and clear a search query. */
export const SearchInput = forwardRef(
- (props, ref) => {
+ (inProps, inRef) => {
+ const contextInputProps: SearchInputContextProps = inProps;
+
+ const [contextProps, contextRef] = useContextProps(
+ contextInputProps,
+ inRef,
+ SearchInputContext
+ );
+
+ const { ref: fieldInputRef, ...fieldInputProps } =
+ useSlottedContext(FieldInputContext) ?? {};
+
+ const props = mergeProps(contextProps, fieldInputProps);
+
+ const setFieldInputRef = useCallback(
+ (node: SearchInputRef | null) => {
+ if (typeof fieldInputRef === 'function') {
+ fieldInputRef(node);
+ } else if (fieldInputRef) {
+ fieldInputRef.current = node;
+ }
+ },
+ [fieldInputRef]
+ );
+
const {
startAddon = (
removeDataAttributes({ ...props, isDisabled, isReadOnly })
);
- const inputRef = useDOMRef(ref);
+ const inputRef = useDOMRef(
+ useMultiRef([contextRef, setFieldInputRef])
+ );
const { validationBehavior: formValidationBehavior } =
useSlottedContext(FormContext) || {};
diff --git a/packages/components/src/components/SearchInput/SearchInputContext.ts b/packages/components/src/components/SearchInput/SearchInputContext.ts
new file mode 100644
index 000000000..5b808f077
--- /dev/null
+++ b/packages/components/src/components/SearchInput/SearchInputContext.ts
@@ -0,0 +1,15 @@
+'use client';
+
+import { createContext } from 'react';
+
+import type { ContextValue } from '@koobiq/react-primitives';
+
+import type { SearchInputProps, SearchInputRef } from './types';
+
+export type SearchInputContextProps = SearchInputProps & {
+ slot?: string | null;
+};
+
+export const SearchInputContext = createContext<
+ ContextValue
+>({});
diff --git a/packages/components/src/components/Textarea/Textarea.tsx b/packages/components/src/components/Textarea/Textarea.tsx
index f58e12800..ffa8e6c56 100644
--- a/packages/components/src/components/Textarea/Textarea.tsx
+++ b/packages/components/src/components/Textarea/Textarea.tsx
@@ -102,7 +102,7 @@ export const Textarea = forwardRef((props, ref) => {
);
return (
-
+
{(values) => (
{
+ it.each([
+ ['Input', () => ],
+ ['Textarea', () => ],
+ ])(
+ 'should connect an %s to an Autocomplete without an element type prop',
+ async (_, renderField) => {
+ render(
+
+ {renderField()}
+
+
+ );
+
+ const textbox = screen.getByRole('textbox', { name: 'Search' });
+
+ await userEvent.click(textbox);
+ await userEvent.keyboard('{ArrowDown}');
+
+ await waitFor(() =>
+ expect(textbox).toHaveAttribute('aria-activedescendant')
+ );
+
+ const activeDescendant = textbox.getAttribute('aria-activedescendant');
+
+ expect(textbox).toHaveFocus();
+
+ expect(
+ activeDescendant ? document.getElementById(activeDescendant) : null
+ ).toHaveTextContent('One');
+ }
+ );
+});
diff --git a/packages/primitives/src/components/TextField/TextField.tsx b/packages/primitives/src/components/TextField/TextField.tsx
index f6c460246..18bbc0677 100644
--- a/packages/primitives/src/components/TextField/TextField.tsx
+++ b/packages/primitives/src/components/TextField/TextField.tsx
@@ -1,7 +1,7 @@
'use client';
-import { forwardRef, useRef, useCallback } from 'react';
-import type { Ref, KeyboardEvent } from 'react';
+import { forwardRef, useRef, useCallback, useState } from 'react';
+import type { KeyboardEvent, Ref, RefObject } from 'react';
import {
filterDOMProps,
@@ -14,6 +14,8 @@ import {
Provider,
DEFAULT_SLOT,
ButtonContext,
+ FieldInputContext,
+ useContextProps,
useRenderProps,
useSlottedContext,
} from 'react-aria-components';
@@ -22,9 +24,11 @@ import { removeDataAttributes } from '../../utils';
import { FieldErrorContext } from '../FieldError';
import { FormContext } from '../Form';
import { InputContext } from '../Input';
+import type { InputProps } from '../Input';
import { LabelContext } from '../Label';
import { TextContext } from '../Text';
import { TextareaContext } from '../Textarea';
+import type { TextareaProps } from '../Textarea';
import type {
TextFieldRef,
@@ -34,13 +38,43 @@ import type {
import intlMessages from './intl.json';
function TextFieldRender(
- props: Omit, 'ref'>,
+ inProps: Omit, 'ref'>,
ref: Ref
) {
+ const innerRef = useRef(null);
+
+ // A parent, such as `Autocomplete`, drives the field through this context,
+ // handing over both its props and the ref it wants the field to use.
+ const [props, contextRef] = useContextProps(
+ inProps,
+ innerRef,
+ FieldInputContext
+ );
+
+ // The context is typed for any focusable element, this field is narrower.
+ const inputRef = contextRef as RefObject<
+ HTMLInputElement | HTMLTextAreaElement | null
+ >;
+
const { isDisabled, isReadOnly, isRequired, onClear, isClearable } = props;
const stringFormatter = useLocalizedStringFormatter(intlMessages);
- const inputRef = useRef(null);
+ const [inputElementType, setInputElementType] = useState<
+ 'input' | 'textarea'
+ >(props.inputElementType ?? 'input');
+
+ const inputOrTextareaRef = useCallback(
+ (node: HTMLInputElement | HTMLTextAreaElement | null) => {
+ inputRef.current = node;
+
+ if (node) {
+ setInputElementType(
+ node instanceof HTMLTextAreaElement ? 'textarea' : 'input'
+ );
+ }
+ },
+ [inputRef]
+ );
const [inputValue, setInputValue] = useControlledState(
props.value,
@@ -101,11 +135,16 @@ function TextFieldRender(
handleKeyDown(e);
},
onChange: setInputValue,
+ inputElementType,
validationBehavior,
},
inputRef
);
+ // The hook types its result for one element or the other, the same props go
+ // to both the input and the textarea.
+ const fieldProps = inputProps as InputProps & TextareaProps;
+
const DOMProps = filterDOMProps(props);
delete DOMProps.id;
@@ -136,8 +175,8 @@ function TextFieldRender(
& {
+ /**
+ * The element the field renders into.
+ * @deprecated The field detects the element on its own.
+ */
inputElementType?: 'input' | 'textarea';
/** Handler that is called when the clear button is clicked. */
onClear?: () => void;
diff --git a/packages/primitives/src/index.ts b/packages/primitives/src/index.ts
index ecd247d48..695f813b5 100644
--- a/packages/primitives/src/index.ts
+++ b/packages/primitives/src/index.ts
@@ -155,6 +155,38 @@ export {
export type { FileTriggerProps } from 'react-aria-components';
+/**
+ * RAC menu primitives.
+ *
+ * `SeparatorProps`, `MenuTriggerProps` and `SubmenuTriggerProps` are
+ * intentionally not re-exported: the same names already come from
+ * `@react-aria/separator` and `@react-stately/menu` above, and a named export
+ * would silently shadow them.
+ */
+export {
+ Menu,
+ Header,
+ MenuItem,
+ Separator,
+ MenuSection,
+ MenuTrigger,
+ Autocomplete,
+ PopoverContext,
+ SubmenuTrigger,
+ FieldInputContext,
+ AutocompleteStateContext,
+ OverlayTriggerStateContext,
+} from 'react-aria-components';
+
+export type {
+ MenuProps,
+ HeaderProps,
+ MenuItemProps,
+ MenuSectionProps,
+ AutocompleteProps,
+ MenuItemRenderProps,
+} from 'react-aria-components';
+
export * from './behaviors';
export * from './components';
export { removeDataAttributes } from './utils';
diff --git a/tools/api-extractor/config.json b/tools/api-extractor/config.json
index 73bf00ca7..bc075b04e 100644
--- a/tools/api-extractor/config.json
+++ b/tools/api-extractor/config.json
@@ -18,6 +18,7 @@
"DateInput",
"DatePicker",
"Divider",
+ "DropdownMenu",
"EmptyState",
"FileUpload",
"Flag",
diff --git a/tools/public_api_guard/components/DropdownMenu.api.md b/tools/public_api_guard/components/DropdownMenu.api.md
new file mode 100644
index 000000000..c0e09abba
--- /dev/null
+++ b/tools/public_api_guard/components/DropdownMenu.api.md
@@ -0,0 +1,214 @@
+## API Report File for "koobiq-react"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { AriaDialogProps } from '@koobiq/react-primitives';
+import type { AutocompleteProps } from '@koobiq/react-primitives';
+import type { ButtonBaseProps as ButtonBaseProps_2 } from '@koobiq/react-primitives';
+import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { ComponentProps } from 'react';
+import type { ComponentPropsWithRef } from 'react';
+import type { CSSProperties } from 'react';
+import type { DataAttributeProps } from '@koobiq/react-core';
+import type { ElementType } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ExtendableProps } from '@koobiq/react-core';
+import { ForwardRefExoticComponent } from 'react';
+import type { HeaderProps } from '@koobiq/react-primitives';
+import { JSX } from 'react/jsx-runtime';
+import type { MenuItemProps } from '@koobiq/react-primitives';
+import type { MenuProps } from '@koobiq/react-primitives';
+import type { MenuSectionProps } from '@koobiq/react-primitives';
+import { PolyForwardComponent } from '@koobiq/react-core';
+import { Pressable } from '@koobiq/react-core';
+import type { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import type { Ref } from 'react';
+import { RefAttributes } from 'react';
+import type { RefObject } from 'react';
+import type { TransitionProps } from 'react-transition-group/Transition';
+
+// Warning: (ae-forgotten-export) The symbol "CompoundedComponent" needs to be exported by the entry point index.d.ts
+//
+// @public
+export const DropdownMenu: CompoundedComponent;
+
+// @public
+export function DropdownMenuAutocomplete(props: DropdownMenuAutocompleteProps): JSX.Element;
+
+// @public (undocumented)
+export namespace DropdownMenuAutocomplete {
+ var // (undocumented)
+ displayName: string;
+}
+
+// @public (undocumented)
+export type DropdownMenuAutocompleteProps = AutocompleteProps;
+
+// @public (undocumented)
+export type DropdownMenuComponent = (props: DropdownMenuProps) => ReactElement | null;
+
+// @public
+export function DropdownMenuContent(input: DropdownMenuContentProps): JSX.Element;
+
+// @public (undocumented)
+export namespace DropdownMenuContent {
+ var // (undocumented)
+ displayName: string;
+}
+
+// @public (undocumented)
+export type DropdownMenuContentProps = Omit, 'slot'> & DataAttributeProps;
+
+// @public
+export function DropdownMenuFooter(props: DropdownMenuFooterProps): JSX.Element;
+
+// @public (undocumented)
+export namespace DropdownMenuFooter {
+ var // (undocumented)
+ displayName: string;
+}
+
+// Warning: (ae-forgotten-export) The symbol "DropdownFooterProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type DropdownMenuFooterProps = DropdownFooterProps;
+
+// @public
+export function DropdownMenuHeader(props: DropdownMenuHeaderProps): JSX.Element;
+
+// @public (undocumented)
+export namespace DropdownMenuHeader {
+ var // (undocumented)
+ displayName: string;
+}
+
+// @public (undocumented)
+export type DropdownMenuHeaderProps = HeaderProps;
+
+// @public
+export function DropdownMenuItem(input: DropdownMenuItemProps): JSX.Element;
+
+// @public (undocumented)
+export namespace DropdownMenuItem {
+ var // (undocumented)
+ displayName: string;
+}
+
+// Warning: (ae-forgotten-export) The symbol "ListItemAddonProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type DropdownMenuItemAddonProps = ListItemAddonProps;
+
+// @public (undocumented)
+export type DropdownMenuItemPropAlign = (typeof dropdownMenuItemPropAlign)[number];
+
+// @public (undocumented)
+export const dropdownMenuItemPropAlign: readonly ["start", "center"];
+
+// @public (undocumented)
+export type DropdownMenuItemProps = MenuItemProps & DataAttributeProps & {
+ align?: DropdownMenuItemPropAlign;
+};
+
+// Warning: (ae-forgotten-export) The symbol "ListItemTextProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type DropdownMenuItemTextProps = ListItemTextProps;
+
+// @public
+export function DropdownMenuPopover(props: DropdownMenuPopoverProps): JSX.Element | null;
+
+// @public (undocumented)
+export namespace DropdownMenuPopover {
+ var // (undocumented)
+ displayName: string;
+}
+
+// @public (undocumented)
+export type DropdownMenuPopoverProps = {
+ children?: ReactNode;
+ className?: string;
+ style?: CSSProperties;
+ 'data-testid'?: string | number;
+ ref?: Ref;
+ placement?: DropdownMenuPropPlacement;
+ offset?: number;
+ crossOffset?: number;
+ containerPadding?: number;
+ shouldFlip?: boolean;
+ maxBlockSize?: number;
+ isNonModal?: boolean;
+ anchorRef?: RefObject;
+ slotProps?: {
+ popover?: PopoverProps;
+ };
+};
+
+// @public (undocumented)
+export type DropdownMenuPopoverRef = HTMLDivElement;
+
+// @public (undocumented)
+export type DropdownMenuPressableProps = ComponentProps;
+
+// Warning: (ae-forgotten-export) The symbol "PopoverPropPlacement" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type DropdownMenuPropPlacement = PopoverPropPlacement;
+
+// @public (undocumented)
+export const dropdownMenuPropPlacement: readonly ["bottom", "bottom start", "bottom end", "top", "top start", "top end", "start", "start top", "start bottom", "end", "end top", "end bottom"];
+
+// @public (undocumented)
+export type DropdownMenuProps = {
+ children: ReactNode;
+ isOpen?: boolean;
+ defaultOpen?: boolean;
+ onOpenChange?: (isOpen: boolean) => void;
+ trigger?: DropdownMenuPropTrigger;
+};
+
+// @public (undocumented)
+export type DropdownMenuPropTrigger = (typeof dropdownMenuPropTrigger)[number];
+
+// @public (undocumented)
+export const dropdownMenuPropTrigger: readonly ["press", "longPress"];
+
+// @public
+export function DropdownMenuSection(input: DropdownMenuSectionProps): JSX.Element;
+
+// @public (undocumented)
+export namespace DropdownMenuSection {
+ var // (undocumented)
+ displayName: string;
+}
+
+// @public (undocumented)
+export type DropdownMenuSectionProps = MenuSectionProps & DataAttributeProps & {
+ title?: ReactNode;
+};
+
+// @public
+export function DropdownMenuSubmenuTrigger(props: DropdownMenuSubmenuTriggerProps): JSX.Element;
+
+// @public (undocumented)
+export namespace DropdownMenuSubmenuTrigger {
+ var // (undocumented)
+ displayName: string;
+}
+
+// @public (undocumented)
+export type DropdownMenuSubmenuTriggerProps = {
+ children: ReactElement[];
+ delay?: number;
+};
+
+// Warnings were encountered during analysis:
+//
+// packages/components/dist/components/DropdownMenu/components/DropdownMenuPopover/types.d.ts:46:9 - (ae-forgotten-export) The symbol "PopoverProps" needs to be exported by the entry point index.d.ts
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/tools/public_api_guard/components/Popover.api.md b/tools/public_api_guard/components/Popover.api.md
index 83358e81d..3b90fa4a8 100644
--- a/tools/public_api_guard/components/Popover.api.md
+++ b/tools/public_api_guard/components/Popover.api.md
@@ -56,7 +56,9 @@ export type PopoverHeaderProps = DialogHeaderProps;
export type PopoverInnerProps = {
state: OverlayTriggerState;
popoverRef?: Ref;
-} & Omit;
+ anchorRef?: RefObject;
+ trigger?: string;
+} & Omit;
// @public (undocumented)
export type PopoverPropContent = ReactNode | ((props: {
@@ -92,6 +94,7 @@ export type PopoverProps = {
'data-testid'?: string | number;
disableFocusManagement?: boolean;
placement?: PopoverPropPlacement;
+ shouldFlip?: boolean;
anchorRef?: RefObject;
hideArrow?: boolean;
isNonModal?: boolean;
@@ -125,7 +128,7 @@ export const popoverPropType: readonly ["dialog", "menu", "listbox", "tree", "gr
// Warnings were encountered during analysis:
//
-// packages/components/dist/components/Popover/types.d.ts:126:9 - (ae-forgotten-export) The symbol "DialogProps" needs to be exported by the entry point index.d.ts
+// packages/components/dist/components/Popover/types.d.ts:132:9 - (ae-forgotten-export) The symbol "DialogProps" needs to be exported by the entry point index.d.ts
// (No @packageDocumentation comment for this package)
diff --git a/tools/public_api_guard/react-primitives.api.md b/tools/public_api_guard/react-primitives.api.md
index 22e664efc..b7291cc71 100644
--- a/tools/public_api_guard/react-primitives.api.md
+++ b/tools/public_api_guard/react-primitives.api.md
@@ -33,8 +33,11 @@ import type { AriaTextFieldProps } from '@react-aria/textfield';
import { AriaToggleButtonGroupItemProps } from '@react-aria/button';
import { AriaToggleButtonGroupProps } from '@react-aria/button';
import { AsyncLoadable } from '@koobiq/react-core';
+import { Autocomplete } from 'react-aria-components';
import { AutocompleteAria } from '@react-aria/autocomplete';
+import { AutocompleteProps } from 'react-aria-components';
import { AutocompleteState } from '@react-stately/autocomplete';
+import { AutocompleteStateContext } from 'react-aria-components';
import type { ButtonAria } from '@react-aria/button';
import { ButtonContext } from 'react-aria-components';
import { CalendarAria } from '@react-aria/calendar';
@@ -68,6 +71,7 @@ import { DragEventHandler } from 'react';
import { ElementType } from 'react';
import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
import type { ExtendableProps } from '@koobiq/react-core';
+import { FieldInputContext } from 'react-aria-components';
import { FileTrigger } from 'react-aria-components';
import { FileTriggerProps } from 'react-aria-components';
import { FocusableElement } from '@react-types/shared';
@@ -81,6 +85,8 @@ import type { ForwardedRef } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { getItemCount } from '@react-stately/collections';
import type { GlobalDOMAttributes } from '@koobiq/react-core';
+import { Header } from 'react-aria-components';
+import { HeaderProps } from 'react-aria-components';
import type { HelpTextProps } from '@koobiq/react-core';
import type { HoverEvents } from '@koobiq/react-core';
import type { HTMLAttributes } from 'react';
@@ -98,6 +104,14 @@ import { LabelHTMLAttributes } from 'react';
import { CollectionBuilder as LegacyCollectionBuilder } from '@react-stately/collections';
import type { ListProps } from '@react-stately/list';
import type { ListState } from '@react-stately/list';
+import { Menu } from 'react-aria-components';
+import { MenuItem } from 'react-aria-components';
+import { MenuItemProps } from 'react-aria-components';
+import { MenuItemRenderProps } from 'react-aria-components';
+import { MenuProps } from 'react-aria-components';
+import { MenuSection } from 'react-aria-components';
+import { MenuSectionProps } from 'react-aria-components';
+import { MenuTrigger } from 'react-aria-components';
import type { MenuTriggerState } from '@react-stately/menu';
import { MouseEventHandler } from 'react';
import { MultipleSelection } from '@koobiq/react-core';
@@ -105,8 +119,10 @@ import type { Node as Node_2 } from '@koobiq/react-core';
import { NumberFieldAria } from 'react-aria';
import type { OverlayTriggerProps } from '@react-types/overlays';
import { OverlayTriggerState } from '@react-stately/overlays';
+import { OverlayTriggerStateContext } from 'react-aria-components';
import { PointerEventHandler } from 'react';
import { PolyForwardComponent } from '@koobiq/react-core';
+import { PopoverContext } from 'react-aria-components';
import type { PressEvents } from '@koobiq/react-core';
import { Provider } from 'react-aria-components';
import type { RadioGroupState } from '@react-stately/radio';
@@ -119,6 +135,8 @@ import { RefObject } from 'react';
import type { RenderProps as RenderProps_2 } from 'react-aria-components';
import type { RouterOptions } from '@koobiq/react-core';
import type { Selection as Selection_2 } from '@koobiq/react-core';
+import { Separator } from 'react-aria-components';
+import { SubmenuTrigger } from 'react-aria-components';
import type { TextFieldAria } from '@react-aria/textfield';
import { TextInputBase } from '@koobiq/react-core';
import { ToggleEventHandler } from 'react';
@@ -226,10 +244,16 @@ export type AriaTreeSelectOptions = TreeSelectStateOptions;
+export { Autocomplete }
+
export { AutocompleteAria }
+export { AutocompleteProps }
+
export { AutocompleteState }
+export { AutocompleteStateContext }
+
// @public
export const Button: PolyForwardComponent<"button", ButtonBaseProps, ElementType>;
@@ -328,6 +352,8 @@ export type FieldErrorProps = ComponentPropsWithRe
// @public (undocumented)
export type FieldErrorRenderProps = ValidationResult;
+export { FieldInputContext }
+
export { FileTrigger }
export { FileTriggerProps }
@@ -376,6 +402,10 @@ export type GroupRenderProps = {
isInvalid: boolean;
};
+export { Header }
+
+export { HeaderProps }
+
// @public (undocumented)
export const Input: ForwardRefExoticComponent & RefAttributes>;
@@ -444,6 +474,22 @@ export type LinkRenderProps = {
isFocusVisible: boolean;
};
+export { Menu }
+
+export { MenuItem }
+
+export { MenuItemProps }
+
+export { MenuItemRenderProps }
+
+export { MenuProps }
+
+export { MenuSection }
+
+export { MenuSectionProps }
+
+export { MenuTrigger }
+
// @public (undocumented)
export interface MultiSelectListProps extends CollectionBase, MultipleSelection {
}
@@ -488,6 +534,10 @@ export type NumberFieldRenderProps = {
export { OverlayTriggerState }
+export { OverlayTriggerStateContext }
+
+export { PopoverContext }
+
// @public (undocumented)
export const ProgressBar: PolyForwardComponent<"div", ProgressBarBaseProps, ElementType>;
@@ -551,6 +601,10 @@ export function removeDataAttributes(props: T): T;
type SelectionMode_2 = 'single' | 'multiple';
export { SelectionMode_2 as SelectionMode }
+export { Separator }
+
+export { SubmenuTrigger }
+
// @public (undocumented)
export const Switch: ForwardRefExoticComponent> & RenderProps & {
inputRef?: RefObject;
- {type === 'dialog' ? (
-
- ) : (
- resolvedChildren
- )}
+
+ {/* Box-less anchor of the group, left out of the backdrop. */}
+
-
+
+ {renderPopover(transition)}
+
-