@wordpress/components 19.3.0 → 19.4.1

package/src/spinner/stories/index.js

@@ -1,10 +1,43 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
+import { space } from '../../ui/utils/space';
 import Spinner from '../';
 
-export default { title: 'Components/Spinner', component: Spinner };
+const sizes = {
+	default: undefined,
+	medium: space( 20 ),
+	large: space( 40 ),
+};
+
+export default {
+	title: 'Components/Spinner',
+	component: Spinner,
+	argTypes: {
+		size: {
+			options: Object.keys( sizes ),
+			mapping: sizes,
+			control: { type: 'select' },
+		},
+	},
+};
+
+const Template = ( { size } ) => {
+	const cx = useCx();
+	const spinnerClassname = cx( css`
+		width: ${ size };
+		height: ${ size };
+	` );
+	return <Spinner className={ spinnerClassname } />;
+};
 
-export const _default = () => {
-	return <Spinner />;
+export const Default = Template.bind( {} );
+Default.args = {
+	size: 'default',
 };

package/src/spinner/styles.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+
+const spinAnimation = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+ `;
+
+export const StyledSpinner = styled.svg`
+	width: ${ CONFIG.spinnerSize }px;
+	height: ${ CONFIG.spinnerSize }px;
+	display: inline-block;
+	margin: 5px 11px 0;
+	position: relative;
+	color: var( --wp-admin-theme-color );
+	overflow: visible;
+`;
+
+const commonPathProps = css`
+	fill: transparent;
+	stroke-width: 1.5px;
+`;
+
+export const SpinnerTrack = styled.circle`
+	${ commonPathProps };
+	stroke: ${ COLORS.gray[ 300 ] };
+`;
+
+export const SpinnerIndicator = styled.path`
+	${ commonPathProps };
+	stroke: currentColor;
+	stroke-linecap: round;
+	transform-origin: 50% 50%;
+	animation: 1.4s linear infinite both ${ spinAnimation };
+`;

package/src/surface/hook.js

@@ -54,6 +54,7 @@ export function useSurface( props ) {
 		borderRight,
 		borderTop,
 		className,
+		cx,
 		variant,
 	] );
 

package/src/text/hook.js

@@ -126,6 +126,7 @@ export default function useText( props ) {
 		align,
 		className,
 		color,
+		cx,
 		display,
 		isBlock,
 		isCaption,

package/src/tip/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SVG, Path } from '@wordpress/primitives';
+import { Icon, tip } from '@wordpress/icons';
 
 /**
  * @typedef Props
@@ -15,9 +15,7 @@ import { SVG, Path } from '@wordpress/primitives';
 function Tip( props ) {
 	return (
 		<div className="components-tip">
-			<SVG width="24" height="24" viewBox="0 0 24 24">
-				<Path d="M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" />
-			</SVG>
+			<Icon icon={ tip } />
 			<p>{ props.children }</p>
 		</div>
 	);

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -81,7 +81,7 @@ function ToggleGroupControl(
 				'medium',
 				className
 			),
-		[ className, isBlock ]
+		[ className, cx, isBlock ]
 	);
 	return (
 		<BaseControl help={ help }>

package/src/tools-panel/stories/index.js

@@ -135,13 +135,15 @@ export const WithNonToolsPanelItems = () => {
 	);
 };
 
-export const WithOptionalItemsPlusIcon = () => {
+export const WithOptionalItemsPlusIcon = ( { isShownByDefault } ) => {
 	const [ height, setHeight ] = useState();
 	const [ width, setWidth ] = useState();
+	const [ minWidth, setMinWidth ] = useState();
 
 	const resetAll = () => {
 		setHeight( undefined );
 		setWidth( undefined );
+		setMinWidth( undefined );
 	};
 
 	return (
@@ -150,7 +152,20 @@ export const WithOptionalItemsPlusIcon = () => {
 				<ToolsPanel
 					label="Tools Panel (optional items only)"
 					resetAll={ resetAll }
+					key={ isShownByDefault }
 				>
+					<SingleColumnItem
+						hasValue={ () => !! minWidth }
+						label="Minimum width"
+						onDeselect={ () => setMinWidth( undefined ) }
+						isShownByDefault={ isShownByDefault }
+					>
+						<UnitControl
+							label="Minimum width"
+							value={ minWidth }
+							onChange={ ( next ) => setMinWidth( next ) }
+						/>
+					</SingleColumnItem>
 					<SingleColumnItem
 						hasValue={ () => !! width }
 						label="Width"
@@ -181,6 +196,10 @@ export const WithOptionalItemsPlusIcon = () => {
 	);
 };
 
+WithOptionalItemsPlusIcon.args = {
+	isShownByDefault: false,
+};
+
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 const panelId = 'unique-tools-panel-id';
 

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -175,7 +175,6 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
             aria-hidden="true"
             focusable="false"
             height="24"
-            role="img"
             viewBox="0 0 24 24"
             width="24"
             xmlns="http://www.w3.org/2000/svg"

package/src/tools-panel/test/index.js

@@ -942,6 +942,17 @@ describe( 'ToolsPanel', () => {
 	} );
 
 	describe( 'panel header icon toggle', () => {
+		const defaultControls = {
+			attributes: { value: false },
+			hasValue: jest.fn().mockImplementation( () => {
+				return !! defaultControls.attributes.value;
+			} ),
+			label: 'Default',
+			onDeselect: jest.fn(),
+			onSelect: jest.fn(),
+			isShownByDefault: true,
+		};
+
 		const optionalControls = {
 			attributes: { value: false },
 			hasValue: jest.fn().mockImplementation( () => {
@@ -953,7 +964,26 @@ describe( 'ToolsPanel', () => {
 			isShownByDefault: false,
 		};
 
-		it( 'should render appropriate icons for the dropdown menu', async () => {
+		it( 'should render appropriate icon for the dropdown menu where there are default controls', async () => {
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...defaultControls }>
+						<div>Default control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem { ...optionalControls }>
+						<div>Optional control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const optionsDisplayedIcon = screen.getByRole( 'button', {
+				name: 'View options',
+			} );
+
+			expect( optionsDisplayedIcon ).toBeInTheDocument();
+		} );
+
+		it( 'should render appropriate icons for the dropdown menu where there are no default controls', async () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
 					<ToolsPanelItem { ...optionalControls }>

package/src/tools-panel/tools-panel/hook.ts

@@ -48,6 +48,10 @@ const generateMenuItems = ( {
 	return menuItems;
 };
 
+const isMenuItemTypeEmpty = (
+	obj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
+) => obj && Object.keys( obj ).length === 0;
+
 export function useToolsPanel(
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >
 ) {
@@ -167,24 +171,24 @@ export function useToolsPanel(
 	] = useState( false );
 
 	useEffect( () => {
-		if ( menuItems.optional ) {
-			const optionalItems = Object.entries( menuItems.optional );
-			const allControlsHidden =
-				optionalItems.length > 0 &&
-				! optionalItems.some( ( [ , isSelected ] ) => isSelected );
+		if (
+			isMenuItemTypeEmpty( menuItems?.default ) &&
+			! isMenuItemTypeEmpty( menuItems?.optional )
+		) {
+			const allControlsHidden = ! Object.entries(
+				menuItems.optional
+			).some( ( [ , isSelected ] ) => isSelected );
 			setAreAllOptionalControlsHidden( allControlsHidden );
 		}
-	}, [ menuItems.optional, setAreAllOptionalControlsHidden ] );
+	}, [ menuItems, setAreAllOptionalControlsHidden ] );
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		const hasDefaultMenuItems =
-			menuItems?.default && !! Object.keys( menuItems?.default ).length;
 		const wrapperStyle =
 			hasInnerWrapper &&
 			styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
 		const emptyStyle =
-			! hasDefaultMenuItems &&
+			isMenuItemTypeEmpty( menuItems?.default ) &&
 			areAllOptionalControlsHidden &&
 			styles.ToolsPanelHiddenInnerWrapper;
 
@@ -192,6 +196,7 @@ export function useToolsPanel(
 	}, [
 		areAllOptionalControlsHidden,
 		className,
+		cx,
 		hasInnerWrapper,
 		menuItems,
 	] );

package/src/tools-panel/tools-panel-header/hook.ts

@@ -23,15 +23,15 @@ export function useToolsPanelHeader(
 	const cx = useCx();
 	const classes = useMemo( () => {
 		return cx( styles.ToolsPanelHeader, className );
-	}, [ className ] );
+	}, [ className, cx ] );
 
 	const dropdownMenuClassName = useMemo( () => {
 		return cx( styles.DropdownMenu );
-	}, [] );
+	}, [ cx ] );
 
 	const headingClassName = useMemo( () => {
 		return cx( styles.ToolsPanelHeading );
-	}, [] );
+	}, [ cx ] );
 
 	const {
 		menuItems,

package/src/tools-panel/tools-panel-item/hook.ts

@@ -148,6 +148,7 @@ export function useToolsPanelItem(
 		isShown,
 		shouldRenderPlaceholder,
 		className,
+		cx,
 		firstDisplayedItem,
 		lastDisplayedItem,
 		__experimentalFirstVisibleItemClass,

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/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/unit-control/types.ts

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

package/src/utils/config-values.js

@@ -44,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/tsconfig.json

@@ -28,6 +28,9 @@
 		"src/base-field/**/*",
 		"src/button/**/*",
 		"src/card/**/*",
+		"src/circular-option-picker/**/*",
+		"src/color-palette/**/*",
+		"src/color-picker/**/*",
 		"src/confirm-dialog/**/*",
 		"src/dashicon/**/*",
 		"src/disabled/**/*",