@wordpress/components 19.7.0 → 19.9.0

package/src/unit-control/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, SyntheticEvent } from 'react';
+import type { CSSProperties, FocusEventHandler, SyntheticEvent } from 'react';
 
 /**
  * Internal dependencies
@@ -131,4 +131,8 @@ export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 		 * @default 10
 		 */
 		shiftStep?: number;
+		/**
+		 * Callback when either the quantity or the unit inputs lose focus.
+		 */
+		onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
 	};

package/src/utils/colors-values.js

@@ -8,18 +8,12 @@ import { merge } from 'lodash';
  */
 import { rgba } from './colors';
 
-export const BASE = {
+const BASE = {
 	black: '#000',
 	white: '#fff',
 };
 
-/**
- * TODO: Continue to update values as "G2" design evolves.
- *
- * "G2" refers to the movement to advance the interface of the block editor.
- * https://github.com/WordPress/gutenberg/issues/18667
- */
-export const G2 = {
+const G2 = {
 	blue: {
 		medium: {
 			focus: '#007cba',
@@ -35,10 +29,6 @@ export const G2 = {
 		200: '#e0e0e0', // Used sparingly for light borders.
 		100: '#f0f0f0', // Used for light gray backgrounds.
 	},
-	darkGray: {
-		primary: '#1e1e1e',
-		heading: '#050505',
-	},
 	mediumGray: {
 		text: '#757575',
 	},
@@ -49,7 +39,7 @@ export const G2 = {
 	},
 };
 
-export const DARK_GRAY = {
+const DARK_GRAY = {
 	900: '#191e23',
 	800: '#23282d',
 	700: '#32373c',
@@ -63,7 +53,7 @@ export const DARK_GRAY = {
 	placeholder: rgba( G2.gray[ 900 ], 0.62 ),
 };
 
-export const DARK_OPACITY = {
+const DARK_OPACITY = {
 	900: rgba( '#000510', 0.9 ),
 	800: rgba( '#00000a', 0.85 ),
 	700: rgba( '#06060b', 0.8 ),
@@ -76,7 +66,7 @@ export const DARK_OPACITY = {
 	backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),
 };
 
-export const DARK_OPACITY_LIGHT = {
+const DARK_OPACITY_LIGHT = {
 	900: rgba( '#304455', 0.45 ),
 	800: rgba( '#425863', 0.4 ),
 	700: rgba( '#667886', 0.35 ),
@@ -88,7 +78,7 @@ export const DARK_OPACITY_LIGHT = {
 	100: rgba( '#747474', 0.05 ),
 };
 
-export const LIGHT_GRAY = {
+const LIGHT_GRAY = {
 	900: '#a2aab2',
 	800: '#b5bcc2',
 	700: '#ccd0d4',
@@ -101,7 +91,7 @@ export const LIGHT_GRAY = {
 	placeholder: rgba( BASE.white, 0.65 ),
 };
 
-export const LIGHT_OPACITY_LIGHT = {
+const LIGHT_OPACITY_LIGHT = {
 	900: rgba( BASE.white, 0.5 ),
 	800: rgba( BASE.white, 0.45 ),
 	700: rgba( BASE.white, 0.4 ),
@@ -117,7 +107,7 @@ export const LIGHT_OPACITY_LIGHT = {
 // Additional colors.
 // Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
 
-export const BLUE = {
+const BLUE = {
 	wordpress: {
 		700: '#00669b',
 	},
@@ -139,19 +129,19 @@ export const BLUE = {
 	},
 };
 
-export const ALERT = {
+const ALERT = {
 	yellow: '#f0b849',
 	red: '#d94f4f',
 	green: '#4ab866',
 };
 
-export const ADMIN = {
+const ADMIN = {
 	theme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,
 	themeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,
 };
 
 // Namespaced values for raw colors hex codes.
-export const UI = {
+const UI = {
 	theme: ADMIN.theme,
 	background: BASE.white,
 	backgroundDisabled: LIGHT_GRAY[ 200 ],
@@ -166,12 +156,19 @@ export const UI = {
 	textLight: BASE.black,
 };
 
-export const COLORS = {
-	...BASE,
-	darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
+// Using Object.assign instead of { ...spread } syntax helps TypeScript
+// to extract the correct type defs here.
+export const COLORS = Object.assign( {}, BASE, {
+	darkGray: DARK_GRAY,
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
 	mediumGray: G2.mediumGray,
+	/**
+	 * The main gray color object (since Apr 16, 2022).
+	 *
+	 * We are in the process of simplifying the colors in this file,
+	 * please prefer this `gray` object in the meantime.
+	 */
 	gray: G2.gray,
 	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
 	lightGrayLight: LIGHT_OPACITY_LIGHT,
@@ -179,6 +176,6 @@ export const COLORS = {
 	alert: ALERT,
 	admin: ADMIN,
 	ui: UI,
-};
+} );
 
 export default COLORS;

package/src/utils/config-values.js

@@ -26,15 +26,20 @@ const CONTROL_PROPS = {
 	controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,
 	controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
 };
+
 const TOGGLE_GROUP_CONTROL_PROPS = {
 	toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
 	toggleGroupControlBorderColor: COLORS.ui.border,
+	toggleGroupControlBackdropBackgroundColor:
+		CONTROL_PROPS.controlSurfaceColor,
+	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
+	toggleGroupControlBackdropBoxShadow: 'transparent',
 	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
 };
 
-export default {
-	...CONTROL_PROPS,
-	...TOGGLE_GROUP_CONTROL_PROPS,
+// Using Object.assign to avoid creating circular references when emitting
+// TypeScript type declarations.
+export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
 	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
 	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
@@ -79,4 +84,4 @@ export default {
 	transitionDurationFastest: '100ms',
 	transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
 	transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',
-};
+} );

package/tsconfig.json

@@ -3,7 +3,13 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"types": [ "gutenberg-env" ],
+		"types": [
+			"gutenberg-env",
+			"gutenberg-test-env",
+			"jest",
+			"@testing-library/jest-dom",
+			"snapshot-diff",
+		],
 		// Some errors in Reakit types with TypeScript 4.3
 		// Remove the following line when they've been addressed.
 		"skipLibCheck": true,
@@ -26,9 +32,12 @@
 		"src/animate/**/*",
 		"src/base-control/**/*",
 		"src/base-field/**/*",
+		"src/border-box-control/**/*",
+		"src/border-control/**/*",
 		"src/button/**/*",
 		"src/card/**/*",
 		"src/circular-option-picker/**/*",
+		"src/color-indicator/**/*",
 		"src/color-palette/**/*",
 		"src/color-picker/**/*",
 		"src/confirm-dialog/**/*",
@@ -87,7 +96,7 @@
 		"src/**/*.native.js",
 		"src/**/react-native-*",
 		"src/**/stories/**.js", // only exclude js files, tsx files should be checked
-		"src/**/test",
+		"src/**/test/**.js", // only exclude js files, ts{x} files should be checked
 		"src/ui/__storybook-utils",
 		"src/ui/font-size-control"
 	]