-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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.
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
feat: Add docs for custom overlay trigger elements #7662
base: main
Are you sure you want to change the base?
Conversation
## API Changes
react-aria-components/react-aria-components:Pressable+Pressable {
+ allowTextSelectionOnPress?: boolean
+ children: ReactElement<DOMAttributes, string>
+ isDisabled?: boolean
+ isPressed?: boolean
+ onPress?: (PressEvent) => void
+ onPressChange?: (boolean) => void
+ onPressEnd?: (PressEvent) => void
+ onPressStart?: (PressEvent) => void
+ onPressUp?: (PressEvent) => void
+ preventFocusOnPress?: boolean
+ shouldCancelOnPointerExit?: boolean
+} /react-aria-components:Focusable+Focusable {
+ autoFocus?: boolean
+ children: ReactElement<DOMAttributes, string>
+ excludeFromTabOrder?: boolean
+ id?: string
+ isDisabled?: boolean
+ onBlur?: (FocusEvent<T>) => void
+ onFocus?: (FocusEvent<T>) => void
+ onFocusChange?: (boolean) => void
+ onKeyDown?: (KeyboardEvent) => void
+ onKeyUp?: (KeyboardEvent) => void
+} @react-aria/focus/@react-aria/focus:Focusable+Focusable {
+ autoFocus?: boolean
+ children: ReactElement<DOMAttributes, string>
+ excludeFromTabOrder?: boolean
+ id?: string
+ isDisabled?: boolean
+ onBlur?: (FocusEvent<T>) => void
+ onFocus?: (FocusEvent<T>) => void
+ onFocusChange?: (boolean) => void
+ onKeyDown?: (KeyboardEvent) => void
+ onKeyUp?: (KeyboardEvent) => void
+} @react-aria/interactions/@react-aria/interactions:useFocusable+useFocusable <T extends FocusableElement = FocusableElement> {
+ props: FocusableOptions<T>
+ domRef: RefObject<FocusableElement | null>
+ returnVal: undefined
+} /@react-aria/interactions:FocusableProvider+FocusableProvider {
+ children?: ReactNode
+ className?: string | undefined
+ id?: string | undefined
+ role?: AriaRole | undefined
+ style?: CSSProperties | undefined
+ tabIndex?: number | undefined
+} /@react-aria/interactions:Focusable+Focusable {
+ autoFocus?: boolean
+ children: ReactElement<DOMAttributes, string>
+ excludeFromTabOrder?: boolean
+ id?: string
+ isDisabled?: boolean
+ onBlur?: (FocusEvent<T>) => void
+ onFocus?: (FocusEvent<T>) => void
+ onFocusChange?: (boolean) => void
+ onKeyDown?: (KeyboardEvent) => void
+ onKeyUp?: (KeyboardEvent) => void
+} /@react-aria/interactions:focusSafely+focusSafely {
+ element: FocusableElement
+ returnVal: undefined
+} /@react-aria/interactions:FocusableAria+FocusableAria {
+ focusableProps: DOMAttributes
+} /@react-aria/interactions:FocusableOptions+FocusableOptions <T = FocusableElement> {
+ autoFocus?: boolean
+ excludeFromTabOrder?: boolean
+ id?: string
+ isDisabled?: boolean
+ onBlur?: (FocusEvent<T>) => void
+ onFocus?: (FocusEvent<T>) => void
+ onFocusChange?: (boolean) => void
+ onKeyDown?: (KeyboardEvent) => void
+ onKeyUp?: (KeyboardEvent) => void
+} /@react-aria/interactions:FocusableProviderProps+FocusableProviderProps {
+ children?: ReactNode
+ className?: string | undefined
+ id?: string | undefined
+ role?: AriaRole | undefined
+ style?: CSSProperties | undefined
+ tabIndex?: number | undefined
+} |
|
||
useEffect(() => { | ||
let el = ref.current; | ||
if (!el || !(el instanceof Element)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
may as well not introduce more issues with iframes, can't use instanceof Element directly
instead use
const windowObject = getOwnerWindow(el);
el instanceof windowObject.Element
@@ -207,4 +207,65 @@ describe('Tooltip', () => { | |||
act(() => jest.runAllTimers()); | |||
}); | |||
}); | |||
|
|||
it('should support custom Focusable trigger on hover', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it('should support custom Focusable trigger on hover', async () => { | |
it('should support custom Focusable trigger on focus', async () => { |
expect(tooltip).toBeInTheDocument(); | ||
}); | ||
|
||
it('should support custom Focusable trigger on focus', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it('should support custom Focusable trigger on focus', async () => { | |
it('should support custom Focusable trigger on hover', async () => { |
This adds docs for the
<Pressable>
(existing) and<Focusable>
(new) components, which can be used to wrap custom trigger elements in aDialogTrigger
,MenuTrigger
, orTooltipTrigger
. This enables easier migration to React Aria Components by letting teams reuse their existing button components without migrating to the RAC button. It is possible thanks to the recentusePress
changes that improved compatibility with external libraries.I added some additional safety features to Pressable and Focusable:
Pressable
elements are now also focusable, meaning they automatically work with TooltipTrigger and have atabIndex
tabIndex
not forwarded)The first one required moving
useFocusable
into@react-aria/interactions
to avoid a circular dependency.In terms of API, Pressable already relied on
cloneElement
which is perhaps not the greatest. I considered supporting a function child API instead, like this:Open to considering this, but it is slightly more to type and for this limited case cloneElement may be ok. We also typically use render prop functions to render the children of a component, not the component itself so it might be a little out of place.