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

package/src/tree-grid/index.js

@@ -51,147 +51,178 @@ function TreeGrid(
 	{ children, onExpandRow = () => {}, onCollapseRow = () => {}, ...props },
 	ref
 ) {
-	const onKeyDown = useCallback( ( event ) => {
-		const { keyCode, metaKey, ctrlKey, altKey, shiftKey } = event;
-
-		const hasModifierKeyPressed = metaKey || ctrlKey || altKey || shiftKey;
-
-		if (
-			hasModifierKeyPressed ||
-			! includes( [ UP, DOWN, LEFT, RIGHT ], keyCode )
-		) {
-			return;
-		}
-
-		// The event will be handled, stop propagation.
-		event.stopPropagation();
-
-		const { activeElement } = document;
-		const { currentTarget: treeGridElement } = event;
-		if ( ! treeGridElement.contains( activeElement ) ) {
-			return;
-		}
-
-		// Calculate the columnIndex of the active element.
-		const activeRow = activeElement.closest( '[role="row"]' );
-		const focusablesInRow = getRowFocusables( activeRow );
-		const currentColumnIndex = focusablesInRow.indexOf( activeElement );
-
-		if ( includes( [ LEFT, RIGHT ], keyCode ) ) {
-			// Calculate to the next element.
-			let nextIndex;
-			if ( keyCode === LEFT ) {
-				nextIndex = Math.max( 0, currentColumnIndex - 1 );
-			} else {
-				nextIndex = Math.min(
-					currentColumnIndex + 1,
-					focusablesInRow.length - 1
-				);
+	const onKeyDown = useCallback(
+		( event ) => {
+			const { keyCode, metaKey, ctrlKey, altKey, shiftKey } = event;
+
+			const hasModifierKeyPressed =
+				metaKey || ctrlKey || altKey || shiftKey;
+
+			if (
+				hasModifierKeyPressed ||
+				! includes( [ UP, DOWN, LEFT, RIGHT ], keyCode )
+			) {
+				return;
+			}
+
+			// The event will be handled, stop propagation.
+			event.stopPropagation();
+
+			const { activeElement } = document;
+			const { currentTarget: treeGridElement } = event;
+			if ( ! treeGridElement.contains( activeElement ) ) {
+				return;
 			}
 
-			// Focus is either at the left or right edge of the grid.
-			if ( nextIndex === currentColumnIndex ) {
+			// Calculate the columnIndex of the active element.
+			const activeRow = activeElement.closest( '[role="row"]' );
+			const focusablesInRow = getRowFocusables( activeRow );
+			const currentColumnIndex = focusablesInRow.indexOf( activeElement );
+			const canExpandCollapse = 0 === currentColumnIndex;
+			const cannotFocusNextColumn =
+				canExpandCollapse &&
+				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
+				keyCode === RIGHT;
+
+			if ( includes( [ LEFT, RIGHT ], keyCode ) ) {
+				// Calculate to the next element.
+				let nextIndex;
 				if ( keyCode === LEFT ) {
-					// Left:
-					// If a row is focused, and it is expanded, collapses the current row.
-					if ( activeRow?.ariaExpanded === 'true' ) {
-						onCollapseRow( activeRow );
-						event.preventDefault();
-						return;
-					}
-					// If a row is focused, and it is collapsed, moves to the parent row (if there is one).
-					const level = Math.max(
-						parseInt( activeRow?.ariaLevel ?? 1, 10 ) - 1,
-						1
-					);
-					const rows = Array.from(
-						treeGridElement.querySelectorAll( '[role="row"]' )
+					nextIndex = Math.max( 0, currentColumnIndex - 1 );
+				} else {
+					nextIndex = Math.min(
+						currentColumnIndex + 1,
+						focusablesInRow.length - 1
 					);
-					let parentRow = activeRow;
-					const currentRowIndex = rows.indexOf( activeRow );
-					for ( let i = currentRowIndex; i >= 0; i-- ) {
-						if ( parseInt( rows[ i ].ariaLevel, 10 ) === level ) {
-							parentRow = rows[ i ];
-							break;
+				}
+
+				// Focus is at the left most column.
+				if ( canExpandCollapse ) {
+					if ( keyCode === LEFT ) {
+						// Left:
+						// If a row is focused, and it is expanded, collapses the current row.
+						if (
+							activeRow.getAttribute( 'aria-expanded' ) === 'true'
+						) {
+							onCollapseRow( activeRow );
+							event.preventDefault();
+							return;
 						}
+						// If a row is focused, and it is collapsed, moves to the parent row (if there is one).
+						const level = Math.max(
+							parseInt(
+								activeRow?.getAttribute( 'aria-level' ) ?? 1,
+								10
+							) - 1,
+							1
+						);
+						const rows = Array.from(
+							treeGridElement.querySelectorAll( '[role="row"]' )
+						);
+						let parentRow = activeRow;
+						const currentRowIndex = rows.indexOf( activeRow );
+						for ( let i = currentRowIndex; i >= 0; i-- ) {
+							if (
+								parseInt(
+									rows[ i ].getAttribute( 'aria-level' ),
+									10
+								) === level
+							) {
+								parentRow = rows[ i ];
+								break;
+							}
+						}
+						getRowFocusables( parentRow )?.[ 0 ]?.focus();
 					}
-					getRowFocusables( parentRow )?.[ 0 ]?.focus();
-				} else {
-					// Right:
-					// If a row is focused, and it is collapsed, expands the current row.
-					if ( activeRow?.ariaExpanded === 'false' ) {
-						onExpandRow( activeRow );
-						event.preventDefault();
-						return;
-					}
-					// If a row is focused, and it is expanded, focuses the rightmost cell in the row.
-					const focusableItems = getRowFocusables( activeRow );
-					if ( focusableItems.length > 0 ) {
-						focusableItems[ focusableItems.length - 1 ]?.focus();
+					if ( keyCode === RIGHT ) {
+						// Right:
+						// If a row is focused, and it is collapsed, expands the current row.
+						if (
+							activeRow.getAttribute( 'aria-expanded' ) ===
+							'false'
+						) {
+							onExpandRow( activeRow );
+							event.preventDefault();
+							return;
+						}
+						// If a row is focused, and it is expanded, focuses the rightmost cell in the row.
+						const focusableItems = getRowFocusables( activeRow );
+						if ( focusableItems.length > 0 ) {
+							focusableItems[
+								focusableItems.length - 1
+							]?.focus();
+						}
 					}
+					// Prevent key use for anything else. For example, Voiceover
+					// will start reading text on continued use of left/right arrow
+					// keys.
+					event.preventDefault();
+					return;
 				}
-				// Prevent key use for anything else. For example, Voiceover
-				// will start reading text on continued use of left/right arrow
-				// keys.
-				event.preventDefault();
-				return;
-			}
 
-			// Focus the next element.
-			focusablesInRow[ nextIndex ].focus();
-
-			// Prevent key use for anything else. This ensures Voiceover
-			// doesn't try to handle key navigation.
-			event.preventDefault();
-		} else if ( includes( [ UP, DOWN ], keyCode ) ) {
-			// Calculate the rowIndex of the next row.
-			const rows = Array.from(
-				treeGridElement.querySelectorAll( '[role="row"]' )
-			);
-			const currentRowIndex = rows.indexOf( activeRow );
-			let nextRowIndex;
-
-			if ( keyCode === UP ) {
-				nextRowIndex = Math.max( 0, currentRowIndex - 1 );
-			} else {
-				nextRowIndex = Math.min( currentRowIndex + 1, rows.length - 1 );
-			}
+				// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.
+				if ( cannotFocusNextColumn ) {
+					return;
+				}
+				focusablesInRow[ nextIndex ].focus();
 
-			// Focus is either at the top or bottom edge of the grid. Do nothing.
-			if ( nextRowIndex === currentRowIndex ) {
-				// Prevent key use for anything else. For example, Voiceover
-				// will start navigating horizontally when reaching the vertical
-				// bounds of a table.
+				// Prevent key use for anything else. This ensures Voiceover
+				// doesn't try to handle key navigation.
 				event.preventDefault();
-				return;
-			}
+			} else if ( includes( [ UP, DOWN ], keyCode ) ) {
+				// Calculate the rowIndex of the next row.
+				const rows = Array.from(
+					treeGridElement.querySelectorAll( '[role="row"]' )
+				);
+				const currentRowIndex = rows.indexOf( activeRow );
+				let nextRowIndex;
+
+				if ( keyCode === UP ) {
+					nextRowIndex = Math.max( 0, currentRowIndex - 1 );
+				} else {
+					nextRowIndex = Math.min(
+						currentRowIndex + 1,
+						rows.length - 1
+					);
+				}
 
-			// Get the focusables in the next row.
-			const focusablesInNextRow = getRowFocusables(
-				rows[ nextRowIndex ]
-			);
+				// Focus is either at the top or bottom edge of the grid. Do nothing.
+				if ( nextRowIndex === currentRowIndex ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will start navigating horizontally when reaching the vertical
+					// bounds of a table.
+					event.preventDefault();
+					return;
+				}
+
+				// Get the focusables in the next row.
+				const focusablesInNextRow = getRowFocusables(
+					rows[ nextRowIndex ]
+				);
+
+				// If for some reason there are no focusables in the next row, do nothing.
+				if ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will still focus text when using arrow keys, while this
+					// component should limit navigation to focusables.
+					event.preventDefault();
+					return;
+				}
 
-			// If for some reason there are no focusables in the next row, do nothing.
-			if ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {
-				// Prevent key use for anything else. For example, Voiceover
-				// will still focus text when using arrow keys, while this
-				// component should limit navigation to focusables.
+				// Try to focus the element in the next row that's at a similar column to the activeElement.
+				const nextIndex = Math.min(
+					currentColumnIndex,
+					focusablesInNextRow.length - 1
+				);
+				focusablesInNextRow[ nextIndex ].focus();
+
+				// Prevent key use for anything else. This ensures Voiceover
+				// doesn't try to handle key navigation.
 				event.preventDefault();
-				return;
 			}
-
-			// Try to focus the element in the next row that's at a similar column to the activeElement.
-			const nextIndex = Math.min(
-				currentColumnIndex,
-				focusablesInNextRow.length - 1
-			);
-			focusablesInNextRow[ nextIndex ].focus();
-
-			// Prevent key use for anything else. This ensures Voiceover
-			// doesn't try to handle key navigation.
-			event.preventDefault();
-		}
-	}, [] );
+		},
+		[ onExpandRow, onCollapseRow ]
+	);
 
 	/* Disable reason: A treegrid is implemented using a table element. */
 	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */

package/src/truncate/hook.js

@@ -59,7 +59,7 @@ export default function useTruncate( props ) {
 			shouldTruncate && !! numberOfLines && sx.numberOfLines,
 			className
 		);
-	}, [ className, numberOfLines, shouldTruncate ] );
+	}, [ className, cx, numberOfLines, shouldTruncate ] );
 
 	return { ...otherProps, className: classes, children: truncatedContent };
 }

package/src/ui/README.md

@@ -2,7 +2,7 @@
 
 This directory contains the code for next Component System.
 
-More information can be found in the original Github issue:
+More information can be found in the original GitHub issue:
 https://github.com/WordPress/gutenberg/issues/27484
 
 ## Usage

package/src/ui/context/wordpress-component.ts

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

package/src/ui/control-group/types.ts

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

package/src/ui/form-group/types.ts

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

package/src/ui/shortcut/component.tsx

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

package/src/ui/tooltip/types.ts

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

package/src/ui/utils/font-size.ts

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

package/src/ui/utils/get-valid-children.ts

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

package/src/unit-control/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type {
 	FocusEventHandler,
 	KeyboardEvent,

package/src/unit-control/types.ts

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import type { SyntheticEvent } from 'react';
+import type { CSSProperties, SyntheticEvent } from 'react';
 
 /**
  * Internal dependencies
@@ -80,6 +79,7 @@ export type UnitSelectControlProps = {
 
 export type UnitControlProps = UnitSelectControlProps & {
 	__unstableStateReducer?: StateReducer;
+	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If `true`, the unit `<select>` is hidden.
 	 *

package/src/unit-control/unit-select-control.tsx

@@ -3,7 +3,6 @@
  */
 import { noop } from 'lodash';
 import classnames from 'classnames';
-// eslint-disable-next-line no-restricted-imports
 import type { ChangeEvent } from 'react';
 
 /**

package/src/utils/colors-values.js

@@ -31,8 +31,9 @@ export const G2 = {
 		700: '#757575', // Meets 4.6:1 text contrast against white.
 		600: '#949494', // Meets 3:1 UI or large text contrast against white.
 		400: '#ccc',
-		200: '#ddd', // Used for most borders.
-		100: '#f0f0f0',
+		300: '#ddd', // Used for most borders.
+		200: '#e0e0e0', // Used sparingly for light borders.
+		100: '#f0f0f0', // Used for light gray backgrounds.
 	},
 	darkGray: {
 		primary: '#1e1e1e',
@@ -158,7 +159,7 @@ export const UI = {
 	borderHover: G2.gray[ 700 ],
 	borderFocus: ADMIN.themeDark10,
 	borderDisabled: G2.gray[ 400 ],
-	borderLight: G2.gray[ 200 ],
+	borderLight: G2.gray[ 300 ],
 	label: DARK_GRAY[ 500 ],
 	textDisabled: DARK_GRAY[ 150 ],
 	textDark: BASE.white,

package/src/utils/config-values.js

@@ -29,10 +29,6 @@ const CONTROL_PROPS = {
 const TOGGLE_GROUP_CONTROL_PROPS = {
 	toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
 	toggleGroupControlBorderColor: COLORS.ui.border,
-	toggleGroupControlBackdropBackgroundColor:
-		CONTROL_PROPS.controlSurfaceColor,
-	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
-	toggleGroupControlBackdropBoxShadow: 'transparent',
 	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
 };
 
@@ -48,7 +44,7 @@ export default {
 	borderWidth: '1px',
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
-	spinnerSize: '18px',
+	spinnerSize: 16,
 	fontSize: '13px',
 	fontSizeH1: 'calc(2.44 * 13px)',
 	fontSizeH2: 'calc(1.95 * 13px)',

package/src/utils/hooks/stories/use-cx.js

@@ -1,68 +1,145 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
-import { useCx } from '..';
-import StyleProvider from '../../../style-provider';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
-import { useState, createPortal } from '@wordpress/element';
+import { __unstableIframe as Iframe } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { css } from '@emotion/react';
+import { useCx } from '..';
+import StyleProvider from '../../../style-provider';
+import {
+	createSlotFill,
+	Provider as SlotFillProvider,
+} from '../../../slot-fill';
 
 export default {
 	title: 'Components (Experimental)/useCx',
 };
 
-const IFrame = ( { children } ) => {
-	const [ iframeDocument, setIframeDocument ] = useState();
+const Example = ( { serializedStyles, children } ) => {
+	const cx = useCx();
+	const classes = cx( serializedStyles );
+	return <span className={ classes }>{ children }</span>;
+};
+
+const ExampleWithUseMemoWrong = ( { serializedStyles, children } ) => {
+	const cx = useCx();
+	// Wrong: using 'useMemo' without adding 'cx' to the dependency list.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const classes = useMemo( () => cx( serializedStyles ), [
+		serializedStyles,
+	] );
+	return <span className={ classes }>{ children }</span>;
+};
 
-	const handleRef = ( node ) => {
-		if ( ! node ) {
-			return null;
-		}
+const ExampleWithUseMemoRight = ( { serializedStyles, children } ) => {
+	const cx = useCx();
+	// Right: using 'useMemo' with 'cx' listed as a dependency.
+	const classes = useMemo( () => cx( serializedStyles ), [
+		cx,
+		serializedStyles,
+	] );
+	return <span className={ classes }>{ children }</span>;
+};
 
-		function setIfReady() {
-			const { contentDocument } = node;
-			const { readyState } = contentDocument;
+export const _slotFill = () => {
+	const { Fill, Slot } = createSlotFill( 'UseCxExampleSlot' );
 
-			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
-				return false;
-			}
+	const redText = css`
+		color: red;
+	`;
+	const blueText = css`
+		color: blue;
+	`;
+	const greenText = css`
+		color: green;
+	`;
 
-			setIframeDocument( contentDocument );
-		}
+	return (
+		<SlotFillProvider>
+			<StyleProvider document={ document }>
+				<Iframe>
+					<Iframe>
+						<Example serializedStyles={ redText }>
+							This text is inside an iframe and should be red
+						</Example>
+						<Fill name="test-slot">
+							<Example serializedStyles={ blueText }>
+								This text is also inside the iframe, but is
+								relocated by a slot/fill and should be blue
+							</Example>
+						</Fill>
+						<Fill name="outside-frame">
+							<Example serializedStyles={ greenText }>
+								This text is also inside the iframe, but is
+								relocated by a slot/fill and should be green
+							</Example>
+						</Fill>
+					</Iframe>
+					<StyleProvider document={ document }>
+						<Slot bubblesVirtually name="test-slot" />
+					</StyleProvider>
+				</Iframe>
+				<Slot bubblesVirtually name="outside-frame" />
+			</StyleProvider>
+		</SlotFillProvider>
+	);
+};
 
-		if ( setIfReady() ) {
-			return;
-		}
+export const _slotFillSimple = () => {
+	const { Fill, Slot } = createSlotFill( 'UseCxExampleSlotTwo' );
 
-		node.addEventListener( 'load', () => {
-			// iframe isn't immediately ready in Firefox
-			setIfReady();
-		} );
-	};
+	const redText = css`
+		color: red;
+	`;
 
 	return (
-		<iframe ref={ handleRef } title="use-cx-test-frame">
-			{ iframeDocument &&
-				createPortal(
-					<StyleProvider document={ iframeDocument }>
-						{ children }
-					</StyleProvider>,
-					iframeDocument.body
-				) }
-		</iframe>
+		<SlotFillProvider>
+			<Iframe>
+				<Fill name="test-slot">
+					<Example serializedStyles={ redText }>
+						This text should be red
+					</Example>
+				</Fill>
+			</Iframe>
+			<Slot bubblesVirtually name="test-slot" />
+		</SlotFillProvider>
 	);
 };
 
-const Example = ( { args, children } ) => {
-	const cx = useCx();
-	const classes = cx( ...args );
-	return <span className={ classes }>{ children }</span>;
+export const _useMemoBadPractices = () => {
+	const redText = css`
+		color: red;
+	`;
+	const blueText = css`
+		color: blue;
+	`;
+
+	return (
+		<>
+			<Example serializedStyles={ redText }>
+				This text should be red
+			</Example>
+			<ExampleWithUseMemoRight serializedStyles={ blueText }>
+				This text should be blue
+			</ExampleWithUseMemoRight>
+			<Iframe>
+				<Example serializedStyles={ redText }>
+					This text should be red
+				</Example>
+				<ExampleWithUseMemoWrong serializedStyles={ blueText }>
+					This text should be blue but it&apos;s not!
+				</ExampleWithUseMemoWrong>
+			</Iframe>
+		</>
+	);
 };
 
 export const _default = () => {
@@ -70,10 +147,10 @@ export const _default = () => {
 		color: red;
 	`;
 	return (
-		<IFrame>
-			<Example args={ [ redText ] }>
+		<Iframe>
+			<Example serializedStyles={ redText }>
 				This text is inside an iframe and is red!
 			</Example>
-		</IFrame>
+		</Iframe>
 	);
 };