@wordpress/components 23.8.0 → 24.0.0

package/src/draggable/stories/index.tsx

@@ -7,6 +7,7 @@ import type { DragEvent } from 'react';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { Icon, more } from '@wordpress/icons';
 
@@ -32,46 +33,68 @@ export default meta;
 
 const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
 	const [ isDragging, setDragging ] = useState( false );
+	const instanceId = useInstanceId( DefaultTemplate );
 
 	// Allow for the use of ID in the example.
 	return (
 		<div>
-			<p>Is Dragging? { isDragging ? 'Yes' : 'No!' }</p>
+			<p
+				style={ {
+					padding: '1em',
+					position: 'relative',
+					zIndex: 1000,
+					backgroundColor: 'whitesmoke',
+				} }
+			>
+				Is Dragging? { isDragging ? 'Yes' : 'No!' }
+			</p>
 			<div
-				/* eslint-disable no-restricted-syntax, eslint-comments/disable-enable-pair */
-				id="draggable-example-box"
-				style={ { display: 'inline-flex' } }
+				style={ {
+					zIndex: 100,
+					position: 'relative',
+				} }
 			>
-				<Draggable { ...args } elementId="draggable-example-box">
-					{ ( { onDraggableStart, onDraggableEnd } ) => {
-						const handleOnDragStart = ( event: DragEvent ) => {
-							setDragging( true );
-							onDraggableStart( event );
-						};
-						const handleOnDragEnd = ( event: DragEvent ) => {
-							setDragging( false );
-							onDraggableEnd( event );
-						};
-
-						return (
-							<div
-								onDragStart={ handleOnDragStart }
-								onDragEnd={ handleOnDragEnd }
-								draggable
-								style={ {
-									alignItems: 'center',
-									display: 'flex',
-									justifyContent: 'center',
-									width: 100,
-									height: 100,
-									background: '#ddd',
-								} }
-							>
-								<Icon icon={ more } />
-							</div>
-						);
+				<div
+					id={ `draggable-example-box-${ instanceId }` }
+					style={ {
+						display: 'inline-flex',
+						position: 'relative',
 					} }
-				</Draggable>
+				>
+					<Draggable
+						{ ...args }
+						elementId={ `draggable-example-box-${ instanceId }` }
+					>
+						{ ( { onDraggableStart, onDraggableEnd } ) => {
+							const handleOnDragStart = ( event: DragEvent ) => {
+								setDragging( true );
+								onDraggableStart( event );
+							};
+							const handleOnDragEnd = ( event: DragEvent ) => {
+								setDragging( false );
+								onDraggableEnd( event );
+							};
+
+							return (
+								<div
+									onDragStart={ handleOnDragStart }
+									onDragEnd={ handleOnDragEnd }
+									draggable
+									style={ {
+										alignItems: 'center',
+										display: 'flex',
+										justifyContent: 'center',
+										width: 100,
+										height: 100,
+										background: '#ddd',
+									} }
+								>
+									<Icon icon={ more } />
+								</div>
+							);
+						} }
+					</Draggable>
+				</div>
 			</div>
 		</div>
 	);
@@ -81,3 +104,16 @@ export const Default: ComponentStory< typeof Draggable > = DefaultTemplate.bind(
 	{}
 );
 Default.args = {};
+
+/**
+ * `appendToOwnerDocument` is used to append the element being dragged to the body of the owner document.
+ *
+ * This is useful when the element being dragged should not receive styles from its parent.
+ * For example, when the element's parent sets a `z-index` value that would cause the dragged
+ * element to be rendered behind other elements.
+ */
+export const AppendElementToOwnerDocument: ComponentStory< typeof Draggable > =
+	DefaultTemplate.bind( {} );
+AppendElementToOwnerDocument.args = {
+	appendToOwnerDocument: true,
+};

package/src/draggable/types.ts

@@ -17,6 +17,13 @@ export type DraggableProps = {
 		 */
 		onDraggableEnd: ( event: DragEvent ) => void;
 	} ) => JSX.Element | null;
+	/**
+	 * Whether to append the cloned element to the `ownerDocument` body.
+	 * By default, elements sourced by id are appended to the element's wrapper.
+	 *
+	 * @default false
+	 */
+	appendToOwnerDocument?: boolean;
 	/**
 	 * Classname for the cloned element.
 	 */

package/src/form-toggle/style.scss

@@ -44,11 +44,7 @@ $toggle-border-width: 1px;
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-		outline-offset: 2px;
+		@include button-style-outset__focus($components-color-accent);
 	}
 
 	&.is-checked {

package/src/form-token-field/index.tsx

@@ -27,6 +27,7 @@ import {
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
 import { Spacer } from '../spacer';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const identity = ( value: string ) => value;
 
@@ -69,10 +70,13 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
+		props,
+		'wp.components.FormTokenField'
+	);
 
 	const instanceId = useInstanceId( FormTokenField );
 
@@ -702,7 +706,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					align="center"
 					gap={ 1 }
 					wrap={ true }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					hasTokens={ !! value.length }
 				>
 					{ renderTokensAndInput() }

package/src/form-token-field/styles.ts

@@ -11,22 +11,22 @@ import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
 
 type TokensAndInputWrapperProps = {
-	__next36pxDefaultSize: boolean;
+	__next40pxDefaultSize: boolean;
 	hasTokens: boolean;
 };
 
 const deprecatedPaddings = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 	hasTokens,
 }: TokensAndInputWrapperProps ) =>
-	! __next36pxDefaultSize &&
+	! __next40pxDefaultSize &&
 	css`
 		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
 		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
 	`;
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
-	padding: 5px ${ space( 1 ) };
+	padding: 7px;
 
 	${ deprecatedPaddings }
 `;

package/src/form-token-field/types.ts

@@ -151,13 +151,20 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 */
+	__next36pxDefaultSize?: boolean;
 	/**
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * If true, the select the first matching suggestion when the user presses
 	 * the Enter key (or space when tokenizeOnSpace is true).

package/src/index.ts

@@ -90,6 +90,7 @@ export { default as GuidePage } from './guide/page';
 export { Heading as __experimentalHeading } from './heading';
 export { HStack as __experimentalHStack } from './h-stack';
 export { default as Icon } from './icon';
+export type { IconType } from './icon';
 export { default as IconButton } from './button/deprecated';
 export {
 	ItemGroup as __experimentalItemGroup,

package/src/mobile/bottom-sheet/cell.native.js

@@ -10,7 +10,6 @@ import {
 	AccessibilityInfo,
 	Platform,
 } from 'react-native';
-import { isEmpty, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -273,8 +272,8 @@ class BottomSheetCell extends Component {
 				return accessibilityLabel || label;
 			}
 
-			if ( isEmpty( value ) ) {
-				return isEmpty( help )
+			if ( ! value ) {
+				return ! help
 					? sprintf(
 							/* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
 							_x( '%s. Empty', 'inline textinput cell' ),
@@ -288,7 +287,7 @@ class BottomSheetCell extends Component {
 							help
 					  );
 			}
-			return isEmpty( help )
+			return ! help
 				? sprintf(
 						/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
 						_x( '%1$s, %2$s', 'inline textinput cell' ),
@@ -323,7 +322,7 @@ class BottomSheetCell extends Component {
 		const opacity =
 			activeOpacity !== undefined
 				? activeOpacity
-				: get( platformStyles, 'activeOpacity.opacity' );
+				: platformStyles.activeOpacity?.opacity;
 
 		return (
 			<TouchableRipple

package/src/mobile/color-settings/palette.screen.native.js

@@ -78,22 +78,15 @@ const PaletteScreen = () => {
 		setCurrentValue( color );
 		if ( isSolidSegment && onColorChange && onGradientChange ) {
 			onColorChange( color );
-			onGradientChange( '' );
 		} else if ( isSolidSegment && onColorChange ) {
 			onColorChange( color );
 		} else if ( ! isSolidSegment && onGradientChange ) {
 			onGradientChange( color );
-			onColorChange( '' );
 		}
 	};
 
 	function onClear() {
 		setCurrentValue( undefined );
-		if ( isSolidSegment ) {
-			onColorChange( '' );
-		} else {
-			onGradientChange( '' );
-		}
 
 		if ( onColorCleared ) {
 			onColorCleared();

package/src/mobile/global-styles-context/index.native.js

@@ -26,9 +26,20 @@ export const getMergedGlobalStyles = (
 	blockName,
 	fontSizes
 ) => {
+	// Current support for general styles and blocks.
 	const baseGlobalColors = {
-		baseColors: baseGlobalStyles || {},
+		baseColors: {
+			color: baseGlobalStyles?.color,
+			typography: baseGlobalStyles?.typography,
+			elements: {
+				link: baseGlobalStyles?.elements?.link,
+			},
+			blocks: {
+				'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ],
+			},
+		},
 	};
+
 	const blockStyleAttributes = Object.fromEntries(
 		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
 			BLOCK_STYLE_ATTRIBUTES.includes( key )

package/src/mobile/global-styles-context/utils.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -191,6 +190,22 @@ export function getBlockTypography(
 	return typographyStyles;
 }
 
+/**
+ * Return a value from a certain path of the object.
+ * Path is specified as an array of properties, like: [ 'parent', 'child' ].
+ *
+ * @param {Object} object Input object.
+ * @param {Array}  path   Path to the object property.
+ * @return {*} Value of the object property at the specified path.
+ */
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
 	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
@@ -231,11 +246,11 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 						customValuesData
 					)
 				) {
-					return get( customValuesData, path );
+					return getValueFromObjectPath( customValuesData, path );
 				}
 
 				// Check for camelcase properties.
-				return get( customValuesData, [
+				return getValueFromObjectPath( customValuesData, [
 					...path.slice( 0, path.length - 1 ),
 					camelCase( path[ path.length - 1 ] ),
 				] );

package/src/mobile/link-picker/link-picker-results.native.js

@@ -74,6 +74,9 @@ export default function LinkPickerResults( {
 		return {
 			fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ),
 		};
+		// Disable eslint rule for now, to avoid introducing a regression
+		// (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879).
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	// Prevent setting state when unmounted.

package/src/mobile/segmented-control/index.native.js

@@ -140,8 +140,8 @@ const SegmentedControls = ( {
 		styles.selectedDark
 	);
 
-	const width = segmentsDimensions[ activeSegmentIndex ].width;
-	const height = segmentsDimensions[ activeSegmentIndex ].height;
+	const width = segmentsDimensions[ activeSegmentIndex ]?.width;
+	const height = segmentsDimensions[ activeSegmentIndex ]?.height;
 
 	const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ];
 

package/src/modal/index.tsx

@@ -252,7 +252,12 @@ function UnforwardedModal(
 								) }
 							</div>
 						) }
-						<div ref={ childrenContainerRef }>{ children }</div>
+						<div
+							ref={ childrenContainerRef }
+							className="components-modal__children-container"
+						>
+							{ children }
+						</div>
 					</div>
 				</div>
 			</StyleProvider>

package/src/modal/style.scss

@@ -16,31 +16,39 @@
 // The modal window element.
 .components-modal__frame {
 	// Use the entire viewport on smaller screens.
-	margin: 0;
+	margin: $grid-unit-50 0 0 0;
 	width: 100%;
 	background: $white;
 	box-shadow: $shadow-modal;
-	border-radius: $radius-block-ui;
+	border-radius: $grid-unit-10 $grid-unit-10 0 0;
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
+	// Animate the modal frame/contents appearing on the page.
+	animation: components-modal__appear-animation 0.1s ease-out;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
+		border-radius: $grid-unit-10;
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
-		// Animate the modal frame/contents appearing on the page.
-		animation: components-modal__appear-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-
 		&.is-full-screen {
-			width: 90vw;
-			min-height: 90vh;
+			@include break-small() {
+				width: calc(100% - #{ $grid-unit-20 * 2 });
+				height: calc(100% - #{ $grid-unit-20 * 2 });
+				max-height: none;
+			}
+			@include break-medium() {
+				width: calc(100% - #{ $grid-unit-50 * 2 });
+				height: calc(100% - #{ $grid-unit-50 * 2 });
+				max-width: none;
+			}
 		}
 	}
 
@@ -64,12 +72,12 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: 0 $grid-unit-40;
+	padding: $grid-unit-30 $grid-unit-40 $grid-unit-15;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height + $grid-unit-20;
+	height: $header-height + $grid-unit-15;
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -121,13 +129,13 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height + $grid-unit-20;
+	margin-top: $header-height + $grid-unit-15;
 	padding: 0 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
 	&.hide-header {
 		margin-top: 0;
-		padding-top: $grid-unit-30;
+		padding-top: $grid-unit-40;
 	}
 
 	&.is-scrollable:focus-visible {

package/src/navigable-container/README.md

@@ -2,38 +2,49 @@
 
 `NavigableContainer` is a React component to render a container navigable using the keyboard. Only things that are focusable can be navigated to. It will currently always be a `div`.
 
-`NavigableContainer` is exported as two classes: `NavigableMenu` and `TabbableContainer`. `NavigableContainer` itself is **not** exported. `NavigableMenu` and `TabbableContainer` have the props listed below. Any other props will be passed through to the `div`.
+`NavigableContainer` is exported as two components: `NavigableMenu` and `TabbableContainer`. `NavigableContainer` itself is **not** exported. `NavigableMenu` and `TabbableContainer` have the props listed below. Any other props will be passed through to the `div`.
 
 ---
 
 ## Props
 
-These are the props that `NavigableMenu` and `TabbableContainer`. Any props which are specific to one class are labelled appropriately.
+These are the props that `NavigableMenu` and `TabbableContainer`. Any props which are specific to one component are labelled appropriately.
 
-### onNavigate
+### `cycle`: `boolean`
 
-A callback invoked when the menu navigates to one of its children passing the index and child as an argument
+A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.
 
--   Type: `Function`
 -   Required: No
+-   default: `true`
 
-### cycle
+### `eventToOffset`: `( event: KeyboardEvent ) => -1 | 0 | 1 | undefined`
 
-A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.
+(TabbableContainer only)
+Gets an offset, given an event.
+
+-   Required: No
+
+### `onKeydown`: `( event: KeyboardEvent ) => void`
+
+A callback invoked on the keydown event.
+
+-   Required: No
+
+### `onNavigate`: `( index: number, focusable: HTMLElement ) => void`
+
+A callback invoked when the menu navigates to one of its children passing the index and child as an argument
 
--   Type: `Boolean`
 -   Required: No
--   default: true
 
-### orientation (NavigableMenu only)
+### `orientation`: `'vertical' | 'horizontal' | 'both'`
 
-The orientation of the menu. It could be "vertical", "horizontal" or "both"
+(NavigableMenu only)
+The orientation of the menu. It could be "vertical", "horizontal", or "both".
 
--   Type: `String`
 -   Required: No
 -   Default: `"vertical"`
 
-## Classes
+## Components
 
 ### NavigableMenu