@wordpress/components 23.0.0 → 23.2.0

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

@@ -9,6 +9,11 @@ import {
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import type { SandBoxProps } from './types';
+
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
@@ -44,11 +49,11 @@ const observeAndResizeJS = function () {
 	// Hack: Remove viewport unit styles, as these are relative
 	// the iframe root and interfere with our mechanism for
 	// determining the unconstrained page bounds.
-	function removeViewportStyles( ruleOrNode ) {
+	function removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {
 		if ( ruleOrNode.style ) {
-			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
-				style
-			) {
+			(
+				[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
+			 ).forEach( function ( style ) {
 				if (
 					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
 				) {
@@ -83,6 +88,7 @@ const observeAndResizeJS = function () {
 	window.addEventListener( 'resize', sendResize, true );
 };
 
+// TODO: These styles shouldn't be coupled with WordPress.
 const style = `
 	body {
 		margin: 0;
@@ -106,37 +112,53 @@ const style = `
 	}
 `;
 
-export default function Sandbox( {
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+function SandBox( {
 	html = '',
 	title = '',
 	type,
 	styles = [],
 	scripts = [],
 	onFocus,
-} ) {
-	const ref = useRef();
+}: SandBoxProps ) {
+	const ref = useRef< HTMLIFrameElement >();
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
 	function isFrameAccessible() {
 		try {
-			return !! ref.current.contentDocument.body;
+			return !! ref.current?.contentDocument?.body;
 		} catch ( e ) {
 			return false;
 		}
 	}
 
-	function trySandbox( forceRerender = false ) {
+	function trySandBox( forceRerender = false ) {
 		if ( ! isFrameAccessible() ) {
 			return;
 		}
 
-		const { contentDocument, ownerDocument } = ref.current;
-		const { body } = contentDocument;
+		const { contentDocument, ownerDocument } =
+			ref.current as HTMLIFrameElement & {
+				contentDocument: Document;
+			};
 
 		if (
 			! forceRerender &&
-			null !== body.getAttribute( 'data-resizable-iframe-connected' )
+			null !==
+				contentDocument?.body.getAttribute(
+					'data-resizable-iframe-connected'
+				)
 		) {
 			return;
 		}
@@ -187,13 +209,13 @@ export default function Sandbox( {
 	}
 
 	useEffect( () => {
-		trySandbox();
+		trySandBox();
 
-		function tryNoForceSandbox() {
-			trySandbox( false );
+		function tryNoForceSandBox() {
+			trySandBox( false );
 		}
 
-		function checkMessageForResize( event ) {
+		function checkMessageForResize( event: MessageEvent ) {
 			const iframe = ref.current;
 
 			// Verify that the mounted element is the source of the message.
@@ -221,19 +243,18 @@ export default function Sandbox( {
 		}
 
 		const iframe = ref.current;
-		const { ownerDocument } = iframe;
-		const { defaultView } = ownerDocument;
+		const defaultView = iframe?.ownerDocument?.defaultView;
 
 		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
 		// after reordering the containing block. See these two issues for more details:
 		// https://github.com/WordPress/gutenberg/issues/6146
 		// https://github.com/facebook/react/issues/18752
-		iframe.addEventListener( 'load', tryNoForceSandbox, false );
-		defaultView.addEventListener( 'message', checkMessageForResize );
+		iframe?.addEventListener( 'load', tryNoForceSandBox, false );
+		defaultView?.addEventListener( 'message', checkMessageForResize );
 
 		return () => {
-			iframe?.removeEventListener( 'load', tryNoForceSandbox, false );
-			defaultView.addEventListener( 'message', checkMessageForResize );
+			iframe?.removeEventListener( 'load', tryNoForceSandBox, false );
+			defaultView?.addEventListener( 'message', checkMessageForResize );
 		};
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
@@ -241,14 +262,14 @@ export default function Sandbox( {
 	}, [] );
 
 	useEffect( () => {
-		trySandbox();
+		trySandBox();
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
-		trySandbox( true );
+		trySandBox( true );
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -266,3 +287,5 @@ export default function Sandbox( {
 		/>
 	);
 }
+
+export default SandBox;

package/src/sandbox/stories/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import SandBox from '..';
+
+const meta: ComponentMeta< typeof SandBox > = {
+	component: SandBox,
+	title: 'Components/SandBox',
+	argTypes: {
+		onFocus: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof SandBox > = ( args ) => (
+	<SandBox { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	html: '<p>Arbitrary HTML content</p>',
+};

package/src/sandbox/test/{index.js → index.tsx}

@@ -11,9 +11,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Sandbox from '../';
+import SandBox from '..';
 
-describe( 'Sandbox', () => {
+describe( 'SandBox', () => {
 	const TestWrapper = () => {
 		const [ html, setHtml ] = useState(
 			// MutationObserver implementation from JSDom does not work as intended
@@ -33,7 +33,7 @@ describe( 'Sandbox', () => {
 				<button onClick={ updateHtml } className="mock-button">
 					Mock Button
 				</button>
-				<Sandbox html={ html } title="Sandbox Title" />
+				<SandBox html={ html } title="SandBox Title" />
 			</div>
 		);
 	};
@@ -41,7 +41,12 @@ describe( 'Sandbox', () => {
 	it( 'should rerender with new emdeded content if html prop changes', () => {
 		render( <TestWrapper /> );
 
-		const iframe = screen.getByTitle( 'Sandbox Title' );
+		const iframe =
+			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
+
+		if ( ! iframe.contentWindow ) {
+			throw new Error();
+		}
 
 		let sandboxedIframe = within(
 			iframe.contentWindow.document.body

package/src/sandbox/types.ts

@@ -0,0 +1,34 @@
+export type SandBoxProps = {
+	/**
+	 * The HTML to render in the body of the iframe document.
+	 *
+	 * @default ''
+	 */
+	html?: string;
+	/**
+	 * The `<title>` of the iframe document.
+	 *
+	 * @default ''
+	 */
+	title?: string;
+	/**
+	 * The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
+	 */
+	type?: string;
+	/**
+	 * An array of CSS strings to inject into the `<head>` of the iframe document.
+	 *
+	 * @default []
+	 */
+	styles?: string[];
+	/**
+	 * An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.
+	 *
+	 * @default []
+	 */
+	scripts?: string[];
+	/**
+	 * The `onFocus` callback for the iframe.
+	 */
+	onFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];
+};

package/src/select-control/test/select-control.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import SelectControl from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,

package/src/slot-fill/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { text, number } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -11,19 +6,21 @@ import { createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Slot, Fill, Provider } from '../';
+import { Slot, Fill, Provider as SlotFillProvider } from '../';
 
 export default {
 	title: 'Components/SlotFill',
+	subcomponents: { Fill, SlotFillProvider },
 	component: Slot,
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
 export const _default = () => {
 	return (
-		<Provider>
+		<SlotFillProvider>
 			<h2>Profile</h2>
 			<p>
 				Name: <Slot bubblesVirtually as="span" name="name" />
@@ -33,15 +30,13 @@ export const _default = () => {
 			</p>
 			<Fill name="name">Grace</Fill>
 			<Fill name="age">33</Fill>
-		</Provider>
+		</SlotFillProvider>
 	);
 };
 
 export const withFillProps = () => {
-	const name = text( 'name', 'Grace' );
-	const age = number( 'age', 33 );
 	return (
-		<Provider>
+		<SlotFillProvider>
 			<h2>Profile</h2>
 			<p>
 				Name:{ ' ' }
@@ -49,7 +44,7 @@ export const withFillProps = () => {
 					bubblesVirtually
 					as="span"
 					name="name"
-					fillProps={ { name } }
+					fillProps={ { name: 'Grace' } }
 				/>
 			</p>
 			<p>
@@ -58,12 +53,12 @@ export const withFillProps = () => {
 					bubblesVirtually
 					as="span"
 					name="age"
-					fillProps={ { age } }
+					fillProps={ { age: 33 } }
 				/>
 			</p>
 			<Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
 			<Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
-		</Provider>
+		</SlotFillProvider>
 	);
 };
 
@@ -74,7 +69,7 @@ export const withContext = () => {
 		return <Fill name={ name }>{ value }</Fill>;
 	};
 	return (
-		<Provider>
+		<SlotFillProvider>
 			<h2>Profile</h2>
 			<p>
 				Name: <Slot bubblesVirtually as="span" name="name" />
@@ -88,6 +83,6 @@ export const withContext = () => {
 			<Context.Provider value={ 33 }>
 				<ContextFill name="age" />
 			</Context.Provider>
-		</Provider>
+		</SlotFillProvider>
 	);
 };

package/src/style.scss

@@ -44,7 +44,7 @@
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
-@import "./toolbar/style.scss";
-@import "./toolbar-button/style.scss";
-@import "./toolbar-group/style.scss";
+@import "./toolbar/toolbar/style.scss";
+@import "./toolbar/toolbar-button/style.scss";
+@import "./toolbar/toolbar-group/style.scss";
 @import "./tooltip/style.scss";

package/src/tab-panel/README.md

@@ -121,6 +121,7 @@ An array of objects containing the following properties:
 -   `title`:`(string)` Defines the translated text for the tab.
 -   `className`:`(string)` Optional. Defines the class to put on the tab.
 -   `icon`:`(ReactNode)` Optional. When set, displays the icon in place of the tab title. The title is then rendered as an aria-label and tooltip.
+-   `disabled`:`(boolean)` Optional. Determines if the tab should be disabled or selectable.
 
 > > **Note:** Other fields may be added to the object and accessed from the child function if desired.
 

package/src/tab-panel/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,7 +19,6 @@ import type { WordPressComponentProps } from '../ui/context';
 
 const TabButton = ( {
 	tabId,
-	onClick,
 	children,
 	selected,
 	...rest
@@ -30,7 +28,7 @@ const TabButton = ( {
 		tabIndex={ selected ? null : -1 }
 		aria-selected={ selected }
 		id={ tabId }
-		onClick={ onClick }
+		__experimentalIsFocusable
 		{ ...rest }
 	>
 		{ children }
@@ -102,14 +100,28 @@ export function TabPanel( {
 	) => {
 		child.click();
 	};
-	const selectedTab = find( tabs, { name: selected } );
+	const selectedTab = tabs.find( ( { name } ) => name === selected );
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
-		if ( ! selectedTab?.name && tabs.length > 0 ) {
-			handleTabSelection( initialTabName || tabs[ 0 ].name );
+		const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
+		const initialTab = tabs.find( ( tab ) => tab.name === initialTabName );
+		if ( ! selectedTab?.name && firstEnabledTab ) {
+			handleTabSelection(
+				initialTab && ! initialTab.disabled
+					? initialTab.name
+					: firstEnabledTab.name
+			);
+		} else if ( selectedTab?.disabled && firstEnabledTab ) {
+			handleTabSelection( firstEnabledTab.name );
 		}
-	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
+	}, [
+		tabs,
+		selectedTab?.name,
+		selectedTab?.disabled,
+		initialTabName,
+		handleTabSelection,
+	] );
 
 	return (
 		<div className={ className }>
@@ -135,6 +147,7 @@ export function TabPanel( {
 						selected={ tab.name === selected }
 						key={ tab.name }
 						onClick={ () => handleTabSelection( tab.name ) }
+						disabled={ tab.disabled }
 						label={ tab.icon && tab.title }
 						icon={ tab.icon }
 						showTooltip={ !! tab.icon }

package/src/tab-panel/stories/index.tsx

@@ -35,3 +35,23 @@ Default.args = {
 		},
 	],
 };
+
+export const DisabledTab = Template.bind( {} );
+DisabledTab.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			disabled: true,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+		},
+	],
+};

package/src/tab-panel/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TabPanel from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
@@ -160,6 +162,95 @@ describe( 'TabPanel', () => {
 		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 	} );
 
+	it( 'should disable the tab when `disabled` is true', async () => {
+		const user = setupUser();
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					...TABS,
+					{
+						name: 'delta',
+						title: 'Delta',
+						className: 'delta-class',
+						disabled: true,
+					},
+				] }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( screen.getByRole( 'tab', { name: 'Delta' } ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+
+		// onSelect gets called on the initial render.
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+		// onSelect should not be called since the disabled tab is highlighted, but not selected.
+		await user.keyboard( '[ArrowLeft]' );
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should select the first enabled tab when the inital tab is disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					{
+						name: 'alpha',
+						title: 'Alpha',
+						className: 'alpha-class',
+						disabled: true,
+					},
+					{
+						name: 'beta',
+						title: 'Beta',
+						className: 'beta-class',
+					},
+				] }
+				initialTabName="alpha"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+	} );
+
+	it( 'should select the first enabled tab when the currently selected becomes disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		const { rerender } = render(
+			<TabPanel
+				tabs={ TABS }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
+
+		rerender(
+			<TabPanel
+				tabs={ TABS.map( ( tab ) => {
+					if ( tab.name === 'alpha' ) {
+						return { ...tab, disabled: true };
+					}
+					return tab;
+				} ) }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+	} );
+
 	describe( 'fallbacks when new tab list invalidates current selection', () => {
 		it( 'should select `initialTabName` if defined', async () => {
 			const user = setupUser();

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/text-highlight/test/index.tsx

@@ -11,6 +11,7 @@ import TextHighlight from '..';
 const getMarks = ( container: Element ) =>
 	// Use querySelectorAll because the `mark` role is not officially supported
 	// yet. This should be changed to `getByRole` when it is.
+	// eslint-disable-next-line testing-library/no-node-access
 	Array.from( container.querySelectorAll( 'mark' ) );
 
 const defaultText =

package/src/toggle-group-control/test/index.tsx

@@ -18,6 +18,8 @@ import {
 	ToggleGroupControlOptionIcon,
 } from '../index';
 
+jest.useFakeTimers();
+
 function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }