UNPKG

@primer/react

Version:

An implementation of GitHub's Primer Design System using React

85 lines 4.5 kB
import type { JSX } from 'react'; import type React from 'react'; import type { TextInputProps } from '../TextInput'; import { type ActionListProps } from '../ActionList'; import type { GroupedListProps, ListPropsBase } from './'; import type { FilteredActionListLoadingType } from './FilteredActionListLoaders'; export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase { loading?: boolean; loadingType?: FilteredActionListLoadingType; placeholderText?: string; filterValue?: string; onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void; onListContainerRefChanged?: (ref: HTMLElement | null) => void; onInputRefChanged?: (ref: React.RefObject<HTMLInputElement | null>) => void; /** * A ref assigned to the scrollable container wrapping the ActionList */ scrollContainerRef?: React.Ref<HTMLDivElement | null>; textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>; inputRef?: React.RefObject<HTMLInputElement | null>; message?: React.ReactNode; messageText?: { title: string; description: string; }; className?: string; announcementsEnabled?: boolean; fullScreenOnNarrow?: boolean; onSelectAllChange?: (checked: boolean) => void; /** * Additional props to pass to the underlying ActionList component. */ actionListProps?: Partial<ActionListProps>; /** * Determines how keyboard focus behaves when navigating beyond the first or last item in the list. * * - `'stop'`: Focus will stop at the first or last item; further navigation in that direction will not move focus. * - `'wrap'`: Focus will wrap around to the opposite end of the list when navigating past the boundaries (e.g., pressing Down on the last item moves focus to the first). * * @default 'wrap' */ focusOutBehavior?: 'stop' | 'wrap'; /** * Callback function that is called when the active descendant changes. * * @param newActiveDescendant - The new active descendant element. * @param previousActiveDescendant - The previous active descendant element. * @param directlyActivated - Whether the active descendant was directly activated (e.g., by a keyboard event). */ onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void; /** * Private API for use internally only. Adds the ability to switch between * `active-descendant` and roving tabindex. * * By default, FilteredActionList uses `aria-activedescendant` to manage focus. * * Roving tabindex is an alternative focus management method that moves * focus to the list items themselves instead of keeping focus on the input. * * Improper usage can lead to inaccessible experiences, so this prop should be used with caution. * * For usage, refer to the documentation: * * WAI-ARIA `aria-activedescendant`: https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant * * Roving Tabindex: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex * * @default 'active-descendant' */ _PrivateFocusManagement?: 'roving-tabindex' | 'active-descendant'; /** * If true, disables selecting items when hovering over them with the mouse. */ disableSelectOnHover?: boolean; /** * If true, focus remains where it was and the user must interact to move focus. * If false, sets initial focus to the first item in the list when rendered, enabling keyboard navigation immediately. */ setInitialFocus?: boolean; } export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, scrollContainerRef: providedScrollContainerRef, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, actionListProps, focusOutBehavior, _PrivateFocusManagement, onActiveDescendantChanged, disableSelectOnHover, setInitialFocus, ...listProps }: FilteredActionListProps): JSX.Element; export declare namespace FilteredActionList { var displayName: string; } //# sourceMappingURL=FilteredActionList.d.ts.map