Files
NapCatQQ/.pnpm-store/v3/files/23/5646c34581679def16aa8b6cdb7e49184dc01d391616b887e74744b0a3d72c05826d6ee49493b1f955c608465290cb125ef0281e2b2bffe441f7a593a08cee
TanTan e311ca3275
Build NapCat Artifacts / Windows Loader Test (push) Canceled after 0s
Build NapCat Artifacts / Type Check & Test (push) Canceled after 0s
Build NapCat Artifacts / Build NapCat.Framework (push) Canceled after 0s
Build NapCat Artifacts / Build NapCat.Shell (push) Canceled after 0s
docs: 仓库链接指向本镜像仓库
2026-11-13 09:25:58 +08:00

79 lines
2.2 KiB
Plaintext

import {DOMAttributes} from '@react-types/shared';
import {isFocusVisible, useFocus, useFocusVisibleListener, useFocusWithin} from '@react-aria/interactions';
import {useCallback, useRef, useState} from 'react';
export interface AriaFocusRingProps {
/**
* Whether to show the focus ring when something
* inside the container element has focus (true), or
* only if the container itself has focus (false).
* @default 'false'
*/
within?: boolean,
/** Whether the element is a text input. */
isTextInput?: boolean,
/** Whether the element will be auto focused. */
autoFocus?: boolean
}
export interface FocusRingAria {
/** Whether the element is currently focused. */
isFocused: boolean,
/** Whether keyboard focus should be visible. */
isFocusVisible: boolean,
/** Props to apply to the container element with the focus ring. */
focusProps: DOMAttributes
}
/**
* Determines whether a focus ring should be shown to indicate keyboard focus.
* Focus rings are visible only when the user is interacting with a keyboard,
* not with a mouse, touch, or other input methods.
*/
export function useFocusRing(props: AriaFocusRingProps = {}): FocusRingAria {
let {
autoFocus = false,
isTextInput,
within
} = props;
let state = useRef({
isFocused: false,
isFocusVisible: autoFocus || isFocusVisible()
});
let [isFocused, setFocused] = useState(false);
let [isFocusVisibleState, setFocusVisible] = useState(() => state.current.isFocused && state.current.isFocusVisible);
let updateState = useCallback(() => setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
let onFocusChange = useCallback(isFocused => {
state.current.isFocused = isFocused;
setFocused(isFocused);
updateState();
}, [updateState]);
useFocusVisibleListener((isFocusVisible) => {
state.current.isFocusVisible = isFocusVisible;
updateState();
}, [], {isTextInput});
let {focusProps} = useFocus({
isDisabled: within,
onFocusChange
});
let {focusWithinProps} = useFocusWithin({
isDisabled: !within,
onFocusWithinChange: onFocusChange
});
return {
isFocused,
isFocusVisible: isFocusVisibleState,
focusProps: within ? focusWithinProps : focusProps
};
}