{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>When some earas may toggle between collapse state and expand state.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Collapse\">Collapse <a class=\"header-anchor scroll-count-item\" href=\"#Collapse\" data-scroll-id=\"Collapse\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>Use data model to build</td>\n<td>Array&lt;DataItem&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultExpandedKeys</td>\n<td>Default expanded keys</td>\n<td>KeyType[]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>expandedKeys</td>\n<td>Controlled expanded keys</td>\n<td>KeyType[]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onExpand</td>\n<td>Callback when the expanded state changes</td>\n<td>(expandedKeys: KeyType | KeyType[]) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>All disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>accordion</td>\n<td>Accordion mode, only one can be opened at a time</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Collapse Panel\">Collapse.Panel <a class=\"header-anchor scroll-count-item\" href=\"#Collapse Panel\" data-scroll-id=\"Collapse Panel\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>disabled</td>\n<td>Whether to disable user actions</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>title</td>\n<td>Title</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isExpanded</td>\n<td>Whether to expand</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Click callback function</td>\n<td>| ((e: React.MouseEvent&lt;HTMLElement&gt; | React.KeyboardEvent&lt;HTMLElement&gt;) =&gt; void)<br> | null</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Key Type\">KeyType <a class=\"header-anchor scroll-count-item\" href=\"#Key Type\" data-scroll-id=\"Key Type\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">KeyType</span> <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Data Item\">DataItem <a class=\"header-anchor scroll-count-item\" href=\"#Data Item\" data-scroll-id=\"Data Item\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">DataItem</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    id<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n    title<span class=\"token operator\">?</span><span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span>\n    content<span class=\"token operator\">?</span><span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span>\n    disabled<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">boolean</span><span class=\"token punctuation\">;</span>\n    key<span class=\"token operator\">?</span><span class=\"token operator\">:</span> KeyType<span class=\"token punctuation\">;</span>\n    onClick<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span>key<span class=\"token operator\">:</span> KeyType<span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token keyword\">void</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">[</span>propName<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> <span class=\"token builtin\">unknown</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Tab</td>\n<td style=\"text-align:left\">navigate to the next collapse panel</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Space</td>\n<td style=\"text-align:left\">toggle expanded</td>\n</tr>\n</tbody>\n</table>\n"}