Remove all instances of createStylesContext in favor of `useMultiSt…

…yleConfig`
csandman · Jul 20, 2022 · 0bbb7ad · 0bbb7ad
1 parent 2d04b1b
commit 0bbb7ad
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 46 deletions.
diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
@@ -3,12 +3,8 @@ import type { IconProps } from "@chakra-ui/icon";
 import { Icon } from "@chakra-ui/icon";
 import { Box, Divider } from "@chakra-ui/layout";
 import { Spinner } from "@chakra-ui/spinner";
+import { useMultiStyleConfig, useStyleConfig } from "@chakra-ui/system";
 import type { SystemStyleObject } from "@chakra-ui/system";
-import {
-  createStylesContext,
-  useMultiStyleConfig,
-  useStyleConfig,
-} from "@chakra-ui/system";
 import type {
   ClearIndicatorProps,
   ControlProps,
@@ -19,8 +15,6 @@ import type {
 } from "react-select";
 import type { SizeProps } from "../types";
 
-const [InputStylesProvider, useInputStyles] = createStylesContext("Input");
-
 const Control = <
   Option,
   IsMulti extends boolean,
@@ -46,7 +40,7 @@ const Control = <
     },
   } = props;
 
-  const inputStyles = useMultiStyleConfig("Input", {
+  const { field: fieldStyles } = useMultiStyleConfig("Input", {
     focusBorderColor,
     errorBorderColor,
     size,
@@ -59,7 +53,7 @@ const Control = <
   };
 
   const initialStyles: SystemStyleObject = {
-    ...inputStyles.field,
+    ...fieldStyles,
     display: "flex",
     padding: 0,
     overflow: "hidden",
@@ -72,28 +66,26 @@ const Control = <
     : initialStyles;
 
   return (
-    <InputStylesProvider value={inputStyles}>
-      <Box
-        ref={innerRef}
-        className={cx(
-          {
-            control: true,
-            "control--is-disabled": isDisabled,
-            "control--is-focused": isFocused,
-            "control--menu-is-open": menuIsOpen,
-          },
-          className
-        )}
-        sx={sx}
-        {...innerProps}
-        data-focus={isFocused ? true : undefined}
-        data-focus-visible={isFocused ? true : undefined}
-        data-invalid={isInvalid ? true : undefined}
-        data-disabled={isDisabled ? true : undefined}
-      >
-        {children}
-      </Box>
-    </InputStylesProvider>
+    <Box
+      ref={innerRef}
+      className={cx(
+        {
+          control: true,
+          "control--is-disabled": isDisabled,
+          "control--is-focused": isFocused,
+          "control--menu-is-open": menuIsOpen,
+        },
+        className
+      )}
+      sx={sx}
+      {...innerProps}
+      data-focus={isFocused ? true : undefined}
+      data-focus-visible={isFocused ? true : undefined}
+      data-invalid={isInvalid ? true : undefined}
+      data-disabled={isDisabled ? true : undefined}
+    >
+      {children}
+    </Box>
   );
 };
 
@@ -154,10 +146,20 @@ export const DropdownIndicator = <
     className,
     cx,
     innerProps,
-    selectProps: { size, chakraStyles, useBasicStyles },
+    selectProps: {
+      size,
+      chakraStyles,
+      useBasicStyles,
+      focusBorderColor,
+      errorBorderColor,
+    },
   } = props;
 
-  const { addon } = useInputStyles();
+  const { addon: addonStyles } = useMultiStyleConfig("Input", {
+    focusBorderColor,
+    errorBorderColor,
+    size,
+  });
 
   const iconSizes: SizeProps = {
     sm: "16px",
@@ -167,7 +169,7 @@ export const DropdownIndicator = <
   const iconSize = iconSizes[size || "md"];
 
   const initialStyles: SystemStyleObject = {
-    ...addon,
+    ...addonStyles,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
@@ -5,7 +5,6 @@ import { Box } from "@chakra-ui/layout";
 import { MenuIcon } from "@chakra-ui/menu";
 import type { SystemStyleObject } from "@chakra-ui/system";
 import {
-  createStylesContext,
   useColorModeValue,
   useMultiStyleConfig,
   useTheme,
@@ -21,8 +20,6 @@ import type {
 } from "react-select";
 import type { SizeProps, ThemeObject } from "../types";
 
-const [MenuStylesProvider, useMenuStyles] = createStylesContext("Menu");
-
 const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
   props: MenuProps<Option, IsMulti, Group>
 ) => {
@@ -36,8 +33,6 @@ const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     selectProps: { chakraStyles },
   } = props;
 
-  const menuStyles = useMultiStyleConfig("Menu", {});
-
   const initialStyles: SystemStyleObject = {
     position: "absolute",
     ...(placement === "bottom" && { top: "100%" }),
@@ -59,7 +54,7 @@ const Menu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
       className={cx({ menu: true }, className)}
       sx={sx}
     >
-      <MenuStylesProvider value={menuStyles}>{children}</MenuStylesProvider>
+      {children}
     </Box>
   );
 };
@@ -84,12 +79,12 @@ export const MenuList = <
     selectProps: { size, chakraStyles },
   } = props;
 
-  const { list } = useMenuStyles();
+  const { list: listStyles } = useMultiStyleConfig("Menu");
 
   const borderRadii: SizeProps = useTheme().radii;
 
   const initialStyles: SystemStyleObject = {
-    ...list,
+    ...listStyles,
     maxHeight: `${maxHeight}px`,
     overflowY: "auto",
     borderRadius: borderRadii[size || "md"],
@@ -298,9 +293,9 @@ export const GroupHeading = <
   } = props;
 
   const {
-    groupTitle,
+    groupTitle: groupTitleStyles,
     list: { bg },
-  } = useMenuStyles();
+  } = useMultiStyleConfig("Menu");
 
   const chakraTheme = useTheme();
   const fontSizes: SizeProps = {
@@ -315,7 +310,7 @@ export const GroupHeading = <
   };
 
   const initialStyles: SystemStyleObject = {
-    ...groupTitle,
+    ...groupTitleStyles,
     fontSize: fontSizes[size || "md"],
     padding: paddings[size || "md"],
     margin: 0,
@@ -377,7 +372,7 @@ export const Option = <
     },
   } = props;
 
-  const itemStyles = useMenuStyles().item as ThemeObject;
+  const itemStyles = useMultiStyleConfig("Menu").item as ThemeObject;
 
   const paddings: SizeProps = {
     sm: "0.3rem 0.6rem",