dropdownAutoCompleteMenu.spec.jsx.snap 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. // Jest Snapshot v1, https://goo.gl/fbAQLP
  2. exports[`DropdownAutoCompleteMenu renders with a group 1`] = `
  3. <DropdownAutoCompleteMenu
  4. blendCorner={true}
  5. emptyMessage="No items"
  6. isOpen={true}
  7. items={
  8. Array [
  9. Object {
  10. "items": Array [
  11. Object {
  12. "label": <div>
  13. New Zealand
  14. </div>,
  15. "value": "new zealand",
  16. },
  17. Object {
  18. "label": <div>
  19. Australia
  20. </div>,
  21. "value": "australia",
  22. },
  23. ],
  24. "label": "countries",
  25. "value": "countries",
  26. },
  27. ]
  28. }
  29. maxHeight={300}
  30. onSelect={[Function]}
  31. searchPlaceholder="Filter search"
  32. >
  33. <AutoComplete
  34. closeOnSelect={true}
  35. disabled={false}
  36. inputIsActor={false}
  37. isOpen={true}
  38. itemToString={[Function]}
  39. onSelect={[Function]}
  40. resetInputOnClose={true}
  41. shouldSelectWithEnter={true}
  42. shouldSelectWithTab={false}
  43. >
  44. <DropdownMenu
  45. closeOnEscape={true}
  46. isOpen={true}
  47. keepMenuOpen={false}
  48. onClickOutside={[Function]}
  49. >
  50. <AutoCompleteRoot>
  51. <Component
  52. className="css-6v04yn-AutoCompleteRoot ejumqxq0"
  53. >
  54. <div
  55. className="css-6v04yn-AutoCompleteRoot ejumqxq0"
  56. >
  57. Click Me!
  58. <StyledMenu
  59. blendCorner={true}
  60. innerRef={[Function]}
  61. onClick={[Function]}
  62. onMouseDown={[Function]}
  63. onMouseEnter={[Function]}
  64. onMouseLeave={[Function]}
  65. >
  66. <div
  67. className="css-1fwqu7l-StyledMenu-getMenuBorderRadius ejumqxq7"
  68. onClick={[Function]}
  69. onMouseDown={[Function]}
  70. onMouseEnter={[Function]}
  71. onMouseLeave={[Function]}
  72. >
  73. <Flex>
  74. <Base
  75. className="css-sncxrr"
  76. >
  77. <div
  78. className="css-sncxrr"
  79. is={null}
  80. >
  81. <StyledInput
  82. autoFocus={true}
  83. onBlur={[Function]}
  84. onChange={[Function]}
  85. onFocus={[Function]}
  86. onKeyDown={[Function]}
  87. placeholder="Filter search"
  88. value=""
  89. >
  90. <input
  91. autoFocus={true}
  92. className="css-o3kc4m-Input-inputStyles-StyledInput ejumqxq2"
  93. onBlur={[Function]}
  94. onChange={[Function]}
  95. onFocus={[Function]}
  96. onKeyDown={[Function]}
  97. placeholder="Filter search"
  98. value=""
  99. />
  100. </StyledInput>
  101. <InputLoadingWrapper>
  102. <Base
  103. className="css-1ren11q-InputLoadingWrapper ejumqxq1"
  104. >
  105. <div
  106. className="css-1ren11q-InputLoadingWrapper ejumqxq1"
  107. is={null}
  108. />
  109. </Base>
  110. </InputLoadingWrapper>
  111. </div>
  112. </Base>
  113. </Flex>
  114. <div>
  115. <StyledItemList
  116. maxHeight={300}
  117. >
  118. <div
  119. className="css-5kh8cy-StyledItemList ejumqxq8"
  120. >
  121. <LabelWithBorder
  122. key="countries"
  123. >
  124. <div
  125. className="css-o8s6pc-LabelWithBorder ejumqxq4"
  126. >
  127. <GroupLabel>
  128. <div
  129. className="css-1oz0skv-GroupLabel ejumqxq6"
  130. >
  131. countries
  132. </div>
  133. </GroupLabel>
  134. </div>
  135. </LabelWithBorder>
  136. <AutoCompleteItem
  137. highlightedIndex={0}
  138. index={0}
  139. key="new zealand-0"
  140. onClick={[Function]}
  141. >
  142. <div
  143. className="css-1dzvpw9-AutoCompleteItem ejumqxq3"
  144. onClick={[Function]}
  145. >
  146. <div>
  147. New Zealand
  148. </div>
  149. </div>
  150. </AutoCompleteItem>
  151. <AutoCompleteItem
  152. highlightedIndex={0}
  153. index={1}
  154. key="australia-1"
  155. onClick={[Function]}
  156. >
  157. <div
  158. className="css-1sp52yo-AutoCompleteItem ejumqxq3"
  159. onClick={[Function]}
  160. >
  161. <div>
  162. Australia
  163. </div>
  164. </div>
  165. </AutoCompleteItem>
  166. </div>
  167. </StyledItemList>
  168. </div>
  169. </div>
  170. </StyledMenu>
  171. </div>
  172. </Component>
  173. </AutoCompleteRoot>
  174. </DropdownMenu>
  175. </AutoComplete>
  176. </DropdownAutoCompleteMenu>
  177. `;
  178. exports[`DropdownAutoCompleteMenu renders without a group 1`] = `
  179. <DropdownAutoCompleteMenu
  180. blendCorner={true}
  181. emptyMessage="No items"
  182. isOpen={true}
  183. items={
  184. Array [
  185. Object {
  186. "label": <div>
  187. Apple
  188. </div>,
  189. "value": "apple",
  190. },
  191. Object {
  192. "label": <div>
  193. Bacon
  194. </div>,
  195. "value": "bacon",
  196. },
  197. Object {
  198. "label": <div>
  199. Corn
  200. </div>,
  201. "value": "corn",
  202. },
  203. ]
  204. }
  205. maxHeight={300}
  206. onSelect={[Function]}
  207. searchPlaceholder="Filter search"
  208. >
  209. <AutoComplete
  210. closeOnSelect={true}
  211. disabled={false}
  212. inputIsActor={false}
  213. isOpen={true}
  214. itemToString={[Function]}
  215. onSelect={[Function]}
  216. resetInputOnClose={true}
  217. shouldSelectWithEnter={true}
  218. shouldSelectWithTab={false}
  219. >
  220. <DropdownMenu
  221. closeOnEscape={true}
  222. isOpen={true}
  223. keepMenuOpen={false}
  224. onClickOutside={[Function]}
  225. >
  226. <AutoCompleteRoot>
  227. <Component
  228. className="css-6v04yn-AutoCompleteRoot ejumqxq0"
  229. >
  230. <div
  231. className="css-6v04yn-AutoCompleteRoot ejumqxq0"
  232. >
  233. Click Me!
  234. <StyledMenu
  235. blendCorner={true}
  236. innerRef={[Function]}
  237. onClick={[Function]}
  238. onMouseDown={[Function]}
  239. onMouseEnter={[Function]}
  240. onMouseLeave={[Function]}
  241. >
  242. <div
  243. className="css-1fwqu7l-StyledMenu-getMenuBorderRadius ejumqxq7"
  244. onClick={[Function]}
  245. onMouseDown={[Function]}
  246. onMouseEnter={[Function]}
  247. onMouseLeave={[Function]}
  248. >
  249. <Flex>
  250. <Base
  251. className="css-sncxrr"
  252. >
  253. <div
  254. className="css-sncxrr"
  255. is={null}
  256. >
  257. <StyledInput
  258. autoFocus={true}
  259. onBlur={[Function]}
  260. onChange={[Function]}
  261. onFocus={[Function]}
  262. onKeyDown={[Function]}
  263. placeholder="Filter search"
  264. value=""
  265. >
  266. <input
  267. autoFocus={true}
  268. className="css-o3kc4m-Input-inputStyles-StyledInput ejumqxq2"
  269. onBlur={[Function]}
  270. onChange={[Function]}
  271. onFocus={[Function]}
  272. onKeyDown={[Function]}
  273. placeholder="Filter search"
  274. value=""
  275. />
  276. </StyledInput>
  277. <InputLoadingWrapper>
  278. <Base
  279. className="css-1ren11q-InputLoadingWrapper ejumqxq1"
  280. >
  281. <div
  282. className="css-1ren11q-InputLoadingWrapper ejumqxq1"
  283. is={null}
  284. />
  285. </Base>
  286. </InputLoadingWrapper>
  287. </div>
  288. </Base>
  289. </Flex>
  290. <div>
  291. <StyledItemList
  292. maxHeight={300}
  293. >
  294. <div
  295. className="css-5kh8cy-StyledItemList ejumqxq8"
  296. >
  297. <AutoCompleteItem
  298. highlightedIndex={0}
  299. index={0}
  300. key="apple-0"
  301. onClick={[Function]}
  302. >
  303. <div
  304. className="css-1dzvpw9-AutoCompleteItem ejumqxq3"
  305. onClick={[Function]}
  306. >
  307. <div>
  308. Apple
  309. </div>
  310. </div>
  311. </AutoCompleteItem>
  312. <AutoCompleteItem
  313. highlightedIndex={0}
  314. index={1}
  315. key="bacon-1"
  316. onClick={[Function]}
  317. >
  318. <div
  319. className="css-1sp52yo-AutoCompleteItem ejumqxq3"
  320. onClick={[Function]}
  321. >
  322. <div>
  323. Bacon
  324. </div>
  325. </div>
  326. </AutoCompleteItem>
  327. <AutoCompleteItem
  328. highlightedIndex={0}
  329. index={2}
  330. key="corn-2"
  331. onClick={[Function]}
  332. >
  333. <div
  334. className="css-1sp52yo-AutoCompleteItem ejumqxq3"
  335. onClick={[Function]}
  336. >
  337. <div>
  338. Corn
  339. </div>
  340. </div>
  341. </AutoCompleteItem>
  342. </div>
  343. </StyledItemList>
  344. </div>
  345. </div>
  346. </StyledMenu>
  347. </div>
  348. </Component>
  349. </AutoCompleteRoot>
  350. </DropdownMenu>
  351. </AutoComplete>
  352. </DropdownAutoCompleteMenu>
  353. `;
  354. exports[`DropdownAutoCompleteMenu selects 1`] = `[MockFunction]`;