@primer/react
Version:
An implementation of GitHub's Primer Design System using React
85 lines • 4.5 kB
TypeScript
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