@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.0

package/src/range-control/index.tsx

@@ -138,7 +138,9 @@ function UnforwardedRangeControl< IconProps = unknown >(
 		onChange( nextValue );
 	};
 
-	const handleOnChange = ( next: string ) => {
+	const handleOnChange = ( next?: string ) => {
+		// @ts-expect-error TODO: Investigate if it's problematic for setValue() to
+		// potentially receive a NaN when next is undefined.
 		let nextValue = parseFloat( next );
 		setValue( nextValue );
 
@@ -304,6 +306,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
 						step={ step }
+						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }
 					/>
 				) }

package/src/range-control/styles/range-control-styles.ts

@@ -76,14 +76,14 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
 	let background = railColor || '';
 
 	if ( disabled ) {
-		background = COLORS.lightGray[ 400 ];
+		background = COLORS.ui.backgroundDisabled;
 	}
 
 	return css( { background } );
 };
 
 export const Rail = styled.span`
-	background-color: ${ COLORS.lightGray[ 600 ] };
+	background-color: ${ COLORS.gray[ 300 ] };
 	left: 0;
 	pointer-events: none;
 	right: 0;
@@ -101,7 +101,7 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 	let background = trackColor || 'currentColor';
 
 	if ( disabled ) {
-		background = COLORS.lightGray[ 800 ];
+		background = COLORS.gray[ 400 ];
 	}
 
 	return css( { background } );
@@ -129,10 +129,10 @@ export const MarksWrapper = styled.span`
 `;
 
 const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
-	let backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];
+	let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];
 
 	if ( disabled ) {
-		backgroundColor = COLORS.lightGray[ 800 ];
+		backgroundColor = COLORS.gray[ 400 ];
 	}
 
 	return css( {
@@ -152,12 +152,12 @@ export const Mark = styled.span`
 
 const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 	return css( {
-		color: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],
+		color: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],
 	} );
 };
 
 export const MarkLabel = styled.span`
-	color: ${ COLORS.lightGray[ 600 ] };
+	color: ${ COLORS.gray[ 300 ] };
 	left: 0;
 	font-size: 11px;
 	position: absolute;
@@ -171,7 +171,7 @@ export const MarkLabel = styled.span`
 const thumbColor = ( { disabled }: ThumbProps ) =>
 	disabled
 		? css`
-				background-color: ${ COLORS.lightGray[ 800 ] };
+				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
 				background-color: var( --wp-admin-theme-color );

package/src/sandbox/index.js

@@ -74,14 +74,14 @@ const style = `
 	}
 	html,
 	body,
-	body > div,
-	body > div iframe {
+	body > div {
 		width: 100%;
 	}
 	html.wp-has-aspect-ratio,
 	body.wp-has-aspect-ratio,
 	body.wp-has-aspect-ratio > div,
 	body.wp-has-aspect-ratio > div iframe {
+		width: 100%;
 		height: 100%;
 		overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */
 	}

package/src/search-control/README.md

@@ -14,7 +14,7 @@ SearchControl components let users display a search control.
 
 Render a user interface to input the name of an additional css class.
 
-```js
+```jsx
 import { SearchControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
@@ -48,12 +48,14 @@ If this property is added, a specific placeholder will be used for the input.
 
 -   Type: `String`
 -   Required: No
+-   Default: `__( 'Search' )`
+
 #### value
 
 The current value of the input.
 
--   Type: `String | Number`
--   Required: Yes
+-   Type: `String`
+-   Required: No
 
 #### className
 

package/src/search-control/{index.js → index.tsx}

@@ -14,11 +14,15 @@ import { forwardRef, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button } from '../';
+import Button from '../button';
 import BaseControl from '../base-control';
+import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { SearchControlProps } from './types';
+import type { ForwardedRef } from 'react';
 
-function SearchControl(
+function UnforwardedSearchControl(
 	{
+		__nextHasNoMarginBottom,
 		className,
 		onChange,
 		onKeyDown,
@@ -28,10 +32,11 @@ function SearchControl(
 		hideLabelFromVision = true,
 		help,
 		onClose,
-	},
-	forwardedRef
+		...restProps
+	}: WordPressComponentProps< SearchControlProps, 'input', false >,
+	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
-	const searchRef = useRef();
+	const searchRef = useRef< HTMLInputElement >();
 	const instanceId = useInstanceId( SearchControl );
 	const id = `components-search-control-${ instanceId }`;
 
@@ -53,7 +58,7 @@ function SearchControl(
 					label={ __( 'Reset search' ) }
 					onClick={ () => {
 						onChange( '' );
-						searchRef.current.focus();
+						searchRef.current?.focus();
 					} }
 				/>
 			);
@@ -64,6 +69,7 @@ function SearchControl(
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ label }
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
@@ -72,6 +78,7 @@ function SearchControl(
 		>
 			<div className="components-search-control__input-wrapper">
 				<input
+					{ ...restProps }
 					ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
 					className="components-search-control__input"
 					id={ id }
@@ -90,4 +97,25 @@ function SearchControl(
 	);
 }
 
-export default forwardRef( SearchControl );
+/**
+ * SearchControl components let users display a search control.
+ *
+ * ```jsx
+ * import { SearchControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * function MySearchControl( { className, setState } ) {
+ *   const [ searchInput, setSearchInput ] = useState( '' );
+ *
+ *   return (
+ *     <SearchControl
+ *       value={ searchInput }
+ *       onChange={ setSearchInput }
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const SearchControl = forwardRef( UnforwardedSearchControl );
+
+export default SearchControl;

package/src/search-control/stories/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SearchControl from '..';
+
+const meta: ComponentMeta< typeof SearchControl > = {
+	title: 'Components/SearchControl',
+	component: SearchControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof SearchControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] = useState< string >();
+
+	return (
+		<SearchControl
+			{ ...props }
+			value={ value }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Label Text',
+	help: 'Help text to explain the input.',
+};
+
+/**
+ * When an `onClose` callback is provided, the search control will render a close button
+ * that will trigger the given callback.
+ *
+ * Use this if you want the button to trigger your own logic to close the search field entirely,
+ * rather than just clearing the input value.
+ */
+export const WithOnClose = Template.bind( {} );
+WithOnClose.args = {
+	...Default.args,
+};
+WithOnClose.argTypes = {
+	onClose: { action: 'onClose' },
+};

package/src/search-control/types.ts

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+
+export type SearchControlProps = Pick<
+	BaseControlProps,
+	'__nextHasNoMarginBottom' | 'help' | 'label'
+> & {
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default true
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * A function that receives the value of the input when the value is changed.
+	 */
+	onChange: ( value: string ) => void;
+	/**
+	 * When an `onClose` callback is provided, the search control will render a close button
+	 * that will trigger the given callback.
+	 *
+	 * Use this if you want the button to trigger your own logic to close the search field entirely,
+	 * rather than just clearing the input value.
+	 */
+	onClose?: () => void;
+	/**
+	 * A placeholder for the input.
+	 *
+	 * @default 'Search'
+	 */
+	placeholder?: HTMLAttributes< HTMLInputElement >[ 'placeholder' ];
+	/**
+	 * The current value of the input.
+	 */
+	value?: string;
+};

package/src/select-control/index.native.js

@@ -7,7 +7,7 @@ import { memo } from '@wordpress/element';
  */
 import PickerCell from '../mobile/bottom-sheet/picker-cell';
 
-const SelectControl = memo(
+export const SelectControl = memo(
 	( {
 		help,
 		instanceId,

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

@@ -1,28 +1,85 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import { createSlotFill, Fill, Slot } from '../';
+import { createSlotFill, Provider as SlotFillProvider } from '../';
 
 describe( 'createSlotFill', () => {
-	const SLOT_NAME = 'MySlotFill';
-	const MySlotFill = createSlotFill( SLOT_NAME );
+	test( 'should render all slot fills in order of rendering', () => {
+		const PostSidebar = createSlotFill( 'PostSidebar' );
 
-	test( 'should match snapshot for Fill', () => {
-		const wrapper = shallow( <MySlotFill.Fill /> );
+		render(
+			<SlotFillProvider>
+				<PostSidebar.Fill>
+					<p>Post Section 1</p>
+				</PostSidebar.Fill>
+				<PostSidebar.Fill>
+					<p>Post Section 2</p>
+				</PostSidebar.Fill>
+				<div title="Post Sidebar">
+					<PostSidebar.Slot />
+				</div>
+			</SlotFillProvider>
+		);
 
-		expect( wrapper.type() ).toBe( Fill );
-		expect( wrapper.prop( 'name' ) ).toBe( SLOT_NAME );
+		const postSidebar = screen.getByTitle( 'Post Sidebar' );
+		const postSections =
+			within( postSidebar ).getAllByText( /Post Section \d/ );
+
+		expect( postSidebar ).toBeVisible();
+		expect( postSections ).toHaveLength( 2 );
+		postSections.forEach( ( postSection, index ) => {
+			expect( postSection ).toBeVisible();
+			expect( postSection ).toHaveTextContent(
+				`Post Section ${ index + 1 }`
+			);
+		} );
 	} );
 
-	test( 'should match snapshot for Slot', () => {
-		const wrapper = shallow( <MySlotFill.Slot /> );
+	test( 'should support separate multiple slots and fills', () => {
+		const PostSidebar = createSlotFill( 'PostSidebar' );
+		const PageSidebar = createSlotFill( 'PageSidebar' );
+
+		render(
+			<SlotFillProvider>
+				<PostSidebar.Fill>
+					<p>Post Section</p>
+				</PostSidebar.Fill>
+				<PageSidebar.Fill>
+					<p>Page Section</p>
+				</PageSidebar.Fill>
+				<div title="Post Sidebar">
+					<PostSidebar.Slot />
+				</div>
+				<div title="Page Sidebar">
+					<PageSidebar.Slot />
+				</div>
+			</SlotFillProvider>
+		);
+
+		const postSidebar = screen.getByTitle( 'Post Sidebar' );
+
+		expect( postSidebar ).toBeVisible();
+		expect(
+			within( postSidebar ).getByText( 'Post Section' )
+		).toBeVisible();
+
+		const pageSidebar = screen.getByTitle( 'Page Sidebar' );
+
+		expect( pageSidebar ).toBeVisible();
+		expect(
+			within( pageSidebar ).getByText( 'Page Section' )
+		).toBeVisible();
 
-		expect( wrapper.type() ).toBe( Slot );
-		expect( wrapper.prop( 'name' ) ).toBe( SLOT_NAME );
+		expect(
+			within( postSidebar ).queryByText( 'Page Section' )
+		).not.toBeInTheDocument();
+		expect(
+			within( pageSidebar ).queryByText( 'Post Section' )
+		).not.toBeInTheDocument();
 	} );
 } );

package/src/style.scss

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

package/src/surface/test/__snapshots__/index.tsx.snap

@@ -6,8 +6,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-pt58n0-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -21,8 +21,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-1vckp4o-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -36,8 +36,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-sw9dzi-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -51,8 +51,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-123k66h-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -82,8 +82,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary em57xhy0"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >

package/src/tab-panel/README.md

@@ -136,7 +136,7 @@ The class to add to the active tab
 
 #### initialTabName
 
-Optionally provide a tab name for a tab to be selected upon mounting of component. If this prop is not set, the first tab will be selected by default.
+The name of the tab to be selected upon mounting of component. If this prop is not set, the first tab will be selected by default.
 
 -   Type: `String`
 -   Required: No
@@ -145,7 +145,6 @@ Optionally provide a tab name for a tab to be selected upon mounting of componen
 #### children
 
 A function which renders the tabviews given the selected tab. The function is passed the active tab object as an argument as defined the tabs prop.
-The element to which the tooltip should anchor.
 
 -   Type: (`Object`) => `Element`
 -   Required: Yes

package/src/tab-panel/{index.js → index.tsx}

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { partial, find } from 'lodash';
+import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,10 +15,16 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { NavigableMenu } from '../navigable-container';
 import Button from '../button';
+import type { TabButtonProps, TabPanelProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-const noop = () => {};
-
-const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
+const TabButton = ( {
+	tabId,
+	onClick,
+	children,
+	selected,
+	...rest
+}: TabButtonProps ) => (
 	<Button
 		role="tab"
 		tabIndex={ selected ? null : -1 }
@@ -31,24 +37,60 @@ const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
 	</Button>
 );
 
-export default function TabPanel( {
+/**
+ * TabPanel is an ARIA-compliant tabpanel.
+ *
+ * TabPanels organize content across different screens, data sets, and interactions.
+ * It has two sections: a list of tabs, and the view to show when tabs are chosen.
+ *
+ * ```jsx
+ * import { TabPanel } from '@wordpress/components';
+ *
+ * const onSelect = ( tabName ) => {
+ *   console.log( 'Selecting tab', tabName );
+ * };
+ *
+ * const MyTabPanel = () => (
+ *   <TabPanel
+ *     className="my-tab-panel"
+ *     activeClass="active-tab"
+ *     onSelect={ onSelect }
+ *     tabs={ [
+ *       {
+ *         name: 'tab1',
+ *         title: 'Tab 1',
+ *         className: 'tab-one',
+ *       },
+ *       {
+ *         name: 'tab2',
+ *         title: 'Tab 2',
+ *         className: 'tab-two',
+ *       },
+ *     ] }
+ *   >
+ *     { ( tab ) => <p>{ tab.title }</p> }
+ *   </TabPanel>
+ * );
+ * ```
+ */
+export function TabPanel( {
 	className,
 	children,
 	tabs,
 	initialTabName,
 	orientation = 'horizontal',
 	activeClass = 'is-active',
-	onSelect = noop,
-} ) {
+	onSelect,
+}: WordPressComponentProps< TabPanelProps, 'div', false > ) {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
-	const [ selected, setSelected ] = useState( null );
+	const [ selected, setSelected ] = useState< string >();
 
-	const handleClick = ( tabKey ) => {
+	const handleClick = ( tabKey: string ) => {
 		setSelected( tabKey );
-		onSelect( tabKey );
+		onSelect?.( tabKey );
 	};
 
-	const onNavigate = ( childIndex, child ) => {
+	const onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {
 		child.click();
 	};
 	const selectedTab = find( tabs, { name: selected } );
@@ -58,7 +100,8 @@ export default function TabPanel( {
 		const newSelectedTab = find( tabs, { name: selected } );
 		if ( ! newSelectedTab ) {
 			setSelected(
-				initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null )
+				initialTabName ||
+					( tabs.length > 0 ? tabs[ 0 ].name : undefined )
 			);
 		}
 	}, [ tabs ] );
@@ -84,7 +127,7 @@ export default function TabPanel( {
 						aria-controls={ `${ instanceId }-${ tab.name }-view` }
 						selected={ tab.name === selected }
 						key={ tab.name }
-						onClick={ partial( handleClick, tab.name ) }
+						onClick={ () => handleClick( tab.name ) }
 					>
 						{ tab.title }
 					</TabButton>
@@ -104,3 +147,5 @@ export default function TabPanel( {
 		</div>
 	);
 }
+
+export default TabPanel;

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

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import TabPanel from '..';
+
+const meta: ComponentMeta< typeof TabPanel > = {
+	title: 'Components/TabPanel',
+	component: TabPanel,
+	parameters: {
+		controls: { expanded: true },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof TabPanel > = ( props ) => {
+	return <TabPanel { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+	],
+};