@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.2.0

package/build-types/font-size-picker/types.d.ts

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+export declare type FontSizePickerProps = {
+    /**
+     * If `true`, it will not be possible to choose a custom fontSize. The user
+     * will be forced to pick one of the pre-defined sizes passed in fontSizes.
+     *
+     * @default false
+     */
+    disableCustomFontSizes?: boolean;
+    /**
+     * If no value exists, this prop defines the starting position for the font
+     * size picker slider. Only relevant if `withSlider` is `true`.
+     */
+    fallbackFontSize?: number;
+    /**
+     * An array of font size objects. The object should contain properties size,
+     * name, and slug.
+     */
+    fontSizes?: FontSize[];
+    /**
+     * A function that receives the new font size value.
+     * If onChange is called without any parameter, it should reset the value,
+     * attending to what reset means in that context, e.g., set the font size to
+     * undefined or set the font size a starting value.
+     */
+    onChange?: (value: number | string | undefined) => void;
+    /**
+     * The current font size value.
+     */
+    value?: number | string;
+    /**
+     * If `true`, the UI will contain a slider, instead of a numeric text input
+     * field. If `false`, no slider will be present.
+     *
+     * @default false
+     */
+    withSlider?: boolean;
+    /**
+     * If `true`, a reset button will be displayed alongside the input field
+     * when a custom font size is active. Has no effect when
+     * `disableCustomFontSizes` or `withSlider` is `true`.
+     *
+     * @default true
+     */
+    withReset?: boolean;
+    /**
+     * Start opting into the new margin-free styles that will become the default
+     * in a future version, currently scheduled to be WordPress 6.4. (The prop
+     * can be safely removed once this happens.)
+     *
+     * @default false
+     */
+    __nextHasNoMarginBottom?: boolean;
+    /**
+     * Size of the control.
+     *
+     * @default default
+     */
+    size?: 'default' | '__unstable-large';
+};
+export declare type FontSize = {
+    /**
+     * The property `size` contains a number with the font size value, in `px` or
+     * a string specifying the font size CSS property that should be used eg:
+     * "13px", "1em", or "clamp(12px, 5vw, 100px)".
+     */
+    size: number | string;
+    /**
+     * The `name` property includes a label for that font size e.g.: `Small`.
+     */
+    name?: string;
+    /**
+     * The `slug` property is a string with a unique identifier for the font
+     * size. Used for the class generation process.
+     */
+    slug: string;
+};
+export declare type FontSizeOption = Omit<FontSize, 'size'> & Partial<Pick<FontSize, 'size'>>;
+export declare type FontSizeSelectOption = Pick<FontSizeOption, 'size'> & {
+    key: string;
+    name?: string;
+    __experimentalHint: ReactNode;
+};
+export declare type FontSizeToggleGroupOption = {
+    key: string;
+    value: number | string;
+    label: string;
+    name: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/font-size-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,mBAAmB,GAAG;IACjC;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;CACtC,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACtB;;;;OAIG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,oBAAY,cAAc,GAAG,IAAI,CAAE,QAAQ,EAAE,MAAM,CAAE,GACpD,OAAO,CAAE,IAAI,CAAE,QAAQ,EAAE,MAAM,CAAE,CAAE,CAAC;AAErC,oBAAY,oBAAoB,GAAG,IAAI,CAAE,cAAc,EAAE,MAAM,CAAE,GAAG;IACnE,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,SAAS,CAAC;CAC9B,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb,CAAC"}

package/build-types/font-size-picker/utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Internal dependencies
+ */
+import type { FontSize, FontSizeOption, FontSizeSelectOption, FontSizeToggleGroupOption, FontSizePickerProps } from './types';
+export declare const CUSTOM_FONT_SIZE = "custom";
+/**
+ * Helper util to split a font size to its numeric value
+ * and its `unit`, if exists.
+ *
+ * @param  size Font size.
+ * @return An array with the numeric value and the unit if exists.
+ */
+export declare function splitValueAndUnitFromSize(size: NonNullable<FontSizePickerProps['value']>): string[];
+/**
+ * Some themes use css vars for their font sizes, so until we
+ * have the way of calculating them don't display them.
+ *
+ * @param  value The value that is checked.
+ * @return Whether the value is a simple css value.
+ */
+export declare function isSimpleCssValue(value: NonNullable<FontSizePickerProps['value']>): boolean;
+/**
+ * Return font size options in the proper format depending
+ * on the currently used control (select, toggle group).
+ *
+ * @param  useSelectControl       Whether to use a select control.
+ * @param  optionsArray           Array of available font sizes objects.
+ * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return Array of font sizes in proper format for the used control.
+ */
+export declare function getFontSizeOptions(useSelectControl: boolean, optionsArray: FontSize[], disableCustomFontSizes: boolean): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null;
+/**
+ * Build options for the toggle group options.
+ *
+ * @param  optionsArray An array of font size options.
+ * @param  labelAliases An array of alternative labels.
+ * @return Remapped optionsArray.
+ */
+export declare function getToggleGroupOptions(optionsArray: FontSize[], labelAliases?: string[]): FontSizeToggleGroupOption[];
+export declare function getSelectedOption(fontSizes: FontSize[], value: FontSizePickerProps['value']): FontSizeOption;
+//# sourceMappingURL=utils.d.ts.map

package/build-types/font-size-picker/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,EACnB,MAAM,SAAS,CAAC;AAOjB,eAAO,MAAM,gBAAgB,WAAW,CAAC;AAwBzC;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACxC,IAAI,EAAE,WAAW,CAAE,mBAAmB,CAAE,OAAO,CAAE,CAAE,YAYnD;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,WAAW,CAAE,mBAAmB,CAAE,OAAO,CAAE,CAAE,WAIpD;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CACjC,gBAAgB,EAAE,OAAO,EACzB,YAAY,EAAE,QAAQ,EAAE,EACxB,sBAAsB,EAAE,OAAO,GAC7B,oBAAoB,EAAE,GAAG,yBAAyB,EAAE,GAAG,IAAI,CAO7D;AAoBD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACpC,YAAY,EAAE,QAAQ,EAAE,EACxB,YAAY,GAAE,MAAM,EAAuB,GACzC,yBAAyB,EAAE,CAS7B;AAED,wBAAgB,iBAAiB,CAChC,SAAS,EAAE,QAAQ,EAAE,EACrB,KAAK,EAAE,mBAAmB,CAAE,OAAO,CAAE,GACnC,cAAc,CAQhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"token-input.d.ts","sourceRoot":"","sources":["../../src/form-token-field/token-input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAOvD;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAE,EACjE,GAAG,EAAE,YAAY,CAAE,gBAAgB,CAAE,eAoDrC;AAED,eAAO,MAAM,UAAU,uVAAsC,CAAC;AAE9D,eAAe,UAAU,CAAC"}
+{"version":3,"file":"token-input.d.ts","sourceRoot":"","sources":["../../src/form-token-field/token-input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAe,YAAY,EAAqB,MAAM,OAAO,CAAC;AAO1E;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAE,EACjE,GAAG,EAAE,YAAY,CAAE,gBAAgB,CAAE,eA0ErC;AAED,eAAO,MAAM,UAAU,uVAAsC,CAAC;AAE9D,eAAe,UAAU,CAAC"}

package/build-types/navigator/navigator-screen/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/navigator/navigator-screen/component.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAgBpD;;GAEG;AACH,OAAO,EAGN,uBAAuB,EACvB,MAAM,kBAAkB,CAAC;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AASrD,aAAK,KAAK,GAAG,IAAI,CAChB,uBAAuB,CAAE,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAE,EAC7D,MAAM,WAAW,CACjB,CAAC;AAsIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,wBAAwB,sIAG7B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/navigator/navigator-screen/component.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAgBpD;;GAEG;AACH,OAAO,EAGN,uBAAuB,EACvB,MAAM,kBAAkB,CAAC;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AASrD,aAAK,KAAK,GAAG,IAAI,CAChB,uBAAuB,CAAE,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAE,EAC7D,MAAM,WAAW,CACjB,CAAC;AA6IF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,wBAAwB,sIAG7B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/build-types/slot-fill/bubbles-virtually/slot-fill-context.d.ts

@@ -1,7 +1,7 @@
 export default SlotFillContext;
 declare const SlotFillContext: import("react").Context<{
-    slots: {};
-    fills: {};
+    slots: Map<any, any>;
+    fills: Map<any, any>;
     registerSlot: () => void;
     updateSlot: () => void;
     unregisterSlot: () => void;

package/build-types/slot-fill/bubbles-virtually/slot-fill-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-fill-context.d.ts","sourceRoot":"","sources":["../../../src/slot-fill/bubbles-virtually/slot-fill-context.js"],"names":[],"mappings":";AAOA;;;;;;;;GAaI"}
+{"version":3,"file":"slot-fill-context.d.ts","sourceRoot":"","sources":["../../../src/slot-fill/bubbles-virtually/slot-fill-context.js"],"names":[],"mappings":";AAWA;;;;;;;;GAaI"}

package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-fill-provider.d.ts","sourceRoot":"","sources":["../../../src/slot-fill/bubbles-virtually/slot-fill-provider.js"],"names":[],"mappings":"AA0GA;;gBAOC"}
+{"version":3,"file":"slot-fill-provider.d.ts","sourceRoot":"","sources":["../../../src/slot-fill/bubbles-virtually/slot-fill-provider.js"],"names":[],"mappings":"AAmGA;;gBAOC"}

package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts

@@ -0,0 +1,2 @@
+export default function useSlotFills(name: any): any;
+//# sourceMappingURL=use-slot-fills.d.ts.map

package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-slot-fills.d.ts","sourceRoot":"","sources":["../../../src/slot-fill/bubbles-virtually/use-slot-fills.js"],"names":[],"mappings":"AAgBA,qDAOC"}

package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-slot.d.ts","sourceRoot":"","sources":["../../../src/slot-fill/bubbles-virtually/use-slot.js"],"names":[],"mappings":"AAWA,gDA2CC"}
+{"version":3,"file":"use-slot.d.ts","sourceRoot":"","sources":["../../../src/slot-fill/bubbles-virtually/use-slot.js"],"names":[],"mappings":"AAgBA,gDA2CC"}

package/build-types/slot-fill/index.d.ts

@@ -14,6 +14,7 @@ export function createSlotFill(name: any): {
         __unstableName: any;
     };
 };
+export { default as useSlotFills } from "./bubbles-virtually/use-slot-fills";
 export const Slot: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
 export { useSlot };
 import useSlot from "./bubbles-virtually/use-slot";

package/build-types/slot-fill/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slot-fill/index.js"],"names":[],"mappings":"AAiBA,8CAUC;AAQD;;;gBAQC;AAED;;;;;;;;;;EAYC;AA7BD,iGAKI"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slot-fill/index.js"],"names":[],"mappings":"AAkBA,8CAUC;AAQD;;;gBAQC;AAED;;;;;;;;;;EAYC;;AA7BD,iGAKI"}

package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts

@@ -6,7 +6,6 @@ export declare const LabelView: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const labelBlock: import("@emotion/utils").SerializedStyles;
 export declare const buttonView: import("@emotion/utils").SerializedStyles;
-export declare const buttonActive: import("@emotion/utils").SerializedStyles;
 export declare const ButtonContentView: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -15,4 +14,5 @@ export declare const separatorActive: import("@emotion/utils").SerializedStyles;
 export declare const isIcon: ({ size, }: {
     size: NonNullable<ToggleGroupControlProps['size']>;
 }) => import("@emotion/utils").SerializedStyles;
+export declare const buttonActive: import("@emotion/utils").SerializedStyles;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAgCtB,CAAC;AAEF,eAAO,MAAM,YAAY,2CAKxB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAG7B,CAAC;AAEF,eAAO,MAAM,eAAe,2CAE3B,CAAC;AAEF,eAAO,MAAM,MAAM;UAGZ,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE;+CAYtD,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAgCtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAG7B,CAAC;AAEF,eAAO,MAAM,eAAe,2CAE3B,CAAC;AAEF,eAAO,MAAM,MAAM;UAGZ,YAAa,uBAAuB,CAAE,MAAM,CAAE,CAAE;+CAatD,CAAC;AAEF,eAAO,MAAM,YAAY,2CAMxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "21.1.2-next.4d3b314fd5.0",
+	"version": "21.2.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/date": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/escape-html": "^2.18.1-next.4d3b314fd5.0",
-		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
-		"@wordpress/is-shallow-equal": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/primitives": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/rich-text": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/warning": "^2.18.1-next.4d3b314fd5.0",
+		"@wordpress/a11y": "^3.19.0",
+		"@wordpress/compose": "^5.17.0",
+		"@wordpress/date": "^4.19.0",
+		"@wordpress/deprecated": "^3.19.0",
+		"@wordpress/dom": "^3.19.0",
+		"@wordpress/element": "^4.17.0",
+		"@wordpress/escape-html": "^2.19.0",
+		"@wordpress/hooks": "^3.19.0",
+		"@wordpress/i18n": "^4.19.0",
+		"@wordpress/icons": "^9.10.0",
+		"@wordpress/is-shallow-equal": "^4.19.0",
+		"@wordpress/keycodes": "^3.19.0",
+		"@wordpress/primitives": "^3.17.0",
+		"@wordpress/rich-text": "^5.17.0",
+		"@wordpress/warning": "^2.19.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -69,7 +69,8 @@
 		"reakit": "^1.3.8",
 		"remove-accents": "^0.4.2",
 		"use-lilius": "^2.0.1",
-		"uuid": "^8.3.0"
+		"uuid": "^8.3.0",
+		"valtio": "^1.7.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0",
@@ -78,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
 }

package/src/alignment-matrix-control/test/index.js

@@ -1,91 +1,46 @@
 /**
  * External dependencies
  */
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
+import { render, screen, within } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import AlignmentMatrixControl from '../';
 
-const __windowFocus = window.focus;
-
-beforeAll( () => {
-	window.focus = jest.fn();
-} );
-
-afterAll( () => {
-	window.focus = __windowFocus;
-} );
-
-let container = null;
-
-beforeEach( () => {
-	container = document.createElement( 'div' );
-	document.body.appendChild( container );
-} );
-
-afterEach( () => {
-	unmountComponentAtNode( container );
-	container.remove();
-	container = null;
-} );
-
 const getControl = () => {
-	return container.querySelector( '.component-alignment-matrix-control' );
+	return screen.getByRole( 'grid' );
 };
 
-const getCells = () => {
-	const control = getControl();
-	return control.querySelectorAll( '[role="gridcell"]' );
+const getCell = ( name ) => {
+	return within( getControl() ).getByRole( 'gridcell', { name } );
 };
 
 describe( 'AlignmentMatrixControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			act( () => {
-				render( <AlignmentMatrixControl />, container );
-			} );
-			const control = getControl();
+			render( <AlignmentMatrixControl /> );
 
-			expect( control ).toBeTruthy();
+			expect( getControl() ).toBeInTheDocument();
 		} );
 	} );
 
 	describe( 'Change value', () => {
-		it( 'should change value on cell click', () => {
-			const spy = jest.fn();
+		const alignments = [ 'center left', 'center center', 'bottom center' ];
+
+		it.each( alignments )(
+			'should change value on %s cell click',
+			( alignment ) => {
+				const spy = jest.fn();
 
-			act( () => {
 				render(
-					<AlignmentMatrixControl
-						value={ 'center' }
-						onChange={ spy }
-					/>,
-					container
+					<AlignmentMatrixControl value="center" onChange={ spy } />
 				);
-			} );
-
-			const cells = getCells();
-
-			act( () => {
-				cells[ 3 ].focus();
-			} );
 
-			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 'center left' );
+				getCell( alignment ).focus();
 
-			act( () => {
-				cells[ 4 ].focus();
-			} );
-
-			expect( spy.mock.calls[ 1 ][ 0 ] ).toBe( 'center center' );
-
-			act( () => {
-				cells[ 7 ].focus();
-			} );
-
-			expect( spy.mock.calls[ 2 ][ 0 ] ).toBe( 'bottom center' );
-		} );
+				expect( spy ).toHaveBeenCalledWith( alignment );
+			}
+		);
 	} );
 } );

package/src/border-box-control/test/utils.js

@@ -244,6 +244,54 @@ describe( 'BorderBoxControl Utils', () => {
 
 			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
 		} );
+
+		it( 'should return most common unit selection if border widths are mixed', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '10px' },
+				right: { color: '#000', style: 'solid', width: '1rem' },
+				bottom: { color: '#000', style: 'solid', width: '2em' },
+				left: { color: '#000', style: undefined, width: '2em' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'em',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+
+		it( 'should return first unit when multiple units are equal most common', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '1rem' },
+				right: { color: '#000', style: 'solid', width: '0.75em' },
+				bottom: { color: '#000', style: 'solid', width: '1vw' },
+				left: { color: '#000', style: undefined, width: '2vh' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'rem',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+
+		it( 'should ignore undefined values in determining most common unit', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: undefined },
+				right: { color: '#000', style: 'solid', width: '5vw' },
+				bottom: { color: '#000', style: 'solid', width: undefined },
+				left: { color: '#000', style: undefined, width: '2vh' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'vw',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
 	} );
 
 	describe( 'getShorthandBorderStyle', () => {

package/src/border-box-control/utils.ts

@@ -6,6 +6,7 @@ import type { CSSProperties } from 'react';
 /**
  * Internal dependencies
  */
+import { parseCSSUnitValue } from '../utils/unit-values';
 import type { Border } from '../border-control/types';
 import type { AnyBorder, Borders, BorderProp, BorderSide } from './types';
 
@@ -123,7 +124,7 @@ export const getCommonBorder = ( borders?: Borders ) => {
 	return {
 		color: allColorsMatch ? colors[ 0 ] : undefined,
 		style: allStylesMatch ? styles[ 0 ] : undefined,
-		width: allWidthsMatch ? widths[ 0 ] : undefined,
+		width: allWidthsMatch ? widths[ 0 ] : getMostCommonUnit( widths ),
 	};
 };
 
@@ -152,3 +153,45 @@ export const getShorthandBorderStyle = (
 
 	return [ width, borderStyle, color ].filter( Boolean ).join( ' ' );
 };
+
+export const getMostCommonUnit = (
+	values: Array< string | number | undefined >
+): string | undefined => {
+	// Collect all the CSS units.
+	const units = values.map( ( value ) =>
+		value === undefined ? undefined : parseCSSUnitValue( `${ value }` )[ 1 ]
+	);
+
+	// Return the most common unit out of only the defined CSS units.
+	const filteredUnits = units.filter( ( value ) => value !== undefined );
+	return mode( filteredUnits as string[] );
+};
+
+/**
+ * Finds the mode value out of the array passed favouring the first value
+ * as a tiebreaker.
+ *
+ * @param  values Values to determine the mode from.
+ *
+ * @return The mode value.
+ */
+function mode( values: Array< string > ): string | undefined {
+	if ( values.length === 0 ) {
+		return undefined;
+	}
+
+	const map: { [ index: string ]: number } = {};
+	let maxCount = 0;
+	let currentMode;
+
+	values.forEach( ( value ) => {
+		map[ value ] = map[ value ] === undefined ? 1 : map[ value ] + 1;
+
+		if ( map[ value ] > maxCount ) {
+			currentMode = value;
+			maxCount = map[ value ];
+		}
+	} );
+
+	return currentMode;
+}

package/src/combobox-control/index.js

@@ -247,11 +247,6 @@ function ComboboxControl( {
 								instanceId={ instanceId }
 								ref={ inputContainer }
 								value={ isExpanded ? inputValue : currentLabel }
-								aria-label={
-									currentLabel
-										? `${ currentLabel }, ${ label }`
-										: null
-								}
 								onFocus={ onFocus }
 								onBlur={ onBlur }
 								isExpanded={ isExpanded }

package/src/custom-select-control/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -15,7 +16,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '../';
+import { VisuallyHidden } from '../visually-hidden';
 import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
 import SelectControlChevronDown from '../select-control/chevron-down';
 import { InputBaseWithBackCompatMinWidth } from './styles';