@loke/ui
Version:
47 lines (46 loc) • 2.25 kB
text/typescript
import { Primitive } from "@loke/ui/primitive";
import { type AriaAttributes, type ComponentPropsWithoutRef, type ReactNode } from "react";
declare const createRovingFocusGroupScope: import("@loke/ui/context").CreateScope;
type Orientation = AriaAttributes["aria-orientation"];
type Direction = "ltr" | "rtl";
interface RovingFocusGroupOptions {
/**
* The direction of navigation between items.
*/
dir?: Direction;
/**
* Whether keyboard navigation should loop around
* @defaultValue false
*/
loop?: boolean;
/**
* The orientation of the group.
* Mainly so arrow navigation is done accordingly (left & right vs. up & down)
*/
orientation?: Orientation;
}
type RovingFocusGroupProps = RovingFocusGroupImplProps;
declare const RovingFocusGroup: import("react").ForwardRefExoticComponent<RovingFocusGroupImplProps & import("react").RefAttributes<HTMLDivElement>>;
type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
interface RovingFocusGroupImplProps extends Omit<PrimitiveDivProps, "dir">, RovingFocusGroupOptions {
currentTabStopId?: string | null;
defaultCurrentTabStopId?: string;
onCurrentTabStopIdChange?: (tabStopId: string | null) => void;
onEntryFocus?: (event: Event) => void;
preventScrollOnEntryFocus?: boolean;
}
type PrimitiveSpanProps = ComponentPropsWithoutRef<typeof Primitive.span>;
interface RovingFocusItemProps extends Omit<PrimitiveSpanProps, "children"> {
active?: boolean;
children?: ReactNode | ((props: {
hasTabStop: boolean;
isCurrentTabStop: boolean;
}) => ReactNode);
focusable?: boolean;
tabStopId?: string;
}
declare const RovingFocusGroupItem: import("react").ForwardRefExoticComponent<RovingFocusItemProps & import("react").RefAttributes<HTMLSpanElement>>;
declare const Root: import("react").ForwardRefExoticComponent<RovingFocusGroupImplProps & import("react").RefAttributes<HTMLDivElement>>;
declare const Item: import("react").ForwardRefExoticComponent<RovingFocusItemProps & import("react").RefAttributes<HTMLSpanElement>>;
export { createRovingFocusGroupScope, RovingFocusGroup, RovingFocusGroupItem, Root, Item, };
export type { RovingFocusGroupProps, RovingFocusItemProps };