From 5ca998741e978a6be402475548f0a5f4fef2def0 Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 18:54:07 -0400
Subject: [PATCH 1/8] Simplify theme typings

---
 src/index.ts               |  1 +
 src/module-augmentation.ts |  7 ++++---
 src/types.ts               | 12 +++++-------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 29edbe4..2027831 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,6 +18,7 @@ export type {
   Size,
   TagVariant,
   SelectedOptionStyle,
+  ColorScheme,
   StylesFunction,
   ChakraStylesConfig,
   OptionBase,
diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts
index 132519e..acec7f0 100644
--- a/src/module-augmentation.ts
+++ b/src/module-augmentation.ts
@@ -3,6 +3,7 @@ import type { SystemStyleObject } from "@chakra-ui/system";
 import type { GroupBase, StylesConfig, ThemeConfig } from "react-select";
 import type {
   ChakraStylesConfig,
+  ColorScheme,
   SelectedOptionStyle,
   SizeProp,
   TagVariant,
@@ -86,7 +87,7 @@ declare module "react-select/base" {
      * @see {@link https://github.com/csandman/chakra-react-select#colorscheme}
      * @see {@link https://chakra-ui.com/docs/components/tag/props}
      */
-    colorScheme?: string;
+    colorScheme?: ColorScheme;
 
     /**
      * The `variant` prop that will be forwarded to your `MultiValue` component
@@ -132,12 +133,12 @@ declare module "react-select/base" {
      * @defaultValue `blue`
      * @see {@link https://github.com/csandman/chakra-react-select#selectedoptioncolorscheme--default-blue}
      */
-    selectedOptionColorScheme?: string;
+    selectedOptionColorScheme?: ColorScheme;
 
     /**
      * @deprecated Replaced by {@link selectedOptionColorScheme}
      */
-    selectedOptionColor?: string;
+    selectedOptionColor?: ColorScheme;
 
     /**
      * The color value to style the border of the `Control` with when the
diff --git a/src/types.ts b/src/types.ts
index 87cb0bc..1e8fa5d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,6 +2,7 @@ import type {
   Pseudos,
   ResponsiveObject,
   SystemStyleObject,
+  ThemeTypings,
 } from "@chakra-ui/system";
 import type {
   ClearIndicatorProps,
@@ -45,16 +46,13 @@ export type Size = "sm" | "md" | "lg";
 
 export type SizeProp = Size | ResponsiveObject<Size> | Size[];
 
-export type TagVariant = "subtle" | "solid" | "outline" | (string & {});
+export type TagVariant = ThemeTypings["components"]["Tag"]["variants"];
 
 export type SelectedOptionStyle = "color" | "check";
 
-export type Variant =
-  | "outline"
-  | "filled"
-  | "flushed"
-  | "unstyled"
-  | (string & {});
+export type Variant = ThemeTypings["components"]["Input"]["variants"];
+
+export type ColorScheme = ThemeTypings["colorSchemes"];
 
 export type StylesFunction<ComponentProps> = (
   provided: SystemStyleObject,

From 342f8490d2d23e607e43bfe2ed5e5a8dee6ff7c0 Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 18:55:57 -0400
Subject: [PATCH 2/8] Update doc comment links

---
 src/chakra-components/control.tsx | 5 +++--
 src/module-augmentation.ts        | 7 +++++--
 src/utils.ts                      | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index 17f4679..46b828a 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -139,7 +139,8 @@ export const IndicatorSeparator = <
 /**
  * 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}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/icons/src/ChevronDown.tsx}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
  */
 export const DownChevron = (props: IconProps) => (
   <Icon {...props}>
@@ -237,7 +238,7 @@ export const DropdownIndicator = <
 /**
  * Borrowed from Chakra UI source
  *
- * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/close-button/src/close-button.tsx#L12-L21}
  */
 export const CrossIcon = (props: IconProps) => (
   <Icon focusable="false" aria-hidden {...props}>
diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts
index acec7f0..2f2b74f 100644
--- a/src/module-augmentation.ts
+++ b/src/module-augmentation.ts
@@ -69,11 +69,14 @@ declare module "react-select/base" {
     /**
      * If true, the form control will be required. This has 2 side effects:
      *
-     * - The `FormLabel` will show a required indicator
-     * - The form element (e.g, Input) will have `aria-required` set to true
+     * - The hidden input element will get the required attribute, triggering native form validation on submit
+     * - The combobox input will have `aria-required` set to true
      *
      * @see {@link https://chakra-ui.com/docs/components/input/props}
      * @see {@link https://chakra-ui.com/docs/components/form-control/props}
+	@@ -86,7 +87,7 @@ declare module "react-select/base" {
+     * @see {@link https://github.com/csandman/chakra-react-select#colorscheme}
+     * @see {@link https://chakra-ui.com/docs/components/tag/props}
      */
     isRequired?: boolean;
 
diff --git a/src/utils.ts b/src/utils.ts
index bd941e6..520de23 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -8,7 +8,7 @@ import type { Size, SizeProp } from "./types";
  *
  * Borrowed from the original `react-select` package
  *
- * @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
+ * @see {@link https://github.com/JedWatson/react-select/blob/2f94e8d/packages/react-select/src/utils.ts#L79-L110}
  */
 export const cleanCommonProps = <
   Option,

From 19837d11abb5c76135e3d151cad02e7099a0567e Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 18:58:55 -0400
Subject: [PATCH 3/8] Add other aria props missing from DownChevron

---
 src/chakra-components/control.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index 46b828a..067bf4c 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -143,7 +143,7 @@ export const IndicatorSeparator = <
  * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
  */
 export const DownChevron = (props: IconProps) => (
-  <Icon {...props}>
+  <Icon role="presentation" focusable="false" aria-hidden="true" {...props}>
     <path
       fill="currentColor"
       d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"

From 08226e62db0787346fb104e88da504d0a60bd485 Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 19:01:17 -0400
Subject: [PATCH 4/8] Unify variable names and types

---
 src/chakra-components/control.tsx | 20 ++++++++++----------
 src/chakra-components/menu.tsx    |  5 ++---
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index 067bf4c..13540db 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -188,7 +188,7 @@ export const DropdownIndicator = <
   };
   const iconSize = iconSizes[size];
 
-  const initialSx: SystemStyleObject = {
+  const initialDropdownIndicatorSx: SystemStyleObject = {
     ...inputStyles.addon,
     display: "flex",
     alignItems: "center",
@@ -206,17 +206,17 @@ export const DropdownIndicator = <
       cursor: "inherit",
     }),
   };
-  const sx = chakraStyles?.dropdownIndicator
-    ? chakraStyles.dropdownIndicator(initialSx, props)
-    : initialSx;
+  const dropdownIndicatorSx = chakraStyles?.dropdownIndicator
+    ? chakraStyles.dropdownIndicator(initialDropdownIndicatorSx, props)
+    : initialDropdownIndicatorSx;
 
-  const initialIconStyles = {
+  const initialDownChevronSx: SystemStyleObject = {
     height: "1em",
     width: "1em",
   };
-  const iconSx: SystemStyleObject = chakraStyles?.downChevron
-    ? chakraStyles.downChevron(initialIconStyles, props)
-    : initialIconStyles;
+  const downChevronSx = chakraStyles?.downChevron
+    ? chakraStyles.downChevron(initialDownChevronSx, props)
+    : initialDownChevronSx;
 
   return (
     <Box
@@ -228,9 +228,9 @@ export const DropdownIndicator = <
         },
         className
       )}
-      sx={sx}
+      sx={dropdownIndicatorSx}
     >
-      {children || <DownChevron sx={iconSx} />}
+      {children || <DownChevron sx={downChevronSx} />}
     </Box>
   );
 };
diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index 99c8bc5..97e2a2a 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -394,12 +394,11 @@ export const Option = <
 
   // Don't create exta space for the checkmark if using a multi select with
   // options that dissapear when they're selected
-  const showCheckIcon: boolean =
+  const showCheckIcon =
     selectedOptionStyle === "check" &&
     (!isMulti || hideSelectedOptions === false);
 
-  const shouldHighlight: boolean =
-    selectedOptionStyle === "color" && isSelected;
+  const shouldHighlight = selectedOptionStyle === "color";
 
   const initialSx: SystemStyleObject = {
     ...menuItemStyles,

From 6b87a8516a51c4f6ef2b665aecdbf15d6dd6b470 Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 19:06:48 -0400
Subject: [PATCH 5/8] Update one more doc comment

---
 src/chakra-components/menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index 97e2a2a..1705706 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -382,9 +382,9 @@ export const Option = <
   };
 
   /**
-   * Use the same selected color as the border of the select component
+   * Use the same selected color as the border/shadow of the select/input components
    *
-   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/components/input.ts#L73}
+   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/theme/src/components/input.ts#L92-L93}
    */
   const selectedBg = useColorModeValue(
     `${selectedOptionColorScheme}.500`,

From 09a53391c1b32424d58a527a0ae3974665345b4a Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 19:15:44 -0400
Subject: [PATCH 6/8] Fix GroupHeading props

---
 src/chakra-components/menu.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index 1705706..86659e3 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -14,7 +14,7 @@ import type {
   OptionProps,
 } from "react-select";
 import type { SizeProps, ThemeObject } from "../types";
-import { useSize } from "../utils";
+import { cleanCommonProps, useSize } from "../utils";
 
 const alignToControl = (placement: CoercedMenuPlacement) => {
   const placementToCSSProp = { bottom: "top", top: "bottom" };
@@ -288,11 +288,12 @@ export const GroupHeading = <
   const {
     cx,
     className,
-    children,
     // eslint-disable-next-line deprecation/deprecation
     selectProps: { chakraStyles, size: sizeProp, hasStickyGroupHeaders },
   } = props;
 
+  const { data, ...innerProps } = cleanCommonProps(props);
+
   const menuStyles = useMultiStyleConfig("Menu");
 
   const size = useSize(sizeProp);
@@ -325,9 +326,11 @@ export const GroupHeading = <
     : initialSx;
 
   return (
-    <Box className={cx({ "group-heading": true }, className)} sx={sx}>
-      {children}
-    </Box>
+    <Box
+      {...innerProps}
+      className={cx({ "group-heading": true }, className)}
+      sx={sx}
+    />
   );
 };
 

From 8ddad8211dcebf8bca7f356b3c830c6177287e49 Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 19:16:42 -0400
Subject: [PATCH 7/8] Clean up all aria props and base styles on them

---
 src/chakra-components/control.tsx |  2 +-
 src/chakra-components/input.tsx   |  4 +--
 src/chakra-components/menu.tsx    | 42 ++++++++++++++++++-------------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index 13540db..a647a8f 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -98,7 +98,7 @@ const Control = <
       data-focus-visible={isFocused ? true : undefined}
       data-invalid={isInvalid ? true : undefined}
       data-disabled={isDisabled ? true : undefined}
-      aria-readonly={isReadOnly ? true : undefined}
+      data-readonly={isReadOnly ? true : undefined}
     >
       {children}
     </Box>
diff --git a/src/chakra-components/input.tsx b/src/chakra-components/input.tsx
index d027ba8..14b1822 100644
--- a/src/chakra-components/input.tsx
+++ b/src/chakra-components/input.tsx
@@ -16,7 +16,7 @@ const Input = <
     className,
     cx,
     value,
-    selectProps: { chakraStyles, isReadOnly, isRequired },
+    selectProps: { chakraStyles, isReadOnly },
   } = props;
   const { innerRef, isDisabled, isHidden, inputClassName, ...innerProps } =
     cleanCommonProps(props);
@@ -76,8 +76,6 @@ const Input = <
         sx={inputSx}
         disabled={isDisabled}
         readOnly={isReadOnly ? true : undefined}
-        aria-readonly={isReadOnly ? true : undefined}
-        aria-required={isRequired ? true : undefined}
         {...innerProps}
       />
     </Box>
diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index 86659e3..a2c53d8 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -118,6 +118,7 @@ export const MenuList = <
 
   return (
     <Box
+      role="listbox"
       {...innerProps}
       className={cx(
         {
@@ -259,7 +260,10 @@ export const Group = <
 
   const { chakraStyles } = selectProps;
 
-  const sx = chakraStyles?.group ? chakraStyles.group({}, props) : {};
+  const initialSx: SystemStyleObject = {};
+  const sx = chakraStyles?.group
+    ? chakraStyles.group(initialSx, props)
+    : initialSx;
 
   return (
     <Box {...innerProps} className={cx({ group: true }, className)} sx={sx}>
@@ -374,14 +378,18 @@ export const Option = <
     },
   } = props;
 
-  const size = useSize(sizeProp);
-
   const menuItemStyles: ThemeObject = useMultiStyleConfig("Menu").item;
 
-  const paddings: SizeProps = {
-    sm: "0.3rem 0.6rem",
-    md: "0.4rem 0.8rem",
-    lg: "0.5rem 1rem",
+  const size = useSize(sizeProp);
+  const horizontalPaddingOptions: SizeProps = {
+    sm: "0.6rem",
+    md: "0.8rem",
+    lg: "1rem",
+  };
+  const verticalPaddingOptions: SizeProps = {
+    sm: "0.3rem",
+    md: "0.4rem",
+    lg: "0.5rem",
   };
 
   /**
@@ -410,25 +418,24 @@ export const Option = <
     width: "100%",
     textAlign: "start",
     fontSize: size,
-    padding: paddings[size],
-    ...(isFocused && menuItemStyles._focus),
+    paddingX: horizontalPaddingOptions[size],
+    paddingY: verticalPaddingOptions[size],
     ...(shouldHighlight && {
-      bg: selectedBg,
-      color: selectedColor,
-      _active: { bg: selectedBg },
+      _selected: {
+        bg: selectedBg,
+        color: selectedColor,
+        _active: { bg: selectedBg },
+      },
     }),
-    ...(isDisabled && menuItemStyles._disabled),
-    ...(isDisabled && { _active: {} }),
   };
 
   const sx = chakraStyles?.option
     ? chakraStyles.option(initialSx, props)
     : initialSx;
-
   return (
     <Box
+      role="option"
       {...innerProps}
-      role="button"
       className={cx(
         {
           option: true,
@@ -440,8 +447,9 @@ export const Option = <
       )}
       sx={sx}
       ref={innerRef}
-      data-disabled={isDisabled ? true : undefined}
+      data-focus={isFocused ? true : undefined}
       aria-disabled={isDisabled ? true : undefined}
+      aria-selected={isSelected}
     >
       {showCheckIcon && (
         <MenuIcon

From e434952c76196f1b89ce8c9717a32579f452c630 Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Thu, 26 Oct 2023 19:30:22 -0400
Subject: [PATCH 8/8] Add cursor styles to match old styles (from
 role="button")

---
 src/chakra-components/menu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index a2c53d8..190b4ff 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -413,6 +413,7 @@ export const Option = <
 
   const initialSx: SystemStyleObject = {
     ...menuItemStyles,
+    cursor: "pointer",
     display: "flex",
     alignItems: "center",
     width: "100%",