@wordpress/components 23.1.0 → 23.3.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,12 +9,7 @@ import userEvent from '@testing-library/user-event';
  */
 import SelectControl from '..';
 
-jest.useFakeTimers();
-
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const setupUser = () => userEvent.setup();
 
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {

package/src/slot-fill/bubbles-virtually/fill.js

@@ -15,6 +15,7 @@ function useForceUpdate() {
 	const mounted = useRef( true );
 
 	useEffect( () => {
+		mounted.current = true;
 		return () => {
 			mounted.current = false;
 		};

package/src/slot-fill/slot.js

@@ -34,7 +34,7 @@ class SlotComponent extends Component {
 
 	componentDidMount() {
 		const { registerSlot } = this.props;
-
+		this.isUnmounted = false;
 		registerSlot( this.props.name, this );
 	}
 

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/slot-fill/use-slot.js

@@ -2,7 +2,7 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useState, useEffect } from '@wordpress/element';
+import { useContext, useSyncExternalStore } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,21 +17,11 @@ import SlotFillContext from './context';
  */
 const useSlot = ( name ) => {
 	const { getSlot, subscribe } = useContext( SlotFillContext );
-	const [ slot, setSlot ] = useState( getSlot( name ) );
-
-	useEffect( () => {
-		setSlot( getSlot( name ) );
-		const unsubscribe = subscribe( () => {
-			setSlot( getSlot( name ) );
-		} );
-
-		return unsubscribe;
-		// Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,
-		// so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ name ] );
-
-	return slot;
+	return useSyncExternalStore(
+		subscribe,
+		() => getSlot( name ),
+		() => getSlot( name )
+	);
 };
 
 export default useSlot;

package/src/snackbar/index.tsx

@@ -16,7 +16,8 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import Button from '../button';
-import type { NoticeAction, SnackbarProps } from './types';
+import type { SnackbarProps } from './types';
+import type { NoticeAction } from '../notice/types';
 import type { WordPressComponentProps } from '../ui/context';
 
 const NOTICE_TIMEOUT = 10000;
@@ -73,7 +74,7 @@ function UnforwardedSnackbar(
 	}
 
 	function onActionClick(
-		event: MouseEvent,
+		event: MouseEvent< HTMLButtonElement >,
 		onClick: NoticeAction[ 'onClick' ]
 	) {
 		event.stopPropagation();
@@ -139,9 +140,9 @@ function UnforwardedSnackbar(
 							key={ index }
 							href={ url }
 							variant="tertiary"
-							onClick={ ( event: MouseEvent ) =>
-								onActionClick( event, onClick )
-							}
+							onClick={ (
+								event: MouseEvent< HTMLButtonElement >
+							) => onActionClick( event, onClick ) }
 							className="components-snackbar__action"
 						>
 							{ label }

package/src/snackbar/list.tsx

@@ -17,7 +17,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
-import type { Notice, SnackbarListProps } from './types';
+import type { SnackbarListProps } from './types';
 import type { WordPressComponentProps } from '../ui/context';
 
 const SNACKBAR_VARIANTS = {
@@ -61,7 +61,9 @@ export function SnackbarList( {
 	const listRef = useRef< HTMLDivElement | null >( null );
 	const isReducedMotion = useReducedMotion();
 	className = classnames( 'components-snackbar-list', className );
-	const removeNotice = ( notice: Notice ) => () => onRemove?.( notice.id );
+	const removeNotice =
+		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
+			onRemove?.( notice.id );
 	return (
 		<div className={ className } tabIndex={ -1 } ref={ listRef }>
 			{ children }

package/src/snackbar/types.ts

@@ -1,116 +1,42 @@
 /**
  * External dependencies
  */
-import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
+import type { MutableRefObject, ReactNode } from 'react';
 
-export type NoticeActionWithURL = {
-	label: string;
-	url: string;
-	onClick?: ( event: SyntheticEvent ) => void;
-};
-
-type NoticeActionWithOnClick = {
-	label: string;
-	url?: string;
-	onClick: ( event: SyntheticEvent ) => void;
-};
-
-// TODO: move this type to the Notice component once it gets typed.
-export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
-
-export type Notice = {
-	id: string;
-	spokenMessage: string;
-	actions: NoticeAction[];
-	icon?: ReactNode;
-	onDismiss?: () => void;
-	content: string;
-	isDismissible: boolean;
-	explicitDismiss: boolean;
-};
+/**
+ * Internal dependencies
+ */
+import type { NoticeProps, NoticeChildren } from '../notice/types';
 
-export type SnackbarProps = {
-	/**
-	 * The displayed message of a notice.
-	 *
-	 * Also used as the spoken message for assistive technology,
-	 * unless `spokenMessage` is provided as an alternative message.
-	 */
-	children: string;
-	/**
-	 * Used to provide a custom spoken message.
-	 *
-	 * @default children
-	 */
-	spokenMessage?: Notice[ 'spokenMessage' ];
-	/**
-	 * A politeness level for the notice's spoken message. Should be provided as
-	 * one of the valid options for an `aria-live` attribute value. Note that this
-	 * value should be considered a suggestion; assistive technologies may
-	 * override it based on internal heuristics.
-	 *
-	 * A value of `'assertive'` is to be used for important, and usually
-	 * time-sensitive, information. It will interrupt anything else the screen
-	 * reader is announcing in that moment.
-	 * A value of `'polite'` is to be used for advisory information. It should
-	 * not interrupt what the screen reader is announcing in that moment
-	 * (the "speech queue") or interrupt the current task.
-	 *
-	 * @see https://www.w3.org/TR/wai-aria-1.1/#aria-live
-	 *
-	 * @default 'polite'
-	 */
-	politeness?: 'polite' | 'assertive';
-	/**
-	 * An array of action objects.
-	 *
-	 * Each member object should contain
-	 * a `label` and either a `url` link string or `onClick` callback function.
-	 *
-	 * @default []
-	 */
-	actions?: Notice[ 'actions' ];
-	/**
-	 * Called to remove the snackbar from the UI.
-	 */
-	onRemove?: () => void;
+type SnackbarOnlyProps = {
 	/**
 	 * The icon to render in the snackbar.
 	 *
 	 * @default null
 	 */
-	icon?: Notice[ 'icon' ];
+	icon?: ReactNode;
 	/**
 	 * Whether to require user action to dismiss the snackbar.
 	 * By default, this is dismissed on a timeout, without user interaction.
 	 *
 	 * @default false
 	 */
-	explicitDismiss?: Notice[ 'explicitDismiss' ];
-	/**
-	 * A callback executed when the snackbar is dismissed.
-	 *
-	 * It is distinct from onRemove, which _looks_ like a callback but is
-	 * actually the function to call to remove the snackbar from the UI.
-	 */
-	onDismiss?: Notice[ 'onDismiss' ];
+	explicitDismiss?: boolean;
 	/**
 	 * A ref to the list that contains the snackbar.
 	 */
 	listRef?: MutableRefObject< HTMLDivElement | null >;
 };
 
+export type SnackbarProps = NoticeProps & SnackbarOnlyProps;
+
 export type SnackbarListProps = {
-	/**
-	 * Array of notices to render.
-	 */
-	notices: Notice[];
-	/**
-	 * Children to be rendered inside the notice list.
-	 */
-	children?: ReactNode;
-	/**
-	 * Function called when a notice should be removed / dismissed.
-	 */
-	onRemove?: ( id: Notice[ 'id' ] ) => void;
+	notices: Array<
+		Omit< SnackbarProps, 'children' > & {
+			id: string;
+			content: string;
+		}
+	>;
+	onRemove: ( id: string ) => void;
+	children?: NoticeChildren | Array< NoticeChildren >;
 };

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.