fix(ui): expose sidebar group collapse state (#1163)

* fix(ui): expose sidebar group collapse state

* fix(ui): keep sidebar group panel mounted

---------

Co-authored-by: Isaac Sanchez <isanchez-hawkins@arize.com>

packages/ui/src/components/sections/shared/SidebarGroup.tsx

@@ -30,6 +30,7 @@ export const SidebarGroup: React.FC<SidebarGroupProps> = ({
   children,
 }) => {
   const key = getStorageKey(storageKey, label);
+  const contentId = React.useId();
 
   const [expanded, setExpanded] = useState<boolean>(() => {
     try {
@@ -54,6 +55,8 @@ export const SidebarGroup: React.FC<SidebarGroupProps> = ({
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+        aria-controls={contentId}
         className={cn(
           'flex w-full items-center gap-1 rounded-md px-2 py-1 text-left',
           'text-xs font-semibold uppercase tracking-wide text-muted-foreground',
@@ -71,11 +74,13 @@ export const SidebarGroup: React.FC<SidebarGroupProps> = ({
         <span className="ml-1 tabular-nums opacity-60">{count}</span>
       </button>
 
-      {expanded && (
+      <div
-        <div className="mt-0.5 space-y-0.5 ml-2 pl-3 border-l-2 border-[var(--interactive-border)]">
+        id={contentId}
-          {children}
+        hidden={!expanded}
-        </div>
+        className="mt-0.5 space-y-0.5 ml-2 pl-3 border-l-2 border-[var(--interactive-border)]"
-      )}
+      >
+        {children}
+      </div>
     </div>
   );
 };