stream-chat-react/dist/types/components/SkipNavigation/SkipNavigation.d.ts

React components to create chat conversations or livestream style chat

import type { ComponentPropsWithoutRef, ReactNode } from 'react';
/**
 * `SkipNavigation` is an opt-in skip links helper for integrators and is not rendered by `Chat`.
 *
 * Intended integration:
 * - Render as the first keyboard-focusable element in your chat layout.
 * - Pass `targetIds` ordered by keyboard priority (for example message composer first).
 * - Each value must be a DOM id (without `#`) so links keep native hash navigation semantics.
 *
 * Activation behavior:
 * - Renders one link per target id.
 * - Keeps native hash-link behavior via `href="#{targetId}"`.
 * - Programmatically moves focus to each target element for reliable keyboard navigation.
 * - If the target is not naturally focusable, temporarily applies `tabindex="-1"` and
 *   removes it on blur.
 *
 * The caller can intercept activation by passing `onClick` and calling `event.preventDefault()`.
 *
 * @example
 * ```tsx
 * <SkipNavigation
 *   getLinkLabel={(targetId) =>
 *     targetId === 'my-message-composer-textarea'
 *       ? 'Skip to message composer'
 *       : 'Skip to channel messages'
 *   }
 *   targetIds={['my-message-composer-textarea', 'my-channel-root']}
 * />
 * ```
 */
export type SkipNavigationProps = Omit<ComponentPropsWithoutRef<'a'>, 'href'> & {
    /** Optional per-link label generator. Defaults to `Skip to {targetId}`. */
    getLinkLabel?: (targetId: string, index: number) => ReactNode;
    /** Ordered DOM ids of elements that should receive focus when links are activated. */
    targetIds: string[];
};
export declare const SkipNavigation: ({ className, getLinkLabel, onClick, onKeyDown, targetIds, ...anchorProps }: SkipNavigationProps) => import("react/jsx-runtime").JSX.Element | null;
//# sourceMappingURL=SkipNavigation.d.ts.map