| | |
| | | collapsed: boolean |
| | | } |
| | | |
| | | let numExplorers = 0 |
| | | export default ((userOpts?: Partial<Options>) => { |
| | | const opts: Options = { ...defaultOptions, ...userOpts } |
| | | const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory() |
| | | |
| | | const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => { |
| | | const id = `explorer-${numExplorers++}` |
| | | |
| | | return ( |
| | | <div |
| | | class={classNames(displayClass, "explorer")} |
| | |
| | | type="button" |
| | | class="explorer-toggle mobile-explorer hide-until-loaded" |
| | | data-mobile={true} |
| | | aria-controls="explorer-content" |
| | | aria-controls={id} |
| | | > |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | |
| | | <polyline points="6 9 12 15 18 9"></polyline> |
| | | </svg> |
| | | </button> |
| | | <div class="explorer-content" aria-expanded={false}> |
| | | <div id={id} class="explorer-content" aria-expanded={false} role="group"> |
| | | <OverflowList class="explorer-ul" /> |
| | | </div> |
| | | <template id="template-file"> |