[CFE-599]: Refactor(components): react select input

.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import customTheme from "../src/lib/styles/theme";
+import defaultTheme from "../src/lib/styles/theme";
 
 const preview: Preview = {
   parameters: {
@@ -11,7 +11,7 @@ const preview: Preview = {
       },
     },
     chakra: {
-      theme: customTheme,
+      theme: defaultTheme,
     },
   },
 };

CHANGELOG.md

@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1149](https://github.com/alleslabs/celatone-frontend/pull/1149) Refactor component react select input
 - [#1094](https://github.com/alleslabs/celatone-frontend/pull/1094) Replace getFirstQueryParam with zod validation
 
 ### Bug fixes

src/lib/components/TxRelationSelection.tsx

@@ -3,7 +3,7 @@ import { Box } from "@chakra-ui/react";
 
 import type { Option } from "lib/types";
 
-import { SelectInput } from "./forms";
+import { SelectInputBase } from "./forms";
 
 enum RelationType {
   ALL = "ALL",
@@ -55,7 +55,7 @@ export const TxRelationSelection = ({
 
   return (
     <Box {...props}>
-      <SelectInput
+      <SelectInputBase
         formLabel="Filter by Relation"
         size={size}
         options={relationOptions}

src/lib/components/abi/args-form/field/ArgFieldWidget.tsx

@@ -1,8 +1,8 @@
 import { Input, Textarea } from "@chakra-ui/react";
-import { Select } from "chakra-react-select";
 import type { ControllerRenderProps } from "react-hook-form";
 
 import { useCurrentChain, useExampleAddresses } from "lib/app-provider";
+import { SelectInput } from "lib/components/forms";
 import type { BechAddr20, Nullable } from "lib/types";
 
 import {
@@ -86,39 +86,16 @@ export const ArgFieldWidget = ({
 
   if (type === "bool")
     return (
-      <Select
+      <SelectInput
         classNamePrefix="chakra-react-select"
         size="md"
         options={boolOptions}
-        placeholder={" "}
+        placeholder=""
         value={boolOptions.find(
           ({ value: optionValue }) => optionValue === value
         )}
-        onChange={(e) => onChange(e?.value)}
-        menuPosition="fixed"
+        onChange={(newValue) => onChange(newValue?.value)}
         menuPortalTarget={document.body}
-        chakraStyles={{
-          control: (provided) => ({
-            ...provided,
-            _disabled: {
-              color: "text.main",
-            },
-          }),
-          dropdownIndicator: (provided, state) => ({
-            ...provided,
-            color: state.isDisabled ? "gray.700" : undefined,
-          }),
-          option: (provided) => ({
-            ...provided,
-            color: "text.main",
-            _hover: {
-              bg: "gray.700",
-            },
-            _selected: {
-              bg: "gray.800",
-            },
-          }),
-        }}
       />
     );
 

src/lib/components/forms/FilterByPermission.tsx

@@ -3,7 +3,7 @@ import { Grid } from "@chakra-ui/react";
 import type { IconKeys } from "../icon";
 import type { PermissionFilterValue } from "lib/hooks";
 
-import { SelectInput } from "./SelectInput";
+import { SelectInputBase } from "./SelectInputBase";
 
 interface PermissionOption {
   label: string;
@@ -51,7 +51,7 @@ export const FilterByPermission = ({
   maxWidth = "360px",
 }: FilterByPermissionProps) => (
   <Grid columnGap={4} w="full" maxW={{ md: maxWidth }}>
-    <SelectInput<PermissionFilterValue>
+    <SelectInputBase<PermissionFilterValue>
       formLabel="Filter by Instantiate Permission"
       options={options}
       onChange={setPermissionValue}