@wordpress/components 23.4.0 → 23.5.0

package/build-types/tools-panel/tools-panel-item/component.d.ts

@@ -3,6 +3,7 @@ export declare const ToolsPanelItem: import("../../ui/context").WordPressCompone
     children?: import("react").ReactNode;
     onDeselect?: (() => void) | undefined;
     onSelect?: (() => void) | undefined;
+    resetAllFilter?: import("../types").ResetAllFilter | undefined;
 } & import("react").RefAttributes<any>, true>;
 export default ToolsPanelItem;
 //# sourceMappingURL=component.d.ts.map

package/build-types/tools-panel/tools-panel-item/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/component.tsx"],"names":[],"mappings":";AAuCA,eAAO,MAAM,cAAc;;;;6CAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/component.tsx"],"names":[],"mappings":";AAuCA,eAAO,MAAM,cAAc;;;;;6CAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build-types/tools-panel/tools-panel-item/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAWA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgL5D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAWA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgM5D"}

package/build-types/tools-panel/types.d.ts

@@ -6,7 +6,7 @@ import type { ReactNode } from 'react';
  * Internal dependencies
  */
 import type { HeadingSize } from '../heading/types';
-declare type ResetAllFilter = (attributes?: any) => any;
+export declare type ResetAllFilter = (attributes?: any) => any;
 declare type ResetAll = (filters?: ResetAllFilter[]) => void;
 export declare type ToolsPanelProps = {
     /**
@@ -117,14 +117,6 @@ export declare type ToolsPanelItem = {
      * from a shared source.
      */
     panelId?: string | null;
-    /**
-     * A `ToolsPanel` will collect each item's `resetAllFilter` and pass an
-     * array of these functions through to the panel's `resetAll` callback. They
-     * can then be iterated over to perform additional tasks.
-     *
-     * @default noop
-     */
-    resetAllFilter?: ResetAllFilter;
 };
 export declare type ToolsPanelItemProps = ToolsPanelItem & {
     /**
@@ -141,6 +133,14 @@ export declare type ToolsPanelItemProps = ToolsPanelItem & {
      * menu.
      */
     onSelect?: () => void;
+    /**
+     * A `ToolsPanel` will collect each item's `resetAllFilter` and pass an
+     * array of these functions through to the panel's `resetAll` callback. They
+     * can then be iterated over to perform additional tasks.
+     *
+     * @default noop
+     */
+    resetAllFilter?: ResetAllFilter;
 };
 export declare type ToolsPanelMenuItemKey = 'default' | 'optional';
 export declare type ToolsPanelMenuItems = {
@@ -154,6 +154,8 @@ export declare type ToolsPanelContext = {
     hasMenuItems: boolean;
     registerPanelItem: (item: ToolsPanelItem) => void;
     deregisterPanelItem: (label: string) => void;
+    registerResetAllFilter: (filter: ResetAllFilter) => void;
+    deregisterResetAllFilter: (filter: ResetAllFilter) => void;
     flagItemCustomization: (label: string, group?: ToolsPanelMenuItemKey) => void;
     isResetting: boolean;
     shouldRenderPlaceholderItems: boolean;

package/build-types/tools-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}

package/build-types/ui/context/context-system-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-system-provider.d.ts","sourceRoot":"","sources":["../../../src/ui/context/context-system-provider.js"],"names":[],"mappings":"AAuBA,6EAEE;AACK,4DAAkE;AA0EzE;cAdW,OAAO,OAAO,EAAE,SAAS;;MAExB,WAAW,GAYgD"}
+{"version":3,"file":"context-system-provider.d.ts","sourceRoot":"","sources":["../../../src/ui/context/context-system-provider.js"],"names":[],"mappings":"AAwBA,6EAEE;AACK,4DAAkE;AA4EzE;cAdW,OAAO,OAAO,EAAE,SAAS;;MAExB,WAAW,GAYgD"}

package/build-types/v-stack/stories/e2e/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { VStack } from '../..';
+declare const meta: ComponentMeta<typeof VStack>;
+export default meta;
+export declare const Default: ComponentStory<typeof VStack>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/v-stack/stories/e2e/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v-stack/stories/e2e/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,MAAM,CAGvC,CAAC;AACF,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "23.4.0",
+	"version": "23.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,37 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
-		"@floating-ui/react-dom": "^1.0.0",
+		"@floating-ui/react-dom": "1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.27.0",
-		"@wordpress/compose": "^6.4.0",
-		"@wordpress/date": "^4.27.0",
-		"@wordpress/deprecated": "^3.27.0",
-		"@wordpress/dom": "^3.27.0",
-		"@wordpress/element": "^5.4.0",
-		"@wordpress/escape-html": "^2.27.0",
-		"@wordpress/hooks": "^3.27.0",
-		"@wordpress/html-entities": "^3.27.0",
-		"@wordpress/i18n": "^4.27.0",
-		"@wordpress/icons": "^9.18.0",
-		"@wordpress/is-shallow-equal": "^4.27.0",
-		"@wordpress/keycodes": "^3.27.0",
-		"@wordpress/primitives": "^3.25.0",
-		"@wordpress/private-apis": "^0.9.0",
-		"@wordpress/rich-text": "^6.4.0",
-		"@wordpress/warning": "^2.27.0",
+		"@wordpress/a11y": "^3.28.0",
+		"@wordpress/compose": "^6.5.0",
+		"@wordpress/date": "^4.28.0",
+		"@wordpress/deprecated": "^3.28.0",
+		"@wordpress/dom": "^3.28.0",
+		"@wordpress/element": "^5.5.0",
+		"@wordpress/escape-html": "^2.28.0",
+		"@wordpress/hooks": "^3.28.0",
+		"@wordpress/html-entities": "^3.28.0",
+		"@wordpress/i18n": "^4.28.0",
+		"@wordpress/icons": "^9.19.0",
+		"@wordpress/is-shallow-equal": "^4.28.0",
+		"@wordpress/keycodes": "^3.28.0",
+		"@wordpress/primitives": "^3.26.0",
+		"@wordpress/private-apis": "^0.10.0",
+		"@wordpress/rich-text": "^6.5.0",
+		"@wordpress/warning": "^2.28.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"date-fns": "^2.28.0",
+		"deepmerge": "^4.3.0",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^7.6.1",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
+		"is-plain-object": "^5.0.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"path-to-regexp": "^6.2.1",
@@ -74,7 +76,7 @@
 		"remove-accents": "^0.4.2",
 		"use-lilius": "^2.0.1",
 		"uuid": "^8.3.0",
-		"valtio": "^1.7.0"
+		"valtio": "1.7.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -83,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
+	"gitHead": "d5e03a74b79e3ca84afda24375474a103a063ee4"
 }

package/src/autocomplete/autocompleter-ui.js

@@ -6,8 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useRef, useEffect } from '@wordpress/element';
+import {
+	useLayoutEffect,
+	useRef,
+	useEffect,
+	useState,
+} from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
+import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -15,6 +21,8 @@ import { useAnchor } from '@wordpress/rich-text';
 import getDefaultUseItems from './get-default-use-items';
 import Button from '../button';
 import Popover from '../popover';
+import { VisuallyHidden } from '../visually-hidden';
+import { createPortal } from 'react-dom';
 
 export function getAutoCompleterUI( autocompleter ) {
 	const useItems = autocompleter.useItems
@@ -40,7 +48,25 @@ export function getAutoCompleterUI( autocompleter ) {
 			value,
 		} );
 
+		const [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );
 		const popoverRef = useRef();
+		const popoverRefs = useMergeRefs( [
+			popoverRef,
+			useRefEffect(
+				( node ) => {
+					if ( ! contentRef.current ) return;
+
+					// If the popover is rendered in a different document than
+					// the content, we need to duplicate the options list in the
+					// content document so that it's available to the screen
+					// readers, which check the DOM ID based aira-* attributes.
+					setNeedsA11yCompat(
+						node.ownerDocument !== contentRef.current.ownerDocument
+					);
+				},
+				[ contentRef ]
+			),
+		] );
 
 		useOnClickOutside( popoverRef, reset );
 
@@ -55,41 +81,53 @@ export function getAutoCompleterUI( autocompleter ) {
 			return null;
 		}
 
-		return (
-			<Popover
-				focusOnMount={ false }
-				onClose={ onReset }
-				placement="top-start"
-				className="components-autocomplete__popover"
-				anchor={ popoverAnchor }
-				ref={ popoverRef }
+		const ListBox = ( { Component = 'div' } ) => (
+			<Component
+				id={ listBoxId }
+				role="listbox"
+				className="components-autocomplete__results"
 			>
-				<div
-					id={ listBoxId }
-					role="listbox"
-					className="components-autocomplete__results"
+				{ items.map( ( option, index ) => (
+					<Button
+						key={ option.key }
+						id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
+						role="option"
+						aria-selected={ index === selectedIndex }
+						disabled={ option.isDisabled }
+						className={ classnames(
+							'components-autocomplete__result',
+							className,
+							{
+								'is-selected': index === selectedIndex,
+							}
+						) }
+						onClick={ () => onSelect( option ) }
+					>
+						{ option.label }
+					</Button>
+				) ) }
+			</Component>
+		);
+
+		return (
+			<>
+				<Popover
+					focusOnMount={ false }
+					onClose={ onReset }
+					placement="top-start"
+					className="components-autocomplete__popover"
+					anchor={ popoverAnchor }
+					ref={ popoverRefs }
 				>
-					{ items.map( ( option, index ) => (
-						<Button
-							key={ option.key }
-							id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
-							role="option"
-							aria-selected={ index === selectedIndex }
-							disabled={ option.isDisabled }
-							className={ classnames(
-								'components-autocomplete__result',
-								className,
-								{
-									'is-selected': index === selectedIndex,
-								}
-							) }
-							onClick={ () => onSelect( option ) }
-						>
-							{ option.label }
-						</Button>
-					) ) }
-				</div>
-			</Popover>
+					<ListBox />
+				</Popover>
+				{ contentRef.current &&
+					needsA11yCompat &&
+					createPortal(
+						<ListBox Component={ VisuallyHidden } />,
+						contentRef.current.ownerDocument.body
+					) }
+			</>
 		);
 	}
 

package/src/autocomplete/index.js

@@ -35,6 +35,8 @@ import { speak } from '@wordpress/a11y';
 import { getAutoCompleterUI } from './autocompleter-ui';
 import { escapeRegExp } from '../utils/strings';
 
+const EMPTY_ARRAY = [];
+
 /**
  * A raw completer option.
  *
@@ -121,7 +123,7 @@ function useAutocomplete( {
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const instanceId = useInstanceId( useAutocomplete );
 	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
-	const [ filteredOptions, setFilteredOptions ] = useState( [] );
+	const [ filteredOptions, setFilteredOptions ] = useState( EMPTY_ARRAY );
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ autocompleter, setAutocompleter ] = useState( null );
 	const [ AutocompleterUI, setAutocompleterUI ] = useState( null );
@@ -169,7 +171,7 @@ function useAutocomplete( {
 
 	function reset() {
 		setSelectedIndex( 0 );
-		setFilteredOptions( [] );
+		setFilteredOptions( EMPTY_ARRAY );
 		setFilterValue( '' );
 		setAutocompleter( null );
 		setAutocompleterUI( null );
@@ -281,23 +283,19 @@ function useAutocomplete( {
 
 	useEffect( () => {
 		if ( ! textContent ) {
-			reset();
+			if ( autocompleter ) reset();
 			return;
 		}
 
-		const text = removeAccents( textContent );
-		const textAfterSelection = getTextContent(
-			slice( record, undefined, getTextContent( record ).length )
-		);
 		const completer = completers?.find(
 			( { triggerPrefix, allowContext } ) => {
-				const index = text.lastIndexOf( triggerPrefix );
+				const index = textContent.lastIndexOf( triggerPrefix );
 
 				if ( index === -1 ) {
 					return false;
 				}
 
-				const textWithoutTrigger = text.slice(
+				const textWithoutTrigger = textContent.slice(
 					index + triggerPrefix.length
 				);
 
@@ -339,9 +337,16 @@ function useAutocomplete( {
 					return false;
 				}
 
+				const textAfterSelection = getTextContent(
+					slice( record, undefined, getTextContent( record ).length )
+				);
+
 				if (
 					allowContext &&
-					! allowContext( text.slice( 0, index ), textAfterSelection )
+					! allowContext(
+						textContent.slice( 0, index ),
+						textAfterSelection
+					)
 				) {
 					return false;
 				}
@@ -358,11 +363,12 @@ function useAutocomplete( {
 		);
 
 		if ( ! completer ) {
-			reset();
+			if ( autocompleter ) reset();
 			return;
 		}
 
 		const safeTrigger = escapeRegExp( completer.triggerPrefix );
+		const text = removeAccents( textContent );
 		const match = text
 			.slice( text.lastIndexOf( completer.triggerPrefix ) )
 			.match( new RegExp( `${ safeTrigger }([\u0000-\uFFFF]*)$` ) );
@@ -412,53 +418,47 @@ function useAutocomplete( {
 	};
 }
 
+function useLastDifferentValue( value ) {
+	const history = useRef( new Set() );
+
+	history.current.add( value );
+
+	// Keep the history size to 2.
+	if ( history.current.size > 2 ) {
+		history.current.delete( Array.from( history.current )[ 0 ] );
+	}
+
+	return Array.from( history.current )[ 0 ];
+}
+
 export function useAutocompleteProps( options ) {
-	const [ isVisible, setIsVisible ] = useState( false );
 	const ref = useRef();
-	const recordAfterInput = useRef();
 	const onKeyDownRef = useRef();
+	const { record } = options;
+	const previousRecord = useLastDifferentValue( record );
 	const { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {
 		...options,
 		contentRef: ref,
 	} );
 	onKeyDownRef.current = onKeyDown;
 
-	useEffect( () => {
-		if ( isVisible ) {
-			if ( ! recordAfterInput.current ) {
-				recordAfterInput.current = options.record;
-			} else if (
-				recordAfterInput.current.start !== options.record.start ||
-				recordAfterInput.current.end !== options.record.end
-			) {
-				setIsVisible( false );
-				recordAfterInput.current = null;
-			}
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ options.record ] );
-
 	const mergedRefs = useMergeRefs( [
 		ref,
 		useRefEffect( ( element ) => {
 			function _onKeyDown( event ) {
 				onKeyDownRef.current( event );
 			}
-			function _onInput() {
-				// Only show auto complete UI if the user is inputting text.
-				setIsVisible( true );
-				recordAfterInput.current = null;
-			}
 			element.addEventListener( 'keydown', _onKeyDown );
-			element.addEventListener( 'input', _onInput );
 			return () => {
 				element.removeEventListener( 'keydown', _onKeyDown );
-				element.removeEventListener( 'input', _onInput );
 			};
 		}, [] ),
 	] );
 
-	if ( ! isVisible ) {
+	// We only want to show the popover if the user has typed something.
+	const didUserInput = record.text !== previousRecord?.text;
+
+	if ( ! didUserInput ) {
 		return { ref: mergedRefs };
 	}
 

package/src/circular-option-picker/README.md

@@ -0,0 +1,141 @@
+# `CircularOptionPicker`
+
+<div class="callout callout-alert">
+This component is not exported, and therefore can only be used internally to the `@wordpress/components` package.
+</div>
+
+`CircularOptionPicker` is a component that displays a set of options as circular buttons.
+
+## Usage
+
+```jsx
+import { CircularOptionPicker } from '../circular-option-picker';
+import { useState } from '@wordpress/element';
+
+const Example = () => {
+	const [ currentColor, setCurrentColor ] = useState();
+	const colors = [
+		{ color: '#f00', name: 'Red' },
+		{ color: '#0f0', name: 'Green' },
+		{ color: '#00f', name: 'Blue' },
+	];
+	const colorOptions = (
+		<>
+			{ colors.map( ( { color, name }, index ) => {
+				return (
+					<CircularOptionPicker.Option
+						key={ `${ color }-${ index }` }
+						tooltipText={ name }
+						style={ { backgroundColor: color, color } }
+						isSelected={ index === currentColor }
+						onClick={ () => setCurrentColor( index ) }
+						aria-label={ name }
+					/>
+				);
+			} ) }
+		</>
+	);
+	return (
+		<CircularOptionPicker
+				options={ colorOptions }
+				actions={
+					<CircularOptionPicker.ButtonAction
+						onClick={ () => setCurrentColor( undefined ) }
+					>
+						{ 'Clear' }
+					</CircularOptionPicker.ButtonAction>
+				}
+			/>
+	);
+};
+```
+
+## Props
+
+### `className`: `string`
+
+A CSS class to apply to the wrapper element.
+
+- Required: No
+
+### `actions`: `ReactNode`
+
+The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette`.
+
+Usually a `CircularOptionPicker.ButtonAction` or `CircularOptionPicker.DropdownLinkAction` component.
+
+- Required: No
+
+### `options`: `ReactNode`
+
+The options to be rendered, such as color swatches.
+
+Usually a `CircularOptionPicker.Option` component.
+
+- Required: No
+
+### `children`: `ReactNode`
+
+The child elements.
+
+- Required: No
+
+## Subcomponents
+
+### `CircularOptionPicker.ButtonAction`
+
+A `ButtonAction` is an action that is rendered as a button alongside the options themselves.
+
+A common use case is a 'clear' button to deselect the currently selected option.
+
+#### Props
+
+##### `className`: `string`
+
+A CSS class to apply to the underlying `Button` component.
+
+- Required: No
+
+##### `children`: `ReactNode`
+
+The button's children.
+
+- Required: No
+
+##### Inherited props
+
+`CircularOptionPicker.ButtonAction` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+### `CircularOptionPicker.DropdownLinkAction`
+
+`CircularOptionPicker.DropdownLinkAction` is an action that's hidden behind a dropdown toggle. The button is formatted as a link and rendered as an `anchor` element.
+
+#### Props
+
+##### `className`: `string`
+
+A CSS class to apply to the underlying `Dropdown` component.
+
+- Required: No
+
+##### `linkText`: `string`
+
+The text to be displayed on the button.
+
+- Required: Yes
+
+##### `dropdownProps`: `object`
+
+The props for the underlying `Dropdown` component.
+
+Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.md#props), except for `className` and `renderToggle`.
+
+- Required: Yes
+
+##### `buttonProps`: `object`
+
+Props for the underlying `Button` component.
+
+Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`. 
+
+- Required: No