Add all component props along with the select props

csandman · Oct 19, 2023 · 5ef5c15 · 5ef5c15
1 parent 70a20f6
commit 5ef5c15
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 28 deletions.
diff --git a/src/chakra-components/containers.tsx b/src/chakra-components/containers.tsx
@@ -29,7 +29,10 @@ export const SelectContainer = <
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     position: "relative",
@@ -79,11 +82,17 @@ export const ValueContainer = <
 
   const { chakraStyles, controlShouldRenderValue } = selectProps;
 
-  // Getting the css from input instead of select
+  // Getting the styles from input instead of select
   // to fit better with each of the variants
-  const inputStyles = useMultiStyleConfig("Input", selectProps);
+  const inputStyles = useMultiStyleConfig("Input", {
+    ...selectProps,
+    ...props,
+  });
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     display: isMulti && hasValue && controlShouldRenderValue ? "flex" : "grid",
@@ -131,7 +140,10 @@ export const IndicatorsContainer = <
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     display: "flex",

diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
@@ -39,9 +39,15 @@ const Control = <
 
   const {
     field: { height, h, ...fieldStyles },
-  } = useMultiStyleConfig("Input", selectProps);
+  } = useMultiStyleConfig("Input", {
+    ...selectProps,
+    ...props,
+  });
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   /**
    * `@chakra-ui/[email protected]` introduced a breaking change that switched from using `h` to `height` for the Input sizing.
@@ -106,7 +112,10 @@ export const IndicatorSeparator = <
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     opacity: 1,
@@ -153,7 +162,10 @@ export const DropdownIndicator = <
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     display: "flex",
@@ -223,7 +235,10 @@ export const ClearIndicator = <
 
   const closeButtonStyles = useStyleConfig("CloseButton", selectProps);
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     ...closeButtonStyles,
@@ -296,7 +311,10 @@ export const LoadingIndicator = <
   };
   const spinnerSize = spinnerSizes[size];
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     marginRight: 3,

diff --git a/src/chakra-components/input.tsx b/src/chakra-components/input.tsx
@@ -28,7 +28,10 @@ const Input = <
     padding: 0,
   };
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialContainerSx: SystemStyleObject = {
     flex: "1 1 auto",

diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
@@ -36,7 +36,10 @@ const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     position: "absolute",
@@ -87,17 +90,23 @@ export const MenuList = <
 
   const { chakraStyles } = selectProps;
 
-  const menuStyles = useMultiStyleConfig("Menu", selectProps);
+  const menuStyles = useMultiStyleConfig("Menu", {
+    ...selectProps,
+    ...props,
+  });
 
   // We're pulling in the border radius from the theme for the input component
   // so we can match the menu lists' border radius to it, but in 2.8.0 the value
   // was changed to being pulled from a theme variable instead of being hardcoded
-  const fieldStyles = useMultiStyleConfig("Input", selectProps).field as Record<
-    string,
-    string
-  >;
+  const fieldStyles = useMultiStyleConfig("Input", {
+    ...selectProps,
+    ...props,
+  }).field as Record<string, string>;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     ...menuStyles.list,
@@ -154,7 +163,10 @@ export const LoadingMessage = <
     lg: "10px",
   };
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     color: "chakra-subtle-text",
@@ -204,7 +216,10 @@ export const NoOptionsMessage = <
     lg: "10px",
   };
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     color: "chakra-subtle-text",
@@ -258,7 +273,10 @@ export const Group = <
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = crsStyles.group || {};
 
@@ -296,7 +314,10 @@ export const GroupHeading = <
 
   const { chakraStyles, size: sizeProp } = selectProps;
 
-  const menuStyles = useMultiStyleConfig("Menu", selectProps);
+  const menuStyles = useMultiStyleConfig("Menu", {
+    ...selectProps,
+    ...props,
+  });
 
   const size = useSize(sizeProp);
 
@@ -311,7 +332,10 @@ export const GroupHeading = <
     lg: "0.6rem 1.2rem",
   };
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     ...menuStyles.groupTitle,
@@ -414,7 +438,10 @@ export const Option = <
 
   const shouldHighlight = selectedOptionStyle === "color";
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     ...menuItemStyles,

diff --git a/src/chakra-components/multi-value.tsx b/src/chakra-components/multi-value.tsx
@@ -72,12 +72,16 @@ const MultiValue = <
 
   const tagStyles = useMultiStyleConfig("Tag", {
     ...selectProps,
+    ...props,
     colorScheme: optionColorScheme || colorScheme,
     variant:
       optionVariant || tagVariant || (optionIsFixed ? "solid" : "subtle"),
   });
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const containerInitialSx: SystemStyleObject = {
     ...tagStyles.container,

diff --git a/src/chakra-components/placeholder.tsx b/src/chakra-components/placeholder.tsx
@@ -14,7 +14,10 @@ const Placeholder = <
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     gridArea: "1 / 1 / 2 / 3",

diff --git a/src/chakra-components/single-value.tsx b/src/chakra-components/single-value.tsx
@@ -15,7 +15,10 @@ const SingleValue = <
 
   const { chakraStyles } = selectProps;
 
-  const crsStyles = useMultiStyleConfig("ChakraReactSelect", selectProps);
+  const crsStyles = useMultiStyleConfig("ChakraReactSelect", {
+    ...selectProps,
+    ...props,
+  });
 
   const initialSx: SystemStyleObject = {
     gridArea: "1 / 1 / 2 / 3",