Add hasStickyGroupHeaders option

Author: csandman

README.md

@@ -8,7 +8,7 @@
 
 This component is a wrapper for the popular react component [react-select](https://react-select.com/home) made using the UI library [Chakra UI](https://chakra-ui.com/).
 
-![Chakra React Select Banner](https://raw.githubusercontent.com/csandman/chakra-react-select/main/github/chakra-react-select.png)
+![Chakra React Select Banner](./github/chakra-react-select.png)
 
 Check out the demo here: https://codesandbox.io/s/chakra-react-select-demo-65ohb?file=/example.js
 
@@ -49,7 +49,8 @@ return (
 ```js
 return (
   <Select
-    colorScheme="purple" // The global color scheme
+    {/* The global color scheme */}
+    colorScheme="purple"
     options={[
       {
         label: "I am red",
@@ -71,7 +72,8 @@ return (
 ```js
 return (
   <Select
-    tagVariant="solid" // The global variant
+    {/* The global variant */}
+    tagVariant="solid"
     options={[
       {
         label: "I have the outline style",
@@ -108,7 +110,15 @@ return (
 );
 ```
 
-- In your options objects, you can add the key `isFixed: true` to emulate the example in the [react-select docs](https://react-select.com/home#fixed-options). This will prevent the options which have this flag from having the remove button on its corresponding tag. This only applies when using `isMulti`
+- One thing I added which isn't specific to Chakra or react-select is sticky group headers. It adds a border to the bottom of the header and keeps it in view while its corresponding group of options is visible. This can be very nice for when you have long lists of grouped options so you can always tell which group of options you're looking at. To add it, pass the `hasStickyGroupHeaders` prop to the select component.
+
+```js
+return <Select hasStickyGroupHeaders />;
+```
+
+![Chakra React Select Banner](./github/sticky-group-headers.png)
+
+- In your options objects, you can add the key `isFixed: true` to emulate the example in the [react-select docs](https://react-select.com/home#fixed-options). This will prevent the options which have this flag from having the remove button on its corresponding tag. This only applies when using `isMulti` is passed.
 
 ```js
 return (

github/sticky-group-headers.png

@@ -266,8 +266,15 @@ const chakraComponents: ChakraSelectProps["components"] = {
       </Box>
     );
   },
-  GroupHeading: ({ innerProps, children, selectProps: { size } }) => {
-    const { groupTitle } = useStyles();
+  GroupHeading: ({
+    innerProps,
+    children,
+    selectProps: { size, hasStickyGroupHeaders },
+  }) => {
+    const {
+      groupTitle,
+      list: { bg },
+    } = useStyles();
 
     const chakraTheme = useTheme();
     const fontSizes: SizeProps = {
@@ -288,6 +295,10 @@ const chakraComponents: ChakraSelectProps["components"] = {
           fontSize: fontSizes[size as Size],
           p: paddings[size as Size],
           m: 0,
+          borderBottomWidth: hasStickyGroupHeaders ? "1px" : 0,
+          position: hasStickyGroupHeaders ? "sticky" : "static",
+          top: -2,
+          bg,
         }}
         {...innerProps}
       >
@@ -346,6 +357,7 @@ const ChakraReactSelect = ({
   isInvalid,
   inputId,
   tagVariant,
+  hasStickyGroupHeaders = false,
   ...props
 }: ChakraSelectProps): ReactElement => {
   const chakraTheme = useTheme();
@@ -426,6 +438,7 @@ const ChakraReactSelect = ({
     isDisabled: inputProps.disabled,
     isInvalid: !!inputProps["aria-invalid"],
     inputId: inputId || inputProps.id,
+    hasStickyGroupHeaders,
     ...props,
     // aria-invalid can be passed to react-select, so we allow that to
     // override the `isInvalid` prop

src/chakra-react-select.tsx

@@ -10,10 +10,11 @@ export type Size = "sm" | "md" | "lg";
 export type TagVariant = "subtle" | "solid" | "outline" | undefined;
 
 export interface ChakraSelectProps extends Props {
-  size: Size;
-  colorScheme: string;
-  isInvalid: boolean;
+  size?: Size;
+  colorScheme?: string;
+  isInvalid?: boolean;
   tagVariant?: TagVariant;
+  hasStickyGroupHeaders?: boolean;
 }
 
 export type OptionalTheme = {