@wordpress/components 23.0.0 → 23.2.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 (457) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/CONTRIBUTING.md +0 -21
  3. package/LICENSE.md +1 -1
  4. package/build/autocomplete/index.js +1 -3
  5. package/build/autocomplete/index.js.map +1 -1
  6. package/build/border-box-control/border-box-control/component.js +0 -3
  7. package/build/border-box-control/border-box-control/component.js.map +1 -1
  8. package/build/border-box-control/border-box-control/hook.js +0 -2
  9. package/build/border-box-control/border-box-control/hook.js.map +1 -1
  10. package/build/border-box-control/border-box-control-split-controls/component.js +0 -2
  11. package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  12. package/build/border-box-control/border-box-control-split-controls/hook.js +0 -2
  13. package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  14. package/build/border-control/border-control/component.js +0 -2
  15. package/build/border-control/border-control/component.js.map +1 -1
  16. package/build/border-control/border-control/hook.js +0 -2
  17. package/build/border-control/border-control/hook.js.map +1 -1
  18. package/build/border-control/border-control-dropdown/component.js +6 -11
  19. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  20. package/build/border-control/border-control-dropdown/hook.js +0 -2
  21. package/build/border-control/border-control-dropdown/hook.js.map +1 -1
  22. package/build/color-palette/index.js +5 -8
  23. package/build/color-palette/index.js.map +1 -1
  24. package/build/color-picker/component.js +1 -0
  25. package/build/color-picker/component.js.map +1 -1
  26. package/build/color-picker/styles.js +8 -10
  27. package/build/color-picker/styles.js.map +1 -1
  28. package/build/combobox-control/index.js +5 -1
  29. package/build/combobox-control/index.js.map +1 -1
  30. package/build/dimension-control/index.js.map +1 -1
  31. package/build/dropdown/index.js +45 -10
  32. package/build/dropdown/index.js.map +1 -1
  33. package/build/focal-point-picker/utils.js +1 -1
  34. package/build/focal-point-picker/utils.js.map +1 -1
  35. package/build/gradient-picker/index.js +1 -2
  36. package/build/gradient-picker/index.js.map +1 -1
  37. package/build/higher-order/navigate-regions/index.js +4 -3
  38. package/build/higher-order/navigate-regions/index.js.map +1 -1
  39. package/build/index.js +7 -25
  40. package/build/index.js.map +1 -1
  41. package/build/index.native.js +8 -18
  42. package/build/index.native.js.map +1 -1
  43. package/build/item-group/item/component.js +27 -3
  44. package/build/item-group/item/component.js.map +1 -1
  45. package/build/item-group/item-group/component.js +26 -3
  46. package/build/item-group/item-group/component.js.map +1 -1
  47. package/build/item-group/styles.js +14 -14
  48. package/build/item-group/styles.js.map +1 -1
  49. package/build/mobile/bottom-sheet/picker-cell.native.js +1 -9
  50. package/build/mobile/bottom-sheet/picker-cell.native.js.map +1 -1
  51. package/build/mobile/global-styles-context/utils.native.js +30 -12
  52. package/build/mobile/global-styles-context/utils.native.js.map +1 -1
  53. package/build/panel/row.js +5 -3
  54. package/build/panel/row.js.map +1 -1
  55. package/build/query-controls/index.js +1 -0
  56. package/build/query-controls/index.js.map +1 -1
  57. package/build/resizable-box/index.js +5 -4
  58. package/build/resizable-box/index.js.map +1 -1
  59. package/build/responsive-wrapper/index.js +18 -1
  60. package/build/responsive-wrapper/index.js.map +1 -1
  61. package/build/responsive-wrapper/types.js +6 -0
  62. package/build/responsive-wrapper/types.js.map +1 -0
  63. package/build/sandbox/index.js +35 -24
  64. package/build/sandbox/index.js.map +1 -1
  65. package/build/sandbox/types.js +6 -0
  66. package/build/sandbox/types.js.map +1 -0
  67. package/build/tab-panel/index.js +15 -9
  68. package/build/tab-panel/index.js.map +1 -1
  69. package/build/toolbar/index.js +42 -60
  70. package/build/toolbar/index.js.map +1 -1
  71. package/build/toolbar/toolbar/index.js +74 -0
  72. package/build/toolbar/toolbar/index.js.map +1 -0
  73. package/build/toolbar/{toolbar-container.js → toolbar/toolbar-container.js} +0 -0
  74. package/build/toolbar/toolbar/toolbar-container.js.map +1 -0
  75. package/build/toolbar/{toolbar-container.native.js → toolbar/toolbar-container.native.js} +0 -0
  76. package/build/toolbar/toolbar/toolbar-container.native.js.map +1 -0
  77. package/build/{toolbar-button → toolbar/toolbar-button}/index.js +1 -1
  78. package/build/toolbar/toolbar-button/index.js.map +1 -0
  79. package/build/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.js +0 -0
  80. package/build/toolbar/toolbar-button/toolbar-button-container.js.map +1 -0
  81. package/build/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.native.js +0 -0
  82. package/build/toolbar/toolbar-button/toolbar-button-container.native.js.map +1 -0
  83. package/build/{toolbar-context → toolbar/toolbar-context}/index.js +0 -0
  84. package/build/toolbar/toolbar-context/index.js.map +1 -0
  85. package/build/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js +1 -1
  86. package/build/toolbar/toolbar-dropdown-menu/index.js.map +1 -0
  87. package/build/{toolbar-group → toolbar/toolbar-group}/index.js +0 -0
  88. package/build/toolbar/toolbar-group/index.js.map +1 -0
  89. package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js +1 -1
  90. package/build/toolbar/toolbar-group/toolbar-group-collapsed.js.map +1 -0
  91. package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js +1 -1
  92. package/build/toolbar/toolbar-group/toolbar-group-collapsed.native.js.map +1 -0
  93. package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.js +0 -0
  94. package/build/toolbar/toolbar-group/toolbar-group-container.js.map +1 -0
  95. package/build/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.native.js +0 -0
  96. package/build/toolbar/toolbar-group/toolbar-group-container.native.js.map +1 -0
  97. package/build/{toolbar-item → toolbar/toolbar-item}/index.js +0 -0
  98. package/build/toolbar/toolbar-item/index.js.map +1 -0
  99. package/build/{toolbar-item → toolbar/toolbar-item}/index.native.js +0 -0
  100. package/build/toolbar/toolbar-item/index.native.js.map +1 -0
  101. package/build/tree-grid/index.js +3 -3
  102. package/build/tree-grid/index.js.map +1 -1
  103. package/build-module/autocomplete/index.js +1 -2
  104. package/build-module/autocomplete/index.js.map +1 -1
  105. package/build-module/border-box-control/border-box-control/component.js +0 -3
  106. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  107. package/build-module/border-box-control/border-box-control/hook.js +0 -2
  108. package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
  109. package/build-module/border-box-control/border-box-control-split-controls/component.js +0 -2
  110. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  111. package/build-module/border-box-control/border-box-control-split-controls/hook.js +0 -2
  112. package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  113. package/build-module/border-control/border-control/component.js +0 -2
  114. package/build-module/border-control/border-control/component.js.map +1 -1
  115. package/build-module/border-control/border-control/hook.js +0 -2
  116. package/build-module/border-control/border-control/hook.js.map +1 -1
  117. package/build-module/border-control/border-control-dropdown/component.js +6 -11
  118. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  119. package/build-module/border-control/border-control-dropdown/hook.js +0 -2
  120. package/build-module/border-control/border-control-dropdown/hook.js.map +1 -1
  121. package/build-module/color-palette/index.js +5 -8
  122. package/build-module/color-palette/index.js.map +1 -1
  123. package/build-module/color-picker/component.js +1 -0
  124. package/build-module/color-picker/component.js.map +1 -1
  125. package/build-module/color-picker/styles.js +8 -9
  126. package/build-module/color-picker/styles.js.map +1 -1
  127. package/build-module/combobox-control/index.js +5 -1
  128. package/build-module/combobox-control/index.js.map +1 -1
  129. package/build-module/dimension-control/index.js +1 -2
  130. package/build-module/dimension-control/index.js.map +1 -1
  131. package/build-module/dropdown/index.js +44 -10
  132. package/build-module/dropdown/index.js.map +1 -1
  133. package/build-module/focal-point-picker/utils.js +1 -1
  134. package/build-module/focal-point-picker/utils.js.map +1 -1
  135. package/build-module/gradient-picker/index.js +1 -2
  136. package/build-module/gradient-picker/index.js.map +1 -1
  137. package/build-module/higher-order/navigate-regions/index.js +4 -3
  138. package/build-module/higher-order/navigate-regions/index.js.map +1 -1
  139. package/build-module/index.js +1 -7
  140. package/build-module/index.js.map +1 -1
  141. package/build-module/index.native.js +1 -6
  142. package/build-module/index.native.js.map +1 -1
  143. package/build-module/item-group/item/component.js +26 -2
  144. package/build-module/item-group/item/component.js.map +1 -1
  145. package/build-module/item-group/item-group/component.js +25 -2
  146. package/build-module/item-group/item-group/component.js.map +1 -1
  147. package/build-module/item-group/styles.js +14 -14
  148. package/build-module/item-group/styles.js.map +1 -1
  149. package/build-module/mobile/bottom-sheet/picker-cell.native.js +1 -8
  150. package/build-module/mobile/bottom-sheet/picker-cell.native.js.map +1 -1
  151. package/build-module/mobile/global-styles-context/utils.native.js +31 -13
  152. package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
  153. package/build-module/panel/row.js +5 -3
  154. package/build-module/panel/row.js.map +1 -1
  155. package/build-module/query-controls/index.js +1 -0
  156. package/build-module/query-controls/index.js.map +1 -1
  157. package/build-module/resizable-box/index.js +3 -2
  158. package/build-module/resizable-box/index.js.map +1 -1
  159. package/build-module/responsive-wrapper/index.js +20 -1
  160. package/build-module/responsive-wrapper/index.js.map +1 -1
  161. package/build-module/responsive-wrapper/types.js +2 -0
  162. package/build-module/responsive-wrapper/types.js.map +1 -0
  163. package/build-module/sandbox/index.js +37 -23
  164. package/build-module/sandbox/index.js.map +1 -1
  165. package/build-module/sandbox/types.js +2 -0
  166. package/build-module/sandbox/types.js.map +1 -0
  167. package/build-module/tab-panel/index.js +15 -8
  168. package/build-module/tab-panel/index.js.map +1 -1
  169. package/build-module/toolbar/index.js +6 -58
  170. package/build-module/toolbar/index.js.map +1 -1
  171. package/build-module/toolbar/toolbar/index.js +59 -0
  172. package/build-module/toolbar/toolbar/index.js.map +1 -0
  173. package/build-module/toolbar/{toolbar-container.js → toolbar/toolbar-container.js} +0 -0
  174. package/{build → build-module/toolbar}/toolbar/toolbar-container.js.map +1 -1
  175. package/build-module/toolbar/{toolbar-container.native.js → toolbar/toolbar-container.native.js} +0 -0
  176. package/build-module/toolbar/toolbar/toolbar-container.native.js.map +1 -0
  177. package/build-module/{toolbar-button → toolbar/toolbar-button}/index.js +1 -1
  178. package/build-module/toolbar/toolbar-button/index.js.map +1 -0
  179. package/build-module/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.js +0 -0
  180. package/build-module/toolbar/toolbar-button/toolbar-button-container.js.map +1 -0
  181. package/build-module/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.native.js +0 -0
  182. package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js.map +1 -0
  183. package/build-module/{toolbar-context → toolbar/toolbar-context}/index.js +0 -0
  184. package/build-module/toolbar/toolbar-context/index.js.map +1 -0
  185. package/build-module/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js +1 -1
  186. package/build-module/toolbar/toolbar-dropdown-menu/index.js.map +1 -0
  187. package/build-module/{toolbar-group → toolbar/toolbar-group}/index.js +0 -0
  188. package/build-module/toolbar/toolbar-group/index.js.map +1 -0
  189. package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js +1 -1
  190. package/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js.map +1 -0
  191. package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js +1 -1
  192. package/build-module/toolbar/toolbar-group/toolbar-group-collapsed.native.js.map +1 -0
  193. package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.js +0 -0
  194. package/build-module/toolbar/toolbar-group/toolbar-group-container.js.map +1 -0
  195. package/build-module/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.native.js +0 -0
  196. package/build-module/toolbar/toolbar-group/toolbar-group-container.native.js.map +1 -0
  197. package/build-module/{toolbar-item → toolbar/toolbar-item}/index.js +0 -0
  198. package/build-module/toolbar/toolbar-item/index.js.map +1 -0
  199. package/build-module/{toolbar-item → toolbar/toolbar-item}/index.native.js +0 -0
  200. package/build-module/toolbar/toolbar-item/index.native.js.map +1 -0
  201. package/build-module/tree-grid/index.js +3 -3
  202. package/build-module/tree-grid/index.js.map +1 -1
  203. package/build-style/style-rtl.css +19 -32
  204. package/build-style/style.css +19 -32
  205. package/build-types/border-box-control/border-box-control/component.d.ts +1 -1
  206. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  207. package/build-types/border-box-control/border-box-control/hook.d.ts +0 -1
  208. package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
  209. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +1 -1
  210. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
  211. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +0 -1
  212. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
  213. package/build-types/border-box-control/stories/index.d.ts +1 -1
  214. package/build-types/border-control/border-control/component.d.ts +1 -1
  215. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  216. package/build-types/border-control/border-control/hook.d.ts +0 -1
  217. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  218. package/build-types/border-control/border-control-dropdown/component.d.ts +1 -1
  219. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  220. package/build-types/border-control/border-control-dropdown/hook.d.ts +0 -1
  221. package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
  222. package/build-types/border-control/stories/index.d.ts +6 -6
  223. package/build-types/border-control/stories/index.d.ts.map +1 -1
  224. package/build-types/border-control/types.d.ts +1 -1
  225. package/build-types/border-control/types.d.ts.map +1 -1
  226. package/build-types/color-palette/index.d.ts +2 -3
  227. package/build-types/color-palette/index.d.ts.map +1 -1
  228. package/build-types/color-palette/stories/index.d.ts +2 -9
  229. package/build-types/color-palette/stories/index.d.ts.map +1 -1
  230. package/build-types/color-palette/types.d.ts +3 -16
  231. package/build-types/color-palette/types.d.ts.map +1 -1
  232. package/build-types/color-picker/component.d.ts.map +1 -1
  233. package/build-types/color-picker/styles.d.ts.map +1 -1
  234. package/build-types/dashicon/types.d.ts +0 -4
  235. package/build-types/dashicon/types.d.ts.map +1 -1
  236. package/build-types/disabled/stories/index.d.ts.map +1 -1
  237. package/build-types/dropdown/index.d.ts +29 -1
  238. package/build-types/dropdown/index.d.ts.map +1 -1
  239. package/build-types/dropdown/stories/index.d.ts +23 -0
  240. package/build-types/dropdown/stories/index.d.ts.map +1 -0
  241. package/build-types/dropdown/test/index.d.ts +2 -0
  242. package/build-types/dropdown/test/index.d.ts.map +1 -0
  243. package/build-types/dropdown/types.d.ts +101 -0
  244. package/build-types/dropdown/types.d.ts.map +1 -1
  245. package/build-types/focal-point-picker/utils.d.ts.map +1 -1
  246. package/build-types/icon/stories/index.d.ts +22 -0
  247. package/build-types/icon/stories/index.d.ts.map +1 -0
  248. package/build-types/item-group/item/component.d.ts +24 -2
  249. package/build-types/item-group/item/component.d.ts.map +1 -1
  250. package/build-types/item-group/item-group/component.d.ts +23 -2
  251. package/build-types/item-group/item-group/component.d.ts.map +1 -1
  252. package/build-types/item-group/stories/index.d.ts +15 -0
  253. package/build-types/item-group/stories/index.d.ts.map +1 -0
  254. package/build-types/item-group/styles.d.ts.map +1 -1
  255. package/build-types/radio-context/index.d.ts +6 -0
  256. package/build-types/radio-context/index.d.ts.map +1 -0
  257. package/build-types/resizable-box/index.d.ts +6 -7
  258. package/build-types/resizable-box/index.d.ts.map +1 -1
  259. package/build-types/resizable-box/stories/index.d.ts +61 -0
  260. package/build-types/resizable-box/stories/index.d.ts.map +1 -0
  261. package/build-types/responsive-wrapper/index.d.ts +24 -0
  262. package/build-types/responsive-wrapper/index.d.ts.map +1 -0
  263. package/build-types/responsive-wrapper/stories/index.d.ts +12 -0
  264. package/build-types/responsive-wrapper/stories/index.d.ts.map +1 -0
  265. package/build-types/responsive-wrapper/types.d.ts +22 -0
  266. package/build-types/responsive-wrapper/types.d.ts.map +1 -0
  267. package/build-types/sandbox/index.d.ts +19 -0
  268. package/build-types/sandbox/index.d.ts.map +1 -0
  269. package/build-types/sandbox/stories/index.d.ts +12 -0
  270. package/build-types/sandbox/stories/index.d.ts.map +1 -0
  271. package/build-types/sandbox/test/index.d.ts +2 -0
  272. package/build-types/sandbox/test/index.d.ts.map +1 -0
  273. package/build-types/sandbox/types.d.ts +36 -0
  274. package/build-types/sandbox/types.d.ts.map +1 -0
  275. package/build-types/tab-panel/index.d.ts.map +1 -1
  276. package/build-types/tab-panel/stories/index.d.ts +1 -0
  277. package/build-types/tab-panel/stories/index.d.ts.map +1 -1
  278. package/build-types/tab-panel/types.d.ts +10 -4
  279. package/build-types/tab-panel/types.d.ts.map +1 -1
  280. package/package.json +17 -17
  281. package/src/autocomplete/index.js +1 -3
  282. package/src/autocomplete/test/index.js +2 -0
  283. package/src/base-control/test/index.tsx +1 -0
  284. package/src/border-box-control/border-box-control/component.tsx +0 -7
  285. package/src/border-box-control/border-box-control/hook.ts +0 -2
  286. package/src/border-box-control/border-box-control-split-controls/component.tsx +0 -2
  287. package/src/border-box-control/border-box-control-split-controls/hook.ts +0 -2
  288. package/src/border-box-control/test/index.js +2 -0
  289. package/src/border-control/border-control/component.tsx +0 -4
  290. package/src/border-control/border-control/hook.ts +0 -2
  291. package/src/border-control/border-control-dropdown/component.tsx +11 -17
  292. package/src/border-control/border-control-dropdown/hook.ts +0 -2
  293. package/src/border-control/stories/index.tsx +0 -1
  294. package/src/border-control/test/index.js +70 -67
  295. package/src/border-control/types.ts +1 -4
  296. package/src/box-control/test/index.js +2 -0
  297. package/src/checkbox-control/test/index.tsx +2 -0
  298. package/src/color-palette/index.tsx +12 -12
  299. package/src/color-palette/stories/index.tsx +0 -13
  300. package/src/color-palette/test/index.tsx +2 -0
  301. package/src/color-palette/types.ts +3 -17
  302. package/src/color-picker/component.tsx +1 -0
  303. package/src/color-picker/stories/index.js +20 -60
  304. package/src/color-picker/styles.ts +0 -5
  305. package/src/color-picker/test/index.js +2 -0
  306. package/src/combobox-control/index.js +9 -1
  307. package/src/combobox-control/test/index.js +2 -0
  308. package/src/confirm-dialog/test/index.js +2 -0
  309. package/src/dashicon/types.ts +0 -6
  310. package/src/date-time/date/test/index.tsx +2 -0
  311. package/src/date-time/time/test/index.tsx +2 -0
  312. package/src/dimension-control/index.js +2 -3
  313. package/src/dimension-control/test/index.test.js +2 -0
  314. package/src/disabled/stories/index.tsx +6 -2
  315. package/src/disabled/test/index.tsx +2 -0
  316. package/src/dropdown/README.md +41 -46
  317. package/src/dropdown/{index.js → index.tsx} +57 -13
  318. package/src/dropdown/stories/{index.js → index.tsx} +21 -8
  319. package/src/dropdown/test/{index.js → index.tsx} +9 -9
  320. package/src/dropdown/types.ts +107 -0
  321. package/src/dropdown-menu/README.md +2 -3
  322. package/src/dropdown-menu/test/index.js +2 -0
  323. package/src/external-link/test/index.tsx +2 -0
  324. package/src/focal-point-picker/stories/index.tsx +1 -1
  325. package/src/focal-point-picker/test/index.js +2 -0
  326. package/src/focal-point-picker/utils.ts +4 -1
  327. package/src/font-size-picker/test/index.tsx +2 -0
  328. package/src/form-file-upload/test/index.tsx +2 -0
  329. package/src/form-toggle/test/index.tsx +2 -0
  330. package/src/form-token-field/test/index.tsx +3 -0
  331. package/src/gradient-picker/index.js +1 -2
  332. package/src/gradient-picker/stories/index.js +0 -1
  333. package/src/guide/stories/index.js +14 -41
  334. package/src/guide/test/index.js +2 -0
  335. package/src/higher-order/navigate-regions/index.js +5 -2
  336. package/src/higher-order/navigate-regions/style.scss +13 -39
  337. package/src/higher-order/with-filters/test/index.js +70 -74
  338. package/src/higher-order/with-focus-outside/test/index.js +2 -0
  339. package/src/higher-order/with-focus-return/test/index.js +2 -0
  340. package/src/higher-order/with-notices/test/index.js +1 -0
  341. package/src/icon/stories/index.tsx +103 -0
  342. package/src/index.js +8 -7
  343. package/src/index.native.js +8 -6
  344. package/src/input-control/test/index.js +3 -0
  345. package/src/isolated-event-container/test/index.js +2 -0
  346. package/src/item-group/item/component.tsx +26 -2
  347. package/src/item-group/item-group/component.tsx +25 -2
  348. package/src/item-group/stories/index.tsx +103 -0
  349. package/src/item-group/styles.ts +1 -0
  350. package/src/item-group/test/__snapshots__/index.js.snap +11 -10
  351. package/src/mobile/bottom-sheet/picker-cell.native.js +1 -6
  352. package/src/mobile/global-styles-context/utils.native.js +17 -16
  353. package/src/modal/test/index.tsx +1 -3
  354. package/src/navigable-container/test/navigable-menu.js +2 -0
  355. package/src/navigable-container/test/tababble-container.js +2 -0
  356. package/src/navigation/test/index.js +2 -0
  357. package/src/navigator/test/index.tsx +2 -0
  358. package/src/notice/stories/index.js +30 -58
  359. package/src/notice/test/index.js +8 -3
  360. package/src/number-control/test/index.tsx +2 -0
  361. package/src/panel/row.js +3 -3
  362. package/src/panel/stories/index.js +62 -80
  363. package/src/panel/test/__snapshots__/body.js.snap +9 -0
  364. package/src/panel/test/body.js +71 -62
  365. package/src/placeholder/style.scss +1 -1
  366. package/src/placeholder/test/index.tsx +3 -0
  367. package/src/query-controls/index.js +1 -0
  368. package/src/resizable-box/README.md +2 -2
  369. package/src/resizable-box/index.tsx +7 -6
  370. package/src/resizable-box/stories/index.tsx +92 -0
  371. package/src/responsive-wrapper/README.md +29 -0
  372. package/src/responsive-wrapper/{index.js → index.tsx} +23 -2
  373. package/src/responsive-wrapper/stories/index.tsx +38 -0
  374. package/src/responsive-wrapper/types.ts +20 -0
  375. package/src/sandbox/README.md +45 -2
  376. package/src/sandbox/{index.js → index.tsx} +47 -24
  377. package/src/sandbox/stories/index.tsx +32 -0
  378. package/src/sandbox/test/{index.js → index.tsx} +9 -4
  379. package/src/sandbox/types.ts +34 -0
  380. package/src/select-control/test/select-control.tsx +2 -0
  381. package/src/slot-fill/stories/index.js +12 -17
  382. package/src/style.scss +3 -3
  383. package/src/tab-panel/README.md +1 -0
  384. package/src/tab-panel/index.tsx +20 -7
  385. package/src/tab-panel/stories/index.tsx +20 -0
  386. package/src/tab-panel/test/index.tsx +91 -0
  387. package/src/tab-panel/types.ts +10 -4
  388. package/src/text-highlight/test/index.tsx +1 -0
  389. package/src/toggle-group-control/test/index.tsx +2 -0
  390. package/src/toolbar/index.js +6 -52
  391. package/src/toolbar/stories/index.js +2 -9
  392. package/src/{toolbar-button/stories/index.js → toolbar/stories/toolbar-button.js} +1 -2
  393. package/src/{toolbar-group/stories/index.js → toolbar/stories/toolbar-group.js} +1 -1
  394. package/src/toolbar/test/index.js +1 -2
  395. package/src/{toolbar-group/test/index.js → toolbar/test/toolbar-group.js} +3 -1
  396. package/src/toolbar/{README.md → toolbar/README.md} +0 -0
  397. package/src/toolbar/toolbar/index.js +52 -0
  398. package/src/toolbar/{style.native.scss → toolbar/style.native.scss} +0 -0
  399. package/src/toolbar/{style.scss → toolbar/style.scss} +1 -1
  400. package/src/toolbar/{toolbar-container.js → toolbar/toolbar-container.js} +0 -0
  401. package/src/toolbar/{toolbar-container.native.js → toolbar/toolbar-container.native.js} +0 -0
  402. package/src/{toolbar-button → toolbar/toolbar-button}/README.md +0 -0
  403. package/src/{toolbar-button → toolbar/toolbar-button}/index.js +1 -1
  404. package/src/{toolbar-button → toolbar/toolbar-button}/style.scss +0 -0
  405. package/src/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.js +0 -0
  406. package/src/{toolbar-button → toolbar/toolbar-button}/toolbar-button-container.native.js +0 -0
  407. package/src/{toolbar-context → toolbar/toolbar-context}/index.js +0 -0
  408. package/src/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/README.md +0 -0
  409. package/src/{toolbar-dropdown-menu → toolbar/toolbar-dropdown-menu}/index.js +1 -1
  410. package/src/{toolbar-group → toolbar/toolbar-group}/README.md +0 -0
  411. package/src/{toolbar-group → toolbar/toolbar-group}/index.js +0 -0
  412. package/src/{toolbar-group → toolbar/toolbar-group}/style.native.scss +0 -0
  413. package/src/{toolbar-group → toolbar/toolbar-group}/style.scss +0 -0
  414. package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.js +1 -1
  415. package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-collapsed.native.js +1 -1
  416. package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.js +0 -0
  417. package/src/{toolbar-group → toolbar/toolbar-group}/toolbar-group-container.native.js +0 -0
  418. package/src/{toolbar-item → toolbar/toolbar-item}/README.md +0 -0
  419. package/src/{toolbar-item → toolbar/toolbar-item}/index.js +0 -0
  420. package/src/{toolbar-item → toolbar/toolbar-item}/index.native.js +0 -0
  421. package/src/tooltip/stories/index.js +68 -78
  422. package/src/tooltip/test/index.js +2 -0
  423. package/src/tree-grid/index.js +2 -4
  424. package/src/unit-control/test/index.tsx +3 -0
  425. package/src/utils/hooks/test/use-latest-ref.js +2 -0
  426. package/tsconfig.json +0 -7
  427. package/tsconfig.tsbuildinfo +1 -1
  428. package/build/toolbar/toolbar-container.native.js.map +0 -1
  429. package/build/toolbar-button/index.js.map +0 -1
  430. package/build/toolbar-button/toolbar-button-container.js.map +0 -1
  431. package/build/toolbar-button/toolbar-button-container.native.js.map +0 -1
  432. package/build/toolbar-context/index.js.map +0 -1
  433. package/build/toolbar-dropdown-menu/index.js.map +0 -1
  434. package/build/toolbar-group/index.js.map +0 -1
  435. package/build/toolbar-group/toolbar-group-collapsed.js.map +0 -1
  436. package/build/toolbar-group/toolbar-group-collapsed.native.js.map +0 -1
  437. package/build/toolbar-group/toolbar-group-container.js.map +0 -1
  438. package/build/toolbar-group/toolbar-group-container.native.js.map +0 -1
  439. package/build/toolbar-item/index.js.map +0 -1
  440. package/build/toolbar-item/index.native.js.map +0 -1
  441. package/build-module/toolbar/toolbar-container.js.map +0 -1
  442. package/build-module/toolbar/toolbar-container.native.js.map +0 -1
  443. package/build-module/toolbar-button/index.js.map +0 -1
  444. package/build-module/toolbar-button/toolbar-button-container.js.map +0 -1
  445. package/build-module/toolbar-button/toolbar-button-container.native.js.map +0 -1
  446. package/build-module/toolbar-context/index.js.map +0 -1
  447. package/build-module/toolbar-dropdown-menu/index.js.map +0 -1
  448. package/build-module/toolbar-group/index.js.map +0 -1
  449. package/build-module/toolbar-group/toolbar-group-collapsed.js.map +0 -1
  450. package/build-module/toolbar-group/toolbar-group-collapsed.native.js.map +0 -1
  451. package/build-module/toolbar-group/toolbar-group-container.js.map +0 -1
  452. package/build-module/toolbar-group/toolbar-group-container.native.js.map +0 -1
  453. package/build-module/toolbar-item/index.js.map +0 -1
  454. package/build-module/toolbar-item/index.native.js.map +0 -1
  455. package/src/icon/stories/index.js +0 -128
  456. package/src/item-group/stories/index.js +0 -270
  457. package/src/resizable-box/stories/index.js +0 -97
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/query-controls/index.js"],"names":["__","CategorySelect","RangeControl","SelectControl","FormTokenField","AuthorSelect","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","QueryControls","authorList","selectedAuthorId","categoriesList","selectedCategoryId","categorySuggestions","selectedCategories","numberOfItems","order","orderBy","maxItems","minItems","onCategoryChange","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","label","value","newOrderBy","newOrder","split","map","item","id","name","Object","keys"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CategorySelect from './category-select';\nimport { RangeControl, SelectControl, FormTokenField } from '../';\nimport AuthorSelect from './author-select';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nexport default function QueryControls( {\n\tauthorList,\n\tselectedAuthorId,\n\tcategoriesList,\n\tselectedCategoryId,\n\tcategorySuggestions,\n\tselectedCategories,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonCategoryChange,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n} ) {\n\treturn [\n\t\tonOrderChange && onOrderByChange && (\n\t\t\t<SelectControl\n\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\tvalue={ `${ orderBy }/${ order }` }\n\t\t\t\toptions={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t/* translators: label for ordering posts by title in ascending order */\n\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t/* translators: label for ordering posts by title in descending order */\n\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\tonOrderChange( newOrder );\n\t\t\t\t\t}\n\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\tonOrderByChange( newOrderBy );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t),\n\t\tcategoriesList && onCategoryChange && (\n\t\t\t<CategorySelect\n\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\tcategoriesList={ categoriesList }\n\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\tselectedCategoryId={ selectedCategoryId }\n\t\t\t\tonChange={ onCategoryChange }\n\t\t\t/>\n\t\t),\n\t\tcategorySuggestions && onCategoryChange && (\n\t\t\t<FormTokenField\n\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\tvalue={\n\t\t\t\t\tselectedCategories &&\n\t\t\t\t\tselectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\tvalue: item.name || item.value,\n\t\t\t\t\t} ) )\n\t\t\t\t}\n\t\t\t\tsuggestions={ Object.keys( categorySuggestions ) }\n\t\t\t\tonChange={ onCategoryChange }\n\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t/>\n\t\t),\n\t\tonAuthorChange && (\n\t\t\t<AuthorSelect\n\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\tauthorList={ authorList }\n\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\tonChange={ onAuthorChange }\n\t\t\t/>\n\t\t),\n\t\tonNumberOfItemsChange && (\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\tvalue={ numberOfItems }\n\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\tmin={ minItems }\n\t\t\t\tmax={ maxItems }\n\t\t\t\trequired\n\t\t\t/>\n\t\t),\n\t];\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/query-controls/index.js"],"names":["__","CategorySelect","RangeControl","SelectControl","FormTokenField","AuthorSelect","DEFAULT_MIN_ITEMS","DEFAULT_MAX_ITEMS","MAX_CATEGORIES_SUGGESTIONS","QueryControls","authorList","selectedAuthorId","categoriesList","selectedCategoryId","categorySuggestions","selectedCategories","numberOfItems","order","orderBy","maxItems","minItems","onCategoryChange","onAuthorChange","onNumberOfItemsChange","onOrderChange","onOrderByChange","label","value","newOrderBy","newOrder","split","map","item","id","name","Object","keys"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CategorySelect from './category-select';\nimport { RangeControl, SelectControl, FormTokenField } from '../';\nimport AuthorSelect from './author-select';\n\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\n\nexport default function QueryControls( {\n\tauthorList,\n\tselectedAuthorId,\n\tcategoriesList,\n\tselectedCategoryId,\n\tcategorySuggestions,\n\tselectedCategories,\n\tnumberOfItems,\n\torder,\n\torderBy,\n\tmaxItems = DEFAULT_MAX_ITEMS,\n\tminItems = DEFAULT_MIN_ITEMS,\n\tonCategoryChange,\n\tonAuthorChange,\n\tonNumberOfItemsChange,\n\tonOrderChange,\n\tonOrderByChange,\n} ) {\n\treturn [\n\t\tonOrderChange && onOrderByChange && (\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tkey=\"query-controls-order-select\"\n\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\tvalue={ `${ orderBy }/${ order }` }\n\t\t\t\toptions={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Newest to oldest' ),\n\t\t\t\t\t\tvalue: 'date/desc',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Oldest to newest' ),\n\t\t\t\t\t\tvalue: 'date/asc',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t/* translators: label for ordering posts by title in ascending order */\n\t\t\t\t\t\tlabel: __( 'A → Z' ),\n\t\t\t\t\t\tvalue: 'title/asc',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t/* translators: label for ordering posts by title in descending order */\n\t\t\t\t\t\tlabel: __( 'Z → A' ),\n\t\t\t\t\t\tvalue: 'title/desc',\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\t\tif ( newOrder !== order ) {\n\t\t\t\t\t\tonOrderChange( newOrder );\n\t\t\t\t\t}\n\t\t\t\t\tif ( newOrderBy !== orderBy ) {\n\t\t\t\t\t\tonOrderByChange( newOrderBy );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t),\n\t\tcategoriesList && onCategoryChange && (\n\t\t\t<CategorySelect\n\t\t\t\tkey=\"query-controls-category-select\"\n\t\t\t\tcategoriesList={ categoriesList }\n\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\tselectedCategoryId={ selectedCategoryId }\n\t\t\t\tonChange={ onCategoryChange }\n\t\t\t/>\n\t\t),\n\t\tcategorySuggestions && onCategoryChange && (\n\t\t\t<FormTokenField\n\t\t\t\tkey=\"query-controls-categories-select\"\n\t\t\t\tlabel={ __( 'Categories' ) }\n\t\t\t\tvalue={\n\t\t\t\t\tselectedCategories &&\n\t\t\t\t\tselectedCategories.map( ( item ) => ( {\n\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\tvalue: item.name || item.value,\n\t\t\t\t\t} ) )\n\t\t\t\t}\n\t\t\t\tsuggestions={ Object.keys( categorySuggestions ) }\n\t\t\t\tonChange={ onCategoryChange }\n\t\t\t\tmaxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }\n\t\t\t/>\n\t\t),\n\t\tonAuthorChange && (\n\t\t\t<AuthorSelect\n\t\t\t\tkey=\"query-controls-author-select\"\n\t\t\t\tauthorList={ authorList }\n\t\t\t\tlabel={ __( 'Author' ) }\n\t\t\t\tnoOptionLabel={ __( 'All' ) }\n\t\t\t\tselectedAuthorId={ selectedAuthorId }\n\t\t\t\tonChange={ onAuthorChange }\n\t\t\t/>\n\t\t),\n\t\tonNumberOfItemsChange && (\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tkey=\"query-controls-range-control\"\n\t\t\t\tlabel={ __( 'Number of items' ) }\n\t\t\t\tvalue={ numberOfItems }\n\t\t\t\tonChange={ onNumberOfItemsChange }\n\t\t\t\tmin={ minItems }\n\t\t\t\tmax={ maxItems }\n\t\t\t\trequired\n\t\t\t/>\n\t\t),\n\t];\n}\n"]}
@@ -49,7 +49,7 @@ const HANDLE_STYLES = {
49
49
  bottomLeft: HANDLE_STYLES_OVERRIDES
50
50
  };
51
51
 
52
- function ResizableBox(_ref, ref) {
52
+ function UnforwardedResizableBox(_ref, ref) {
53
53
  let {
54
54
  className,
55
55
  children,
@@ -66,5 +66,6 @@ function ResizableBox(_ref, ref) {
66
66
  }, props), children, showTooltip && createElement(ResizeTooltip, tooltipProps));
67
67
  }
68
68
 
69
- export default forwardRef(ResizableBox);
69
+ export const ResizableBox = forwardRef(UnforwardedResizableBox);
70
+ export default ResizableBox;
70
71
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/resizable-box/index.tsx"],"names":["forwardRef","classnames","Resizable","ResizeTooltip","HANDLE_CLASS_NAME","SIDE_HANDLE_CLASS_NAME","CORNER_HANDLE_CLASS_NAME","HANDLE_CLASSES","top","right","bottom","left","topLeft","topRight","bottomRight","bottomLeft","HANDLE_STYLES_OVERRIDES","width","undefined","height","HANDLE_STYLES","ResizableBox","ref","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,cAA1B;;AAIA;AACA;AACA;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,MAAMC,iBAAiB,GAAG,kCAA1B;AACA,MAAMC,sBAAsB,GAAG,uCAA/B;AACA,MAAMC,wBAAwB,GAAG,yCAAjC;AAEA,MAAMC,cAAc,GAAG;AACtBC,EAAAA,GAAG,EAAEP,UAAU,CACdG,iBADc,EAEdC,sBAFc,EAGd,sCAHc,CADO;AAMtBI,EAAAA,KAAK,EAAER,UAAU,CAChBG,iBADgB,EAEhBC,sBAFgB,EAGhB,wCAHgB,CANK;AAWtBK,EAAAA,MAAM,EAAET,UAAU,CACjBG,iBADiB,EAEjBC,sBAFiB,EAGjB,yCAHiB,CAXI;AAgBtBM,EAAAA,IAAI,EAAEV,UAAU,CACfG,iBADe,EAEfC,sBAFe,EAGf,uCAHe,CAhBM;AAqBtBO,EAAAA,OAAO,EAAEX,UAAU,CAClBG,iBADkB,EAElBE,wBAFkB,EAGlB,sCAHkB,EAIlB,uCAJkB,CArBG;AA2BtBO,EAAAA,QAAQ,EAAEZ,UAAU,CACnBG,iBADmB,EAEnBE,wBAFmB,EAGnB,sCAHmB,EAInB,wCAJmB,CA3BE;AAiCtBQ,EAAAA,WAAW,EAAEb,UAAU,CACtBG,iBADsB,EAEtBE,wBAFsB,EAGtB,yCAHsB,EAItB,wCAJsB,CAjCD;AAuCtBS,EAAAA,UAAU,EAAEd,UAAU,CACrBG,iBADqB,EAErBE,wBAFqB,EAGrB,yCAHqB,EAIrB,uCAJqB;AAvCA,CAAvB,C,CA+CA;;AACA,MAAMU,uBAAuB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,SADwB;AAE/BC,EAAAA,MAAM,EAAED,SAFuB;AAG/BV,EAAAA,GAAG,EAAEU,SAH0B;AAI/BT,EAAAA,KAAK,EAAES,SAJwB;AAK/BR,EAAAA,MAAM,EAAEQ,SALuB;AAM/BP,EAAAA,IAAI,EAAEO;AANyB,CAAhC;AAQA,MAAME,aAAa,GAAG;AACrBZ,EAAAA,GAAG,EAAEQ,uBADgB;AAErBP,EAAAA,KAAK,EAAEO,uBAFc;AAGrBN,EAAAA,MAAM,EAAEM,uBAHa;AAIrBL,EAAAA,IAAI,EAAEK,uBAJe;AAKrBJ,EAAAA,OAAO,EAAEI,uBALY;AAMrBH,EAAAA,QAAQ,EAAEG,uBANW;AAOrBF,EAAAA,WAAW,EAAEE,uBAPQ;AAQrBD,EAAAA,UAAU,EAAEC;AARS,CAAtB;;AAmBA,SAASK,YAAT,OASCC,GATD,EAUe;AAAA,MATd;AACCC,IAAAA,SADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,UAAU,GAAG,IAHd;AAICC,IAAAA,yBAAyB,EAAEC,WAAW,GAAG,KAJ1C;AAKCC,IAAAA,0BAA0B,EAAEC,YAAY,GAAG,EAL5C;AAMC,OAAGC;AANJ,GASc;AACd,SACC,cAAC,SAAD;AACC,IAAA,SAAS,EAAG7B,UAAU,CACrB,qCADqB,EAErBwB,UAAU,IAAI,iBAFO,EAGrBF,SAHqB,CADvB;AAMC,IAAA,aAAa,EAAGhB,cANjB;AAOC,IAAA,YAAY,EAAGa,aAPhB;AAQC,IAAA,GAAG,EAAGE;AARP,KASMQ,KATN,GAWGN,QAXH,EAYGG,WAAW,IAAI,cAAC,aAAD,EAAoBE,YAApB,CAZlB,CADD;AAgBA;;AAED,eAAe7B,UAAU,CAAEqB,YAAF,CAAzB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { Resizable } from 're-resizable';\nimport type { ResizableProps } from 're-resizable';\nimport type { ReactNode, ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\n\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\n\nconst HANDLE_CLASSES = {\n\ttop: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top'\n\t),\n\tright: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottom: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom'\n\t),\n\tleft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-left'\n\t),\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\nconst HANDLE_STYLES = {\n\ttop: HANDLE_STYLES_OVERRIDES,\n\tright: HANDLE_STYLES_OVERRIDES,\n\tbottom: HANDLE_STYLES_OVERRIDES,\n\tleft: HANDLE_STYLES_OVERRIDES,\n\ttopLeft: HANDLE_STYLES_OVERRIDES,\n\ttopRight: HANDLE_STYLES_OVERRIDES,\n\tbottomRight: HANDLE_STYLES_OVERRIDES,\n\tbottomLeft: HANDLE_STYLES_OVERRIDES,\n};\n\ntype ResizableBoxProps = ResizableProps & {\n\tclassName: string;\n\tchildren: ReactNode;\n\tshowHandle: boolean;\n\t__experimentalShowTooltip: boolean;\n\t__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction ResizableBox(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tshowHandle = true,\n\t\t__experimentalShowTooltip: showTooltip = false,\n\t\t__experimentalTooltipProps: tooltipProps = {},\n\t\t...props\n\t}: ResizableBoxProps,\n\tref: ForwardedRef< Resizable >\n): JSX.Element {\n\treturn (\n\t\t<Resizable\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-resizable-box__container',\n\t\t\t\tshowHandle && 'has-show-handle',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thandleClasses={ HANDLE_CLASSES }\n\t\t\thandleStyles={ HANDLE_STYLES }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }\n\t\t</Resizable>\n\t);\n}\n\nexport default forwardRef( ResizableBox );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/resizable-box/index.tsx"],"names":["forwardRef","classnames","Resizable","ResizeTooltip","HANDLE_CLASS_NAME","SIDE_HANDLE_CLASS_NAME","CORNER_HANDLE_CLASS_NAME","HANDLE_CLASSES","top","right","bottom","left","topLeft","topRight","bottomRight","bottomLeft","HANDLE_STYLES_OVERRIDES","width","undefined","height","HANDLE_STYLES","UnforwardedResizableBox","ref","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props","ResizableBox"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,cAA1B;;AAIA;AACA;AACA;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,MAAMC,iBAAiB,GAAG,kCAA1B;AACA,MAAMC,sBAAsB,GAAG,uCAA/B;AACA,MAAMC,wBAAwB,GAAG,yCAAjC;AAEA,MAAMC,cAAc,GAAG;AACtBC,EAAAA,GAAG,EAAEP,UAAU,CACdG,iBADc,EAEdC,sBAFc,EAGd,sCAHc,CADO;AAMtBI,EAAAA,KAAK,EAAER,UAAU,CAChBG,iBADgB,EAEhBC,sBAFgB,EAGhB,wCAHgB,CANK;AAWtBK,EAAAA,MAAM,EAAET,UAAU,CACjBG,iBADiB,EAEjBC,sBAFiB,EAGjB,yCAHiB,CAXI;AAgBtBM,EAAAA,IAAI,EAAEV,UAAU,CACfG,iBADe,EAEfC,sBAFe,EAGf,uCAHe,CAhBM;AAqBtBO,EAAAA,OAAO,EAAEX,UAAU,CAClBG,iBADkB,EAElBE,wBAFkB,EAGlB,sCAHkB,EAIlB,uCAJkB,CArBG;AA2BtBO,EAAAA,QAAQ,EAAEZ,UAAU,CACnBG,iBADmB,EAEnBE,wBAFmB,EAGnB,sCAHmB,EAInB,wCAJmB,CA3BE;AAiCtBQ,EAAAA,WAAW,EAAEb,UAAU,CACtBG,iBADsB,EAEtBE,wBAFsB,EAGtB,yCAHsB,EAItB,wCAJsB,CAjCD;AAuCtBS,EAAAA,UAAU,EAAEd,UAAU,CACrBG,iBADqB,EAErBE,wBAFqB,EAGrB,yCAHqB,EAIrB,uCAJqB;AAvCA,CAAvB,C,CA+CA;;AACA,MAAMU,uBAAuB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,SADwB;AAE/BC,EAAAA,MAAM,EAAED,SAFuB;AAG/BV,EAAAA,GAAG,EAAEU,SAH0B;AAI/BT,EAAAA,KAAK,EAAES,SAJwB;AAK/BR,EAAAA,MAAM,EAAEQ,SALuB;AAM/BP,EAAAA,IAAI,EAAEO;AANyB,CAAhC;AAQA,MAAME,aAAa,GAAG;AACrBZ,EAAAA,GAAG,EAAEQ,uBADgB;AAErBP,EAAAA,KAAK,EAAEO,uBAFc;AAGrBN,EAAAA,MAAM,EAAEM,uBAHa;AAIrBL,EAAAA,IAAI,EAAEK,uBAJe;AAKrBJ,EAAAA,OAAO,EAAEI,uBALY;AAMrBH,EAAAA,QAAQ,EAAEG,uBANW;AAOrBF,EAAAA,WAAW,EAAEE,uBAPQ;AAQrBD,EAAAA,UAAU,EAAEC;AARS,CAAtB;;AAkBA,SAASK,uBAAT,OASCC,GATD,EAUe;AAAA,MATd;AACCC,IAAAA,SADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,UAAU,GAAG,IAHd;AAICC,IAAAA,yBAAyB,EAAEC,WAAW,GAAG,KAJ1C;AAKCC,IAAAA,0BAA0B,EAAEC,YAAY,GAAG,EAL5C;AAMC,OAAGC;AANJ,GASc;AACd,SACC,cAAC,SAAD;AACC,IAAA,SAAS,EAAG7B,UAAU,CACrB,qCADqB,EAErBwB,UAAU,IAAI,iBAFO,EAGrBF,SAHqB,CADvB;AAMC,IAAA,aAAa,EAAGhB,cANjB;AAOC,IAAA,YAAY,EAAGa,aAPhB;AAQC,IAAA,GAAG,EAAGE;AARP,KASMQ,KATN,GAWGN,QAXH,EAYGG,WAAW,IAAI,cAAC,aAAD,EAAoBE,YAApB,CAZlB,CADD;AAgBA;;AAED,OAAO,MAAME,YAAY,GAAG/B,UAAU,CAAEqB,uBAAF,CAA/B;AAEP,eAAeU,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { Resizable } from 're-resizable';\nimport type { ResizableProps } from 're-resizable';\nimport type { ReactNode, ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\n\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\n\nconst HANDLE_CLASSES = {\n\ttop: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top'\n\t),\n\tright: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottom: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom'\n\t),\n\tleft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-left'\n\t),\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\nconst HANDLE_STYLES = {\n\ttop: HANDLE_STYLES_OVERRIDES,\n\tright: HANDLE_STYLES_OVERRIDES,\n\tbottom: HANDLE_STYLES_OVERRIDES,\n\tleft: HANDLE_STYLES_OVERRIDES,\n\ttopLeft: HANDLE_STYLES_OVERRIDES,\n\ttopRight: HANDLE_STYLES_OVERRIDES,\n\tbottomRight: HANDLE_STYLES_OVERRIDES,\n\tbottomLeft: HANDLE_STYLES_OVERRIDES,\n};\n\ntype ResizableBoxProps = ResizableProps & {\n\tchildren: ReactNode;\n\tshowHandle?: boolean;\n\t__experimentalShowTooltip?: boolean;\n\t__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction UnforwardedResizableBox(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tshowHandle = true,\n\t\t__experimentalShowTooltip: showTooltip = false,\n\t\t__experimentalTooltipProps: tooltipProps = {},\n\t\t...props\n\t}: ResizableBoxProps,\n\tref: ForwardedRef< Resizable >\n): JSX.Element {\n\treturn (\n\t\t<Resizable\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-resizable-box__container',\n\t\t\t\tshowHandle && 'has-show-handle',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thandleClasses={ HANDLE_CLASSES }\n\t\t\thandleStyles={ HANDLE_STYLES }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }\n\t\t</Resizable>\n\t);\n}\n\nexport const ResizableBox = forwardRef( UnforwardedResizableBox );\n\nexport default ResizableBox;\n"]}
@@ -10,7 +10,26 @@ import classnames from 'classnames';
10
10
 
11
11
  import { cloneElement, Children } from '@wordpress/element';
12
12
  import { useResizeObserver } from '@wordpress/compose';
13
+ /**
14
+ * Internal dependencies
15
+ */
13
16
 
17
+ /**
18
+ * A wrapper component that maintains its aspect ratio when resized.
19
+ *
20
+ * ```jsx
21
+ * import { ResponsiveWrapper } from '@wordpress/components';
22
+ *
23
+ * const MyResponsiveWrapper = () => (
24
+ * <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
25
+ * <img
26
+ * src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
27
+ * alt="WordPress"
28
+ * />
29
+ * </ResponsiveWrapper>
30
+ * );
31
+ * ```
32
+ */
14
33
  function ResponsiveWrapper(_ref) {
15
34
  let {
16
35
  naturalWidth,
@@ -27,7 +46,7 @@ function ResponsiveWrapper(_ref) {
27
46
  }
28
47
 
29
48
  const imageStyle = {
30
- paddingBottom: naturalWidth < containerWidth ? naturalHeight : naturalHeight / naturalWidth * 100 + '%'
49
+ paddingBottom: naturalWidth < (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) ? naturalHeight : naturalHeight / naturalWidth * 100 + '%'
31
50
  };
32
51
  const TagName = isInline ? 'span' : 'div';
33
52
  return createElement(TagName, {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["classnames","cloneElement","Children","useResizeObserver","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,oBAAlC;;AAEA,SAASC,iBAAT,OAKI;AAAA,MALwB;AAC3BC,IAAAA,YAD2B;AAE3BC,IAAAA,aAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA,QAAQ,GAAG;AAJgB,GAKxB;AACH,QAAM,CAAEC,uBAAF,EAA2B;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAA3B,IACLR,iBAAiB,EADlB;;AAEA,MAAKD,QAAQ,CAACU,KAAT,CAAgBL,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMM,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZT,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMU,OAAO,GAAGP,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,cAAC,OAAD;AAAS,IAAA,KAAK,EAAGI;AAAjB,IAFD,EAGGZ,YAAY,CAAEM,QAAF,EAAY;AACzBS,IAAAA,SAAS,EAAEhB,UAAU,CACpB,wCADoB,EAEpBO,QAAQ,CAACU,KAAT,CAAeD,SAFK;AADI,GAAZ,CAHf,CADD;AAYA;;AAED,eAAeZ,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n} ) {\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < containerWidth\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"names":["classnames","cloneElement","Children","useResizeObserver","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,oBAAlC;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAT,OAK4B;AAAA,MALA;AAC3BC,IAAAA,YAD2B;AAE3BC,IAAAA,aAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA,QAAQ,GAAG;AAJgB,GAKA;AAC3B,QAAM,CAAEC,uBAAF,EAA2B;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAA3B,IACLR,iBAAiB,EADlB;;AAEA,MAAKD,QAAQ,CAACU,KAAT,CAAgBL,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMM,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZT,YAAY,IAAKM,cAAL,aAAKA,cAAL,cAAKA,cAAL,GAAuB,CAAvB,CAAZ,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMU,OAAO,GAAGP,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,cAAC,OAAD;AAAS,IAAA,KAAK,EAAGI;AAAjB,IAFD,EAGGZ,YAAY,CAAEM,QAAF,EAAY;AACzBS,IAAAA,SAAS,EAAEhB,UAAU,CACpB,wCADoB,EAEpBO,QAAQ,CAACU,KAAT,CAAeD,SAFK;AADI,GAAZ,CAHf,CADD;AAYA;;AAED,eAAeZ,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveWrapperProps } from './types';\n\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < ( containerWidth ?? 0 )\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -5,6 +5,9 @@ import { createElement } from "@wordpress/element";
5
5
  */
6
6
  import { renderToString, useRef, useState, useEffect } from '@wordpress/element';
7
7
  import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
8
+ /**
9
+ * Internal dependencies
10
+ */
8
11
 
9
12
  const observeAndResizeJS = function () {
10
13
  const {
@@ -58,7 +61,8 @@ const observeAndResizeJS = function () {
58
61
  // get an DOM mutations for that, so do the resize when the window is resized, too.
59
62
 
60
63
  window.addEventListener('resize', sendResize, true);
61
- };
64
+ }; // TODO: These styles shouldn't be coupled with WordPress.
65
+
62
66
 
63
67
  const style = `
64
68
  body {
@@ -82,7 +86,19 @@ const style = `
82
86
  margin-bottom: 0 !important;
83
87
  }
84
88
  `;
85
- export default function Sandbox(_ref) {
89
+ /**
90
+ * This component provides an isolated environment for arbitrary HTML via iframes.
91
+ *
92
+ * ```jsx
93
+ * import { SandBox } from '@wordpress/components';
94
+ *
95
+ * const MySandBox = () => (
96
+ * <SandBox html="<p>Content</p>" title="SandBox" type="embed" />
97
+ * );
98
+ * ```
99
+ */
100
+
101
+ function SandBox(_ref) {
86
102
  let {
87
103
  html = '',
88
104
  title = '',
@@ -97,13 +113,15 @@ export default function Sandbox(_ref) {
97
113
 
98
114
  function isFrameAccessible() {
99
115
  try {
100
- return !!ref.current.contentDocument.body;
116
+ var _ref$current, _ref$current$contentD;
117
+
118
+ return !!((_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current$contentD = _ref$current.contentDocument) !== null && _ref$current$contentD !== void 0 && _ref$current$contentD.body);
101
119
  } catch (e) {
102
120
  return false;
103
121
  }
104
122
  }
105
123
 
106
- function trySandbox() {
124
+ function trySandBox() {
107
125
  let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
108
126
 
109
127
  if (!isFrameAccessible()) {
@@ -114,11 +132,8 @@ export default function Sandbox(_ref) {
114
132
  contentDocument,
115
133
  ownerDocument
116
134
  } = ref.current;
117
- const {
118
- body
119
- } = contentDocument;
120
135
 
121
- if (!forceRerender && null !== body.getAttribute('data-resizable-iframe-connected')) {
136
+ if (!forceRerender && null !== (contentDocument === null || contentDocument === void 0 ? void 0 : contentDocument.body.getAttribute('data-resizable-iframe-connected'))) {
122
137
  return;
123
138
  } // Put the html snippet into a html document, and then write it to the iframe's document
124
139
  // we can use this in the future to inject custom styles or scripts.
@@ -163,10 +178,12 @@ export default function Sandbox(_ref) {
163
178
  }
164
179
 
165
180
  useEffect(() => {
166
- trySandbox();
181
+ var _iframe$ownerDocument;
182
+
183
+ trySandBox();
167
184
 
168
- function tryNoForceSandbox() {
169
- trySandbox(false);
185
+ function tryNoForceSandBox() {
186
+ trySandBox(false);
170
187
  }
171
188
 
172
189
  function checkMessageForResize(event) {
@@ -196,32 +213,27 @@ export default function Sandbox(_ref) {
196
213
  }
197
214
 
198
215
  const iframe = ref.current;
199
- const {
200
- ownerDocument
201
- } = iframe;
202
- const {
203
- defaultView
204
- } = ownerDocument; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
216
+ const defaultView = iframe === null || iframe === void 0 ? void 0 : (_iframe$ownerDocument = iframe.ownerDocument) === null || _iframe$ownerDocument === void 0 ? void 0 : _iframe$ownerDocument.defaultView; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
205
217
  // after reordering the containing block. See these two issues for more details:
206
218
  // https://github.com/WordPress/gutenberg/issues/6146
207
219
  // https://github.com/facebook/react/issues/18752
208
220
 
209
- iframe.addEventListener('load', tryNoForceSandbox, false);
210
- defaultView.addEventListener('message', checkMessageForResize);
221
+ iframe === null || iframe === void 0 ? void 0 : iframe.addEventListener('load', tryNoForceSandBox, false);
222
+ defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('message', checkMessageForResize);
211
223
  return () => {
212
- iframe === null || iframe === void 0 ? void 0 : iframe.removeEventListener('load', tryNoForceSandbox, false);
213
- defaultView.addEventListener('message', checkMessageForResize);
224
+ iframe === null || iframe === void 0 ? void 0 : iframe.removeEventListener('load', tryNoForceSandBox, false);
225
+ defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('message', checkMessageForResize);
214
226
  }; // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
215
227
  // See https://github.com/WordPress/gutenberg/pull/44378
216
228
  // eslint-disable-next-line react-hooks/exhaustive-deps
217
229
  }, []);
218
230
  useEffect(() => {
219
- trySandbox(); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
231
+ trySandBox(); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
220
232
  // See https://github.com/WordPress/gutenberg/pull/44378
221
233
  // eslint-disable-next-line react-hooks/exhaustive-deps
222
234
  }, [title, styles, scripts]);
223
235
  useEffect(() => {
224
- trySandbox(true); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
236
+ trySandBox(true); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
225
237
  // See https://github.com/WordPress/gutenberg/pull/44378
226
238
  // eslint-disable-next-line react-hooks/exhaustive-deps
227
239
  }, [html, type]);
@@ -235,4 +247,6 @@ export default function Sandbox(_ref) {
235
247
  height: Math.ceil(height)
236
248
  });
237
249
  }
250
+
251
+ export default SandBox;
238
252
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["renderToString","useRef","useState","useEffect","useFocusableIframe","useMergeRefs","observeAndResizeJS","MutationObserver","window","document","body","parent","sendResize","clientBoundingRect","getBoundingClientRect","postMessage","action","width","height","observer","observe","attributes","attributeOldValue","characterData","characterDataOldValue","childList","subtree","addEventListener","removeViewportStyles","ruleOrNode","style","forEach","test","Array","prototype","call","querySelectorAll","styleSheets","stylesheet","cssRules","rules","position","setAttribute","Sandbox","html","title","type","styles","scripts","onFocus","ref","setWidth","setHeight","isFrameAccessible","current","contentDocument","e","trySandbox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","i","toString","src","open","write","close","tryNoForceSandbox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","Math","ceil"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\nconst observeAndResizeJS = function () {\n\tconst { MutationObserver } = window;\n\n\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\treturn;\n\t}\n\n\tfunction sendResize() {\n\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t},\n\t\t\t'*'\n\t\t);\n\t}\n\n\tconst observer = new MutationObserver( sendResize );\n\tobserver.observe( document.body, {\n\t\tattributes: true,\n\t\tattributeOldValue: false,\n\t\tcharacterData: true,\n\t\tcharacterDataOldValue: false,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t} );\n\n\twindow.addEventListener( 'load', sendResize, true );\n\n\t// Hack: Remove viewport unit styles, as these are relative\n\t// the iframe root and interfere with our mechanism for\n\t// determining the unconstrained page bounds.\n\tfunction removeViewportStyles( ruleOrNode ) {\n\t\tif ( ruleOrNode.style ) {\n\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (\n\t\t\t\tstyle\n\t\t\t) {\n\t\t\t\tif (\n\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\nexport default function Sandbox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n} ) {\n\tconst ref = useRef();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current.contentDocument.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandbox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } = ref.current;\n\t\tconst { body } = contentDocument;\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !== body.getAttribute( 'data-resizable-iframe-connected' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: `(${ observeAndResizeJS.toString() })();`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\n\t\tfunction tryNoForceSandbox() {\n\t\t\ttrySandbox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe || iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data || {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst iframe = ref.current;\n\t\tconst { ownerDocument } = iframe;\n\t\tconst { defaultView } = ownerDocument;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tiframe.addEventListener( 'load', tryNoForceSandbox, false );\n\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tiframe?.removeEventListener( 'load', tryNoForceSandbox, false );\n\t\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandbox( true );\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/sandbox/index.tsx"],"names":["renderToString","useRef","useState","useEffect","useFocusableIframe","useMergeRefs","observeAndResizeJS","MutationObserver","window","document","body","parent","sendResize","clientBoundingRect","getBoundingClientRect","postMessage","action","width","height","observer","observe","attributes","attributeOldValue","characterData","characterDataOldValue","childList","subtree","addEventListener","removeViewportStyles","ruleOrNode","style","forEach","test","Array","prototype","call","querySelectorAll","styleSheets","stylesheet","cssRules","rules","position","setAttribute","SandBox","html","title","type","styles","scripts","onFocus","ref","setWidth","setHeight","isFrameAccessible","current","contentDocument","e","trySandBox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","i","toString","src","open","write","close","tryNoForceSandBox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","Math","ceil"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SandBoxProps } from './types';\n\nconst observeAndResizeJS = function () {\n\tconst { MutationObserver } = window;\n\n\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\treturn;\n\t}\n\n\tfunction sendResize() {\n\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t},\n\t\t\t'*'\n\t\t);\n\t}\n\n\tconst observer = new MutationObserver( sendResize );\n\tobserver.observe( document.body, {\n\t\tattributes: true,\n\t\tattributeOldValue: false,\n\t\tcharacterData: true,\n\t\tcharacterDataOldValue: false,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t} );\n\n\twindow.addEventListener( 'load', sendResize, true );\n\n\t// Hack: Remove viewport unit styles, as these are relative\n\t// the iframe root and interfere with our mechanism for\n\t// determining the unconstrained page bounds.\n\tfunction removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {\n\t\tif ( ruleOrNode.style ) {\n\t\t\t(\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ] as const\n\t\t\t ).forEach( function ( style ) {\n\t\t\t\tif (\n\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\n// TODO: These styles shouldn't be coupled with WordPress.\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\n/**\n * This component provides an isolated environment for arbitrary HTML via iframes.\n *\n * ```jsx\n * import { SandBox } from '@wordpress/components';\n *\n * const MySandBox = () => (\n * \t<SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" />\n * );\n * ```\n */\nfunction SandBox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n}: SandBoxProps ) {\n\tconst ref = useRef< HTMLIFrameElement >();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current?.contentDocument?.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandBox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } =\n\t\t\tref.current as HTMLIFrameElement & {\n\t\t\t\tcontentDocument: Document;\n\t\t\t};\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !==\n\t\t\t\tcontentDocument?.body.getAttribute(\n\t\t\t\t\t'data-resizable-iframe-connected'\n\t\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: `(${ observeAndResizeJS.toString() })();`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\n\t\tfunction tryNoForceSandBox() {\n\t\t\ttrySandBox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event: MessageEvent ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe || iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data || {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst iframe = ref.current;\n\t\tconst defaultView = iframe?.ownerDocument?.defaultView;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tiframe?.addEventListener( 'load', tryNoForceSandBox, false );\n\t\tdefaultView?.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tiframe?.removeEventListener( 'load', tryNoForceSandBox, false );\n\t\t\tdefaultView?.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandBox( true );\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n\nexport default SandBox;\n"]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -5,7 +5,6 @@ import { createElement } from "@wordpress/element";
5
5
  * External dependencies
6
6
  */
7
7
  import classnames from 'classnames';
8
- import { find } from 'lodash';
9
8
  /**
10
9
  * WordPress dependencies
11
10
  */
@@ -22,7 +21,6 @@ import Button from '../button';
22
21
  const TabButton = _ref => {
23
22
  let {
24
23
  tabId,
25
- onClick,
26
24
  children,
27
25
  selected,
28
26
  ...rest
@@ -32,7 +30,7 @@ const TabButton = _ref => {
32
30
  tabIndex: selected ? null : -1,
33
31
  "aria-selected": selected,
34
32
  id: tabId,
35
- onClick: onClick
33
+ __experimentalIsFocusable: true
36
34
  }, rest), children);
37
35
  };
38
36
  /**
@@ -98,15 +96,23 @@ export function TabPanel(_ref2) {
98
96
  child.click();
99
97
  };
100
98
 
101
- const selectedTab = find(tabs, {
102
- name: selected
99
+ const selectedTab = tabs.find(_ref3 => {
100
+ let {
101
+ name
102
+ } = _ref3;
103
+ return name === selected;
103
104
  });
104
105
  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`;
105
106
  useEffect(() => {
106
- if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.name) && tabs.length > 0) {
107
- handleTabSelection(initialTabName || tabs[0].name);
107
+ const firstEnabledTab = tabs.find(tab => !tab.disabled);
108
+ const initialTab = tabs.find(tab => tab.name === initialTabName);
109
+
110
+ if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.name) && firstEnabledTab) {
111
+ handleTabSelection(initialTab && !initialTab.disabled ? initialTab.name : firstEnabledTab.name);
112
+ } else if (selectedTab !== null && selectedTab !== void 0 && selectedTab.disabled && firstEnabledTab) {
113
+ handleTabSelection(firstEnabledTab.name);
108
114
  }
109
- }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName, handleTabSelection]);
115
+ }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.disabled, initialTabName, handleTabSelection]);
110
116
  return createElement("div", {
111
117
  className: className
112
118
  }, createElement(NavigableMenu, {
@@ -123,6 +129,7 @@ export function TabPanel(_ref2) {
123
129
  selected: tab.name === selected,
124
130
  key: tab.name,
125
131
  onClick: () => handleTabSelection(tab.name),
132
+ disabled: tab.disabled,
126
133
  label: tab.icon && tab.title,
127
134
  icon: tab.icon,
128
135
  showTooltip: !!tab.icon
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","find","useState","useEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","name","selectedId","length","undefined","map","tab","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","useState","useEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","children","selected","rest","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","firstEnabledTab","tab","disabled","initialTab","undefined","map","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\n\t\tif ( ! selectedTab?.name && firstEnabledTab ) {\n\t\t\thandleTabSelection(\n\t\t\t\tinitialTab && ! initialTab.disabled\n\t\t\t\t\t? initialTab.name\n\t\t\t\t\t: firstEnabledTab.name\n\t\t\t);\n\t\t} else if ( selectedTab?.disabled && firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [\n\t\ttabs,\n\t\tselectedTab?.name,\n\t\tselectedTab?.disabled,\n\t\tinitialTabName,\n\t\thandleTabSelection,\n\t] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
@@ -1,59 +1,7 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
- import { createElement } from "@wordpress/element";
3
-
4
- /**
5
- * External dependencies
6
- */
7
- import classnames from 'classnames';
8
- /**
9
- * WordPress dependencies
10
- */
11
-
12
- import { forwardRef } from '@wordpress/element';
13
- import deprecated from '@wordpress/deprecated';
14
- /**
15
- * Internal dependencies
16
- */
17
-
18
- import ToolbarGroup from '../toolbar-group';
19
- import ToolbarContainer from './toolbar-container';
20
- /**
21
- * Renders a toolbar.
22
- *
23
- * To add controls, simply pass `ToolbarButton` components as children.
24
- *
25
- * @param {Object} props Component props.
26
- * @param {string} [props.className] Class to set on the container div.
27
- * @param {string} [props.label] ARIA label for toolbar container.
28
- * @param {Object} ref React Element ref.
29
- */
30
-
31
- function Toolbar(_ref, ref) {
32
- let {
33
- className,
34
- label,
35
- ...props
36
- } = _ref;
37
-
38
- if (!label) {
39
- deprecated('Using Toolbar without label prop', {
40
- since: '5.6',
41
- alternative: 'ToolbarGroup component',
42
- link: 'https://developer.wordpress.org/block-editor/components/toolbar/'
43
- });
44
- return createElement(ToolbarGroup, _extends({}, props, {
45
- className: className
46
- }));
47
- } // `ToolbarGroup` already uses components-toolbar for compatibility reasons.
48
-
49
-
50
- const finalClassName = classnames('components-accessible-toolbar', className);
51
- return createElement(ToolbarContainer, _extends({
52
- className: finalClassName,
53
- label: label,
54
- ref: ref
55
- }, props));
56
- }
57
-
58
- export default forwardRef(Toolbar);
1
+ export { default as Toolbar } from './toolbar';
2
+ export { default as ToolbarButton } from './toolbar-button';
3
+ export { default as ToolbarContext } from './toolbar-context';
4
+ export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
5
+ export { default as ToolbarGroup } from './toolbar-group';
6
+ export { default as ToolbarItem } from './toolbar-item';
59
7
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/toolbar/index.js"],"names":["classnames","forwardRef","deprecated","ToolbarGroup","ToolbarContainer","Toolbar","ref","className","label","props","since","alternative","link","finalClassName"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,gBAAP,MAA6B,qBAA7B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,OAAT,OAAkDC,GAAlD,EAAwD;AAAA,MAAtC;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,KAAb;AAAoB,OAAGC;AAAvB,GAAsC;;AACvD,MAAK,CAAED,KAAP,EAAe;AACdN,IAAAA,UAAU,CAAE,kCAAF,EAAsC;AAC/CQ,MAAAA,KAAK,EAAE,KADwC;AAE/CC,MAAAA,WAAW,EAAE,wBAFkC;AAG/CC,MAAAA,IAAI,EAAE;AAHyC,KAAtC,CAAV;AAKA,WAAO,cAAC,YAAD,eAAmBH,KAAnB;AAA2B,MAAA,SAAS,EAAGF;AAAvC,OAAP;AACA,GARsD,CASvD;;;AACA,QAAMM,cAAc,GAAGb,UAAU,CAChC,+BADgC,EAEhCO,SAFgC,CAAjC;AAIA,SACC,cAAC,gBAAD;AACC,IAAA,SAAS,EAAGM,cADb;AAEC,IAAA,KAAK,EAAGL,KAFT;AAGC,IAAA,GAAG,EAAGF;AAHP,KAIMG,KAJN,EADD;AAQA;;AAED,eAAeR,UAAU,CAAEI,OAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ToolbarGroup from '../toolbar-group';\nimport ToolbarContainer from './toolbar-container';\n\n/**\n * Renders a toolbar.\n *\n * To add controls, simply pass `ToolbarButton` components as children.\n *\n * @param {Object} props Component props.\n * @param {string} [props.className] Class to set on the container div.\n * @param {string} [props.label] ARIA label for toolbar container.\n * @param {Object} ref React Element ref.\n */\nfunction Toolbar( { className, label, ...props }, ref ) {\n\tif ( ! label ) {\n\t\tdeprecated( 'Using Toolbar without label prop', {\n\t\t\tsince: '5.6',\n\t\t\talternative: 'ToolbarGroup component',\n\t\t\tlink: 'https://developer.wordpress.org/block-editor/components/toolbar/',\n\t\t} );\n\t\treturn <ToolbarGroup { ...props } className={ className } />;\n\t}\n\t// `ToolbarGroup` already uses components-toolbar for compatibility reasons.\n\tconst finalClassName = classnames(\n\t\t'components-accessible-toolbar',\n\t\tclassName\n\t);\n\treturn (\n\t\t<ToolbarContainer\n\t\t\tclassName={ finalClassName }\n\t\t\tlabel={ label }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( Toolbar );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/toolbar/index.js"],"names":["default","Toolbar","ToolbarButton","ToolbarContext","ToolbarDropdownMenu","ToolbarGroup","ToolbarItem"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,kBAAzC;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,mBAA1C;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,yBAA/C;AACA,SAASJ,OAAO,IAAIK,YAApB,QAAwC,iBAAxC;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,gBAAvC","sourcesContent":["export { default as Toolbar } from './toolbar';\nexport { default as ToolbarButton } from './toolbar-button';\nexport { default as ToolbarContext } from './toolbar-context';\nexport { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';\nexport { default as ToolbarGroup } from './toolbar-group';\nexport { default as ToolbarItem } from './toolbar-item';\n"]}
@@ -0,0 +1,59 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import { createElement } from "@wordpress/element";
3
+
4
+ /**
5
+ * External dependencies
6
+ */
7
+ import classnames from 'classnames';
8
+ /**
9
+ * WordPress dependencies
10
+ */
11
+
12
+ import { forwardRef } from '@wordpress/element';
13
+ import deprecated from '@wordpress/deprecated';
14
+ /**
15
+ * Internal dependencies
16
+ */
17
+
18
+ import ToolbarGroup from '../toolbar-group';
19
+ import ToolbarContainer from './toolbar-container';
20
+ /**
21
+ * Renders a toolbar.
22
+ *
23
+ * To add controls, simply pass `ToolbarButton` components as children.
24
+ *
25
+ * @param {Object} props Component props.
26
+ * @param {string} [props.className] Class to set on the container div.
27
+ * @param {string} [props.label] ARIA label for toolbar container.
28
+ * @param {Object} ref React Element ref.
29
+ */
30
+
31
+ function Toolbar(_ref, ref) {
32
+ let {
33
+ className,
34
+ label,
35
+ ...props
36
+ } = _ref;
37
+
38
+ if (!label) {
39
+ deprecated('Using Toolbar without label prop', {
40
+ since: '5.6',
41
+ alternative: 'ToolbarGroup component',
42
+ link: 'https://developer.wordpress.org/block-editor/components/toolbar/'
43
+ });
44
+ return createElement(ToolbarGroup, _extends({}, props, {
45
+ className: className
46
+ }));
47
+ } // `ToolbarGroup` already uses components-toolbar for compatibility reasons.
48
+
49
+
50
+ const finalClassName = classnames('components-accessible-toolbar', className);
51
+ return createElement(ToolbarContainer, _extends({
52
+ className: finalClassName,
53
+ label: label,
54
+ ref: ref
55
+ }, props));
56
+ }
57
+
58
+ export default forwardRef(Toolbar);
59
+ //# sourceMappingURL=index.js.map