Fluent: Add accordion primitive (#16789)

This is a simple accordion primitive wrapper on top of the Fluent
accordion.

Author: ryantrem

packages/dev/inspector-v2/src/components/accordionPane.tsx

@@ -1,7 +1,11 @@
 // eslint-disable-next-line import/no-internal-modules
 
-import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, makeStyles, Subtitle1, tokens } from "@fluentui/react-components";
-import { useMemo, useState, type ComponentType } from "react";
+import type { ComponentType } from "react";
+
+import { makeStyles } from "@fluentui/react-components";
+import { useMemo, useState } from "react";
+
+import { Accordion, AccordionSection } from "shared-ui-components/fluent/primitives/accordion";
 
 export type AccordionSection = Readonly<{
     /**
@@ -58,16 +62,6 @@ const useStyles = makeStyles({
         display: "flex",
         flexDirection: "column",
     },
-    placeholderDiv: {
-        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
-    },
-    accordion: {
-        overflowY: "auto",
-        paddingBottom: tokens.spacingVerticalM,
-        display: "flex",
-        flexDirection: "column",
-        rowGap: tokens.spacingVerticalM,
-    },
     panelDiv: {
         display: "flex",
         flexDirection: "column",
@@ -122,27 +116,14 @@ export function AccordionPane<ContextT = unknown>(props: {
     return (
         <div className={classes.rootDiv}>
             {visibleSections.length > 0 && (
-                <Accordion
-                    key={version}
-                    className={classes.accordion}
-                    collapsible
-                    multiple
-                    defaultOpenItems={visibleSections.filter((section) => !section.collapseByDefault).map((section) => section.identity.description)}
-                >
+                <Accordion key={version}>
                     {visibleSections.map((section) => {
                         return (
-                            <AccordionItem key={section.identity.description} value={section.identity.description}>
-                                <AccordionHeader expandIconPosition="end">
-                                    <Subtitle1>{section.identity.description}</Subtitle1>
-                                </AccordionHeader>
-                                <AccordionPanel>
-                                    <div className={classes.panelDiv}>
-                                        {section.components.map((component) => {
-                                            return <component.component key={component.key} context={context} />;
-                                        })}
-                                    </div>
-                                </AccordionPanel>
-                            </AccordionItem>
+                            <AccordionSection key={section.identity.description} title={section.identity.description!}>
+                                {section.components.map((component) => {
+                                    return <component.component key={component.key} context={context} />;
+                                })}
+                            </AccordionSection>
                         );
                     })}
                 </Accordion>

packages/dev/sharedUiComponents/src/fluent/primitives/accordion.tsx

@@ -0,0 +1,56 @@
+import type { FunctionComponent, PropsWithChildren } from "react";
+
+import { Children, isValidElement } from "react";
+
+import { Accordion as FluentAccordion, AccordionItem, AccordionHeader, AccordionPanel, Subtitle1, makeStyles, tokens } from "@fluentui/react-components";
+
+const useStyles = makeStyles({
+    accordion: {
+        overflowY: "auto",
+        paddingBottom: tokens.spacingVerticalM,
+        display: "flex",
+        flexDirection: "column",
+        rowGap: tokens.spacingVerticalM,
+    },
+    panelDiv: {
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+    },
+});
+
+export type AccordionSectionProps = {
+    title: string;
+};
+
+export const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {
+    const classes = useStyles();
+
+    return <div className={classes.panelDiv}>{props.children}</div>;
+};
+
+export const Accordion: FunctionComponent<PropsWithChildren> = (props) => {
+    const classes = useStyles();
+
+    const { children, ...rest } = props;
+
+    return (
+        <FluentAccordion className={classes.accordion} collapsible multiple defaultOpenItems={Array.from({ length: Children.count(children) }, (_, index) => index)} {...rest}>
+            {Children.map(children, (child, index) => {
+                if (isValidElement(child)) {
+                    return (
+                        <AccordionItem key={child.props.title} value={index}>
+                            <AccordionHeader expandIconPosition="end">
+                                <Subtitle1>{child.props.title}</Subtitle1>
+                            </AccordionHeader>
+                            <AccordionPanel>
+                                <div className={classes.panelDiv}>{child}</div>
+                            </AccordionPanel>
+                        </AccordionItem>
+                    );
+                }
+                return null;
+            })}
+        </FluentAccordion>
+    );
+};