@wordpress/components 18.0.0 → 19.0.3

package/src/resizable-box/style.scss

@@ -17,6 +17,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	}
 }
 
+// Make the image inside the resize to get the full width
+.components-resizable-box__container > img {
+	width: inherit;
+}
+
 // This is the "visible" resize handle - the circle part
 .components-resizable-box__handle::after {
 	display: block;

package/src/scrollable/stories/index.js

@@ -14,6 +14,9 @@ import { Scrollable } from '../';
 export default {
 	component: Scrollable,
 	title: 'Components (Experimental)/Scrollable',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

package/src/search-control/index.js

@@ -9,27 +9,60 @@ import classnames from 'classnames';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { Button } from '../';
 import BaseControl from '../base-control';
+import { useCombinedRef } from '../utils';
 
-function SearchControl( {
-	className,
-	onChange,
-	value,
-	label,
-	placeholder = __( 'Search' ),
-	hideLabelFromVision = true,
-	help,
-} ) {
+function SearchControl(
+	{
+		className,
+		onChange,
+		onKeyDown,
+		value,
+		label,
+		placeholder = __( 'Search' ),
+		hideLabelFromVision = true,
+		help,
+		onClose,
+	},
+	ref
+) {
 	const instanceId = useInstanceId( SearchControl );
-	const searchInput = useRef();
+	const searchInput = useCombinedRef( ref );
 	const id = `components-search-control-${ instanceId }`;
 
+	const renderRightButton = () => {
+		if ( onClose ) {
+			return (
+				<Button
+					icon={ closeSmall }
+					label={ __( 'Close search' ) }
+					onClick={ onClose }
+				/>
+			);
+		}
+
+		if ( !! value ) {
+			return (
+				<Button
+					icon={ closeSmall }
+					label={ __( 'Reset search' ) }
+					onClick={ () => {
+						onChange( '' );
+						searchInput.current.focus();
+					} }
+				/>
+			);
+		}
+
+		return <Icon icon={ search } />;
+	};
+
 	return (
 		<BaseControl
 			label={ label }
@@ -46,25 +79,16 @@ function SearchControl( {
 					type="search"
 					placeholder={ placeholder }
 					onChange={ ( event ) => onChange( event.target.value ) }
+					onKeyDown={ onKeyDown }
 					autoComplete="off"
 					value={ value || '' }
 				/>
 				<div className="components-search-control__icon">
-					{ !! value && (
-						<Button
-							icon={ closeSmall }
-							label={ __( 'Reset search' ) }
-							onClick={ () => {
-								onChange( '' );
-								searchInput.current.focus();
-							} }
-						/>
-					) }
-					{ ! value && <Icon icon={ search } /> }
+					{ renderRightButton() }
 				</div>
 			</div>
 		</BaseControl>
 	);
 }
 
-export default SearchControl;
+export default forwardRef( SearchControl );

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

@@ -16,6 +16,9 @@ import SearchControl from '../';
 export default {
 	title: 'Components/SearchControl',
 	component: SearchControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

package/src/select-control/README.md

@@ -1,6 +1,6 @@
 # SelectControl
 
-SelectControl allow users to select from a single-option menu. It functions as a wrapper around the browser's native `<select>` element.
+SelectControl allow users to select from a single or multiple option menu. It functions as a wrapper around the browser's native `<select>` element.
 
 ![A “Link To” select with “none” selected.](https://wordpress.org/gutenberg/files/2018/12/select.png)
 
@@ -18,17 +18,17 @@ SelectControl allow users to select from a single-option menu. It functions as a
 
 Use a select control when:
 
--   You want users to select a single option from a list.
+-   You want users to select one or more options from a list.
 -   There is a strong default option.
 -   There is little available space.
 -   The contents of the hidden part of the menu are obvious from its label and the one selected item. For example, if you have an option menu labelled “Month:” with the item “January” selected, the user might reasonably infer that the menu contains the 12 months of the year without having to look.
 
-If you have a shorter list of options, or need all of the options visible to the user, consider using RadioControl instead.
+If you have a shorter list of options, consider using RadioControl instead.
 
 ![](https://wordpress.org/gutenberg/files/2018/12/select-do-multiple.png)
 
 **Do**
-Use selects when you have multiple options, and can only choose one.
+Use selects when you have multiple options.
 
 ![](https://wordpress.org/gutenberg/files/2018/12/select-dont-binary.png)
 
@@ -122,6 +122,31 @@ Render a user interface to select multiple users from a list.
 />
 ```
 
+Render a user interface to select items within groups
+
+```jsx
+const [ item, setItem ] = useState( '' );
+
+// ...
+
+<SelectControl
+    label={ __( 'Select an item:' ) }
+    value={ item } // e.g: value = 'a'
+    onChange={ ( selection ) => { setItem( selection ) } }
+>
+	<optgroup label="Theropods">
+		<option value="Tyrannosaurus">Tyrannosaurus</option>
+		<option value="Velociraptor">Velociraptor</option>
+		<option value="Deinonychus">Deinonychus</option>
+	</optgroup>
+	<optgroup label="Sauropods">
+		<option value="Diplodocus">Diplodocus</option>
+		<option value="Saltasaurus">Saltasaurus</option>
+		<option value="Apatosaurus">Apatosaurus</option>
+	</optgroup>
+</SelectControl>
+```
+
 ### Props
 
 -   The set of props accepted by the component will be specified below.
@@ -174,6 +199,13 @@ An array of objects containing the following properties:
 -   Type: `Array`
 -   Required: No
 
+#### children
+
+An alternative to the `options` prop.  
+Use the `children` prop to have more control on the style of the items being rendered, like `optgroup`s or `options` and possibly avoid re-rendering due to the reference update on the `options` prop.
+- Type: `Element`
+- Required: No
+
 #### onChange
 
 A function that receives the value of the new option that is being selected as input.

package/src/select-control/index.tsx

@@ -31,7 +31,7 @@ function useUniqueId( idProp?: string ) {
 }
 
 export interface SelectControlProps
-	extends Omit< InputBaseProps, 'children' | 'isFocused' > {
+	extends Omit< InputBaseProps, 'isFocused' > {
 	help?: string;
 	hideLabelFromVision?: boolean;
 	multiple?: boolean;
@@ -68,6 +68,7 @@ function SelectControl(
 		size = 'default',
 		value: valueProp,
 		labelPosition = 'top',
+		children,
 		prefix,
 		suffix,
 		...props
@@ -79,7 +80,7 @@ function SelectControl(
 	const helpId = help ? `${ id }__help` : undefined;
 
 	// Disable reason: A select with an onchange throws a warning
-	if ( isEmpty( options ) ) return null;
+	if ( isEmpty( options ) && ! children ) return null;
 
 	const handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {
 		onBlur( event );
@@ -141,21 +142,22 @@ function SelectControl(
 					selectSize={ size }
 					value={ valueProp }
 				>
-					{ options.map( ( option, index ) => {
-						const key =
-							option.id ||
-							`${ option.label }-${ option.value }-${ index }`;
-
-						return (
-							<option
-								key={ key }
-								value={ option.value }
-								disabled={ option.disabled }
-							>
-								{ option.label }
-							</option>
-						);
-					} ) }
+					{ children ||
+						options.map( ( option, index ) => {
+							const key =
+								option.id ||
+								`${ option.label }-${ option.value }-${ index }`;
+
+							return (
+								<option
+									key={ key }
+									value={ option.value }
+									disabled={ option.disabled }
+								>
+									{ option.label }
+								</option>
+							);
+						} ) }
 				</Select>
 			</InputBase>
 		</BaseControl>

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

@@ -11,11 +11,14 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import SelectControl from '../';
+import SelectControl from '..';
 
 export default {
 	title: 'Components/SelectControl',
 	component: SelectControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const SelectControlWithState = ( props ) => {
@@ -64,3 +67,37 @@ export const _default = () => {
 
 	return <SelectControlWithState { ...props } />;
 };
+
+export const withNativeChildren = () => {
+	return (
+		<SelectControlWithState label="Value">
+			<option value="option-1">Option 1</option>
+			<option value="option-2" disabled>
+				Option 2 - Disabled
+			</option>
+			<option value="option-3">Option 3</option>
+			<optgroup label="Option Group 1">
+				<option value="option-group-1-option-1">
+					Option Group 1 - Option 1
+				</option>
+				<option value="option-group-1-option-2" disabled>
+					Option Group 1 - Option 2 - Disabled
+				</option>
+				<option value="option-group-1-option-3">
+					Option Group 1 - Option 3
+				</option>
+			</optgroup>
+			<optgroup label="Option Group 2">
+				<option value="option-group-2-option-1">
+					Option Group 2 - Option 1
+				</option>
+				<option value="option-group-2-option-2" disabled>
+					Option Group 2 - Option 2 - Disabled
+				</option>
+				<option value="option-group-2-option-3">
+					Option Group 2 - Option 3
+				</option>
+			</optgroup>
+		</SelectControlWithState>
+	);
+};

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

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import SelectControl from '..';
+
+describe( 'SelectControl', () => {
+	it( 'should not render when no options or children are provided', () => {
+		const { container } = render( <SelectControl /> );
+
+		expect( container.firstChild ).toBeNull();
+	} );
+
+	it( 'should not render its children', async () => {
+		const handleChangeMock = jest.fn();
+
+		render(
+			<SelectControl onChange={ handleChangeMock } label="Select">
+				<option value="option-1">Option 1</option>
+				<option value="option-2">Option 2</option>
+				<optgroup label="Option Group">
+					<option value="option-group-option-1">
+						Option Group - Option 1
+					</option>
+				</optgroup>
+			</SelectControl>
+		);
+
+		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
+
+		const selectElement = screen.queryByLabelText( 'Select' );
+
+		fireEvent.change( selectElement, {
+			target: { value: 'option-group-option-1' },
+		} );
+
+		expect( handleChangeMock ).toHaveBeenCalledWith(
+			'option-group-option-1',
+			expect.anything()
+		);
+	} );
+
+	it( 'should not render its options', async () => {
+		const handleChangeMock = jest.fn();
+
+		render(
+			<SelectControl
+				label="Select"
+				onChange={ handleChangeMock }
+				options={ [
+					{
+						id: 'option-1',
+						value: 'option-1',
+						label: 'Option 1',
+					},
+					{
+						id: 'option-2',
+						value: 'option-2',
+						label: 'Option 2',
+					},
+				] }
+			/>
+		);
+
+		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
+
+		const selectElement = screen.queryByLabelText( 'Select' );
+
+		fireEvent.change( selectElement, {
+			target: { value: 'option-2' },
+		} );
+
+		expect( handleChangeMock ).toHaveBeenCalledWith(
+			'option-2',
+			expect.anything()
+		);
+	} );
+} );

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

@@ -16,6 +16,9 @@ import { Slot, Fill, Provider } from '../';
 export default {
 	title: 'Components/SlotFill',
 	component: Slot,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

package/src/snackbar/stories/index.js

@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
  */
 import Snackbar from '../';
 
-export default { title: 'Components/Snackbar', component: Snackbar };
+export default {
+	title: 'Components/Snackbar',
+	component: Snackbar,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const content = text(

package/src/spacer/stories/index.js

@@ -14,6 +14,9 @@ import { Spacer } from '..';
 export default {
 	component: Spacer,
 	title: 'Components (Experimental)/Spacer',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const PROPS = [

package/src/style.scss

@@ -6,9 +6,9 @@
 @import "./circular-option-picker/style.scss";
 @import "./color-edit/style.scss";
 @import "./color-indicator/style.scss";
-@import "./color-picker/style.scss";
 @import "./combobox-control/style.scss";
 @import "./color-list-picker/style.scss";
+@import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
 @import "./date-time/style.scss";

package/src/surface/stories/index.js

@@ -12,6 +12,9 @@ import { Text } from '../../text';
 export default {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const variantOptions = {

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

@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
  */
 import TabPanel from '../';
 
-export default { title: 'Components/TabPanel', component: TabPanel };
+export default {
+	title: 'Components/TabPanel',
+	component: TabPanel,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	return (

package/src/text/styles.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 
 export const Text = css`
-	color: ${ COLORS.black };
+	color: ${ COLORS.darkGray.primary };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 `;

package/src/text/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -30,7 +30,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
 
 exports[`Text snapshot tests should render correctly 1`] = `
 .emotion-0 {
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

package/src/text-control/stories/index.js

@@ -16,6 +16,9 @@ import TextControl from '../';
 export default {
 	title: 'Components/TextControl',
 	component: TextControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const TextControlWithState = ( props ) => {

package/src/text-highlight/stories/index.js

@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
  */
 import TextHighlight from '../';
 
-export default { title: 'Components/TextHighlight', component: TextHighlight };
+export default {
+	title: 'Components/TextHighlight',
+	component: TextHighlight,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const textToMatch = text(

package/src/textarea-control/stories/index.js

@@ -16,6 +16,9 @@ import TextareaControl from '../';
 export default {
 	title: 'Components/TextareaControl',
 	component: TextareaControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const TextareaControlWithState = ( props ) => {

package/src/tip/stories/index.js

@@ -8,7 +8,13 @@ import { text } from '@storybook/addon-knobs';
  */
 import Tip from '../';
 
-export default { title: 'Components/Tip', component: Tip };
+export default {
+	title: 'Components/Tip',
+	component: Tip,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const tipText = text( 'Text', 'An example tip' );

package/src/toggle-control/stories/index.js

@@ -13,7 +13,13 @@ import { useState } from '@wordpress/element';
  */
 import ToggleControl from '../';
 
-export default { title: 'Components/ToggleControl', component: ToggleControl };
+export default {
+	title: 'Components/ToggleControl',
+	component: ToggleControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const ToggleControlWithState = ( {
 	helpTextChecked,

package/src/toggle-group-control/index.ts

@@ -1,2 +1,2 @@
-export { default as ToggleGroupControl } from './component';
-export { default as ToggleGroupControlOption } from './toggle-group-control-option';
+export { ToggleGroupControl } from './toggle-group-control';
+export { ToggleGroupControlOption } from './toggle-group-control-option';