@wordpress/components 35.0.0 → 35.0.1

package/src/combobox-control/README.md

@@ -91,7 +91,7 @@ Function called when the control's search input value changes. The argument cont
 
 #### onChange
 
-Function called with the selected value changes.
+Function called when the selected value changes.
 
 -   Type: `( value: string | null | undefined ) => void`
 -   Required: No

package/src/confirm-dialog/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>
 
-`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+`ConfirmDialog` is built on top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
 
 The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
 

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { MouseEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -21,6 +20,7 @@ import type {
 	CustomGradientBarReducerAction,
 	CustomGradientBarIdleState,
 } from '../types';
+import type { MouseEventHandler } from 'react';
 
 const customGradientBarReducer = (
 	state: CustomGradientBarReducerState,

package/src/flex/flex/README.md

@@ -4,7 +4,7 @@
 
 ## Usage
 
-`Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
+`Flex` is used with any of its two sub-components, `FlexItem` and `FlexBlock`.
 
 ```jsx
 import { Flex, FlexBlock, FlexItem } from '@wordpress/components';

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/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/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/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/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": []
-}