From e3136a4cae7bc27c3d842b73bafd6afa546cc497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= <petter@dekode.no>
Date: Thu, 28 Jul 2022 19:13:05 +0200
Subject: [PATCH] StyleProvider: Convert component to TypeScript (#42541)

* StyleProvider: Convert component to TypeScript

* Update CHANGELOG.md
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/style-provider/index.js    | 31 --------------
 .../components/src/style-provider/index.tsx   | 41 +++++++++++++++++++
 .../components/src/style-provider/types.ts    | 15 +++++++
 4 files changed, 57 insertions(+), 31 deletions(-)
 delete mode 100644 packages/components/src/style-provider/index.js
 create mode 100644 packages/components/src/style-provider/index.tsx
 create mode 100644 packages/components/src/style-provider/types.ts

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 57bb3e24c4b601..006f4c123d4354 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -42,6 +42,7 @@
 -   `BoxControl`: Refactor away from `_.isEmpty()` ([#42468](https://github.com/WordPress/gutenberg/pull/42468)).
 -   `RadioControl`: Refactor away from `_.isEmpty()` ([#42468](https://github.com/WordPress/gutenberg/pull/42468)).
 -   `SelectControl`: Refactor away from `_.isEmpty()` ([#42468](https://github.com/WordPress/gutenberg/pull/42468)).
+-   `StyleProvider`: Convert to TypeScript ([#42541](https://github.com/WordPress/gutenberg/pull/42541)).
 -   `ComboboxControl`: Replace `keyboardEvent.keyCode` with `keyboardEvent.code`([#42569](https://github.com/WordPress/gutenberg/pull/42569)).
 -   `ComboboxControl`: Add support for uncontrolled mode ([#42752](https://github.com/WordPress/gutenberg/pull/42752)).
 
diff --git a/packages/components/src/style-provider/index.js b/packages/components/src/style-provider/index.js
deleted file mode 100644
index 66849ffaef6289..00000000000000
--- a/packages/components/src/style-provider/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import memoize from 'memize';
-import * as uuid from 'uuid';
-
-const uuidCache = new Set();
-
-const memoizedCreateCacheWithContainer = memoize( ( container ) => {
-	// Emotion only accepts alphabetical and hyphenated keys so we just strip the numbers from the UUID. It _should_ be fine.
-	let key = uuid.v4().replace( /[0-9]/g, '' );
-	while ( uuidCache.has( key ) ) {
-		key = uuid.v4().replace( /[0-9]/g, '' );
-	}
-	uuidCache.add( key );
-	return createCache( { container, key } );
-} );
-
-export default function StyleProvider( { children, document } ) {
-	if ( ! document ) {
-		return null;
-	}
-
-	const cache = memoizedCreateCacheWithContainer( document.head );
-
-	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
-}
diff --git a/packages/components/src/style-provider/index.tsx b/packages/components/src/style-provider/index.tsx
new file mode 100644
index 00000000000000..0fa2c5b6ca008a
--- /dev/null
+++ b/packages/components/src/style-provider/index.tsx
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import memoize from 'memize';
+import * as uuid from 'uuid';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleProviderProps } from './types';
+
+const uuidCache = new Set();
+
+const memoizedCreateCacheWithContainer = memoize(
+	( container: HTMLElement ) => {
+		// Emotion only accepts alphabetical and hyphenated keys so we just
+		// strip the numbers from the UUID. It _should_ be fine.
+		let key = uuid.v4().replace( /[0-9]/g, '' );
+		while ( uuidCache.has( key ) ) {
+			key = uuid.v4().replace( /[0-9]/g, '' );
+		}
+		uuidCache.add( key );
+		return createCache( { container, key } );
+	}
+);
+
+export function StyleProvider( props: StyleProviderProps ) {
+	const { children, document } = props;
+
+	if ( ! document ) {
+		return null;
+	}
+
+	const cache = memoizedCreateCacheWithContainer( document.head );
+
+	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
+}
+
+export default StyleProvider;
diff --git a/packages/components/src/style-provider/types.ts b/packages/components/src/style-provider/types.ts
new file mode 100644
index 00000000000000..f06899d6c3e16d
--- /dev/null
+++ b/packages/components/src/style-provider/types.ts
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type StyleProviderProps = {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+	/**
+	 * Current document.
+	 */
+	document: Document;
+};