@wordpress/components 23.0.0 → 23.2.0

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', () => {
@@ -81,9 +81,11 @@ describe( 'ToolbarGroup', () => {
 			const buttons = screen.getAllByRole( 'button' );
 
 			expect( buttons ).toHaveLength( 2 );
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( buttons[ 0 ].parentElement ).not.toHaveClass(
 				'has-left-divider'
 			);
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( buttons[ 1 ].parentElement ).toHaveClass(
 				'has-left-divider'
 			);

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/{style.scss → toolbar/style.scss}

@@ -21,7 +21,7 @@
 		padding-right: $grid-unit-20;
 
 		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
+		&:focus:not(:disabled) {
 			box-shadow: none;
 			outline: none;
 		}

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/tooltip/stories/index.js

@@ -1,14 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { text, select, number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -17,79 +6,80 @@ import Tooltip from '../';
 export default {
 	title: 'Components/ToolTip',
 	component: Tooltip,
+	argTypes: {
+		delay: { control: 'number' },
+		position: {
+			control: {
+				type: 'select',
+				options: [
+					'top left',
+					'top center',
+					'top right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				],
+			},
+		},
+		text: { control: 'text' },
+	},
 	parameters: {
-		knobs: { disable: false },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const positionOptions = {
-		'top left': 'top left',
-		'top center ': 'top center',
-		'top right': 'top right',
-		'bottom left': 'bottom left',
-		'bottom center ': 'bottom center',
-		'bottom right': 'bottom right',
-	};
-	const tooltipText = text( 'Text', 'More information' );
-	const position = select( 'Position', positionOptions, 'top center' );
-	const delay = number( 'Delay', 700 );
-	return (
-		<>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: '200px',
-						padding: '20px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Hover for more information
-				</div>
-			</Tooltip>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: 'min-content',
-						padding: '4px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Small target
-				</div>
-			</Tooltip>
-		</>
-	);
+const Template = ( args ) => {
+	return <Tooltip { ...args } />;
 };
 
-const Button = styled.button`
-	margin: 0 10px;
-`;
+export const Default = Template.bind( {} );
+Default.args = {
+	text: 'More information',
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: '200px',
+				padding: '20px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Hover for more information
+		</div>
+	),
+};
 
-export const DisabledElement = () => {
-	const [ showMessage, toggleMessage ] = useState( false );
+export const SmallTarget = Template.bind( {} );
+SmallTarget.args = {
+	...Default.args,
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: 'min-content',
+				padding: '4px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Small target
+		</div>
+	),
+};
 
-	return (
-		<>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button onClick={ () => toggleMessage( ! showMessage ) }>
-					Hover me!
-				</Button>
-			</Tooltip>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button
-					disabled
-					onClick={ () => toggleMessage( ! showMessage ) }
-				>
-					Hover me, but I am disabled
-				</Button>
-			</Tooltip>
-			<br />
-			{ showMessage ? <p>Hello World!</p> : null }
-		</>
-	);
+export const DisabledChild = Template.bind( {} );
+DisabledChild.args = {
+	...Default.args,
+	children: (
+		<button
+			disabled
+			onClick={ () =>
+				// eslint-disable-next-line no-alert
+				window.alert( 'This alert should not be triggered' )
+			}
+		>
+			Hover me, but I am disabled
+		</button>
+	),
 };

package/src/tooltip/test/index.js

@@ -13,6 +13,8 @@ import Tooltip from '../';
  */
 import { TOOLTIP_DELAY } from '../index.js';
 
+jest.useFakeTimers();
+
 function getWrappingPopoverElement( element ) {
 	return element.closest( '.components-popover' );
 }

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/src/unit-control/test/index.tsx

@@ -16,6 +16,8 @@ import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 import type { UnitControlOnChangeCallback } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = ( {
 	isInputTypeText = false,
 }: {
@@ -112,6 +114,7 @@ describe( 'UnitControl', () => {
 			);
 
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access
 				withoutClassName.querySelector( '.components-unit-control' )
 			).not.toHaveClass( 'hello' );
 			expect(

package/src/utils/hooks/test/use-latest-ref.js

@@ -13,6 +13,8 @@ import { useState } from '@wordpress/element';
  */
 import { useLatestRef } from '..';
 
+jest.useFakeTimers();
+
 function debounce( callback, timeout = 0 ) {
 	let timeoutId = 0;
 	return ( ...args ) => {

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"
 	]
 }