/
index.tsx
49 lines (44 loc) · 1.19 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
* External dependencies
*/
// eslint-disable-next-line no-restricted-imports
import * as Ariakit from '@ariakit/react';
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import type { DisclosureContentProps } from './types';
import type { WordPressComponentProps } from '../context';
/**
* Accessible Disclosure component that controls visibility of a section of
* content. It follows the WAI-ARIA Disclosure Pattern.
*
* @see https://ariakit.org/reference/disclosure-content
*
* The plan is to build own API that accounts for future breaking changes
* in Ariakit (https://github.com/WordPress/gutenberg/pull/28085).
*/
const UnforwardedDisclosureContent = (
{
visible,
children,
...props
}: WordPressComponentProps< DisclosureContentProps, 'div', false >,
ref: React.ForwardedRef< any >
) => {
const disclosure = Ariakit.useDisclosureStore( { open: visible } );
return (
<Ariakit.DisclosureContent
store={ disclosure }
ref={ ref }
{ ...props }
>
{ children }
</Ariakit.DisclosureContent>
);
};
export const DisclosureContent = forwardRef( UnforwardedDisclosureContent );
export default DisclosureContent;