DisclosureContent: migrate from reakit to @ariakit/react

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Internal
 
 -   Migrate `Divider` from `reakit` to `ariakit` ([#55622](https://github.com/WordPress/gutenberg/pull/55622))
+-   Migrate `DisclosureContent` from `reakit` to `ariakit` and TypeScript ([#55639](https://github.com/WordPress/gutenberg/pull/55639))
 
 ### Experimental
 

packages/components/src/disclosure/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+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;

packages/components/src/disclosure/types.tsx

@@ -0,0 +1,10 @@
+export type DisclosureContentProps = {
+	/**
+	 * If set to `true` the content will be shown, otherwise it's hidden.
+	 */
+	visible?: boolean;
+	/**
+	 * The content to display within the component.
+	 */
+	children: React.ReactNode;
+};