From 78da8bf794e21a1e17d2c674acaa3b6b9058b63c Mon Sep 17 00:00:00 2001 From: Daniele Sarnari Date: Sat, 22 Mar 2025 16:10:52 +0100 Subject: [PATCH 1/2] fix: update type definitions to use ConditionalValue for color palette props --- src/index.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index e77388f..e8c9241 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import type { ColorPalette, + ConditionalValue, SpinnerProps, SystemStyleObject, } from "@chakra-ui/react"; @@ -87,7 +88,7 @@ declare module "react-select/base" { * @see {@link https://www.chakra-ui.com/docs/components/tag#colors} * @see {@link https://www.chakra-ui.com/docs/styling/virtual-color} */ - tagColorPalette?: ColorPalette; + tagColorPalette?: ConditionalValue; /** * The `variant` prop that will be forwarded to your `MultiValue` component @@ -123,7 +124,7 @@ declare module "react-select/base" { * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolorpalette--default-blue} * @see {@link https://www.chakra-ui.com/docs/theming/customization/colors} */ - selectedOptionColorPalette?: ColorPalette; + selectedOptionColorPalette?: ConditionalValue; /** * The color value to style the border of the `Control` with when the @@ -208,7 +209,7 @@ declare module "react-select" { * * @see {@link https://www.chakra-ui.com/docs/components/spinner#colors} */ - colorPalette?: ColorPalette; + colorPalette?: ConditionalValue; /** * The color of the filled in area of the spinner. From eb912ea0a7427da93f5b151d34f29817c426d441 Mon Sep 17 00:00:00 2001 From: csandman Date: Tue, 25 Mar 2025 12:03:00 -0400 Subject: [PATCH 2/2] Fix the new color palette prop typing --- src/chakra-components/multi-value.tsx | 8 ++++---- src/index.ts | 17 ++++++++--------- src/types.ts | 10 ++++++++++ src/use-chakra-select-props.ts | 9 ++++++--- 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/chakra-components/multi-value.tsx b/src/chakra-components/multi-value.tsx index d356f64..f83f73e 100644 --- a/src/chakra-components/multi-value.tsx +++ b/src/chakra-components/multi-value.tsx @@ -1,4 +1,4 @@ -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, @@ -6,12 +6,12 @@ import type { 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) { diff --git a/src/index.ts b/src/index.ts index e8c9241..28bc6c4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,9 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import type { - ColorPalette, - ConditionalValue, - 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, @@ -87,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?: ConditionalValue; + tagColorPalette?: ColorPaletteProp; /** * The `variant` prop that will be forwarded to your `MultiValue` component @@ -123,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?: ConditionalValue; + selectedOptionColorPalette?: ColorPaletteProp; /** * The color value to style the border of the `Control` with when the @@ -208,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?: ConditionalValue; + colorPalette?: ColorPaletteProp; /** * The color of the filled in area of the spinner. diff --git a/src/types.ts b/src/types.ts index 2fde0c7..9782e64 100644 --- a/src/types.ts +++ b/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 { sm: PropType; md: PropType; diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts index c1b5fe7..a99654e 100644 --- a/src/use-chakra-select-props.ts +++ b/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";