cleanup

packages/@react-aria/disclosure/src/useDisclosure.ts

@@ -60,21 +60,15 @@ export function useDisclosure(
 
   let handleBeforeMatch = useCallback((e: Event) => {
     if (groupState && id !== undefined) {
-      if (groupState.allowsMultipleExpanded) {
-        groupState.toggleKey(id);
-      } else {
-        groupState.setExpandedKeys(new Set([id]));
-      }
+      groupState.toggleKey(id);
     } else {
       state.toggle();
     }
-    requestAnimationFrame(() => {
-      if (props.isExpanded) {
-        (e.target as Element).removeAttribute('hidden');
-      } else if (!props.isExpanded) {
-        (e.target as Element).setAttribute('hidden', 'until-found');
-      }
-    });
+    if (props.isExpanded) {
+      (e.target as Element).removeAttribute('hidden');
+    } else if (props.isExpanded === false) {
+      (e.target as Element).setAttribute('hidden', 'until-found');
+    }
   }, [groupState, id, props.isExpanded, state]);
 
   // @ts-ignore https://github.com/facebook/react/pull/24741

packages/@react-spectrum/s2/stories/Accordion.stories.tsx

@@ -129,29 +129,33 @@ WithDisabledDisclosure.parameters = {
   }
 };
 
-function ControlledAccordion() {
+function ControlledAccordion(props) {
   let [expandedKeys, setExpandedKeys] = React.useState<Set<Key>>(new Set(['people']));
   return (
-    <Accordion
-      onExpandedChange={setExpandedKeys}
-      expandedKeys={expandedKeys}>
-      <Disclosure id="files">
-        <DisclosureHeader>
-          Files
-        </DisclosureHeader>
-        <DisclosurePanel>
-          Files content
-        </DisclosurePanel>
-      </Disclosure>
-      <Disclosure id="people">
-        <DisclosureHeader>
-          People
-        </DisclosureHeader>
-        <DisclosurePanel>
-          <TextField label="Name" />
-        </DisclosurePanel>
-      </Disclosure>
-    </Accordion>
+    <div className={style({font: 'body', display: 'flex', flexDirection: 'column', gap: 8})}>
+      <Accordion
+        onExpandedChange={setExpandedKeys}
+        expandedKeys={expandedKeys}
+        {...props}>
+        <Disclosure id="files">
+          <DisclosureHeader>
+            Files
+          </DisclosureHeader>
+          <DisclosurePanel>
+            Files content
+          </DisclosurePanel>
+        </Disclosure>
+        <Disclosure id="people">
+          <DisclosureHeader>
+            People
+          </DisclosureHeader>
+          <DisclosurePanel>
+            <TextField label="Name" />
+          </DisclosurePanel>
+        </Disclosure>
+      </Accordion>
+      <div>Expanded keys: {expandedKeys.size ? Array.from(expandedKeys).join(', ') : 'none'}</div>
+    </div>
   );
 }