@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/tree-grid/index.js

@@ -78,6 +78,11 @@ function TreeGrid(
 			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.
@@ -91,8 +96,8 @@ function TreeGrid(
 					);
 				}
 
-				// Focus is either at the left or right edge of the grid.
-				if ( nextIndex === currentColumnIndex ) {
+				// 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.
@@ -105,7 +110,10 @@ function TreeGrid(
 						}
 						// 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,
+							parseInt(
+								activeRow?.getAttribute( 'aria-level' ) ?? 1,
+								10
+							) - 1,
 							1
 						);
 						const rows = Array.from(
@@ -115,7 +123,10 @@ function TreeGrid(
 						const currentRowIndex = rows.indexOf( activeRow );
 						for ( let i = currentRowIndex; i >= 0; i-- ) {
 							if (
-								parseInt( rows[ i ].ariaLevel, 10 ) === level
+								parseInt(
+									rows[ i ].getAttribute( 'aria-level' ),
+									10
+								) === level
 							) {
 								parentRow = rows[ i ];
 								break;
@@ -149,7 +160,10 @@ function TreeGrid(
 					return;
 				}
 
-				// Focus the next element.
+				// 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();
 
 				// Prevent key use for anything else. This ensures Voiceover

package/src/tree-select/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/TreeSelect',
 	component: TreeSelect,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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/truncate/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	component: Truncate,
 	title: 'Components (Experimental)/Truncate',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

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/stories/index.js

@@ -19,7 +19,7 @@ export default {
 	title: 'Components/UnitControl',
 	component: UnitControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -45,6 +45,7 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
+				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),
@@ -67,6 +68,23 @@ export const _default = () => {
 	return <Example />;
 };
 
+export const WithSingleUnit = ( props ) => {
+	const [ value, setValue ] = useState( '10px' );
+	return (
+		<ControlWrapperView>
+			<UnitControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v ) => setValue( v ) }
+			/>
+		</ControlWrapperView>
+	);
+};
+WithSingleUnit.args = {
+	label: 'Value',
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
 export function WithCustomUnits() {
 	const [ value, setValue ] = useState( '10km' );
 

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

@@ -18,6 +18,7 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
+	size: SelectSize;
 };
 
 export const Root = styled.div`
@@ -25,11 +26,21 @@ export const Root = styled.div`
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits }: InputProps ) => {
-	const value = disableUnits ? 3 : 24;
+const paddingStyles = ( { disableUnits, size }: InputProps ) => {
+	const paddings = {
+		default: {
+			paddingRight: 8,
+		},
+		small: {
+			paddingRight: 8,
+		},
+		'__unstable-large': {
+			paddingRight: disableUnits ? 16 : 8,
+		},
+	};
 
 	return css`
-		${ rtl( { paddingRight: value } )() };
+		${ rtl( paddings[ size ] )() };
 	`;
 };
 
@@ -62,49 +73,24 @@ export const ValueInput = styled( NumberControl )`
 	}
 `;
 
-const unitSizeStyles = ( { selectSize }: SelectProps ) => {
-	const sizes = {
-		default: {
-			height: 28,
-			lineHeight: '24px',
-			minHeight: 28,
-			top: 1,
-		},
-		small: {
-			height: 22,
-			lineHeight: '18px',
-			minHeight: 22,
-			top: 1,
-		},
-	};
-
-	return css( sizes[ selectSize ] );
-};
-
-const baseUnitLabelStyles = ( props: SelectProps ) => {
-	return css`
-		appearance: none;
-		background: transparent;
-		border-radius: 2px;
-		border: none;
-		box-sizing: border-box;
-		color: ${ COLORS.darkGray[ 500 ] };
-		display: block;
-		font-size: 8px;
-		line-height: 1;
-		letter-spacing: -0.5px;
-		outline: none;
-		padding: 2px 1px;
-		position: absolute;
-		text-align-last: center;
-		text-transform: uppercase;
-		width: 20px;
-
-		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-		${ rtl( { right: 0 } )() }
-		${ unitSizeStyles( props ) }
-	`;
-};
+const baseUnitLabelStyles = css`
+	appearance: none;
+	background: transparent;
+	border-radius: 2px;
+	border: none;
+	box-sizing: border-box;
+	color: ${ COLORS.darkGray[ 500 ] };
+	display: block;
+	font-size: 8px;
+	letter-spacing: -0.5px;
+	outline: none;
+	padding: 2px 1px;
+	text-align-last: center;
+	text-transform: uppercase;
+	width: 20px;
+
+	${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
+`;
 
 export const UnitLabel = styled.div< SelectProps >`
 	&&& {
@@ -119,6 +105,7 @@ export const UnitSelect = styled.select< SelectProps >`
 		${ baseUnitLabelStyles };
 		cursor: pointer;
 		border: 1px solid transparent;
+		height: 100%;
 
 		&:hover {
 			background-color: ${ COLORS.lightGray[ 300 ] };

package/src/unit-control/types.ts

@@ -1,18 +1,20 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import type { SyntheticEvent } from 'react';
+import type { CSSProperties, SyntheticEvent } from 'react';
 
 /**
  * Internal dependencies
  */
 import type { StateReducer } from '../input-control/reducer/state';
-import type { InputChangeCallback } from '../input-control/types';
+import type {
+	InputChangeCallback,
+	Size as InputSize,
+} from '../input-control/types';
 
 export type Value = number | string;
 
-export type SelectSize = 'default' | 'small';
+export type SelectSize = InputSize;
 
 export type WPUnitControlUnit = {
 	/**
@@ -77,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>
 	);
 };

package/src/utils/hooks/use-combined-ref.ts

@@ -5,7 +5,6 @@ import { useRef, useEffect } from '@wordpress/element';
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { MutableRefObject, RefCallback } from 'react';
 
 type Ref< T > = MutableRefObject< T | null > | RefCallback< T | null >;

package/src/utils/hooks/use-latest-ref.ts

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

package/src/v-stack/types.ts

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

package/src/z-stack/README.md

@@ -34,7 +34,7 @@ Reverse the layer ordering. When `true`, the first child has the lowest `z-index
 
 ### `offset`: `number`
 
-The amount of space between each child element. Defaults to `0`.
+The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
 
 ### `children`: `ReactNode`
 

package/src/z-stack/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref, ReactNode } from 'react';
 
 /**
@@ -31,7 +30,7 @@ export interface ZStackProps {
 	 */
 	isReversed?: boolean;
 	/**
-	 * The amount of offset between each child element.
+	 * The amount of offset between each child element. The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
 	 *
 	 * @default 0
 	 */

package/src/z-stack/stories/index.js

@@ -15,7 +15,7 @@ export default {
 	component: ZStack,
 	title: 'Components (Experimental)/ZStack',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };