Merge pull request #13006 from ethereum/performance/select-context-module

Performance: select styles optimization

Author: nhsz

src/components/Select/context.ts

@@ -0,0 +1,13 @@
+import { createStylesContext, type SystemStyleObject } from "@chakra-ui/react"
+
+import { reactSelectAnatomyKeys } from "./innerComponents"
+
+const [ReactSelectStylesProvider, useReactSelectStyles] =
+  createStylesContext("ReactSelect")
+
+export const SelectStylesProvider = ReactSelectStylesProvider
+
+export const useSelectStyles = useReactSelectStyles as () => Record<
+  (typeof reactSelectAnatomyKeys)[number],
+  SystemStyleObject
+>

src/components/Select/index.tsx

@@ -1,20 +1,8 @@
 import ReactSelect, { ActionMeta, GroupBase, Props } from "react-select"
-import {
-  createStylesContext,
-  type SystemStyleObject,
-  ThemingProps,
-  useMultiStyleConfig,
-} from "@chakra-ui/react"
+import { ThemingProps, useMultiStyleConfig } from "@chakra-ui/react"
 
-import { components, reactSelectAnatomyKeys } from "./innerComponents"
-
-const [ReactSelectStylesProvider, useReactSelectStyles] =
-  createStylesContext("ReactSelect")
-
-export const useSelectStyles = useReactSelectStyles as () => Record<
-  (typeof reactSelectAnatomyKeys)[number],
-  SystemStyleObject
->
+import { SelectStylesProvider } from "./context"
+import { components } from "./innerComponents"
 
 /**
  * Type for onChange handler in the `Select` component
@@ -60,7 +48,7 @@ const Select = <
     variant,
   })
   return (
-    <ReactSelectStylesProvider value={styles}>
+    <SelectStylesProvider value={styles}>
       <ReactSelect
         components={components}
         styles={{
@@ -75,7 +63,7 @@ const Select = <
         unstyled
         menuPlacement="bottom"
       />
-    </ReactSelectStylesProvider>
+    </SelectStylesProvider>
   )
 }
 

src/components/Select/innerComponents.tsx

@@ -11,7 +11,7 @@ import type {
 } from "react-select"
 import { Box, Center, HStack, Icon } from "@chakra-ui/react"
 
-import { useSelectStyles } from "."
+import { useSelectStyles } from "./context"
 
 export const reactSelectAnatomyKeys = [
   "container",