@wordpress/components 20.0.0 → 21.0.0

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

@@ -22,6 +22,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -31,7 +38,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-8 {
   background: #fff;
   border: 1px solid transparent;
   border-radius: 2px;
@@ -49,23 +56,23 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-6 {
+  .emotion-8 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-6:focus-within {
+.emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   border-color: #757575;
 }
 
-.emotion-8 {
+.emotion-10 {
   background: #1e1e1e;
   border-radius: 2px;
   box-shadow: transparent;
@@ -79,12 +86,12 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
+  .emotion-10 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -97,7 +104,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -138,34 +145,34 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-12 {
+  .emotion-14 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-12::-moz-focus-inner {
+.emotion-14::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-12:active {
+.emotion-14:active {
   background: #fff;
 }
 
-.emotion-13 {
+.emotion-15 {
   width: 30px;
   padding-left: 0;
   padding-right: 0;
 }
 
-.emotion-14 {
+.emotion-16 {
   color: #fff;
 }
 
-.emotion-14:active {
+.emotion-16:active {
   background: transparent;
 }
 
-.emotion-15 {
+.emotion-17 {
   font-size: 13px;
   line-height: 1;
 }
@@ -176,16 +183,18 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   <div
     class="components-base-control__field emotion-2 emotion-3"
   >
-    <div>
+    <div
+      class="emotion-4 emotion-5"
+    >
       <span
-        class="components-base-control__label emotion-4 emotion-5"
+        class="components-base-control__label emotion-6 emotion-7"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-8 emotion-9"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-1"
@@ -196,18 +205,18 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         role="presentation"
         style="transform: translateX(0px); transition: none; width: 0px;"
       />
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
         data-active="true"
       >
         <button
           aria-checked="true"
           aria-label="Uppercase"
-          class="emotion-12 emotion-13 components-toggle-group-control-option-base emotion-14"
+          class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
           data-value="uppercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -216,7 +225,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-17 emotion-18"
           >
             <svg
               aria-hidden="true"
@@ -234,13 +243,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         </button>
       </div>
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="Lowercase"
-          class="emotion-12 emotion-13 components-toggle-group-control-option-base"
+          class="emotion-14 emotion-15 components-toggle-group-control-option-base"
           data-value="lowercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -249,7 +258,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-17 emotion-18"
           >
             <svg
               aria-hidden="true"
@@ -293,6 +302,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -302,7 +318,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-8 {
   background: #fff;
   border: 1px solid transparent;
   border-radius: 2px;
@@ -320,23 +336,23 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-6 {
+  .emotion-8 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-6:focus-within {
+.emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   border-color: #757575;
 }
 
-.emotion-8 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -349,7 +365,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -390,20 +406,20 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-10 {
+  .emotion-12 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-10::-moz-focus-inner {
+.emotion-12::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-10:active {
+.emotion-12:active {
   background: #fff;
 }
 
-.emotion-11 {
+.emotion-13 {
   font-size: 13px;
   line-height: 1;
 }
@@ -414,16 +430,18 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   <div
     class="components-base-control__field emotion-2 emotion-3"
   >
-    <div>
+    <div
+      class="emotion-4 emotion-5"
+    >
       <span
-        class="components-base-control__label emotion-4 emotion-5"
+        class="components-base-control__label emotion-6 emotion-7"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-8 emotion-9"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-0"
@@ -434,13 +452,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="R"
-          class="emotion-10 components-toggle-group-control-option-base"
+          class="emotion-12 components-toggle-group-control-option-base"
           data-value="rigas"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -449,20 +467,20 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             R
           </div>
         </button>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="J"
-          class="emotion-10 components-toggle-group-control-option-base"
+          class="emotion-12 components-toggle-group-control-option-base"
           data-value="jack"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -471,7 +489,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             J
           </div>

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

@@ -31,6 +31,7 @@ import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
 import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import ToggleGroupControlContext from '../context';
+import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 
 const noop = () => {};
@@ -44,7 +45,7 @@ function UnconnectedToggleGroupControl(
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
-		__experimentalIsIconGroup = false,
+		__experimentalIsBorderless = false,
 		label,
 		hideLabelFromVision = false,
 		help,
@@ -87,11 +88,11 @@ function UnconnectedToggleGroupControl(
 		() =>
 			cx(
 				styles.ToggleGroupControl( { size } ),
-				! __experimentalIsIconGroup && styles.border,
+				! __experimentalIsBorderless && styles.border,
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, __experimentalIsIconGroup, size ]
+		[ className, cx, isBlock, __experimentalIsBorderless, size ]
 	);
 	return (
 		<BaseControl
@@ -102,11 +103,11 @@ function UnconnectedToggleGroupControl(
 				value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
 			>
 				{ ! hideLabelFromVision && (
-					<div>
+					<VisualLabelWrapper>
 						<BaseControl.VisualLabel>
 							{ label }
 						</BaseControl.VisualLabel>
-					</div>
+					</VisualLabelWrapper>
 				) }
 				<RadioGroup
 					{ ...radio }

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

@@ -73,3 +73,8 @@ export const BackdropView = styled.div`
 	${ reduceMotion( 'transition' ) }
 	z-index: 1;
 `;
+
+export const VisualLabelWrapper = styled.div`
+	// Makes the inline label be the correct height, equivalent to setting line-height: 0
+	display: flex;
+`;

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl __experimentalIsIconGroup>
+		<ToggleGroupControl>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }

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

@@ -52,7 +52,7 @@ function UnforwardedToggleGroupControlOptionIcon(
  *
  * function Example() {
  *	return (
- *		<ToggleGroupControl __experimentalIsIconGroup>
+ *		<ToggleGroupControl>
  *			<ToggleGroupControlOptionIcon
  *				value="uppercase"
  *				label="Uppercase"

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

@@ -100,11 +100,11 @@ export type ToggleGroupControlProps = Omit<
 		 */
 		isBlock?: boolean;
 		/**
-		 * Style for use with `ToggleGroupControlOptionIcon`s.
+		 * Borderless style that may be preferred in some contexts.
 		 *
 		 * @default false
 		 */
-		__experimentalIsIconGroup?: boolean; // TODO: Refactor so this can be private
+		__experimentalIsBorderless?: boolean;
 		/**
 		 * Callback when a segment is selected.
 		 */

package/src/tooltip/index.js

@@ -79,7 +79,7 @@ const addPopoverToGrandchildren = ( {
 				animate={ false }
 				offset={ offset }
 				anchorRef={ anchorRef }
-				__unstableShift
+				shift
 			>
 				{ text }
 				<Shortcut

package/src/ui/context/context-connect.ts

@@ -6,7 +6,7 @@ import type { ForwardedRef, ReactChild, ReactNode } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef, memo } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import warn from '@wordpress/warning';
 
 /**
@@ -16,42 +16,74 @@ import { CONNECT_STATIC_NAMESPACE } from './constants';
 import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
 import type { WordPressComponentFromProps } from '.';
 
+type AcceptsTwoArgs<
+	F extends ( ...args: any ) => any,
+	ErrorMessage = never
+> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;
+
 type ContextConnectOptions = {
-	/** Defaults to `false`. */
-	memo?: boolean;
+	forwardsRef?: boolean;
 };
 
 /**
  * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
  * within the Context system under a specified namespace.
  *
- * This is an (experimental) evolution of the initial connect() HOC.
- * The hope is that we can improve render performance by removing functional
- * component wrappers.
+ * @param  Component The component to register into the Context system.
+ * @param  namespace The namespace to register the component under.
+ * @return The connected WordPressComponent
+ */
+export function contextConnect<
+	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null
+>(
+	Component: C &
+		AcceptsTwoArgs<
+			C,
+			'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'
+		>,
+	namespace: string
+) {
+	return _contextConnect( Component, namespace, { forwardsRef: true } );
+}
+
+/**
+ * "Connects" (or registers) a component within the Context system under a specified namespace.
+ * Does not forward a ref.
  *
  * @param  Component The component to register into the Context system.
  * @param  namespace The namespace to register the component under.
- * @param  options
  * @return The connected WordPressComponent
  */
-export function contextConnect< P >(
-	Component: ( props: P, ref: ForwardedRef< any > ) => JSX.Element | null,
-	namespace: string,
-	options: ContextConnectOptions = {}
-): WordPressComponentFromProps< P > {
-	const { memo: memoProp = false } = options;
+export function contextConnectWithoutRef< P >(
+	Component: ( props: P ) => JSX.Element | null,
+	namespace: string
+) {
+	return _contextConnect( Component, namespace );
+}
 
-	let WrappedComponent = forwardRef( Component );
-	if ( memoProp ) {
-		// @ts-ignore
-		WrappedComponent = memo( WrappedComponent );
-	}
+// This is an (experimental) evolution of the initial connect() HOC.
+// The hope is that we can improve render performance by removing functional
+// component wrappers.
+function _contextConnect<
+	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,
+	O extends ContextConnectOptions
+>(
+	Component: C,
+	namespace: string,
+	options?: O
+): WordPressComponentFromProps<
+	Parameters< C >[ 0 ],
+	O[ 'forwardsRef' ] extends true ? true : false
+> {
+	const WrappedComponent = options?.forwardsRef
+		? forwardRef< any, Parameters< C >[ 0 ] >( Component )
+		: Component;
 
 	if ( typeof namespace === 'undefined' ) {
 		warn( 'contextConnect: Please provide a namespace' );
 	}
 
-	// @ts-ignore internal property
+	// @ts-expect-error internal property
 	let mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [
 		namespace,
 	];
@@ -66,18 +98,13 @@ export function contextConnect< P >(
 		mergedNamespace = [ ...mergedNamespace, namespace ];
 	}
 
-	WrappedComponent.displayName = namespace;
-
-	// @ts-ignore internal property
-	WrappedComponent[ CONNECT_STATIC_NAMESPACE ] = [
-		...new Set( mergedNamespace ),
-	];
-
-	// @ts-ignore WordPressComponent property
-	WrappedComponent.selector = `.${ getStyledClassNameFromKey( namespace ) }`;
-
-	// @ts-ignore
-	return WrappedComponent;
+	// @ts-expect-error We can't rely on inferred types here because of the
+	// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33
+	return Object.assign( WrappedComponent, {
+		[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],
+		displayName: namespace,
+		selector: `.${ getStyledClassNameFromKey( namespace ) }`,
+	} );
 }
 
 /**

package/src/ui/context/context-system-provider.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual, merge, cloneDeep } from 'lodash';
+import { isEqual, merge } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ function useContextSystemBridge( { value } ) {
 	// `parentContext` will always be memoized (i.e., the result of this hook itself)
 	// or the default value from when the `ComponentsContext` was originally
 	// initialized (which will never change, it's a static variable)
-	// so this memoization will prevent `merge` and `cloneDeep` from rerunning unless
+	// so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless
 	// the references to `value` change OR the `parentContext` has an actual material change
 	// (because again, it's guaranteed to be memoized or a static reference to the empty object
 	// so we know that the only changes for `parentContext` are material ones... i.e., why we
@@ -74,9 +74,10 @@ function useContextSystemBridge( { value } ) {
 	// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
 	// correctly warning when the `value` isn't being properly memoized. All of that to say
 	// that this should be super safe to assume that `useMemo` will only run on actual
-	// changes to the two dependencies, therefore saving us calls to `merge` and `cloneDeep`!
+	// changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!
 	const config = useMemo( () => {
-		return merge( cloneDeep( parentContext ), value );
+		// Deep clone `parentContext` to avoid mutating it later.
+		return merge( JSON.parse( JSON.stringify( parentContext ) ), value );
 	}, [ parentContext, value ] );
 
 	return config;

package/src/ui/context/test/context-connect.tsx

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, contextConnectWithoutRef } from '../context-connect';
+import type { WordPressComponentProps } from '../wordpress-component';
+
+// Static TypeScript tests
+describe( 'ref forwarding', () => {
+	const ComponentWithRef = (
+		props: WordPressComponentProps< {}, 'div' >,
+		ref: ForwardedRef< any >
+	) => <div { ...props } ref={ ref } />;
+	const ComponentWithoutRef = (
+		props: WordPressComponentProps< {}, 'div' >
+	) => <div { ...props } />;
+
+	it( 'should not trigger a TS error if components are passed to the correct connect* functions', () => {
+		contextConnect( ComponentWithRef, 'Foo' );
+		contextConnectWithoutRef( ComponentWithoutRef, 'Foo' );
+	} );
+
+	it( 'should trigger a TS error if components are passed to the wrong connect* functions', () => {
+		// Wrapped in a thunk because React.forwardRef() will throw a console warning if this is executed
+		// eslint-disable-next-line no-unused-expressions
+		() => {
+			// @ts-expect-error This should error
+			contextConnect( ComponentWithoutRef, 'Foo' );
+		};
+
+		// @ts-expect-error This should error
+		contextConnectWithoutRef( ComponentWithRef, 'Foo' );
+	} );
+
+	it( 'should result in a component with the correct prop types', () => {
+		const AcceptsRef = contextConnect( ComponentWithRef, 'Foo' );
+
+		<AcceptsRef ref={ null } />;
+
+		// @ts-expect-error An unaccepted prop should trigger an error
+		<AcceptsRef foo={ null } />;
+
+		const NoRef = contextConnectWithoutRef( ComponentWithoutRef, 'Foo' );
+
+		// @ts-expect-error The ref prop should trigger an error
+		<NoRef ref={ null } />;
+
+		// @ts-expect-error An unaccepted prop should trigger an error
+		<NoRef foo={ null } />;
+	} );
+} );