@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

package/src/search-control/index.native.js

@@ -115,6 +115,9 @@ function SearchControl( {
 		mergeFutureStyles( activeDarkStyles, [ isActive, isDark ] );
 
 		setCurrentStyles( futureStyles );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isActive, isDark ] );
 
 	useEffect( () => {
@@ -130,6 +133,9 @@ function SearchControl( {
 			clearTimeout( onCancelTimer.current );
 			keyboardHideSubscription.remove();
 		};
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const {

package/src/shortcut/test/index.tsx

@@ -11,7 +11,7 @@ import Shortcut from '..';
 describe( 'Shortcut', () => {
 	it( 'does not render anything if no shortcut prop is provided', () => {
 		const { container } = render( <Shortcut /> );
-		expect( container.firstChild ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'renders the shortcut display text when a string is passed as the shortcut', () => {

package/src/slot-fill/bubbles-virtually/slot-fill-context.js

@@ -1,4 +1,8 @@
 // @ts-nocheck
+/**
+ * External dependencies
+ */
+import { proxyMap } from 'valtio/utils';
 /**
  * WordPress dependencies
  */
@@ -6,8 +10,8 @@ import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
 
 const SlotFillContext = createContext( {
-	slots: {},
-	fills: {},
+	slots: proxyMap(),
+	fills: proxyMap(),
 	registerSlot: () => {
 		warning(
 			'Components must be wrapped within `SlotFillProvider`. ' +

package/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -1,8 +1,14 @@
 // @ts-nocheck
+/**
+ * External dependencies
+ */
+import { ref as valRef } from 'valtio';
+import { proxyMap } from 'valtio/utils';
+
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback, useState } from '@wordpress/element';
+import { useMemo, useCallback, useRef } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -11,79 +17,70 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 import SlotFillContext from './slot-fill-context';
 
 function useSlotRegistry() {
-	const [ slots, setSlots ] = useState( {} );
-	const [ fills, setFills ] = useState( {} );
+	const slots = useRef( proxyMap() );
+	const fills = useRef( proxyMap() );
 
 	const registerSlot = useCallback( ( name, ref, fillProps ) => {
-		setSlots( ( prevSlots ) => {
-			const slot = prevSlots[ name ] || {};
-			return {
-				...prevSlots,
-				[ name ]: {
-					...slot,
-					ref: ref || slot.ref,
-					fillProps: fillProps || slot.fillProps || {},
-				},
-			};
-		} );
+		const slot = slots.current.get( name ) || {};
+		slots.current.set(
+			name,
+			valRef( {
+				...slot,
+				ref: ref || slot.ref,
+				fillProps: fillProps || slot.fillProps || {},
+			} )
+		);
 	}, [] );
 
 	const unregisterSlot = useCallback( ( name, ref ) => {
-		setSlots( ( prevSlots ) => {
-			const { [ name ]: slot, ...nextSlots } = prevSlots;
-			// Make sure we're not unregistering a slot registered by another element
-			// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
-			if ( slot?.ref === ref ) {
-				return nextSlots;
-			}
-			return prevSlots;
-		} );
+		// Make sure we're not unregistering a slot registered by another element
+		// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
+		if ( slots.current.get( name )?.ref === ref ) {
+			slots.current.delete( name );
+		}
 	}, [] );
 
-	const updateSlot = useCallback(
-		( name, fillProps ) => {
-			const slot = slots[ name ];
-			if ( ! slot ) {
-				return;
-			}
-			if ( ! isShallowEqual( slot.fillProps, fillProps ) ) {
-				slot.fillProps = fillProps;
-				const slotFills = fills[ name ];
-				if ( slotFills ) {
-					// Force update fills.
-					slotFills.map( ( fill ) => fill.current.rerender() );
-				}
+	const updateSlot = useCallback( ( name, fillProps ) => {
+		const slot = slots.current.get( name );
+		if ( ! slot ) {
+			return;
+		}
+
+		if ( ! isShallowEqual( slot.fillProps, fillProps ) ) {
+			slot.fillProps = fillProps;
+			const slotFills = fills.current.get( name );
+			if ( slotFills ) {
+				// Force update fills.
+				slotFills.map( ( fill ) => fill.current.rerender() );
 			}
-		},
-		[ slots, fills ]
-	);
+		}
+	}, [] );
 
 	const registerFill = useCallback( ( name, ref ) => {
-		setFills( ( prevFills ) => ( {
-			...prevFills,
-			[ name ]: [ ...( prevFills[ name ] || [] ), ref ],
-		} ) );
+		fills.current.set(
+			name,
+			valRef( [ ...( fills.current.get( name ) || [] ), ref ] )
+		);
 	}, [] );
 
 	const unregisterFill = useCallback( ( name, ref ) => {
-		setFills( ( prevFills ) => {
-			if ( prevFills[ name ] ) {
-				return {
-					...prevFills,
-					[ name ]: prevFills[ name ].filter(
-						( fillRef ) => fillRef !== ref
-					),
-				};
-			}
-			return prevFills;
-		} );
+		if ( fills.current.get( name ) ) {
+			fills.current.set(
+				name,
+				valRef(
+					fills.current
+						.get( name )
+						.filter( ( fillRef ) => fillRef !== ref )
+				)
+			);
+		}
 	}, [] );
 
 	// Memoizing the return value so it can be directly passed to Provider value
 	const registry = useMemo(
 		() => ( {
-			slots,
-			fills,
+			slots: slots.current,
+			fills: fills.current,
 			registerSlot,
 			updateSlot,
 			unregisterSlot,
@@ -91,8 +88,6 @@ function useSlotRegistry() {
 			unregisterFill,
 		} ),
 		[
-			slots,
-			fills,
 			registerSlot,
 			updateSlot,
 			unregisterSlot,

package/src/slot-fill/bubbles-virtually/use-slot-fills.js

@@ -0,0 +1,24 @@
+// @ts-nocheck
+/**
+ * External dependencies
+ */
+import { useSnapshot } from 'valtio';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+
+export default function useSlotFills( name ) {
+	const registry = useContext( SlotFillContext );
+	const fills = useSnapshot( registry.fills, { sync: true } );
+	// The important bit here is that this call ensures that the hook
+	// only causes a re-render if the "fills" of a given slot name
+	// change change, not any fills.
+	return fills.get( name );
+}

package/src/slot-fill/bubbles-virtually/use-slot.js

@@ -1,8 +1,13 @@
 // @ts-nocheck
+/**
+ * External dependencies
+ */
+import { useSnapshot } from 'valtio';
+
 /**
  * WordPress dependencies
  */
-import { useCallback, useContext, useMemo } from '@wordpress/element';
+import { useCallback, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,10 +16,11 @@ import SlotFillContext from './slot-fill-context';
 
 export default function useSlot( name ) {
 	const registry = useContext( SlotFillContext );
-
-	const slot = registry.slots[ name ] || {};
-	const slotFills = registry.fills[ name ];
-	const fills = useMemo( () => slotFills || [], [ slotFills ] );
+	const slots = useSnapshot( registry.slots, { sync: true } );
+	// The important bit here is that this call ensures
+	// the hook only causes a re-render if the slot
+	// with the given name change, not any other slot.
+	const slot = slots.get( name );
 
 	const updateSlot = useCallback(
 		( fillProps ) => {
@@ -48,7 +54,6 @@ export default function useSlot( name ) {
 		...slot,
 		updateSlot,
 		unregisterSlot,
-		fills,
 		registerFill,
 		unregisterFill,
 	};

package/src/slot-fill/index.js

@@ -14,6 +14,7 @@ import BubblesVirtuallySlot from './bubbles-virtually/slot';
 import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
 import SlotFillProvider from './provider';
 import useSlot from './bubbles-virtually/use-slot';
+export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
 export function Fill( props ) {
 	// We're adding both Fills here so they can register themselves before

package/src/style.scss

@@ -1,3 +1,7 @@
+// Variables
+@import "./utils/theme-variables.scss";
+
+// Components
 @import "./animate/style.scss";
 @import "./autocomplete/style.scss";
 @import "./button-group/style.scss";
@@ -17,7 +21,6 @@
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
-@import "./font-size-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";

package/src/tab-panel/index.tsx

@@ -85,7 +85,7 @@ export function TabPanel( {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
-	const handleClick = ( tabKey: string ) => {
+	const handleTabSelection = ( tabKey: string ) => {
 		setSelected( tabKey );
 		onSelect?.( tabKey );
 	};
@@ -98,11 +98,8 @@ export function TabPanel( {
 
 	useEffect( () => {
 		const newSelectedTab = find( tabs, { name: selected } );
-		if ( ! newSelectedTab ) {
-			setSelected(
-				initialTabName ||
-					( tabs.length > 0 ? tabs[ 0 ].name : undefined )
-			);
+		if ( ! newSelectedTab && tabs.length > 0 ) {
+			handleTabSelection( initialTabName || tabs[ 0 ].name );
 		}
 	}, [ tabs ] );
 
@@ -127,7 +124,7 @@ export function TabPanel( {
 						aria-controls={ `${ instanceId }-${ tab.name }-view` }
 						selected={ tab.name === selected }
 						key={ tab.name }
-						onClick={ () => handleClick( tab.name ) }
+						onClick={ () => handleTabSelection( tab.name ) }
 					>
 						{ tab.title }
 					</TabButton>

package/src/text-highlight/test/index.tsx

@@ -50,9 +50,7 @@ describe( 'TextHighlight', () => {
 			expect( highlightedEls ).toHaveLength( 2 );
 
 			highlightedEls.forEach( ( el ) => {
-				expect( el.textContent ).toEqual(
-					expect.stringContaining( highlight )
-				);
+				expect( el ).toHaveTextContent( highlight );
 			} );
 		} );
 

package/src/theme/README.md

@@ -0,0 +1,34 @@
+# Theme
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`Theme` allows defining theme variables for components in the `@wordpress/components` package.
+
+Multiple `Theme` components can be nested in order to override specific theme variables.
+
+## Usage
+
+```jsx
+import { __experimentalTheme as Theme } from '@wordpress/components';
+
+const Example = () => {
+	return (
+		<Theme accent="red">
+			<Button variant="primary">I'm red</Button>
+			<Theme accent="blue">
+				<Button variant="primary">I'm blue</Button>
+			</Theme>
+		</Theme>
+	);
+};
+```
+
+## Props
+
+### `accent`: `string`
+
+Used to set the accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color. No all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
+
+-   Required: No

package/src/theme/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
+import namesPlugin from 'colord/plugins/names';
+
+/**
+ * Internal dependencies
+ */
+import type { ThemeProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+import { Wrapper } from './styles';
+
+extend( [ namesPlugin, a11yPlugin ] );
+
+/**
+ * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
+ *
+ * Multiple `Theme` components can be nested in order to override specific theme variables.
+ *
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalTheme as Theme } from '@wordpress/components';
+ *
+ * const Example = () => {
+ *   return (
+ *     <Theme accent="red">
+ *       <Button variant="primary">I'm red</Button>
+ *       <Theme accent="blue">
+ *         <Button variant="primary">I'm blue</Button>
+ *       </Theme>
+ *     </Theme>
+ *   );
+ * };
+ * ```
+ */
+function Theme( props: WordPressComponentProps< ThemeProps, 'div', true > ) {
+	const { accent } = props;
+	if ( accent && ! colord( accent ).isValid() ) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`wp.components.Theme: "${ accent }" is not a valid color value for the 'accent' prop.`
+		);
+	}
+
+	return <Wrapper { ...props } />;
+}
+
+export default Theme;

package/src/theme/stories/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Theme from '../index';
+import Button from '../../button';
+
+const meta: ComponentMeta< typeof Theme > = {
+	component: Theme,
+	title: 'Components (Experimental)/Theme',
+	argTypes: {
+		accent: { control: { type: 'color' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Theme > = ( args ) => (
+	<Theme { ...args }>
+		<Button variant="primary">Hello</Button>
+	</Theme>
+);
+
+export const Default = Template.bind( {} );
+Default.args = {};
+
+export const Nested: ComponentStory< typeof Theme > = ( args ) => (
+	<Theme accent="tomato">
+		<Button variant="primary">Outer theme (hardcoded)</Button>
+
+		<Theme { ...args }>
+			<Button variant="primary">
+				Inner theme (set via Storybook controls)
+			</Button>
+		</Theme>
+	</Theme>
+);
+Nested.args = {
+	accent: 'blue',
+};

package/src/theme/styles.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import type { ThemeProps } from './types';
+
+const accentColor = ( { accent }: ThemeProps ) =>
+	accent
+		? css`
+				--wp-components-color-accent: ${ accent };
+				--wp-components-color-accent-darker-10: ${ colord( accent )
+					.darken( 0.1 )
+					.toHex() };
+				--wp-components-color-accent-darker-20: ${ colord( accent )
+					.darken( 0.2 )
+					.toHex() };
+		  `
+		: undefined;
+
+export const Wrapper = styled.div< ThemeProps >`
+	${ accentColor }
+`;

package/src/theme/test/index.tsx

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Theme from '../';
+
+type MyThemableComponentProps = {
+	children: ReactNode;
+};
+
+const MyThemableComponent = ( props: MyThemableComponentProps ) => {
+	return (
+		<div
+			{ ...props }
+			style={ {
+				color: 'var(--wp-components-color-accent)',
+			} }
+		/>
+	);
+};
+
+describe( 'Theme', () => {
+	describe( 'accent color', () => {
+		it( 'it does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
+			render(
+				<Theme>
+					<MyThemableComponent>Inner</MyThemableComponent>
+				</Theme>
+			);
+
+			const inner = screen.getByText( 'Inner' );
+
+			if ( inner?.parentElement === null ) {
+				throw new Error(
+					'Somehow the `Theme` component does not render a DOM element?'
+				);
+			}
+
+			const innerElementStyles = window.getComputedStyle(
+				inner?.parentElement
+			);
+
+			expect(
+				innerElementStyles.getPropertyValue(
+					'--wp-components-color-accent'
+				)
+			).toBe( '' );
+
+			expect(
+				innerElementStyles.getPropertyValue(
+					'--wp-components-color-accent-darker-10'
+				)
+			).toBe( '' );
+
+			expect(
+				innerElementStyles.getPropertyValue(
+					'--wp-components-color-accent-darker-20'
+				)
+			).toBe( '' );
+		} );
+
+		it( 'it defines the accent color (and its variations) as a CSS variable', () => {
+			render(
+				<Theme accent="#123abc">
+					<MyThemableComponent>Inner</MyThemableComponent>
+				</Theme>
+			);
+
+			const inner = screen.getByText( 'Inner' );
+
+			expect( inner?.parentElement ).toHaveStyle( {
+				'--wp-components-color-accent': '#123abc',
+				'--wp-components-color-accent-darker-10': '#0e2c8d',
+				'--wp-components-color-accent-darker-20': '#091d5f',
+			} );
+		} );
+
+		describe( 'unsupported values', () => {
+			it.each( [
+				// Keywords
+				'currentcolor',
+				'initial',
+				'reset',
+				'inherit',
+				'revert',
+				'unset',
+				// CSS Custom properties
+				'var( --my-variable )',
+			] )( 'should warn when the value is "%s"', ( accentValue ) => {
+				render( <Theme accent={ accentValue } /> );
+
+				expect( console ).toHaveWarned();
+			} );
+		} );
+	} );
+} );

package/src/theme/types.ts

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ThemeProps = {
+	/**
+	 * Used to set the accent color (used by components as the primary color).
+	 *
+	 * If an accent color is not defined, the default fallback value is the original
+	 * WP Admin main theme color. No all valid CSS color syntaxes are supported —
+	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
+	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
+	 * `var(--my-custom-property)`) are _not_ supported values for this property.
+	 */
+	accent?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+};

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -159,6 +159,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-15 {
+  color: #1e1e1e;
   width: 30px;
   padding-left: 0;
   padding-right: 0;

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -55,13 +55,6 @@ export const buttonView = css`
 	}
 `;
 
-export const buttonActive = css`
-	color: ${ COLORS.white };
-	&:active {
-		background: transparent;
-	}
-`;
-
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
@@ -82,8 +75,17 @@ export const isIcon = ( {
 	};
 
 	return css`
+		color: ${ COLORS.gray[ 900 ] };
 		width: ${ iconButtonSizes[ size ] };
 		padding-left: 0;
 		padding-right: 0;
 	`;
 };
+
+export const buttonActive = css`
+	color: ${ COLORS.white };
+
+	&:active {
+		background: transparent;
+	}
+`;

package/src/toolbar/test/index.js

@@ -21,10 +21,10 @@ describe( 'Toolbar', () => {
 
 			expect(
 				screen.getByLabelText( 'control1', { selector: 'button' } )
-			).toBeTruthy();
+			).toBeInTheDocument();
 			expect(
 				screen.getByLabelText( 'control2', { selector: 'button' } )
-			).toBeTruthy();
+			).toBeInTheDocument();
 		} );
 	} );
 } );