improved react-select styles provider

fixed react-select with sortable

assets/components/select/index.js

@@ -3,8 +3,6 @@
  */
 import './editor.scss';
 
-import { useRef } from '@wordpress/element';
-
 import StyleProvider from './style-provider';
 
 /**
@@ -24,7 +22,6 @@ import { arrayMoveImmutable } from 'array-move';
 
 export default function Select(props) {
 	const { value, onChange } = props;
-	const ref = useRef();
 
 	let ThisSelect = ReactSelect;
 
@@ -115,32 +112,27 @@ export default function Select(props) {
 						value && value.length ? value.map((o) => o.value) : []
 					}
 				>
-					<ThisSelect
-						menuPlacement="auto"
-						className="lazyblocks-component-select"
-						styles={selectStyles}
-						{...selectProps}
-					/>
+					<StyleProvider>
+						<ThisSelect
+							menuPlacement="auto"
+							className="lazyblocks-component-select"
+							styles={selectStyles}
+							{...selectProps}
+						/>
+					</StyleProvider>
 				</SortableContext>
 			</DndContext>
 		);
 	}
 
 	return (
-		<>
-			{/*
-			 * Add style provider to fix styles render inside the editor iframe.
-			 * thanks to https://github.com/WordPress/gutenberg/issues/38226#issuecomment-1492422260
-			 */}
-			<link ref={ref} />
-			<StyleProvider document={ref?.current?.ownerDocument || document}>
-				<ThisSelect
-					menuPlacement="auto"
-					className="lazyblocks-component-select"
-					styles={selectStyles}
-					{...selectProps}
-				/>
-			</StyleProvider>
-		</>
+		<StyleProvider>
+			<ThisSelect
+				menuPlacement="auto"
+				className="lazyblocks-component-select"
+				styles={selectStyles}
+				{...selectProps}
+			/>
+		</StyleProvider>
 	);
 }

assets/components/select/style-provider.js

@@ -9,6 +9,8 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import * as uuid from 'uuid';
 
+import { useRef } from '@wordpress/element';
+
 const uuidCache = new Set();
 // Use a weak map so that when the container is detached it's automatically
 // dereferenced to avoid memory leak.
@@ -32,7 +34,7 @@ const memoizedCreateCacheWithContainer = (container) => {
 	return cache;
 };
 
-export function StyleProvider(props) {
+function StyleProvider(props) {
 	const { children, document } = props;
 
 	if (!document) {
@@ -44,4 +46,17 @@ export function StyleProvider(props) {
 	return <CacheProvider value={cache}>{children}</CacheProvider>;
 }
 
-export default StyleProvider;
+export default function StyleProviderWrapper(props) {
+	const { children } = props;
+
+	const ref = useRef();
+
+	return (
+		<>
+			<link ref={ref} />
+			<StyleProvider document={ref?.current?.ownerDocument || document}>
+				{children}
+			</StyleProvider>
+		</>
+	);
+}

build/control-file.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'fd65e99e049582e716ac');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '3ecac941c2a78365745a');

build/editor-constructor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => 'bd35c3b99256221aaea8');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => 'db1a8a7500bc03a20680');

build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '6290b0645f8b3453db5d');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '42402533a6d644122f91');