Skip to content

allow to specify the type of ref returned by useFocusable #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zemlanin wants to merge 3 commits into
base: main
Choose a base branch
from
Open

allow to specify the type of ref returned by useFocusable #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
742247b
allow to specify the type of `ref` returned by `useFocusable`
zemlanin Nov 14, 2025
32bc04f
don't require element type arg to extend `HTMLElement`
zemlanin Dec 10, 2025
9dcbf26
keep treating `node` option as `any`
zemlanin Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const MenuItemBox = styled.div<MenuItemBoxProps>`
`;

function MenuItem() {
const { ref, focused } = useFocusable();
const { ref, focused } = useFocusable<object, HTMLDivElement>();

return <MenuItemBox ref={ref} focused={focused} />;
}
Expand Down Expand Up @@ -142,7 +142,7 @@ function Menu({ focusKey: focusKeyParam }: MenuProps) {
// resume, -- to resume all navigation events
// updateAllLayouts, -- to force update all layouts when needed
// getCurrentFocusKey -- to get the current focus key
} = useFocusable({
} = useFocusable<object, HTMLDivElement>({
focusable: true,
saveLastFocusedChild: false,
trackChildren: true,
Expand Down Expand Up @@ -231,7 +231,7 @@ function Asset({
isShuffleSize,
index
}: AssetProps) {
const { ref, focused } = useFocusable({
const { ref, focused } = useFocusable<object, HTMLDivElement>({
onEnterPress,
onFocus,
extraProps: {
Expand Down Expand Up @@ -296,7 +296,7 @@ function ContentRow({
onFocus,
isShuffleSize
}: ContentRowProps) {
const { ref, focusKey } = useFocusable({
const { ref, focusKey } = useFocusable<object, HTMLDivElement>({
onFocus
});

Expand Down Expand Up @@ -424,7 +424,7 @@ const DIRECTION_RIGHT = 'right';
function ProgressBar() {
const [percent, setPercent] = useState(defaultPercent);
const timerRef = useRef<NodeJS.Timer | null>(null);
const { ref, focused } = useFocusable({
const { ref, focused } = useFocusable<object, HTMLDivElement>({
onArrowPress: (direction: string) => {
if (direction === DIRECTION_RIGHT && timerRef.current === null) {
timerRef.current = setInterval(() => {
Expand Down Expand Up @@ -465,7 +465,7 @@ function ProgressBar() {
}

function Content() {
const { ref, focusKey } = useFocusable();
const { ref, focusKey } = useFocusable<object, HTMLDivElement>();

const [selectedAsset, setSelectedAsset] = useState(null);

Expand Down
14 changes: 7 additions & 7 deletions src/useFocusable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,15 @@ export interface UseFocusableConfig<P = object> {
extraProps?: P;
}

export interface UseFocusableResult {
ref: RefObject<any>; // <any> since we don't know which HTML tag is passed here
export interface UseFocusableResult<E = any> {
ref: RefObject<E>;
focusSelf: (focusDetails?: FocusDetails) => void;
focused: boolean;
hasFocusedChild: boolean;
focusKey: string;
}

const useFocusableHook = <P>({
const useFocusableHook = <P, E = any>({
focusable = true,
saveLastFocusedChild = true,
trackChildren = false,
Expand All @@ -91,7 +91,7 @@ const useFocusableHook = <P>({
onFocus = noop,
onBlur = noop,
extraProps
}: UseFocusableConfig<P> = {}): UseFocusableResult => {
}: UseFocusableConfig<P> = {}): UseFocusableResult<E> => {
const onEnterPressHandler = useCallback(
(details: KeyPressDetails) => {
onEnterPress(extraProps, details);
Expand Down Expand Up @@ -127,7 +127,7 @@ const useFocusableHook = <P>({
[extraProps, onBlur]
);

const ref = useRef(null);
const ref = useRef<E>(null);

const [focused, setFocused] = useState(false);
const [hasFocusedChild, setHasFocusedChild] = useState(false);
Expand All @@ -150,7 +150,7 @@ const useFocusableHook = <P>({
);

useEffect(() => {
const node = ref.current;
const node: any = ref.current;

SpatialNavigation.addFocusable({
focusKey,
Expand Down Expand Up @@ -183,7 +183,7 @@ const useFocusableHook = <P>({
}, []); // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
const node = ref.current;
const node: any = ref.current;

SpatialNavigation.updateFocusable(focusKey, {
node,
Expand Down