@wordpress/components 34.0.0 → 35.0.1

package/src/navigable-container/container.tsx

@@ -6,7 +6,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useRef, useEffect, useCallback } from '@wordpress/element';
+import { forwardRef, useRef, useEffect } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 
@@ -29,6 +29,21 @@ function cycleValue( value: number, total: number, offset: number ) {
 	return nextValue;
 }
 
+function getFocusableContext(
+	container: HTMLElement,
+	target: Element,
+	tabbableOnly: boolean
+) {
+	const finder = tabbableOnly ? focus.tabbable : focus.focusable;
+	const focusables = finder.find( container );
+
+	const index = focusables.indexOf( target as HTMLElement );
+	if ( index > -1 ) {
+		return { index, target, focusables };
+	}
+	return null;
+}
+
 function UnforwardedNavigableContainer(
 	{
 		children,
@@ -44,33 +59,6 @@ function UnforwardedNavigableContainer(
 ) {
 	const containerRef = useRef< HTMLDivElement | null >( null );
 
-	const getFocusableIndex = useCallback(
-		( focusables: Element[], target: Element ) => {
-			return focusables.indexOf( target );
-		},
-		[]
-	);
-
-	const getFocusableContext = useCallback(
-		( target: Element ) => {
-			if ( ! containerRef.current ) {
-				return null;
-			}
-
-			const finder = onlyBrowserTabstops
-				? focus.tabbable
-				: focus.focusable;
-			const focusables = finder.find( containerRef.current );
-
-			const index = getFocusableIndex( focusables, target );
-			if ( index > -1 && target ) {
-				return { index, target, focusables };
-			}
-			return null;
-		},
-		[ onlyBrowserTabstops, getFocusableIndex ]
-	);
-
 	useEffect( () => {
 		const container = containerRef.current;
 		if ( ! container ) {
@@ -114,7 +102,11 @@ function UnforwardedNavigableContainer(
 				return;
 			}
 
-			const context = getFocusableContext( activeElement );
+			const context = getFocusableContext(
+				container!,
+				activeElement,
+				!! onlyBrowserTabstops
+			);
 			if ( ! context ) {
 				return;
 			}
@@ -151,7 +143,7 @@ function UnforwardedNavigableContainer(
 		stopNavigationEvents,
 		cycle,
 		onNavigate,
-		getFocusableContext,
+		onlyBrowserTabstops,
 	] );
 
 	const mergedRef = useMergeRefs( [ containerRef, ref ] );

package/src/popover/README.md

@@ -128,7 +128,7 @@ Show the popover fullscreen on mobile viewports.
 
 Specifies whether the popover should flip across its axis if there isn't space for it in the normal placement.
 
-When the using a 'top' placement, the popover will switch to a 'bottom' placement. When using a 'left' placement, the popover will switch to a `right' placement.
+When using a 'top' placement, the popover will switch to a 'bottom' placement. When using a 'left' placement, the popover will switch to a 'right' placement.
 
 The popover will retain its alignment of 'start' or 'end' when flipping.
 

package/src/popover/index.tsx

@@ -199,7 +199,7 @@ const UnforwardedPopover = (
 		} );
 	}
 
-	const arrowRef = useRef< HTMLElement >( null );
+	const arrowRef = useRef< HTMLElement | null >( null );
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );

package/src/popover/types.ts

@@ -1,6 +1,6 @@
 import type { Placement } from '@floating-ui/react-dom';
 import type { useFocusOnMount } from '@wordpress/compose';
-import type { RefObject, ReactNode, SyntheticEvent } from 'react';
+import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -12,7 +12,9 @@ type DomRectWithOwnerDocument = DOMRect & {
 
 type PopoverPlacement = Placement | 'overlay';
 
-export type PopoverAnchorRefReference = RefObject< Element | null | undefined >;
+export type PopoverAnchorRefReference = MutableRefObject<
+	Element | null | undefined
+>;
 export type PopoverAnchorRefTopBottom = { top: Element; bottom: Element };
 
 export type VirtualElement = Pick< Element, 'getBoundingClientRect' > & {

package/src/range-control/types.ts

@@ -149,7 +149,7 @@ export type RangeControlProps = Pick<
 		 *
 		 * @default () => void
 		 */
-		onChange?: ( value: number | undefined ) => void;
+		onChange?: ( value?: number ) => void;
 		/**
 		 * Callback for when `RangeControl` input gains focus.
 		 *

package/src/responsive-wrapper/index.tsx

@@ -45,20 +45,16 @@ function ResponsiveWrapper( {
 		aspectRatio = `${ naturalWidth } / ${ naturalHeight }`;
 	}
 
-	const ch = children as React.ReactElement<
-		Pick< React.HTMLAttributes< Element >, 'className' | 'style' >
-	>;
-
 	return (
 		<TagName className="components-responsive-wrapper">
 			<div>
-				{ cloneElement( ch, {
+				{ cloneElement( children, {
 					className: clsx(
 						'components-responsive-wrapper__content',
-						ch.props.className
+						children.props.className
 					),
 					style: {
-						...ch.props.style,
+						...children.props.style,
 						aspectRatio,
 					},
 				} ) }

package/src/scrollable/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`Scrollable` is a layout component that content in a scrollable container.
+`Scrollable` is a layout component that puts content in a scrollable container.
 
 ## Usage
 

package/src/snackbar/README.md

@@ -61,7 +61,7 @@ The icon to render in the snackbar.
 -   Required: No
 -   Default: `null`
 
-#### `listRef`: `RefObject< HTMLDivElement | null >`
+#### `listRef`: `MutableRefObject< HTMLDivElement | null >`
 
 A ref to the list that contains the snackbar.
 

package/src/snackbar/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { RefObject, ReactNode } from 'react';
+import type { MutableRefObject, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ type SnackbarOnlyProps = {
 	/**
 	 * A ref to the list that contains the snackbar.
 	 */
-	listRef?: RefObject< HTMLDivElement | null >;
+	listRef?: MutableRefObject< HTMLDivElement | null >;
 };
 
 export type SnackbarProps = Pick<

package/src/tabs/README.md

@@ -164,7 +164,7 @@ still be accessed via the keyboard when navigating through the tablist.
 
 ##### `render`
 
- - Type: `RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }> | ReactElement<unknown, string | JSXElementConstructor<any>>`
+ - Type: `RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }> | ReactElement<any, string | JSXElementConstructor<any>>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React

package/src/tabs/stories/index.story.tsx

@@ -16,6 +16,7 @@ const meta: Meta< typeof Tabs > = {
 		'Tabs.TabList': Tabs.TabList,
 		'Tabs.Tab': Tabs.Tab,
 		'Tabs.TabPanel': Tabs.TabPanel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Tabs.Context': Tabs.Context,
 	},
 	tags: [ 'status-private' ],

package/src/tabs/tablist.tsx

@@ -133,7 +133,7 @@ export const TabList = forwardRef<
 		<StyledTabList
 			ref={ refs }
 			store={ store }
-			render={ ( props: React.HTMLAttributes< HTMLDivElement > ) => (
+			render={ ( props ) => (
 				<div
 					{ ...props }
 					// Fallback to -1 to prevent browsers from making the tablist

package/src/tooltip/index.tsx

@@ -93,13 +93,7 @@ function UnforwardedTooltip(
 	// `aria-label`
 	// See: https://github.com/WordPress/gutenberg/pull/64066
 	// See: https://github.com/WordPress/gutenberg/pull/65989
-	function addDescribedById( el: React.ReactElement ) {
-		const element = el as React.ReactElement<
-			Pick<
-				React.HTMLAttributes< Element >,
-				'aria-describedby' | 'aria-label'
-			>
-		>;
+	function addDescribedById( element: React.ReactElement ) {
 		return describedById &&
 			mounted &&
 			element.props[ 'aria-describedby' ] === undefined &&

package/src/tooltip/style.scss

@@ -5,7 +5,7 @@
 .components-tooltip {
 	background: $black;
 	font-family: $default-font;
-	border-radius: $radius-small;
+	border-radius: var(--wpds-border-radius-md);
 	color: $gray-100;
 	text-align: center;
 	line-height: 1.4;

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

@@ -34,6 +34,7 @@ describe( 'TreeGridCell', () => {
 				</TreeGridCell>
 			)
 		).toThrow();
+		expect( console ).toHaveErrored();
 	} );
 
 	it( 'uses a child render function to render children', () => {

package/src/tree-grid/test/roving-tab-index-item.tsx

@@ -26,6 +26,7 @@ describe( 'RovingTabIndexItem', () => {
 		expect( () =>
 			render( <RovingTabIndexItem as={ TestButton } /> )
 		).toThrow();
+		expect( console ).toHaveErrored();
 	} );
 
 	it( 'allows another component to be specified as the rendered component using the `as` prop', () => {

package/src/tree-select/README.md

@@ -118,7 +118,7 @@ If this property is added, an option will be added with this label to represent
 
 ### `onChange`
 
- - Type: `((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement, Element>; }) => void) | undefined`
+ - Type: `((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement>; }) => void) | undefined`
  - Required: No
 
 A function that receives the value of the new option that is being selected as input.

package/src/unit-control/utils.ts

@@ -2,227 +2,208 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { WPUnitControlUnit } from './types';
 
-const isWeb = Platform.OS === 'web';
-
 const allUnits: Record< string, WPUnitControlUnit > = {
 	px: {
 		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
+		label: 'px',
 		a11yLabel: __( 'Pixels (px)' ),
 		step: 1,
 	},
 	'%': {
 		value: '%',
-		label: isWeb ? '%' : __( 'Percentage (%)' ),
+		label: '%',
 		a11yLabel: __( 'Percent (%)' ),
 		step: 0.1,
 	},
 	em: {
 		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
+		label: 'em',
 		a11yLabel: _x( 'ems', 'Relative to parent font size (em)' ),
 		step: 0.01,
 	},
 	rem: {
 		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
+		label: 'rem',
 		a11yLabel: _x( 'rems', 'Relative to root font size (rem)' ),
 		step: 0.01,
 	},
 	vw: {
 		value: 'vw',
-		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
+		label: 'vw',
 		a11yLabel: __( 'Viewport width (vw)' ),
 		step: 0.1,
 	},
 	vh: {
 		value: 'vh',
-		label: isWeb ? 'vh' : __( 'Viewport height (vh)' ),
+		label: 'vh',
 		a11yLabel: __( 'Viewport height (vh)' ),
 		step: 0.1,
 	},
 	vmin: {
 		value: 'vmin',
-		label: isWeb ? 'vmin' : __( 'Viewport smallest dimension (vmin)' ),
+		label: 'vmin',
 		a11yLabel: __( 'Viewport smallest dimension (vmin)' ),
 		step: 0.1,
 	},
 	vmax: {
 		value: 'vmax',
-		label: isWeb ? 'vmax' : __( 'Viewport largest dimension (vmax)' ),
+		label: 'vmax',
 		a11yLabel: __( 'Viewport largest dimension (vmax)' ),
 		step: 0.1,
 	},
 	ch: {
 		value: 'ch',
-		label: isWeb ? 'ch' : __( 'Width of the zero (0) character (ch)' ),
+		label: 'ch',
 		a11yLabel: __( 'Width of the zero (0) character (ch)' ),
 		step: 0.01,
 	},
 	ex: {
 		value: 'ex',
-		label: isWeb ? 'ex' : __( 'x-height of the font (ex)' ),
+		label: 'ex',
 		a11yLabel: __( 'x-height of the font (ex)' ),
 		step: 0.01,
 	},
 	cm: {
 		value: 'cm',
-		label: isWeb ? 'cm' : __( 'Centimeters (cm)' ),
+		label: 'cm',
 		a11yLabel: __( 'Centimeters (cm)' ),
 		step: 0.001,
 	},
 	mm: {
 		value: 'mm',
-		label: isWeb ? 'mm' : __( 'Millimeters (mm)' ),
+		label: 'mm',
 		a11yLabel: __( 'Millimeters (mm)' ),
 		step: 0.1,
 	},
 	in: {
 		value: 'in',
-		label: isWeb ? 'in' : __( 'Inches (in)' ),
+		label: 'in',
 		a11yLabel: __( 'Inches (in)' ),
 		step: 0.001,
 	},
 	pc: {
 		value: 'pc',
-		label: isWeb ? 'pc' : __( 'Picas (pc)' ),
+		label: 'pc',
 		a11yLabel: __( 'Picas (pc)' ),
 		step: 1,
 	},
 	pt: {
 		value: 'pt',
-		label: isWeb ? 'pt' : __( 'Points (pt)' ),
+		label: 'pt',
 		a11yLabel: __( 'Points (pt)' ),
 		step: 1,
 	},
 	svw: {
 		value: 'svw',
-		label: isWeb ? 'svw' : __( 'Small viewport width (svw)' ),
+		label: 'svw',
 		a11yLabel: __( 'Small viewport width (svw)' ),
 		step: 0.1,
 	},
 	svh: {
 		value: 'svh',
-		label: isWeb ? 'svh' : __( 'Small viewport height (svh)' ),
+		label: 'svh',
 		a11yLabel: __( 'Small viewport height (svh)' ),
 		step: 0.1,
 	},
 	svi: {
 		value: 'svi',
-		label: isWeb
-			? 'svi'
-			: __( 'Viewport smallest size in the inline direction (svi)' ),
+		label: 'svi',
 		a11yLabel: __( 'Small viewport width or height (svi)' ),
 		step: 0.1,
 	},
 	svb: {
 		value: 'svb',
-		label: isWeb
-			? 'svb'
-			: __( 'Viewport smallest size in the block direction (svb)' ),
+		label: 'svb',
 		a11yLabel: __( 'Small viewport width or height (svb)' ),
 		step: 0.1,
 	},
 	svmin: {
 		value: 'svmin',
-		label: isWeb
-			? 'svmin'
-			: __( 'Small viewport smallest dimension (svmin)' ),
+		label: 'svmin',
 		a11yLabel: __( 'Small viewport smallest dimension (svmin)' ),
 		step: 0.1,
 	},
 	lvw: {
 		value: 'lvw',
-		label: isWeb ? 'lvw' : __( 'Large viewport width (lvw)' ),
+		label: 'lvw',
 		a11yLabel: __( 'Large viewport width (lvw)' ),
 		step: 0.1,
 	},
 	lvh: {
 		value: 'lvh',
-		label: isWeb ? 'lvh' : __( 'Large viewport height (lvh)' ),
+		label: 'lvh',
 		a11yLabel: __( 'Large viewport height (lvh)' ),
 		step: 0.1,
 	},
 	lvi: {
 		value: 'lvi',
-		label: isWeb ? 'lvi' : __( 'Large viewport width or height (lvi)' ),
+		label: 'lvi',
 		a11yLabel: __( 'Large viewport width or height (lvi)' ),
 		step: 0.1,
 	},
 	lvb: {
 		value: 'lvb',
-		label: isWeb ? 'lvb' : __( 'Large viewport width or height (lvb)' ),
+		label: 'lvb',
 		a11yLabel: __( 'Large viewport width or height (lvb)' ),
 		step: 0.1,
 	},
 	lvmin: {
 		value: 'lvmin',
-		label: isWeb
-			? 'lvmin'
-			: __( 'Large viewport smallest dimension (lvmin)' ),
+		label: 'lvmin',
 		a11yLabel: __( 'Large viewport smallest dimension (lvmin)' ),
 		step: 0.1,
 	},
 	dvw: {
 		value: 'dvw',
-		label: isWeb ? 'dvw' : __( 'Dynamic viewport width (dvw)' ),
+		label: 'dvw',
 		a11yLabel: __( 'Dynamic viewport width (dvw)' ),
 		step: 0.1,
 	},
 	dvh: {
 		value: 'dvh',
-		label: isWeb ? 'dvh' : __( 'Dynamic viewport height (dvh)' ),
+		label: 'dvh',
 		a11yLabel: __( 'Dynamic viewport height (dvh)' ),
 		step: 0.1,
 	},
 	dvi: {
 		value: 'dvi',
-		label: isWeb ? 'dvi' : __( 'Dynamic viewport width or height (dvi)' ),
+		label: 'dvi',
 		a11yLabel: __( 'Dynamic viewport width or height (dvi)' ),
 		step: 0.1,
 	},
 	dvb: {
 		value: 'dvb',
-		label: isWeb ? 'dvb' : __( 'Dynamic viewport width or height (dvb)' ),
+		label: 'dvb',
 		a11yLabel: __( 'Dynamic viewport width or height (dvb)' ),
 		step: 0.1,
 	},
 	dvmin: {
 		value: 'dvmin',
-		label: isWeb
-			? 'dvmin'
-			: __( 'Dynamic viewport smallest dimension (dvmin)' ),
+		label: 'dvmin',
 		a11yLabel: __( 'Dynamic viewport smallest dimension (dvmin)' ),
 		step: 0.1,
 	},
 	dvmax: {
 		value: 'dvmax',
-		label: isWeb
-			? 'dvmax'
-			: __( 'Dynamic viewport largest dimension (dvmax)' ),
+		label: 'dvmax',
 		a11yLabel: __( 'Dynamic viewport largest dimension (dvmax)' ),
 		step: 0.1,
 	},
 	svmax: {
 		value: 'svmax',
-		label: isWeb
-			? 'svmax'
-			: __( 'Small viewport largest dimension (svmax)' ),
+		label: 'svmax',
 		a11yLabel: __( 'Small viewport largest dimension (svmax)' ),
 		step: 0.1,
 	},
 	lvmax: {
 		value: 'lvmax',
-		label: isWeb
-			? 'lvmax'
-			: __( 'Large viewport largest dimension (lvmax)' ),
+		label: 'lvmax',
 		a11yLabel: __( 'Large viewport largest dimension (lvmax)' ),
 		step: 0.1,
 	},

package/src/utils/get-node-text.ts

@@ -12,13 +12,7 @@ const getNodeText = ( node: React.ReactNode ): string => {
 				return node.map( getNodeText ).join( '' );
 			}
 			if ( 'props' in node ) {
-				return getNodeText(
-					(
-						node as React.ReactElement<
-							React.PropsWithChildren< unknown >
-						>
-					 ).props.children
-				);
+				return getNodeText( node.props.children );
 			}
 			return '';
 		}

package/src/validated-form-controls/control-with-error.tsx

@@ -60,12 +60,7 @@ type ValidityTarget =
 	| HTMLSelectElement
 	| HTMLTextAreaElement;
 
-function UnforwardedControlWithError<
-	C extends React.ReactElement< {
-		label: React.ReactNode;
-		required: boolean;
-	} >,
->(
+function UnforwardedControlWithError< C extends React.ReactElement >(
 	{
 		required,
 		markWhenOptional,

package/build/mobile/image/constants.cjs

@@ -1,34 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/mobile/image/constants.js
-var constants_exports = {};
-__export(constants_exports, {
-  IMAGE_DEFAULT_FOCAL_POINT: () => IMAGE_DEFAULT_FOCAL_POINT
-});
-module.exports = __toCommonJS(constants_exports);
-var IMAGE_DEFAULT_FOCAL_POINT = {
-  x: 0.5,
-  y: 0.5
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  IMAGE_DEFAULT_FOCAL_POINT
-});
-//# sourceMappingURL=constants.cjs.map

package/build/mobile/image/constants.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/mobile/image/constants.js"],
-  "sourcesContent": ["export const IMAGE_DEFAULT_FOCAL_POINT = {\n  x: 0.5,\n  y: 0.5\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,GAAG;AACL;",
-  "names": []
-}

package/build-module/mobile/image/constants.mjs

@@ -1,9 +0,0 @@
-// packages/components/src/mobile/image/constants.js
-var IMAGE_DEFAULT_FOCAL_POINT = {
-  x: 0.5,
-  y: 0.5
-};
-export {
-  IMAGE_DEFAULT_FOCAL_POINT
-};
-//# sourceMappingURL=constants.mjs.map

package/build-module/mobile/image/constants.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/mobile/image/constants.js"],
-  "sourcesContent": ["export const IMAGE_DEFAULT_FOCAL_POINT = {\n  x: 0.5,\n  y: 0.5\n};"],
-  "mappings": ";AAAO,IAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,GAAG;AACL;",
-  "names": []
-}