feat: Change selectedOptionColorPalette values pulled from the theme (#364)

* Change selectedOptionColorPalette selected values

* Add consistent-type-imports eslint rule

Author: csandman

.github/images/purple-selected-option-dark.png

@@ -344,7 +344,13 @@ If you choose to stick with the default `selectedOptionStyle="color"`, you have
 one additional styling option. If you do not like the default of blue for the
 highlight color, you can pass the `selectedOptionColorPalette` prop to change
 it. This prop will accept any named color from your theme's color palette, and
-it will use the `500` value in light mode or the `300` value in dark mode.
+it will use `colorPalette.solid` for the background, and `colorPalette.contrast`
+for the text.
+
+If you'd like to use a custom color palette for this prop, ensure that you have
+properly set up the custom color, including the `solid` and `contrast` semantic
+tokens, accoring to
+[the official guide](https://www.chakra-ui.com/guides/theming-custom-colors).
 
 > [!NOTE]
 >

.github/images/purple-selected-option-light.png

@@ -25,6 +25,13 @@ const eslintConfig = tseslint.config(
       ...react.configs.recommended.rules,
       ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          prefer: "type-imports",
+          disallowTypeAnnotations: true,
+        },
+      ],
       "react/prop-types": "off",
       "react-refresh/only-export-components": [
         "warn",

README.md

@@ -10,16 +10,16 @@ import {
   Stack,
   Text,
 } from "@chakra-ui/react";
+import type { GroupBase, LoadingIndicatorProps } from "chakra-react-select";
 import {
   AsyncSelect,
   CreatableSelect,
-  GroupBase,
-  LoadingIndicatorProps,
   Select,
   chakraComponents,
 } from "chakra-react-select";
 import ConnectedSelectMenuExample from "./components/advanced-examples/connected-select-menu-example";
 import CustomIndicatorIconsExample from "./components/advanced-examples/custom-indicator-icons-example";
+import DynamicSelectedOptionColorExample from "./components/advanced-examples/dynamic-selected-option-color-example";
 import MenuPortalTargetExample from "./components/advanced-examples/menu-portal-target-example";
 import OptionsWithIconsExample from "./components/advanced-examples/options-with-icons-example";
 import SelectPopoverExample from "./components/advanced-examples/select-popover-example";
@@ -35,7 +35,8 @@ import {
   SelectValueText,
 } from "./components/ui/select";
 import animeMovies from "./data/anime-movies";
-import { ColorOption, colorOptions, groupedOptions } from "./data/options";
+import type { ColorOption } from "./data/options";
+import { colorOptions, groupedOptions } from "./data/options";
 
 const mappedColorOptions = colorOptions.map((option) => ({
   ...option,
@@ -354,6 +355,16 @@ const App = () => {
           />
         </Field>
 
+        <Field
+          label={
+            <Span>
+              Single Select with dynamic <Code>selectedOptionColorPalette</Code>
+            </Span>
+          }
+        >
+          <DynamicSelectedOptionColorExample />
+        </Field>
+
         <Field
           label={
             <Span>

demo/eslint.config.js

@@ -1,9 +1,5 @@
-import {
-  GroupBase,
-  Select,
-  SelectComponentsConfig,
-  chakraComponents,
-} from "chakra-react-select";
+import type { GroupBase, SelectComponentsConfig } from "chakra-react-select";
+import { Select, chakraComponents } from "chakra-react-select";
 import { LuArrowDown, LuCircleX } from "react-icons/lu";
 import { groupedOptions } from "../../data/options";
 

demo/src/app.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { Select } from "chakra-react-select";
+import type { ColorOption } from "../../data/options";
+import { colorOptions } from "../../data/options";
+
+const DynamicSelectedOptionColorExample = () => {
+  const [selectedOptionColorPalette, setSelectedOptionColorPalette] =
+    useState<ColorOption | null>(colorOptions[0]);
+
+  return (
+    <Select
+      name="colors"
+      options={colorOptions}
+      placeholder="Select a color..."
+      closeMenuOnSelect={false}
+      value={selectedOptionColorPalette}
+      onChange={setSelectedOptionColorPalette}
+      selectedOptionColorPalette={selectedOptionColorPalette?.value}
+    />
+  );
+};
+
+export default DynamicSelectedOptionColorExample;

demo/src/components/advanced-examples/custom-indicator-icons-example.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Stack } from "@chakra-ui/react";
-import { Select, Props as SelectProps } from "chakra-react-select";
+import type { Props as SelectProps } from "chakra-react-select";
+import { Select } from "chakra-react-select";
 import { colorOptions } from "../../data/options";
 import { Button } from "../ui/button";
 import {

demo/src/components/advanced-examples/dynamic-selected-option-color-example.tsx

@@ -1,13 +1,14 @@
 import { useRef, useState } from "react";
 import { Icon } from "@chakra-ui/react";
-import {
+import type {
   ChakraStylesConfig,
-  Select,
   SelectInstance,
   SingleValue,
 } from "chakra-react-select";
+import { Select } from "chakra-react-select";
 import { LuChevronDown, LuSearch } from "react-icons/lu";
-import { StateOption, stateOptions } from "../../data/options";
+import type { StateOption } from "../../data/options";
+import { stateOptions } from "../../data/options";
 import { Button } from "../ui/button";
 import {
   PopoverBody,

demo/src/components/advanced-examples/menu-portal-target-example.tsx

@@ -1,4 +1,4 @@
-import { GroupBase, OptionBase } from "chakra-react-select";
+import type { GroupBase, OptionBase } from "chakra-react-select";
 
 export interface CountryOption extends OptionBase {
   label: string;