feat: build custom react-select component with Chakra [updated]

package.json

@@ -50,7 +50,7 @@
     "react-i18next": "^13.3.1",
     "react-icons": "^4.10.1",
     "react-lite-youtube-embed": "^2.4.0",
-    "react-select": "^4.3.0",
+    "react-select": "5.8.0",
     "reading-time": "^1.5.0",
     "recharts": "^2.7.3",
     "remark-gfm": "^3.0.1",
@@ -93,4 +93,4 @@
   "resolutions": {
     "jackspeak": "2.1.1"
   }
-}
+}

src/@chakra-ui/components/ReactSelect.ts

@@ -0,0 +1,135 @@
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react"
+
+import { reactSelectAnatomyKeys } from "@/components/ReactSelect/innerComponents"
+
+const $borderBaseWidth = cssVar("border-base-width")
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(reactSelectAnatomyKeys)
+
+const baseStyle = definePartsStyle({
+  container: {
+    [$borderBaseWidth.variable]: "borders.1px",
+    w: "full",
+    minH: 10.5,
+    cursor: "pointer",
+    position: "relative",
+    zIndex: 1,
+    "& > .react-select__menu": {
+      zIndex: -1,
+    },
+  },
+  control: {
+    border: $borderBaseWidth.reference,
+    borderColor: "currentColor",
+    outlineOffset: "-2px",
+    p: 2,
+    gap: 4,
+    _hover: {
+      color: "primary.base",
+      borderColor: "primary.lowContrast",
+    },
+    "&[data-expanded=true]": {
+      bg: "background.highlight",
+      color: "primary.base",
+      borderColor: "primary.lowContrast",
+    },
+    "&:focus-within:not([data-expanded=true])": {
+      outline: "3px solid",
+      outlineColor: "primary.hover",
+      borderColor: "transparent",
+    },
+  },
+  groupHeading: {
+    color: "body.medium",
+  },
+  indicatorIcon: {
+    fontSize: "sm",
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    "*[data-expanded=true] &": {
+      transform: "rotate(180deg)",
+    },
+  },
+  menuList: {
+    bg: "background.highlight",
+    w: "full",
+    maxH: "xs",
+    overflowY: "auto",
+  },
+  option: {
+    color: "body.base",
+    p: 2,
+    "&[data-focused=true]": {
+      bg: "primary.lowContrast",
+      color: "primary.base",
+    },
+    "&[data-active=true]": {
+      bg: "body.light",
+      color: "primary.visited",
+    },
+  },
+})
+
+const $borderTopRadius = cssVar("border-top-radius")
+
+const variantFlushed = definePartsStyle({
+  container: {
+    [$borderTopRadius.variable]: "radii.base",
+    borderTopRadius: $borderTopRadius.reference,
+  },
+  control: {
+    borderTopRadius: $borderTopRadius.reference,
+    borderTopColor: "transparent",
+    borderInlineColor: "transparent",
+    _hover: {
+      borderTopColor: "transparent",
+      borderInlineColor: "transparent",
+    },
+    "&[data-expanded=true]": {
+      borderColor: "body.light",
+      borderBottomColor: "primary.base",
+    },
+  },
+  menuList: {
+    borderInline: $borderBaseWidth.reference,
+    borderBottom: $borderBaseWidth.reference,
+    borderColor: "body.light",
+    borderBottomRadius: "base",
+  },
+})
+
+const $borderOutlineRadius = cssVar("border-outline-radius")
+
+const variantOutline = definePartsStyle({
+  container: {
+    [$borderOutlineRadius.variable]: "radii.base",
+    borderRadius: $borderOutlineRadius.reference,
+  },
+  control: {
+    borderRadius: $borderOutlineRadius.reference,
+    "&[data-expanded=true]": {
+      borderBottomColor: "transparent",
+      borderBottomRadius: "none",
+    },
+  },
+  menuList: {
+    borderInline: $borderBaseWidth.reference,
+    borderBottom: $borderBaseWidth.reference,
+    borderColor: "primary.lowContrast",
+    borderBottomRadius: "base",
+  },
+})
+
+const variants = {
+  flushed: variantFlushed,
+  outline: variantOutline,
+}
+
+export const ReactSelect = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: "flushed",
+  },
+})

src/@chakra-ui/components/index.ts

@@ -21,6 +21,7 @@ import { Link } from "./Link"
 import { Modal } from "./Modal"
 import { Progress } from "./Progress"
 import { Radio } from "./Radio"
+import { ReactSelect } from "./ReactSelect"
 import { Select } from "./Select"
 import { Switch } from "./Switch"
 import { Table } from "./Table"
@@ -50,6 +51,7 @@ export default {
   Modal,
   Progress,
   Radio,
+  ReactSelect,
   Select,
   Spinner: spinnerDefaultTheme,
   Switch,

src/components/CentralizedExchanges/index.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { Box, Center, chakra, Flex } from "@chakra-ui/react"
+import { Box, Center, Flex } from "@chakra-ui/react"
 
 import type { ChildOnlyProp, Lang } from "@/lib/types"
 
@@ -9,7 +9,7 @@ import Emoji from "@/components/Emoji"
 import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
-import { StyledSelect } from "@/components/SharedStyledComponents"
+import ReactSelect from "@/components/ReactSelect"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
@@ -50,10 +50,6 @@ const EmptyStateText = (props: ChildOnlyProp) => (
   <Text m={8} fontSize="xl" maxW="450px" textAlign="center" {...props} />
 )
 
-const Select = chakra(StyledSelect, {
-  baseStyle: { maxW: "container.sm" },
-})
-
 const NoResults = ({ children }) => (
   <EmptyStateContainer>
     <Emoji text=":crying_face:" fontSize="80px" />
@@ -106,14 +102,17 @@ const CentralizedExchanges = ({
       <Text maxW="container.sm" mb={8} lineHeight={1.4} textAlign="center">
         {t("page-get-eth-exchanges-intro")}
       </Text>
-      <Select
-        aria-label={t("page-get-eth-exchanges-header")}
-        className="react-select-container"
-        classNamePrefix="react-select"
-        options={selectOptions}
-        onChange={handleSelectChange as any} // TODO: Fix typing
-        placeholder={placeholderString}
-      />
+      <Box w="full" maxW="container.sm">
+        <ReactSelect
+          instanceId="eth-exchange-region"
+          aria-label={t("page-get-eth-exchanges-header")}
+          options={selectOptions}
+          onChange={handleSelectChange}
+          placeholder={placeholderString}
+          isSearchable
+          variant="outline"
+        />
+      </Box>
       {!hasSelectedCountry && (
         <EmptyStateContainer>
           <Emoji text=":world_map:" fontSize="80px" />