@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

package/src/color-indicator/style.scss

@@ -1,8 +1,8 @@
 .component-color-indicator {
 	width: $grid-unit-50 * 0.5;
 	height: $grid-unit-50 * 0.5;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 	border-radius: 50%;
-	border: $border-width solid $gray-300;
 	display: inline-block;
 	padding: 0;
 }

package/src/color-palette/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -10,7 +11,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -136,9 +137,10 @@ export default function ColorPalette( {
 	__experimentalIsRenderedInSidebar = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
-	const Component = __experimentalHasMultipleOrigins
-		? MultiplePalettes
-		: SinglePalette;
+	const Component =
+		__experimentalHasMultipleOrigins && colors?.length
+			? MultiplePalettes
+			: SinglePalette;
 
 	const renderCustomColorPicker = () => (
 		<ColorPicker
@@ -149,10 +151,8 @@ export default function ColorPalette( {
 	);
 
 	let dropdownPosition;
-	let popoverProps;
 	if ( __experimentalIsRenderedInSidebar ) {
-		dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
-		popoverProps = { __unstableForcePosition: true };
+		dropdownPosition = 'bottom left';
 	}
 
 	const colordColor = colord( value );
@@ -164,7 +164,6 @@ export default function ColorPalette( {
 					position={ dropdownPosition }
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
-					popoverProps={ popoverProps }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button
 							className="components-color-palette__custom-color"

package/src/color-palette/index.native.js

@@ -219,6 +219,7 @@ function ColorPalette( {
 			onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }
 			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
 			ref={ scrollViewRef }
+			testID="color-palette"
 		>
 			{ shouldShowCustomIndicator && (
 				<View
@@ -266,6 +267,7 @@ function ColorPalette( {
 								selected: isSelected( color ),
 							} }
 							accessibilityHint={ color }
+							testID={ color }
 						>
 							<Animated.View
 								style={ {

package/src/color-palette/style.scss

@@ -31,6 +31,7 @@
 	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
 	border: none;
 	border-radius: $radius-block-ui;
+	max-height: fit-content !important;
 	& > div {
 		padding: 0;
 	}
@@ -41,8 +42,15 @@
 }
 
 @include break-medium() {
-	.components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-top .components-popover__content {
-		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
-		margin-top: #{ -($grid-unit-60 + $grid-unit-15) };
+	.components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar {
+		.components-popover__content.components-popover__content {
+			margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
+		}
+		&.is-from-top .components-popover__content {
+			margin-top: #{ -($grid-unit-60 + $grid-unit-15) };
+		}
+		&.is-from-bottom .components-popover__content {
+			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) };
+		}
 	}
 }

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -391,7 +391,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                           fill="#000"
                           focusable={false}
                           height={24}
-                          role="img"
                           viewBox="0 0 24 24"
                           width={24}
                           xmlns="http://www.w3.org/2000/svg"

package/src/color-picker/README.md

@@ -5,7 +5,7 @@
 ## Usage
 
 ```jsx
-import { ColorPicker } from '@wordpress/components/ui';
+import { ColorPicker } from '@wordpress/components';
 
 function Example() {
 	const [color, setColor] = useState();

package/src/color-picker/color-display.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * WordPress dependencies

package/src/color-picker/color-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * Internal dependencies

package/src/color-picker/component.tsx

@@ -1,15 +1,14 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import { Ref, useCallback } from 'react';
+import type { Ref } from 'react';
 import { colord, extend, Colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { useCallback, useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -74,7 +73,7 @@ const ColorPicker = (
 	} );
 
 	const safeColordColor = useMemo( () => {
-		return colord( color );
+		return colord( color || '' );
 	}, [ color ] );
 
 	const debouncedSetColor = useDebounce( setColor );

package/src/color-picker/use-deprecated-props.ts

@@ -10,7 +10,6 @@ import {
 	RgbColor,
 	RgbaColor,
 } from 'colord';
-// eslint-disable-next-line no-restricted-imports
 import type { ComponentProps } from 'react';
 import memoize from 'memize';
 
@@ -84,6 +83,8 @@ function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
 	if ( props.color.hex ) {
 		return props.color.hex;
 	}
+
+	return undefined;
 }
 
 const transformColorStringToLegacyColor = memoize(

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

@@ -266,7 +266,7 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl() {
+function CountryCodeComboboxControl( { allowReset } ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
@@ -276,9 +276,13 @@ function CountryCodeComboboxControl() {
 				onChange={ setValue }
 				label="Select a country"
 				options={ countryOptions }
+				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
 	);
 }
-export const _default = () => <CountryCodeComboboxControl />;
+export const _default = CountryCodeComboboxControl.bind( {} );
+_default.args = {
+	allowReset: false,
+};

package/src/combobox-control/style.scss

@@ -40,7 +40,7 @@ input.components-combobox-control__input[type="text"] {
 
 .components-combobox-control__reset.components-button {
 	display: flex;
-	height: $grid-unit-30;
-	min-width: $grid-unit-30;
+	height: $grid-unit-20;
+	min-width: $grid-unit-20;
 	padding: 0;
 }

package/src/confirm-dialog/component.tsx

@@ -1,16 +1,13 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import React, { useEffect, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
 import type { Ref, KeyboardEvent } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,6 +23,8 @@ import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';
 import { VStack } from '../v-stack';
+import * as styles from './styles';
+import { useCx } from '../utils/hooks/use-cx';
 
 function ConfirmDialog(
 	props: WordPressComponentProps< OwnProps, 'div', false >,
@@ -39,6 +38,9 @@ function ConfirmDialog(
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
+	const cx = useCx();
+	const wrapperClassName = cx( styles.wrapper );
+
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
 
@@ -85,6 +87,7 @@ function ConfirmDialog(
 					closeButtonLabel={ cancelLabel }
 					isDismissible={ true }
 					ref={ forwardedRef }
+					overlayClassName={ wrapperClassName }
 					__experimentalHideHeader
 					{ ...otherProps }
 				>

package/src/confirm-dialog/stories/index.js

@@ -1,10 +1,13 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import React, { useState } from 'react';
 import { text } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */

package/src/confirm-dialog/styles.ts

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * The z-index for ConfirmDialog is being set here instead of in
+ * packages/base-styles/_z-index.scss, because this component uses
+ * emotion instead of sass.
+ *
+ * ConfirmDialog needs this higher z-index to ensure it renders on top of
+ * any parent Popover component.
+ */
+export const wrapper = css`
+	&& {
+		z-index: 1000001;
+	}
+`;

package/src/confirm-dialog/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
 
 export type DialogInputEvent =

package/src/custom-gradient-bar/control-points.js

@@ -9,7 +9,7 @@ import { colord } from 'colord';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 
@@ -86,8 +86,7 @@ function GradientColorPickerDropdown( {
 		};
 		if ( isRenderedInSidebar ) {
 			result.anchorRef = gradientPickerDomRef.current;
-			result.position = isRTL() ? 'bottom right' : 'bottom left';
-			result.__unstableForcePosition = true;
+			result.position = 'bottom left';
 		}
 		return result;
 	}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );

package/src/custom-gradient-picker/style.scss

@@ -113,7 +113,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 .components-custom-gradient-picker {
 	.components-input-control__label {
 		line-height: 1;
-		padding-bottom: $grid-unit-10 !important;
 	}
 	label {
 		text-transform: uppercase;

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

@@ -9,6 +9,8 @@ import classnames from 'classnames';
  */
 import { Icon, check, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -98,6 +100,15 @@ export default function CustomSelectControl( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 	} );
+
+	const onKeyDownHandler = useCallback(
+		( e ) => {
+			e.stopPropagation();
+			menuProps?.onKeyDown?.( e );
+		},
+		[ menuProps ]
+	);
+
 	// We need this here, because the null active descendant is not fully ARIA compliant.
 	if (
 		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
@@ -141,7 +152,8 @@ export default function CustomSelectControl( {
 					className="components-custom-select-control__button-icon"
 				/>
 			</Button>
-			<ul { ...menuProps }>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&
 					items.map( ( item, index ) => (
 						// eslint-disable-next-line react/jsx-key

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

@@ -57,3 +57,30 @@ export const longLabels = () => (
 		options={ longLabelOptions }
 	/>
 );
+
+const withHintsOptions = [
+	{
+		key: 'thumbnail',
+		name: 'Thumbnail',
+		__experimentalHint: '150x150',
+	},
+	{
+		key: 'medium',
+		name: 'Medium',
+		__experimentalHint: '250x250',
+	},
+	{
+		key: 'large',
+		name: 'Large',
+		__experimentalHint: '1024x1024',
+	},
+	{
+		key: 'full',
+		name: 'Full Size',
+		__experimentalHint: '1600x1600',
+	},
+];
+
+export const hints = () => (
+	<CustomSelectControl label="Testing hints" options={ withHintsOptions } />
+);

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { CustomSelectControl } from '@wordpress/components';
+
+describe( 'CustomSelectControl', () => {
+	it( 'Captures the keypress event and does not let it propagate', () => {
+		const onKeyDown = jest.fn();
+		const options = [
+			{
+				key: 'one',
+				name: 'Option one',
+			},
+			{
+				key: 'two',
+				name: 'Option two',
+			},
+			{
+				key: 'three',
+				name: 'Option three',
+			},
+		];
+
+		render(
+			<div
+				// This role="none" is required to prevent an eslint warning about accessibility.
+				role="none"
+				onKeyDown={ onKeyDown }
+			>
+				<CustomSelectControl options={ options } />
+			</div>
+		);
+		const toggleButton = screen.getByRole( 'button' );
+		fireEvent.click( toggleButton );
+
+		const customSelect = screen.getByRole( 'listbox' );
+		fireEvent.keyDown( customSelect );
+
+		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+	} );
+} );

package/src/date-time/README.md

@@ -28,7 +28,7 @@ const MyDateTimePicker = () => {
 			is12Hour={ true }
 		/>
 	);
-}
+};
 ```
 
 ## Props
@@ -52,7 +52,7 @@ The function called when a new date or time has been selected. It is passed the
 
 ### is12Hour
 
-Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY.
+Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be `MM-DD-YYYY` (as opposed to the default format `DD-MM-YYYY`).
 
 -   Type: `bool`
 -   Required: No
@@ -69,5 +69,5 @@ A callback function which receives a Date object representing a day as an argume
 
 A callback invoked when selecting the previous/next month in the date picker. The callback receives the new month date in the ISO format as an argument.
 
-- Type: `Function`
-- Required: No
+-   Type: `Function`
+-   Required: No

package/src/date-time/test/time.js

@@ -278,7 +278,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex < dayInputIndex ).toBe( true );
+		expect( monthInputIndex > dayInputIndex ).toBe( true );
 
 		rerender(
 			<form aria-label="form">
@@ -299,7 +299,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex > dayInputIndex ).toBe( true );
+		expect( monthInputIndex < dayInputIndex ).toBe( true );
 	} );
 
 	it( 'Should set a time when passed a null currentTime', () => {

package/src/date-time/time.js

@@ -196,13 +196,13 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 
 	const dayMonthFormat = is12Hour ? (
 		<>
-			{ dayFormat }
 			{ monthFormat }
+			{ dayFormat }
 		</>
 	) : (
 		<>
-			{ monthFormat }
 			{ dayFormat }
+			{ monthFormat }
 		</>
 	);
 

package/src/dimension-control/README.md

@@ -11,6 +11,8 @@ This feature is still experimental. “Experimental” means this is an early im
 In a block's `edit` implementation, render a `<DimensionControl />` component.
 
 ```jsx
+import { partialRight } from 'lodash';
+
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { DimensionControl } from '@wordpress/components';

package/src/divider/component.tsx

@@ -3,7 +3,6 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

package/src/dropdown/index.js

@@ -27,19 +27,20 @@ function useObservableState( initialState, onStateChange ) {
 	];
 }
 
-export default function Dropdown( {
-	renderContent,
-	renderToggle,
-	position = 'bottom right',
-	className,
-	contentClassName,
-	expandOnMobile,
-	headerTitle,
-	focusOnMount,
-	popoverProps,
-	onClose,
-	onToggle,
-} ) {
+export default function Dropdown( props ) {
+	const {
+		renderContent,
+		renderToggle,
+		position = 'bottom right',
+		className,
+		contentClassName,
+		expandOnMobile,
+		headerTitle,
+		focusOnMount,
+		popoverProps,
+		onClose,
+		onToggle,
+	} = props;
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 

package/src/elevation/hook.js

@@ -112,6 +112,7 @@ export function useElevation( props ) {
 		active,
 		borderRadius,
 		className,
+		cx,
 		focus,
 		hover,
 		isInteractive,

package/src/elevation/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 export type Props = {

package/src/external-link/styles/external-link-styles.js

@@ -9,9 +9,9 @@ import styled from '@emotion/styled';
 import { Icon } from '@wordpress/icons';
 
 export const StyledIcon = styled( Icon )`
-	width: 1.4em;
-	height: 1.4em;
-	margin: -0.2em 0.1em 0;
+	width: 1em;
+	height: 1em;
+	margin: 0;
 	vertical-align: middle;
 	fill: currentColor;
 `;

package/src/flex/flex/hook.js

@@ -126,6 +126,7 @@ export function useFlex( props ) {
 	}, [
 		align,
 		className,
+		cx,
 		direction,
 		expanded,
 		gap,

package/src/flex/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 /**

package/src/flyout/types.ts

@@ -3,7 +3,6 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { PopoverStateReturn } from 'reakit';
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties, FunctionComponentElement } from 'react';
 
 /**

package/src/form-token-field/style.scss

@@ -53,7 +53,7 @@
 
 .components-form-token-field__label {
 	display: inline-block;
-	margin-bottom: $grid-unit-05;
+	margin-bottom: $grid-unit-10;
 }
 
 .components-form-token-field__help {