Replace deprecated StylesProvider and useStyles with createStylesContext

- Consolidate files in order to make this change
- Remove `isFocused`/`data-focused` from `ClearIndicator`
- Remove all `ReactElement` return typings
- Unify the way the icons are defined

Author: csandman

src/chakra-components/containers.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import type { ReactElement } from "react";
 import { Box } from "@chakra-ui/layout";
 import type { SystemStyleObject } from "@chakra-ui/system";
 import type {
@@ -16,7 +15,7 @@ export const SelectContainer = <
   Group extends GroupBase<Option>
 >(
   props: ContainerProps<Option, IsMulti, Group>
-): ReactElement => {
+) => {
   const {
     children,
     className,
@@ -65,7 +64,7 @@ export const ValueContainer = <
   Group extends GroupBase<Option>
 >(
   props: ValueContainerProps<Option, IsMulti, Group>
-): ReactElement => {
+) => {
   const {
     children,
     className,
@@ -119,7 +118,7 @@ export const IndicatorsContainer = <
   Group extends GroupBase<Option>
 >(
   props: IndicatorsContainerProps<Option, IsMulti, Group>
-): ReactElement => {
+) => {
   const {
     children,
     className,

src/chakra-components/control.tsx

@@ -1,18 +1,33 @@
 import React from "react";
-import type { ReactElement } from "react";
-import { Box } from "@chakra-ui/layout";
+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 type { SystemStyleObject } from "@chakra-ui/system";
-import { StylesProvider, useMultiStyleConfig } from "@chakra-ui/system";
-import type { ControlProps, GroupBase } from "react-select";
+import {
+  createStylesContext,
+  useMultiStyleConfig,
+  useStyleConfig,
+} from "@chakra-ui/system";
+import type {
+  ClearIndicatorProps,
+  ControlProps,
+  DropdownIndicatorProps,
+  GroupBase,
+  IndicatorSeparatorProps,
+  LoadingIndicatorProps,
+} from "react-select";
 import type { SizeProps } from "../types";
 
+const [InputStylesProvider, useInputStyles] = createStylesContext("Input");
+
 const Control = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 >(
   props: ControlProps<Option, IsMulti, Group>
-): ReactElement => {
+) => {
   const {
     className,
     cx,
@@ -57,7 +72,7 @@ const Control = <
     : initialStyles;
 
   return (
-    <StylesProvider value={inputStyles}>
+    <InputStylesProvider value={inputStyles}>
       <Box
         ref={innerRef}
         className={cx(
@@ -78,7 +93,250 @@ const Control = <
       >
         {children}
       </Box>
-    </StylesProvider>
+    </InputStylesProvider>
+  );
+};
+
+export const IndicatorSeparator = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: IndicatorSeparatorProps<Option, IsMulti, Group>
+) => {
+  const {
+    className,
+    cx,
+    selectProps: { chakraStyles, useBasicStyles },
+  } = props;
+
+  const initialStyles: SystemStyleObject = {
+    opacity: 1,
+    ...(useBasicStyles && { display: "none" }),
+  };
+
+  const sx: SystemStyleObject = chakraStyles?.indicatorSeparator
+    ? chakraStyles.indicatorSeparator(initialStyles, props)
+    : initialStyles;
+
+  return (
+    <Divider
+      className={cx({ "indicator-separator": true }, className)}
+      sx={sx}
+      orientation="vertical"
+    />
+  );
+};
+
+/**
+ * Borrowed from the `@chakra-ui/icons` package to prevent needing it as a dependency
+ *
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/icons/src/ChevronDown.tsx}
+ */
+export const DownChevron = (props: IconProps) => (
+  <Icon {...props}>
+    <path
+      fill="currentColor"
+      d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+    />
+  </Icon>
+);
+
+export const DropdownIndicator = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: DropdownIndicatorProps<Option, IsMulti, Group>
+) => {
+  const {
+    children,
+    className,
+    cx,
+    innerProps,
+    selectProps: { size, chakraStyles, useBasicStyles },
+  } = props;
+
+  const { addon } = useInputStyles();
+
+  const iconSizes: SizeProps = {
+    sm: "16px",
+    md: "20px",
+    lg: "24px",
+  };
+  const iconSize = iconSizes[size || "md"];
+
+  const initialStyles: SystemStyleObject = {
+    ...addon,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    borderRadius: 0,
+    borderWidth: 0,
+    cursor: "pointer",
+    fontSize: iconSize,
+    ...(useBasicStyles && {
+      background: "transparent",
+      padding: 0,
+      width: 6,
+      marginRight: 2,
+      marginLeft: 1,
+      cursor: "inherit",
+    }),
+  };
+  const sx: SystemStyleObject = chakraStyles?.dropdownIndicator
+    ? chakraStyles.dropdownIndicator(initialStyles, props)
+    : initialStyles;
+
+  const initialIconStyles = {
+    height: "1em",
+    width: "1em",
+  };
+  const iconSx: SystemStyleObject = chakraStyles?.downChevron
+    ? chakraStyles.downChevron(initialIconStyles, props)
+    : initialIconStyles;
+
+  return (
+    <Box
+      {...innerProps}
+      className={cx(
+        {
+          indicator: true,
+          "dropdown-indicator": true,
+        },
+        className
+      )}
+      sx={sx}
+    >
+      {children || <DownChevron sx={iconSx} />}
+    </Box>
+  );
+};
+
+/**
+ * Borrowed from Chakra UI source
+ *
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
+ */
+export const CrossIcon = (props: IconProps) => (
+  <Icon focusable="false" aria-hidden {...props}>
+    <path
+      fill="currentColor"
+      d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
+    />
+  </Icon>
+);
+
+export const ClearIndicator = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: ClearIndicatorProps<Option, IsMulti, Group>
+) => {
+  const {
+    children,
+    className,
+    cx,
+    innerProps,
+    selectProps: { size, chakraStyles },
+  } = props;
+
+  const closeButtonStyles = useStyleConfig("CloseButton", {
+    size,
+  });
+
+  const initialStyles: SystemStyleObject = {
+    ...closeButtonStyles,
+    marginX: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    cursor: "pointer",
+  };
+  const sx: SystemStyleObject = chakraStyles?.clearIndicator
+    ? chakraStyles.clearIndicator(initialStyles, props)
+    : initialStyles;
+
+  const initialIconStyles: SystemStyleObject = {
+    width: "1em",
+    height: "1em",
+  };
+  const iconSx: SystemStyleObject = chakraStyles?.crossIcon
+    ? chakraStyles.crossIcon(initialIconStyles, props)
+    : initialIconStyles;
+
+  return (
+    <Box
+      role="button"
+      className={cx(
+        {
+          indicator: true,
+          "clear-indicator": true,
+        },
+        className
+      )}
+      sx={sx}
+      aria-label="Clear selected options"
+      {...innerProps}
+    >
+      {children || <CrossIcon sx={iconSx} />}
+    </Box>
+  );
+};
+
+export const LoadingIndicator = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: LoadingIndicatorProps<Option, IsMulti, Group>
+) => {
+  const {
+    className,
+    cx,
+    innerProps,
+    selectProps: { size, chakraStyles },
+    color,
+    emptyColor,
+    speed,
+    thickness,
+    spinnerSize: propsSpinnerSize,
+  } = props;
+
+  const spinnerSizes: SizeProps<string> = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  const spinnerSize = spinnerSizes[size || "md"];
+
+  const initialStyles: SystemStyleObject = { marginRight: 3 };
+
+  const sx: SystemStyleObject = chakraStyles?.loadingIndicator
+    ? chakraStyles.loadingIndicator(initialStyles, props)
+    : initialStyles;
+
+  return (
+    <Spinner
+      className={cx(
+        {
+          indicator: true,
+          "loading-indicator": true,
+        },
+        className
+      )}
+      sx={sx}
+      {...innerProps}
+      size={propsSpinnerSize || spinnerSize}
+      color={color}
+      emptyColor={emptyColor}
+      speed={speed}
+      thickness={thickness}
+    />
   );
 };