UNPKG

@metamask/snaps-sdk

Version:

A library containing the core functionality for building MetaMask Snaps

1 lines 2.75 kB
{"version":3,"file":"CollapsibleSection.mjs","sourceRoot":"","sources":["../../../src/jsx/components/CollapsibleSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,yBAAqB;AA6BnD,MAAM,IAAI,GAAG,oBAAoB,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAGnD,IAAI,CAAC,CAAC","sourcesContent":["import type { GenericSnapElement, SnapsChildren } from '../component';\nimport { createSnapComponent } from '../component';\n\n/**\n * The props of the {@link CollapsibleSection} component.\n *\n * @property children - The children of the collapsible section.\n * @property label - The label of the collapsible section.\n * @property isLoading - Whether the section is still loading.\n * @property isExpanded - Whether the section should start expanded.\n * @property direction - The direction to stack the components within the section. Defaults to `vertical`.\n * @property alignment - The alignment mode to use within the section. Defaults to `start`.\n * @category Component Props\n */\nexport type CollapsibleSectionProps = {\n // We can't use `JSXElement` because it causes a circular reference.\n children: SnapsChildren<GenericSnapElement>;\n label: string;\n isLoading?: boolean;\n isExpanded?: boolean;\n direction?: 'vertical' | 'horizontal' | undefined;\n alignment?:\n | 'start'\n | 'center'\n | 'end'\n | 'space-between'\n | 'space-around'\n | undefined;\n};\n\nconst TYPE = 'CollapsibleSection';\n\n/**\n * A collapsible section component, which is used to group multiple components\n * together with a label. The section can be expanded or collapsed by the user.\n *\n * @param props - The props of the component.\n * @param props.children - The children of the collapsible section.\n * @param props.label - The label of the collapsible section.\n * @param props.direction - The direction that the children are aligned.\n * @param props.alignment - The alignment of the children (a justify-content value).\n * @returns A collapsible section element.\n * @example\n * <CollapsibleSection label=\"Transaction details\">\n * <Row label=\"From\">\n * <Address address=\"0x1234567890123456789012345678901234567890\" />\n * </Row>\n * <Row label=\"To\" variant=\"warning\" tooltip=\"This address has been deemed dangerous.\">\n * <Address address=\"0x0000000000000000000000000000000000000000\" />\n * </Row>\n * </CollapsibleSection>\n * @category Components\n */\nexport const CollapsibleSection = createSnapComponent<\n CollapsibleSectionProps,\n typeof TYPE\n>(TYPE);\n\n/**\n * A collapsible section element.\n *\n * @see {@link CollapsibleSection}\n * @category Elements\n */\nexport type CollapsibleSectionElement = ReturnType<typeof CollapsibleSection>;\n"]}