@wordpress/components 29.10.0 → 29.11.0

package/build-style/style.css

@@ -3335,7 +3335,7 @@ body.lockscroll {
 
 .components-accessible-toolbar {
   display: inline-flex;
-  border: 1px solid #1e1e1e;
+  border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
   border-radius: 2px;
   flex-shrink: 0;
 }
@@ -3402,7 +3402,7 @@ body.lockscroll {
 }
 .components-accessible-toolbar .components-button.is-pressed::before,
 .components-toolbar .components-button.is-pressed::before {
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-accessible-toolbar .components-button:focus::before,
 .components-toolbar .components-button:focus::before {
@@ -3446,8 +3446,8 @@ body.lockscroll {
 
 .components-toolbar-group {
   min-height: 48px;
-  border-right: 1px solid #1e1e1e;
-  background-color: #fff;
+  border-right: 1px solid var(--wp-components-color-foreground, #1e1e1e);
+  background-color: var(--wp-components-color-background, #fff);
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
@@ -3479,8 +3479,8 @@ body.lockscroll {
 .components-toolbar {
   min-height: 48px;
   margin: 0;
-  border: 1px solid #1e1e1e;
-  background-color: #fff;
+  border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
+  background-color: var(--wp-components-color-background, #fff);
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;

package/build-types/drop-zone/index.d.ts

@@ -26,6 +26,6 @@ import type { WordPressComponentProps } from '../context';
  * }
  * ```
  */
-export declare function DropZoneComponent({ className, label, onFilesDrop, onHTMLDrop, onDrop, isEligible, ...restProps }: WordPressComponentProps<DropZoneProps, 'div', false>): import("react").JSX.Element;
+export declare function DropZoneComponent({ className, icon, label, onFilesDrop, onHTMLDrop, onDrop, isEligible, ...restProps }: WordPressComponentProps<DropZoneProps, 'div', false>): import("react").JSX.Element;
 export default DropZoneComponent;
 //# sourceMappingURL=index.d.ts.map

package/build-types/drop-zone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,UAAuB,EACvB,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BAqFxD;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,IAAa,EACb,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,UAAuB,EACvB,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BAqFxD;AAED,eAAe,iBAAiB,CAAC"}

package/build-types/drop-zone/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/drop-zone/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AACtD;;GAEG;AACH,OAAO,QAAQ,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAShC,CAAC;AACF,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,OAAO,0SAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/drop-zone/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,QAAQ,MAAM,IAAI,CAAC;AAI1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAgBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,OAAO,0SAAsB,CAAC"}

package/build-types/drop-zone/types.d.ts

@@ -4,6 +4,12 @@ export type DropZoneProps = {
      * A CSS `class` to give to the wrapper element.
      */
     className?: string;
+    /**
+     * An icon to be shown within the drop zone area.
+     *
+     * @default "upload"
+     */
+    icon?: JSX.Element;
     /**
      * A string to be shown within the drop zone area.
      *

package/build-types/drop-zone/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/drop-zone/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAE,KAAK,EAAE,SAAS,KAAM,IAAI,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IACtC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAE,YAAY,EAAE,YAAY,KAAM,OAAO,CAAC;CACvD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/drop-zone/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAE,KAAK,EAAE,SAAS,KAAM,IAAI,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IACtC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAE,YAAY,EAAE,YAAY,KAAM,OAAO,CAAC;CACvD,CAAC"}

package/build-types/form-token-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form-token-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAC;AAa9D;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,mBAAmB,+BA+sBzD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form-token-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAC;AAa9D;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,mBAAmB,+BAktBzD;AAED,eAAe,cAAc,CAAC"}

package/build-types/form-token-field/suggestions-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestions-list.d.ts","sourceRoot":"","sources":["../../src/form-token-field/suggestions-list.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAOpD,wBAAgB,eAAe,CAC9B,CAAC,SAAS,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EACtD,EACF,aAAa,EACb,cAAc,EACd,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,GACxB,EAAE,oBAAoB,CAAE,CAAC,CAAE,+BAoI3B;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"suggestions-list.d.ts","sourceRoot":"","sources":["../../src/form-token-field/suggestions-list.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAOpD,wBAAgB,eAAe,CAC9B,CAAC,SAAS,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EACtD,EACF,aAAa,EACb,cAAc,EACd,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,GACxB,EAAE,oBAAoB,CAAE,CAAC,CAAE,+BAgI3B;AAED,eAAe,eAAe,CAAC"}

package/build-types/input-control/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../src/input-control/input-field.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA4M/C,QAAA,MAAM,kBAAkB,yRAA2B,CAAC;AAEpD,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../src/input-control/input-field.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA2L/C,QAAA,MAAM,kBAAkB,yRAA2B,CAAC;AAEpD,eAAe,kBAAkB,CAAC"}

package/build-types/private-apis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,WAAW,IAAK,CAAC"}
+{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,WAAW,IAAK,CAAC"}

package/build-types/utils/strings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,mBAAmB,UAAY,MAAM,KAAI,MAIrD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAE,GAAG,EAAE,OAAO,UActC;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAE,MAAM,EAAE,MAAM,GAAI,MAAM,CAErD"}
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,mBAAmB,UAAY,MAAM,KAAI,MAKrD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAE,GAAG,EAAE,OAAO,UActC;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAE,MAAM,EAAE,MAAM,GAAI,MAAM,CAErD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.10.0",
+	"version": "29.11.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.24.0",
-		"@wordpress/compose": "^7.24.0",
-		"@wordpress/date": "^5.24.0",
-		"@wordpress/deprecated": "^4.24.0",
-		"@wordpress/dom": "^4.24.0",
-		"@wordpress/element": "^6.24.0",
-		"@wordpress/escape-html": "^3.24.0",
-		"@wordpress/hooks": "^4.24.0",
-		"@wordpress/html-entities": "^4.24.0",
-		"@wordpress/i18n": "^5.24.0",
-		"@wordpress/icons": "^10.24.0",
-		"@wordpress/is-shallow-equal": "^5.24.0",
-		"@wordpress/keycodes": "^4.24.0",
-		"@wordpress/primitives": "^4.24.0",
-		"@wordpress/private-apis": "^1.24.0",
-		"@wordpress/rich-text": "^7.24.0",
-		"@wordpress/warning": "^3.24.0",
+		"@wordpress/a11y": "^4.25.0",
+		"@wordpress/compose": "^7.25.0",
+		"@wordpress/date": "^5.25.0",
+		"@wordpress/deprecated": "^4.25.0",
+		"@wordpress/dom": "^4.25.0",
+		"@wordpress/element": "^6.25.0",
+		"@wordpress/escape-html": "^3.25.0",
+		"@wordpress/hooks": "^4.25.0",
+		"@wordpress/html-entities": "^4.25.0",
+		"@wordpress/i18n": "^5.25.0",
+		"@wordpress/icons": "^10.25.0",
+		"@wordpress/is-shallow-equal": "^5.25.0",
+		"@wordpress/keycodes": "^4.25.0",
+		"@wordpress/primitives": "^4.25.0",
+		"@wordpress/private-apis": "^1.25.0",
+		"@wordpress/rich-text": "^7.25.0",
+		"@wordpress/warning": "^3.25.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
+	"gitHead": "d1acd76ffff33ab01f0a948d2f51e5e45c95158d"
 }

package/src/drop-zone/index.tsx

@@ -43,6 +43,7 @@ import type { WordPressComponentProps } from '../context';
  */
 export function DropZoneComponent( {
 	className,
+	icon = upload,
 	label,
 	onFilesDrop,
 	onHTMLDrop,
@@ -124,7 +125,7 @@ export function DropZoneComponent( {
 			<div className="components-drop-zone__content">
 				<div className="components-drop-zone__content-inner">
 					<Icon
-						icon={ upload }
+						icon={ icon }
 						className="components-drop-zone__content-icon"
 					/>
 					<span className="components-drop-zone__content-text">

package/src/drop-zone/stories/index.story.tsx

@@ -2,15 +2,30 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { upload, media } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import DropZone from '..';
 
+const ICONS = { upload, media };
+
 const meta: Meta< typeof DropZone > = {
 	component: DropZone,
 	id: 'components-dropzone',
 	title: 'Components/Selection & Input/File Upload/DropZone',
+	argTypes: {
+		icon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

package/src/drop-zone/types.ts

@@ -5,6 +5,12 @@ export type DropZoneProps = {
 	 * A CSS `class` to give to the wrapper element.
 	 */
 	className?: string;
+	/**
+	 * An icon to be shown within the drop zone area.
+	 *
+	 * @default "upload"
+	 */
+	icon?: JSX.Element;
 	/**
 	 * A string to be shown within the drop zone area.
 	 *

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -53,7 +53,7 @@ export const MediaContainer = styled.div`
 		max-width: 100%;
 		pointer-events: none;
 		user-select: none;
-		width: auto;
+		width: 100%;
 	}
 `;
 

package/src/form-token-field/index.tsx

@@ -513,10 +513,13 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				( suggestion ) => ! normalizedValue.includes( suggestion )
 			);
 		} else {
-			match = match.toLocaleLowerCase();
+			match = match.normalize( 'NFKC' ).toLocaleLowerCase();
 
 			_suggestions.forEach( ( suggestion ) => {
-				const index = suggestion.toLocaleLowerCase().indexOf( match );
+				const index = suggestion
+					.normalize( 'NFKC' )
+					.toLocaleLowerCase()
+					.indexOf( match );
 				if ( normalizedValue.indexOf( suggestion ) === -1 ) {
 					if ( index === 0 ) {
 						startsWithMatch.push( suggestion );

package/src/form-token-field/suggestions-list.tsx

@@ -37,7 +37,6 @@ export function SuggestionsList<
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
-			let rafId: number | undefined;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
@@ -49,12 +48,6 @@ export function SuggestionsList<
 					inline: 'nearest',
 				} );
 			}
-
-			return () => {
-				if ( rafId !== undefined ) {
-					cancelAnimationFrame( rafId );
-				}
-			};
 		},
 		[ selectedIndex, scrollIntoView ]
 	);
@@ -72,13 +65,16 @@ export function SuggestionsList<
 	};
 
 	const computeSuggestionMatch = ( suggestion: T ) => {
-		const matchText = displayTransform( match ).toLocaleLowerCase();
+		const matchText = displayTransform( match )
+			.normalize( 'NFKC' )
+			.toLocaleLowerCase();
 		if ( matchText.length === 0 ) {
 			return null;
 		}
 
 		const transformedSuggestion = displayTransform( suggestion );
 		const indexOfMatch = transformedSuggestion
+			.normalize( 'NFKC' )
 			.toLocaleLowerCase()
 			.indexOf( matchText );
 

package/src/form-token-field/test/index.tsx

@@ -1275,6 +1275,45 @@ describe( 'FormTokenField', () => {
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 		} );
 
+		it( 'should match suggestions with half-width and full-width characters', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [
+				// Half-width characters
+				'WordPress',
+				'Gutenberg',
+				// Full-width characters
+				'ＷｏｒｄＰｒｅｓｓ',
+				'Ｇｕｔｅｎｂｅｒｇ',
+				// Mixed characters
+				'WordＰｒｅｓｓ',
+				'Guteｎｂｅｒｇ',
+			];
+
+			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Search with half-width characters.
+			await user.type( input, 'rdp' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'WordPress',
+				'ＷｏｒｄＰｒｅｓｓ',
+				'WordＰｒｅｓｓ',
+			] );
+
+			// Search with full-width characters.
+			await user.clear( input );
+			await user.type( input, 'ｔｅｎ' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Gutenberg',
+				'Ｇｕｔｅｎｂｅｒｇ',
+				'Guteｎｂｅｒｇ',
+			] );
+		} );
+
 		it( 'should re-render if suggestions change', async () => {
 			const user = userEvent.setup();
 

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

@@ -9,7 +9,6 @@ import type {
 	PointerEvent,
 	FocusEvent,
 	ForwardedRef,
-	MouseEvent,
 } from 'react';
 
 /**
@@ -187,22 +186,6 @@ function InputField(
 	);
 
 	const dragProps = isDragEnabled ? dragGestureProps() : {};
-	/*
-	 * Works around the odd UA (e.g. Firefox) that does not focus inputs of
-	 * type=number when their spinner arrows are pressed.
-	 */
-	let handleOnMouseDown;
-	if ( type === 'number' ) {
-		handleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {
-			props.onMouseDown?.( event );
-			if (
-				event.currentTarget !==
-				event.currentTarget.ownerDocument.activeElement
-			) {
-				event.currentTarget.focus();
-			}
-		};
-	}
 
 	return (
 		<Input
@@ -216,7 +199,6 @@ function InputField(
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
 			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
-			onMouseDown={ handleOnMouseDown }
 			ref={ ref }
 			inputSize={ size }
 			// Fallback to `''` to avoid "uncontrolled to controlled" warning.

package/src/input-control/test/index.js

@@ -72,23 +72,6 @@ describe( 'InputControl', () => {
 		} );
 	} );
 
-	describe( 'Ensurance of focus for number inputs', () => {
-		it( 'should focus its input on mousedown events', async () => {
-			const user = await userEvent.setup();
-			const spy = jest.fn();
-			render( <InputControl type="number" onFocus={ spy } /> );
-			const target = getInput();
-
-			// Hovers the input and presses (without releasing) primary button.
-			await user.pointer( [
-				{ target },
-				{ keys: '[MouseLeft]', target },
-			] );
-
-			expect( spy ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-
 	describe( 'Value', () => {
 		it( 'should update value onChange', async () => {
 			const user = await userEvent.setup();

package/src/mobile/utils/get-px-from-css-unit.native.js

@@ -116,7 +116,7 @@ function isMathExpression( cssUnit ) {
  * Evaluates the math expression and return a px value.
  *
  * @param {string} cssUnit the cssUnit value being evaluated.
- * @return {string} return a converfted value to px.
+ * @return {string} return a converted value to px.
  */
 function evalMathExpression( cssUnit ) {
 	let errorFound = false;

package/src/private-apis.ts

@@ -6,7 +6,8 @@ import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import { Tabs } from './tabs';
-import { kebabCase } from './utils/strings';
+import { kebabCase, normalizeTextString } from './utils/strings';
+import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 
@@ -18,5 +19,7 @@ lock( privateApis, {
 	Theme,
 	Menu,
 	kebabCase,
+	withIgnoreIMEEvents,
 	Badge,
+	normalizeTextString,
 } );

package/src/toolbar/toolbar/style.scss

@@ -1,6 +1,6 @@
 .components-accessible-toolbar {
 	display: inline-flex;
-	border: $border-width solid $gray-900;
+	border: $border-width solid $components-color-foreground;
 	border-radius: $radius-small;
 	flex-shrink: 0;
 
@@ -14,13 +14,11 @@
 		& > .components-toolbar-group {
 			border-right: none;
 		}
-
 	}
 }
 
 .components-accessible-toolbar,
 .components-toolbar {
-
 	&[aria-orientation="vertical"] {
 		display: flex;
 		flex-direction: column;
@@ -56,7 +54,7 @@
 			z-index: -1;
 
 			// Animate in.
-			@media not (prefers-reduced-motion) {
+			@media not ( prefers-reduced-motion ) {
 				animation: components-button__appear-animation 0.1s ease;
 				animation-fill-mode: forwards;
 			}
@@ -79,7 +77,7 @@
 			}
 
 			&::before {
-				background: $gray-900;
+				background: $components-color-foreground;
 			}
 		}
 
@@ -99,7 +97,6 @@
 	}
 }
 
-
 @keyframes components-button__appear-animation {
 	from {
 		transform: scaleY(0);

package/src/toolbar/toolbar-group/style.scss

@@ -1,7 +1,7 @@
 .components-toolbar-group {
 	min-height: $block-toolbar-height;
-	border-right: $border-width solid $gray-900;
-	background-color: $white;
+	border-right: $border-width solid $components-color-foreground;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
@@ -41,8 +41,8 @@
 .components-toolbar {
 	min-height: $block-toolbar-height;
 	margin: 0;
-	border: $border-width solid $gray-900;
-	background-color: $white;
+	border: $border-width solid $components-color-foreground;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;

package/src/utils/strings.ts

@@ -20,6 +20,7 @@ const ALL_UNICODE_DASH_CHARACTERS = new RegExp(
 
 export const normalizeTextString = ( value: string ): string => {
 	return removeAccents( value )
+		.normalize( 'NFKC' )
 		.toLocaleLowerCase()
 		.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );
 };

package/src/utils/test/strings.js

@@ -169,4 +169,15 @@ describe( 'normalizeTextString', () => {
 			'-'.repeat( dashCharacters.length )
 		);
 	} );
+
+	it( 'should normalize unicode to standard characters', () => {
+		expect( normalizeTextString( '①' ) ).toBe( '1' );
+		expect( normalizeTextString( 'Ⅸ' ) ).toBe( 'ix' );
+		expect( normalizeTextString( 'MC²' ) ).toBe( 'mc2' );
+		expect( normalizeTextString( 'ＰｌａｙＳｔａｔｉｏｎ　２' ) ).toBe(
+			'playstation 2'
+		);
+		expect( normalizeTextString( 'ＡＢＣ' ) ).toBe( 'abc' );
+		expect( normalizeTextString( 'Amélie' ) ).toBe( 'amelie' );
+	} );
 } );