Add DisclosureContent

packages/components/src/composite/index.js

@@ -1,4 +1,10 @@
 /**
+ * Composite is a component that may contain navigable items represented by
+ * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
  * @see https://reakit.io/docs/composite/
  */
 export {

packages/components/src/disclosure/index.js

@@ -0,0 +1,7 @@
+/**
+ * Accessible Disclosure component that controls visibility of a section of
+ * content. It follows the WAI-ARIA Disclosure Pattern.
+ *
+ * @see https://reakit.io/docs/disclosure/
+ */
+export { DisclosureContent } from 'reakit';

packages/components/src/index.js

@@ -41,6 +41,7 @@ export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as __experimentalDimensionControl } from './dimension-control';
 export { default as Disabled } from './disabled';
+export { DisclosureContent as __unstableDisclosureContent } from './disclosure';
 export { default as Draggable } from './draggable';
 export {
 	default as DropZone,

packages/edit-widgets/src/blocks/widget-area/edit/index.js

@@ -1,15 +1,14 @@
-/**
- * External dependencies
- */
-import { DisclosureContent } from 'reakit/Disclosure';
-
 /**
  * WordPress dependencies
  */
 import { useEffect, useState, useCallback, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { EntityProvider } from '@wordpress/core-data';
-import { Panel, PanelBody } from '@wordpress/components';
+import {
+	__unstableDisclosureContent,
+	Panel,
+	PanelBody,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -67,15 +66,15 @@ export default function WidgetAreaEdit( {
 				{ ( { opened } ) => (
 					// This is required to ensure LegacyWidget blocks are not unmounted when the panel is collapsed.
 					// Unmounting legacy widgets may have unintended consequences (e.g. TinyMCE not being properly reinitialized)
-					<DisclosureContent visible={ opened }>
+					<__unstableDisclosureContent visible={ opened }>
 						<EntityProvider
 							kind="root"
 							type="postType"
 							id={ `widget-area-${ id }` }
 						>
 							<WidgetAreaInnerBlocks />
 						</EntityProvider>
-					</DisclosureContent>
+					</__unstableDisclosureContent>
 				) }
 			</PanelBody>
 		</Panel>