@wordpress/components 23.3.5 → 23.5.0

package/src/toolbar/stories/{index.js → index.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -18,6 +23,7 @@ import {
 	arrowRight,
 	chevronDown,
 } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -29,9 +35,9 @@ import {
 	ToolbarItem,
 	ToolbarDropdownMenu,
 } from '..';
-import { SVG, Path, DropdownMenu } from '../../';
+import DropdownMenu from '../../dropdown-menu';
 
-export default {
+const meta: ComponentMeta< typeof Toolbar > = {
 	title: 'Components/Toolbar',
 	component: Toolbar,
 	subcomponents: {
@@ -49,6 +55,8 @@ export default {
 	},
 };
 
+export default meta;
+
 function InlineImageIcon() {
 	return (
 		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -57,7 +65,7 @@ function InlineImageIcon() {
 	);
 }
 
-const Template = ( props ) => (
+const Template: ComponentStory< typeof Toolbar > = ( props ) => (
 	<div style={ { height: 280 } }>
 		<Toolbar { ...props } />
 	</div>
@@ -74,29 +82,32 @@ Default.args = {
 			</ToolbarGroup>
 			<ToolbarGroup>
 				<ToolbarItem>
-					{ ( toggleProps ) => (
-						<DropdownMenu
-							hasArrowIndicator
-							icon={ alignLeft }
-							label="Align"
-							controls={ [
-								{
-									icon: alignLeft,
-									title: 'Align left',
-									isActive: true,
-								},
-								{
-									icon: alignCenter,
-									title: 'Align center',
-								},
-								{
-									icon: alignRight,
-									title: 'Align right',
-								},
-							] }
-							toggleProps={ toggleProps }
-						/>
-					) }
+					{
+						// @ts-expect-error TODO: Remove when ToolbarItem/DropdownMenu is typed
+						( toggleProps ) => (
+							<DropdownMenu
+								hasArrowIndicator
+								icon={ alignLeft }
+								label="Align"
+								controls={ [
+									{
+										icon: alignLeft,
+										title: 'Align left',
+										isActive: true,
+									},
+									{
+										icon: alignCenter,
+										title: 'Align center',
+									},
+									{
+										icon: alignRight,
+										title: 'Align right',
+									},
+								] }
+								toggleProps={ toggleProps }
+							/>
+						)
+					}
 				</ToolbarItem>
 			</ToolbarGroup>
 			<ToolbarGroup>
@@ -106,6 +117,7 @@ Default.args = {
 				<ToolbarButton icon={ link } label="Link" />
 				<ToolbarGroup
 					isCollapsed
+					// @ts-expect-error TODO: Remove when ToolbarGroup is typed
 					icon={ false }
 					label="More rich text controls"
 					controls={ [
@@ -119,6 +131,7 @@ Default.args = {
 				/>
 			</ToolbarGroup>
 			<ToolbarGroup
+				// @ts-expect-error TODO: Remove when ToolbarGroup is typed
 				icon={ more }
 				label="Align"
 				isCollapsed

package/src/toolbar/test/{toolbar-group.js → toolbar-group.tsx}

@@ -23,7 +23,7 @@ describe( 'ToolbarGroup', () => {
 		} );
 
 		it( 'should render a list of controls with buttons', () => {
-			const clickHandler = ( event ) => event;
+			const clickHandler = ( event: Event ) => event;
 			const controls = [
 				{
 					icon: 'wordpress',
@@ -41,7 +41,7 @@ describe( 'ToolbarGroup', () => {
 		} );
 
 		it( 'should render a list of controls with buttons and active control', () => {
-			const clickHandler = ( event ) => event;
+			const clickHandler = ( event: Event ) => event;
 			const controls = [
 				{
 					icon: 'wordpress',

package/src/toolbar/toolbar/README.md

@@ -59,11 +59,16 @@ function MyToolbar() {
 
 Toolbar will pass all HTML props to the underlying element. Additionally, you can pass the custom props specified below.
 
-#### label
+#### `className`: `string`
+
+Class to set on the container div.
+
+-   Required: No
+
+#### `label`: `string`
 
 An accessible label for the toolbar.
 
--   Type: `String`
 -   Required: Yes
 
 ## Related components

package/src/toolbar/toolbar/{index.js → index.tsx}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -14,18 +15,17 @@ import deprecated from '@wordpress/deprecated';
  */
 import ToolbarGroup from '../toolbar-group';
 import ToolbarContainer from './toolbar-container';
+import type { ToolbarProps } from './types';
+import type { WordPressComponentProps } from '../../ui/context';
 
-/**
- * Renders a toolbar.
- *
- * To add controls, simply pass `ToolbarButton` components as children.
- *
- * @param {Object} props             Component props.
- * @param {string} [props.className] Class to set on the container div.
- * @param {string} [props.label]     ARIA label for toolbar container.
- * @param {Object} ref               React Element ref.
- */
-function Toolbar( { className, label, ...props }, ref ) {
+function UnforwardedToolbar(
+	{
+		className,
+		label,
+		...props
+	}: WordPressComponentProps< ToolbarProps, 'div', false >,
+	ref: ForwardedRef< any >
+) {
 	if ( ! label ) {
 		deprecated( 'Using Toolbar without label prop', {
 			since: '5.6',
@@ -49,4 +49,25 @@ function Toolbar( { className, label, ...props }, ref ) {
 	);
 }
 
-export default forwardRef( Toolbar );
+/**
+ * Renders a toolbar.
+ *
+ * To add controls, simply pass `ToolbarButton` components as children.
+ *
+ * ```jsx
+ * import { Toolbar, ToolbarButton } from '@wordpress/components';
+ * import { formatBold, formatItalic, link } from '@wordpress/icons';
+ *
+ * function MyToolbar() {
+ *   return (
+ *     <Toolbar label="Options">
+ *       <ToolbarButton icon={ formatBold } label="Bold" />
+ *       <ToolbarButton icon={ formatItalic } label="Italic" />
+ *       <ToolbarButton icon={ link } label="Link" />
+ *     </Toolbar>
+ *   );
+ * }
+ * ```
+ */
+export const Toolbar = forwardRef( UnforwardedToolbar );
+export default Toolbar;

package/src/toolbar/toolbar/{toolbar-container.js → toolbar-container.tsx}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { useToolbarState, Toolbar } from 'reakit/Toolbar';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -13,8 +14,13 @@ import { isRTL } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ToolbarContext from '../toolbar-context';
+import type { ToolbarProps } from './types';
+import type { WordPressComponentProps } from '../../ui/context';
 
-function ToolbarContainer( { label, ...props }, ref ) {
+function UnforwardedToolbarContainer(
+	{ label, ...props }: WordPressComponentProps< ToolbarProps, 'div', false >,
+	ref: ForwardedRef< any >
+) {
 	// https://reakit.io/docs/basic-concepts/#state-hooks
 	// Passing baseId for server side rendering (which includes snapshots)
 	// If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids
@@ -37,4 +43,5 @@ function ToolbarContainer( { label, ...props }, ref ) {
 	);
 }
 
-export default forwardRef( ToolbarContainer );
+export const ToolbarContainer = forwardRef( UnforwardedToolbarContainer );
+export default ToolbarContainer;

package/src/toolbar/toolbar/types.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ToolbarProps = {
+	/**
+	 * Children to be rendered inside the toolbar.
+	 */
+	children?: ReactNode;
+	/**
+	 * An accessible label for the toolbar.
+	 */
+	label: string;
+};

package/src/toolbar/toolbar-button/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */

package/src/toolbar/toolbar-button/toolbar-button-container.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 const ToolbarButtonContainer = ( props ) => (
 	<div className={ props.className }>{ props.children }</div>
 );

package/src/toolbar/toolbar-context/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * WordPress dependencies
  */

package/src/toolbar/toolbar-dropdown-menu/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * WordPress dependencies
  */

package/src/toolbar/toolbar-group/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */

package/src/toolbar/toolbar-group/toolbar-group-collapsed.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * WordPress dependencies
  */

package/src/toolbar/toolbar-group/toolbar-group-container.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 const ToolbarGroupContainer = ( { className, children, ...props } ) => (
 	<div className={ className } { ...props }>
 		{ children }

package/src/toolbar/toolbar-item/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */

package/src/tools-panel/context.ts

@@ -18,6 +18,8 @@ export const ToolsPanelContext = createContext< ToolsPanelContextType >( {
 	registerPanelItem: noop,
 	deregisterPanelItem: noop,
 	flagItemCustomization: noop,
+	registerResetAllFilter: noop,
+	deregisterResetAllFilter: noop,
 	areAllOptionalControlsHidden: true,
 } );