-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdropdown.drawio
More file actions
70 lines (70 loc) · 64.4 KB
/
Copy pathdropdown.drawio
File metadata and controls
70 lines (70 loc) · 64.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36" version="27.0.6">
<diagram name="Page-1" id="yG-55oTZC-rXzrGc-pFj">
<mxGraphModel dx="1205" dy="784" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="NcWsjzNoAgIH2NNssZIe-1" value="<h1>Dropdown</h1>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="370" y="8" width="140" height="70" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-2" value="<h2>Functional Requirements</h2><div><ol><li style="text-align: left;">support multiple submenus</li><li style="text-align: left;">support text for menu items</li><li style="text-align: left;">support styling</li></ol></div>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="70" y="60" width="240" height="120" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-3" value="<h2>Non-Functional Requirements</h2><div><ul><li style="text-align: left;">accessibility: screen readers, keyboard</li><li style="text-align: left;">responsive/mobile support</li><li style="text-align: left;">correct positioning</li></ul></div>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="510" y="60" width="280" height="120" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-4" value="<h2>High Level Design/Architecture</h2>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="280" y="170" width="290" height="60" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-5" value="A. Pass in menu items data:" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="55" y="238" width="170" height="30" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-6" value="<pre><font style="font-size: 11px; background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));"><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; font-weight: 700;">const</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> items = {<br> </span></font></pre><font style="font-size: 11px; background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));"><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">File</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">: [</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0);">"New"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">, </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0);">"Open"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">, { </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">Export</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">: [</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0);">"PDF"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">, </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0);">"HTML"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">, </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0);">"SVG"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">] }],<br> </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">Edit</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">: [</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0);">"Undo"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">, </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0);">"Redo"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">],<br> };<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; font-weight: 700;">const</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">onClickCallback</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> = (</span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">item: <span style="box-sizing: border-box; color: rgb(57, 115, 0); font-weight: 400;">string</span></span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">) =&gt; {<br> </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(171, 86, 86);">console</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">.</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">log</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">({ item });<br> };<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; font-weight: 700;">return</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> (<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">Dropdown</span> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">items</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">{items}</span> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">onClick</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">{onClickCallback}</span> /&gt;</span></span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"><br> )</span></font>" style="rounded=0;whiteSpace=wrap;html=1;align=left;shadow=1;" vertex="1" parent="1">
<mxGeometry x="30" y="280" width="420" height="200" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-7" value="B. Declarative (onClick omitted):" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="495" y="238" width="190" height="30" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-8" value="<font style="font-size: 11px; background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));"><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> &lt;</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">DropdownMenu</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&gt;<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Button</span>&gt;</span>File<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Button</span>&gt;</span></span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"><br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.List</span>&gt;</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span>New<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span>Open<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span>Export<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span></span></font><div><font style="font-size: 11px;"><span style="box-sizing: border-box; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace;"><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgb(68, 68, 68); float: none; display: inline !important;"> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68);"><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.List</span>&gt;</span><font style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));" color="rgba(0, 0, 0, 0)"><br> </font><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667);"><font color="rgba(0, 0, 0, 0)">PDF</font></span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><font style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));" color="rgba(0, 0, 0, 0)"><br> </font><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;"><font color="#444444">HTML</font></span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><font style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));" color="rgba(0, 0, 0, 0)"><br> </font><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); box-sizing: border-box; color: rgba(68, 68, 68, 0.667);"><font color="rgba(0, 0, 0, 0)">SVG</font></span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.Item</span>&gt;</span><font style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));" color="rgba(0, 0, 0, 0)"><br> </font><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.List</span>&gt;</span></span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgb(68, 68, 68); float: none; display: inline !important;"><br></span><font style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));" color="rgba(0, 0, 0, 0)"> </font><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgba(68, 68, 68, 0.667); box-sizing: border-box; font-weight: 400;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">DropdownMenu.List</span>&gt;</span></span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"><br> &lt;/</span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">DropdownMenu</span><span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&gt;</span></font></div>" style="rounded=0;whiteSpace=wrap;html=1;align=left;shadow=1;" vertex="1" parent="1">
<mxGeometry x="460" y="280" width="370" height="200" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-9" value="<span style="background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));"><font style="font-size: 11px;"><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;"> &lt;div className=</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre; color: rgb(136, 0, 0);">"dropdown-wrapper"</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;"> ref={dRef}&gt;<br> {</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre; color: rgb(136, 0, 0); font-weight: 700;">Object</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;">.</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre; color: rgb(136, 0, 0); font-weight: 700;">keys</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;">(items).</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre; color: rgb(136, 0, 0); font-weight: 700;">map</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;">(</span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;">(<span style="box-sizing: border-box;">item</span>) =&gt;</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;"> (<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;"><span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667);">&lt;<span style="box-sizing: border-box; font-weight: 700;">div</span> <span style="box-sizing: border-box;">className</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0);">"dropdown-list"</span> <span style="box-sizing: border-box;">key</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0);">{item}</span>&gt;</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667);">&lt;<span style="box-sizing: border-box; font-weight: 700;">button</span><br> <span style="box-sizing: border-box;">className</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0);">{buttonClassName}</span><br> <span style="box-sizing: border-box;">onClick</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0);">{()</span> =&gt;</span> setOpenItem(item)}<br> key={item}<br> &gt;<br> {item}<br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667);">&lt;/<span style="box-sizing: border-box; font-weight: 700;">button</span>&gt;</span><br> {openItem === item &amp;&amp; traverse(items, item)}<br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667);">&lt;/<span style="box-sizing: border-box; font-weight: 700;">div</span>&gt;</span></span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space: pre;"><br> ))}<br> &lt;/div&gt;</span></font></span>" style="rounded=0;whiteSpace=wrap;html=1;align=left;shadow=1;" vertex="1" parent="1">
<mxGeometry x="30" y="630" width="380" height="290" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-10" value="items | onClick | classNames ..." style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="45" y="508" width="190" height="30" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-11" value="<h2>Deep Dives</h2>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="350" y="543" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-12" value="<h3>Visibility</h3>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="40" y="580" width="80" height="60" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-15" value="<font style="font-size: 11px;"><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; font-weight: 700;">function</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">traverse</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">(</span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">items: <span style="box-sizing: border-box; color: rgb(57, 115, 0); font-weight: 400;">any</span>, item: <span style="box-sizing: border-box; color: rgb(57, 115, 0); font-weight: 400;">string</span></span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">): </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; color: rgb(136, 0, 0); font-weight: 700;">ReactNode</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> {<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; font-weight: 700;">return</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"> (<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">div</span> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">className</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">"menuitem-wrapper"</span>&gt;</span><br> {items[item].map((i) =&gt; {<br> if (typeof i === "string") {<br> return (<br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">button</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">key</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">{i}</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">className</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">"menuitem"</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">onClick</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">{()</span> =&gt;</span> {<br> onClick(i);<br> setOpenItem("");<br> }}<br> &gt;<br> {i}<br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">button</span>&gt;</span><br> );<br> } else {<br> const [key, value] = Object.entries(i)[0];<br> return (<br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">Dropdown</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">key</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">{key}</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">items</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">{{</span> [<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">key</span>]<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">:</span> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">value</span> }}<br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">onClick</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">{onClick}</span><br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">buttonClassName</span>=<span style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: 400;">"menuitem"</span><br> /&gt;</span><br> );<br> }<br> })}<br> <span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 400;">&lt;/<span style="box-sizing: border-box; color: rgba(68, 68, 68, 0.667); font-weight: 700;">div</span>&gt;</span></span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;"><br> );<br> }</span></font>" style="rounded=0;whiteSpace=wrap;html=1;align=left;shadow=1;" vertex="1" parent="1">
<mxGeometry x="430" y="630" width="400" height="480" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-16" value="<h3 style="text-align: left;">Layout</h3><div><ul><li style="text-align: left;">relative to button(menu absolute, button content relative) OR&nbsp;</li><li style="text-align: left;">relative to page (render outside of DOM w/React Portal)</li></ul></div>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="30" y="930" width="390" height="100" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-17" value="<h3 style="text-align: left;">Position</h3><div><ul><li style="text-align: left;">check when menu is at the edge (<font face="Courier New">getClientRectBounds</font>)</li><li style="text-align: left;">use Popper.js</li></ul></div>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="35" y="1010" width="380" height="100" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-18" value="<h3>Click outside</h3><div><ul><li style="">register an onclick handler for <font face="Courier New">&lt;body&gt;</font></li></ul></div>" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="40" y="1088" width="270" height="90" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-20" value="" style="rounded=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="1">
<mxGeometry x="60" y="1160" width="580" height="220" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-19" value="<font style="font-size: 11px; background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));"><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; font-weight: 700;">function</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;"> </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0); font-weight: 700;">onClickOutside</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">(</span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">event</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">) {<br> </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; font-weight: 700;">if</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;"> (<br> $buttonElement.</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0); font-weight: 700;">contains</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">(event.</span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">target</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">) || $menuElement.</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0); font-weight: 700;">contains</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">(event.</span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">target</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">)<br> ) </span><span style="box-sizing: border-box; color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; font-weight: 700;">return</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;"><br><br> </span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0); font-weight: 700;">closeMenu</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">();<br>}<br><br></span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(171, 86, 86);">document</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">.</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0); font-weight: 700;">addEventListener</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">(</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0);">'mousedown'</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">, onClickOutside);<br></span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(171, 86, 86);">document</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">.</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0); font-weight: 700;">addEventListener</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">(</span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(136, 0, 0);">'touchstart'</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;">, onClickOutside);<br><br></span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(105, 112, 112);">// document.removeEventListener('mousedown', onClickOutside);</span><span style="color: rgb(68, 68, 68); font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve;"><br></span><span style="box-sizing: border-box; font-family: &quot;Lucida Console&quot;, Courier, monospace; white-space-collapse: preserve; color: rgb(105, 112, 112);">// document.removeEventListener('touchstart', onClickOutside);</span></font>" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="70" y="1170" width="550" height="200" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-21" value="<h3>a118N</h3><div style=""><ul><li style="text-align: left;">ARIA menubutton + menu pattern</li><ul><li style="text-align: left;">arrows, Enter, Escape...</li></ul></ul></div>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="610" y="1170" width="240" height="100" as="geometry" />
</mxCell>
<mxCell id="NcWsjzNoAgIH2NNssZIe-22" value="<h3>i!8N</h3><div style=""><ul><li style="text-align: left;">text overflow</li><li style="text-align: left;">RTL</li></ul></div>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="665" y="1273" width="130" height="100" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>