fix: update type definitions to use ConditionalValue for color palette props (#362)

* fix: update type definitions to use ConditionalValue for color palette props

* Fix the new color palette prop typing

---------

Co-authored-by: Chris Sandvik <[email protected]>

Author: Daniele Sarnari

src/chakra-components/multi-value.tsx

@@ -1,17 +1,17 @@
-import type { ColorPalette, SystemStyleObject } from "@chakra-ui/react";
+import type { SystemStyleObject } from "@chakra-ui/react";
 import { Span, useChakraContext, useSlotRecipe } from "@chakra-ui/react";
 import type {
   GroupBase,
   MultiValueGenericProps,
   MultiValueProps,
   MultiValueRemoveProps,
 } from "react-select";
-import type { TagVariant } from "../types";
+import type { ColorPaletteProp, TagVariant } from "../types";
 import { CloseIcon } from "./icons";
 
 const hasColorPalette = (
   option: unknown
-): option is { colorPalette: ColorPalette } =>
+): option is { colorPalette: ColorPaletteProp } =>
   typeof option === "object" &&
   option !== null &&
   "colorPalette" in option &&
@@ -52,7 +52,7 @@ export const MultiValue = <
   const { colorPalette: themeTagColorPalette, variant: defaultTagVariant } =
     chakraContext.getSlotRecipe("tag").defaultVariants ?? {};
 
-  let optionColorPalette: ColorPalette | undefined = themeTagColorPalette;
+  let optionColorPalette: ColorPaletteProp = themeTagColorPalette;
   if (hasColorPalette(data)) {
     optionColorPalette = data.colorPalette;
   } else if (tagColorPalette) {

src/index.ts

@@ -1,12 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import type {
-  ColorPalette,
-  SpinnerProps,
-  SystemStyleObject,
-} from "@chakra-ui/react";
+import type { SpinnerProps, SystemStyleObject } from "@chakra-ui/react";
 import type { GroupBase, StylesConfig, ThemeConfig } from "react-select";
 import type {
   ChakraStylesConfig,
+  ColorPaletteProp,
   SelectedOptionStyle,
   SizeProp,
   TagVariant,
@@ -86,8 +83,9 @@ declare module "react-select/base" {
      * @see {@link https://github.com/csandman/chakra-react-select#colorscheme}
      * @see {@link https://www.chakra-ui.com/docs/components/tag#colors}
      * @see {@link https://www.chakra-ui.com/docs/styling/virtual-color}
+     * @see {@link https://github.com/chakra-ui/chakra-ui/blob/9ecae5c/packages/react/src/styled-system/generated/system.gen.ts#L688}
      */
-    tagColorPalette?: ColorPalette;
+    tagColorPalette?: ColorPaletteProp;
 
     /**
      * The `variant` prop that will be forwarded to your `MultiValue` component
@@ -122,8 +120,9 @@ declare module "react-select/base" {
      * @defaultValue `blue`
      * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolorpalette--default-blue}
      * @see {@link https://www.chakra-ui.com/docs/theming/customization/colors}
+     * @see {@link https://github.com/chakra-ui/chakra-ui/blob/9ecae5c/packages/react/src/styled-system/generated/system.gen.ts#L688}
      */
-    selectedOptionColorPalette?: ColorPalette;
+    selectedOptionColorPalette?: ColorPaletteProp;
 
     /**
      * The color value to style the border of the `Control` with when the
@@ -207,8 +206,9 @@ declare module "react-select" {
      * The color palette of the filled in area of the spinner.
      *
      * @see {@link https://www.chakra-ui.com/docs/components/spinner#colors}
+     * @see {@link https://github.com/chakra-ui/chakra-ui/blob/9ecae5c/packages/react/src/styled-system/generated/system.gen.ts#L688}
      */
-    colorPalette?: ColorPalette;
+    colorPalette?: ColorPaletteProp;
 
     /**
      * The color of the filled in area of the spinner.

src/types.ts

@@ -1,4 +1,6 @@
 import type {
+  ColorPalette,
+  ConditionalValue,
   SelectRootProps,
   SystemStyleObject,
   TagRootProps,
@@ -26,6 +28,14 @@ import type {
   ValueContainerProps,
 } from "react-select";
 
+export type CssVars = `var(--${string})`;
+
+export type AnyString = string & {};
+
+export type ColorPaletteProp = ConditionalValue<
+  ColorPalette | CssVars | AnyString
+>;
+
 export interface SizeProps<PropType extends string | number = string | number> {
   sm: PropType;
   md: PropType;

src/use-chakra-select-props.ts

@@ -1,8 +1,11 @@
-import type { ColorPalette } from "@chakra-ui/react";
 import { useFieldContext } from "@chakra-ui/react";
 import type { GroupBase, Props } from "react-select";
 import chakraComponents from "./chakra-components";
-import type { SelectedOptionStyle, UseFieldReturn } from "./types";
+import type {
+  ColorPaletteProp,
+  SelectedOptionStyle,
+  UseFieldReturn,
+} from "./types";
 
 const useChakraSelectProps = <
   Option,
@@ -42,7 +45,7 @@ const useChakraSelectProps = <
   }
 
   // Ensure that the color used for the selected options is a string
-  let realSelectedOptionColorPalette: ColorPalette =
+  let realSelectedOptionColorPalette: ColorPaletteProp =
     selectedOptionColorPalette || "blue";
   if (typeof realSelectedOptionColorPalette !== "string") {
     realSelectedOptionColorPalette = "blue";