@wordpress/components 19.9.0 → 19.12.0

package/build-types/unit-control/styles/unit-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unit-control-styles.d.ts","sourceRoot":"","sources":["../../../src/unit-control/styles/unit-control-styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,aAAK,WAAW,GAAG;IAClB,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF,aAAK,UAAU,GAAG;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;yGAGhB,CAAC;AAmCF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;uBAYtB,CAAC;AAqBF,eAAO,MAAM,SAAS;;;uHAMrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mIAyBtB,CAAC"}
+{"version":3,"file":"unit-control-styles.d.ts","sourceRoot":"","sources":["../../../src/unit-control/styles/unit-control-styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,aAAK,WAAW,GAAG;IAClB,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF,aAAK,UAAU,GAAG;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,UAAU,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;yGAGhB,CAAC;AAyBF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;uBAYtB,CAAC;AAqBF,eAAO,MAAM,SAAS;;;uHAMrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mIAyBtB,CAAC"}

package/build-types/unit-control/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/unit-control/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/unit-control/test/index.tsx"],"names":[],"mappings":""}

package/build-types/unit-control/test/utils.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/build-types/unit-control/test/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/unit-control/test/utils.ts"],"names":[],"mappings":""}

package/build-types/unit-control/types.d.ts

@@ -61,7 +61,7 @@ export declare type UnitSelectControlProps = {
      */
     units?: WPUnitControlUnit[];
 };
-export declare type UnitControlProps = Omit<UnitSelectControlProps, 'unit'> & Pick<InputControlProps, 'hideLabelFromVision'> & {
+export declare type UnitControlProps = Omit<UnitSelectControlProps, 'unit'> & Pick<InputControlProps, 'hideLabelFromVision' | '__next36pxDefaultSize'> & {
     __unstableStateReducer?: StateReducer;
     __unstableInputWidth?: CSSProperties['width'];
     /**

package/build-types/unit-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9E;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,iBAAiB,EACjB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,IAAI,CAAE,sBAAsB,EAAE,MAAM,CAAE,GACpE,IAAI,CAAE,iBAAiB,EAAE,qBAAqB,CAAE,GAAG;IAClD,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAE,gBAAgB,GAAG,iBAAiB,CAAE,CAAC;CACnE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9E;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,iBAAiB,EACjB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,IAAI,CAAE,sBAAsB,EAAE,MAAM,CAAE,GACpE,IAAI,CACH,iBAAiB,EACjB,qBAAqB,GAAG,uBAAuB,CAC/C,GAAG;IACH,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAE,gBAAgB,GAAG,iBAAiB,CAAE,CAAC;CACnE,CAAC"}

package/build-types/unit-control/utils.d.ts

@@ -32,7 +32,7 @@ export declare function getParsedQuantityAndUnit(rawValue?: string | number, fal
  * @param  units List of units.
  * @return Whether the list actually contains any units.
  */
-export declare function hasUnits(units?: WPUnitControlUnit[]): boolean;
+export declare function hasUnits(units?: WPUnitControlUnit[]): units is WPUnitControlUnit[];
 /**
  * Parses a quantity and unit from a raw string value, given a list of allowed
  * units and otherwise falling back to the default unit.
@@ -58,7 +58,7 @@ export declare function parseQuantityAndUnitFromRawValue(rawValue?: string | num
  * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of
  * `allowedUnits` is passed empty.
  */
-export declare function getValidParsedQuantityAndUnit(rawValue: string | number, allowedUnits: WPUnitControlUnit[], fallbackQuantity?: number, fallbackUnit?: string): [number | undefined, string | undefined];
+export declare function getValidParsedQuantityAndUnit(rawValue: string | number, allowedUnits?: WPUnitControlUnit[], fallbackQuantity?: number, fallbackUnit?: string): [number | undefined, string | undefined];
 /**
  * Takes a unit value and finds the matching accessibility label for the
  * unit abbreviation.
@@ -91,7 +91,7 @@ export declare function filterUnitsWithSettings(allowedUnitValues: string[] | un
 export declare const useCustomUnits: ({ units, availableUnits, defaultValues, }: {
     units?: WPUnitControlUnit[] | undefined;
     availableUnits?: string[] | undefined;
-    defaultValues: Record<string, number>;
+    defaultValues?: Record<string, number> | undefined;
 }) => WPUnitControlUnit[];
 /**
  * Get available units with the unit for the currently selected value

package/build-types/unit-control/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAiGjD;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,iBAAiB,EAAE,GAChC,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAM5C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAE,KAAK,CAAC,EAAE,iBAAiB,EAAE,GAAI,OAAO,CAK/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,GAAE,iBAAiB,EAAkB,GAC/C,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAyB5C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,6BAA6B,CAC5C,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,EAAE,iBAAiB,EAAE,EACjC,gBAAgB,CAAC,EAAE,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,GACnB,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAmB5C;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAG5E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACtC,iBAAiB,sBAAe,EAChC,cAAc,EAAE,iBAAiB,EAAE,GACjC,iBAAiB,EAAE,CASrB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;;;mBAOX,OAAQ,MAAM,EAAE,MAAM,CAAE;MACnC,iBAAiB,EAmBrB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,MAAM,EACnB,KAAK,GAAE,iBAAiB,EAAkB,GACxC,iBAAiB,EAAE,CAkBrB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAiGjD;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,iBAAiB,EAAE,GAChC,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAM5C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACvB,KAAK,CAAC,EAAE,iBAAiB,EAAE,GACzB,KAAK,IAAI,iBAAiB,EAAE,CAK9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,GAAE,iBAAiB,EAAkB,GAC/C,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAyB5C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,6BAA6B,CAC5C,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,CAAC,EAAE,iBAAiB,EAAE,EAClC,gBAAgB,CAAC,EAAE,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,GACnB,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAmB5C;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAG5E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACtC,iBAAiB,sBAAe,EAChC,cAAc,EAAE,iBAAiB,EAAE,GACjC,iBAAiB,EAAE,CASrB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;;;;MAQtB,iBAAiB,EAmBrB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,MAAM,EACnB,KAAK,GAAE,iBAAiB,EAAkB,GACxC,iBAAiB,EAAE,CAkBrB"}

package/build-types/utils/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export { default as useControlledState } from "./use-controlled-state";
 export { default as useUpdateEffect } from "./use-update-effect";
-export { useCombinedRef } from "./use-combined-ref";
 export { useControlledValue } from "./use-controlled-value";
 export { useCx } from "./use-cx";
 export { useLatestRef } from "./use-latest-ref";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.9.0",
+	"version": "19.12.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,22 +36,23 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
+		"@floating-ui/react-dom": "0.6.3",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.7.0",
-		"@wordpress/compose": "^5.5.0",
-		"@wordpress/date": "^4.7.0",
-		"@wordpress/deprecated": "^3.7.0",
-		"@wordpress/dom": "^3.7.0",
-		"@wordpress/element": "^4.5.0",
-		"@wordpress/escape-html": "^2.7.0",
-		"@wordpress/hooks": "^3.7.0",
-		"@wordpress/i18n": "^4.7.0",
-		"@wordpress/icons": "^8.3.0",
-		"@wordpress/is-shallow-equal": "^4.7.0",
-		"@wordpress/keycodes": "^3.7.0",
-		"@wordpress/primitives": "^3.5.0",
-		"@wordpress/rich-text": "^5.5.0",
-		"@wordpress/warning": "^2.7.0",
+		"@wordpress/a11y": "^3.10.0",
+		"@wordpress/compose": "^5.8.0",
+		"@wordpress/date": "^4.10.0",
+		"@wordpress/deprecated": "^3.10.0",
+		"@wordpress/dom": "^3.10.0",
+		"@wordpress/element": "^4.8.0",
+		"@wordpress/escape-html": "^2.10.0",
+		"@wordpress/hooks": "^3.10.0",
+		"@wordpress/i18n": "^4.10.0",
+		"@wordpress/icons": "^9.1.0",
+		"@wordpress/is-shallow-equal": "^4.10.0",
+		"@wordpress/keycodes": "^3.10.0",
+		"@wordpress/primitives": "^3.8.0",
+		"@wordpress/rich-text": "^5.8.0",
+		"@wordpress/warning": "^2.10.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -61,11 +62,10 @@
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"moment": "^2.22.1",
+		"moment": "^2.26.0",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
-		"react-dates": "^17.1.1",
-		"react-resize-aware": "^3.1.0",
+		"react-dates": "^21.8.0",
 		"reakit": "^1.3.8",
 		"uuid": "^8.3.0"
 	},
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
+	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
 }

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

@@ -53,11 +53,13 @@ export default function AlignmentMatrixControl( {
 		onChange( nextValue );
 	};
 
+	const { setCurrentId } = composite;
+
 	useEffect( () => {
 		if ( typeof value !== 'undefined' ) {
-			composite.setCurrentId( getItemId( baseId, value ) );
+			setCurrentId( getItemId( baseId, value ) );
 		}
-	}, [ value, composite.setCurrentId ] );
+	}, [ value, setCurrentId, baseId ] );
 
 	const classes = classnames(
 		'component-alignment-matrix-control',

package/src/angle-picker-control/angle-circle.js

@@ -28,12 +28,11 @@ function AngleCircle( { value, onChange, ...props } ) {
 
 	const changeAngleToPosition = ( event ) => {
 		const { x: centerX, y: centerY } = angleCircleCenter.current;
-		const { ownerDocument } = angleCircleRef.current;
 		// Prevent (drag) mouse events from selecting and accidentally
 		// triggering actions from other elements.
 		event.preventDefault();
-		// Ensure the input isn't focused as preventDefault would leave it.
-		ownerDocument.activeElement.blur();
+		// Input control needs to lose focus and by preventDefault above, it doesn't.
+		event.target.focus();
 		onChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );
 	};
 
@@ -72,6 +71,7 @@ function AngleCircle( { value, onChange, ...props } ) {
 					value ? { transform: `rotate(${ value }deg)` } : undefined
 				}
 				className="components-angle-picker-control__angle-circle-indicator-wrapper"
+				tabIndex={ -1 }
 			>
 				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
 			</CircleIndicatorWrapper>

package/src/autocomplete/autocompleter-ui.js

@@ -39,7 +39,7 @@ export function getAutoCompleterUI( autocompleter ) {
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
-		}, [ items ] );
+		}, [ onChangeOptions, items ] );
 
 		if ( ! items.length > 0 ) {
 			return null;

package/src/autocomplete/autocompleter-ui.native.js

@@ -71,7 +71,7 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
-		}, [ items, isVisible, text ] );
+		}, [ onChangeOptions, items, isVisible, text, startAnimation ] );
 
 		const activeItemStyles = usePreferredColorSchemeStyle(
 			styles[ 'components-autocomplete__item-active' ],
@@ -111,7 +111,7 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
-			[ isVisible ]
+			[ animationValue, isVisible, reset ]
 		);
 
 		const contentStyles = {

package/src/autocomplete/index.js

@@ -11,6 +11,7 @@ import {
 	useEffect,
 	useState,
 	useRef,
+	useMemo,
 } from '@wordpress/element';
 import {
 	ENTER,
@@ -132,7 +133,7 @@ function useAutocomplete( {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ autocompleter, setAutocompleter ] = useState( null );
 	const [ AutocompleterUI, setAutocompleterUI ] = useState( null );
-	const [ backspacing, setBackspacing ] = useState( false );
+	const backspacing = useRef( false );
 
 	function insertCompletion( replacement ) {
 		const end = record.start;
@@ -218,7 +219,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		setBackspacing( event.keyCode === BACKSPACE );
+		backspacing.current = event.keyCode === BACKSPACE;
 
 		if ( ! autocompleter ) {
 			return;
@@ -268,11 +269,14 @@ function useAutocomplete( {
 		event.preventDefault();
 	}
 
-	let textContent;
-
-	if ( isCollapsed( record ) ) {
-		textContent = getTextContent( slice( record, 0 ) );
-	}
+	// textContent is a primitive (string), memoizing is not strictly necessary
+	// but this is a preemptive performance improvement, since the autocompleter
+	// is a potential bottleneck for the editor type metric.
+	const textContent = useMemo( () => {
+		if ( isCollapsed( record ) ) {
+			return getTextContent( slice( record, 0 ) );
+		}
+	}, [ record ] );
 
 	useEffect( () => {
 		if ( ! textContent ) {
@@ -325,7 +329,8 @@ function useAutocomplete( {
 				// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
 				// if the user presses backspace here, it will show the completion popup again.
 				const matchingWhileBackspacing =
-					backspacing && textWithoutTrigger.split( /\s/ ).length <= 3;
+					backspacing.current &&
+					textWithoutTrigger.split( /\s/ ).length <= 3;
 
 				if (
 					mismatch &&
@@ -370,7 +375,14 @@ function useAutocomplete( {
 				: AutocompleterUI
 		);
 		setFilterValue( query );
-	}, [ textContent ] );
+	}, [
+		textContent,
+		AutocompleterUI,
+		autocompleter,
+		completers,
+		record,
+		filteredOptions.length,
+	] );
 
 	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
 	const { className } = autocompleter || {};

package/src/autocomplete/style.scss

@@ -1,4 +1,4 @@
-.components-autocomplete__popover .components-popover__content > div {
+.components-autocomplete__popover .components-popover__content {
 	padding: $grid-unit-20;
 	min-width: 220px;
 }

package/src/border-box-control/border-box-control/README.md

@@ -122,23 +122,19 @@ _Note: The will be `undefined` if a user clears all borders._
 
 - Required: Yes
 
-### `popoverClassNames`: `Object`
+### `popoverPlacement`: `string`
 
-An object defining CSS classnames for all the inner `BorderControl` popover
-content.
+The position of the color popover relative to the control wrapper.
 
-Example:
-```js
-{
-	linked: 'linked-border-popover-content',
-	top: 'top-border-popover-content',
-	right: 'right-border-popover-content',
-	bottom: 'bottom-border-popover-content',
-	left: 'left-border-popover-content',
-}
-```
+By default, popovers are displayed relative to the button that initiated the popover. By supplying a popover placement, you force the popover to display in a specific location.
+
+The available base placements are 'top', 'right', 'bottom', 'left'. Each of these base placements has an alignment in the form -start and -end. For example, 'right-start', or 'bottom-end'. These allow you to align the tooltip to the edges of the button, rather than centering it.
+
+- Required: No
+
+### `popoverOffset`: `number`
 
-By default, popovers are displayed relative to the button that initiated the popover. By supplying classnames for each individual popover, it is possible to add styling rules to align the popover positions to an unrelated design element, for example, the sidebar inspector in the block editor.
+Works in conjunctions with `popoverPlacement` and allows leaving a space between the color popover and the control wrapper.
 
 - Required: No
 

package/src/border-box-control/border-box-control/component.tsx

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -51,16 +53,27 @@ const BorderBoxControl = (
 		linkedValue,
 		onLinkedChange,
 		onSplitChange,
-		popoverClassNames,
+		popoverPlacement,
+		popoverOffset,
 		splitValue,
 		toggleLinked,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
+		__next36pxDefaultSize = false,
 		...otherProps
 	} = useBorderBoxControl( props );
+	const containerRef = useRef();
+	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
+	const popoverProps = popoverPlacement
+		? {
+				placement: popoverPlacement,
+				offset: popoverOffset,
+				anchorRef: containerRef,
+		  }
+		: undefined;
 
 	return (
-		<View className={ className } { ...otherProps } ref={ forwardedRef }>
+		<View className={ className } { ...otherProps } ref={ mergedRef }>
 			<BorderLabel
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
@@ -77,7 +90,7 @@ const BorderBoxControl = (
 						placeholder={
 							hasMixedBorders ? __( 'Mixed' ) : undefined
 						}
-						popoverContentClassName={ popoverClassNames?.linked }
+						__unstablePopoverProps={ popoverProps }
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider={ true }
@@ -88,6 +101,7 @@ const BorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
+						__next36pxDefaultSize={ __next36pxDefaultSize }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -96,7 +110,8 @@ const BorderBoxControl = (
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }
 						onChange={ onSplitChange }
-						popoverClassNames={ popoverClassNames }
+						popoverPlacement={ popoverPlacement }
+						popoverOffset={ popoverOffset }
 						value={ splitValue }
 						__experimentalHasMultipleOrigins={
 							__experimentalHasMultipleOrigins
@@ -104,11 +119,13 @@ const BorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
+						__next36pxDefaultSize={ __next36pxDefaultSize }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
 				/>
 			</HStack>
 		</View>

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

@@ -98,11 +98,11 @@ export function useBorderBoxControl(
 	const cx = useCx();
 	const classes = useMemo( () => {
 		return cx( styles.BorderBoxControl, className );
-	}, [ className ] );
+	}, [ cx, className ] );
 
 	const linkedControlClassName = useMemo( () => {
 		return cx( styles.LinkedBorderControl );
-	}, [] );
+	}, [ cx ] );
 
 	return {
 		...otherProps,

package/src/border-box-control/border-box-control-linked-button/hook.ts

@@ -15,16 +15,20 @@ import type { LinkedButtonProps } from '../types';
 export function useBorderBoxControlLinkedButton(
 	props: WordPressComponentProps< LinkedButtonProps, 'div' >
 ) {
-	const { className, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControlLinkedButton'
-	);
+	const {
+		className,
+		__next36pxDefaultSize = false,
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControlLinkedButton' );
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControlLinkedButton, className );
-	}, [ className ] );
+		return cx(
+			styles.BorderBoxControlLinkedButton( __next36pxDefaultSize ),
+			className
+		);
+	}, [ className, cx, __next36pxDefaultSize ] );
 
 	return { ...otherProps, className: classes };
 }

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,12 +27,24 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		onChange,
-		popoverClassNames,
+		popoverPlacement,
+		popoverOffset,
+		rightAlignedClassName,
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
+		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
+	const containerRef = useRef();
+	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
+	const popoverProps = popoverPlacement
+		? {
+				placement: popoverPlacement,
+				offset: popoverOffset,
+				anchorRef: containerRef,
+		  }
+		: undefined;
 
 	const sharedBorderControlProps = {
 		colors,
@@ -40,17 +54,21 @@ const BorderBoxControlSplitControls = (
 		isCompact: true,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
+		__next36pxDefaultSize,
 	};
 
 	return (
-		<Grid { ...otherProps } ref={ forwardedRef } gap={ 4 }>
-			<BorderBoxControlVisualizer value={ value } />
+		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
+			<BorderBoxControlVisualizer
+				value={ value }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
+			/>
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
-				popoverContentClassName={ popoverClassNames?.top }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.top }
 				{ ...sharedBorderControlProps }
 			/>
@@ -58,15 +76,16 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
-				popoverContentClassName={ popoverClassNames?.left }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.left }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
+				className={ rightAlignedClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
-				popoverContentClassName={ popoverClassNames?.right }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.right }
 				{ ...sharedBorderControlProps }
 			/>
@@ -75,7 +94,7 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
-				popoverContentClassName={ popoverClassNames?.bottom }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.bottom }
 				{ ...sharedBorderControlProps }
 			/>

package/src/border-box-control/border-box-control-split-controls/hook.ts

@@ -22,13 +22,27 @@ export function useBorderBoxControlSplitControls(
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControlSplitControls, className );
-	}, [ className, rtl.watch() ] );
+		return cx( styles.borderBoxControlSplitControls(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
 
 	const centeredClassName = useMemo( () => {
 		return cx( styles.CenteredBorderControl, className );
-	}, [] );
+	}, [ cx, className ] );
 
-	return { ...otherProps, centeredClassName, className: classes };
+	const rightAlignedClassName = useMemo( () => {
+		return cx( styles.rightBorderControl(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
+
+	return {
+		...otherProps,
+		centeredClassName,
+		className: classes,
+		rightAlignedClassName,
+	};
 }

package/src/border-box-control/border-box-control-visualizer/hook.ts

@@ -15,16 +15,24 @@ import type { VisualizerProps } from '../types';
 export function useBorderBoxControlVisualizer(
 	props: WordPressComponentProps< VisualizerProps, 'div' >
 ) {
-	const { className, value, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControlVisualizer'
-	);
+	const {
+		className,
+		value,
+		__next36pxDefaultSize = false,
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControlVisualizer( value ), className );
-	}, [ className, value, rtl.watch() ] );
+		return cx(
+			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			className
+		);
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
 
 	return { ...otherProps, className: classes, value };
 }

package/src/border-box-control/stories/index.js

@@ -84,6 +84,7 @@ Default.args = {
 		style: 'dashed',
 		width: '1px',
 	},
+	__next36pxDefaultSize: false,
 };
 
 const WrapperView = styled.div`