@wordpress/components 21.3.0 → 22.0.0

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

@@ -9,7 +9,6 @@ import type { RadioStateReturn } from 'reakit';
  * Internal dependencies
  */
 import type { BaseControlProps } from '../base-control/types';
-import type { FormElementProps } from '../utils/types';
 
 export type ToggleGroupControlOptionBaseProps = {
 	children: ReactNode;
@@ -72,69 +71,74 @@ export type WithToolTipProps = {
 	showTooltip?: boolean;
 };
 
-export type ToggleGroupControlProps = Omit<
-	FormElementProps< any >,
-	'defaultValue'
-> &
-	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
-		/**
-		 * Label for the form element.
-		 */
-		label: string;
-		/**
-		 * If true, the label will only be visible to screen readers.
-		 *
-		 * @default false
-		 */
-		hideLabelFromVision?: boolean;
-		/**
-		 * Determines if segments should be rendered with equal widths.
-		 *
-		 * @default false
-		 */
-		isAdaptiveWidth?: boolean;
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-		/**
-		 * Borderless style that may be preferred in some contexts.
-		 *
-		 * @default false
-		 */
-		__experimentalIsBorderless?: boolean;
-		/**
-		 * Callback when a segment is selected.
-		 */
-		onChange?: ( value: ReactText | undefined ) => void;
-		/**
-		 * The value of `ToggleGroupControl`
-		 */
-		value?: ReactText;
-		/**
-		 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
-		 * `ToggleGroupControlOptionIcon` components.
-		 */
-		children: ReactNode;
-		/**
-		 * The size variant of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: 'default' | '__unstable-large';
-	};
+export type ToggleGroupControlProps = Pick<
+	BaseControlProps,
+	'help' | '__nextHasNoMarginBottom'
+> & {
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Determines if segments should be rendered with equal widths.
+	 *
+	 * @default false
+	 */
+	isAdaptiveWidth?: boolean;
+	/**
+	 * Renders `ToggleGroupControl` as a (CSS) block element.
+	 *
+	 * @default false
+	 */
+	isBlock?: boolean;
+	/**
+	 * Whether an option can be deselected by clicking it again.
+	 *
+	 * @default false
+	 */
+	isDeselectable?: boolean;
+	/**
+	 * Callback when a segment is selected.
+	 */
+	onChange?: ( value: ReactText | undefined ) => void;
+	/**
+	 * The selected value.
+	 */
+	value?: ReactText;
+	/**
+	 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
+	 * `ToggleGroupControlOptionIcon` components.
+	 */
+	children: ReactNode;
+	/**
+	 * The size variant of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | '__unstable-large';
+};
 
-export type ToggleGroupControlContextProps = RadioStateReturn &
-	Pick< ToggleGroupControlProps, 'size' > & {
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-	};
+type ToggleGroupControlAsRadioContext = {
+	isDeselectable?: false;
+} & RadioStateReturn;
+
+type ToggleGroupControlAsButtonContext = { isDeselectable: true } & Pick<
+	RadioStateReturn,
+	'state' | 'setState'
+>;
+
+export type ToggleGroupControlContextProps = Pick<
+	ToggleGroupControlProps,
+	'isBlock' | 'size'
+> & {
+	baseId: string;
+} & ( ToggleGroupControlAsRadioContext | ToggleGroupControlAsButtonContext );
 
 export type ToggleGroupControlBackdropProps = {
 	containerRef: MutableRefObject< HTMLElement | undefined >;
@@ -142,3 +146,11 @@ export type ToggleGroupControlBackdropProps = {
 	isAdaptiveWidth?: boolean;
 	state?: any;
 };
+
+export type ToggleGroupControlMainControlProps = Pick<
+	ToggleGroupControlProps,
+	'children' | 'isAdaptiveWidth' | 'label' | 'size'
+> & {
+	onChange: ( value: ReactText | undefined ) => void;
+	value?: ReactText;
+};

package/src/toolbar-dropdown-menu/index.js

@@ -26,7 +26,7 @@ function ToolbarDropdownMenu( props, ref ) {
 				<DropdownMenu
 					{ ...props }
 					popoverProps={ {
-						isAlternate: true,
+						variant: 'toolbar',
 						...props.popoverProps,
 					} }
 					toggleProps={ toolbarItemProps }

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

@@ -497,7 +497,6 @@ export const WithConditionallyRenderedControl = () => {
 export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {

package/src/tools-panel/stories/tools-panel-with-item-group-slot.js

@@ -203,7 +203,6 @@ export const ToolsPanelWithItemGroupSlot = () => {
 };
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {

package/src/tree-grid/test/__snapshots__/cell.js.snap

@@ -1,25 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
-<div
-  role="application"
->
-  <table
-    role="treegrid"
+<div>
+  <div
+    role="application"
   >
-    <tbody>
-      <tr>
-        <td
-          role="gridcell"
-        >
-          <button
-            class="my-button"
+    <table
+      role="treegrid"
+    >
+      <tbody>
+        <tr>
+          <td
+            role="gridcell"
           >
-            Click Me!
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+            <button
+              class="my-button"
+            >
+              Click Me!
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
 `;

package/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap

@@ -2,6 +2,8 @@
 
 exports[`RovingTabIndex does not render any elements other than its children 1`] = `
 <div>
-  child element
+  <div>
+    child element
+  </div>
 </div>
 `;

package/src/tree-grid/test/__snapshots__/row.js.snap

@@ -1,36 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
-<table>
-  <tbody>
-    <tr
-      aria-level="1"
-      aria-posinset="1"
-      aria-setsize="1"
-      class="my-row"
-      role="row"
-    >
-      <td>
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        class="my-row"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;
 
 exports[`TreeGridRow renders a tr with support for level, positionInSet and setSize props 1`] = `
-<table>
-  <tbody>
-    <tr
-      aria-level="1"
-      aria-posinset="1"
-      aria-setsize="1"
-      role="row"
-    >
-      <td>
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

package/src/tree-grid/test/cell.js

@@ -49,6 +49,6 @@ describe( 'TreeGridCell', () => {
 			</TreeGrid>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/tree-grid/test/roving-tab-index.js

@@ -16,6 +16,6 @@ describe( 'RovingTabIndex', () => {
 			</RovingTabIndex>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/tree-grid/test/row.js

@@ -20,7 +20,7 @@ describe( 'TreeGridRow', () => {
 			</table>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'forwards other props to the rendered tr element', () => {
@@ -39,6 +39,6 @@ describe( 'TreeGridRow', () => {
 			</table>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -10,34 +10,21 @@ import {
 	createContext,
 	useContext,
 	useRef,
-	useEffect,
 	useMemo,
 	memo,
 } from '@wordpress/element';
 import warn from '@wordpress/warning';
 
+/**
+ * Internal dependencies
+ */
+import { useUpdateEffect } from '../../utils';
+
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )
 );
 export const useComponentsContext = () => useContext( ComponentsContext );
 
-/**
- * Runs an effect only on update (i.e., ignores the first render)
- *
- * @param {import('react').EffectCallback} effect
- * @param {import('react').DependencyList} deps
- */
-function useUpdateEffect( effect, deps ) {
-	const mounted = useRef( false );
-	useEffect( () => {
-		if ( mounted.current ) {
-			return effect();
-		}
-		mounted.current = true;
-		return undefined;
-	}, deps );
-}
-
 /**
  * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
  *

package/src/ui/context/test/__snapshots__/context-system-provider.js.snap

@@ -1,29 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render _override props 1`] = `
-<div
-  class="components-component test-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component test-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render context props 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render correctly 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
-/>
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  />
+</div>
 `;

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

@@ -30,7 +30,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render context props', () => {
@@ -60,7 +60,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' );
 	} );
 
@@ -98,7 +98,7 @@ describe( 'props', () => {
 			</>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 
 		const el = container.querySelector( '.test-component' );
 

package/src/ui/control-group/test/__snapshots__/index.js.snap

@@ -28,22 +28,24 @@ exports[`props should render correctly 1`] = `
   z-index: 1;
 }
 
-<div
-  class="components-flex components-control-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlGroup"
->
-  <button
-    class="components-button"
-    type="button"
+<div>
+  <div
+    class="components-flex components-control-group emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlGroup"
   >
-    Code is Poetry
-  </button>
-  <button
-    class="components-button"
-    type="button"
-  >
-    WordPress.org
-  </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      Code is Poetry
+    </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      WordPress.org
+    </button>
+  </div>
 </div>
 `;

package/src/ui/control-group/test/index.js

@@ -17,6 +17,6 @@ describe( 'props', () => {
 				<Button>WordPress.org</Button>
 			</ControlGroup>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/ui/control-label/test/__snapshots__/index.js.snap

@@ -37,13 +37,15 @@ exports[`props should render correctly 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render no truncate 1`] = `
@@ -79,13 +81,15 @@ exports[`props should render no truncate 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render size 1`] = `
@@ -125,11 +129,13 @@ exports[`props should render size 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;

package/src/ui/control-label/test/index.js

@@ -12,7 +12,7 @@ describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <ControlLabel>Label</ControlLabel> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render htmlFor', () => {
@@ -28,7 +28,7 @@ describe( 'props', () => {
 			<ControlLabel size="small">Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render no truncate', () => {
@@ -36,6 +36,6 @@ describe( 'props', () => {
 			<ControlLabel truncate={ false }>Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );