@wordpress/components 21.3.0 → 22.1.0

package/src/h-stack/test/__snapshots__/index.tsx.snap

@@ -25,17 +25,19 @@ exports[`props should render alignment 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
-  <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -63,17 +65,19 @@ exports[`props should render correctly 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -101,16 +105,18 @@ exports[`props should render spacing 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;

package/src/h-stack/test/index.tsx

@@ -17,7 +17,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render alignment', () => {
@@ -27,7 +27,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render spacing', () => {
@@ -37,6 +37,6 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/higher-order/navigate-regions/index.js

@@ -15,6 +15,10 @@ const defaultShortcuts = {
 			modifier: 'ctrlShift',
 			character: '`',
 		},
+		{
+			modifier: 'ctrlShift',
+			character: '~',
+		},
 		{
 			modifier: 'access',
 			character: 'p',

package/src/higher-order/navigate-regions/style.scss

@@ -3,30 +3,82 @@
 	position: relative;
 }
 
-.is-focusing-regions [role="region"] {
-	// For browsers that don't support outline-offset (IE11).
-	&:focus::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		pointer-events: none;
-		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions {
+	[role="region"]:focus {
+		outline: 4px solid $components-color-accent;
+		outline-offset: -4px;
+
+		.interface-navigable-region__stacker {
+			position: relative;
+			z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
+		}
+	}
+
+	// Fixes for edge cases.
+	// Some of the regions are currently used for layout purposes as 'interface skeleton'
+	// items. When they're absolutely positioned or when they contain absolutely
+	// positioned elements, they may have no size therefore the focus style is not
+	// visible. For the future, it's important to take into consideration that
+	// the navigable regions should always have a computed size. For now, we can
+	// fix some edge cases but these CSS rules should be later removed in favor of
+	// a more abstracted approach to make the navigabel regions focus style work
+	// regardles of the CSS used on other components.
+
+	// Header top bar when Distraction free mode is on.
+	&.is-distraction-free .interface-interface-skeleton__header {
+		.interface-navigable-region__stacker,
+		.edit-post-header {
+			outline: inherit;
+			outline-offset: inherit;
+		}
 	}
 
-	@supports ( outline-offset: 1px ) {
-		&:focus::after {
-			content: none;
+	// Sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__sidebar {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-sidebar-panel {
+			outline: inherit;
+			outline-offset: inherit;
 		}
+	}
 
-		&:focus {
-			outline-style: solid;
-			outline-color: var(--wp-admin-theme-color);
-			outline-width: 4px;
-			outline-offset: -4px;
+	// Publish sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__actions {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-publish-panel {
+			outline: inherit;
+			outline-offset: inherit;
 		}
 	}
+
+	// Publish sidebar.
+	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+		outline: 4px solid $components-color-accent;
+		outline-offset: -4px;
+	}
+
+	// Edit site Navigation Drawer.
+	.interface-interface-skeleton__drawer {
+		z-index: z-index(".edit-site-navigation-toggle");
+
+		.interface-navigable-region__stacker,
+		.edit-site-navigation-toggle {
+			outline: inherit;
+			outline-offset: inherit;
+		}
+
+		.edit-site-navigation-toggle.is-open {
+			outline: none;
+		}
+
+		.edit-site-navigation-toggle__button {
+			z-index: -1;
+		}
+	}
+}
+
+// Fixes for edge cases.
+// Edit site Drawer.
+.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+	height: 100%;
 }

package/src/higher-order/with-filters/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -64,10 +59,10 @@ export default function withFilters( hookName ) {
 			}
 
 			componentWillUnmount() {
-				FilteredComponentRenderer.instances = without(
-					FilteredComponentRenderer.instances,
-					this
-				);
+				FilteredComponentRenderer.instances =
+					FilteredComponentRenderer.instances.filter(
+						( instance ) => instance !== this
+					);
 
 				// If this was the last of the mounted components filtered on
 				// this hook, remove the hook handler.

package/src/higher-order/with-notices/test/index.js

@@ -49,7 +49,7 @@ const BaseComponent = ( { noticeOperations, noticeUI, notifications } ) => {
 				noticeOperations.createNotice( item )
 			);
 		}
-	}, [] );
+	}, [ noticeOperations, notifications ] );
 	return (
 		<div>
 			{ noticeUI }

package/src/icon/index.tsx

@@ -33,7 +33,7 @@ interface BaseProps< P > {
 	/**
 	 * The size (width and height) of the icon.
 	 *
-	 * @default 24
+	 * @default `20` when a Dashicon is rendered, `24` for all other icons.
 	 */
 	size?: number;
 }
@@ -48,13 +48,14 @@ export type Props< P > = BaseProps< P > & AdditionalProps< IconType< P > >;
 
 function Icon< P >( {
 	icon = null,
-	size = 24,
+	size = 'string' === typeof icon ? 20 : 24,
 	...additionalProps
 }: Props< P > ) {
 	if ( 'string' === typeof icon ) {
 		return (
 			<Dashicon
 				icon={ icon }
+				size={ size }
 				{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }
 			/>
 		);

package/src/icon/test/index.js

@@ -32,6 +32,16 @@ describe( 'Icon', () => {
 		);
 	} );
 
+	it( 'renders a dashicon with custom size', () => {
+		render(
+			<Icon data-testid={ testId } icon="format-image" size={ 10 } />
+		);
+
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'width:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'height:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'font-size:10px' );
+	} );
+
 	it( 'renders a function', () => {
 		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );
 

package/src/index.js

@@ -6,6 +6,7 @@ export {
 	Polygon,
 	Rect,
 	G,
+	Line,
 	HorizontalRule,
 	BlockQuotation,
 } from '@wordpress/primitives';
@@ -125,8 +126,9 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { positionToPlacement as __experimentalPopoverPositionToPlacement } from './popover/utils';
 export { default as QueryControls } from './query-controls';
-export { default as __experimentalRadio } from './radio';
+export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';

package/src/input-control/index.tsx

@@ -45,6 +45,7 @@ export function UnforwardedInputControl(
 		onKeyDown = noop,
 		prefix,
 		size = 'default',
+		style,
 		suffix,
 		value,
 		...props
@@ -77,6 +78,7 @@ export function UnforwardedInputControl(
 			labelPosition={ labelPosition }
 			prefix={ prefix }
 			size={ size }
+			style={ style }
 			suffix={ suffix }
 		>
 			<InputField

package/src/input-control/input-base.tsx

@@ -22,7 +22,7 @@ import {
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import { ContextSystemProvider } from '../ui/context';
+import { ContextSystemProvider, WordPressComponentProps } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -31,7 +31,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-// Adapter to map props for the new ui/flex compopnent.
+// Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
 	const props: { direction?: string; gap?: number; justify?: string } = {};
 	switch ( labelPosition ) {
@@ -67,7 +67,7 @@ export function InputBase(
 		size = 'default',
 		suffix,
 		...props
-	}: InputBaseProps,
+	}: WordPressComponentProps< InputBaseProps, 'div' >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );

package/src/input-control/styles/input-control-styles.tsx

@@ -34,6 +34,7 @@ const rootFocusedStyles = ( { isFocused }: RootProps ) => {
 };
 
 export const Root = styled( Flex )< RootProps >`
+	box-sizing: border-box;
 	position: relative;
 	border-radius: 2px;
 	padding-top: 0;

package/src/input-control/types.ts

@@ -4,9 +4,7 @@
 import type {
 	CSSProperties,
 	ReactNode,
-	ChangeEvent,
 	SyntheticEvent,
-	PointerEvent,
 	HTMLInputTypeAttribute,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
@@ -62,10 +60,10 @@ interface BaseProps {
 	size?: Size;
 }
 
-export type InputChangeCallback<
-	E = ChangeEvent< HTMLInputElement > | PointerEvent< HTMLInputElement >,
-	P = {}
-> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
+export type InputChangeCallback< P = {} > = (
+	nextValue: string | undefined,
+	extra: { event: SyntheticEvent } & P
+) => void;
 
 export interface InputFieldProps extends BaseProps {
 	/**
@@ -165,11 +163,6 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * @default false
 	 */
 	disabled?: boolean;
-	/**
-	 * The class name to be added to the wrapper element.
-	 */
-	className?: string;
-	id?: string;
 	/**
 	 * If this property is added, a label will be generated using label property as the content.
 	 */

package/src/isolated-event-container/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef, MouseEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+function stopPropagation( event: MouseEvent ) {
+	event.stopPropagation();
+}
+
+type DivProps = ComponentPropsWithoutRef< 'div' >;
+
+const IsolatedEventContainer = forwardRef< HTMLDivElement, DivProps >(
+	( props, ref ) => {
+		deprecated( 'wp.components.IsolatedEventContainer', {
+			since: '5.7',
+		} );
+
+		// Disable reason: this stops certain events from propagating outside of the component.
+		// - onMouseDown is disabled as this can cause interactions with other DOM elements.
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
+		return <div { ...props } ref={ ref } onMouseDown={ stopPropagation } />;
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
+	}
+);
+
+export default IsolatedEventContainer;

package/src/item-group/stories/index.js

@@ -150,7 +150,7 @@ const ItemWithChevron = ( {
 
 	const itemClassName = useMemo(
 		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className, cx ]
+		[ alwaysVisible, className, cx, appearingChevron ]
 	);
 
 	const chevronIconClassName = useMemo(

package/src/item-group/styles.ts

@@ -13,7 +13,7 @@ export const unstyledButton = css`
 	border: 1px solid transparent;
 	cursor: pointer;
 	background: none;
-	text-align: left;
+	text-align: start;
 
 	&:hover {
 		color: ${ COLORS.ui.theme };