@wordpress/components 26.0.4 → 27.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (382) hide show
  1. package/.stylelintrc.js +2 -2
  2. package/CHANGELOG.md +45 -0
  3. package/CONTRIBUTING.md +72 -0
  4. package/build/autocomplete/index.js +3 -8
  5. package/build/autocomplete/index.js.map +1 -1
  6. package/build/base-control/index.native.js.map +1 -1
  7. package/build/border-box-control/border-box-control/component.js.map +1 -1
  8. package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  9. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  10. package/build/button/index.js +2 -2
  11. package/build/button/index.js.map +1 -1
  12. package/build/button/index.native.js.map +1 -1
  13. package/build/color-picker/component.js +10 -1
  14. package/build/color-picker/component.js.map +1 -1
  15. package/build/color-picker/styles.js +8 -9
  16. package/build/color-picker/styles.js.map +1 -1
  17. package/build/combobox-control/index.js +4 -9
  18. package/build/combobox-control/index.js.map +1 -1
  19. package/build/confirm-dialog/component.js.map +1 -1
  20. package/build/custom-select-control/index.js +2 -15
  21. package/build/custom-select-control/index.js.map +1 -1
  22. package/build/custom-select-control-v2/custom-select-item.js +32 -0
  23. package/build/custom-select-control-v2/custom-select-item.js.map +1 -0
  24. package/build/custom-select-control-v2/custom-select.js +91 -0
  25. package/build/custom-select-control-v2/custom-select.js.map +1 -0
  26. package/build/custom-select-control-v2/default-component/index.js +41 -0
  27. package/build/custom-select-control-v2/default-component/index.js.map +1 -0
  28. package/build/custom-select-control-v2/index.js +13 -82
  29. package/build/custom-select-control-v2/index.js.map +1 -1
  30. package/build/custom-select-control-v2/legacy-component/index.js +123 -0
  31. package/build/custom-select-control-v2/legacy-component/index.js.map +1 -0
  32. package/build/custom-select-control-v2/styles.js +73 -50
  33. package/build/custom-select-control-v2/styles.js.map +1 -1
  34. package/build/custom-select-control-v2/types.js.map +1 -1
  35. package/build/draggable/index.native.js +2 -2
  36. package/build/draggable/index.native.js.map +1 -1
  37. package/build/dropdown-menu/index.native.js.map +1 -1
  38. package/build/flex/flex/hook.js +1 -1
  39. package/build/flex/flex/hook.js.map +1 -1
  40. package/build/font-size-picker/font-size-picker-select.js +0 -1
  41. package/build/font-size-picker/font-size-picker-select.js.map +1 -1
  42. package/build/font-size-picker/index.native.js.map +1 -1
  43. package/build/form-token-field/index.js +3 -8
  44. package/build/form-token-field/index.js.map +1 -1
  45. package/build/form-token-field/suggestions-list.js +5 -12
  46. package/build/form-token-field/suggestions-list.js.map +1 -1
  47. package/build/h-stack/hook.js +6 -1
  48. package/build/h-stack/hook.js.map +1 -1
  49. package/build/mobile/bottom-sheet/button.native.js.map +1 -1
  50. package/build/mobile/bottom-sheet/index.native.js.map +1 -1
  51. package/build/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  52. package/build/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  53. package/build/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  54. package/build/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
  55. package/build/mobile/gradient/index.native.js.map +1 -1
  56. package/build/mobile/image/index.native.js +4 -13
  57. package/build/mobile/image/index.native.js.map +1 -1
  58. package/build/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js +1 -1
  59. package/build/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js.map +1 -1
  60. package/build/mobile/media-edit/index.native.js.map +1 -1
  61. package/build/modal/index.js +2 -10
  62. package/build/modal/index.js.map +1 -1
  63. package/build/palette-edit/index.js.map +1 -1
  64. package/build/progress-bar/styles.js +5 -5
  65. package/build/progress-bar/styles.js.map +1 -1
  66. package/build/query-controls/index.native.js.map +1 -1
  67. package/build/range-control/index.js.map +1 -1
  68. package/build/search-control/index.native.js.map +1 -1
  69. package/build/snackbar/index.js +3 -2
  70. package/build/snackbar/index.js.map +1 -1
  71. package/build/snackbar/list.js +2 -1
  72. package/build/snackbar/list.js.map +1 -1
  73. package/build/snackbar/types.js.map +1 -1
  74. package/build/tabs/index.js +7 -7
  75. package/build/tabs/index.js.map +1 -1
  76. package/build/tabs/types.js.map +1 -1
  77. package/build/utils/hooks/index.js +0 -7
  78. package/build/utils/hooks/index.js.map +1 -1
  79. package/build/utils/with-ignore-ime-events.js +34 -0
  80. package/build/utils/with-ignore-ime-events.js.map +1 -0
  81. package/build-module/autocomplete/index.js +3 -8
  82. package/build-module/autocomplete/index.js.map +1 -1
  83. package/build-module/base-control/index.native.js.map +1 -1
  84. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  85. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  86. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  87. package/build-module/button/index.js +2 -2
  88. package/build-module/button/index.js.map +1 -1
  89. package/build-module/button/index.native.js.map +1 -1
  90. package/build-module/color-picker/component.js +11 -2
  91. package/build-module/color-picker/component.js.map +1 -1
  92. package/build-module/color-picker/styles.js +8 -9
  93. package/build-module/color-picker/styles.js.map +1 -1
  94. package/build-module/combobox-control/index.js +4 -9
  95. package/build-module/combobox-control/index.js.map +1 -1
  96. package/build-module/confirm-dialog/component.js.map +1 -1
  97. package/build-module/custom-select-control/index.js +2 -15
  98. package/build-module/custom-select-control/index.js.map +1 -1
  99. package/build-module/custom-select-control-v2/custom-select-item.js +26 -0
  100. package/build-module/custom-select-control-v2/custom-select-item.js.map +1 -0
  101. package/build-module/custom-select-control-v2/custom-select.js +82 -0
  102. package/build-module/custom-select-control-v2/custom-select.js.map +1 -0
  103. package/build-module/custom-select-control-v2/default-component/index.js +30 -0
  104. package/build-module/custom-select-control-v2/default-component/index.js.map +1 -0
  105. package/build-module/custom-select-control-v2/index.js +2 -74
  106. package/build-module/custom-select-control-v2/index.js.map +1 -1
  107. package/build-module/custom-select-control-v2/legacy-component/index.js +111 -0
  108. package/build-module/custom-select-control-v2/legacy-component/index.js.map +1 -0
  109. package/build-module/custom-select-control-v2/styles.js +73 -42
  110. package/build-module/custom-select-control-v2/styles.js.map +1 -1
  111. package/build-module/custom-select-control-v2/types.js.map +1 -1
  112. package/build-module/draggable/index.native.js +2 -2
  113. package/build-module/draggable/index.native.js.map +1 -1
  114. package/build-module/dropdown-menu/index.native.js.map +1 -1
  115. package/build-module/flex/flex/hook.js +1 -1
  116. package/build-module/flex/flex/hook.js.map +1 -1
  117. package/build-module/font-size-picker/font-size-picker-select.js +0 -1
  118. package/build-module/font-size-picker/font-size-picker-select.js.map +1 -1
  119. package/build-module/font-size-picker/index.native.js.map +1 -1
  120. package/build-module/form-token-field/index.js +3 -8
  121. package/build-module/form-token-field/index.js.map +1 -1
  122. package/build-module/form-token-field/suggestions-list.js +5 -12
  123. package/build-module/form-token-field/suggestions-list.js.map +1 -1
  124. package/build-module/h-stack/hook.js +6 -1
  125. package/build-module/h-stack/hook.js.map +1 -1
  126. package/build-module/mobile/bottom-sheet/button.native.js.map +1 -1
  127. package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
  128. package/build-module/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  129. package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  130. package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  131. package/build-module/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
  132. package/build-module/mobile/gradient/index.native.js.map +1 -1
  133. package/build-module/mobile/image/index.native.js +6 -15
  134. package/build-module/mobile/image/index.native.js.map +1 -1
  135. package/build-module/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js +1 -1
  136. package/build-module/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js.map +1 -1
  137. package/build-module/mobile/media-edit/index.native.js.map +1 -1
  138. package/build-module/modal/index.js +3 -10
  139. package/build-module/modal/index.js.map +1 -1
  140. package/build-module/palette-edit/index.js.map +1 -1
  141. package/build-module/progress-bar/styles.js +5 -5
  142. package/build-module/progress-bar/styles.js.map +1 -1
  143. package/build-module/query-controls/index.native.js.map +1 -1
  144. package/build-module/range-control/index.js.map +1 -1
  145. package/build-module/search-control/index.native.js.map +1 -1
  146. package/build-module/snackbar/index.js +3 -2
  147. package/build-module/snackbar/index.js.map +1 -1
  148. package/build-module/snackbar/list.js +2 -1
  149. package/build-module/snackbar/list.js.map +1 -1
  150. package/build-module/snackbar/types.js.map +1 -1
  151. package/build-module/tabs/index.js +7 -7
  152. package/build-module/tabs/index.js.map +1 -1
  153. package/build-module/tabs/types.js.map +1 -1
  154. package/build-module/utils/hooks/index.js +0 -1
  155. package/build-module/utils/hooks/index.js.map +1 -1
  156. package/build-module/utils/with-ignore-ime-events.js +28 -0
  157. package/build-module/utils/with-ignore-ime-events.js.map +1 -0
  158. package/build-style/style-rtl.css +10 -2
  159. package/build-style/style.css +10 -2
  160. package/build-types/alignment-matrix-control/stories/index.story.d.ts +1 -1
  161. package/build-types/angle-picker-control/stories/index.story.d.ts +1 -1
  162. package/build-types/animate/stories/index.story.d.ts +7 -7
  163. package/build-types/autocomplete/index.d.ts.map +1 -1
  164. package/build-types/base-control/stories/index.story.d.ts +1 -1
  165. package/build-types/border-box-control/stories/index.story.d.ts +1 -1
  166. package/build-types/border-control/stories/index.story.d.ts +6 -6
  167. package/build-types/box-control/stories/index.story.d.ts +6 -6
  168. package/build-types/button/stories/e2e/index.story.d.ts +1 -1
  169. package/build-types/button/stories/index.story.d.ts +7 -7
  170. package/build-types/card/stories/index.story.d.ts +2 -2
  171. package/build-types/circular-option-picker/stories/index.story.d.ts +5 -5
  172. package/build-types/color-palette/stories/index.story.d.ts +3 -3
  173. package/build-types/color-picker/component.d.ts.map +1 -1
  174. package/build-types/color-picker/stories/index.story.d.ts +1 -1
  175. package/build-types/color-picker/styles.d.ts.map +1 -1
  176. package/build-types/combobox-control/index.d.ts.map +1 -1
  177. package/build-types/combobox-control/stories/index.story.d.ts +2 -2
  178. package/build-types/confirm-dialog/stories/index.story.d.ts +2 -2
  179. package/build-types/custom-gradient-picker/stories/index.story.d.ts +1 -1
  180. package/build-types/custom-select-control/index.d.ts.map +1 -1
  181. package/build-types/custom-select-control-v2/custom-select-item.d.ts +9 -0
  182. package/build-types/custom-select-control-v2/custom-select-item.d.ts.map +1 -0
  183. package/build-types/custom-select-control-v2/custom-select.d.ts +6 -0
  184. package/build-types/custom-select-control-v2/custom-select.d.ts.map +1 -0
  185. package/build-types/custom-select-control-v2/default-component/index.d.ts +6 -0
  186. package/build-types/custom-select-control-v2/default-component/index.d.ts.map +1 -0
  187. package/build-types/custom-select-control-v2/index.d.ts +5 -6
  188. package/build-types/custom-select-control-v2/index.d.ts.map +1 -1
  189. package/build-types/custom-select-control-v2/legacy-component/index.d.ts +5 -0
  190. package/build-types/custom-select-control-v2/legacy-component/index.d.ts.map +1 -0
  191. package/build-types/custom-select-control-v2/legacy-component/test/index.d.ts +2 -0
  192. package/build-types/custom-select-control-v2/legacy-component/test/index.d.ts.map +1 -0
  193. package/build-types/custom-select-control-v2/stories/default.story.d.ts +30 -0
  194. package/build-types/custom-select-control-v2/stories/default.story.d.ts.map +1 -0
  195. package/build-types/custom-select-control-v2/stories/legacy.story.d.ts +12 -0
  196. package/build-types/custom-select-control-v2/stories/legacy.story.d.ts.map +1 -0
  197. package/build-types/custom-select-control-v2/styles.d.ts +31 -6
  198. package/build-types/custom-select-control-v2/styles.d.ts.map +1 -1
  199. package/build-types/custom-select-control-v2/types.d.ts +136 -14
  200. package/build-types/custom-select-control-v2/types.d.ts.map +1 -1
  201. package/build-types/dimension-control/stories/index.story.d.ts +2 -2
  202. package/build-types/drop-zone/stories/index.story.d.ts +1 -1
  203. package/build-types/dropdown/stories/index.story.d.ts +3 -3
  204. package/build-types/dropdown-menu/stories/index.story.d.ts +2 -2
  205. package/build-types/dropdown-menu-v2/stories/index.story.d.ts.map +1 -1
  206. package/build-types/duotone-picker/stories/duotone-picker.story.d.ts +1 -1
  207. package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts +3 -3
  208. package/build-types/flex/flex/hook.d.ts +2 -3
  209. package/build-types/flex/flex/hook.d.ts.map +1 -1
  210. package/build-types/focal-point-picker/stories/index.story.d.ts +4 -4
  211. package/build-types/font-size-picker/font-size-picker-select.d.ts.map +1 -1
  212. package/build-types/form-file-upload/stories/index.story.d.ts +5 -5
  213. package/build-types/form-token-field/index.d.ts.map +1 -1
  214. package/build-types/form-token-field/suggestions-list.d.ts.map +1 -1
  215. package/build-types/gradient-picker/stories/index.story.d.ts +3 -3
  216. package/build-types/guide/stories/index.story.d.ts +1 -1
  217. package/build-types/h-stack/hook.d.ts +2 -4
  218. package/build-types/h-stack/hook.d.ts.map +1 -1
  219. package/build-types/icon/stories/index.story.d.ts +4 -4
  220. package/build-types/input-control/stories/index.story.d.ts +6 -6
  221. package/build-types/keyboard-shortcuts/stories/index.story.d.ts +1 -1
  222. package/build-types/menu-group/stories/index.story.d.ts +1 -1
  223. package/build-types/menu-item/stories/index.story.d.ts +4 -4
  224. package/build-types/modal/index.d.ts.map +1 -1
  225. package/build-types/navigation/stories/index.story.d.ts +6 -6
  226. package/build-types/navigation/stories/utils/hide-if-empty.d.ts.map +1 -1
  227. package/build-types/notice/stories/index.story.d.ts +4 -4
  228. package/build-types/number-control/stories/index.story.d.ts +1 -1
  229. package/build-types/palette-edit/stories/index.story.d.ts +2 -2
  230. package/build-types/progress-bar/stories/index.story.d.ts.map +1 -1
  231. package/build-types/query-controls/stories/index.story.d.ts +1 -1
  232. package/build-types/radio-group/stories/index.story.d.ts.map +1 -1
  233. package/build-types/resizable-box/stories/index.story.d.ts +2 -2
  234. package/build-types/responsive-wrapper/stories/index.story.d.ts +1 -1
  235. package/build-types/sandbox/stories/index.story.d.ts +1 -1
  236. package/build-types/search-control/stories/index.story.d.ts +2 -2
  237. package/build-types/select-control/stories/index.story.d.ts +2 -2
  238. package/build-types/shortcut/stories/index.story.d.ts +1 -1
  239. package/build-types/snackbar/index.d.ts +5 -2
  240. package/build-types/snackbar/index.d.ts.map +1 -1
  241. package/build-types/snackbar/list.d.ts.map +1 -1
  242. package/build-types/snackbar/test/index.d.ts +2 -0
  243. package/build-types/snackbar/test/index.d.ts.map +1 -0
  244. package/build-types/snackbar/test/list.d.ts +2 -0
  245. package/build-types/snackbar/test/list.d.ts.map +1 -0
  246. package/build-types/snackbar/types.d.ts +18 -2
  247. package/build-types/snackbar/types.d.ts.map +1 -1
  248. package/build-types/tab-panel/stories/index.story.d.ts +4 -4
  249. package/build-types/tabs/index.d.ts +1 -1
  250. package/build-types/tabs/stories/index.story.d.ts +9 -9
  251. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  252. package/build-types/tabs/types.d.ts +1 -1
  253. package/build-types/text/stories/index.story.d.ts +3 -3
  254. package/build-types/theme/stories/index.story.d.ts +1 -1
  255. package/build-types/theme/stories/index.story.d.ts.map +1 -1
  256. package/build-types/toggle-control/stories/index.story.d.ts +2 -2
  257. package/build-types/toolbar/stories/index.story.d.ts +3 -3
  258. package/build-types/tooltip/stories/index.story.d.ts +1 -1
  259. package/build-types/tree-grid/stories/index.story.d.ts +1 -1
  260. package/build-types/tree-select/stories/index.story.d.ts +1 -1
  261. package/build-types/utils/hooks/index.d.ts +0 -1
  262. package/build-types/utils/with-ignore-ime-events.d.ts +15 -0
  263. package/build-types/utils/with-ignore-ime-events.d.ts.map +1 -0
  264. package/build-types/v-stack/hook.d.ts +2 -4
  265. package/build-types/v-stack/hook.d.ts.map +1 -1
  266. package/build-types/v-stack/stories/index.story.d.ts +1 -1
  267. package/package.json +19 -20
  268. package/src/alignment-matrix-control/test/index.tsx +3 -1
  269. package/src/autocomplete/index.tsx +3 -10
  270. package/src/base-control/index.native.js +1 -1
  271. package/src/base-control/test/index.tsx +1 -1
  272. package/src/border-box-control/border-box-control/component.tsx +1 -1
  273. package/src/border-box-control/border-box-control-split-controls/component.tsx +4 -4
  274. package/src/border-control/border-control-dropdown/component.tsx +1 -1
  275. package/src/button/index.native.js +1 -1
  276. package/src/button/index.tsx +1 -1
  277. package/src/button/style.scss +1 -3
  278. package/src/circular-option-picker/test/index.tsx +6 -5
  279. package/src/color-picker/component.tsx +22 -11
  280. package/src/color-picker/styles.ts +1 -15
  281. package/src/combobox-control/index.tsx +33 -41
  282. package/src/combobox-control/test/index.tsx +1 -1
  283. package/src/composite/legacy/test/index.tsx +18 -2
  284. package/src/confirm-dialog/component.tsx +1 -1
  285. package/src/confirm-dialog/test/index.tsx +5 -21
  286. package/src/custom-select-control/README.md +0 -10
  287. package/src/custom-select-control/index.js +3 -22
  288. package/src/custom-select-control/stories/index.story.js +0 -1
  289. package/src/custom-select-control/test/index.js +17 -17
  290. package/src/custom-select-control-v2/README.md +97 -7
  291. package/src/custom-select-control-v2/custom-select-item.tsx +29 -0
  292. package/src/custom-select-control-v2/custom-select.tsx +122 -0
  293. package/src/custom-select-control-v2/default-component/index.tsx +27 -0
  294. package/src/custom-select-control-v2/index.tsx +2 -102
  295. package/src/custom-select-control-v2/legacy-component/index.tsx +133 -0
  296. package/src/custom-select-control-v2/legacy-component/test/index.tsx +457 -0
  297. package/src/custom-select-control-v2/stories/{index.story.tsx → default.story.tsx} +27 -33
  298. package/src/custom-select-control-v2/stories/legacy.story.tsx +87 -0
  299. package/src/custom-select-control-v2/styles.ts +82 -38
  300. package/src/custom-select-control-v2/test/index.tsx +207 -17
  301. package/src/custom-select-control-v2/types.ts +147 -20
  302. package/src/disabled/test/index.tsx +1 -1
  303. package/src/draggable/index.native.js +2 -2
  304. package/src/draggable/test/index.native.js +6 -2
  305. package/src/dropdown-menu/index.native.js +2 -2
  306. package/src/dropdown-menu-v2/stories/index.story.tsx +1 -0
  307. package/src/dropdown-menu-v2/test/index.tsx +4 -1
  308. package/src/flex/flex/hook.ts +1 -1
  309. package/src/font-size-picker/font-size-picker-select.tsx +0 -1
  310. package/src/font-size-picker/index.native.js +2 -2
  311. package/src/form-token-field/index.tsx +4 -11
  312. package/src/form-token-field/suggestions-list.tsx +5 -17
  313. package/src/h-stack/hook.tsx +2 -1
  314. package/src/h-stack/test/index.tsx +10 -0
  315. package/src/item-group/test/index.js +2 -2
  316. package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js +10 -15
  317. package/src/mobile/bottom-sheet/button.native.js +1 -5
  318. package/src/mobile/bottom-sheet/index.native.js +2 -2
  319. package/src/mobile/bottom-sheet/range-cell.native.js +1 -1
  320. package/src/mobile/bottom-sheet/stepper-cell/index.native.js +2 -2
  321. package/src/mobile/bottom-sheet-select-control/index.native.js +1 -1
  322. package/src/mobile/bottom-sheet-text-control/index.native.js +1 -1
  323. package/src/mobile/gradient/index.native.js +1 -1
  324. package/src/mobile/image/index.native.js +8 -23
  325. package/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js +1 -1
  326. package/src/mobile/media-edit/index.native.js +1 -1
  327. package/src/modal/index.tsx +2 -12
  328. package/src/modal/style.scss +1 -0
  329. package/src/modal/test/index.tsx +1 -1
  330. package/src/navigation/stories/utils/hide-if-empty.tsx +2 -6
  331. package/src/palette-edit/index.tsx +2 -2
  332. package/src/popover/test/index.tsx +1 -4
  333. package/src/progress-bar/stories/index.story.tsx +1 -0
  334. package/src/progress-bar/styles.ts +2 -2
  335. package/src/query-controls/index.native.js +2 -2
  336. package/src/radio-group/stories/index.story.tsx +1 -0
  337. package/src/range-control/index.tsx +3 -3
  338. package/src/range-control/test/index.tsx +2 -2
  339. package/src/search-control/index.native.js +1 -1
  340. package/src/snackbar/index.tsx +5 -2
  341. package/src/snackbar/list.tsx +6 -1
  342. package/src/snackbar/stories/list.story.tsx +0 -3
  343. package/src/snackbar/test/index.tsx +267 -0
  344. package/src/snackbar/test/list.tsx +46 -0
  345. package/src/snackbar/types.ts +31 -3
  346. package/src/tab-panel/test/index.tsx +8 -1
  347. package/src/tabs/README.md +18 -18
  348. package/src/tabs/index.tsx +7 -7
  349. package/src/tabs/stories/index.story.tsx +2 -1
  350. package/src/tabs/test/index.tsx +66 -36
  351. package/src/tabs/types.ts +1 -1
  352. package/src/theme/stories/index.story.tsx +1 -0
  353. package/src/toggle-group-control/test/index.tsx +5 -1
  354. package/src/toolbar/toolbar-group/style.scss +1 -0
  355. package/src/tools-panel/stories/index.story.tsx +8 -8
  356. package/src/tools-panel/test/index.tsx +10 -28
  357. package/src/tooltip/style.scss +2 -1
  358. package/src/tooltip/test/index.native.js +3 -3
  359. package/src/tooltip/test/index.tsx +5 -0
  360. package/src/tree-grid/test/index.tsx +1 -1
  361. package/src/utils/hooks/index.js +0 -1
  362. package/src/utils/with-ignore-ime-events.ts +32 -0
  363. package/src/v-stack/test/index.tsx +10 -0
  364. package/tsconfig.json +0 -1
  365. package/tsconfig.tsbuildinfo +1 -1
  366. package/build/custom-select-control/styles.js +0 -27
  367. package/build/custom-select-control/styles.js.map +0 -1
  368. package/build/utils/hooks/use-latest-ref.js +0 -33
  369. package/build/utils/hooks/use-latest-ref.js.map +0 -1
  370. package/build-module/custom-select-control/styles.js +0 -18
  371. package/build-module/custom-select-control/styles.js.map +0 -1
  372. package/build-module/utils/hooks/use-latest-ref.js +0 -27
  373. package/build-module/utils/hooks/use-latest-ref.js.map +0 -1
  374. package/build-types/custom-select-control/styles.d.ts +0 -11
  375. package/build-types/custom-select-control/styles.d.ts.map +0 -1
  376. package/build-types/custom-select-control-v2/stories/index.story.d.ts +0 -20
  377. package/build-types/custom-select-control-v2/stories/index.story.d.ts.map +0 -1
  378. package/build-types/utils/hooks/use-latest-ref.d.ts +0 -15
  379. package/build-types/utils/hooks/use-latest-ref.d.ts.map +0 -1
  380. package/src/custom-select-control/styles.ts +0 -28
  381. package/src/utils/hooks/test/use-latest-ref.js +0 -119
  382. package/src/utils/hooks/use-latest-ref.ts +0 -29
@@ -1,27 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.InputBaseWithBackCompatMinWidth = void 0;
8
- var _base = _interopRequireDefault(require("@emotion/styled/base"));
9
- var _react = require("@emotion/react");
10
- var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
11
- var _inputControlStyles = require("../input-control/styles/input-control-styles");
12
- /**
13
- * External dependencies
14
- */
15
-
16
- /**
17
- * Internal dependencies
18
- */
19
-
20
- const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/(0, _react.css)(_inputControlStyles.Container, "{min-width:130px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:backCompatMinWidth;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQk8iLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jdXN0b20tc2VsZWN0LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRCYXNlIGZyb20gJy4uL2lucHV0LWNvbnRyb2wvaW5wdXQtYmFzZSc7XG5pbXBvcnQgeyBDb250YWluZXIgYXMgSW5wdXRDb250cm9sQ29udGFpbmVyIH0gZnJvbSAnLi4vaW5wdXQtY29udHJvbC9zdHlsZXMvaW5wdXQtY29udHJvbC1zdHlsZXMnO1xuXG50eXBlIEJhY2tDb21wYXRNaW5XaWR0aFByb3BzID0ge1xuXHRfX25leHRVbmNvbnN0cmFpbmVkV2lkdGg6IGJvb2xlYW47XG59O1xuXG5jb25zdCBiYWNrQ29tcGF0TWluV2lkdGggPSAoIHByb3BzOiBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyApID0+XG5cdCEgcHJvcHMuX19uZXh0VW5jb25zdHJhaW5lZFdpZHRoXG5cdFx0PyBjc3NgXG5cdFx0XHRcdCR7IElucHV0Q29udHJvbENvbnRhaW5lciB9IHtcblx0XHRcdFx0XHRtaW4td2lkdGg6IDEzMHB4O1xuXHRcdFx0XHR9XG5cdFx0ICBgXG5cdFx0OiAnJztcblxuZXhwb3J0IGNvbnN0IElucHV0QmFzZVdpdGhCYWNrQ29tcGF0TWluV2lkdGggPSBzdHlsZWQoIElucHV0QmFzZSApYFxuXHQkeyBiYWNrQ29tcGF0TWluV2lkdGggfVxuYDtcbiJdfQ== */") : '';
21
- const InputBaseWithBackCompatMinWidth = exports.InputBaseWithBackCompatMinWidth = ( /*#__PURE__*/0, _base.default)(_inputBase.default, process.env.NODE_ENV === "production" ? {
22
- target: "eswuck60"
23
- } : {
24
- target: "eswuck60",
25
- label: "InputBaseWithBackCompatMinWidth"
26
- })(backCompatMinWidth, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmtFIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0QmFzZSBmcm9tICcuLi9pbnB1dC1jb250cm9sL2lucHV0LWJhc2UnO1xuaW1wb3J0IHsgQ29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lciB9IGZyb20gJy4uL2lucHV0LWNvbnRyb2wvc3R5bGVzL2lucHV0LWNvbnRyb2wtc3R5bGVzJztcblxudHlwZSBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyA9IHtcblx0X19uZXh0VW5jb25zdHJhaW5lZFdpZHRoOiBib29sZWFuO1xufTtcblxuY29uc3QgYmFja0NvbXBhdE1pbldpZHRoID0gKCBwcm9wczogQmFja0NvbXBhdE1pbldpZHRoUHJvcHMgKSA9PlxuXHQhIHByb3BzLl9fbmV4dFVuY29uc3RyYWluZWRXaWR0aFxuXHRcdD8gY3NzYFxuXHRcdFx0XHQkeyBJbnB1dENvbnRyb2xDb250YWluZXIgfSB7XG5cdFx0XHRcdFx0bWluLXdpZHRoOiAxMzBweDtcblx0XHRcdFx0fVxuXHRcdCAgYFxuXHRcdDogJyc7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEJhc2VXaXRoQmFja0NvbXBhdE1pbldpZHRoID0gc3R5bGVkKCBJbnB1dEJhc2UgKWBcblx0JHsgYmFja0NvbXBhdE1pbldpZHRoIH1cbmA7XG4iXX0= */"));
27
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","require","_inputBase","_interopRequireDefault","_inputControlStyles","backCompatMinWidth","props","__nextUnconstrainedWidth","css","InputControlContainer","process","env","NODE_ENV","InputBaseWithBackCompatMinWidth","exports","_base","default","InputBase","target","label"],"sources":["@wordpress/components/src/custom-select-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputBase from '../input-control/input-base';\nimport { Container as InputControlContainer } from '../input-control/styles/input-control-styles';\n\ntype BackCompatMinWidthProps = {\n\t__nextUnconstrainedWidth: boolean;\n};\n\nconst backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>\n\t! props.__nextUnconstrainedWidth\n\t\t? css`\n\t\t\t\t${ InputControlContainer } {\n\t\t\t\t\tmin-width: 130px;\n\t\t\t\t}\n\t\t `\n\t\t: '';\n\nexport const InputBaseWithBackCompatMinWidth = styled( InputBase )`\n\t${ backCompatMinWidth }\n`;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAMA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMI,kBAAkB,GAAKC,KAA8B,IAC1D,CAAEA,KAAK,CAACC,wBAAwB,oBAC7BC,UAAG,EACAC,6BAAqB,0BAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,wDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0xCAIxB,EAAE;AAEC,MAAMC,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,kBAAAE,KAAA,CAAAC,OAAA,EAAQC,kBAAS,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAM,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAC9Dd,kBAAkB,SAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA,wxCACrB"}
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useLatestRef = useLatestRef;
7
- var _element = require("@wordpress/element");
8
- var _compose = require("@wordpress/compose");
9
- /**
10
- * External dependencies
11
- */
12
-
13
- /**
14
- * WordPress dependencies
15
- */
16
-
17
- /**
18
- * Creates a reference for a prop. This is useful for preserving dependency
19
- * memoization for hooks like useCallback.
20
- *
21
- * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
22
- *
23
- * @param value The value to reference
24
- * @return The prop reference.
25
- */
26
- function useLatestRef(value) {
27
- const ref = (0, _element.useRef)(value);
28
- (0, _compose.useIsomorphicLayoutEffect)(() => {
29
- ref.current = value;
30
- });
31
- return ref;
32
- }
33
- //# sourceMappingURL=use-latest-ref.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_element","require","_compose","useLatestRef","value","ref","useRef","useIsomorphicLayoutEffect","current"],"sources":["@wordpress/components/src/utils/hooks/use-latest-ref.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Creates a reference for a prop. This is useful for preserving dependency\n * memoization for hooks like useCallback.\n *\n * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx\n *\n * @param value The value to reference\n * @return The prop reference.\n */\nexport function useLatestRef< T >( value: T ): RefObject< T > {\n\tconst ref = useRef( value );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tref.current = value;\n\t} );\n\n\treturn ref;\n}\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,YAAYA,CAAOC,KAAQ,EAAmB;EAC7D,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAEF,KAAM,CAAC;EAE3B,IAAAG,kCAAyB,EAAE,MAAM;IAChCF,GAAG,CAACG,OAAO,GAAGJ,KAAK;EACpB,CAAE,CAAC;EAEH,OAAOC,GAAG;AACX"}
@@ -1,18 +0,0 @@
1
- import _styled from "@emotion/styled/base";
2
- /**
3
- * External dependencies
4
- */
5
- import { css } from '@emotion/react';
6
- /**
7
- * Internal dependencies
8
- */
9
- import InputBase from '../input-control/input-base';
10
- import { Container as InputControlContainer } from '../input-control/styles/input-control-styles';
11
- const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/css(InputControlContainer, "{min-width:130px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:backCompatMinWidth;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQk8iLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jdXN0b20tc2VsZWN0LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRCYXNlIGZyb20gJy4uL2lucHV0LWNvbnRyb2wvaW5wdXQtYmFzZSc7XG5pbXBvcnQgeyBDb250YWluZXIgYXMgSW5wdXRDb250cm9sQ29udGFpbmVyIH0gZnJvbSAnLi4vaW5wdXQtY29udHJvbC9zdHlsZXMvaW5wdXQtY29udHJvbC1zdHlsZXMnO1xuXG50eXBlIEJhY2tDb21wYXRNaW5XaWR0aFByb3BzID0ge1xuXHRfX25leHRVbmNvbnN0cmFpbmVkV2lkdGg6IGJvb2xlYW47XG59O1xuXG5jb25zdCBiYWNrQ29tcGF0TWluV2lkdGggPSAoIHByb3BzOiBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyApID0+XG5cdCEgcHJvcHMuX19uZXh0VW5jb25zdHJhaW5lZFdpZHRoXG5cdFx0PyBjc3NgXG5cdFx0XHRcdCR7IElucHV0Q29udHJvbENvbnRhaW5lciB9IHtcblx0XHRcdFx0XHRtaW4td2lkdGg6IDEzMHB4O1xuXHRcdFx0XHR9XG5cdFx0ICBgXG5cdFx0OiAnJztcblxuZXhwb3J0IGNvbnN0IElucHV0QmFzZVdpdGhCYWNrQ29tcGF0TWluV2lkdGggPSBzdHlsZWQoIElucHV0QmFzZSApYFxuXHQkeyBiYWNrQ29tcGF0TWluV2lkdGggfVxuYDtcbiJdfQ== */") : '';
12
- export const InputBaseWithBackCompatMinWidth = /*#__PURE__*/_styled(InputBase, process.env.NODE_ENV === "production" ? {
13
- target: "eswuck60"
14
- } : {
15
- target: "eswuck60",
16
- label: "InputBaseWithBackCompatMinWidth"
17
- })(backCompatMinWidth, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmtFIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0QmFzZSBmcm9tICcuLi9pbnB1dC1jb250cm9sL2lucHV0LWJhc2UnO1xuaW1wb3J0IHsgQ29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lciB9IGZyb20gJy4uL2lucHV0LWNvbnRyb2wvc3R5bGVzL2lucHV0LWNvbnRyb2wtc3R5bGVzJztcblxudHlwZSBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyA9IHtcblx0X19uZXh0VW5jb25zdHJhaW5lZFdpZHRoOiBib29sZWFuO1xufTtcblxuY29uc3QgYmFja0NvbXBhdE1pbldpZHRoID0gKCBwcm9wczogQmFja0NvbXBhdE1pbldpZHRoUHJvcHMgKSA9PlxuXHQhIHByb3BzLl9fbmV4dFVuY29uc3RyYWluZWRXaWR0aFxuXHRcdD8gY3NzYFxuXHRcdFx0XHQkeyBJbnB1dENvbnRyb2xDb250YWluZXIgfSB7XG5cdFx0XHRcdFx0bWluLXdpZHRoOiAxMzBweDtcblx0XHRcdFx0fVxuXHRcdCAgYFxuXHRcdDogJyc7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEJhc2VXaXRoQmFja0NvbXBhdE1pbldpZHRoID0gc3R5bGVkKCBJbnB1dEJhc2UgKWBcblx0JHsgYmFja0NvbXBhdE1pbldpZHRoIH1cbmA7XG4iXX0= */"));
18
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["css","InputBase","Container","InputControlContainer","backCompatMinWidth","props","__nextUnconstrainedWidth","process","env","NODE_ENV","InputBaseWithBackCompatMinWidth","_styled","target","label"],"sources":["@wordpress/components/src/custom-select-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputBase from '../input-control/input-base';\nimport { Container as InputControlContainer } from '../input-control/styles/input-control-styles';\n\ntype BackCompatMinWidthProps = {\n\t__nextUnconstrainedWidth: boolean;\n};\n\nconst backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>\n\t! props.__nextUnconstrainedWidth\n\t\t? css`\n\t\t\t\t${ InputControlContainer } {\n\t\t\t\t\tmin-width: 130px;\n\t\t\t\t}\n\t\t `\n\t\t: '';\n\nexport const InputBaseWithBackCompatMinWidth = styled( InputBase )`\n\t${ backCompatMinWidth }\n`;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,OAAOC,SAAS,MAAM,6BAA6B;AACnD,SAASC,SAAS,IAAIC,qBAAqB,QAAQ,8CAA8C;AAMjG,MAAMC,kBAAkB,GAAKC,KAA8B,IAC1D,CAAEA,KAAK,CAACC,wBAAwB,gBAC7BN,GAAG,CACAG,qBAAqB,0BAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,wDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0xCAIxB,EAAE;AAEN,OAAO,MAAMC,+BAA+B,GAAG,aAAAC,OAAA,CAAQV,SAAS,EAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAC9DT,kBAAkB,SAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,wxCACrB"}
@@ -1,27 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
-
5
- /**
6
- * WordPress dependencies
7
- */
8
- import { useRef } from '@wordpress/element';
9
- import { useIsomorphicLayoutEffect } from '@wordpress/compose';
10
-
11
- /**
12
- * Creates a reference for a prop. This is useful for preserving dependency
13
- * memoization for hooks like useCallback.
14
- *
15
- * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
16
- *
17
- * @param value The value to reference
18
- * @return The prop reference.
19
- */
20
- export function useLatestRef(value) {
21
- const ref = useRef(value);
22
- useIsomorphicLayoutEffect(() => {
23
- ref.current = value;
24
- });
25
- return ref;
26
- }
27
- //# sourceMappingURL=use-latest-ref.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useRef","useIsomorphicLayoutEffect","useLatestRef","value","ref","current"],"sources":["@wordpress/components/src/utils/hooks/use-latest-ref.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Creates a reference for a prop. This is useful for preserving dependency\n * memoization for hooks like useCallback.\n *\n * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx\n *\n * @param value The value to reference\n * @return The prop reference.\n */\nexport function useLatestRef< T >( value: T ): RefObject< T > {\n\tconst ref = useRef( value );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tref.current = value;\n\t} );\n\n\treturn ref;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,yBAAyB,QAAQ,oBAAoB;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAOC,KAAQ,EAAmB;EAC7D,MAAMC,GAAG,GAAGJ,MAAM,CAAEG,KAAM,CAAC;EAE3BF,yBAAyB,CAAE,MAAM;IAChCG,GAAG,CAACC,OAAO,GAAGF,KAAK;EACpB,CAAE,CAAC;EAEH,OAAOC,GAAG;AACX"}
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- type BackCompatMinWidthProps = {
3
- __nextUnconstrainedWidth: boolean;
4
- };
5
- export declare const InputBaseWithBackCompatMinWidth: import("@emotion/styled").StyledComponent<import("../input-control/types").InputBaseProps & import("react").RefAttributes<any> & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("react").RefAttributes<any> | keyof import("../input-control/types").InputBaseProps> & {
6
- as?: keyof JSX.IntrinsicElements | undefined;
7
- } & {
8
- theme?: import("@emotion/react").Theme | undefined;
9
- } & BackCompatMinWidthProps, {}, {}>;
10
- export {};
11
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/custom-select-control/styles.ts"],"names":[],"mappings":";AAYA,KAAK,uBAAuB,GAAG;IAC9B,wBAAwB,EAAE,OAAO,CAAC;CAClC,CAAC;AAWF,eAAO,MAAM,+BAA+B;;;;oCAE3C,CAAC"}
@@ -1,20 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * External dependencies
4
- */
5
- import type { Meta } from '@storybook/react';
6
- /**
7
- * Internal dependencies
8
- */
9
- import { CustomSelect } from '..';
10
- declare const meta: Meta<typeof CustomSelect>;
11
- export default meta;
12
- export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../types").CustomSelectProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "as" | keyof import("../types").CustomSelectProps>>;
13
- /**
14
- * Multiple selection can be enabled by using an array for the `value` and
15
- * `defaultValue` props. The argument of the `onChange` function will also
16
- * change accordingly.
17
- */
18
- export declare const MultiSelect: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../types").CustomSelectProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "as" | keyof import("../types").CustomSelectProps>>;
19
- export declare const Controlled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../types").CustomSelectProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "as" | keyof import("../types").CustomSelectProps>>;
20
- //# sourceMappingURL=index.story.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control-v2/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,EAAE,YAAY,EAAoB,MAAM,IAAI,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,YAAY,CAgCpC,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,2XAAsB,CAAC;AAe3C;;;;GAIG;AACH,eAAO,MAAM,WAAW,2XAAsB,CAAC;AA8C/C,eAAO,MAAM,UAAU,2XAAgC,CAAC"}
@@ -1,15 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import type { RefObject } from 'react';
5
- /**
6
- * Creates a reference for a prop. This is useful for preserving dependency
7
- * memoization for hooks like useCallback.
8
- *
9
- * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
10
- *
11
- * @param value The value to reference
12
- * @return The prop reference.
13
- */
14
- export declare function useLatestRef<T>(value: T): RefObject<T>;
15
- //# sourceMappingURL=use-latest-ref.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-latest-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-latest-ref.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAE,CAAC,EAAI,KAAK,EAAE,CAAC,GAAI,SAAS,CAAE,CAAC,CAAE,CAQ5D"}
@@ -1,28 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { css } from '@emotion/react';
5
- import styled from '@emotion/styled';
6
-
7
- /**
8
- * Internal dependencies
9
- */
10
- import InputBase from '../input-control/input-base';
11
- import { Container as InputControlContainer } from '../input-control/styles/input-control-styles';
12
-
13
- type BackCompatMinWidthProps = {
14
- __nextUnconstrainedWidth: boolean;
15
- };
16
-
17
- const backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>
18
- ! props.__nextUnconstrainedWidth
19
- ? css`
20
- ${ InputControlContainer } {
21
- min-width: 130px;
22
- }
23
- `
24
- : '';
25
-
26
- export const InputBaseWithBackCompatMinWidth = styled( InputBase )`
27
- ${ backCompatMinWidth }
28
- `;
@@ -1,119 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { render, screen, fireEvent, waitFor } from '@testing-library/react';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { useState } from '@wordpress/element';
10
-
11
- /**
12
- * Internal dependencies
13
- */
14
- import { useLatestRef } from '..';
15
-
16
- function debounce( callback, timeout = 0 ) {
17
- let timeoutId = 0;
18
- return ( ...args ) => {
19
- window.clearTimeout( timeoutId );
20
- timeoutId = window.setTimeout( () => callback( ...args ), timeout );
21
- };
22
- }
23
-
24
- function useDebounce( callback, timeout = 0 ) {
25
- const callbackRef = useLatestRef( callback );
26
- return debounce( ( ...args ) => callbackRef.current( ...args ), timeout );
27
- }
28
-
29
- function Example() {
30
- const [ count, setCount ] = useState( 0 );
31
- const increment = () => setCount( count + 1 );
32
- const incrementDebounced = debounce( increment, 50 );
33
- const incrementDebouncedWithLatestRef = useDebounce( increment, 50 );
34
-
35
- return (
36
- <>
37
- <div>Count: { count }</div>
38
- <button onClick={ incrementDebounced }>Increment debounced</button>
39
- <button onClick={ increment }>Increment immediately</button>
40
- <br />
41
- <button onClick={ incrementDebouncedWithLatestRef }>
42
- Increment debounced with latest ref
43
- </button>
44
- </>
45
- );
46
- }
47
-
48
- function getCount() {
49
- return screen.getByText( /Count:/ ).innerHTML;
50
- }
51
-
52
- function incrementCount() {
53
- fireEvent.click( screen.getByText( 'Increment immediately' ) );
54
- }
55
-
56
- function incrementCountDebounced() {
57
- fireEvent.click( screen.getByText( 'Increment debounced' ) );
58
- }
59
-
60
- function incrementCountDebouncedRef() {
61
- fireEvent.click(
62
- screen.getByText( 'Increment debounced with latest ref' )
63
- );
64
- }
65
-
66
- describe( 'useLatestRef', () => {
67
- describe( 'Example', () => {
68
- // Prove the example works as expected.
69
- it( 'should start at 0', () => {
70
- render( <Example /> );
71
-
72
- expect( getCount() ).toEqual( 'Count: 0' );
73
- } );
74
-
75
- it( 'should increment immediately', () => {
76
- render( <Example /> );
77
-
78
- incrementCount();
79
-
80
- expect( getCount() ).toEqual( 'Count: 1' );
81
- } );
82
-
83
- it( 'should increment after debouncing', async () => {
84
- render( <Example /> );
85
-
86
- incrementCountDebounced();
87
-
88
- expect( getCount() ).toEqual( 'Count: 0' );
89
- await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
90
- } );
91
-
92
- it( 'should increment after debouncing with latest ref', async () => {
93
- render( <Example /> );
94
-
95
- incrementCountDebouncedRef();
96
-
97
- expect( getCount() ).toEqual( 'Count: 0' );
98
- await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
99
- } );
100
- } );
101
-
102
- it( 'should increment to one', async () => {
103
- render( <Example /> );
104
-
105
- incrementCountDebounced();
106
- incrementCount();
107
-
108
- await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
109
- } );
110
-
111
- it( 'should increment to two', async () => {
112
- render( <Example /> );
113
-
114
- incrementCountDebouncedRef();
115
- incrementCount();
116
-
117
- await waitFor( () => expect( getCount() ).toEqual( 'Count: 2' ) );
118
- } );
119
- } );
@@ -1,29 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import type { RefObject } from 'react';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { useRef } from '@wordpress/element';
10
- import { useIsomorphicLayoutEffect } from '@wordpress/compose';
11
-
12
- /**
13
- * Creates a reference for a prop. This is useful for preserving dependency
14
- * memoization for hooks like useCallback.
15
- *
16
- * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
17
- *
18
- * @param value The value to reference
19
- * @return The prop reference.
20
- */
21
- export function useLatestRef< T >( value: T ): RefObject< T > {
22
- const ref = useRef( value );
23
-
24
- useIsomorphicLayoutEffect( () => {
25
- ref.current = value;
26
- } );
27
-
28
- return ref;
29
- }