Merge pull request #296 from csandman/chore/cleanup

chore: Fix `GroupHeading` props + some other cleanup

Author: csandman

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>
@@ -139,10 +139,11 @@ 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}>
+  <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"
@@ -187,7 +188,7 @@ export const DropdownIndicator = <
   };
   const iconSize = iconSizes[size];
 
-  const initialSx: SystemStyleObject = {
+  const initialDropdownIndicatorSx: SystemStyleObject = {
     ...inputStyles.addon,
     display: "flex",
     alignItems: "center",
@@ -205,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
@@ -227,17 +228,17 @@ export const DropdownIndicator = <
         },
         className
       )}
-      sx={sx}
+      sx={dropdownIndicatorSx}
     >
-      {children || <DownChevron sx={iconSx} />}
+      {children || <DownChevron sx={downChevronSx} />}
     </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}
+ * @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}>

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>

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" };
@@ -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}>
@@ -288,11 +292,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 +330,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}
+    />
   );
 };
 
@@ -371,20 +378,24 @@ 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",
   };
 
   /**
-   * 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`,
@@ -394,39 +405,38 @@ 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,
+    cursor: "pointer",
     display: "flex",
     alignItems: "center",
     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,
@@ -438,8 +448,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

src/index.ts

@@ -18,6 +18,7 @@ export type {
   Size,
   TagVariant,
   SelectedOptionStyle,
+  ColorScheme,
   StylesFunction,
   ChakraStylesConfig,
   OptionBase,

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,
@@ -68,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;
 
@@ -86,7 +90,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 +136,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

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,

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,