fix: type button and refactor SectionWrapper

react/src/Sidebar/SidebarList.tsx

@@ -1,9 +1,10 @@
-import { type PropsWithChildren, useCallback, useMemo } from 'react'
+import { FC, type PropsWithChildren, useCallback, useMemo } from 'react'
 import {
   Box,
   chakra,
   Collapse,
   forwardRef,
+  HTMLChakraProps,
   Icon,
   useDisclosure,
   type UseDisclosureReturn,
@@ -54,6 +55,37 @@ export interface SidebarListProps extends BaseSidebarItemProps {
   onClick?: () => void
 }
 
+type SectionWrapperProps = HTMLChakraProps<'button'> &
+  HTMLChakraProps<'div'> & { onlyCaretToggle: boolean }
+
+const SectionWrapper: FC<PropsWithChildren & SectionWrapperProps> = ({
+  children,
+  onlyCaretToggle,
+  ...props
+}) => {
+  if (onlyCaretToggle) return <chakra.div {...props}>{children}</chakra.div>
+
+  return (
+    <chakra.button type="button" {...props}>
+      {children}
+    </chakra.button>
+  )
+}
+const ToggleChevronWrapper: FC<PropsWithChildren & SectionWrapperProps> = ({
+  children,
+  onlyCaretToggle,
+  ...props
+}) => {
+  if (onlyCaretToggle)
+    return (
+      <chakra.button type="button" {...props}>
+        {children}
+      </chakra.button>
+    )
+
+  return <chakra.div {...props}>{children}</chakra.div>
+}
+
 export const SidebarList = forwardRef<
   PropsWithChildren<SidebarListProps>,
   'li'
@@ -104,16 +136,6 @@ export const SidebarList = forwardRef<
       return merge({}, mergedStyles, { cursor: 'pointer' })
     }, [onlyCaretToggle, styles.item, styles.parent])
 
-    const SectionWrapper = useMemo(() => {
-      if (onlyCaretToggle) return chakra.div
-      return chakra.button
-    }, [onlyCaretToggle])
-
-    const ToggleChevronWrapper = useMemo(() => {
-      if (onlyCaretToggle) return chakra.button
-      return chakra.div
-    }, [onlyCaretToggle])
-
     return (
       <chakra.li __css={styles.list} pl={0} ref={ref} {...props}>
         <Box>
@@ -122,19 +144,22 @@ export const SidebarList = forwardRef<
             data-expanded={dataAttr(isOpen)}
             data-active={dataAttr(dataActive)}
             onClick={handleExpandSection}
+            onlyCaretToggle={onlyCaretToggle}
           >
             <chakra.span flex={1} __css={styles.label}>
               {icon ? (
                 <Icon as={icon} __css={styles.icon} {...iconProps} />
               ) : null}
               {label}
             </chakra.span>
+
             <ToggleChevronWrapper
               layerStyle="focusRing.default"
               aria-label={onlyCaretToggle ? 'Toggle section' : undefined}
               onClick={onToggle}
               display="flex"
               outline="none"
+              onlyCaretToggle={onlyCaretToggle}
             >
               <ToggleChevron
                 reduceMotion={reduceMotion}