Disclosure.tsx

/**
// package.json
"@shopify/ui-extensions": "2025.7.1",
"@shopify/ui-extensions-react": "2025.7.1",
**/

import { Button, Card, Disclosure, InlineStack, Text, View } from '@shopify/ui-extensions-react/customer-account';
import { useState } from 'react';

export const Example = () => {
  /** Disclosure controlled state **/
  const [isOpen, setIsOpen] = useState(true);
  const DISCLOSURE_ID = 'content';

  return (
    <Card padding>
      <Disclosure
        open={isOpen}
        onToggle={open => {
          console.log(`Toggled => setIsOpen(${open.length > 0 ? 'true' : 'false'})`, open);
          setIsOpen(open.length > 0);
        }}
      >
        <InlineStack>
          <Text>Header</Text>
          <Button kind="plain" toggles={DISCLOSURE_ID}>
            Toggle
          </Button>
        </InlineStack>

        <View id={DISCLOSURE_ID}>Content</View>
      </Disclosure>
    </Card>
  );
};

Initial state: Open ✅
Click n.1 => Close (onToggle receives []) ✅
Click n.2 => Open (onToggle receives ["content"]) ✅
Click n.3 => Issue ~ Expect to close, but its visually open 🚫

Screen.Recording.2025-08-04.at.18.53.06.mov