@wordpress/components 19.6.1 → 19.8.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
@@ -9,6 +9,7 @@ import type { CSSProperties, SyntheticEvent } from 'react';
 import type { StateReducer } from '../input-control/reducer/state';
 import type {
 	InputChangeCallback,
+	InputControlProps,
 	Size as InputSize,
 } from '../input-control/types';
 
@@ -51,8 +52,6 @@ export type UnitSelectControlProps = {
 	isUnitSelectTabbable?: boolean;
 	/**
 	 * A callback function invoked when the value is changed.
-	 *
-	 * @default noop
 	 */
 	onChange?: UnitControlOnChangeCallback;
 	/**
@@ -74,42 +73,66 @@ export type UnitSelectControlProps = {
 };
 
 // TODO: when available, should (partially) extend `NumberControl` props.
-export type UnitControlProps = UnitSelectControlProps & {
-	__unstableStateReducer?: StateReducer;
-	__unstableInputWidth?: CSSProperties[ 'width' ];
-	/**
-	 * If `true`, the unit `<select>` is hidden.
-	 *
-	 * @default false
-	 */
-	disableUnits?: boolean;
-	/**
-	 * If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
-	 * If enabled, a change is also triggered when tabbing away (`onBlur`).
-	 *
-	 * @default false
-	 */
-	isPressEnterToChange?: boolean;
-	/**
-	 * If `true`, and the selected unit provides a `default` value, this value is set
-	 * when changing units.
-	 *
-	 * @default false
-	 */
-	isResetValueOnUnitChange?: boolean;
-	/**
-	 * If this property is added, a label will be generated using label property as the content.
-	 */
-	label?: string;
-	/**
-	 * Callback when the `unit` changes.
-	 *
-	 * @default noop
-	 */
-	onUnitChange?: UnitControlOnChangeCallback;
-	/**
-	 * Current value. If passed as a string, the current unit will be inferred from this value.
-	 * For example, a `value` of "50%" will set the current unit to `%`.
-	 */
-	value?: string | number;
-};
+export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
+	Pick< InputControlProps, 'hideLabelFromVision' > & {
+		__unstableStateReducer?: StateReducer;
+		__unstableInputWidth?: CSSProperties[ 'width' ];
+		/**
+		 * If `true`, the unit `<select>` is hidden.
+		 *
+		 * @default false
+		 */
+		disableUnits?: boolean;
+		/**
+		 * If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
+		 * If enabled, a change is also triggered when tabbing away (`onBlur`).
+		 *
+		 * @default false
+		 */
+		isPressEnterToChange?: boolean;
+		/**
+		 * If `true`, and the selected unit provides a `default` value, this value is set
+		 * when changing units.
+		 *
+		 * @default false
+		 */
+		isResetValueOnUnitChange?: boolean;
+		/**
+		 * If this property is added, a label will be generated using label property as the content.
+		 */
+		label?: string;
+		/**
+		 * Callback when the `unit` changes.
+		 */
+		onUnitChange?: UnitControlOnChangeCallback;
+		/**
+		 * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._
+		 *
+		 * @deprecated
+		 */
+		unit?: string;
+		/**
+		 * Current value. If passed as a string, the current unit will be inferred from this value.
+		 * For example, a `value` of "50%" will set the current unit to `%`.
+		 */
+		value?: string | number;
+		/**
+		 * If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment
+		 * the value by the `shiftStep` value.
+		 *
+		 * @default true
+		 */
+		isShiftStepEnabled?: boolean;
+		/**
+		 * Amount to increment by when the `SHIFT` key is held down. This shift value
+		 * is a multiplier to the `step` value. For example, if the `step` value is `5`,
+		 * and `shiftStep` is `10`, each jump would increment/decrement by `50`.
+		 *
+		 * @default 10
+		 */
+		shiftStep?: number;
+		/**
+		 * Callback when either the quantity or the unit inputs lose focus.
+		 */
+		onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
+	};

package/src/unit-control/unit-select-control.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 import type { ChangeEvent } from 'react';
 
@@ -16,7 +15,7 @@ import type { UnitSelectControlProps } from './types';
 export default function UnitSelectControl( {
 	className,
 	isUnitSelectTabbable: isTabbable = true,
-	onChange = noop,
+	onChange,
 	size = 'default',
 	unit = 'px',
 	units = CSS_UNITS,
@@ -37,7 +36,7 @@ export default function UnitSelectControl( {
 		const { value: unitValue } = event.target;
 		const data = units.find( ( option ) => option.value === unitValue );
 
-		onChange( unitValue, { event, data } );
+		onChange?.( unitValue, { event, data } );
 	};
 
 	const classes = classnames( 'components-unit-control__select', className );

package/src/utils/colors-values.js

@@ -166,8 +166,9 @@ export const UI = {
 	textLight: BASE.black,
 };
 
-export const COLORS = {
-	...BASE,
+// Using Object.assign instead of { ...spread } syntax helps TypeScript
+// to extract the correct type defs here.
+export const COLORS = Object.assign( {}, BASE, {
 	darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
@@ -179,6 +180,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

@@ -26,9 +26,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/**/*",