From 9994d43b78272bce0bf1c824470437883b09cd5c Mon Sep 17 00:00:00 2001
From: csandman <chris@getcuebox.com>
Date: Wed, 18 Oct 2023 21:58:22 -0400
Subject: [PATCH] Add missing id prop to group heading

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

diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index f9a8cfb..9a6234c 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" };
@@ -290,7 +290,9 @@ export const GroupHeading = <
 >(
   props: GroupHeadingProps<Option, IsMulti, Group>
 ) => {
-  const { cx, className, children, selectProps } = props;
+  const { cx, className, selectProps } = props;
+
+  const { data, ...innerProps } = cleanCommonProps(props);
 
   const { chakraStyles, size: sizeProp } = selectProps;
 
@@ -324,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}
+    />
   );
 };