@wordpress/components 23.1.0 → 23.2.0

package/src/tab-panel/types.ts

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

package/src/toolbar/index.js

@@ -1,52 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import ToolbarGroup from '../toolbar-group';
-import ToolbarContainer from './toolbar-container';
-
-/**
- * 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 ) {
-	if ( ! label ) {
-		deprecated( 'Using Toolbar without label prop', {
-			since: '5.6',
-			alternative: 'ToolbarGroup component',
-			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
-		} );
-		return <ToolbarGroup { ...props } className={ className } />;
-	}
-	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
-	const finalClassName = classnames(
-		'components-accessible-toolbar',
-		className
-	);
-	return (
-		<ToolbarContainer
-			className={ finalClassName }
-			label={ label }
-			ref={ ref }
-			{ ...props }
-		/>
-	);
-}
-
-export default forwardRef( Toolbar );
+export { default as Toolbar } from './toolbar';
+export { default as ToolbarButton } from './toolbar-button';
+export { default as ToolbarContext } from './toolbar-context';
+export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
+export { default as ToolbarGroup } from './toolbar-group';
+export { default as ToolbarItem } from './toolbar-item';

package/src/toolbar/stories/index.js

@@ -17,15 +17,8 @@ import {
 /**
  * Internal dependencies
  */
-import Toolbar from '../';
-import {
-	SVG,
-	Path,
-	ToolbarButton,
-	ToolbarGroup,
-	ToolbarItem,
-	DropdownMenu,
-} from '../../';
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarItem } from '..';
+import { SVG, Path, DropdownMenu } from '../../..';
 
 export default { title: 'Components/Toolbar', component: Toolbar };
 

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

@@ -11,8 +11,7 @@ import { wordpress } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { Toolbar } from '../../';
-import ToolbarButton from '../';
+import { Toolbar, ToolbarButton } from '..';
 
 export default {
 	title: 'Components/ToolbarButton',

package/src/{toolbar-group/stories/index.js → toolbar/stories/toolbar-group.js}

@@ -6,7 +6,7 @@ import { formatBold, formatItalic, link } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { ToolbarButton, ToolbarGroup } from '../../';
+import { ToolbarButton, ToolbarGroup } from '..';
 
 export default { title: 'Components/ToolbarGroup', component: ToolbarGroup };
 

package/src/toolbar/test/index.js

@@ -6,8 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Toolbar from '../';
-import ToolbarButton from '../../toolbar-button';
+import { Toolbar, ToolbarButton } from '..';
 
 describe( 'Toolbar', () => {
 	describe( 'basic rendering', () => {

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

@@ -6,7 +6,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ToolbarGroup from '../';
+import { ToolbarGroup } from '..';
 
 describe( 'ToolbarGroup', () => {
 	describe( 'basic rendering', () => {

package/src/toolbar/toolbar/index.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarGroup from '../toolbar-group';
+import ToolbarContainer from './toolbar-container';
+
+/**
+ * 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 ) {
+	if ( ! label ) {
+		deprecated( 'Using Toolbar without label prop', {
+			since: '5.6',
+			alternative: 'ToolbarGroup component',
+			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
+		} );
+		return <ToolbarGroup { ...props } className={ className } />;
+	}
+	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
+	const finalClassName = classnames(
+		'components-accessible-toolbar',
+		className
+	);
+	return (
+		<ToolbarContainer
+			className={ finalClassName }
+			label={ label }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+}
+
+export default forwardRef( Toolbar );

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

@@ -9,7 +9,7 @@ import { useContext, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
+import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';

package/src/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js

@@ -8,7 +8,7 @@ import { forwardRef, useContext } from '@wordpress/element';
  */
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 
 function ToolbarDropdownMenu( props, ref ) {
 	const accessibleToolbarState = useContext( ToolbarContext );

package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js

@@ -6,7 +6,7 @@ import { useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 import ToolbarContext from '../toolbar-context';
 import ToolbarItem from '../toolbar-item';
 

package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js

@@ -9,7 +9,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 import styles from './style.scss';
 
 function ToolbarGroupCollapsed( {

package/src/tree-grid/index.js

@@ -150,12 +150,10 @@ function TreeGrid(
 							event.preventDefault();
 							return;
 						}
-						// If a row is focused, and it is expanded, focuses the rightmost cell in the row.
+						// If a row is focused, and it is expanded, focuses the next cell in the row.
 						const focusableItems = getRowFocusables( activeRow );
 						if ( focusableItems.length > 0 ) {
-							focusableItems[
-								focusableItems.length - 1
-							]?.focus();
+							focusableItems[ nextIndex ]?.focus();
 						}
 					}
 					// Prevent key use for anything else. For example, Voiceover

package/tsconfig.json

@@ -62,14 +62,7 @@
 		"src/palette-edit",
 		"src/panel",
 		"src/query-controls",
-		"src/responsive-wrapper",
-		"src/sandbox",
 		"src/toolbar",
-		"src/toolbar-button",
-		"src/toolbar-context",
-		"src/toolbar-dropdown-menu",
-		"src/toolbar-group",
-		"src/toolbar-item",
 		"src/tree-grid"
 	]
 }