@wordpress/components 22.0.0 → 23.0.0

package/src/range-control/test/index.tsx

@@ -1,24 +1,19 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import RangeControl from '../';
 
-const getRangeInput = (): HTMLInputElement | null =>
-	screen.getByRole( 'slider' ) as HTMLInputElement;
-const getNumberInput = (): HTMLInputElement | null =>
-	screen.getByRole( 'spinbutton' ) as HTMLInputElement;
-const getResetButton = (): HTMLButtonElement | null =>
-	screen.getByRole( 'button' ) as HTMLButtonElement;
+const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
+const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
+const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
 
-const fireChangeEvent = (
-	input: HTMLInputElement | null,
-	value?: number | string
-) => fireEvent.change( input as Element, { target: { value } } );
+const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
+	fireEvent.change( input, { target: { value } } );
 
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
@@ -30,10 +25,10 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			rangeInput?.focus();
+			act( () => rangeInput.focus() );
 			fireChangeEvent( rangeInput, '5' );
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '10' );
 
 			expect( onChange ).toHaveBeenCalledWith( 5 );
@@ -48,9 +43,11 @@ describe( 'RangeControl', () => {
 				/>
 			);
 
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const beforeIcon = container.querySelector(
 				'.dashicons-format-image'
 			);
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const afterIcon = container.querySelector(
 				'.dashicons-format-video'
 			);
@@ -68,9 +65,9 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '10' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).not.toBe( '10' );
+			expect( rangeInput.value ).not.toBe( '10' );
 		} );
 
 		it( 'should not apply if new value is greater than maximum', () => {
@@ -80,9 +77,9 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '21' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).not.toBe( '21' );
+			expect( rangeInput.value ).not.toBe( '21' );
 		} );
 
 		it( 'should not call onChange if new value is invalid', () => {
@@ -93,7 +90,7 @@ describe( 'RangeControl', () => {
 
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '25e' );
 
 			expect( onChange ).not.toHaveBeenCalled();
@@ -108,15 +105,15 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '-1.1' );
 
-			expect( numberInput?.value ).toBe( '-1.1' );
-			expect( rangeInput?.value ).toBe( '-1' );
+			expect( numberInput.value ).toBe( '-1.1' );
+			expect( rangeInput.value ).toBe( '-1' );
 
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 			expect( onChange ).toHaveBeenCalledWith( -1 );
-			expect( numberInput?.value ).toBe( '-1' );
+			expect( numberInput.value ).toBe( '-1' );
 		} );
 
 		it( 'should validate when provided a max or min of zero', () => {
@@ -125,11 +122,11 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '1' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).toBe( '0' );
+			expect( rangeInput.value ).toBe( '0' );
 		} );
 
 		it( 'should validate when min and max are negative', () => {
@@ -138,16 +135,16 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 
 			fireChangeEvent( numberInput, '-101' );
-			expect( rangeInput?.value ).toBe( '-100' );
+			expect( rangeInput.value ).toBe( '-100' );
 
 			fireChangeEvent( numberInput, '-49' );
-			expect( rangeInput?.value ).toBe( '-50' );
+			expect( rangeInput.value ).toBe( '-50' );
 
 			fireChangeEvent( numberInput, '-50' );
-			expect( rangeInput?.value ).toBe( '-50' );
+			expect( rangeInput.value ).toBe( '-50' );
 		} );
 
 		it( 'should take into account the step starting from min', () => {
@@ -163,16 +160,16 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '0.125' );
 
 			expect( onChange ).toHaveBeenCalledWith( 0.125 );
-			expect( rangeInput?.value ).toBe( '0.125' );
+			expect( rangeInput.value ).toBe( '0.125' );
 
 			fireChangeEvent( numberInput, '0.225' );
 
 			expect( onChange ).toHaveBeenCalledWith( 0.225 );
-			expect( rangeInput?.value ).toBe( '0.225' );
+			expect( rangeInput.value ).toBe( '0.225' );
 		} );
 	} );
 
@@ -182,7 +179,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '5' );
+			expect( rangeInput.value ).toBe( '5' );
 		} );
 
 		it( 'should render initialPosition if no value is provided', () => {
@@ -190,7 +187,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 		} );
 
 		it( 'should render value instead of initialPosition is provided', () => {
@@ -198,7 +195,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '10' );
+			expect( rangeInput.value ).toBe( '10' );
 		} );
 
 		it( 'should clamp initialPosition between min and max on first render, and on reset', () => {
@@ -216,19 +213,19 @@ describe( 'RangeControl', () => {
 			const resetButton = getResetButton();
 
 			// Value should be clamped on initial load
-			expect( numberInput?.value ).toBe( '100' );
-			expect( rangeInput?.value ).toBe( '100' );
+			expect( numberInput.value ).toBe( '100' );
+			expect( rangeInput.value ).toBe( '100' );
 
 			fireChangeEvent( numberInput, '50' );
 
-			expect( numberInput?.value ).toBe( '50' );
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 
 			// Value should be clamped after resetting
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
 
-			expect( numberInput?.value ).toBe( '100' );
-			expect( rangeInput?.value ).toBe( '100' );
+			expect( numberInput.value ).toBe( '100' );
+			expect( rangeInput.value ).toBe( '100' );
 		} );
 	} );
 
@@ -255,8 +252,8 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			expect( rangeInput?.value ).toBe( '0' );
-			expect( numberInput?.value ).toBe( '0' );
+			expect( rangeInput.value ).toBe( '0' );
+			expect( numberInput.value ).toBe( '0' );
 		} );
 
 		it( 'should update both field and range on change', () => {
@@ -265,17 +262,17 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			rangeInput?.focus();
+			act( () => rangeInput.focus() );
 			fireChangeEvent( rangeInput, 13 );
 
-			expect( rangeInput?.value ).toBe( '13' );
-			expect( numberInput?.value ).toBe( '13' );
+			expect( rangeInput.value ).toBe( '13' );
+			expect( numberInput.value ).toBe( '13' );
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, 7 );
 
-			expect( rangeInput?.value ).toBe( '7' );
-			expect( numberInput?.value ).toBe( '7' );
+			expect( rangeInput.value ).toBe( '7' );
+			expect( numberInput.value ).toBe( '7' );
 		} );
 
 		it( 'should reset input values if next value is removed', () => {
@@ -285,12 +282,12 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
 			// Reset to 50. Median value of min: 0, max: 100.
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 			// Input field should be blank.
-			expect( numberInput?.value ).toBe( '' );
+			expect( numberInput.value ).toBe( '' );
 		} );
 	} );
 
@@ -310,10 +307,10 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
 
-			expect( rangeInput?.value ).toBe( '33' );
-			expect( numberInput?.value ).toBe( '33' );
+			expect( rangeInput.value ).toBe( '33' );
+			expect( numberInput.value ).toBe( '33' );
 			expect( spy ).toHaveBeenCalledWith( 33 );
 		} );
 
@@ -332,10 +329,10 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
 
-			expect( rangeInput?.value ).toBe( '50' );
-			expect( numberInput?.value ).toBe( '' );
+			expect( rangeInput.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '' );
 		} );
 	} );
 } );

package/src/resizable-box/style.scss

@@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }
@@ -47,13 +47,14 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	content: "";
 	width: 3px;
 	height: 3px;
-	background: var(--wp-admin-theme-color);
+	background: $components-color-accent;
 	cursor: inherit;
 	position: absolute;
 	top: calc(50% - 1px);
 	right: calc(50% - 1px);
 	transition: transform 0.1s ease-in;
 	@include reduce-motion("transition");
+	will-change: transform;
 	opacity: 0;
 }
 

package/src/sandbox/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -16,15 +16,15 @@ import Sandbox from '../';
 describe( 'Sandbox', () => {
 	const TestWrapper = () => {
 		const [ html, setHtml ] = useState(
-			// MuatationObserver implementation from JSDom does not work as intended
+			// MutationObserver implementation from JSDom does not work as intended
 			// with iframes so we need to ignore it for the time being.
 			'<script type="text/javascript">window.MutationObserver = null;</script>' +
-				'<iframe class="mock-iframe" src="https://super.embed"></iframe>'
+				'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
 		);
 
 		const updateHtml = () => {
 			setHtml(
-				'<iframe class="mock-iframe" src="https://another.super.embed"></iframe>'
+				'<iframe title="Mock Iframe" src="https://another.super.embed"></iframe>'
 			);
 		};
 
@@ -33,18 +33,19 @@ describe( 'Sandbox', () => {
 				<button onClick={ updateHtml } className="mock-button">
 					Mock Button
 				</button>
-				<Sandbox html={ html } />
+				<Sandbox html={ html } title="Sandbox Title" />
 			</div>
 		);
 	};
 
 	it( 'should rerender with new emdeded content if html prop changes', () => {
-		const { container } = render( <TestWrapper /> );
+		render( <TestWrapper /> );
 
-		const iframe = container.querySelector( '.components-sandbox' );
+		const iframe = screen.getByTitle( 'Sandbox Title' );
 
-		let sandboxedIframe =
-			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
+		let sandboxedIframe = within(
+			iframe.contentWindow.document.body
+		).getByTitle( 'Mock Iframe' );
 
 		expect( sandboxedIframe ).toHaveAttribute(
 			'src',
@@ -53,8 +54,9 @@ describe( 'Sandbox', () => {
 
 		fireEvent.click( screen.getByRole( 'button' ) );
 
-		sandboxedIframe =
-			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
+		sandboxedIframe = within(
+			iframe.contentWindow.document.body
+		).getByTitle( 'Mock Iframe' );
 
 		expect( sandboxedIframe ).toHaveAttribute(
 			'src',

package/src/scrollable/test/index.tsx

@@ -9,24 +9,28 @@ import { render, screen } from '@testing-library/react';
 import { Scrollable } from '../index';
 
 describe( 'props', () => {
-	beforeEach( () => {
+	test( 'should render correctly', () => {
 		render(
 			<Scrollable data-testid="scrollable">
 				WordPress.org - Code is Poetry
 			</Scrollable>
 		);
-	} );
 
-	test( 'should render correctly', () => {
 		expect( screen.getByTestId( 'scrollable' ) ).toMatchSnapshot();
 	} );
 
 	test( 'should render smoothScroll', () => {
+		render(
+			<Scrollable data-testid="scrollable">
+				WordPress.org - Code is Poetry
+			</Scrollable>
+		);
 		render(
 			<Scrollable smoothScroll data-testid="smooth-scrollable">
 				WordPress.org - Code is Poetry
 			</Scrollable>
 		);
+
 		expect(
 			screen.getByTestId( 'smooth-scrollable' )
 		).toMatchStyleDiffSnapshot( screen.getByTestId( 'scrollable' ) );

package/src/search-control/style.scss

@@ -10,6 +10,10 @@
 		width: 100%;
 		height: $grid-unit-60;
 
+		// Unset inherited values.
+		margin-left: 0;
+		margin-right: 0;
+
 		/* Fonts smaller than 16px causes mobile safari to zoom. */
 		font-size: $mobile-text-min-font-size;
 		@include break-small {
@@ -18,7 +22,7 @@
 
 		&:focus {
 			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&::placeholder {

package/src/snackbar/README.md

@@ -36,17 +36,72 @@ const MySnackbarNotice = () => (
 );
 ```
 
-#### Props
+### Props
 
 The following props are used to control the display of the component.
 
--   `children`: (string) The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
--   `spokenMessage`: (string) Used to provide a custom spoken message in place of the `children` default.
--   `politeness`: (string) A politeness level for the notice's spoken message. Should be provided as one of the valid options for [an `aria-live` attribute value](https://www.w3.org/TR/wai-aria-1.1/#aria-live). Defaults to `"polite"`. 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.
--   `onRemove`: function called when dismissing the notice.
--   `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function.
+#### `actions`: `NoticeAction[]`
+
+An array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function.
+
+-   Required: No
+-   Default: `[]`
+
+#### `children`: `string`
+
+The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
+
+-   Required: Yes
+
+#### `explicitDismiss`: `boolean`
+
+Whether to require user action to dismiss the snackbar. By default, this is dismissed on a timeout, without user interaction.
+
+-   Required: No
+-   Default: `false`
+
+#### `icon`: `ReactNode`
+
+The icon to render in the snackbar.
+
+-   Required: No
+-   Default: `null`
+
+#### `listRef`: `MutableRefObject< HTMLDivElement | null >`
+
+A ref to the list that contains the snackbar.
+
+-   Required: No
+
+#### `onDismiss`: `() => void`
+
+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.
+
+-   Required: No
+
+#### `onRemove`: `() => void`
+
+Function called when dismissing the notice.
+
+-   Required: No
+
+#### `politeness`: `'polite' | 'assertive'`
+
+A politeness level for the notice's spoken message. Should be provided as one of the valid options for [an `aria-live` attribute value](https://www.w3.org/TR/wai-aria-1.1/#aria-live). 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.
+
+-   Required: No
+-   Default: `'polite'`
+
+#### `spokenMessage`: `string`
+
+Used to provide a custom spoken message.
+
+-   Required: No
+-   Default: `children`
 
 ## Related components
 

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -14,21 +15,23 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import { Button } from '../';
+import Button from '../button';
+import type { NoticeAction, SnackbarProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-const noop = () => {};
 const NOTICE_TIMEOUT = 10000;
 
-/** @typedef {import('@wordpress/element').WPElement} WPElement */
-
 /**
  * Custom hook which announces the message with the given politeness, if a
  * valid message is provided.
  *
- * @param {string|WPElement}     [message]  Message to announce.
- * @param {'polite'|'assertive'} politeness Politeness to announce.
+ * @param  message    Message to announce.
+ * @param  politeness Politeness to announce.
  */
-function useSpokenMessage( message, politeness ) {
+function useSpokenMessage(
+	message: SnackbarProps[ 'spokenMessage' ],
+	politeness: NonNullable< SnackbarProps[ 'politeness' ] >
+) {
 	const spokenMessage =
 		typeof message === 'string' ? message : renderToString( message );
 
@@ -39,42 +42,43 @@ function useSpokenMessage( message, politeness ) {
 	}, [ spokenMessage, politeness ] );
 }
 
-function Snackbar(
+function UnforwardedSnackbar(
 	{
 		className,
 		children,
 		spokenMessage = children,
 		politeness = 'polite',
 		actions = [],
-		onRemove = noop,
+		onRemove,
 		icon = null,
 		explicitDismiss = false,
 		// onDismiss is 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 = noop,
+		onDismiss,
 		listRef,
-	},
-	ref
+	}: WordPressComponentProps< SnackbarProps, 'div' >,
+	ref: ForwardedRef< any >
 ) {
-	onDismiss = onDismiss || noop;
-
-	function dismissMe( event ) {
+	function dismissMe( event: KeyboardEvent | MouseEvent ) {
 		if ( event && event.preventDefault ) {
 			event.preventDefault();
 		}
 
 		// Prevent focus loss by moving it to the list element.
-		listRef.current.focus();
+		listRef?.current?.focus();
 
-		onDismiss();
-		onRemove();
+		onDismiss?.();
+		onRemove?.();
 	}
 
-	function onActionClick( event, onClick ) {
+	function onActionClick(
+		event: MouseEvent,
+		onClick: NoticeAction[ 'onClick' ]
+	) {
 		event.stopPropagation();
 
-		onRemove();
+		onRemove?.();
 
 		if ( onClick ) {
 			onClick( event );
@@ -87,8 +91,8 @@ function Snackbar(
 	useEffect( () => {
 		const timeoutHandle = setTimeout( () => {
 			if ( ! explicitDismiss ) {
-				onDismiss();
-				onRemove();
+				onDismiss?.();
+				onRemove?.();
 			}
 		}, NOTICE_TIMEOUT );
 
@@ -118,10 +122,10 @@ function Snackbar(
 		<div
 			ref={ ref }
 			className={ classes }
-			onClick={ ! explicitDismiss ? dismissMe : noop }
-			tabIndex="0"
+			onClick={ ! explicitDismiss ? dismissMe : undefined }
+			tabIndex={ 0 }
 			role={ ! explicitDismiss ? 'button' : '' }
-			onKeyPress={ ! explicitDismiss ? dismissMe : noop }
+			onKeyPress={ ! explicitDismiss ? dismissMe : undefined }
 			aria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }
 		>
 			<div className={ snackbarContentClassnames }>
@@ -135,7 +139,7 @@ function Snackbar(
 							key={ index }
 							href={ url }
 							variant="tertiary"
-							onClick={ ( event ) =>
+							onClick={ ( event: MouseEvent ) =>
 								onActionClick( event, onClick )
 							}
 							className="components-snackbar__action"
@@ -148,7 +152,7 @@ function Snackbar(
 					<span
 						role="button"
 						aria-label="Dismiss this notice"
-						tabIndex="0"
+						tabIndex={ 0 }
 						className="components-snackbar__dismiss-button"
 						onClick={ dismissMe }
 						onKeyPress={ dismissMe }
@@ -161,4 +165,18 @@ function Snackbar(
 	);
 }
 
-export default forwardRef( Snackbar );
+/**
+ * A Snackbar displays a succinct message that is cleared out after a small delay.
+ *
+ * It can also offer the user options, like viewing a published post.
+ * But these options should also be available elsewhere in the UI.
+ *
+ * ```jsx
+ * const MySnackbarNotice = () => (
+ *   <Snackbar>Post published successfully.</Snackbar>
+ * );
+ * ```
+ */
+export const Snackbar = forwardRef( UnforwardedSnackbar );
+
+export default Snackbar;