@wordpress/components 23.4.0 → 23.6.0

package/src/tab-panel/types.ts

@@ -8,7 +8,7 @@ import type { MouseEvent, ReactNode } from 'react';
  */
 import type { IconType } from '../icon';
 
-type Tab< IconProps = unknown > = {
+type Tab = {
 	/**
 	 * The key of the tab.
 	 */
@@ -24,21 +24,21 @@ type Tab< IconProps = unknown > = {
 	/**
 	 * The icon used for the tab button.
 	 */
-	icon?: IconType< IconProps >;
+	icon?: IconType;
 	/**
 	 * Determines if the tab button should be disabled.
 	 */
 	disabled?: boolean;
 } & Record< any, any >;
 
-export type TabButtonProps< IconProps = unknown > = {
+export type TabButtonProps = {
 	children: ReactNode;
 	label?: string;
 	onClick: ( event: MouseEvent ) => void;
 	selected: boolean;
 	showTooltip?: boolean;
 	tabId: string;
-} & Pick< Tab< IconProps >, 'className' | 'icon' | 'disabled' >;
+} & Pick< Tab, 'className' | 'icon' | 'disabled' >;
 
 export type TabPanelProps = {
 	/**

package/src/toolbar/toolbar-button/README.md

@@ -51,7 +51,19 @@ function Edit() {
 
 ## Props
 
-This component accepts [the same API of the Button](/packages/components/src/button/README.md#props) component.
+This component accepts [the same API of the Button](/packages/components/src/button/README.md#props) component in addition to:
+
+#### `containerClassName`: `string`
+
+An optional additional class name to apply to the button container.
+
+-   Required: No
+
+#### `subscript`: `string`
+
+An optional subscript for the button.
+
+-   Required: No
 
 ## Related components
 

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

@@ -1,13 +1,14 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
 /**
  * WordPress dependencies
  */
 import { useContext, forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -15,19 +16,22 @@ import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';
+import type { ToolbarButtonProps } from './types';
+import type { WordPressComponentProps } from '../../ui/context';
+import type React from 'react';
 
-function ToolbarButton(
+function UnforwardedToolbarButton(
 	{
-		containerClassName,
+		children,
 		className,
+		containerClassName,
 		extraProps,
-		children,
-		title,
 		isActive,
 		isDisabled,
+		title,
 		...props
-	},
-	ref
+	}: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+	ref: ForwardedRef< any >
 ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 
@@ -40,8 +44,14 @@ function ToolbarButton(
 					label={ title }
 					shortcut={ props.shortcut }
 					data-subscript={ props.subscript }
-					onClick={ ( event ) => {
+					onClick={ (
+						event: React.MouseEvent<
+							HTMLButtonElement & HTMLAnchorElement,
+							MouseEvent
+						>
+					) => {
 						event.stopPropagation();
+						// TODO: Possible bug; maybe use onClick instead of props.onClick.
 						if ( props.onClick ) {
 							props.onClick( event );
 						}
@@ -72,18 +82,43 @@ function ToolbarButton(
 			{ ...props }
 			ref={ ref }
 		>
-			{ ( toolbarItemProps ) => (
-				<Button
-					label={ title }
-					isPressed={ isActive }
-					disabled={ isDisabled }
-					{ ...toolbarItemProps }
-				>
-					{ children }
-				</Button>
-			) }
+			{
+				// @ts-expect-error
+				( toolbarItemProps ) => (
+					<Button
+						label={ title }
+						isPressed={ isActive }
+						disabled={ isDisabled }
+						{ ...toolbarItemProps }
+					>
+						{ children }
+					</Button>
+				)
+			}
 		</ToolbarItem>
 	);
 }
 
-export default forwardRef( ToolbarButton );
+/**
+ * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar
+ * or ToolbarGroup when used to create general interfaces.
+ *
+ * ```jsx
+ * import { Toolbar, ToolbarButton } from '@wordpress/components';
+ * import { edit } from '@wordpress/icons';
+ *
+ * function MyToolbar() {
+ *   return (
+ *		<Toolbar label="Options">
+ *			<ToolbarButton
+ *				icon={ edit }
+ *				label="Edit"
+ *				onClick={ () => alert( 'Editing' ) }
+ *			/>
+ *		</Toolbar>
+ *   );
+ * }
+ * ```
+ */
+export const ToolbarButton = forwardRef( UnforwardedToolbarButton );
+export default ToolbarButton;

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

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import type { ToolbarButtonContainerProps } from './types';
+
+const ToolbarButtonContainer = ( {
+	children,
+	className,
+}: ToolbarButtonContainerProps ) => (
+	<div className={ className }>{ children }</div>
+);
+
+export default ToolbarButtonContainer;

package/src/toolbar/toolbar-button/types.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ToolbarButtonProps = {
+	/**
+	 * Children to be rendered inside the button.
+	 */
+	children?: ReactNode;
+	/**
+	 * An optional class name for the button container.
+	 */
+	containerClassName?: string;
+	/**
+	 * Additional props to be passed alongside props.
+	 */
+	extraProps?: any;
+	/**
+	 * Indicates if the button is active.
+	 */
+	isActive?: boolean;
+	/**
+	 * Indicates if the button is disabled.
+	 */
+	isDisabled?: boolean;
+	/**
+	 * An optional subscript for the button.
+	 */
+	subscript?: string;
+	/**
+	 * An optional title/label for the button.
+	 */
+	title?: string;
+};
+
+export type ToolbarButtonContainerProps = {
+	/**
+	 * Children to be rendered inside the button container.
+	 */
+	children?: ReactNode;
+	/**
+	 * An optional class name for the button container.
+	 */
+	className?: string;
+};

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

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { ToolbarStateReturn } from 'reakit/Toolbar';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const ToolbarContext = createContext< ToolbarStateReturn | undefined >(
+	undefined
+);
+
+export default ToolbarContext;

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,
 } );