@wordpress/components 19.8.3 → 19.10.0

package/src/notice/list.native.js

@@ -6,9 +6,8 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -16,60 +15,37 @@ import { compose } from '@wordpress/compose';
 import Notice from './';
 import styles from './style.scss';
 
-class NoticeList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.removeNotice = this.removeNotice.bind( this );
-	}
+function NoticeList() {
+	const { notices } = useSelect( ( select ) => {
+		const { getNotices } = select( noticesStore );
+		return {
+			notices: getNotices(),
+		};
+	}, [] );
 
-	removeNotice( id ) {
-		const { removeNotice } = this.props;
+	const { removeNotice } = useDispatch( noticesStore );
+
+	function onRemoveNotice( id ) {
 		removeNotice( id );
 	}
 
-	render() {
-		const { notices, shouldStack } = this.props;
-
-		if ( ! notices.length ) {
-			return null;
-		}
+	if ( ! notices.length ) {
+		return null;
+	}
 
-		return (
-			<View style={ styles.list } key={ notices.length }>
-				{ shouldStack ? (
-					notices
-						.reverse()
-						.map( ( notice ) => (
-							<Notice
-								{ ...notice }
-								key={ notice.id }
-								onNoticeHidden={ this.removeNotice }
-							></Notice>
-						) )
-				) : (
+	return (
+		<View style={ styles.list }>
+			{ notices.map( ( notice ) => {
+				return (
 					<Notice
-						{ ...notices[ notices.length - 1 ] }
-						onNoticeHidden={ this.removeNotice }
+						{ ...notice }
+						key={ notice.id }
+						onNoticeHidden={ onRemoveNotice }
 					></Notice>
-				) }
-			</View>
-		);
-	}
+				);
+			} ) }
+		</View>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getNotices } = select( 'core/notices' );
-
-		return {
-			notices: getNotices(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { removeNotice } = dispatch( 'core/notices' );
-
-		return {
-			removeNotice,
-		};
-	} ),
-] )( NoticeList );
+export default NoticeList;

package/src/notice/style.native.scss

@@ -33,6 +33,7 @@
 
 .notice {
 	justify-content: center;
+	position: absolute;
 }
 
 .noticeContent {

package/src/popover/index.js

@@ -47,7 +47,6 @@ function computeAnchorRect(
 	anchorRect,
 	getAnchorRect,
 	anchorRef = false,
-	shouldAnchorIncludePadding,
 	container
 ) {
 	if ( anchorRect ) {
@@ -98,17 +97,14 @@ function computeAnchorRect(
 				container
 			);
 
-			if ( shouldAnchorIncludePadding ) {
-				return rect;
-			}
-
-			return withoutPadding( rect, anchorRef );
+			return rect;
 		}
 
 		const { top, bottom } = anchorRef;
 		const topRect = top.getBoundingClientRect();
 		const bottomRect = bottom.getBoundingClientRect();
-		const rect = offsetIframe(
+
+		return offsetIframe(
 			new window.DOMRect(
 				topRect.left,
 				topRect.top,
@@ -118,12 +114,6 @@ function computeAnchorRect(
 			top.ownerDocument,
 			container
 		);
-
-		if ( shouldAnchorIncludePadding ) {
-			return rect;
-		}
-
-		return withoutPadding( rect, anchorRef );
 	}
 
 	if ( ! anchorRefFallback.current ) {
@@ -131,45 +121,12 @@ function computeAnchorRect(
 	}
 
 	const { parentNode } = anchorRefFallback.current;
-	const rect = offsetIframe(
+
+	return offsetIframe(
 		parentNode.getBoundingClientRect(),
 		parentNode.ownerDocument,
 		container
 	);
-
-	if ( shouldAnchorIncludePadding ) {
-		return rect;
-	}
-
-	return withoutPadding( rect, parentNode );
-}
-
-function getComputedStyle( node ) {
-	return node.ownerDocument.defaultView.getComputedStyle( node );
-}
-
-function withoutPadding( rect, element ) {
-	const {
-		paddingTop,
-		paddingBottom,
-		paddingLeft,
-		paddingRight,
-	} = getComputedStyle( element );
-	const top = paddingTop ? parseInt( paddingTop, 10 ) : 0;
-	const bottom = paddingBottom ? parseInt( paddingBottom, 10 ) : 0;
-	const left = paddingLeft ? parseInt( paddingLeft, 10 ) : 0;
-	const right = paddingRight ? parseInt( paddingRight, 10 ) : 0;
-
-	return {
-		x: rect.left + left,
-		y: rect.top + top,
-		width: rect.width - left - right,
-		height: rect.height - top - bottom,
-		left: rect.left + left,
-		right: rect.right - right,
-		top: rect.top + top,
-		bottom: rect.bottom - bottom,
-	};
 }
 
 /**
@@ -252,7 +209,6 @@ const Popover = (
 		range,
 		focusOnMount = 'firstElement',
 		anchorRef,
-		shouldAnchorIncludePadding,
 		anchorRect,
 		getAnchorRect,
 		expandOnMobile,
@@ -304,7 +260,6 @@ const Popover = (
 				anchorRect,
 				getAnchorRect,
 				anchorRef,
-				shouldAnchorIncludePadding,
 				containerRef.current
 			);
 
@@ -480,7 +435,6 @@ const Popover = (
 		anchorRect,
 		getAnchorRect,
 		anchorRef,
-		shouldAnchorIncludePadding,
 		position,
 		contentSize,
 		__unstableStickyBoundaryElement,

package/src/query-controls/README.md

@@ -51,7 +51,7 @@ const MyQueryControls = () => {
 			selectedCategoryId={ category }
 			onCategoryChange={ ( newCategory ) => updateQuery( { category: newCategory } ) }
 			onNumberOfItemsChange={ ( newNumberOfItems ) =>
-				updateQuery( { numberOfItems: newCategory } )
+				updateQuery( { numberOfItems: newNumberOfItems } )
 			}
 		/>
 	);
@@ -104,7 +104,7 @@ const MyQueryControls = () => {
 			selectedCategories={ selectedCategories }
 			onCategoryChange={ ( category ) => updateQuery( { selectedCategories: category } ) }
 			onNumberOfItemsChange={ ( newNumberOfItems ) =>
-				updateQuery( { numberOfItems: newCategory } )
+				updateQuery( { numberOfItems: newNumberOfItems } )
 			}
 		/>
 	);

package/src/sandbox/index.js

@@ -227,11 +227,11 @@ export default function Sandbox( {
 
 	useEffect( () => {
 		trySandbox();
-	}, [ title, type, styles, scripts ] );
+	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandbox( true );
-	}, [ html ] );
+	}, [ html, type ] );
 
 	return (
 		<iframe

package/src/select-control/README.md

@@ -114,7 +114,7 @@ Render a user interface to select multiple users from a list.
 		this.setState( { users } );
 	} }
 	options={ [
-		{ value: null, label: 'Select a User', disabled: true },
+		{ value: '', label: 'Select a User', disabled: true },
 		{ value: 'a', label: 'User A' },
 		{ value: 'b', label: 'User B' },
 		{ value: 'c', label: 'User c' },
@@ -194,7 +194,7 @@ If this property is added, multiple values can be selected. The value passed sho
 An array of objects containing the following properties:
 
 -   `label`: (string) The label to be shown to the user.
--   `value`: (Object) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
+-   `value`: (string) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
 -   `disabled`: (boolean) Whether or not the option should have the disabled attribute.
 -   Type: `Array`
 -   Required: No

package/src/select-control/index.tsx

@@ -3,7 +3,7 @@
  */
 import { isEmpty, noop } from 'lodash';
 import classNames from 'classnames';
-import type { ChangeEvent, FocusEvent, ReactNode, ForwardedRef } from 'react';
+import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,10 +17,9 @@ import { Icon, chevronDown } from '@wordpress/icons';
  */
 import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
-import type { InputBaseProps, LabelPosition } from '../input-control/types';
 import { Select, DownArrowWrapper } from './styles/select-control-styles';
-import type { Size } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { SelectControlProps } from './types';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
@@ -29,30 +28,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-export interface SelectControlProps
-	extends Omit< InputBaseProps, 'children' | 'isFocused' > {
-	help?: string;
-	hideLabelFromVision?: boolean;
-	multiple?: boolean;
-	onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-	onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-	onChange?: (
-		value: string | string[],
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-	options?: {
-		label: string;
-		value: string;
-		id?: string;
-		disabled?: boolean;
-	}[];
-	size?: Size;
-	value?: string | string[];
-	labelPosition?: LabelPosition;
-	children?: ReactNode;
-}
-
-function SelectControl(
+function UnforwardedSelectControl(
 	{
 		className,
 		disabled = false,
@@ -165,6 +141,31 @@ function SelectControl(
 	/* eslint-enable jsx-a11y/no-onchange */
 }
 
-const ForwardedComponent = forwardRef( SelectControl );
+/**
+ * `SelectControl` allows users to select from a single or multiple option menu.
+ * It functions as a wrapper around the browser's native `<select>` element.
+ *
+ * @example
+ * import { SelectControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MySelectControl = () => {
+ *   const [ size, setSize ] = useState( '50%' );
+ *
+ *   return (
+ *     <SelectControl
+ *       label="Size"
+ *       value={ size }
+ *       options={ [
+ *         { label: 'Big', value: '100%' },
+ *         { label: 'Medium', value: '50%' },
+ *         { label: 'Small', value: '25%' },
+ *       ] }
+ *       onChange={ setSize }
+ *     />
+ *   );
+ * };
+ */
+export const SelectControl = forwardRef( UnforwardedSelectControl );
 
-export default ForwardedComponent;
+export default SelectControl;

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

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SelectControl from '..';
+
+const meta: ComponentMeta< typeof SelectControl > = {
+	title: 'Components/SelectControl',
+	component: SelectControl,
+	argTypes: {
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		prefix: { control: { type: 'text' } },
+		suffix: { control: { type: 'text' } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const SelectControlWithState: ComponentStory< typeof SelectControl > = (
+	args
+) => {
+	const [ selection, setSelection ] = useState<
+		ComponentProps< typeof SelectControl >[ 'value' ]
+	>();
+
+	return (
+		<SelectControl
+			{ ...args }
+			value={ selection }
+			onChange={ setSelection }
+		/>
+	);
+};
+
+export const Default = SelectControlWithState.bind( {} );
+Default.args = {
+	options: [
+		{ value: '', label: 'Select an Option', disabled: true },
+		{ value: 'a', label: 'Option A' },
+		{ value: 'b', label: 'Option B' },
+		{ value: 'c', label: 'Option C' },
+	],
+};
+
+export const WithLabelAndHelpText = SelectControlWithState.bind( {} );
+WithLabelAndHelpText.args = {
+	...Default.args,
+	help: 'Help text to explain the select control.',
+	label: 'Value',
+};
+
+/**
+ * As an alternative to the `options` prop, `optgroup`s and `options` can be
+ * passed in as `children` for more customizability.
+ */
+export const WithCustomChildren: ComponentStory< typeof SelectControl > = (
+	args
+) => {
+	return (
+		<SelectControlWithState { ...args }>
+			<option value="option-1">Option 1</option>
+			<option value="option-2" disabled>
+				Option 2 - Disabled
+			</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>
+			</optgroup>
+		</SelectControlWithState>
+	);
+};

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

@@ -8,11 +8,12 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { COLORS, rtl } from '../../utils';
-import type { Size } from '../types';
+import type { SelectControlProps } from '../types';
 
-interface SelectProps {
-	disabled?: boolean;
-	selectSize?: Size;
+interface SelectProps extends Pick< SelectControlProps, 'disabled' > {
+	// Using `selectSize` instead of `size` to avoid a type conflict with the
+	// `size` HTML attribute of the `select` element.
+	selectSize?: SelectControlProps[ 'size' ];
 }
 
 const disabledStyles = ( { disabled }: SelectProps ) => {
@@ -23,14 +24,14 @@ const disabledStyles = ( { disabled }: SelectProps ) => {
 	} );
 };
 
-const fontSizeStyles = ( { selectSize }: SelectProps ) => {
+const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
 		'__unstable-large': '13px',
 	};
 
-	const fontSize = sizes[ selectSize as Size ];
+	const fontSize = sizes[ selectSize ];
 	const fontSizeMobile = '16px';
 
 	if ( ! fontSize ) return '';
@@ -44,7 +45,7 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 	`;
 };
 
-const sizeStyles = ( { selectSize }: SelectProps ) => {
+const sizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
 	const sizes = {
 		default: {
 			height: 30,
@@ -63,7 +64,7 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 		},
 	};
 
-	const style = sizes[ selectSize as Size ] || sizes.default;
+	const style = sizes[ selectSize ];
 
 	return css( style );
 };
@@ -96,7 +97,7 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;

package/src/select-control/test/{select-control.js → select-control.tsx}

@@ -32,7 +32,7 @@ describe( 'SelectControl', () => {
 
 		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
 
-		const selectElement = screen.queryByLabelText( 'Select' );
+		const selectElement = screen.getByLabelText( 'Select' );
 
 		fireEvent.change( selectElement, {
 			target: { value: 'option-group-option-1' },
@@ -68,7 +68,7 @@ describe( 'SelectControl', () => {
 
 		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
 
-		const selectElement = screen.queryByLabelText( 'Select' );
+		const selectElement = screen.getByLabelText( 'Select' );
 
 		fireEvent.change( selectElement, {
 			target: { value: 'option-2' },

package/src/select-control/types.ts

@@ -1 +1,66 @@
-export type Size = 'default' | 'small' | '__unstable-large';
+/**
+ * External dependencies
+ */
+import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { InputBaseProps } from '../input-control/types';
+import type { BaseControlProps } from '../base-control/types';
+
+export interface SelectControlProps
+	extends Pick<
+			InputBaseProps,
+			| 'disabled'
+			| 'hideLabelFromVision'
+			| 'label'
+			| 'labelPosition'
+			| 'prefix'
+			| 'size'
+			| 'suffix'
+		>,
+		Pick< BaseControlProps, 'help' > {
+	/**
+	 * If this property is added, multiple values can be selected. The value passed should be an array.
+	 *
+	 * @default false
+	 */
+	multiple?: boolean;
+	onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
+	onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
+	/**
+	 * A function that receives the value of the new option that is being selected as input.
+	 *
+	 * If `multiple` is `true`, the value received is an array of the selected value.
+	 * Otherwise, the value received is a single value with the new selected value.
+	 */
+	onChange?: (
+		value: string | string[],
+		extra?: { event?: ChangeEvent< HTMLSelectElement > }
+	) => void;
+	options?: {
+		/**
+		 * The label to be shown to the user.
+		 */
+		label: string;
+		/**
+		 * The internal value used to choose the selected value.
+		 * This is also the value passed to `onChange` when the option is selected.
+		 */
+		value: string;
+		id?: string;
+		/**
+		 * Whether or not the option should have the disabled attribute.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+	}[];
+	value?: string | string[];
+	/**
+	 * As an alternative to the `options` prop, `optgroup`s and `options` can be
+	 * passed in as `children` for more customizability.
+	 */
+	children?: ReactNode;
+}

package/src/surface/styles.js

@@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils';
 
 export const Surface = css`
 	background-color: ${ CONFIG.surfaceColor };
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	position: relative;
 `;
 

package/src/text/hook.js

@@ -105,7 +105,7 @@ export default function useText( props ) {
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.black } )
+				? css( { color: COLORS.gray[ 900 ] } )
 				: css( { color: COLORS.white } );
 		}
 

package/src/text/styles/text-mixins.native.js

@@ -3,7 +3,7 @@
  */
 import { fontFamily } from './font-family';
 import css from './emotion-css';
-import { G2 } from '../../utils/colors-values';
+import { COLORS } from '../../utils/colors-values';
 
 const fontWeightNormal = `font-weight: 400;`;
 const fontWeightMedium = `font-weight: 500;`;
@@ -81,7 +81,7 @@ const sectionHeading = `
 	font-size: 11px;
 	line-height: 1.4;
 	text-transform: uppercase;
-	color: ${ G2.gray[ 700 ] }
+	color: ${ COLORS.gray[ 700 ] }
 `;
 
 /**

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.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 `;

package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Text should render align 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -3,7 +3,8 @@
+      "color": "#1e1e1e",
+      "font-size": "calc((13 / 13) * 13px)",
+      "font-weight": "normal",
+      "line-height": "1.2",
+      "margin": "0",
++     "text-align": "center",
+    },
+  ]
+`;
+
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
   color: #1e1e1e;