@wordpress/components 29.0.0 → 29.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 (469) hide show
  1. package/CHANGELOG.md +39 -1
  2. package/LICENSE.md +1 -1
  3. package/build/badge/index.js +64 -0
  4. package/build/badge/index.js.map +1 -0
  5. package/build/badge/types.js +6 -0
  6. package/build/badge/types.js.map +1 -0
  7. package/build/box-control/index.js +5 -1
  8. package/build/box-control/index.js.map +1 -1
  9. package/build/box-control/input-control.js +90 -29
  10. package/build/box-control/input-control.js.map +1 -1
  11. package/build/box-control/types.js.map +1 -1
  12. package/build/box-control/utils.js +50 -0
  13. package/build/box-control/utils.js.map +1 -1
  14. package/build/button-group/index.js +10 -0
  15. package/build/button-group/index.js.map +1 -1
  16. package/build/button-group/types.js.map +1 -1
  17. package/build/custom-select-control/index.js +3 -5
  18. package/build/custom-select-control/index.js.map +1 -1
  19. package/build/custom-select-control-v2/custom-select.js +2 -3
  20. package/build/custom-select-control-v2/custom-select.js.map +1 -1
  21. package/build/date-time/date/index.js +1 -0
  22. package/build/date-time/date/index.js.map +1 -1
  23. package/build/dimension-control/index.js +1 -0
  24. package/build/dimension-control/index.js.map +1 -1
  25. package/build/font-size-picker/styles.js +9 -9
  26. package/build/font-size-picker/styles.js.map +1 -1
  27. package/build/heading/hook.js +1 -1
  28. package/build/heading/hook.js.map +1 -1
  29. package/build/input-control/index.js +9 -0
  30. package/build/input-control/index.js.map +1 -1
  31. package/build/input-control/types.js.map +1 -1
  32. package/build/menu/checkbox-item.js +2 -0
  33. package/build/menu/checkbox-item.js.map +1 -1
  34. package/build/menu/index.js +25 -94
  35. package/build/menu/index.js.map +1 -1
  36. package/build/menu/item.js +10 -1
  37. package/build/menu/item.js.map +1 -1
  38. package/build/menu/popover.js +89 -0
  39. package/build/menu/popover.js.map +1 -0
  40. package/build/menu/radio-item.js +2 -0
  41. package/build/menu/radio-item.js.map +1 -1
  42. package/build/menu/submenu-trigger-item.js +58 -0
  43. package/build/menu/submenu-trigger-item.js.map +1 -0
  44. package/build/menu/trigger-button.js +45 -0
  45. package/build/menu/trigger-button.js.map +1 -0
  46. package/build/menu/types.js.map +1 -1
  47. package/build/navigation/back-button/index.js +1 -0
  48. package/build/navigation/back-button/index.js.map +1 -1
  49. package/build/navigation/index.js +6 -0
  50. package/build/navigation/index.js.map +1 -1
  51. package/build/navigation/item/index.js +1 -0
  52. package/build/navigation/item/index.js.map +1 -1
  53. package/build/number-control/index.js +1 -0
  54. package/build/number-control/index.js.map +1 -1
  55. package/build/palette-edit/index.js +1 -0
  56. package/build/palette-edit/index.js.map +1 -1
  57. package/build/private-apis.js +3 -1
  58. package/build/private-apis.js.map +1 -1
  59. package/build/radio-group/index.js +6 -0
  60. package/build/radio-group/index.js.map +1 -1
  61. package/build/radio-group/radio.js +2 -3
  62. package/build/radio-group/radio.js.map +1 -1
  63. package/build/range-control/styles/range-control-styles.js +28 -28
  64. package/build/range-control/styles/range-control-styles.js.map +1 -1
  65. package/build/select-control/index.js +9 -0
  66. package/build/select-control/index.js.map +1 -1
  67. package/build/select-control/types.js.map +1 -1
  68. package/build/slot-fill/context.js +4 -3
  69. package/build/slot-fill/context.js.map +1 -1
  70. package/build/slot-fill/fill.js +10 -15
  71. package/build/slot-fill/fill.js.map +1 -1
  72. package/build/slot-fill/provider.js +41 -55
  73. package/build/slot-fill/provider.js.map +1 -1
  74. package/build/slot-fill/slot.js +31 -23
  75. package/build/slot-fill/slot.js.map +1 -1
  76. package/build/slot-fill/types.js.map +1 -1
  77. package/build/tab-panel/index.js +2 -3
  78. package/build/tab-panel/index.js.map +1 -1
  79. package/build/tabs/index.js +21 -4
  80. package/build/tabs/index.js.map +1 -1
  81. package/build/tabs/types.js.map +1 -1
  82. package/build/text/hook.js +6 -6
  83. package/build/text/hook.js.map +1 -1
  84. package/build/text/styles.js +7 -7
  85. package/build/text/styles.js.map +1 -1
  86. package/build/toggle-group-control/toggle-group-control/as-radio-group.js +2 -3
  87. package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
  88. package/build/tooltip/index.js +2 -3
  89. package/build/tooltip/index.js.map +1 -1
  90. package/build/tree-select/index.js +10 -2
  91. package/build/tree-select/index.js.map +1 -1
  92. package/build/tree-select/types.js.map +1 -1
  93. package/build-module/badge/index.js +57 -0
  94. package/build-module/badge/index.js.map +1 -0
  95. package/build-module/badge/types.js +2 -0
  96. package/build-module/badge/types.js.map +1 -0
  97. package/build-module/box-control/index.js +5 -1
  98. package/build-module/box-control/index.js.map +1 -1
  99. package/build-module/box-control/input-control.js +92 -31
  100. package/build-module/box-control/input-control.js.map +1 -1
  101. package/build-module/box-control/types.js.map +1 -1
  102. package/build-module/box-control/utils.js +47 -0
  103. package/build-module/box-control/utils.js.map +1 -1
  104. package/build-module/button-group/index.js +10 -0
  105. package/build-module/button-group/index.js.map +1 -1
  106. package/build-module/button-group/types.js.map +1 -1
  107. package/build-module/custom-select-control/index.js +3 -5
  108. package/build-module/custom-select-control/index.js.map +1 -1
  109. package/build-module/custom-select-control-v2/custom-select.js +1 -2
  110. package/build-module/custom-select-control-v2/custom-select.js.map +1 -1
  111. package/build-module/date-time/date/index.js +1 -0
  112. package/build-module/date-time/date/index.js.map +1 -1
  113. package/build-module/dimension-control/index.js +1 -0
  114. package/build-module/dimension-control/index.js.map +1 -1
  115. package/build-module/font-size-picker/styles.js +9 -9
  116. package/build-module/font-size-picker/styles.js.map +1 -1
  117. package/build-module/heading/hook.js +1 -1
  118. package/build-module/heading/hook.js.map +1 -1
  119. package/build-module/input-control/index.js +9 -0
  120. package/build-module/input-control/index.js.map +1 -1
  121. package/build-module/input-control/types.js.map +1 -1
  122. package/build-module/menu/checkbox-item.js +2 -0
  123. package/build-module/menu/checkbox-item.js.map +1 -1
  124. package/build-module/menu/index.js +28 -97
  125. package/build-module/menu/index.js.map +1 -1
  126. package/build-module/menu/item.js +10 -1
  127. package/build-module/menu/item.js.map +1 -1
  128. package/build-module/menu/popover.js +81 -0
  129. package/build-module/menu/popover.js.map +1 -0
  130. package/build-module/menu/radio-item.js +2 -0
  131. package/build-module/menu/radio-item.js.map +1 -1
  132. package/build-module/menu/submenu-trigger-item.js +50 -0
  133. package/build-module/menu/submenu-trigger-item.js.map +1 -0
  134. package/build-module/menu/trigger-button.js +37 -0
  135. package/build-module/menu/trigger-button.js.map +1 -0
  136. package/build-module/menu/types.js.map +1 -1
  137. package/build-module/navigation/back-button/index.js +1 -0
  138. package/build-module/navigation/back-button/index.js.map +1 -1
  139. package/build-module/navigation/index.js +6 -0
  140. package/build-module/navigation/index.js.map +1 -1
  141. package/build-module/navigation/item/index.js +1 -0
  142. package/build-module/navigation/item/index.js.map +1 -1
  143. package/build-module/number-control/index.js +1 -0
  144. package/build-module/number-control/index.js.map +1 -1
  145. package/build-module/palette-edit/index.js +1 -0
  146. package/build-module/palette-edit/index.js.map +1 -1
  147. package/build-module/private-apis.js +3 -1
  148. package/build-module/private-apis.js.map +1 -1
  149. package/build-module/radio-group/index.js +6 -0
  150. package/build-module/radio-group/index.js.map +1 -1
  151. package/build-module/radio-group/radio.js +1 -2
  152. package/build-module/radio-group/radio.js.map +1 -1
  153. package/build-module/range-control/styles/range-control-styles.js +28 -28
  154. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  155. package/build-module/select-control/index.js +9 -0
  156. package/build-module/select-control/index.js.map +1 -1
  157. package/build-module/select-control/types.js.map +1 -1
  158. package/build-module/slot-fill/context.js +5 -3
  159. package/build-module/slot-fill/context.js.map +1 -1
  160. package/build-module/slot-fill/fill.js +10 -15
  161. package/build-module/slot-fill/fill.js.map +1 -1
  162. package/build-module/slot-fill/provider.js +41 -55
  163. package/build-module/slot-fill/provider.js.map +1 -1
  164. package/build-module/slot-fill/slot.js +32 -24
  165. package/build-module/slot-fill/slot.js.map +1 -1
  166. package/build-module/slot-fill/types.js.map +1 -1
  167. package/build-module/tab-panel/index.js +1 -2
  168. package/build-module/tab-panel/index.js.map +1 -1
  169. package/build-module/tabs/index.js +21 -4
  170. package/build-module/tabs/index.js.map +1 -1
  171. package/build-module/tabs/types.js.map +1 -1
  172. package/build-module/text/hook.js +6 -6
  173. package/build-module/text/hook.js.map +1 -1
  174. package/build-module/text/styles.js +7 -7
  175. package/build-module/text/styles.js.map +1 -1
  176. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +1 -2
  177. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
  178. package/build-module/tooltip/index.js +1 -2
  179. package/build-module/tooltip/index.js.map +1 -1
  180. package/build-module/tree-select/index.js +10 -2
  181. package/build-module/tree-select/index.js.map +1 -1
  182. package/build-module/tree-select/types.js.map +1 -1
  183. package/build-style/style-rtl.css +60 -13
  184. package/build-style/style.css +60 -13
  185. package/build-types/alignment-matrix-control/stories/index.story.d.ts +1 -1
  186. package/build-types/alignment-matrix-control/stories/index.story.d.ts.map +1 -1
  187. package/build-types/angle-picker-control/stories/index.story.d.ts +1 -1
  188. package/build-types/animate/stories/index.story.d.ts +7 -7
  189. package/build-types/animate/stories/index.story.d.ts.map +1 -1
  190. package/build-types/badge/index.d.ts +8 -0
  191. package/build-types/badge/index.d.ts.map +1 -0
  192. package/build-types/badge/stories/index.story.d.ts +17 -0
  193. package/build-types/badge/stories/index.story.d.ts.map +1 -0
  194. package/build-types/badge/test/index.d.ts +2 -0
  195. package/build-types/badge/test/index.d.ts.map +1 -0
  196. package/build-types/badge/types.d.ts +13 -0
  197. package/build-types/badge/types.d.ts.map +1 -0
  198. package/build-types/base-control/stories/index.story.d.ts +1 -1
  199. package/build-types/border-box-control/stories/index.story.d.ts +1 -1
  200. package/build-types/border-control/stories/index.story.d.ts +5 -5
  201. package/build-types/box-control/index.d.ts +1 -1
  202. package/build-types/box-control/index.d.ts.map +1 -1
  203. package/build-types/box-control/input-control.d.ts +1 -1
  204. package/build-types/box-control/input-control.d.ts.map +1 -1
  205. package/build-types/box-control/stories/index.story.d.ts +356 -11
  206. package/build-types/box-control/stories/index.story.d.ts.map +1 -1
  207. package/build-types/box-control/styles/box-control-styles.d.ts +2 -2
  208. package/build-types/box-control/types.d.ts +17 -0
  209. package/build-types/box-control/types.d.ts.map +1 -1
  210. package/build-types/box-control/utils.d.ts +27 -1
  211. package/build-types/box-control/utils.d.ts.map +1 -1
  212. package/build-types/button/stories/e2e/index.story.d.ts +1 -1
  213. package/build-types/button/stories/e2e/index.story.d.ts.map +1 -1
  214. package/build-types/button/stories/index.story.d.ts +7 -7
  215. package/build-types/button/stories/index.story.d.ts.map +1 -1
  216. package/build-types/button-group/index.d.ts +3 -1
  217. package/build-types/button-group/index.d.ts.map +1 -1
  218. package/build-types/button-group/stories/index.story.d.ts +6 -0
  219. package/build-types/button-group/stories/index.story.d.ts.map +1 -1
  220. package/build-types/button-group/types.d.ts +7 -0
  221. package/build-types/button-group/types.d.ts.map +1 -1
  222. package/build-types/circular-option-picker/stories/index.story.d.ts +5 -5
  223. package/build-types/circular-option-picker/stories/index.story.d.ts.map +1 -1
  224. package/build-types/color-palette/stories/index.story.d.ts +3 -3
  225. package/build-types/color-palette/stories/index.story.d.ts.map +1 -1
  226. package/build-types/color-picker/styles.d.ts +2 -2
  227. package/build-types/color-picker/styles.d.ts.map +1 -1
  228. package/build-types/combobox-control/stories/index.story.d.ts +4 -4
  229. package/build-types/confirm-dialog/stories/index.story.d.ts +2 -2
  230. package/build-types/confirm-dialog/stories/index.story.d.ts.map +1 -1
  231. package/build-types/custom-gradient-picker/stories/index.story.d.ts +1 -1
  232. package/build-types/custom-gradient-picker/stories/index.story.d.ts.map +1 -1
  233. package/build-types/custom-select-control/stories/index.story.d.ts +3 -3
  234. package/build-types/custom-select-control/stories/index.story.d.ts.map +1 -1
  235. package/build-types/custom-select-control-v2/custom-select.d.ts.map +1 -1
  236. package/build-types/custom-select-control-v2/stories/index.story.d.ts +3 -3
  237. package/build-types/custom-select-control-v2/stories/index.story.d.ts.map +1 -1
  238. package/build-types/date-time/date/index.d.ts.map +1 -1
  239. package/build-types/date-time/stories/time.story.d.ts +1 -1
  240. package/build-types/date-time/stories/time.story.d.ts.map +1 -1
  241. package/build-types/date-time/time/styles.d.ts +4 -4
  242. package/build-types/dimension-control/index.d.ts.map +1 -1
  243. package/build-types/dimension-control/stories/index.story.d.ts +1 -1
  244. package/build-types/disabled/stories/index.story.d.ts.map +1 -1
  245. package/build-types/drop-zone/stories/index.story.d.ts +1 -1
  246. package/build-types/drop-zone/stories/index.story.d.ts.map +1 -1
  247. package/build-types/duotone-picker/stories/duotone-picker.story.d.ts +1 -1
  248. package/build-types/duotone-picker/stories/duotone-picker.story.d.ts.map +1 -1
  249. package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts +3 -3
  250. package/build-types/duotone-picker/stories/duotone-swatch.story.d.ts.map +1 -1
  251. package/build-types/focal-point-picker/stories/index.story.d.ts +4 -4
  252. package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts +1 -1
  253. package/build-types/font-size-picker/styles.d.ts.map +1 -1
  254. package/build-types/form-file-upload/stories/index.story.d.ts +5 -5
  255. package/build-types/form-file-upload/stories/index.story.d.ts.map +1 -1
  256. package/build-types/gradient-picker/stories/index.story.d.ts +3 -3
  257. package/build-types/gradient-picker/stories/index.story.d.ts.map +1 -1
  258. package/build-types/guide/stories/index.story.d.ts +1 -1
  259. package/build-types/guide/stories/index.story.d.ts.map +1 -1
  260. package/build-types/icon/stories/index.story.d.ts +4 -4
  261. package/build-types/icon/stories/index.story.d.ts.map +1 -1
  262. package/build-types/input-control/index.d.ts +1 -0
  263. package/build-types/input-control/index.d.ts.map +1 -1
  264. package/build-types/input-control/stories/index.story.d.ts +7 -7
  265. package/build-types/input-control/stories/index.story.d.ts.map +1 -1
  266. package/build-types/input-control/types.d.ts +11 -2
  267. package/build-types/input-control/types.d.ts.map +1 -1
  268. package/build-types/keyboard-shortcuts/stories/index.story.d.ts +1 -1
  269. package/build-types/keyboard-shortcuts/stories/index.story.d.ts.map +1 -1
  270. package/build-types/menu/checkbox-item.d.ts.map +1 -1
  271. package/build-types/menu/index.d.ts +10 -1
  272. package/build-types/menu/index.d.ts.map +1 -1
  273. package/build-types/menu/item.d.ts.map +1 -1
  274. package/build-types/menu/popover.d.ts +3 -0
  275. package/build-types/menu/popover.d.ts.map +1 -0
  276. package/build-types/menu/radio-item.d.ts.map +1 -1
  277. package/build-types/menu/stories/index.story.d.ts +9 -9
  278. package/build-types/menu/stories/index.story.d.ts.map +1 -1
  279. package/build-types/menu/submenu-trigger-item.d.ts +3 -0
  280. package/build-types/menu/submenu-trigger-item.d.ts.map +1 -0
  281. package/build-types/menu/trigger-button.d.ts +3 -0
  282. package/build-types/menu/trigger-button.d.ts.map +1 -0
  283. package/build-types/menu/types.d.ts +208 -57
  284. package/build-types/menu/types.d.ts.map +1 -1
  285. package/build-types/menu-group/stories/index.story.d.ts +1 -1
  286. package/build-types/menu-group/stories/index.story.d.ts.map +1 -1
  287. package/build-types/menu-item/stories/index.story.d.ts +4 -4
  288. package/build-types/modal/stories/index.story.d.ts.map +1 -1
  289. package/build-types/navigation/back-button/index.d.ts.map +1 -1
  290. package/build-types/navigation/index.d.ts.map +1 -1
  291. package/build-types/navigation/item/index.d.ts.map +1 -1
  292. package/build-types/navigation/stories/index.story.d.ts +6 -6
  293. package/build-types/navigation/stories/index.story.d.ts.map +1 -1
  294. package/build-types/notice/stories/index.story.d.ts +4 -4
  295. package/build-types/notice/stories/index.story.d.ts.map +1 -1
  296. package/build-types/number-control/index.d.ts +1 -1
  297. package/build-types/number-control/index.d.ts.map +1 -1
  298. package/build-types/number-control/stories/index.story.d.ts +2 -2
  299. package/build-types/palette-edit/index.d.ts.map +1 -1
  300. package/build-types/palette-edit/stories/index.story.d.ts +2 -2
  301. package/build-types/palette-edit/stories/index.story.d.ts.map +1 -1
  302. package/build-types/private-apis.d.ts.map +1 -1
  303. package/build-types/progress-bar/stories/index.story.d.ts +1 -1
  304. package/build-types/progress-bar/stories/index.story.d.ts.map +1 -1
  305. package/build-types/query-controls/stories/index.story.d.ts +1 -1
  306. package/build-types/query-controls/stories/index.story.d.ts.map +1 -1
  307. package/build-types/radio-group/index.d.ts.map +1 -1
  308. package/build-types/radio-group/radio.d.ts.map +1 -1
  309. package/build-types/range-control/index.d.ts +1 -1
  310. package/build-types/range-control/styles/range-control-styles.d.ts +1 -1
  311. package/build-types/range-control/styles/range-control-styles.d.ts.map +1 -1
  312. package/build-types/resizable-box/stories/index.story.d.ts +2 -2
  313. package/build-types/responsive-wrapper/stories/index.story.d.ts +1 -1
  314. package/build-types/responsive-wrapper/stories/index.story.d.ts.map +1 -1
  315. package/build-types/sandbox/stories/index.story.d.ts +1 -1
  316. package/build-types/sandbox/stories/index.story.d.ts.map +1 -1
  317. package/build-types/search-control/stories/index.story.d.ts +1 -1
  318. package/build-types/search-control/stories/index.story.d.ts.map +1 -1
  319. package/build-types/select-control/index.d.ts +1 -0
  320. package/build-types/select-control/index.d.ts.map +1 -1
  321. package/build-types/select-control/stories/index.story.d.ts +5 -5
  322. package/build-types/select-control/stories/index.story.d.ts.map +1 -1
  323. package/build-types/select-control/types.d.ts +1 -1
  324. package/build-types/select-control/types.d.ts.map +1 -1
  325. package/build-types/shortcut/stories/index.story.d.ts +1 -1
  326. package/build-types/shortcut/stories/index.story.d.ts.map +1 -1
  327. package/build-types/slot-fill/context.d.ts.map +1 -1
  328. package/build-types/slot-fill/fill.d.ts.map +1 -1
  329. package/build-types/slot-fill/provider.d.ts.map +1 -1
  330. package/build-types/slot-fill/slot.d.ts.map +1 -1
  331. package/build-types/slot-fill/types.d.ts +13 -11
  332. package/build-types/slot-fill/types.d.ts.map +1 -1
  333. package/build-types/tab-panel/index.d.ts.map +1 -1
  334. package/build-types/tab-panel/stories/index.story.d.ts +4 -4
  335. package/build-types/tab-panel/stories/index.story.d.ts.map +1 -1
  336. package/build-types/tabs/index.d.ts +21 -4
  337. package/build-types/tabs/index.d.ts.map +1 -1
  338. package/build-types/tabs/stories/index.story.d.ts +10 -10
  339. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  340. package/build-types/tabs/types.d.ts +13 -13
  341. package/build-types/tabs/types.d.ts.map +1 -1
  342. package/build-types/text/stories/index.story.d.ts +3 -3
  343. package/build-types/theme/stories/index.story.d.ts +1 -1
  344. package/build-types/toggle-control/stories/index.story.d.ts +2 -2
  345. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -1
  346. package/build-types/toolbar/stories/index.story.d.ts +3 -3
  347. package/build-types/toolbar/stories/index.story.d.ts.map +1 -1
  348. package/build-types/tooltip/index.d.ts.map +1 -1
  349. package/build-types/tooltip/stories/index.story.d.ts +1 -1
  350. package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
  351. package/build-types/tree-grid/stories/index.story.d.ts +1 -1
  352. package/build-types/tree-grid/stories/index.story.d.ts.map +1 -1
  353. package/build-types/tree-select/index.d.ts +3 -2
  354. package/build-types/tree-select/index.d.ts.map +1 -1
  355. package/build-types/tree-select/stories/index.story.d.ts +1 -1
  356. package/build-types/tree-select/stories/index.story.d.ts.map +1 -1
  357. package/build-types/tree-select/types.d.ts +5 -1
  358. package/build-types/tree-select/types.d.ts.map +1 -1
  359. package/build-types/unit-control/index.d.ts +1 -1
  360. package/build-types/unit-control/styles/unit-control-styles.d.ts +1 -1
  361. package/build-types/v-stack/stories/index.story.d.ts +1 -1
  362. package/package.json +19 -19
  363. package/src/alignment-matrix-control/README.md +16 -15
  364. package/src/angle-picker-control/README.md +10 -9
  365. package/src/badge/README.md +24 -0
  366. package/src/badge/docs-manifest.json +5 -0
  367. package/src/badge/index.tsx +67 -0
  368. package/src/badge/stories/index.story.tsx +54 -0
  369. package/src/badge/styles.scss +49 -0
  370. package/src/badge/test/index.tsx +45 -0
  371. package/src/badge/types.ts +12 -0
  372. package/src/base-control/README.md +22 -21
  373. package/src/box-control/README.md +41 -24
  374. package/src/box-control/index.tsx +4 -0
  375. package/src/box-control/input-control.tsx +142 -40
  376. package/src/box-control/stories/index.story.tsx +12 -0
  377. package/src/box-control/types.ts +18 -0
  378. package/src/box-control/utils.ts +60 -0
  379. package/src/button/README.md +51 -50
  380. package/src/button/style.scss +9 -10
  381. package/src/button/test/index.tsx +9 -2
  382. package/src/button-group/README.md +4 -0
  383. package/src/button-group/index.tsx +11 -1
  384. package/src/button-group/stories/index.story.tsx +8 -1
  385. package/src/button-group/types.ts +7 -0
  386. package/src/custom-select-control/index.tsx +3 -3
  387. package/src/custom-select-control-v2/custom-select.tsx +1 -2
  388. package/src/custom-select-control-v2/stories/index.story.tsx +4 -0
  389. package/src/date-time/date/index.tsx +1 -0
  390. package/src/dimension-control/index.tsx +1 -0
  391. package/src/dimension-control/test/__snapshots__/index.test.js.snap +4 -4
  392. package/src/disabled/stories/index.story.tsx +1 -0
  393. package/src/drop-zone/stories/index.story.tsx +7 -1
  394. package/src/font-size-picker/styles.ts +1 -0
  395. package/src/form-file-upload/README.md +22 -21
  396. package/src/gradient-picker/README.md +36 -35
  397. package/src/heading/hook.ts +1 -1
  398. package/src/heading/test/__snapshots__/index.tsx.snap +4 -4
  399. package/src/icon/README.md +9 -8
  400. package/src/input-control/README.md +1 -0
  401. package/src/input-control/index.tsx +10 -0
  402. package/src/input-control/stories/index.story.tsx +6 -1
  403. package/src/input-control/test/index.js +9 -3
  404. package/src/input-control/types.ts +11 -2
  405. package/src/menu/checkbox-item.tsx +2 -1
  406. package/src/menu/index.tsx +61 -165
  407. package/src/menu/item.tsx +17 -2
  408. package/src/menu/popover.tsx +103 -0
  409. package/src/menu/radio-item.tsx +2 -1
  410. package/src/menu/stories/index.story.tsx +533 -381
  411. package/src/menu/submenu-trigger-item.tsx +61 -0
  412. package/src/menu/test/index.tsx +266 -182
  413. package/src/menu/trigger-button.tsx +46 -0
  414. package/src/menu/types.ts +210 -63
  415. package/src/modal/stories/index.story.tsx +4 -1
  416. package/src/navigation/back-button/index.tsx +1 -0
  417. package/src/navigation/index.tsx +7 -0
  418. package/src/navigation/item/index.tsx +2 -0
  419. package/src/navigation/test/index.tsx +4 -0
  420. package/src/navigator/test/index.tsx +4 -0
  421. package/src/number-control/index.tsx +1 -0
  422. package/src/palette-edit/index.tsx +1 -0
  423. package/src/panel/stories/index.story.tsx +3 -3
  424. package/src/private-apis.ts +2 -0
  425. package/src/radio-group/index.tsx +12 -1
  426. package/src/radio-group/radio.tsx +1 -2
  427. package/src/range-control/styles/range-control-styles.ts +8 -4
  428. package/src/select-control/README.md +3 -0
  429. package/src/select-control/index.tsx +10 -0
  430. package/src/select-control/stories/index.story.tsx +2 -0
  431. package/src/select-control/test/select-control.tsx +7 -1
  432. package/src/select-control/types.ts +1 -0
  433. package/src/slot-fill/context.ts +5 -3
  434. package/src/slot-fill/fill.ts +10 -15
  435. package/src/slot-fill/provider.tsx +63 -64
  436. package/src/slot-fill/slot.tsx +40 -27
  437. package/src/slot-fill/types.ts +23 -11
  438. package/src/style.scss +1 -0
  439. package/src/tab-panel/index.tsx +1 -2
  440. package/src/tab-panel/stories/index.story.tsx +4 -0
  441. package/src/tabs/README.md +151 -187
  442. package/src/tabs/docs-manifest.json +22 -0
  443. package/src/tabs/index.tsx +21 -4
  444. package/src/tabs/stories/best-practices.mdx +99 -0
  445. package/src/tabs/stories/index.story.tsx +5 -0
  446. package/src/tabs/types.ts +13 -14
  447. package/src/text/hook.ts +2 -2
  448. package/src/text/styles.ts +1 -1
  449. package/src/text/test/__snapshots__/index.tsx.snap +3 -3
  450. package/src/text/test/index.tsx +1 -1
  451. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +2 -2
  452. package/src/toggle-group-control/test/index.tsx +7 -1
  453. package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +1 -2
  454. package/src/tooltip/index.tsx +1 -2
  455. package/src/tree-grid/stories/index.story.tsx +2 -0
  456. package/src/tree-select/README.md +144 -28
  457. package/src/tree-select/docs-manifest.json +5 -0
  458. package/src/tree-select/index.tsx +11 -2
  459. package/src/tree-select/stories/index.story.tsx +1 -0
  460. package/src/tree-select/types.ts +8 -1
  461. package/tsconfig.json +0 -3
  462. package/tsconfig.tsbuildinfo +1 -1
  463. package/build/slot-fill/use-slot.js +0 -32
  464. package/build/slot-fill/use-slot.js.map +0 -1
  465. package/build-module/slot-fill/use-slot.js +0 -24
  466. package/build-module/slot-fill/use-slot.js.map +0 -1
  467. package/build-types/slot-fill/use-slot.d.ts +0 -10
  468. package/build-types/slot-fill/use-slot.d.ts.map +0 -1
  469. package/src/slot-fill/use-slot.ts +0 -27
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_compose","_element","_i18n","_view","_context","_interopRequireDefault","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","setSelectedElement","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","isRTL","selectedValue","useStoreState","useEffect","setActiveId","groupContextValue","useMemo","activeItemIsNotFirstItem","getState","activeId","first","isBlock","jsx","Provider","RadioGroup","store","render","View","ref","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\tsetSelectedElement,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\t// Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n\tuseEffect( () => {\n\t\tif ( selectedValue === '' ) {\n\t\t\tradio.setActiveId( undefined );\n\t\t}\n\t}, [ radio, selectedValue ] );\n\n\tconst groupContextValue = useMemo(\n\t\t(): ToggleGroupControlContextProps => ( {\n\t\t\tactiveItemIsNotFirstItem: () =>\n\t\t\t\tradio.getState().activeId !== radio.first(),\n\t\t\tbaseId,\n\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\tsize,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tvalue: selectedValue,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tsetValue,\n\t\t\tsetSelectedElement,\n\t\t} ),\n\t\t[\n\t\t\tbaseId,\n\t\t\tisAdaptiveWidth,\n\t\t\tradio,\n\t\t\tselectedValue,\n\t\t\tsetSelectedElement,\n\t\t\tsetValue,\n\t\t\tsize,\n\t\t]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";;;;;;;AAIA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0C,IAAAC,OAAA,GAAAH,MAAA;AAM1C,IAAAI,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AAAkE,IAAAS,WAAA,GAAAT,OAAA;AAAA,SAAAU,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AApBlE;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;;AAUA,SAASW,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACVC,kBAAkB;EAClB,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAChCC,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGP,MAAM,IAAII,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEP,KAAK;IAAEW;EAAa,CAAC,GAC5B,IAAAC,8CAAuC,EAAEX,SAAU,CAAC;;EAErD;EACA;EACA,MAAMY,mBAAmB,GAAGf,YAAY,GACnCgB,CAAyB,IAAM;IACjChB,YAAY,CAAEgB,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAGpD,OAAO,CAACqD,aAAa,CAAE;IACpCN,YAAY;IACZX,KAAK;IACLkB,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMC,aAAa,GAAG,IAAAC,oBAAa,EAAEN,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;;EAE/B;EACA,IAAAK,kBAAS,EAAE,MAAM;IAChB,IAAKF,aAAa,KAAK,EAAE,EAAG;MAC3BL,KAAK,CAACQ,WAAW,CAAET,SAAU,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEC,KAAK,EAAEK,aAAa,CAAG,CAAC;EAE7B,MAAMI,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OAAwC;IACvCC,wBAAwB,EAAEA,CAAA,KACzBX,KAAK,CAACY,QAAQ,CAAC,CAAC,CAACC,QAAQ,KAAKb,KAAK,CAACc,KAAK,CAAC,CAAC;IAC5CpB,MAAM;IACNqB,OAAO,EAAE,CAAEpC,eAAe;IAC1BI,IAAI;IACJ;IACAC,KAAK,EAAEqB,aAAa;IACpB;IACAH,QAAQ;IACRd;EACD,CAAC,CAAE,EACH,CACCM,MAAM,EACNf,eAAe,EACfqB,KAAK,EACLK,aAAa,EACbjB,kBAAkB,EAClBc,QAAQ,EACRnB,IAAI,CAEN,CAAC;EAED,oBACC,IAAA3B,WAAA,CAAA4D,GAAA,EAAC/D,QAAA,CAAAU,OAAyB,CAACsD,QAAQ;IAACjC,KAAK,EAAGyB,iBAAmB;IAAA/B,QAAA,eAC9D,IAAAtB,WAAA,CAAA4D,GAAA,EAACpE,OAAO,CAACsE,UAAU;MAClBC,KAAK,EAAGnB,KAAO;MACf,cAAapB,KAAO;MACpBwC,MAAM,eAAG,IAAAhE,WAAA,CAAA4D,GAAA,EAAChE,KAAA,CAAAqE,IAAI,IAAE,CAAG;MAAA,GACdhC,UAAU;MACfH,EAAE,EAAGQ,MAAQ;MACb4B,GAAG,EAAGhC,YAAc;MAAAZ,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEO,MAAMe,8BAA8B,GAAA8B,OAAA,CAAA9B,8BAAA,GAAG,IAAA+B,mBAAU,EACvD/C,yCACD,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_compose","_element","_i18n","_view","_context","_interopRequireDefault","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","setSelectedElement","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","isRTL","selectedValue","useStoreState","useEffect","setActiveId","groupContextValue","useMemo","activeItemIsNotFirstItem","getState","activeId","first","isBlock","jsx","Provider","RadioGroup","store","render","View","ref","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\tsetSelectedElement,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = Ariakit.useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\t// Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n\tuseEffect( () => {\n\t\tif ( selectedValue === '' ) {\n\t\t\tradio.setActiveId( undefined );\n\t\t}\n\t}, [ radio, selectedValue ] );\n\n\tconst groupContextValue = useMemo(\n\t\t(): ToggleGroupControlContextProps => ( {\n\t\t\tactiveItemIsNotFirstItem: () =>\n\t\t\t\tradio.getState().activeId !== radio.first(),\n\t\t\tbaseId,\n\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\tsize,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tvalue: selectedValue,\n\t\t\t// @ts-expect-error - This is wrong and we should fix it.\n\t\t\tsetValue,\n\t\t\tsetSelectedElement,\n\t\t} ),\n\t\t[\n\t\t\tbaseId,\n\t\t\tisAdaptiveWidth,\n\t\t\tradio,\n\t\t\tselectedValue,\n\t\t\tsetSelectedElement,\n\t\t\tsetValue,\n\t\t\tsize,\n\t\t]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"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","ignoreList":[]}
@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.Tooltip = exports.TOOLTIP_DELAY = void 0;
8
- var _react = _interopRequireWildcard(require("@ariakit/react"));
9
- var Ariakit = _react;
8
+ var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
10
9
  var _clsx = _interopRequireDefault(require("clsx"));
11
10
  var _compose = require("@wordpress/compose");
12
11
  var _element = require("@wordpress/element");
@@ -84,7 +83,7 @@ function UnforwardedTooltip(props, ref) {
84
83
  placement: computedPlacement,
85
84
  showTimeout: delay
86
85
  });
87
- const mounted = (0, _react.useStoreState)(tooltipStore, 'mounted');
86
+ const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');
88
87
  if (isNestedInTooltip) {
89
88
  return isOnlyChild ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.Role, {
90
89
  ...restProps,
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_clsx","_interopRequireDefault","_compose","_element","_deprecated","_shortcut","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TooltipInternalContext","createContext","isNestedInTooltip","TOOLTIP_DELAY","exports","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","useContext","baseId","useInstanceId","Tooltip","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","useStoreState","jsx","Role","render","addDescribedById","element","cloneElement","jsxs","Provider","value","TooltipAnchor","onClick","hide","store","clsx","unmountOnHide","gutter","id","overflowPadding","forwardRef","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// The `aria-describedby` attribute is added only if the anchor doesn't have\n\t// one already, and if the tooltip text is not the same as the anchor's\n\t// `aria-label`\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\t// See: https://github.com/WordPress/gutenberg/pull/65989\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById &&\n\t\t\tmounted &&\n\t\t\telement.props[ 'aria-describedby' ] === undefined &&\n\t\t\telement.props[ 'aria-label' ] !== text\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text || shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_compose","_element","_deprecated","_shortcut","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TooltipInternalContext","createContext","isNestedInTooltip","TOOLTIP_DELAY","exports","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","useContext","baseId","useInstanceId","Tooltip","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","useStoreState","jsx","Role","render","addDescribedById","element","cloneElement","jsxs","Provider","value","TooltipAnchor","onClick","hide","store","clsx","unmountOnHide","gutter","id","overflowPadding","forwardRef","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text || shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement || 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = Ariakit.useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// The `aria-describedby` attribute is added only if the anchor doesn't have\n\t// one already, and if the tooltip text is not the same as the anchor's\n\t// `aria-label`\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\t// See: https://github.com/WordPress/gutenberg/pull/65989\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById &&\n\t\t\tmounted &&\n\t\t\telement.props[ 'aria-describedby' ] === undefined &&\n\t\t\telement.props[ 'aria-label' ] !== text\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text || shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
@@ -11,6 +11,7 @@ var _htmlEntities = require("@wordpress/html-entities");
11
11
  var _selectControl = require("../select-control");
12
12
  var _useDeprecatedProps = require("../utils/use-deprecated-props");
13
13
  var _context = require("../context");
14
+ var _deprecated36pxSize = require("../utils/deprecated-36px-size");
14
15
  var _jsxRuntime = require("react/jsx-runtime");
15
16
  /**
16
17
  * WordPress dependencies
@@ -37,11 +38,11 @@ function getSelectOptions(tree, level = 0) {
37
38
  }
38
39
 
39
40
  /**
40
- * TreeSelect component is used to generate select input fields.
41
+ * Generates a hierarchical select input.
41
42
  *
42
43
  * ```jsx
44
+ * import { useState } from 'react';
43
45
  * import { TreeSelect } from '@wordpress/components';
44
- * import { useState } from '@wordpress/element';
45
46
  *
46
47
  * const MyTreeSelect = () => {
47
48
  * const [ page, setPage ] = useState( 'p21' );
@@ -49,6 +50,7 @@ function getSelectOptions(tree, level = 0) {
49
50
  * return (
50
51
  * <TreeSelect
51
52
  * __nextHasNoMarginBottom
53
+ * __next40pxDefaultSize
52
54
  * label="Parent page"
53
55
  * noOptionLabel="No parent page"
54
56
  * onChange={ ( newPage ) => setPage( newPage ) }
@@ -99,9 +101,15 @@ function TreeSelect(props) {
99
101
  label: noOptionLabel
100
102
  }, ...getSelectOptions(tree)].filter(option => !!option);
101
103
  }, [noOptionLabel, tree]);
104
+ (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
105
+ componentName: 'TreeSelect',
106
+ size: restProps.size,
107
+ __next40pxDefaultSize: restProps.__next40pxDefaultSize
108
+ });
102
109
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ContextSystemProvider, {
103
110
  value: CONTEXT_VALUE,
104
111
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.SelectControl, {
112
+ __shouldNotWarnDeprecated36pxSize: true,
105
113
  label,
106
114
  options,
107
115
  onChange,
@@ -1 +1 @@
1
- {"version":3,"names":["_element","require","_htmlEntities","_selectControl","_useDeprecatedProps","_context","_jsxRuntime","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","getSelectOptions","tree","level","flatMap","treeNode","value","id","label","repeat","decodeEntities","name","children","TreeSelect","props","noOptionLabel","onChange","selectedId","restProps","useDeprecated36pxDefaultSizeProp","options","useMemo","filter","option","jsx","ContextSystemProvider","SelectControl","_default","exports","default"],"sources":["@wordpress/components/src/tree-select/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { SelectControl } from '../select-control';\nimport type { TreeSelectProps, Tree, Truthy } from './types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { ContextSystemProvider } from '../context';\n\nconst CONTEXT_VALUE = {\n\tBaseControl: {\n\t\t// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`\n\t\t// via the context system to override the value set by SelectControl.\n\t\t_overrides: { __associatedWPComponentName: 'TreeSelect' },\n\t},\n};\n\nfunction getSelectOptions(\n\ttree: Tree[],\n\tlevel = 0\n): NonNullable< TreeSelectProps[ 'options' ] > {\n\treturn tree.flatMap( ( treeNode ) => [\n\t\t{\n\t\t\tvalue: treeNode.id,\n\t\t\tlabel:\n\t\t\t\t'\\u00A0'.repeat( level * 3 ) + decodeEntities( treeNode.name ),\n\t\t},\n\t\t...getSelectOptions( treeNode.children || [], level + 1 ),\n\t] );\n}\n\n/**\n * TreeSelect component is used to generate select input fields.\n *\n * ```jsx\n * import { TreeSelect } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTreeSelect = () => {\n * \tconst [ page, setPage ] = useState( 'p21' );\n *\n * \treturn (\n * \t\t<TreeSelect\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel=\"Parent page\"\n * \t\t\tnoOptionLabel=\"No parent page\"\n * \t\t\tonChange={ ( newPage ) => setPage( newPage ) }\n * \t\t\tselectedId={ page }\n * \t\t\ttree={ [\n * \t\t\t\t{\n * \t\t\t\t\tname: 'Page 1',\n * \t\t\t\t\tid: 'p1',\n * \t\t\t\t\tchildren: [\n * \t\t\t\t\t\t{ name: 'Descend 1 of page 1', id: 'p11' },\n * \t\t\t\t\t\t{ name: 'Descend 2 of page 1', id: 'p12' },\n * \t\t\t\t\t],\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\tname: 'Page 2',\n * \t\t\t\t\tid: 'p2',\n * \t\t\t\t\tchildren: [\n * \t\t\t\t\t\t{\n * \t\t\t\t\t\t\tname: 'Descend 1 of page 2',\n * \t\t\t\t\t\t\tid: 'p21',\n * \t\t\t\t\t\t\tchildren: [\n * \t\t\t\t\t\t\t\t{\n * \t\t\t\t\t\t\t\t\tname: 'Descend 1 of Descend 1 of page 2',\n * \t\t\t\t\t\t\t\t\tid: 'p211',\n * \t\t\t\t\t\t\t\t},\n * \t\t\t\t\t\t\t],\n * \t\t\t\t\t\t},\n * \t\t\t\t\t],\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function TreeSelect( props: TreeSelectProps ) {\n\tconst {\n\t\tlabel,\n\t\tnoOptionLabel,\n\t\tonChange,\n\t\tselectedId,\n\t\ttree = [],\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst options = useMemo( () => {\n\t\treturn [\n\t\t\tnoOptionLabel && { value: '', label: noOptionLabel },\n\t\t\t...getSelectOptions( tree ),\n\t\t].filter( < T, >( option: T ): option is Truthy< T > => !! option );\n\t}, [ noOptionLabel, tree ] );\n\n\treturn (\n\t\t<ContextSystemProvider value={ CONTEXT_VALUE }>\n\t\t\t<SelectControl\n\t\t\t\t{ ...{ label, options, onChange } }\n\t\t\t\tvalue={ selectedId }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default TreeSelect;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAKA,IAAAE,cAAA,GAAAF,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAmD,IAAAK,WAAA,GAAAL,OAAA;AAZnD;AACA;AACA;;AAIA;AACA;AACA;;AAMA,MAAMM,aAAa,GAAG;EACrBC,WAAW,EAAE;IACZ;IACA;IACAC,UAAU,EAAE;MAAEC,2BAA2B,EAAE;IAAa;EACzD;AACD,CAAC;AAED,SAASC,gBAAgBA,CACxBC,IAAY,EACZC,KAAK,GAAG,CAAC,EACqC;EAC9C,OAAOD,IAAI,CAACE,OAAO,CAAIC,QAAQ,IAAM,CACpC;IACCC,KAAK,EAAED,QAAQ,CAACE,EAAE;IAClBC,KAAK,EACJ,QAAQ,CAACC,MAAM,CAAEN,KAAK,GAAG,CAAE,CAAC,GAAG,IAAAO,4BAAc,EAAEL,QAAQ,CAACM,IAAK;EAC/D,CAAC,EACD,GAAGV,gBAAgB,CAAEI,QAAQ,CAACO,QAAQ,IAAI,EAAE,EAAET,KAAK,GAAG,CAAE,CAAC,CACxD,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASU,UAAUA,CAAEC,KAAsB,EAAG;EACpD,MAAM;IACLN,KAAK;IACLO,aAAa;IACbC,QAAQ;IACRC,UAAU;IACVf,IAAI,GAAG,EAAE;IACT,GAAGgB;EACJ,CAAC,GAAG,IAAAC,oDAAgC,EAAEL,KAAM,CAAC;EAE7C,MAAMM,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,OAAO,CACNN,aAAa,IAAI;MAAET,KAAK,EAAE,EAAE;MAAEE,KAAK,EAAEO;IAAc,CAAC,EACpD,GAAGd,gBAAgB,CAAEC,IAAK,CAAC,CAC3B,CAACoB,MAAM,CAAUC,MAAS,IAA6B,CAAC,CAAEA,MAAO,CAAC;EACpE,CAAC,EAAE,CAAER,aAAa,EAAEb,IAAI,CAAG,CAAC;EAE5B,oBACC,IAAAN,WAAA,CAAA4B,GAAA,EAAC7B,QAAA,CAAA8B,qBAAqB;IAACnB,KAAK,EAAGT,aAAe;IAAAe,QAAA,eAC7C,IAAAhB,WAAA,CAAA4B,GAAA,EAAC/B,cAAA,CAAAiC,aAAa;MACNlB,KAAK;MAAEY,OAAO;MAAEJ,QAAQ;MAC/BV,KAAK,EAAGW,UAAY;MAAA,GACfC;IAAS,CACd;EAAC,CACoB,CAAC;AAE1B;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEchB,UAAU","ignoreList":[]}
1
+ {"version":3,"names":["_element","require","_htmlEntities","_selectControl","_useDeprecatedProps","_context","_deprecated36pxSize","_jsxRuntime","CONTEXT_VALUE","BaseControl","_overrides","__associatedWPComponentName","getSelectOptions","tree","level","flatMap","treeNode","value","id","label","repeat","decodeEntities","name","children","TreeSelect","props","noOptionLabel","onChange","selectedId","restProps","useDeprecated36pxDefaultSizeProp","options","useMemo","filter","option","maybeWarnDeprecated36pxSize","componentName","size","__next40pxDefaultSize","jsx","ContextSystemProvider","SelectControl","__shouldNotWarnDeprecated36pxSize","_default","exports","default"],"sources":["@wordpress/components/src/tree-select/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { SelectControl } from '../select-control';\nimport type { TreeSelectProps, Tree, Truthy } from './types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { ContextSystemProvider } from '../context';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst CONTEXT_VALUE = {\n\tBaseControl: {\n\t\t// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`\n\t\t// via the context system to override the value set by SelectControl.\n\t\t_overrides: { __associatedWPComponentName: 'TreeSelect' },\n\t},\n};\n\nfunction getSelectOptions(\n\ttree: Tree[],\n\tlevel = 0\n): NonNullable< TreeSelectProps[ 'options' ] > {\n\treturn tree.flatMap( ( treeNode ) => [\n\t\t{\n\t\t\tvalue: treeNode.id,\n\t\t\tlabel:\n\t\t\t\t'\\u00A0'.repeat( level * 3 ) + decodeEntities( treeNode.name ),\n\t\t},\n\t\t...getSelectOptions( treeNode.children || [], level + 1 ),\n\t] );\n}\n\n/**\n * Generates a hierarchical select input.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { TreeSelect } from '@wordpress/components';\n *\n * const MyTreeSelect = () => {\n * \tconst [ page, setPage ] = useState( 'p21' );\n *\n * \treturn (\n * \t\t<TreeSelect\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Parent page\"\n * \t\t\tnoOptionLabel=\"No parent page\"\n * \t\t\tonChange={ ( newPage ) => setPage( newPage ) }\n * \t\t\tselectedId={ page }\n * \t\t\ttree={ [\n * \t\t\t\t{\n * \t\t\t\t\tname: 'Page 1',\n * \t\t\t\t\tid: 'p1',\n * \t\t\t\t\tchildren: [\n * \t\t\t\t\t\t{ name: 'Descend 1 of page 1', id: 'p11' },\n * \t\t\t\t\t\t{ name: 'Descend 2 of page 1', id: 'p12' },\n * \t\t\t\t\t],\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\tname: 'Page 2',\n * \t\t\t\t\tid: 'p2',\n * \t\t\t\t\tchildren: [\n * \t\t\t\t\t\t{\n * \t\t\t\t\t\t\tname: 'Descend 1 of page 2',\n * \t\t\t\t\t\t\tid: 'p21',\n * \t\t\t\t\t\t\tchildren: [\n * \t\t\t\t\t\t\t\t{\n * \t\t\t\t\t\t\t\t\tname: 'Descend 1 of Descend 1 of page 2',\n * \t\t\t\t\t\t\t\t\tid: 'p211',\n * \t\t\t\t\t\t\t\t},\n * \t\t\t\t\t\t\t],\n * \t\t\t\t\t\t},\n * \t\t\t\t\t],\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function TreeSelect( props: TreeSelectProps ) {\n\tconst {\n\t\tlabel,\n\t\tnoOptionLabel,\n\t\tonChange,\n\t\tselectedId,\n\t\ttree = [],\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst options = useMemo( () => {\n\t\treturn [\n\t\t\tnoOptionLabel && { value: '', label: noOptionLabel },\n\t\t\t...getSelectOptions( tree ),\n\t\t].filter( < T, >( option: T ): option is Truthy< T > => !! option );\n\t}, [ noOptionLabel, tree ] );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'TreeSelect',\n\t\tsize: restProps.size,\n\t\t__next40pxDefaultSize: restProps.__next40pxDefaultSize,\n\t} );\n\n\treturn (\n\t\t<ContextSystemProvider value={ CONTEXT_VALUE }>\n\t\t\t<SelectControl\n\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t{ ...{ label, options, onChange } }\n\t\t\t\tvalue={ selectedId }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default TreeSelect;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAKA,IAAAE,cAAA,GAAAF,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAA4E,IAAAM,WAAA,GAAAN,OAAA;AAb5E;AACA;AACA;;AAIA;AACA;AACA;;AAOA,MAAMO,aAAa,GAAG;EACrBC,WAAW,EAAE;IACZ;IACA;IACAC,UAAU,EAAE;MAAEC,2BAA2B,EAAE;IAAa;EACzD;AACD,CAAC;AAED,SAASC,gBAAgBA,CACxBC,IAAY,EACZC,KAAK,GAAG,CAAC,EACqC;EAC9C,OAAOD,IAAI,CAACE,OAAO,CAAIC,QAAQ,IAAM,CACpC;IACCC,KAAK,EAAED,QAAQ,CAACE,EAAE;IAClBC,KAAK,EACJ,QAAQ,CAACC,MAAM,CAAEN,KAAK,GAAG,CAAE,CAAC,GAAG,IAAAO,4BAAc,EAAEL,QAAQ,CAACM,IAAK;EAC/D,CAAC,EACD,GAAGV,gBAAgB,CAAEI,QAAQ,CAACO,QAAQ,IAAI,EAAE,EAAET,KAAK,GAAG,CAAE,CAAC,CACxD,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASU,UAAUA,CAAEC,KAAsB,EAAG;EACpD,MAAM;IACLN,KAAK;IACLO,aAAa;IACbC,QAAQ;IACRC,UAAU;IACVf,IAAI,GAAG,EAAE;IACT,GAAGgB;EACJ,CAAC,GAAG,IAAAC,oDAAgC,EAAEL,KAAM,CAAC;EAE7C,MAAMM,OAAO,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC9B,OAAO,CACNN,aAAa,IAAI;MAAET,KAAK,EAAE,EAAE;MAAEE,KAAK,EAAEO;IAAc,CAAC,EACpD,GAAGd,gBAAgB,CAAEC,IAAK,CAAC,CAC3B,CAACoB,MAAM,CAAUC,MAAS,IAA6B,CAAC,CAAEA,MAAO,CAAC;EACpE,CAAC,EAAE,CAAER,aAAa,EAAEb,IAAI,CAAG,CAAC;EAE5B,IAAAsB,+CAA2B,EAAE;IAC5BC,aAAa,EAAE,YAAY;IAC3BC,IAAI,EAAER,SAAS,CAACQ,IAAI;IACpBC,qBAAqB,EAAET,SAAS,CAACS;EAClC,CAAE,CAAC;EAEH,oBACC,IAAA/B,WAAA,CAAAgC,GAAA,EAAClC,QAAA,CAAAmC,qBAAqB;IAACvB,KAAK,EAAGT,aAAe;IAAAe,QAAA,eAC7C,IAAAhB,WAAA,CAAAgC,GAAA,EAACpC,cAAA,CAAAsC,aAAa;MACbC,iCAAiC;MAC1BvB,KAAK;MAAEY,OAAO;MAAEJ,QAAQ;MAC/BV,KAAK,EAAGW,UAAY;MAAA,GACfC;IAAS,CACd;EAAC,CACoB,CAAC;AAE1B;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcrB,UAAU","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/tree-select/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\nexport type Truthy< T > = T extends false | '' | 0 | null | undefined\n\t? never\n\t: T;\n\nexport interface Tree {\n\tid: string;\n\tname: string;\n\tchildren?: Tree[];\n}\n\n// `TreeSelect` inherits props from `SelectControl`, but only\n// in single selection mode (ie. when the `multiple` prop is not defined).\nexport interface TreeSelectProps\n\textends Omit< SelectControlSingleSelectionProps, 'value' | 'multiple' > {\n\t/**\n\t * If this property is added, an option will be added with this label to represent empty selection.\n\t */\n\tnoOptionLabel?: string;\n\t/**\n\t * An array containing the tree objects with the possible nodes the user can select.\n\t */\n\ttree?: Tree[];\n\t/**\n\t * The id of the currently selected node.\n\t */\n\tselectedId?: SelectControlSingleSelectionProps[ 'value' ];\n}\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/tree-select/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\nexport type Truthy< T > = T extends false | '' | 0 | null | undefined\n\t? never\n\t: T;\n\nexport interface Tree {\n\tid: string;\n\tname: string;\n\tchildren?: Tree[];\n}\n\n// `TreeSelect` inherits props from `SelectControl`, but only\n// in single selection mode (ie. when the `multiple` prop is not defined).\nexport interface TreeSelectProps\n\textends Omit<\n\t\tSelectControlSingleSelectionProps,\n\t\t'value' | 'multiple' | 'onChange'\n\t> {\n\t/**\n\t * If this property is added, an option will be added with this label to represent empty selection.\n\t */\n\tnoOptionLabel?: string;\n\t/**\n\t * A function that receives the value of the new option that is being selected as input.\n\t */\n\tonChange?: SelectControlSingleSelectionProps[ 'onChange' ];\n\t/**\n\t * An array containing the tree objects with the possible nodes the user can select.\n\t */\n\ttree?: Tree[];\n\t/**\n\t * The id of the currently selected node.\n\t */\n\tselectedId?: SelectControlSingleSelectionProps[ 'value' ];\n}\n"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,57 @@
1
+ /**
2
+ * External dependencies
3
+ */
4
+ import clsx from 'clsx';
5
+
6
+ /**
7
+ * WordPress dependencies
8
+ */
9
+ import { info, caution, error, published } from '@wordpress/icons';
10
+
11
+ /**
12
+ * Internal dependencies
13
+ */
14
+
15
+ import Icon from '../icon';
16
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
17
+ function Badge({
18
+ className,
19
+ intent = 'default',
20
+ children,
21
+ ...props
22
+ }) {
23
+ /**
24
+ * Returns an icon based on the badge context.
25
+ *
26
+ * @return The corresponding icon for the provided context.
27
+ */
28
+ function contextBasedIcon() {
29
+ switch (intent) {
30
+ case 'info':
31
+ return info;
32
+ case 'success':
33
+ return published;
34
+ case 'warning':
35
+ return caution;
36
+ case 'error':
37
+ return error;
38
+ default:
39
+ return null;
40
+ }
41
+ }
42
+ return /*#__PURE__*/_jsxs("span", {
43
+ className: clsx('components-badge', `is-${intent}`, intent !== 'default' && 'has-icon', className),
44
+ ...props,
45
+ children: [intent !== 'default' && /*#__PURE__*/_jsx(Icon, {
46
+ icon: contextBasedIcon(),
47
+ size: 16,
48
+ fill: "currentColor",
49
+ className: "components-badge__icon"
50
+ }), /*#__PURE__*/_jsx("span", {
51
+ className: "components-badge__content",
52
+ children: children
53
+ })]
54
+ });
55
+ }
56
+ export default Badge;
57
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["clsx","info","caution","error","published","Icon","jsx","_jsx","jsxs","_jsxs","Badge","className","intent","children","props","contextBasedIcon","icon","size","fill"],"sources":["@wordpress/components/src/badge/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { info, caution, error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { BadgeProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Icon from '../icon';\n\nfunction Badge( {\n\tclassName,\n\tintent = 'default',\n\tchildren,\n\t...props\n}: WordPressComponentProps< BadgeProps, 'span', false > ) {\n\t/**\n\t * Returns an icon based on the badge context.\n\t *\n\t * @return The corresponding icon for the provided context.\n\t */\n\tfunction contextBasedIcon() {\n\t\tswitch ( intent ) {\n\t\t\tcase 'info':\n\t\t\t\treturn info;\n\t\t\tcase 'success':\n\t\t\t\treturn published;\n\t\t\tcase 'warning':\n\t\t\t\treturn caution;\n\t\t\tcase 'error':\n\t\t\t\treturn error;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\t}\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-badge',\n\t\t\t\t`is-${ intent }`,\n\t\t\t\tintent !== 'default' && 'has-icon',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ intent !== 'default' && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ contextBasedIcon() }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tclassName=\"components-badge__icon\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<span className=\"components-badge__content\">{ children }</span>\n\t\t</span>\n\t);\n}\n\nexport default Badge;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAEC,SAAS,QAAQ,kBAAkB;;AAElE;AACA;AACA;;AAGA,OAAOC,IAAI,MAAM,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3B,SAASC,KAAKA,CAAE;EACfC,SAAS;EACTC,MAAM,GAAG,SAAS;EAClBC,QAAQ;EACR,GAAGC;AACkD,CAAC,EAAG;EACzD;AACD;AACA;AACA;AACA;EACC,SAASC,gBAAgBA,CAAA,EAAG;IAC3B,QAASH,MAAM;MACd,KAAK,MAAM;QACV,OAAOX,IAAI;MACZ,KAAK,SAAS;QACb,OAAOG,SAAS;MACjB,KAAK,SAAS;QACb,OAAOF,OAAO;MACf,KAAK,OAAO;QACX,OAAOC,KAAK;MACb;QACC,OAAO,IAAI;IACb;EACD;EAEA,oBACCM,KAAA;IACCE,SAAS,EAAGX,IAAI,CACf,kBAAkB,EAClB,MAAOY,MAAM,EAAG,EAChBA,MAAM,KAAK,SAAS,IAAI,UAAU,EAClCD,SACD,CAAG;IAAA,GACEG,KAAK;IAAAD,QAAA,GAERD,MAAM,KAAK,SAAS,iBACrBL,IAAA,CAACF,IAAI;MACJW,IAAI,EAAGD,gBAAgB,CAAC,CAAG;MAC3BE,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC,cAAc;MACnBP,SAAS,EAAC;IAAwB,CAClC,CACD,eACDJ,IAAA;MAAMI,SAAS,EAAC,2BAA2B;MAAAE,QAAA,EAAGA;IAAQ,CAAQ,CAAC;EAAA,CAC1D,CAAC;AAET;AAEA,eAAeH,KAAK","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/badge/types.ts"],"sourcesContent":["export type BadgeProps = {\n\t/**\n\t * Badge variant.\n\t *\n\t * @default 'default'\n\t */\n\tintent?: 'default' | 'info' | 'success' | 'warning' | 'error';\n\t/**\n\t * Text to display inside the badge.\n\t */\n\tchildren: string;\n};\n"],"mappings":"","ignoreList":[]}
@@ -66,6 +66,8 @@ function BoxControl({
66
66
  splitOnAxis = false,
67
67
  allowReset = true,
68
68
  resetValues = DEFAULT_VALUES,
69
+ presets,
70
+ presetKey,
69
71
  onMouseOver,
70
72
  onMouseOut
71
73
  }) {
@@ -122,7 +124,9 @@ function BoxControl({
122
124
  setSelectedUnits,
123
125
  sides,
124
126
  values: inputValues,
125
- __next40pxDefaultSize
127
+ __next40pxDefaultSize,
128
+ presets,
129
+ presetKey
126
130
  };
127
131
  maybeWarnDeprecated36pxSize({
128
132
  componentName: 'BoxControl',
@@ -1 +1 @@
1
- {"version":3,"names":["useInstanceId","useState","__","BaseControl","InputControl","LinkedButton","Grid","InputWrapper","ResetButton","LinkedButtonWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValueMixed","isValuesDefined","getAllowedSides","useControlledState","maybeWarnDeprecated36pxSize","jsx","_jsx","jsxs","_jsxs","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","onMouseOver","onMouseOut","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","componentName","size","undefined","sidesToRender","columns","templateColumns","role","children","VisualLabel","onClick","map","axis","Array","from","className","variant","disabled","applyValueToSides"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\t__next40pxDefaultSize,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["useInstanceId","useState","__","BaseControl","InputControl","LinkedButton","Grid","InputWrapper","ResetButton","LinkedButtonWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValueMixed","isValuesDefined","getAllowedSides","useControlledState","maybeWarnDeprecated36pxSize","jsx","_jsx","jsxs","_jsxs","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","presets","presetKey","onMouseOver","onMouseOut","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","componentName","size","undefined","sidesToRender","columns","templateColumns","role","children","VisualLabel","onClick","map","axis","Array","from","className","variant","disabled","applyValueToSides"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n * const [ values, setValues ] = useState( {\n * top: '50px',\n * left: '10%',\n * right: '10%',\n * bottom: '50px',\n * } );\n *\n * return (\n * <BoxControl\n * __next40pxDefaultSize\n * values={ values }\n * onChange={ setValues }\n * />\n * );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
@@ -4,15 +4,18 @@
4
4
  */
5
5
  import { useInstanceId } from '@wordpress/compose';
6
6
  import { __ } from '@wordpress/i18n';
7
+ import { useState } from '@wordpress/element';
8
+ import { settings } from '@wordpress/icons';
7
9
 
8
10
  /**
9
11
  * Internal dependencies
10
12
  */
11
13
  import Tooltip from '../tooltip';
12
14
  import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
13
- import { CUSTOM_VALUE_SETTINGS, getAllowedSides, getMergedValue, isValueMixed, isValuesDefined, LABELS } from './utils';
15
+ import { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';
14
16
  import { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';
15
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
17
+ import Button from '../button';
18
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
16
19
  const noop = () => {};
17
20
  function getSidesToModify(side, sides, isAlt) {
18
21
  const allowedSides = getAllowedSides(sides);
@@ -57,6 +60,9 @@ export default function BoxInputControl({
57
60
  setSelectedUnits,
58
61
  sides,
59
62
  side,
63
+ min = 0,
64
+ presets,
65
+ presetKey,
60
66
  ...props
61
67
  }) {
62
68
  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
@@ -69,6 +75,15 @@ export default function BoxInputControl({
69
75
  const handleOnChange = nextValues => {
70
76
  onChange(nextValues);
71
77
  };
78
+ const handleRawOnValueChange = next => {
79
+ const nextValues = {
80
+ ...values
81
+ };
82
+ defaultValuesToModify.forEach(modifiedSide => {
83
+ nextValues[modifiedSide] = next;
84
+ });
85
+ handleOnChange(nextValues);
86
+ };
72
87
  const handleOnValueChange = (next, extra) => {
73
88
  const nextValues = {
74
89
  ...values
@@ -108,45 +123,91 @@ export default function BoxInputControl({
108
123
  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);
109
124
  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
110
125
  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;
126
+ const hasPresets = presets && presets.length > 0 && presetKey;
127
+ const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);
128
+ const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);
129
+ const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;
130
+ const marks = hasPresets ? [{
131
+ value: 0,
132
+ label: '',
133
+ tooltip: __('None')
134
+ }].concat(presets.map((preset, index) => {
135
+ var _preset$name;
136
+ return {
137
+ value: index + 1,
138
+ label: '',
139
+ tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug
140
+ };
141
+ })) : [];
111
142
  return /*#__PURE__*/_jsxs(InputWrapper, {
112
143
  expanded: true,
113
144
  children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {
114
145
  side: side,
115
146
  sides: sides
116
- }), /*#__PURE__*/_jsx(Tooltip, {
117
- placement: "top-end",
118
- text: LABELS[side],
119
- children: /*#__PURE__*/_jsx(StyledUnitControl, {
120
- ...props,
121
- __shouldNotWarnDeprecated36pxSize: true,
147
+ }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {
148
+ children: [/*#__PURE__*/_jsx(Tooltip, {
149
+ placement: "top-end",
150
+ text: LABELS[side],
151
+ children: /*#__PURE__*/_jsx(StyledUnitControl, {
152
+ ...props,
153
+ min: min,
154
+ __shouldNotWarnDeprecated36pxSize: true,
155
+ __next40pxDefaultSize: __next40pxDefaultSize,
156
+ className: "component-box-control__unit-control",
157
+ id: inputId,
158
+ isPressEnterToChange: true,
159
+ disableUnits: isMixed || isMixedUnit,
160
+ value: usedValue,
161
+ onChange: handleOnValueChange,
162
+ onUnitChange: handleOnUnitChange,
163
+ onFocus: handleOnFocus,
164
+ label: LABELS[side],
165
+ placeholder: mixedPlaceholder,
166
+ hideLabelFromVision: true
167
+ })
168
+ }), /*#__PURE__*/_jsx(FlexedRangeControl, {
169
+ __nextHasNoMarginBottom: true,
122
170
  __next40pxDefaultSize: __next40pxDefaultSize,
123
- className: "component-box-control__unit-control",
124
- id: inputId,
125
- isPressEnterToChange: true,
126
- disableUnits: isMixed || isMixedUnit,
127
- value: usedValue,
128
- onChange: handleOnValueChange,
129
- onUnitChange: handleOnUnitChange,
130
- onFocus: handleOnFocus,
171
+ __shouldNotWarnDeprecated36pxSize: true,
172
+ "aria-controls": inputId,
131
173
  label: LABELS[side],
132
- placeholder: mixedPlaceholder,
133
- hideLabelFromVision: true
134
- })
135
- }), /*#__PURE__*/_jsx(FlexedRangeControl, {
136
- __nextHasNoMarginBottom: true,
137
- __next40pxDefaultSize: __next40pxDefaultSize,
138
- __shouldNotWarnDeprecated36pxSize: true,
139
- "aria-controls": inputId,
174
+ hideLabelFromVision: true,
175
+ onChange: newValue => {
176
+ handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
177
+ },
178
+ min: isFinite(min) ? min : 0,
179
+ max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
180
+ step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
181
+ value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
182
+ withInputField: false
183
+ })]
184
+ }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {
185
+ __next40pxDefaultSize: true,
186
+ className: "spacing-sizes-control__range-control",
187
+ value: presetIndex !== undefined ? presetIndex + 1 : 0,
188
+ onChange: newIndex => {
189
+ const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);
190
+ handleRawOnValueChange(newValue);
191
+ },
192
+ withInputField: false,
193
+ "aria-valuenow": presetIndex !== undefined ? presetIndex + 1 : 0,
194
+ "aria-valuetext": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,
195
+ renderTooltipContent: index => marks[!index ? 0 : index].tooltip,
196
+ min: 0,
197
+ max: marks.length - 1,
198
+ marks: marks,
140
199
  label: LABELS[side],
141
200
  hideLabelFromVision: true,
142
- onChange: newValue => {
143
- handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
201
+ __nextHasNoMarginBottom: true
202
+ }), hasPresets && /*#__PURE__*/_jsx(Button, {
203
+ label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
204
+ icon: settings,
205
+ onClick: () => {
206
+ setShowCustomValueControl(!showCustomValueControl);
144
207
  },
145
- min: 0,
146
- max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
147
- step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
148
- value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
149
- withInputField: false
208
+ isPressed: showCustomValueControl,
209
+ size: "small",
210
+ iconSize: 24
150
211
  })]
151
212
  }, `box-control-${side}`);
152
213
  }
@@ -1 +1 @@
1
- {"version":3,"names":["useInstanceId","__","Tooltip","parseQuantityAndUnitFromRawValue","CUSTOM_VALUE_SETTINGS","getAllowedSides","getMergedValue","isValueMixed","isValuesDefined","LABELS","FlexedBoxControlIcon","FlexedRangeControl","InputWrapper","StyledUnitControl","jsx","_jsx","jsxs","_jsxs","noop","getSidesToModify","side","sides","isAlt","allowedSides","modifiedSides","push","filter","s","has","BoxInputControl","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","defaultValuesToModify","handleOnFocus","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","forEach","modifiedSide","handleOnUnitChange","newUnits","mergedValue","hasValues","isMixed","length","parsedQuantity","parsedUnit","computedUnit","generatedId","inputId","join","isMixedUnit","some","usedValue","mixedPlaceholder","expanded","children","placement","text","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","disableUnits","value","onUnitChange","label","placeholder","hideLabelFromVision","__nextHasNoMarginBottom","newValue","min","max","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tCUSTOM_VALUE_SETTINGS,\n\tgetAllowedSides,\n\tgetMergedValue,\n\tisValueMixed,\n\tisValuesDefined,\n\tLABELS,\n} from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\n\nconst noop = () => {};\n\nfunction getSidesToModify(\n\tside: BoxControlInputControlProps[ 'side' ],\n\tsides: BoxControlInputControlProps[ 'sides' ],\n\tisAlt?: boolean\n) {\n\tconst allowedSides = getAllowedSides( sides );\n\n\tlet modifiedSides: ( keyof BoxControlValue )[] = [];\n\tswitch ( side ) {\n\t\tcase 'all':\n\t\t\tmodifiedSides = [ 'top', 'bottom', 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'horizontal':\n\t\t\tmodifiedSides = [ 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'vertical':\n\t\t\tmodifiedSides = [ 'top', 'bottom' ];\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tmodifiedSides = [ side ];\n\t}\n\n\tif ( isAlt ) {\n\t\tswitch ( side ) {\n\t\t\tcase 'top':\n\t\t\t\tmodifiedSides.push( 'bottom' );\n\t\t\t\tbreak;\n\t\t\tcase 'bottom':\n\t\t\t\tmodifiedSides.push( 'top' );\n\t\t\t\tbreak;\n\t\t\tcase 'left':\n\t\t\t\tmodifiedSides.push( 'left' );\n\t\t\t\tbreak;\n\t\t\tcase 'right':\n\t\t\t\tmodifiedSides.push( 'right' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn modifiedSides.filter( ( s ) => allowedSides.has( s ) );\n}\n\nexport default function BoxInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\tside,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst defaultValuesToModify = getSidesToModify( side, sides );\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tnext?: string,\n\t\textra?: { event: React.SyntheticEvent< Element, Event > }\n\t) => {\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst modifiedSides = getSidesToModify(\n\t\t\tside,\n\t\t\tsides,\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t\t// it also works with drag events?\n\t\t\t!! extra?.event.altKey\n\t\t);\n\n\t\tmodifiedSides.forEach( ( modifiedSide ) => {\n\t\t\tnextValues[ modifiedSide ] = nextValue;\n\t\t} );\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst handleOnUnitChange = ( next?: string ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tdefaultValuesToModify.forEach( ( modifiedSide ) => {\n\t\t\tnewUnits[ modifiedSide ] = next;\n\t\t} );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst mergedValue = getMergedValue( values, defaultValuesToModify );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed =\n\t\thasValues &&\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tisValueMixed( values, defaultValuesToModify );\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( mergedValue );\n\tconst computedUnit = hasValues\n\t\t? parsedUnit\n\t\t: selectedUnits[ defaultValuesToModify[ 0 ] ];\n\tconst generatedId = useInstanceId( BoxInputControl, 'box-control-input' );\n\tconst inputId = [ generatedId, side ].join( '-' );\n\tconst isMixedUnit =\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tmergedValue === undefined &&\n\t\tdefaultValuesToModify.some(\n\t\t\t( s ) => selectedUnits[ s ] !== computedUnit\n\t\t);\n\tconst usedValue =\n\t\tmergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n\tconst mixedPlaceholder = isMixed || isMixedUnit ? __( 'Mixed' ) : undefined;\n\n\treturn (\n\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t<StyledUnitControl\n\t\t\t\t\t{ ...props }\n\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\tid={ inputId }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tdisableUnits={ isMixed || isMixedUnit }\n\t\t\t\t\tvalue={ usedValue }\n\t\t\t\t\tonChange={ handleOnValueChange }\n\t\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\tplaceholder={ mixedPlaceholder }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\n\t\t\t<FlexedRangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\taria-controls={ inputId }\n\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.step ?? 0.1\n\t\t\t\t}\n\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</InputWrapper>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["useInstanceId","__","useState","settings","Tooltip","parseQuantityAndUnitFromRawValue","CUSTOM_VALUE_SETTINGS","getMergedValue","getAllowedSides","getPresetIndexFromValue","getPresetValueFromIndex","isValuePreset","isValuesDefined","isValueMixed","LABELS","FlexedBoxControlIcon","FlexedRangeControl","InputWrapper","StyledUnitControl","Button","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","noop","getSidesToModify","side","sides","isAlt","allowedSides","modifiedSides","push","filter","s","has","BoxInputControl","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","min","presets","presetKey","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","defaultValuesToModify","handleOnFocus","event","handleOnChange","nextValues","handleRawOnValueChange","next","forEach","modifiedSide","handleOnValueChange","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","handleOnUnitChange","newUnits","mergedValue","hasValues","isMixed","length","parsedQuantity","parsedUnit","computedUnit","generatedId","inputId","join","isMixedUnit","some","usedValue","mixedPlaceholder","hasPresets","hasPresetValue","showCustomValueControl","setShowCustomValueControl","presetIndex","marks","value","label","tooltip","concat","map","preset","index","_preset$name","name","slug","expanded","children","placement","text","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","disableUnits","onUnitChange","placeholder","hideLabelFromVision","__nextHasNoMarginBottom","newValue","isFinite","max","step","withInputField","newIndex","renderTooltipContent","icon","onClick","isPressed","size","iconSize"],"sources":["@wordpress/components/src/box-control/input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tCUSTOM_VALUE_SETTINGS,\n\tgetMergedValue,\n\tgetAllowedSides,\n\tgetPresetIndexFromValue,\n\tgetPresetValueFromIndex,\n\tisValuePreset,\n\tisValuesDefined,\n\tisValueMixed,\n\tLABELS,\n} from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\nimport Button from '../button';\n\nconst noop = () => {};\n\nfunction getSidesToModify(\n\tside: BoxControlInputControlProps[ 'side' ],\n\tsides: BoxControlInputControlProps[ 'sides' ],\n\tisAlt?: boolean\n) {\n\tconst allowedSides = getAllowedSides( sides );\n\n\tlet modifiedSides: ( keyof BoxControlValue )[] = [];\n\tswitch ( side ) {\n\t\tcase 'all':\n\t\t\tmodifiedSides = [ 'top', 'bottom', 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'horizontal':\n\t\t\tmodifiedSides = [ 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'vertical':\n\t\t\tmodifiedSides = [ 'top', 'bottom' ];\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tmodifiedSides = [ side ];\n\t}\n\n\tif ( isAlt ) {\n\t\tswitch ( side ) {\n\t\t\tcase 'top':\n\t\t\t\tmodifiedSides.push( 'bottom' );\n\t\t\t\tbreak;\n\t\t\tcase 'bottom':\n\t\t\t\tmodifiedSides.push( 'top' );\n\t\t\t\tbreak;\n\t\t\tcase 'left':\n\t\t\t\tmodifiedSides.push( 'left' );\n\t\t\t\tbreak;\n\t\t\tcase 'right':\n\t\t\t\tmodifiedSides.push( 'right' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn modifiedSides.filter( ( s ) => allowedSides.has( s ) );\n}\n\nexport default function BoxInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\tside,\n\tmin = 0,\n\tpresets,\n\tpresetKey,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst defaultValuesToModify = getSidesToModify( side, sides );\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleRawOnValueChange = ( next?: string ) => {\n\t\tconst nextValues = { ...values };\n\t\tdefaultValuesToModify.forEach( ( modifiedSide ) => {\n\t\t\tnextValues[ modifiedSide ] = next;\n\t\t} );\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tnext?: string,\n\t\textra?: { event: React.SyntheticEvent< Element, Event > }\n\t) => {\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst modifiedSides = getSidesToModify(\n\t\t\tside,\n\t\t\tsides,\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t\t// it also works with drag events?\n\t\t\t!! extra?.event.altKey\n\t\t);\n\n\t\tmodifiedSides.forEach( ( modifiedSide ) => {\n\t\t\tnextValues[ modifiedSide ] = nextValue;\n\t\t} );\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst handleOnUnitChange = ( next?: string ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tdefaultValuesToModify.forEach( ( modifiedSide ) => {\n\t\t\tnewUnits[ modifiedSide ] = next;\n\t\t} );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst mergedValue = getMergedValue( values, defaultValuesToModify );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed =\n\t\thasValues &&\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tisValueMixed( values, defaultValuesToModify );\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( mergedValue );\n\tconst computedUnit = hasValues\n\t\t? parsedUnit\n\t\t: selectedUnits[ defaultValuesToModify[ 0 ] ];\n\tconst generatedId = useInstanceId( BoxInputControl, 'box-control-input' );\n\tconst inputId = [ generatedId, side ].join( '-' );\n\tconst isMixedUnit =\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tmergedValue === undefined &&\n\t\tdefaultValuesToModify.some(\n\t\t\t( s ) => selectedUnits[ s ] !== computedUnit\n\t\t);\n\tconst usedValue =\n\t\tmergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n\tconst mixedPlaceholder = isMixed || isMixedUnit ? __( 'Mixed' ) : undefined;\n\tconst hasPresets = presets && presets.length > 0 && presetKey;\n\tconst hasPresetValue =\n\t\thasPresets &&\n\t\tmergedValue !== undefined &&\n\t\t! isMixed &&\n\t\tisValuePreset( mergedValue, presetKey );\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! hasPresets ||\n\t\t\t( ! hasPresetValue && ! isMixed && mergedValue !== undefined )\n\t);\n\tconst presetIndex = hasPresetValue\n\t\t? getPresetIndexFromValue( mergedValue, presetKey, presets )\n\t\t: undefined;\n\tconst marks = hasPresets\n\t\t? [ { value: 0, label: '', tooltip: __( 'None' ) } ].concat(\n\t\t\t\tpresets.map( ( preset, index ) => ( {\n\t\t\t\t\tvalue: index + 1,\n\t\t\t\t\tlabel: '',\n\t\t\t\t\ttooltip: preset.name ?? preset.slug,\n\t\t\t\t} ) )\n\t\t )\n\t\t: [];\n\n\treturn (\n\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t{ showCustomValueControl && (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\tdisableUnits={ isMixed || isMixedUnit }\n\t\t\t\t\t\t\tvalue={ usedValue }\n\t\t\t\t\t\t\tonChange={ handleOnValueChange }\n\t\t\t\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tplaceholder={ mixedPlaceholder }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmin={ isFinite( min ) ? min : 0 }\n\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ hasPresets && ! showCustomValueControl && (\n\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"spacing-sizes-control__range-control\"\n\t\t\t\t\tvalue={ presetIndex !== undefined ? presetIndex + 1 : 0 }\n\t\t\t\t\tonChange={ ( newIndex ) => {\n\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\tnewIndex === 0 || newIndex === undefined\n\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t: getPresetValueFromIndex(\n\t\t\t\t\t\t\t\t\t\tnewIndex - 1,\n\t\t\t\t\t\t\t\t\t\tpresetKey,\n\t\t\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t\t );\n\t\t\t\t\t\thandleRawOnValueChange( newValue );\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={\n\t\t\t\t\t\tpresetIndex !== undefined ? presetIndex + 1 : 0\n\t\t\t\t\t}\n\t\t\t\t\taria-valuetext={\n\t\t\t\t\t\tmarks[ presetIndex !== undefined ? presetIndex + 1 : 0 ]\n\t\t\t\t\t\t\t.tooltip\n\t\t\t\t\t}\n\t\t\t\t\trenderTooltipContent={ ( index ) =>\n\t\t\t\t\t\tmarks[ ! index ? 0 : index ].tooltip\n\t\t\t\t\t}\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ marks.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ hasPresets && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</InputWrapper>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAClD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,kBAAkB;;AAE3C;AACA;AACA;AACA,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,gCAAgC,QAAQ,uBAAuB;AACxE,SACCC,qBAAqB,EACrBC,cAAc,EACdC,eAAe,EACfC,uBAAuB,EACvBC,uBAAuB,EACvBC,aAAa,EACbC,eAAe,EACfC,YAAY,EACZC,MAAM,QACA,SAAS;AAChB,SACCC,oBAAoB,EACpBC,kBAAkB,EAClBC,YAAY,EACZC,iBAAiB,QACX,6BAA6B;AAEpC,OAAOC,MAAM,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,gBAAgBA,CACxBC,IAA2C,EAC3CC,KAA6C,EAC7CC,KAAe,EACd;EACD,MAAMC,YAAY,GAAGvB,eAAe,CAAEqB,KAAM,CAAC;EAE7C,IAAIG,aAA0C,GAAG,EAAE;EACnD,QAASJ,IAAI;IACZ,KAAK,KAAK;MACTI,aAAa,GAAG,CAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAE;MACpD;IACD,KAAK,YAAY;MAChBA,aAAa,GAAG,CAAE,MAAM,EAAE,OAAO,CAAE;MACnC;IACD,KAAK,UAAU;MACdA,aAAa,GAAG,CAAE,KAAK,EAAE,QAAQ,CAAE;MACnC;IACD;MACCA,aAAa,GAAG,CAAEJ,IAAI,CAAE;EAC1B;EAEA,IAAKE,KAAK,EAAG;IACZ,QAASF,IAAI;MACZ,KAAK,KAAK;QACTI,aAAa,CAACC,IAAI,CAAE,QAAS,CAAC;QAC9B;MACD,KAAK,QAAQ;QACZD,aAAa,CAACC,IAAI,CAAE,KAAM,CAAC;QAC3B;MACD,KAAK,MAAM;QACVD,aAAa,CAACC,IAAI,CAAE,MAAO,CAAC;QAC5B;MACD,KAAK,OAAO;QACXD,aAAa,CAACC,IAAI,CAAE,OAAQ,CAAC;QAC7B;IACF;EACD;EAEA,OAAOD,aAAa,CAACE,MAAM,CAAIC,CAAC,IAAMJ,YAAY,CAACK,GAAG,CAAED,CAAE,CAAE,CAAC;AAC9D;AAEA,eAAe,SAASE,eAAeA,CAAE;EACxCC,qBAAqB;EACrBC,QAAQ,GAAGb,IAAI;EACfc,OAAO,GAAGd,IAAI;EACde,MAAM;EACNC,aAAa;EACbC,gBAAgB;EAChBd,KAAK;EACLD,IAAI;EACJgB,GAAG,GAAG,CAAC;EACPC,OAAO;EACPC,SAAS;EACT,GAAGC;AACyB,CAAC,EAAG;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EAChC,MAAMC,qBAAqB,GAAGvB,gBAAgB,CAAEC,IAAI,EAAEC,KAAM,CAAC;EAE7D,MAAMsB,aAAa,GAAKC,KAA2C,IAAM;IACxEZ,OAAO,CAAEY,KAAK,EAAE;MAAExB;IAAK,CAAE,CAAC;EAC3B,CAAC;EAED,MAAMyB,cAAc,GAAKC,UAA2B,IAAM;IACzDf,QAAQ,CAAEe,UAAW,CAAC;EACvB,CAAC;EAED,MAAMC,sBAAsB,GAAKC,IAAa,IAAM;IACnD,MAAMF,UAAU,GAAG;MAAE,GAAGb;IAAO,CAAC;IAChCS,qBAAqB,CAACO,OAAO,CAAIC,YAAY,IAAM;MAClDJ,UAAU,CAAEI,YAAY,CAAE,GAAGF,IAAI;IAClC,CAAE,CAAC;IAEHH,cAAc,CAAEC,UAAW,CAAC;EAC7B,CAAC;EAED,MAAMK,mBAAmB,GAAGA,CAC3BH,IAAa,EACbI,KAAyD,KACrD;IACJ,MAAMN,UAAU,GAAG;MAAE,GAAGb;IAAO,CAAC;IAChC,MAAMoB,SAAS,GAAGL,IAAI,KAAKM,SAAS,IAAI,CAAEC,KAAK,CAAEC,UAAU,CAAER,IAAK,CAAE,CAAC;IACrE,MAAMS,SAAS,GAAGJ,SAAS,GAAGL,IAAI,GAAGM,SAAS;IAC9C,MAAM9B,aAAa,GAAGL,gBAAgB,CACrCC,IAAI,EACJC,KAAK;IACL;AACH;AACA;AACA;IACG;IACA;IACA;IACA,CAAC,CAAE+B,KAAK,EAAER,KAAK,CAACc,MACjB,CAAC;IAEDlC,aAAa,CAACyB,OAAO,CAAIC,YAAY,IAAM;MAC1CJ,UAAU,CAAEI,YAAY,CAAE,GAAGO,SAAS;IACvC,CAAE,CAAC;IAEHZ,cAAc,CAAEC,UAAW,CAAC;EAC7B,CAAC;EAED,MAAMa,kBAAkB,GAAKX,IAAa,IAAM;IAC/C,MAAMY,QAAQ,GAAG;MAAE,GAAG1B;IAAc,CAAC;IACrCQ,qBAAqB,CAACO,OAAO,CAAIC,YAAY,IAAM;MAClDU,QAAQ,CAAEV,YAAY,CAAE,GAAGF,IAAI;IAChC,CAAE,CAAC;IACHb,gBAAgB,CAAEyB,QAAS,CAAC;EAC7B,CAAC;EAED,MAAMC,WAAW,GAAG9D,cAAc,CAAEkC,MAAM,EAAES,qBAAsB,CAAC;EACnE,MAAMoB,SAAS,GAAG1D,eAAe,CAAE6B,MAAO,CAAC;EAC3C,MAAM8B,OAAO,GACZD,SAAS,IACTpB,qBAAqB,CAACsB,MAAM,GAAG,CAAC,IAChC3D,YAAY,CAAE4B,MAAM,EAAES,qBAAsB,CAAC;EAC9C,MAAM,CAAEuB,cAAc,EAAEC,UAAU,CAAE,GACnCrE,gCAAgC,CAAEgE,WAAY,CAAC;EAChD,MAAMM,YAAY,GAAGL,SAAS,GAC3BI,UAAU,GACVhC,aAAa,CAAEQ,qBAAqB,CAAE,CAAC,CAAE,CAAE;EAC9C,MAAM0B,WAAW,GAAG5E,aAAa,CAAEqC,eAAe,EAAE,mBAAoB,CAAC;EACzE,MAAMwC,OAAO,GAAG,CAAED,WAAW,EAAEhD,IAAI,CAAE,CAACkD,IAAI,CAAE,GAAI,CAAC;EACjD,MAAMC,WAAW,GAChB7B,qBAAqB,CAACsB,MAAM,GAAG,CAAC,IAChCH,WAAW,KAAKP,SAAS,IACzBZ,qBAAqB,CAAC8B,IAAI,CACvB7C,CAAC,IAAMO,aAAa,CAAEP,CAAC,CAAE,KAAKwC,YACjC,CAAC;EACF,MAAMM,SAAS,GACdZ,WAAW,KAAKP,SAAS,IAAIa,YAAY,GAAGA,YAAY,GAAGN,WAAW;EACvE,MAAMa,gBAAgB,GAAGX,OAAO,IAAIQ,WAAW,GAAG9E,EAAE,CAAE,OAAQ,CAAC,GAAG6D,SAAS;EAC3E,MAAMqB,UAAU,GAAGtC,OAAO,IAAIA,OAAO,CAAC2B,MAAM,GAAG,CAAC,IAAI1B,SAAS;EAC7D,MAAMsC,cAAc,GACnBD,UAAU,IACVd,WAAW,KAAKP,SAAS,IACzB,CAAES,OAAO,IACT5D,aAAa,CAAE0D,WAAW,EAAEvB,SAAU,CAAC;EACxC,MAAM,CAAEuC,sBAAsB,EAAEC,yBAAyB,CAAE,GAAGpF,QAAQ,CACrE,CAAEiF,UAAU,IACT,CAAEC,cAAc,IAAI,CAAEb,OAAO,IAAIF,WAAW,KAAKP,SACrD,CAAC;EACD,MAAMyB,WAAW,GAAGH,cAAc,GAC/B3E,uBAAuB,CAAE4D,WAAW,EAAEvB,SAAS,EAAED,OAAQ,CAAC,GAC1DiB,SAAS;EACZ,MAAM0B,KAAK,GAAGL,UAAU,GACrB,CAAE;IAAEM,KAAK,EAAE,CAAC;IAAEC,KAAK,EAAE,EAAE;IAAEC,OAAO,EAAE1F,EAAE,CAAE,MAAO;EAAE,CAAC,CAAE,CAAC2F,MAAM,CACzD/C,OAAO,CAACgD,GAAG,CAAE,CAAEC,MAAM,EAAEC,KAAK;IAAA,IAAAC,YAAA;IAAA,OAAQ;MACnCP,KAAK,EAAEM,KAAK,GAAG,CAAC;MAChBL,KAAK,EAAE,EAAE;MACTC,OAAO,GAAAK,YAAA,GAAEF,MAAM,CAACG,IAAI,cAAAD,YAAA,cAAAA,YAAA,GAAIF,MAAM,CAACI;IAChC,CAAC;EAAA,CAAG,CACJ,CAAC,GACD,EAAE;EAEL,oBACCzE,KAAA,CAACR,YAAY;IAAiCkF,QAAQ;IAAAC,QAAA,gBACrD/E,IAAA,CAACN,oBAAoB;MAACa,IAAI,EAAGA,IAAM;MAACC,KAAK,EAAGA;IAAO,CAAE,CAAC,EACpDwD,sBAAsB,iBACvB5D,KAAA,CAAAF,SAAA;MAAA6E,QAAA,gBACC/E,IAAA,CAACjB,OAAO;QAACiG,SAAS,EAAC,SAAS;QAACC,IAAI,EAAGxF,MAAM,CAAEc,IAAI,CAAI;QAAAwE,QAAA,eACnD/E,IAAA,CAACH,iBAAiB;UAAA,GACZ6B,KAAK;UACVH,GAAG,EAAGA,GAAK;UACX2D,iCAAiC;UACjCjE,qBAAqB,EAAGA,qBAAuB;UAC/CkE,SAAS,EAAC,qCAAqC;UAC/CC,EAAE,EAAG5B,OAAS;UACd6B,oBAAoB;UACpBC,YAAY,EAAGpC,OAAO,IAAIQ,WAAa;UACvCU,KAAK,EAAGR,SAAW;UACnB1C,QAAQ,EAAGoB,mBAAqB;UAChCiD,YAAY,EAAGzC,kBAAoB;UACnC3B,OAAO,EAAGW,aAAe;UACzBuC,KAAK,EAAG5E,MAAM,CAAEc,IAAI,CAAI;UACxBiF,WAAW,EAAG3B,gBAAkB;UAChC4B,mBAAmB;QAAA,CACnB;MAAC,CACM,CAAC,eAEVzF,IAAA,CAACL,kBAAkB;QAClB+F,uBAAuB;QACvBzE,qBAAqB,EAAGA,qBAAuB;QAC/CiE,iCAAiC;QACjC,iBAAgB1B,OAAS;QACzBa,KAAK,EAAG5E,MAAM,CAAEc,IAAI,CAAI;QACxBkF,mBAAmB;QACnBvE,QAAQ,EAAKyE,QAAQ,IAAM;UAC1BrD,mBAAmB,CAClBqD,QAAQ,KAAKlD,SAAS,GACnB,CAAEkD,QAAQ,EAAErC,YAAY,CAAE,CAACG,IAAI,CAAE,EAAG,CAAC,GACrChB,SACJ,CAAC;QACF,CAAG;QACHlB,GAAG,EAAGqE,QAAQ,CAAErE,GAAI,CAAC,GAAGA,GAAG,GAAG,CAAG;QACjCsE,GAAG,GAAAlE,qBAAA,GACF1C,qBAAqB,CAAEqE,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,IAAI,CAAE,EAC1CuC,GAAG,cAAAlE,qBAAA,cAAAA,qBAAA,GAAI,EACV;QACDmE,IAAI,GAAAlE,sBAAA,GACH3C,qBAAqB,CAAEqE,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,IAAI,CAAE,EAC1CwC,IAAI,cAAAlE,sBAAA,cAAAA,sBAAA,GAAI,GACX;QACDwC,KAAK,EAAGhB,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAG;QAC7B2C,cAAc,EAAG;MAAO,CACxB,CAAC;IAAA,CACD,CACF,EAECjC,UAAU,IAAI,CAAEE,sBAAsB,iBACvChE,IAAA,CAACL,kBAAkB;MAClBsB,qBAAqB;MACrBkE,SAAS,EAAC,sCAAsC;MAChDf,KAAK,EAAGF,WAAW,KAAKzB,SAAS,GAAGyB,WAAW,GAAG,CAAC,GAAG,CAAG;MACzDhD,QAAQ,EAAK8E,QAAQ,IAAM;QAC1B,MAAML,QAAQ,GACbK,QAAQ,KAAK,CAAC,IAAIA,QAAQ,KAAKvD,SAAS,GACrCA,SAAS,GACTpD,uBAAuB,CACvB2G,QAAQ,GAAG,CAAC,EACZvE,SAAS,EACTD,OACA,CAAC;QACLU,sBAAsB,CAAEyD,QAAS,CAAC;MACnC,CAAG;MACHI,cAAc,EAAG,KAAO;MACxB,iBACC7B,WAAW,KAAKzB,SAAS,GAAGyB,WAAW,GAAG,CAAC,GAAG,CAC9C;MACD,kBACCC,KAAK,CAAED,WAAW,KAAKzB,SAAS,GAAGyB,WAAW,GAAG,CAAC,GAAG,CAAC,CAAE,CACtDI,OACF;MACD2B,oBAAoB,EAAKvB,KAAK,IAC7BP,KAAK,CAAE,CAAEO,KAAK,GAAG,CAAC,GAAGA,KAAK,CAAE,CAACJ,OAC7B;MACD/C,GAAG,EAAG,CAAG;MACTsE,GAAG,EAAG1B,KAAK,CAAChB,MAAM,GAAG,CAAG;MACxBgB,KAAK,EAAGA,KAAO;MACfE,KAAK,EAAG5E,MAAM,CAAEc,IAAI,CAAI;MACxBkF,mBAAmB;MACnBC,uBAAuB;IAAA,CACvB,CACD,EAEC5B,UAAU,iBACX9D,IAAA,CAACF,MAAM;MACNuE,KAAK,EACJL,sBAAsB,GACnBpF,EAAE,CAAE,iBAAkB,CAAC,GACvBA,EAAE,CAAE,iBAAkB,CACzB;MACDsH,IAAI,EAAGpH,QAAU;MACjBqH,OAAO,EAAGA,CAAA,KAAM;QACflC,yBAAyB,CAAE,CAAED,sBAAuB,CAAC;MACtD,CAAG;MACHoC,SAAS,EAAGpC,sBAAwB;MACpCqC,IAAI,EAAC,OAAO;MACZC,QAAQ,EAAG;IAAI,CACf,CACD;EAAA,GAxGkB,eAAgB/F,IAAI,EAyG1B,CAAC;AAEjB","ignoreList":[]}