Move the placeholderColor prop out of the global props

Author: csandman

src/chakra-components/menu.tsx

@@ -127,9 +127,16 @@ export const LoadingMessage = <
     className,
     cx,
     innerProps,
-    selectProps: { size, placeholderColor, chakraStyles },
+    selectProps: { size, chakraStyles },
   } = props;
 
+  /**
+   * The chakra UI global placeholder color
+   *
+   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
+   */
+  const color = useColorModeValue("gray.400", "whiteAlpha.400");
+
   const fontSizes: SizeProps = {
     sm: "0.875rem",
     md: "1rem",
@@ -143,7 +150,7 @@ export const LoadingMessage = <
   };
 
   const initialStyles: SystemStyleObject = {
-    color: placeholderColor,
+    color,
     textAlign: "center",
     padding: paddings[size || "md"],
     fontSize: fontSizes[size || "md"],
@@ -182,9 +189,16 @@ export const NoOptionsMessage = <
     className,
     cx,
     innerProps,
-    selectProps: { size, placeholderColor, chakraStyles },
+    selectProps: { size, chakraStyles },
   } = props;
 
+  /**
+   * The chakra UI global placeholder color
+   *
+   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
+   */
+  const color = useColorModeValue("gray.400", "whiteAlpha.400");
+
   const fontSizes: SizeProps = {
     sm: "0.875rem",
     md: "1rem",
@@ -198,7 +212,7 @@ export const NoOptionsMessage = <
   };
 
   const initialStyles: SystemStyleObject = {
-    color: placeholderColor,
+    color,
     textAlign: "center",
     padding: paddings[size || "md"],
     fontSize: fontSizes[size || "md"],

src/chakra-components/placeholder.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box } from "@chakra-ui/layout";
 import type { SystemStyleObject } from "@chakra-ui/system";
+import { useColorModeValue } from "@chakra-ui/system";
 import type { GroupBase, PlaceholderProps } from "react-select";
 
 const Placeholder = <
@@ -15,9 +16,16 @@ const Placeholder = <
     className,
     cx,
     innerProps,
-    selectProps: { placeholderColor, chakraStyles },
+    selectProps: { chakraStyles },
   } = props;
 
+  /**
+   * The chakra UI global placeholder color
+   *
+   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
+   */
+  const placeholderColor = useColorModeValue("gray.400", "whiteAlpha.400");
+
   const initialStyles: SystemStyleObject = {
     color: placeholderColor,
     mx: "0.125rem",

src/module-augmentation.ts

@@ -139,15 +139,6 @@ declare module "react-select/dist/declarations/src/Select" {
      */
     errorBorderColor?: string;
 
-    /**
-     * The color used to style the text in the `Placeholder`, `LoadingMessage`,
-     * and `NoOptionsMessage`.
-     *
-     * @defaultValue Light mode: `gray.400` | Dark mode: `whiteAlpha.400`
-     * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts#L13}
-     */
-    placeholderColor?: string;
-
     /**
      * Style transformation methods for each of the rendered components using,
      * Chakra's `SystemStyleObject` and the props passed into each component

src/use-chakra-select-props.ts

@@ -1,5 +1,4 @@
 import { useFormControl } from "@chakra-ui/form-control";
-import { useColorModeValue } from "@chakra-ui/system";
 import type { GroupBase, Props } from "react-select";
 import chakraComponents from "./chakra-components";
 import type { SelectedOptionStyle, Size, TagVariant } from "./types";
@@ -44,13 +43,6 @@ const useChakraSelectProps = <
     onBlur,
   });
 
-  /**
-   * The chakra UI global placeholder color
-   *
-   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/styles.ts#L13}
-   */
-  const placeholderColor = useColorModeValue("gray.400", "whiteAlpha.400");
-
   /** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */
   let realSize: Size = size;
   const sizeOptions: Size[] = ["sm", "md", "lg"];
@@ -96,7 +88,6 @@ const useChakraSelectProps = <
     selectedOptionStyle: realSelectedOptionStyle,
     selectedOptionColor: realSelectedOptionColor,
     hasStickyGroupHeaders,
-    placeholderColor,
     chakraStyles,
     focusBorderColor,
     errorBorderColor,