@wordpress/components 19.9.0 → 19.10.0

package/src/disabled/index.js

@@ -1,19 +1,13 @@
 /**
  * External dependencies
  */
-import { includes, debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useCallback,
-	useLayoutEffect,
-	useRef,
-} from '@wordpress/element';
-import { focus } from '@wordpress/dom';
+import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+import { createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,25 +17,6 @@ import { StyledWrapper } from './styles/disabled-styles';
 const Context = createContext( false );
 const { Consumer, Provider } = Context;
 
-/**
- * Names of control nodes which qualify for disabled behavior.
- *
- * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
- *
- * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
- *
- * @type {string[]}
- */
-const DISABLED_ELIGIBLE_NODE_NAMES = [
-	'BUTTON',
-	'FIELDSET',
-	'INPUT',
-	'OPTGROUP',
-	'OPTION',
-	'SELECT',
-	'TEXTAREA',
-];
-
 /**
  * @typedef OwnProps
  * @property {string}                    [className]       Classname for the disabled element.
@@ -54,68 +29,8 @@ const DISABLED_ELIGIBLE_NODE_NAMES = [
  * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.
  */
 function Disabled( { className, children, isDisabled = true, ...props } ) {
-	/** @type {import('react').RefObject<HTMLDivElement>} */
-	const node = useRef( null );
-
-	const disable = () => {
-		if ( ! node.current ) {
-			return;
-		}
-
-		focus.focusable.find( node.current ).forEach( ( focusable ) => {
-			if (
-				includes( DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName )
-			) {
-				focusable.setAttribute( 'disabled', '' );
-			}
-
-			if ( focusable.nodeName === 'A' ) {
-				focusable.setAttribute( 'tabindex', '-1' );
-			}
-
-			const tabIndex = focusable.getAttribute( 'tabindex' );
-			if ( tabIndex !== null && tabIndex !== '-1' ) {
-				focusable.removeAttribute( 'tabindex' );
-			}
-
-			if ( focusable.hasAttribute( 'contenteditable' ) ) {
-				focusable.setAttribute( 'contenteditable', 'false' );
-			}
-		} );
-	};
-
-	// Debounce re-disable since disabling process itself will incur
-	// additional mutations which should be ignored.
-	const debouncedDisable = useCallback(
-		debounce( disable, undefined, { leading: true } ),
-		[]
-	);
-
-	useLayoutEffect( () => {
-		if ( ! isDisabled ) {
-			return;
-		}
-
-		disable();
-
-		/** @type {MutationObserver | undefined} */
-		let observer;
-		if ( node.current ) {
-			observer = new window.MutationObserver( debouncedDisable );
-			observer.observe( node.current, {
-				childList: true,
-				attributes: true,
-				subtree: true,
-			} );
-		}
-
-		return () => {
-			if ( observer ) {
-				observer.disconnect();
-			}
-			debouncedDisable.cancel();
-		};
-	}, [] );
+	/** @type {import('react').RefCallback<HTMLDivElement>} */
+	const ref = useDisabled();
 
 	if ( ! isDisabled ) {
 		return <Provider value={ false }>{ children }</Provider>;
@@ -124,7 +39,7 @@ function Disabled( { className, children, isDisabled = true, ...props } ) {
 	return (
 		<Provider value={ true }>
 			<StyledWrapper
-				ref={ node }
+				ref={ ref }
 				className={ classnames( className, 'components-disabled' ) }
 				{ ...props }
 			>

package/src/form-file-upload/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render as RTLrender, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -14,15 +14,9 @@ import FormFileUpload from '../';
  */
 const { File } = window;
 
-function render( jsx ) {
-	return {
-		user: userEvent.setup( {
-			// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
-			delay: null,
-		} ),
-		...RTLrender( jsx ),
-	};
-}
+const user = userEvent.setup( {
+	advanceTimers: jest.advanceTimersByTime,
+} );
 
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
@@ -32,6 +26,15 @@ const fakePath = expect.objectContaining( {
 } );
 
 describe( 'FormFileUpload', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	} );
+
 	it( 'should show an Icon Button and a hidden input', () => {
 		render( <FormFileUpload>My Upload Button</FormFileUpload> );
 
@@ -44,7 +47,7 @@ describe( 'FormFileUpload', () => {
 	it( 'should not fire a change event after selecting the same file', async () => {
 		const onChange = jest.fn();
 
-		const { user } = render(
+		render(
 			<FormFileUpload onChange={ onChange }>
 				My Upload Button
 			</FormFileUpload>
@@ -67,7 +70,7 @@ describe( 'FormFileUpload', () => {
 	it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
 		const onChange = jest.fn();
 
-		const { user } = render(
+		render(
 			<FormFileUpload
 				onClick={ jest.fn( ( e ) => ( e.target.value = '' ) ) }
 				onChange={ onChange }

package/src/input-control/README.md

@@ -18,7 +18,7 @@ const Example = () => {
 	return (
 		<InputControl
 			value={ value }
-			onChange={ ( nextValue ) => setValue( nextValue ) }
+			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>
 	);
 };

package/src/input-control/index.tsx

@@ -92,7 +92,7 @@ export function UnforwardedInputControl(
  * InputControl components let users enter and edit text. This is an experimental component
  * intended to (in time) merge with or replace `TextControl`.
  *
- * @example
+ * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
  * import { useState } from '@wordpress/compose';
  *
@@ -102,10 +102,11 @@ export function UnforwardedInputControl(
  *   return (
  *  	<InputControl
  *  		value={ value }
- *  		onChange={ ( nextValue ) => setValue( nextValue ) }
+ *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
  *  	/>
  *   );
  * };
+ * ```
  */
 export const InputControl = forwardRef( UnforwardedInputControl );
 

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

@@ -18,6 +18,7 @@ const meta: ComponentMeta< typeof InputControl > = {
 		prefix: { control: { type: null } },
 		suffix: { control: { type: null } },
 		type: { control: { type: 'text' } },
+		value: { control: { disable: true } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -34,7 +35,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
 	placeholder: 'Placeholder',
-	value: '',
 };
 
 export const WithPrefix = Template.bind( {} );

package/src/input-control/styles/input-control-styles.tsx

@@ -105,6 +105,7 @@ export const Container = styled.div< ContainerProps >`
 `;
 
 type InputProps = {
+	__next36pxDefaultSize?: boolean;
 	disabled?: boolean;
 	inputSize?: Size;
 	isDragging?: boolean;
@@ -140,14 +141,17 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	`;
 };
 
-const sizeStyles = ( { inputSize: size }: InputProps ) => {
+const sizeStyles = ( {
+	inputSize: size,
+	__next36pxDefaultSize,
+}: InputProps ) => {
 	const sizes = {
 		default: {
-			height: 30,
+			height: 36,
 			lineHeight: 1,
-			minHeight: 30,
-			paddingLeft: 8,
-			paddingRight: 8,
+			minHeight: 36,
+			paddingLeft: 16,
+			paddingRight: 16,
 		},
 		small: {
 			height: 24,
@@ -165,6 +169,16 @@ const sizeStyles = ( { inputSize: size }: InputProps ) => {
 		},
 	};
 
+	if ( ! __next36pxDefaultSize ) {
+		sizes.default = {
+			height: 30,
+			lineHeight: 1,
+			minHeight: 30,
+			paddingLeft: 8,
+			paddingRight: 8,
+		};
+	}
+
 	const style = sizes[ size as Size ] || sizes.default;
 
 	return css( style );

package/src/input-control/types.ts

@@ -27,6 +27,12 @@ export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 export type Size = 'default' | 'small' | '__unstable-large';
 
 interface BaseProps {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next36pxDefaultSize?: boolean;
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If true, the label will only be visible to screen readers.

package/src/menu-item/style.scss

@@ -38,6 +38,16 @@
 			margin-right: 0;
 		}
 	}
+
+	&:disabled,
+	&[aria-disabled="true"] {
+		// Override the button component's tertiary background and color.
+		&.is-tertiary {
+			background: none;
+			color: var(--wp-admin-theme-color-darker-10);
+			opacity: 0.3;
+		}
+	}
 }
 
 .components-menu-item__info-wrapper {

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -27,7 +27,14 @@ const TestScreen = ( { fullScreen, name, navigateTo } ) => {
 	);
 };
 
-jest.useFakeTimers( 'legacy' );
+beforeAll( () => {
+	jest.useFakeTimers( 'legacy' );
+} );
+
+afterAll( () => {
+	jest.runOnlyPendingTimers();
+	jest.useRealTimers();
+} );
 
 it( 'animates height transitioning from non-full-screen to full-screen', async () => {
 	const screen = render(

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -82,6 +82,7 @@ const BottomSheetSelectControl = ( {
 							customActionButton
 							separatorType="none"
 							label={ item.label }
+							icon={ item.icon }
 							onPress={ onChangeValue( item.value ) }
 							leftAlign={ true }
 							key={ index }

package/src/mobile/html-text-input/style.android.scss

@@ -14,6 +14,7 @@
 	padding-right: $padding;
 	padding-top: $padding;
 	padding-bottom: $padding;
+	margin-top: $padding * 2;
 }
 
 .scrollView {

package/src/mobile/html-text-input/style.ios.scss

@@ -20,4 +20,5 @@ $title-height: 32;
 	padding-top: $padding;
 	padding-bottom: $padding;
 	height: $title-height;
+	margin-top: $padding * 2;
 }

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -9,7 +9,15 @@ import { render, fireEvent, waitFor } from 'test/helpers';
  */
 import LinkSettingsNavigation from '../link-settings-navigation';
 
-jest.useFakeTimers( 'legacy' );
+beforeAll( () => {
+	jest.useFakeTimers( 'legacy' );
+} );
+
+afterAll( () => {
+	jest.runOnlyPendingTimers();
+	jest.useRealTimers();
+} );
+
 jest.spyOn( Keyboard, 'dismiss' );
 
 const subject = (

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/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>
+	);
+};