Components: Update dependencies shared with G2 components

package.json

@@ -188,7 +188,7 @@
 		"react-native": "0.61.5",
 		"react-test-renderer": "16.13.1",
 		"rimraf": "3.0.2",
-		"rtlcss": "2.4.0",
+		"rtlcss": "2.6.2",
 		"sass": "1.26.11",
 		"sass-loader": "8.0.2",
 		"semver": "7.3.2",

packages/block-editor/package.json

@@ -64,7 +64,7 @@
 		"react-spring": "^8.0.19",
 		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",
-		"tinycolor2": "^1.4.1",
+		"tinycolor2": "^1.4.2",
 		"traverse": "^0.6.6"
 	},
 	"publishConfig": {

packages/block-library/package.json

@@ -61,7 +61,7 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"react-easy-crop": "^3.0.0",
-		"tinycolor2": "^1.4.1"
+		"tinycolor2": "^1.4.2"
 	},
 	"publishConfig": {
 		"access": "public"

packages/blocks/package.json

@@ -45,7 +45,7 @@
 		"rememo": "^3.0.0",
 		"showdown": "^1.9.1",
 		"simple-html-tokenizer": "^0.5.7",
-		"tinycolor2": "^1.4.1",
+		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"
 	},
 	"publishConfig": {

packages/components/package.json

@@ -27,7 +27,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.12.5",
-		"@emotion/core": "^10.0.22",
+		"@emotion/core": "^10.1.1",
 		"@emotion/css": "^10.0.22",
 		"@emotion/native": "^10.0.22",
 		"@emotion/styled": "^10.0.23",
@@ -51,20 +51,20 @@
 		"@wp-g2/utils": "^0.0.140",
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
-		"downshift": "^5.4.0",
+		"downshift": "^6.0.15",
 		"gradient-parser": "^0.1.5",
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
 		"react-dates": "^17.1.1",
 		"react-merge-refs": "^1.0.0",
-		"react-resize-aware": "^3.0.1",
+		"react-resize-aware": "^3.1.0",
 		"react-spring": "^8.0.20",
-		"react-use-gesture": "^7.0.16",
+		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.4",
 		"rememo": "^3.0.0",
-		"tinycolor2": "^1.4.1",
+		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"
 	},
 	"publishConfig": {

packages/components/src/input-control/input-field.js

@@ -183,29 +183,12 @@ function InputField(
 		}
 	);
 
-	const { onMouseDown, onTouchStart } = isDragEnabled
-		? dragGestureProps()
-		: {};
-	let handleOnMouseDown = onMouseDown;
-
-	/*
-	 * Works around the odd UA (e.g. Firefox) that does not focus inputs of
-	 * type=number when their spinner arrows are pressed.
-	 */
-	if ( type === 'number' ) {
-		handleOnMouseDown = ( event ) => {
-			if ( event.target !== event.target.ownerDocument.activeElement ) {
-				event.target.focus();
-			}
-			if ( isDragEnabled ) {
-				onMouseDown( event );
-			}
-		};
-	}
+	const dragProps = isDragEnabled ? dragGestureProps() : {};
 
 	return (
 		<Input
 			{ ...props }
+			{ ...dragProps }
 			className="components-input-control__input"
 			disabled={ disabled }
 			dragCursor={ dragCursor }
@@ -215,8 +198,6 @@ function InputField(
 			onChange={ handleOnChange }
 			onFocus={ handleOnFocus }
 			onKeyDown={ handleOnKeyDown }
-			onMouseDown={ handleOnMouseDown }
-			onTouchStart={ onTouchStart }
 			ref={ ref }
 			size={ size }
 			value={ value }

packages/compose/package.json

@@ -37,7 +37,7 @@
 		"memize": "^1.1.0",
 		"mousetrap": "^1.6.5",
 		"react-merge-refs": "^1.0.0",
-		"react-resize-aware": "^3.0.1",
+		"react-resize-aware": "^3.1.0",
 		"use-memo-one": "^1.1.1"
 	},
 	"publishConfig": {