@wordpress/components 19.14.0 → 19.15.0

package/build-types/ui/utils/get-valid-children.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-valid-children.d.ts","sourceRoot":"","sources":["../../../src/ui/utils/get-valid-children.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAE,QAAQ,EAAE,SAAS,GAAI,cAAc,CAMtE"}
+{"version":3,"file":"get-valid-children.d.ts","sourceRoot":"","sources":["../../../src/ui/utils/get-valid-children.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAO/E;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,QAAQ,EAAE,SAAS,GACjB,KAAK,CAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAE,CAMnD"}

package/build-types/visually-hidden/component.d.ts

@@ -1,22 +1,20 @@
-export default ConnectedVisuallyHidden;
+import type { VisuallyHiddenProps } from './types';
 /**
  * `VisuallyHidden` is a component used to render text intended to be visually
  * hidden, but will show for alternate devices, for example a screen reader.
  *
- * @example
  * ```jsx
  * import { VisuallyHidden } from `@wordpress/components`;
  *
  * function Example() {
- * 	return (
- * 		<VisuallyHidden>
- * 			<label>Code is Poetry</label>
- * 		</VisuallyHidden>
- * 	);
+ *   return (
+ *     <VisuallyHidden>
+ *       <label>Code is Poetry</label>
+ *     </VisuallyHidden>
+ *   );
  * }
  * ```
  */
-declare const ConnectedVisuallyHidden: import("../ui/context").WordPressComponent<"div", {
-    children: import('react').ReactNode;
-}, true>;
+export declare const VisuallyHidden: import("../ui/context").WordPressComponent<"div", VisuallyHiddenProps, true>;
+export default VisuallyHidden;
 //# sourceMappingURL=component.d.ts.map

package/build-types/visually-hidden/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.js"],"names":[],"mappings":";AAyBA;;;;;;;;;;;;;;;;GAgBG;AACH;cAlCuE,OAAO,OAAO,EAAE,SAAS;SAqC9F"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,8EAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build-types/visually-hidden/index.d.ts

@@ -1,2 +1,2 @@
-export { default as VisuallyHidden } from "./component";
+export { default as VisuallyHidden } from './component';
 //# sourceMappingURL=index.d.ts.map

package/build-types/visually-hidden/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/build-types/visually-hidden/stories/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+declare const meta: ComponentMeta<typeof VisuallyHidden>;
+export default meta;
+export declare const Default: ComponentStory<typeof VisuallyHidden>;
+export declare const WithForwardedProps: ComponentStory<typeof VisuallyHidden>;
+export declare const WithAdditionalClassNames: ComponentStory<typeof VisuallyHidden>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/visually-hidden/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,cAAc,CAa/C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,cAAc,CAa1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAE,OAAO,cAAc,CAWrE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,CACpD,OAAO,cAAc,CAUrB,CAAC"}

package/build-types/visually-hidden/styles.d.ts

@@ -1,3 +1,6 @@
-/** @type {import('react').CSSProperties} */
-export const visuallyHidden: import('react').CSSProperties;
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+export declare const visuallyHidden: CSSProperties;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/visually-hidden/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/styles.js"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,6BADW,OAAO,OAAO,EAAE,aAAa,CAatC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAC"}

package/build-types/visually-hidden/test/index.d.ts

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

package/build-types/visually-hidden/test/index.d.ts.map

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

package/build-types/visually-hidden/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+export declare type VisuallyHiddenProps = {
+    /**
+     * The children elements.
+     */
+    children: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/visually-hidden/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,mBAAmB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.14.0",
+	"version": "19.15.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": "0.6.3",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.12.0",
-		"@wordpress/compose": "^5.10.0",
-		"@wordpress/date": "^4.12.0",
-		"@wordpress/deprecated": "^3.12.0",
-		"@wordpress/dom": "^3.12.0",
-		"@wordpress/element": "^4.10.0",
-		"@wordpress/escape-html": "^2.12.0",
-		"@wordpress/hooks": "^3.12.0",
-		"@wordpress/i18n": "^4.12.0",
-		"@wordpress/icons": "^9.3.0",
-		"@wordpress/is-shallow-equal": "^4.12.0",
-		"@wordpress/keycodes": "^3.12.0",
-		"@wordpress/primitives": "^3.10.0",
-		"@wordpress/rich-text": "^5.10.0",
-		"@wordpress/warning": "^2.12.0",
+		"@wordpress/a11y": "^3.13.0",
+		"@wordpress/compose": "^5.11.0",
+		"@wordpress/date": "^4.13.0",
+		"@wordpress/deprecated": "^3.13.0",
+		"@wordpress/dom": "^3.13.0",
+		"@wordpress/element": "^4.11.0",
+		"@wordpress/escape-html": "^2.13.0",
+		"@wordpress/hooks": "^3.13.0",
+		"@wordpress/i18n": "^4.13.0",
+		"@wordpress/icons": "^9.4.0",
+		"@wordpress/is-shallow-equal": "^4.13.0",
+		"@wordpress/keycodes": "^3.13.0",
+		"@wordpress/primitives": "^3.11.0",
+		"@wordpress/rich-text": "^5.11.0",
+		"@wordpress/warning": "^2.13.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }

package/src/autocomplete/get-default-use-items.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { debounce, deburr, escapeRegExp } from 'lodash';
+import { debounce, escapeRegExp } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,7 @@ function filterOptions( search, options = [], maxResults = 10 ) {
 		}
 
 		const isMatch = keywords.some( ( keyword ) =>
-			search.test( deburr( keyword ) )
+			search.test( removeAccents( keyword ) )
 		);
 		if ( ! isMatch ) {
 			continue;

package/src/autocomplete/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, find, deburr } from 'lodash';
+import { escapeRegExp, find } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -284,7 +285,7 @@ function useAutocomplete( {
 			return;
 		}
 
-		const text = deburr( textContent );
+		const text = removeAccents( textContent );
 		const textAfterSelection = getTextContent(
 			slice( record, undefined, getTextContent( record ).length )
 		);

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

@@ -106,7 +106,7 @@ export function useBorderControl(
 	);
 
 	const onSliderChange = useCallback(
-		( value: string ) => {
+		( value?: number ) => {
 			onWidthChange( `${ value }${ widthUnit }` );
 		},
 		[ onWidthChange, widthUnit ]

package/src/box-control/index.js

@@ -117,7 +117,7 @@ export default function BoxControl( {
 	};
 
 	return (
-		<Root id={ id } role="region" aria-labelledby={ headingId }>
+		<Root id={ id } role="group" aria-labelledby={ headingId }>
 			<Header className="component-box-control__header">
 				<FlexItem>
 					<Text

package/src/button/README.md

@@ -62,7 +62,7 @@ Since a high-emphasis button commands the most attention, a layout should contai
 
 #### Text label
 
-All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there should be an icon to signify what the button does.
+All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there needs to be a [label](#label) added and an icon to signify what the button does.
 
 ![](https://make.wordpress.org/design/files/2019/03/do-link-button.png)
 

package/src/color-picker/hex-input.tsx

@@ -11,10 +11,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
-import { ColorHexInputControl } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 
@@ -49,7 +49,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	};
 
 	return (
-		<ColorHexInputControl
+		<InputControl
 			prefix={
 				<Spacer
 					as={ Text }
@@ -66,6 +66,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
 			__unstableStateReducer={ stateReducer }
+			__unstableInputWidth="9em"
 		/>
 	);
 };

package/src/color-picker/index.native.js

@@ -8,7 +8,7 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -33,7 +33,6 @@ function ColorPicker( {
 	onHandleHardwareButtonPress,
 	bottomLabelText,
 } ) {
-	const didMount = useRef( false );
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 	const {
@@ -77,19 +76,17 @@ function ColorPicker( {
 		styles.footerDark
 	);
 
-	const currentColor = colord( {
-		h: hue,
-		s: sat * 100,
-		v: val * 100,
-	} ).toHex();
+	const combineToHex = ( h = hue, s = sat, v = val ) =>
+		colord( { h, s: s * 100, v: v * 100 } ).toHex();
 
-	useEffect( () => {
-		if ( ! didMount.current ) {
-			didMount.current = true;
-			return;
-		}
-		setColor( currentColor );
-	}, [ currentColor ] );
+	const currentColor = combineToHex();
+
+	const updateColor = ( { hue: h, saturation: s, value: v } ) => {
+		if ( h !== undefined ) setHue( h );
+		if ( s !== undefined ) setSaturation( s );
+		if ( v !== undefined ) setValue( v );
+		setColor( combineToHex( h, s, v ) );
+	};
 
 	useEffect( () => {
 		shouldEnableBottomSheetMaxHeight( false );
@@ -104,17 +101,13 @@ function ColorPicker( {
 		if ( onHandleHardwareButtonPress ) {
 			onHandleHardwareButtonPress( onButtonPress );
 		}
+		// TODO: Revisit this to discover if there's a good reason for omitting
+		// the hook’s dependencies and running it a single time. Ideally there
+		// may be a way to refactor and obviate the disabled lint rule. If not,
+		// this comment should be replaced by one that explains the reasoning.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
-	function onHuePickerChange( { hue: h } ) {
-		setHue( h );
-	}
-
-	function onSatValPickerChange( { saturation: s, value: v } ) {
-		setSaturation( s );
-		setValue( v );
-	}
-
 	function onButtonPress( action ) {
 		onNavigationBack();
 		onHandleClosingBottomSheet( null );
@@ -129,16 +122,16 @@ function ColorPicker( {
 		<>
 			<HsvColorPicker
 				huePickerHue={ hue }
-				onHuePickerDragMove={ onHuePickerChange }
+				onHuePickerDragMove={ updateColor }
 				onHuePickerPress={
-					! isBottomSheetContentScrolling && onHuePickerChange
+					! isBottomSheetContentScrolling && updateColor
 				}
 				satValPickerHue={ hue }
 				satValPickerSaturation={ sat }
 				satValPickerValue={ val }
-				onSatValPickerDragMove={ onSatValPickerChange }
+				onSatValPickerDragMove={ updateColor }
 				onSatValPickerPress={
-					! isBottomSheetContentScrolling && onSatValPickerChange
+					! isBottomSheetContentScrolling && updateColor
 				}
 				onSatValPickerDragStart={ () => {
 					shouldEnableBottomSheetScroll( false );

package/src/color-picker/input-with-slider.tsx

@@ -52,6 +52,8 @@ export const InputWithSlider = ( {
 				min={ min }
 				max={ max }
 				value={ value }
+				// @ts-expect-error
+				// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
 				onChange={ onChange }
 				withInputField={ false }
 			/>

package/src/color-picker/styles.ts

@@ -19,7 +19,6 @@ import {
 	Container as InputControlContainer,
 	Input,
 } from '../input-control/styles/input-control-styles';
-import InputControl from '../input-control';
 import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
@@ -140,7 +139,3 @@ export const CopyButton = styled( Button )`
 		}
 	}
 `;
-
-export const ColorHexInputControl = styled( InputControl )`
-	width: 8em;
-`;

package/src/color-picker/use-deprecated-props.ts

@@ -16,7 +16,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,16 +73,14 @@ function isLegacyProps( props: any ): props is LegacyProps {
 	);
 }
 
-function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
-	if ( typeof props?.color === 'undefined' ) {
-		return undefined;
-	}
-	if ( typeof props.color === 'string' ) {
-		return props.color;
-	}
-	if ( props.color.hex ) {
-		return props.color.hex;
-	}
+function getColorFromLegacyProps(
+	color: LegacyProps[ 'color' ]
+): string | undefined {
+	if ( color === undefined ) return;
+
+	if ( typeof color === 'string' ) return color;
+
+	if ( color.hex ) return color.hex;
 
 	return undefined;
 }
@@ -109,41 +107,24 @@ const transformColorStringToLegacyColor = memoize(
 export function useDeprecatedProps(
 	props: LegacyProps | ColorPickerProps
 ): ColorPickerProps {
-	const onChange = useCallback(
+	const { onChangeComplete } = props as LegacyProps;
+	const legacyChangeHandler = useCallback(
 		( color: string ) => {
-			if ( isLegacyProps( props ) ) {
-				return props.onChangeComplete(
-					transformColorStringToLegacyColor( color )
-				);
-			}
-
-			return props.onChange?.( color );
+			onChangeComplete( transformColorStringToLegacyColor( color ) );
 		},
-		[
-			( props as LegacyProps ).onChangeComplete,
-			( props as ColorPickerProps ).onChange,
-		]
+		[ onChangeComplete ]
 	);
-
-	const color = useMemo( () => {
-		return isLegacyProps( props )
-			? getColorFromLegacyProps( props )
-			: props.color;
-	}, [ props.color ] );
-
-	const enableAlpha = useMemo( () => {
-		return isLegacyProps( props )
-			? ! props.disableAlpha
-			: props.enableAlpha;
-	}, [
-		( props as LegacyProps ).disableAlpha,
-		( props as ColorPickerProps ).enableAlpha,
-	] );
-
+	if ( isLegacyProps( props ) ) {
+		return {
+			color: getColorFromLegacyProps( props.color ),
+			enableAlpha: ! props.disableAlpha,
+			onChange: legacyChangeHandler,
+		};
+	}
 	return {
-		...( isLegacyProps( props ) ? {} : props ),
-		onChange,
-		color,
-		enableAlpha,
+		...props,
+		color: props.color as ColorPickerProps[ 'color' ],
+		enableAlpha: ( props as ColorPickerProps ).enableAlpha,
+		onChange: ( props as ColorPickerProps ).onChange,
 	};
 }

package/src/combobox-control/index.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { deburr } from 'lodash';
+import removeAccents from 'remove-accents';
+
 /**
  * WordPress dependencies
  */
@@ -22,11 +23,12 @@ import { closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { InputWrapperFlex } from './styles';
 import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { Flex, FlexBlock, FlexItem } from '../flex';
+import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 
 const noop = () => {};
@@ -44,6 +46,7 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
+	__next36pxDefaultSize,
 	value,
 	label,
 	options,
@@ -59,7 +62,10 @@ function ComboboxControl( {
 } ) {
 	const currentOption = options.find( ( option ) => option.value === value );
 	const currentLabel = currentOption?.label ?? '';
-	const instanceId = useInstanceId( ComboboxControl );
+	// Use a custom prefix when generating the `instanceId` to avoid having
+	// duplicate input IDs when rendering this component and `FormTokenField`
+	// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
+	const instanceId = useInstanceId( ComboboxControl, 'combobox-control' );
 	const [ selectedSuggestion, setSelectedSuggestion ] = useState(
 		currentOption || null
 	);
@@ -71,9 +77,9 @@ function ComboboxControl( {
 	const matchingSuggestions = useMemo( () => {
 		const startsWithMatch = [];
 		const containsMatch = [];
-		const match = deburr( inputValue.toLocaleLowerCase() );
+		const match = removeAccents( inputValue.toLocaleLowerCase() );
 		options.forEach( ( option ) => {
-			const index = deburr( option.label )
+			const index = removeAccents( option.label )
 				.toLocaleLowerCase()
 				.indexOf( match );
 			if ( index === 0 ) {
@@ -225,7 +231,9 @@ function ComboboxControl( {
 					tabIndex="-1"
 					onKeyDown={ onKeyDown }
 				>
-					<Flex>
+					<InputWrapperFlex
+						__next36pxDefaultSize={ __next36pxDefaultSize }
+					>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"
@@ -257,7 +265,7 @@ function ComboboxControl( {
 								/>
 							</FlexItem>
 						) }
-					</Flex>
+					</InputWrapperFlex>
 					{ isExpanded && (
 						<SuggestionsList
 							instanceId={ instanceId }

package/src/combobox-control/stories/index.js

@@ -266,17 +266,17 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl( { allowReset } ) {
+function CountryCodeComboboxControl( args ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
 		<>
 			<ComboboxControl
+				{ ...args }
 				value={ value }
 				onChange={ setValue }
 				label="Select a country"
 				options={ countryOptions }
-				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
@@ -284,5 +284,6 @@ function CountryCodeComboboxControl( { allowReset } ) {
 }
 export const _default = CountryCodeComboboxControl.bind( {} );
 _default.args = {
+	__next36pxDefaultSize: false,
 	allowReset: false,
 };

package/src/combobox-control/style.scss

@@ -32,7 +32,7 @@ input.components-combobox-control__input[type="text"] {
 	align-items: flex-start;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05;
+	padding: 0;
 
 	&:focus-within {
 		@include input-style__focus();

package/src/combobox-control/styles.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+const deprecatedDefaultSize = ( { __next36pxDefaultSize } ) =>
+	! __next36pxDefaultSize &&
+	css`
+		height: 28px; // 30px - 2px vertical borders on parent container
+		padding-left: ${ space( 1 ) };
+		padding-right: ${ space( 1 ) };
+	`;
+
+export const InputWrapperFlex = styled( Flex )`
+	height: 34px; // 36px - 2px vertical borders on parent container
+	padding-left: ${ space( 2 ) };
+	padding-right: ${ space( 2 ) };
+
+	${ deprecatedDefaultSize }
+`;

package/src/dropdown-menu/index.js

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -59,13 +58,13 @@ function DropdownMenu( dropdownMenuProps ) {
 		noIcons,
 	} = dropdownMenuProps;
 
-	if ( isEmpty( controls ) && ! isFunction( children ) ) {
+	if ( ! controls?.length && ! isFunction( children ) ) {
 		return null;
 	}
 
 	// Normalize controls to nested array of objects (sets of controls)
 	let controlSets;
-	if ( ! isEmpty( controls ) ) {
+	if ( controls?.length ) {
 		controlSets = controls;
 		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
 			controlSets = [ controlSets ];
@@ -146,7 +145,7 @@ function DropdownMenu( dropdownMenuProps ) {
 				return (
 					<NavigableMenu { ...mergedMenuProps } role="menu">
 						{ isFunction( children ) ? children( props ) : null }
-						{ flatMap( controlSets, ( controlSet, indexOfSet ) =>
+						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
 							controlSet.map( ( control, indexOfControl ) => (
 								<Button
 									key={ [