@wordpress/components 23.9.0 → 25.0.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 (423) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/CONTRIBUTING.md +75 -1
  3. package/README.md +1 -3
  4. package/build/autocomplete/autocompleter-ui.js +0 -2
  5. package/build/autocomplete/autocompleter-ui.js.map +1 -1
  6. package/build/autocomplete/index.js +2 -0
  7. package/build/autocomplete/index.js.map +1 -1
  8. package/build/button/index.js +2 -0
  9. package/build/button/index.js.map +1 -1
  10. package/build/card/card-media/component.js +2 -1
  11. package/build/card/card-media/component.js.map +1 -1
  12. package/build/color-picker/styles.js +8 -8
  13. package/build/color-picker/styles.js.map +1 -1
  14. package/build/combobox-control/index.js +7 -5
  15. package/build/combobox-control/index.js.map +1 -1
  16. package/build/combobox-control/styles.js +3 -3
  17. package/build/combobox-control/styles.js.map +1 -1
  18. package/build/date-time/date-time/index.js +3 -84
  19. package/build/date-time/date-time/index.js.map +1 -1
  20. package/build/date-time/date-time/styles.js +4 -19
  21. package/build/date-time/date-time/styles.js.map +1 -1
  22. package/build/dimension-control/index.js +1 -1
  23. package/build/dimension-control/index.js.map +1 -1
  24. package/build/draggable/index.js +2 -7
  25. package/build/draggable/index.js.map +1 -1
  26. package/build/dropdown-menu/index.js +87 -11
  27. package/build/dropdown-menu/index.js.map +1 -1
  28. package/build/dropdown-menu/types.js +6 -0
  29. package/build/dropdown-menu/types.js.map +1 -0
  30. package/build/dropdown-menu-v2/index.js +195 -0
  31. package/build/dropdown-menu-v2/index.js.map +1 -0
  32. package/build/dropdown-menu-v2/styles.js +176 -0
  33. package/build/dropdown-menu-v2/styles.js.map +1 -0
  34. package/build/dropdown-menu-v2/types.js +6 -0
  35. package/build/dropdown-menu-v2/types.js.map +1 -0
  36. package/build/form-token-field/index.js +5 -3
  37. package/build/form-token-field/index.js.map +1 -1
  38. package/build/form-token-field/styles.js +3 -3
  39. package/build/form-token-field/styles.js.map +1 -1
  40. package/build/index.native.js +0 -9
  41. package/build/index.native.js.map +1 -1
  42. package/build/input-control/styles/input-control-styles.js +30 -23
  43. package/build/input-control/styles/input-control-styles.js.map +1 -1
  44. package/build/mobile/bottom-sheet/cell.native.js +16 -8
  45. package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
  46. package/build/mobile/bottom-sheet/range-cell.native.js +3 -2
  47. package/build/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  48. package/build/mobile/bottom-sheet/stepper-cell/index.native.js +4 -2
  49. package/build/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  50. package/build/mobile/bottom-sheet/switch-cell.native.js +8 -2
  51. package/build/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  52. package/build/mobile/bottom-sheet-select-control/index.native.js +4 -2
  53. package/build/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  54. package/build/mobile/bottom-sheet-text-control/index.native.js +4 -2
  55. package/build/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
  56. package/build/mobile/global-styles-context/index.native.js +13 -1
  57. package/build/mobile/global-styles-context/index.native.js.map +1 -1
  58. package/build/mobile/link-picker/link-picker-results.native.js +3 -1
  59. package/build/mobile/link-picker/link-picker-results.native.js.map +1 -1
  60. package/build/navigable-container/container.js +39 -19
  61. package/build/navigable-container/container.js.map +1 -1
  62. package/build/navigable-container/index.js.map +1 -1
  63. package/build/navigable-container/menu.js +37 -5
  64. package/build/navigable-container/menu.js.map +1 -1
  65. package/build/navigable-container/tabbable.js +45 -4
  66. package/build/navigable-container/tabbable.js.map +1 -1
  67. package/build/navigable-container/types.js +6 -0
  68. package/build/navigable-container/types.js.map +1 -0
  69. package/build/palette-edit/index.js +34 -12
  70. package/build/palette-edit/index.js.map +1 -1
  71. package/build/private-apis.js +13 -1
  72. package/build/private-apis.js.map +1 -1
  73. package/build/range-control/index.native.js +5 -2
  74. package/build/range-control/index.native.js.map +1 -1
  75. package/build/sandbox/index.native.js +6 -2
  76. package/build/sandbox/index.native.js.map +1 -1
  77. package/build/slot-fill/bubbles-virtually/fill.js +2 -1
  78. package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
  79. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js +45 -35
  80. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  81. package/build/slot-fill/bubbles-virtually/use-slot.js +11 -26
  82. package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  83. package/build/slot-fill/fill.js +7 -31
  84. package/build/slot-fill/fill.js.map +1 -1
  85. package/build/slot-fill/index.js.map +1 -1
  86. package/build/slot-fill/provider.js +0 -6
  87. package/build/slot-fill/provider.js.map +1 -1
  88. package/build/slot-fill/slot.js +0 -5
  89. package/build/slot-fill/slot.js.map +1 -1
  90. package/build/snackbar/list.js +0 -2
  91. package/build/snackbar/list.js.map +1 -1
  92. package/build/tab-panel/index.js.map +1 -1
  93. package/build/theme/color-algorithms.js +1 -1
  94. package/build/theme/color-algorithms.js.map +1 -1
  95. package/build/toggle-group-control/toggle-group-control/styles.js +7 -7
  96. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  97. package/build/toolbar/toolbar-button/index.js +1 -2
  98. package/build/toolbar/toolbar-button/index.js.map +1 -1
  99. package/build/toolbar/toolbar-item/index.js +4 -2
  100. package/build/toolbar/toolbar-item/index.js.map +1 -1
  101. package/build/utils/colors-values.js +3 -3
  102. package/build/utils/colors-values.js.map +1 -1
  103. package/build/utils/use-deprecated-props.js +35 -0
  104. package/build/utils/use-deprecated-props.js.map +1 -0
  105. package/build-module/autocomplete/autocompleter-ui.js +1 -3
  106. package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
  107. package/build-module/autocomplete/index.js +3 -3
  108. package/build-module/autocomplete/index.js.map +1 -1
  109. package/build-module/button/index.js +2 -0
  110. package/build-module/button/index.js.map +1 -1
  111. package/build-module/card/card-media/component.js +2 -1
  112. package/build-module/card/card-media/component.js.map +1 -1
  113. package/build-module/color-picker/styles.js +8 -8
  114. package/build-module/color-picker/styles.js.map +1 -1
  115. package/build-module/combobox-control/index.js +6 -5
  116. package/build-module/combobox-control/index.js.map +1 -1
  117. package/build-module/combobox-control/styles.js +3 -3
  118. package/build-module/combobox-control/styles.js.map +1 -1
  119. package/build-module/date-time/date-time/index.js +6 -81
  120. package/build-module/date-time/date-time/index.js.map +1 -1
  121. package/build-module/date-time/date-time/styles.js +3 -17
  122. package/build-module/date-time/date-time/styles.js.map +1 -1
  123. package/build-module/dimension-control/index.js +1 -1
  124. package/build-module/dimension-control/index.js.map +1 -1
  125. package/build-module/draggable/index.js +2 -7
  126. package/build-module/draggable/index.js.map +1 -1
  127. package/build-module/dropdown-menu/index.js +87 -10
  128. package/build-module/dropdown-menu/index.js.map +1 -1
  129. package/build-module/dropdown-menu/types.js +2 -0
  130. package/build-module/dropdown-menu/types.js.map +1 -0
  131. package/build-module/dropdown-menu-v2/index.js +149 -0
  132. package/build-module/dropdown-menu-v2/index.js.map +1 -0
  133. package/build-module/dropdown-menu-v2/styles.js +153 -0
  134. package/build-module/dropdown-menu-v2/styles.js.map +1 -0
  135. package/build-module/dropdown-menu-v2/types.js +2 -0
  136. package/build-module/dropdown-menu-v2/types.js.map +1 -0
  137. package/build-module/form-token-field/index.js +4 -3
  138. package/build-module/form-token-field/index.js.map +1 -1
  139. package/build-module/form-token-field/styles.js +3 -3
  140. package/build-module/form-token-field/styles.js.map +1 -1
  141. package/build-module/index.native.js +0 -1
  142. package/build-module/index.native.js.map +1 -1
  143. package/build-module/input-control/styles/input-control-styles.js +30 -23
  144. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  145. package/build-module/mobile/bottom-sheet/cell.native.js +16 -8
  146. package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
  147. package/build-module/mobile/bottom-sheet/range-cell.native.js +3 -2
  148. package/build-module/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  149. package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js +4 -2
  150. package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  151. package/build-module/mobile/bottom-sheet/switch-cell.native.js +7 -2
  152. package/build-module/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  153. package/build-module/mobile/bottom-sheet-select-control/index.native.js +4 -2
  154. package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  155. package/build-module/mobile/bottom-sheet-text-control/index.native.js +4 -2
  156. package/build-module/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
  157. package/build-module/mobile/global-styles-context/index.native.js +13 -1
  158. package/build-module/mobile/global-styles-context/index.native.js.map +1 -1
  159. package/build-module/mobile/link-picker/link-picker-results.native.js +3 -1
  160. package/build-module/mobile/link-picker/link-picker-results.native.js.map +1 -1
  161. package/build-module/navigable-container/container.js +43 -19
  162. package/build-module/navigable-container/container.js.map +1 -1
  163. package/build-module/navigable-container/index.js +0 -2
  164. package/build-module/navigable-container/index.js.map +1 -1
  165. package/build-module/navigable-container/menu.js +36 -4
  166. package/build-module/navigable-container/menu.js.map +1 -1
  167. package/build-module/navigable-container/tabbable.js +44 -3
  168. package/build-module/navigable-container/tabbable.js.map +1 -1
  169. package/build-module/navigable-container/types.js +2 -0
  170. package/build-module/navigable-container/types.js.map +1 -0
  171. package/build-module/palette-edit/index.js +34 -13
  172. package/build-module/palette-edit/index.js.map +1 -1
  173. package/build-module/private-apis.js +12 -1
  174. package/build-module/private-apis.js.map +1 -1
  175. package/build-module/range-control/index.native.js +5 -2
  176. package/build-module/range-control/index.native.js.map +1 -1
  177. package/build-module/sandbox/index.native.js +6 -2
  178. package/build-module/sandbox/index.native.js.map +1 -1
  179. package/build-module/slot-fill/bubbles-virtually/fill.js +2 -1
  180. package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
  181. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js +46 -36
  182. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  183. package/build-module/slot-fill/bubbles-virtually/use-slot.js +12 -27
  184. package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  185. package/build-module/slot-fill/fill.js +7 -31
  186. package/build-module/slot-fill/fill.js.map +1 -1
  187. package/build-module/slot-fill/index.js +1 -2
  188. package/build-module/slot-fill/index.js.map +1 -1
  189. package/build-module/slot-fill/provider.js +0 -6
  190. package/build-module/slot-fill/provider.js.map +1 -1
  191. package/build-module/slot-fill/slot.js +0 -5
  192. package/build-module/slot-fill/slot.js.map +1 -1
  193. package/build-module/snackbar/list.js +0 -2
  194. package/build-module/snackbar/list.js.map +1 -1
  195. package/build-module/tab-panel/index.js.map +1 -1
  196. package/build-module/theme/color-algorithms.js +1 -1
  197. package/build-module/theme/color-algorithms.js.map +1 -1
  198. package/build-module/toggle-group-control/toggle-group-control/styles.js +7 -7
  199. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  200. package/build-module/toolbar/toolbar-button/index.js +1 -2
  201. package/build-module/toolbar/toolbar-button/index.js.map +1 -1
  202. package/build-module/toolbar/toolbar-item/index.js +5 -2
  203. package/build-module/toolbar/toolbar-item/index.js.map +1 -1
  204. package/build-module/utils/colors-values.js +3 -3
  205. package/build-module/utils/colors-values.js.map +1 -1
  206. package/build-module/utils/use-deprecated-props.js +25 -0
  207. package/build-module/utils/use-deprecated-props.js.map +1 -0
  208. package/build-style/style-rtl.css +67 -67
  209. package/build-style/style.css +67 -67
  210. package/build-types/autocomplete/autocompleter-ui.d.ts.map +1 -1
  211. package/build-types/autocomplete/index.d.ts.map +1 -1
  212. package/build-types/autocomplete/types.d.ts +2 -18
  213. package/build-types/autocomplete/types.d.ts.map +1 -1
  214. package/build-types/button/deprecated.d.ts +6 -0
  215. package/build-types/button/deprecated.d.ts.map +1 -1
  216. package/build-types/button/index.d.ts.map +1 -1
  217. package/build-types/button/types.d.ts +7 -0
  218. package/build-types/button/types.d.ts.map +1 -1
  219. package/build-types/card/card-media/component.d.ts +2 -1
  220. package/build-types/card/card-media/component.d.ts.map +1 -1
  221. package/build-types/card/stories/index.d.ts +21 -1
  222. package/build-types/card/stories/index.d.ts.map +1 -1
  223. package/build-types/color-picker/styles.d.ts.map +1 -1
  224. package/build-types/combobox-control/index.d.ts +1 -1
  225. package/build-types/combobox-control/index.d.ts.map +1 -1
  226. package/build-types/combobox-control/stories/index.d.ts.map +1 -1
  227. package/build-types/combobox-control/styles.d.ts +1 -1
  228. package/build-types/combobox-control/types.d.ts +8 -1
  229. package/build-types/combobox-control/types.d.ts.map +1 -1
  230. package/build-types/date-time/date-time/index.d.ts +3 -4
  231. package/build-types/date-time/date-time/index.d.ts.map +1 -1
  232. package/build-types/date-time/date-time/styles.d.ts +0 -4
  233. package/build-types/date-time/date-time/styles.d.ts.map +1 -1
  234. package/build-types/date-time/stories/date-time.d.ts.map +1 -1
  235. package/build-types/date-time/types.d.ts +0 -14
  236. package/build-types/date-time/types.d.ts.map +1 -1
  237. package/build-types/dimension-control/index.d.ts +1 -1
  238. package/build-types/draggable/index.d.ts.map +1 -1
  239. package/build-types/dropdown-menu/index.d.ts +83 -1
  240. package/build-types/dropdown-menu/index.d.ts.map +1 -1
  241. package/build-types/dropdown-menu/stories/index.d.ts +13 -0
  242. package/build-types/dropdown-menu/stories/index.d.ts.map +1 -0
  243. package/build-types/dropdown-menu/test/index.d.ts +2 -0
  244. package/build-types/dropdown-menu/test/index.d.ts.map +1 -0
  245. package/build-types/dropdown-menu/types.d.ts +134 -0
  246. package/build-types/dropdown-menu/types.d.ts.map +1 -0
  247. package/build-types/dropdown-menu-v2/index.d.ts +17 -0
  248. package/build-types/dropdown-menu-v2/index.d.ts.map +1 -0
  249. package/build-types/dropdown-menu-v2/stories/index.d.ts +13 -0
  250. package/build-types/dropdown-menu-v2/stories/index.d.ts.map +1 -0
  251. package/build-types/dropdown-menu-v2/styles.d.ts +41 -0
  252. package/build-types/dropdown-menu-v2/styles.d.ts.map +1 -0
  253. package/build-types/dropdown-menu-v2/test/index.d.ts +2 -0
  254. package/build-types/dropdown-menu-v2/test/index.d.ts.map +1 -0
  255. package/build-types/dropdown-menu-v2/types.d.ts +242 -0
  256. package/build-types/dropdown-menu-v2/types.d.ts.map +1 -0
  257. package/build-types/form-token-field/index.d.ts.map +1 -1
  258. package/build-types/form-token-field/styles.d.ts +1 -1
  259. package/build-types/form-token-field/types.d.ts +8 -1
  260. package/build-types/form-token-field/types.d.ts.map +1 -1
  261. package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
  262. package/build-types/navigable-container/container.d.ts +20 -1
  263. package/build-types/navigable-container/container.d.ts.map +1 -1
  264. package/build-types/navigable-container/index.d.ts +5 -2
  265. package/build-types/navigable-container/index.d.ts.map +1 -1
  266. package/build-types/navigable-container/menu.d.ts +45 -11
  267. package/build-types/navigable-container/menu.d.ts.map +1 -1
  268. package/build-types/navigable-container/stories/navigable-menu.d.ts +12 -0
  269. package/build-types/navigable-container/stories/navigable-menu.d.ts.map +1 -0
  270. package/build-types/navigable-container/stories/tabbable-container.d.ts +12 -0
  271. package/build-types/navigable-container/stories/tabbable-container.d.ts.map +1 -0
  272. package/build-types/navigable-container/tabbable.d.ts +52 -9
  273. package/build-types/navigable-container/tabbable.d.ts.map +1 -1
  274. package/build-types/navigable-container/test/navigable-menu.d.ts +2 -0
  275. package/build-types/navigable-container/test/navigable-menu.d.ts.map +1 -0
  276. package/build-types/navigable-container/test/tababble-container.d.ts +2 -0
  277. package/build-types/navigable-container/test/tababble-container.d.ts.map +1 -0
  278. package/build-types/navigable-container/types.d.ts +61 -0
  279. package/build-types/navigable-container/types.d.ts.map +1 -0
  280. package/build-types/navigator/navigator-back-button/component.d.ts +1 -0
  281. package/build-types/navigator/navigator-back-button/component.d.ts.map +1 -1
  282. package/build-types/navigator/navigator-back-button/hook.d.ts +1 -0
  283. package/build-types/navigator/navigator-back-button/hook.d.ts.map +1 -1
  284. package/build-types/navigator/navigator-button/component.d.ts +1 -0
  285. package/build-types/navigator/navigator-button/component.d.ts.map +1 -1
  286. package/build-types/navigator/navigator-button/hook.d.ts +1 -0
  287. package/build-types/navigator/navigator-button/hook.d.ts.map +1 -1
  288. package/build-types/navigator/navigator-to-parent-button/component.d.ts +1 -0
  289. package/build-types/navigator/navigator-to-parent-button/component.d.ts.map +1 -1
  290. package/build-types/palette-edit/index.d.ts +1 -1
  291. package/build-types/palette-edit/index.d.ts.map +1 -1
  292. package/build-types/palette-edit/stories/index.d.ts.map +1 -1
  293. package/build-types/palette-edit/types.d.ts +8 -0
  294. package/build-types/palette-edit/types.d.ts.map +1 -1
  295. package/build-types/private-apis.d.ts.map +1 -1
  296. package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
  297. package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map +1 -1
  298. package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
  299. package/build-types/slot-fill/fill.d.ts +4 -2
  300. package/build-types/slot-fill/fill.d.ts.map +1 -1
  301. package/build-types/slot-fill/index.d.ts +1 -2
  302. package/build-types/slot-fill/index.d.ts.map +1 -1
  303. package/build-types/slot-fill/provider.d.ts +0 -2
  304. package/build-types/slot-fill/provider.d.ts.map +1 -1
  305. package/build-types/slot-fill/slot.d.ts.map +1 -1
  306. package/build-types/snackbar/list.d.ts.map +1 -1
  307. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  308. package/build-types/toolbar/stories/index.d.ts.map +1 -1
  309. package/build-types/toolbar/toolbar-button/index.d.ts +6 -0
  310. package/build-types/toolbar/toolbar-button/index.d.ts.map +1 -1
  311. package/build-types/toolbar/toolbar-item/index.d.ts +6 -4
  312. package/build-types/toolbar/toolbar-item/index.d.ts.map +1 -1
  313. package/build-types/tree-grid/types.d.ts +7 -0
  314. package/build-types/tree-grid/types.d.ts.map +1 -1
  315. package/build-types/ui/context/get-styled-class-name-from-key.d.ts +1 -10
  316. package/build-types/ui/context/get-styled-class-name-from-key.d.ts.map +1 -1
  317. package/build-types/utils/use-deprecated-props.d.ts +9 -0
  318. package/build-types/utils/use-deprecated-props.d.ts.map +1 -0
  319. package/package.json +21 -20
  320. package/src/autocomplete/README.md +78 -52
  321. package/src/autocomplete/autocompleter-ui.tsx +0 -2
  322. package/src/autocomplete/index.tsx +1 -2
  323. package/src/autocomplete/types.ts +3 -19
  324. package/src/button/index.tsx +2 -0
  325. package/src/button/style.scss +18 -18
  326. package/src/button/types.ts +7 -0
  327. package/src/card/card-media/README.md +1 -1
  328. package/src/card/card-media/component.tsx +2 -1
  329. package/src/card/stories/index.tsx +47 -26
  330. package/src/checkbox-control/style.scss +1 -4
  331. package/src/color-picker/styles.ts +7 -2
  332. package/src/combobox-control/index.tsx +24 -18
  333. package/src/combobox-control/stories/index.tsx +0 -1
  334. package/src/combobox-control/styles.ts +4 -4
  335. package/src/combobox-control/types.ts +8 -1
  336. package/src/custom-gradient-picker/style.scss +2 -2
  337. package/src/date-time/README.md +0 -16
  338. package/src/date-time/date-time/index.tsx +17 -155
  339. package/src/date-time/date-time/styles.ts +0 -4
  340. package/src/date-time/stories/date-time.tsx +0 -4
  341. package/src/date-time/types.ts +0 -16
  342. package/src/dimension-control/index.tsx +1 -1
  343. package/src/draggable/index.tsx +1 -9
  344. package/src/dropdown-menu/README.md +12 -22
  345. package/src/dropdown-menu/{index.js → index.tsx} +111 -25
  346. package/src/dropdown-menu/stories/{index.js → index.tsx} +14 -22
  347. package/src/dropdown-menu/test/{index.js → index.tsx} +6 -5
  348. package/src/dropdown-menu/types.ts +143 -0
  349. package/src/dropdown-menu-v2/README.md +392 -0
  350. package/src/dropdown-menu-v2/index.tsx +241 -0
  351. package/src/dropdown-menu-v2/stories/index.tsx +193 -0
  352. package/src/dropdown-menu-v2/styles.ts +263 -0
  353. package/src/dropdown-menu-v2/test/index.tsx +816 -0
  354. package/src/dropdown-menu-v2/types.ts +250 -0
  355. package/src/form-toggle/style.scss +1 -5
  356. package/src/form-token-field/index.tsx +7 -3
  357. package/src/form-token-field/styles.ts +4 -4
  358. package/src/form-token-field/types.ts +8 -1
  359. package/src/index.native.js +0 -1
  360. package/src/input-control/styles/input-control-styles.tsx +7 -0
  361. package/src/mobile/bottom-sheet/cell.native.js +26 -5
  362. package/src/mobile/bottom-sheet/range-cell.native.js +2 -1
  363. package/src/mobile/bottom-sheet/stepper-cell/index.native.js +2 -0
  364. package/src/mobile/bottom-sheet/styles.native.scss +13 -1
  365. package/src/mobile/bottom-sheet/switch-cell.native.js +10 -2
  366. package/src/mobile/bottom-sheet-select-control/index.native.js +2 -0
  367. package/src/mobile/bottom-sheet-text-control/index.native.js +2 -0
  368. package/src/mobile/global-styles-context/index.native.js +12 -1
  369. package/src/mobile/link-picker/link-picker-results.native.js +3 -0
  370. package/src/modal/style.scss +1 -1
  371. package/src/navigable-container/README.md +24 -13
  372. package/src/navigable-container/{container.js → container.tsx} +57 -27
  373. package/src/navigable-container/{index.js → index.tsx} +0 -1
  374. package/src/navigable-container/menu.tsx +100 -0
  375. package/src/navigable-container/stories/{navigable-menu.js → navigable-menu.tsx} +15 -10
  376. package/src/navigable-container/stories/{tabbable-container.js → tabbable-container.tsx} +15 -6
  377. package/src/navigable-container/tabbable.tsx +92 -0
  378. package/src/navigable-container/test/{navigable-menu.js → navigable-menu.tsx} +3 -1
  379. package/src/navigable-container/test/{tababble-container.js → tababble-container.tsx} +53 -24
  380. package/src/navigable-container/types.ts +76 -0
  381. package/src/palette-edit/index.tsx +45 -7
  382. package/src/palette-edit/stories/index.tsx +4 -0
  383. package/src/palette-edit/types.ts +11 -0
  384. package/src/private-apis.ts +22 -0
  385. package/src/range-control/index.native.js +3 -0
  386. package/src/sandbox/index.native.js +4 -0
  387. package/src/search-control/style.scss +2 -0
  388. package/src/slot-fill/bubbles-virtually/fill.js +2 -1
  389. package/src/slot-fill/bubbles-virtually/slot-fill-provider.js +46 -60
  390. package/src/slot-fill/bubbles-virtually/use-slot.js +14 -41
  391. package/src/slot-fill/fill.js +4 -26
  392. package/src/slot-fill/index.js +1 -3
  393. package/src/slot-fill/provider.js +0 -6
  394. package/src/slot-fill/slot.js +0 -5
  395. package/src/snackbar/list.tsx +0 -1
  396. package/src/style.scss +6 -0
  397. package/src/tab-panel/index.tsx +1 -1
  398. package/src/theme/color-algorithms.ts +1 -1
  399. package/src/theme/stories/index.tsx +1 -1
  400. package/src/theme/test/color-algorithms.ts +2 -2
  401. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +10 -6
  402. package/src/toggle-group-control/toggle-group-control/styles.ts +6 -1
  403. package/src/toolbar/stories/index.tsx +25 -26
  404. package/src/toolbar/toolbar-button/index.tsx +10 -13
  405. package/src/toolbar/toolbar-item/{index.js → index.tsx} +12 -3
  406. package/src/tooltip/style.scss +2 -2
  407. package/src/tree-grid/README.md +18 -0
  408. package/src/tree-grid/types.ts +7 -0
  409. package/src/utils/colors-values.js +3 -3
  410. package/src/utils/theme-variables.scss +4 -4
  411. package/src/utils/use-deprecated-props.ts +29 -0
  412. package/tsconfig.json +1 -0
  413. package/tsconfig.tsbuildinfo +1 -1
  414. package/build/mobile/readable-content-view/index.native.js +0 -97
  415. package/build/mobile/readable-content-view/index.native.js.map +0 -1
  416. package/build-module/mobile/readable-content-view/index.native.js +0 -81
  417. package/build-module/mobile/readable-content-view/index.native.js.map +0 -1
  418. package/src/CONTRIBUTING.md +0 -78
  419. package/src/README.md +0 -20
  420. package/src/mobile/readable-content-view/index.native.js +0 -85
  421. package/src/mobile/readable-content-view/style.native.scss +0 -30
  422. package/src/navigable-container/menu.js +0 -62
  423. package/src/navigable-container/tabbable.js +0 -46
@@ -13,6 +13,8 @@ var _element = require("@wordpress/element");
13
13
 
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
 
16
+ var _classnames = _interopRequireDefault(require("classnames"));
17
+
16
18
  var _changeCase = require("change-case");
17
19
 
18
20
  var _i18n = require("@wordpress/i18n");
@@ -115,14 +117,19 @@ function ColorPickerPopover(_ref2) {
115
117
  isGradient,
116
118
  element,
117
119
  onChange,
120
+ popoverProps: receivedPopoverProps,
118
121
  onClose = () => {}
119
122
  } = _ref2;
120
- return (0, _element.createElement)(_popover.default, {
121
- placement: "left-start",
123
+ const popoverProps = (0, _element.useMemo)(() => ({
124
+ shift: true,
122
125
  offset: 20,
123
- className: "components-palette-edit__popover",
126
+ placement: 'left-start',
127
+ ...receivedPopoverProps,
128
+ className: (0, _classnames.default)('components-palette-edit__popover', receivedPopoverProps === null || receivedPopoverProps === void 0 ? void 0 : receivedPopoverProps.className)
129
+ }), [receivedPopoverProps]);
130
+ return (0, _element.createElement)(_popover.default, (0, _extends2.default)({}, popoverProps, {
124
131
  onClose: onClose
125
- }, !isGradient && (0, _element.createElement)(_colorPicker.ColorPicker, {
132
+ }), !isGradient && (0, _element.createElement)(_colorPicker.ColorPicker, {
126
133
  color: element.color,
127
134
  enableAlpha: true,
128
135
  onChange: newColor => {
@@ -153,15 +160,24 @@ function Option(_ref3) {
153
160
  onStartEditing,
154
161
  onRemove,
155
162
  onStopEditing,
163
+ popoverProps: receivedPopoverProps,
156
164
  slugPrefix,
157
165
  isGradient
158
166
  } = _ref3;
159
167
  const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onStopEditing);
160
- const value = isGradient ? element.gradient : element.color;
168
+ const value = isGradient ? element.gradient : element.color; // Use internal state instead of a ref to make sure that the component
169
+ // re-renders when the popover's anchor updates.
170
+
171
+ const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
172
+ const popoverProps = (0, _element.useMemo)(() => ({ ...receivedPopoverProps,
173
+ // Use the custom palette color item as the popover anchor.
174
+ anchor: popoverAnchor
175
+ }), [popoverAnchor, receivedPopoverProps]);
161
176
  return (0, _element.createElement)(_styles.PaletteItem, (0, _extends2.default)({
162
177
  className: isEditing ? 'is-selected' : undefined,
163
178
  as: "div",
164
- onClick: onStartEditing
179
+ onClick: onStartEditing,
180
+ ref: setPopoverAnchor
165
181
  }, isEditing ? { ...focusOutsideProps
166
182
  } : {
167
183
  style: {
@@ -189,7 +205,8 @@ function Option(_ref3) {
189
205
  }))), isEditing && (0, _element.createElement)(ColorPickerPopover, {
190
206
  isGradient: isGradient,
191
207
  onChange: onChange,
192
- element: element
208
+ element: element,
209
+ popoverProps: popoverProps
193
210
  }));
194
211
  }
195
212
 
@@ -211,7 +228,8 @@ function PaletteEditListView(_ref5) {
211
228
  setEditingElement,
212
229
  canOnlyChangeValues,
213
230
  slugPrefix,
214
- isGradient
231
+ isGradient,
232
+ popoverProps
215
233
  } = _ref5;
216
234
  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
217
235
  const elementsReference = (0, _element.useRef)();
@@ -271,7 +289,8 @@ function PaletteEditListView(_ref5) {
271
289
  setEditingElement(null);
272
290
  }
273
291
  },
274
- slugPrefix: slugPrefix
292
+ slugPrefix: slugPrefix,
293
+ popoverProps: popoverProps
275
294
  }))));
276
295
  }
277
296
 
@@ -307,7 +326,8 @@ function PaletteEdit(_ref6) {
307
326
  emptyMessage,
308
327
  canOnlyChangeValues,
309
328
  canReset,
310
- slugPrefix = ''
329
+ slugPrefix = '',
330
+ popoverProps
311
331
  } = _ref6;
312
332
  const isGradient = !!gradients;
313
333
  const elements = isGradient ? gradients : colors;
@@ -404,7 +424,8 @@ function PaletteEdit(_ref6) {
404
424
  editingElement: editingElement,
405
425
  setEditingElement: setEditingElement,
406
426
  slugPrefix: slugPrefix,
407
- isGradient: isGradient
427
+ isGradient: isGradient,
428
+ popoverProps: popoverProps
408
429
  }), !isEditing && editingElement !== null && (0, _element.createElement)(ColorPickerPopover, {
409
430
  isGradient: isGradient,
410
431
  onClose: () => setEditingElement(null),
@@ -418,7 +439,8 @@ function PaletteEdit(_ref6) {
418
439
  return currentElement;
419
440
  }));
420
441
  },
421
- element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1]
442
+ element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
443
+ popoverProps: popoverProps
422
444
  }), !isEditing && (isGradient ? (0, _element.createElement)(_gradientPicker.default, {
423
445
  __nextHasNoMargin: true,
424
446
  gradients: gradients,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/palette-edit/index.tsx"],"names":["DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","ColorPickerPopover","isGradient","element","onClose","color","newColor","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","undefined","style","cursor","background","name","nextName","lineSolid","isTemporaryElement","regex","test","DEFAULT_GRADIENT","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","newElements","filter","length","debounceOnChange","map","index","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","plus","tempOptionName","moreVertical","isSmall"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect, useCallback } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A unique name for a palette item.\n */\nexport function getNameForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction ColorPickerPopover< T extends Color | Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"left-start\"\n\t\t\toffset={ 20 }\n\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color | Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement(\n\tslugPrefix: string,\n\t{ slug, color, gradient }: Color | Gradient\n) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView< T extends Color | Gradient >( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current?.some( ( element ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n *\n * return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber | null | undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/palette-edit/index.tsx"],"names":["DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","shift","offset","placement","className","color","newColor","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","popoverAnchor","setPopoverAnchor","anchor","undefined","style","cursor","background","name","nextName","lineSolid","isTemporaryElement","regex","test","DEFAULT_GRADIENT","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","newElements","filter","length","debounceOnChange","map","index","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","newEditingElementIndex","selectedElement","key","plus","tempOptionName","moreVertical","isSmall"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A unique name for a palette item.\n */\nexport function getNameForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction ColorPickerPopover< T extends Color | Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color | Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\tref={ setPopoverAnchor }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement(\n\tslugPrefix: string,\n\t{ slug, color, gradient }: Color | Gradient\n) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView< T extends Color | Gradient >( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current?.some( ( element ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n *\n * return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber | null | undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"]}
@@ -15,6 +15,8 @@ var _utils = require("./popover/utils");
15
15
 
16
16
  var _slotFill = require("./slot-fill");
17
17
 
18
+ var _dropdownMenuV = require("./dropdown-menu-v2");
19
+
18
20
  /**
19
21
  * WordPress dependencies
20
22
  */
@@ -33,6 +35,16 @@ exports.privateApis = privateApis;
33
35
  lock(privateApis, {
34
36
  CustomSelectControl: _customSelectControl.default,
35
37
  __experimentalPopoverLegacyPositionToPlacement: _utils.positionToPlacement,
36
- createPrivateSlotFill: _slotFill.createPrivateSlotFill
38
+ createPrivateSlotFill: _slotFill.createPrivateSlotFill,
39
+ DropdownMenuV2: _dropdownMenuV.DropdownMenu,
40
+ DropdownMenuCheckboxItemV2: _dropdownMenuV.DropdownMenuCheckboxItem,
41
+ DropdownMenuGroupV2: _dropdownMenuV.DropdownMenuGroup,
42
+ DropdownMenuItemV2: _dropdownMenuV.DropdownMenuItem,
43
+ DropdownMenuLabelV2: _dropdownMenuV.DropdownMenuLabel,
44
+ DropdownMenuRadioGroupV2: _dropdownMenuV.DropdownMenuRadioGroup,
45
+ DropdownMenuRadioItemV2: _dropdownMenuV.DropdownMenuRadioItem,
46
+ DropdownMenuSeparatorV2: _dropdownMenuV.DropdownMenuSeparator,
47
+ DropdownSubMenuV2: _dropdownMenuV.DropdownSubMenu,
48
+ DropdownSubMenuTriggerV2: _dropdownMenuV.DropdownSubMenuTrigger
37
49
  });
38
50
  //# sourceMappingURL=private-apis.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/private-apis.ts"],"names":["lock","unlock","privateApis","CustomSelectControl","__experimentalPopoverLegacyPositionToPlacement","createPrivateSlotFill"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,uBAFD,CADM;;;AAMA,MAAMC,WAAW,GAAG,EAApB;;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBC,EAAAA,mBAAmB,EAAnBA,4BADkB;AAElBC,EAAAA,8CAA8C,EAA9CA,0BAFkB;AAGlBC,EAAAA,qBAAqB,EAArBA;AAHkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\n/**\n * Internal dependencies\n */\nimport { default as CustomSelectControl } from './custom-select-control';\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { createPrivateSlotFill } from './slot-fill';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/components'\n\t);\n\nexport const privateApis = {};\nlock( privateApis, {\n\tCustomSelectControl,\n\t__experimentalPopoverLegacyPositionToPlacement,\n\tcreatePrivateSlotFill,\n} );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/private-apis.ts"],"names":["lock","unlock","privateApis","CustomSelectControl","__experimentalPopoverLegacyPositionToPlacement","createPrivateSlotFill","DropdownMenuV2","DropdownMenuCheckboxItemV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownMenuLabelV2","DropdownMenuRadioGroupV2","DropdownMenuRadioItemV2","DropdownMenuSeparatorV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAiBO,MAAM;AAAEA,EAAAA,IAAF;AAAQC,EAAAA;AAAR,IACZ,mEACC,8GADD,EAEC,uBAFD,CADM;;;AAMA,MAAMC,WAAW,GAAG,EAApB;;AACPF,IAAI,CAAEE,WAAF,EAAe;AAClBC,EAAAA,mBAAmB,EAAnBA,4BADkB;AAElBC,EAAAA,8CAA8C,EAA9CA,0BAFkB;AAGlBC,EAAAA,qBAAqB,EAArBA,+BAHkB;AAIlBC,EAAAA,cAAc,EAAdA,2BAJkB;AAKlBC,EAAAA,0BAA0B,EAA1BA,uCALkB;AAMlBC,EAAAA,mBAAmB,EAAnBA,gCANkB;AAOlBC,EAAAA,kBAAkB,EAAlBA,+BAPkB;AAQlBC,EAAAA,mBAAmB,EAAnBA,gCARkB;AASlBC,EAAAA,wBAAwB,EAAxBA,qCATkB;AAUlBC,EAAAA,uBAAuB,EAAvBA,oCAVkB;AAWlBC,EAAAA,uBAAuB,EAAvBA,oCAXkB;AAYlBC,EAAAA,iBAAiB,EAAjBA,8BAZkB;AAalBC,EAAAA,wBAAwB,EAAxBA;AAbkB,CAAf,CAAJ","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\n/**\n * Internal dependencies\n */\nimport { default as CustomSelectControl } from './custom-select-control';\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { createPrivateSlotFill } from './slot-fill';\nimport {\n\tDropdownMenu as DropdownMenuV2,\n\tDropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,\n\tDropdownMenuGroup as DropdownMenuGroupV2,\n\tDropdownMenuItem as DropdownMenuItemV2,\n\tDropdownMenuLabel as DropdownMenuLabelV2,\n\tDropdownMenuRadioGroup as DropdownMenuRadioGroupV2,\n\tDropdownMenuRadioItem as DropdownMenuRadioItemV2,\n\tDropdownMenuSeparator as DropdownMenuSeparatorV2,\n\tDropdownSubMenu as DropdownSubMenuV2,\n\tDropdownSubMenuTrigger as DropdownSubMenuTriggerV2,\n} from './dropdown-menu-v2';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/components'\n\t);\n\nexport const privateApis = {};\nlock( privateApis, {\n\tCustomSelectControl,\n\t__experimentalPopoverLegacyPositionToPlacement,\n\tcreatePrivateSlotFill,\n\tDropdownMenuV2,\n\tDropdownMenuCheckboxItemV2,\n\tDropdownMenuGroupV2,\n\tDropdownMenuItemV2,\n\tDropdownMenuLabelV2,\n\tDropdownMenuRadioGroupV2,\n\tDropdownMenuRadioItemV2,\n\tDropdownMenuSeparatorV2,\n\tDropdownSubMenuV2,\n\tDropdownSubMenuTriggerV2,\n} );\n"]}
@@ -39,6 +39,7 @@ const RangeControl = (0, _element.memo)(_ref => {
39
39
  max,
40
40
  type,
41
41
  separatorType,
42
+ disabled,
42
43
  ...props
43
44
  } = _ref;
44
45
 
@@ -49,7 +50,8 @@ const RangeControl = (0, _element.memo)(_ref => {
49
50
  min: min,
50
51
  onChange: onChange,
51
52
  separatorType: separatorType,
52
- value: value
53
+ value: value,
54
+ disabled: disabled
53
55
  });
54
56
  }
55
57
 
@@ -70,7 +72,8 @@ const RangeControl = (0, _element.memo)(_ref => {
70
72
  afterIcon: afterIcon,
71
73
  allowReset: allowReset,
72
74
  defaultValue: initialSliderValue,
73
- separatorType: separatorType
75
+ separatorType: separatorType,
76
+ disabled: disabled
74
77
  }, props));
75
78
  });
76
79
  var _default = RangeControl;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/range-control/index.native.js"],"names":["RangeControl","className","currentInput","label","value","instanceId","onChange","beforeIcon","afterIcon","help","allowReset","initialPosition","min","max","type","separatorType","props","id","currentInputValue","initialSliderValue","isFinite","undefined"],"mappings":";;;;;;;;;AAGA;;;;AAIA;;AACA;;AARA;AACA;AACA;;AAEA;AACA;AACA;AAIA,MAAMA,YAAY,GAAG,mBACpB,QAiBO;AAAA,MAjBL;AACDC,IAAAA,SADC;AAEDC,IAAAA,YAFC;AAGDC,IAAAA,KAHC;AAIDC,IAAAA,KAJC;AAKDC,IAAAA,UALC;AAMDC,IAAAA,QANC;AAODC,IAAAA,UAPC;AAQDC,IAAAA,SARC;AASDC,IAAAA,IATC;AAUDC,IAAAA,UAVC;AAWDC,IAAAA,eAXC;AAYDC,IAAAA,GAZC;AAaDC,IAAAA,GAbC;AAcDC,IAAAA,IAdC;AAeDC,IAAAA,aAfC;AAgBD,OAAGC;AAhBF,GAiBK;;AACN,MAAKF,IAAI,KAAK,SAAd,EAA0B;AACzB,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAGX,KADT;AAEC,MAAA,GAAG,EAAGU,GAFP;AAGC,MAAA,GAAG,EAAGD,GAHP;AAIC,MAAA,QAAQ,EAAGN,QAJZ;AAKC,MAAA,aAAa,EAAGS,aALjB;AAMC,MAAA,KAAK,EAAGX;AANT,MADD;AAUA;;AACD,QAAMa,EAAE,GAAI,2BAA2BZ,UAAY,EAAnD;AACA,QAAMa,iBAAiB,GAAGhB,YAAY,KAAK,IAAjB,GAAwBE,KAAxB,GAAgCF,YAA1D;AACA,QAAMiB,kBAAkB,GAAGC,QAAQ,CAAEF,iBAAF,CAAR,GACxBA,iBADwB,GAExBP,eAFH;AAIA,SACC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAGR,KADT;AAEC,IAAA,EAAE,EAAGc,EAFN;AAGC,IAAA,IAAI,EAAGR,IAHR;AAIC,IAAA,SAAS,EAAGR,SAJb;AAKC,IAAA,QAAQ,EAAGK,QALZ;AAMC,wBAAmB,CAAC,CAAEG,IAAH,GAAW,GAAGQ,EAAI,QAAlB,GAA4BI,SANhD;AAOC,IAAA,YAAY,EAAGT,GAPhB;AAQC,IAAA,YAAY,EAAGC,GARhB;AASC,IAAA,KAAK,EAAGT,KATT;AAUC,IAAA,UAAU,EAAGG,UAVd;AAWC,IAAA,SAAS,EAAGC,SAXb;AAYC,IAAA,UAAU,EAAGE,UAZd;AAaC,IAAA,YAAY,EAAGS,kBAbhB;AAcC,IAAA,aAAa,EAAGJ;AAdjB,KAeMC,KAfN,EADD;AAmBA,CAxDmB,CAArB;eA2DehB,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\n\nconst RangeControl = memo(\n\t( {\n\t\tclassName,\n\t\tcurrentInput,\n\t\tlabel,\n\t\tvalue,\n\t\tinstanceId,\n\t\tonChange,\n\t\tbeforeIcon,\n\t\tafterIcon,\n\t\thelp,\n\t\tallowReset,\n\t\tinitialPosition,\n\t\tmin,\n\t\tmax,\n\t\ttype,\n\t\tseparatorType,\n\t\t...props\n\t} ) => {\n\t\tif ( type === 'stepper' ) {\n\t\t\treturn (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t\tconst id = `inspector-range-control-${ instanceId }`;\n\t\tconst currentInputValue = currentInput === null ? value : currentInput;\n\t\tconst initialSliderValue = isFinite( currentInputValue )\n\t\t\t? currentInputValue\n\t\t\t: initialPosition;\n\n\t\treturn (\n\t\t\t<RangeCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ className }\n\t\t\t\tonChange={ onChange }\n\t\t\t\taria-describedby={ !! help ? `${ id }__help` : undefined }\n\t\t\t\tminimumValue={ min }\n\t\t\t\tmaximumValue={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tbeforeIcon={ beforeIcon }\n\t\t\t\tafterIcon={ afterIcon }\n\t\t\t\tallowReset={ allowReset }\n\t\t\t\tdefaultValue={ initialSliderValue }\n\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default RangeControl;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/range-control/index.native.js"],"names":["RangeControl","className","currentInput","label","value","instanceId","onChange","beforeIcon","afterIcon","help","allowReset","initialPosition","min","max","type","separatorType","disabled","props","id","currentInputValue","initialSliderValue","isFinite","undefined"],"mappings":";;;;;;;;;AAGA;;;;AAIA;;AACA;;AARA;AACA;AACA;;AAEA;AACA;AACA;AAIA,MAAMA,YAAY,GAAG,mBACpB,QAkBO;AAAA,MAlBL;AACDC,IAAAA,SADC;AAEDC,IAAAA,YAFC;AAGDC,IAAAA,KAHC;AAIDC,IAAAA,KAJC;AAKDC,IAAAA,UALC;AAMDC,IAAAA,QANC;AAODC,IAAAA,UAPC;AAQDC,IAAAA,SARC;AASDC,IAAAA,IATC;AAUDC,IAAAA,UAVC;AAWDC,IAAAA,eAXC;AAYDC,IAAAA,GAZC;AAaDC,IAAAA,GAbC;AAcDC,IAAAA,IAdC;AAeDC,IAAAA,aAfC;AAgBDC,IAAAA,QAhBC;AAiBD,OAAGC;AAjBF,GAkBK;;AACN,MAAKH,IAAI,KAAK,SAAd,EAA0B;AACzB,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAGX,KADT;AAEC,MAAA,GAAG,EAAGU,GAFP;AAGC,MAAA,GAAG,EAAGD,GAHP;AAIC,MAAA,QAAQ,EAAGN,QAJZ;AAKC,MAAA,aAAa,EAAGS,aALjB;AAMC,MAAA,KAAK,EAAGX,KANT;AAOC,MAAA,QAAQ,EAAGY;AAPZ,MADD;AAWA;;AACD,QAAME,EAAE,GAAI,2BAA2Bb,UAAY,EAAnD;AACA,QAAMc,iBAAiB,GAAGjB,YAAY,KAAK,IAAjB,GAAwBE,KAAxB,GAAgCF,YAA1D;AACA,QAAMkB,kBAAkB,GAAGC,QAAQ,CAAEF,iBAAF,CAAR,GACxBA,iBADwB,GAExBR,eAFH;AAIA,SACC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAGR,KADT;AAEC,IAAA,EAAE,EAAGe,EAFN;AAGC,IAAA,IAAI,EAAGT,IAHR;AAIC,IAAA,SAAS,EAAGR,SAJb;AAKC,IAAA,QAAQ,EAAGK,QALZ;AAMC,wBAAmB,CAAC,CAAEG,IAAH,GAAW,GAAGS,EAAI,QAAlB,GAA4BI,SANhD;AAOC,IAAA,YAAY,EAAGV,GAPhB;AAQC,IAAA,YAAY,EAAGC,GARhB;AASC,IAAA,KAAK,EAAGT,KATT;AAUC,IAAA,UAAU,EAAGG,UAVd;AAWC,IAAA,SAAS,EAAGC,SAXb;AAYC,IAAA,UAAU,EAAGE,UAZd;AAaC,IAAA,YAAY,EAAGU,kBAbhB;AAcC,IAAA,aAAa,EAAGL,aAdjB;AAeC,IAAA,QAAQ,EAAGC;AAfZ,KAgBMC,KAhBN,EADD;AAoBA,CA3DmB,CAArB;eA8DejB,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\n\nconst RangeControl = memo(\n\t( {\n\t\tclassName,\n\t\tcurrentInput,\n\t\tlabel,\n\t\tvalue,\n\t\tinstanceId,\n\t\tonChange,\n\t\tbeforeIcon,\n\t\tafterIcon,\n\t\thelp,\n\t\tallowReset,\n\t\tinitialPosition,\n\t\tmin,\n\t\tmax,\n\t\ttype,\n\t\tseparatorType,\n\t\tdisabled,\n\t\t...props\n\t} ) => {\n\t\tif ( type === 'stepper' ) {\n\t\t\treturn (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t\tconst id = `inspector-range-control-${ instanceId }`;\n\t\tconst currentInputValue = currentInput === null ? value : currentInput;\n\t\tconst initialSliderValue = isFinite( currentInputValue )\n\t\t\t? currentInputValue\n\t\t\t: initialPosition;\n\n\t\treturn (\n\t\t\t<RangeCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ className }\n\t\t\t\tonChange={ onChange }\n\t\t\t\taria-describedby={ !! help ? `${ id }__help` : undefined }\n\t\t\t\tminimumValue={ min }\n\t\t\t\tmaximumValue={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tbeforeIcon={ beforeIcon }\n\t\t\t\tafterIcon={ afterIcon }\n\t\t\t\tallowReset={ allowReset }\n\t\t\t\tdefaultValue={ initialSliderValue }\n\t\t\t\tseparatorType={ separatorType }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default RangeControl;\n"]}
@@ -186,7 +186,9 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox(_ref, ref) {
186
186
  type,
187
187
  url,
188
188
  onWindowEvents = {},
189
- viewportProps = ''
189
+ viewportProps = '',
190
+ onLoadEnd = () => {},
191
+ testID
190
192
  } = _ref;
191
193
  const colorScheme = (0, _compose.usePreferredColorScheme)();
192
194
  const [height, setHeight] = (0, _element.useState)(0);
@@ -350,7 +352,9 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox(_ref, ref) {
350
352
  setBuiltInZoomControls: false,
351
353
  showsHorizontalScrollIndicator: false,
352
354
  showsVerticalScrollIndicator: false,
353
- mediaPlaybackRequiresUserAction: false
355
+ mediaPlaybackRequiresUserAction: false,
356
+ onLoadEnd: onLoadEnd,
357
+ testID: testID
354
358
  });
355
359
  });
356
360
 
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","ref","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","colorScheme","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","__html","map","rules","i","src","getInjectedJavaScript","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","dimensionsChangeSubscription","addEventListener","remove","current","sandboxStyles","baseUrl","isAndroid","workaroundStyles","webView","StyleSheet","create","opacity"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAeA;;AAKA;;AAxBA;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA7EA;AA+EA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;AAEA,MAAMC,OAAO,GAAG,yBAAY,SAASA,OAAT,OAe3BC,GAf2B,EAgB1B;AAAA,MAfD;AACCC,IAAAA,cADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,IAAI,GAAG,EAHR;AAICC,IAAAA,IAAI,GAAG,IAJR;AAKCC,IAAAA,WAAW,GAAG,EALf;AAMCC,IAAAA,OAAO,GAAGR,WANX;AAOCS,IAAAA,MAAM,GAAGT,WAPV;AAQCU,IAAAA,KAAK,GAAG,EART;AASCC,IAAAA,IATD;AAUCC,IAAAA,GAVD;AAWCC,IAAAA,cAAc,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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n\tforwardRef,\n\tuseCallback,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t(function() {\n\t\tconst { MutationObserver } = window;\n\n\t\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n\t\t\twindow.ReactNativeWebView.postMessage(\n\t\t\t\tJSON.stringify( {\n\t\t\t\t\taction: 'resize',\n\t\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\t\theight: clientBoundingRect.height,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\n\t\tconst observer = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif ( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (\n\t\t\t\t\tstyle\n\t\t\t\t) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t\t) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.querySelectorAll( '[style]' ),\n\t\t\tremoveViewportStyles\n\t\t);\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.styleSheets,\n\t\t\tfunction ( stylesheet ) {\n\t\t\t\tArray.prototype.forEach.call(\n\t\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\t\tremoveViewportStyles\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n\t\twindow.addEventListener( 'orientationchange', sendResize, true );\n\t})();\n`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\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\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\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\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent={ `width=device-width, initial-scale=1${ addViewportProps }` }\n\t\t\t\t\t></meta>\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{ 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\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\n\t);\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tinjectedJavaScript={ getInjectedJavaScript() }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t/>\n\t);\n} );\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","ref","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","onLoadEnd","testID","colorScheme","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","__html","map","rules","i","src","getInjectedJavaScript","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","dimensionsChangeSubscription","addEventListener","remove","current","sandboxStyles","baseUrl","isAndroid","workaroundStyles","webView","StyleSheet","create","opacity"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAeA;;AAKA;;AAxBA;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA7EA;AA+EA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;AAEA,MAAMC,OAAO,GAAG,yBAAY,SAASA,OAAT,OAiB3BC,GAjB2B,EAkB1B;AAAA,MAjBD;AACCC,IAAAA,cADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,IAAI,GAAG,EAHR;AAICC,IAAAA,IAAI,GAAG,IAJR;AAKCC,IAAAA,WAAW,GAAG,EALf;AAMCC,IAAAA,OAAO,GAAGR,WANX;AAOCS,IAAAA,MAAM,GAAGT,WAPV;AAQCU,IAAAA,KAAK,GAAG,EART;AASCC,IAAAA,IATD;AAUCC,IAAAA,GAVD;AAWCC,IAAAA,cA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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n\tforwardRef,\n\tuseCallback,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t(function() {\n\t\tconst { MutationObserver } = window;\n\n\t\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n\t\t\twindow.ReactNativeWebView.postMessage(\n\t\t\t\tJSON.stringify( {\n\t\t\t\t\taction: 'resize',\n\t\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\t\theight: clientBoundingRect.height,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\n\t\tconst observer = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif ( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (\n\t\t\t\t\tstyle\n\t\t\t\t) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t\t) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.querySelectorAll( '[style]' ),\n\t\t\tremoveViewportStyles\n\t\t);\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.styleSheets,\n\t\t\tfunction ( stylesheet ) {\n\t\t\t\tArray.prototype.forEach.call(\n\t\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\t\tremoveViewportStyles\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n\t\twindow.addEventListener( 'orientationchange', sendResize, true );\n\t})();\n`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\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\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t\tonLoadEnd = () => {},\n\t\ttestID,\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\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\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent={ `width=device-width, initial-scale=1${ addViewportProps }` }\n\t\t\t\t\t></meta>\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{ 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\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\n\t);\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tinjectedJavaScript={ getInjectedJavaScript() }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t\tonLoadEnd={ onLoadEnd }\n\t\t\ttestID={ testID }\n\t\t/>\n\t);\n} );\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"]}
@@ -48,8 +48,9 @@ function Fill(_ref) {
48
48
  unregisterFill,
49
49
  ...slot
50
50
  } = (0, _useSlot.default)(name);
51
+ const rerender = useForceUpdate();
51
52
  const ref = (0, _element.useRef)({
52
- rerender: useForceUpdate()
53
+ rerender
53
54
  });
54
55
  (0, _element.useEffect)(() => {
55
56
  // We register fills so we can keep track of their existence.
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useForceUpdate","setState","mounted","current","Fill","name","children","registerFill","unregisterFill","slot","ref","rerender","fillProps","wrappedChildren","ownerDocument"],"mappings":";;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiB,uBAAU,EAAV,CAAvB;AACA,QAAMC,OAAO,GAAG,qBAAQ,IAAR,CAAhB;AAEA,0BAAW,MAAM;AAChBA,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB;AACA,WAAO,MAAM;AACZD,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GALD,EAKG,EALH;AAOA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAEc,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgC,OAAGC;AAAnC,MAA4C,sBAASJ,IAAT,CAAlD;AACA,QAAMK,GAAG,GAAG,qBAAQ;AAAEC,IAAAA,QAAQ,EAAEX,cAAc;AAA1B,GAAR,CAAZ;AAEA,0BAAW,MAAM;AAChB;AACA;AACA;AACAO,IAAAA,YAAY,CAAEG,GAAF,CAAZ;AACA,WAAO,MAAM;AACZF,MAAAA,cAAc,CAAEE,GAAF,CAAd;AACA,KAFD;AAGA,GARD,EAQG,CAAEH,YAAF,EAAgBC,cAAhB,CARH;;AAUA,MAAK,CAAEC,IAAI,CAACC,GAAP,IAAc,CAAED,IAAI,CAACC,GAAL,CAASP,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEG,IAAI,CAACG,SAAP,CAAnB;AACA,GApBiD,CAsBlD;AACA;AACA;AACA;;;AACA,QAAMC,eAAe,GACpB,4BAAC,sBAAD;AAAe,IAAA,QAAQ,EAAGJ,IAAI,CAACC,GAAL,CAASP,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAO,2BAAcO,eAAd,EAA+BJ,IAAI,CAACC,GAAL,CAASP,OAAxC,CAAP;AACA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSlot from './use-slot';\nimport StyleProvider from '../../style-provider';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\tmounted.current = true;\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( { name, children } ) {\n\tconst { registerFill, unregisterFill, ...slot } = useSlot( name );\n\tconst ref = useRef( { rerender: useForceUpdate() } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existence.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tregisterFill( ref );\n\t\treturn () => {\n\t\t\tunregisterFill( ref );\n\t\t};\n\t}, [ registerFill, unregisterFill ] );\n\n\tif ( ! slot.ref || ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.fillProps );\n\t}\n\n\t// When using a `Fill`, the `children` will be rendered in the document of the\n\t// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n\t// to make sure we're referencing the right document/iframe (instead of the\n\t// context of the `Fill`'s parent).\n\tconst wrappedChildren = (\n\t\t<StyleProvider document={ slot.ref.current.ownerDocument }>\n\t\t\t{ children }\n\t\t</StyleProvider>\n\t);\n\n\treturn createPortal( wrappedChildren, slot.ref.current );\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useForceUpdate","setState","mounted","current","Fill","name","children","registerFill","unregisterFill","slot","rerender","ref","fillProps","wrappedChildren","ownerDocument"],"mappings":";;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiB,uBAAU,EAAV,CAAvB;AACA,QAAMC,OAAO,GAAG,qBAAQ,IAAR,CAAhB;AAEA,0BAAW,MAAM;AAChBA,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB;AACA,WAAO,MAAM;AACZD,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GALD,EAKG,EALH;AAOA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAEc,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgC,OAAGC;AAAnC,MAA4C,sBAASJ,IAAT,CAAlD;AACA,QAAMK,QAAQ,GAAGV,cAAc,EAA/B;AACA,QAAMW,GAAG,GAAG,qBAAQ;AAAED,IAAAA;AAAF,GAAR,CAAZ;AAEA,0BAAW,MAAM;AAChB;AACA;AACA;AACAH,IAAAA,YAAY,CAAEI,GAAF,CAAZ;AACA,WAAO,MAAM;AACZH,MAAAA,cAAc,CAAEG,GAAF,CAAd;AACA,KAFD;AAGA,GARD,EAQG,CAAEJ,YAAF,EAAgBC,cAAhB,CARH;;AAUA,MAAK,CAAEC,IAAI,CAACE,GAAP,IAAc,CAAEF,IAAI,CAACE,GAAL,CAASR,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEG,IAAI,CAACG,SAAP,CAAnB;AACA,GArBiD,CAuBlD;AACA;AACA;AACA;;;AACA,QAAMC,eAAe,GACpB,4BAAC,sBAAD;AAAe,IAAA,QAAQ,EAAGJ,IAAI,CAACE,GAAL,CAASR,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAO,2BAAcO,eAAd,EAA+BJ,IAAI,CAACE,GAAL,CAASR,OAAxC,CAAP;AACA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSlot from './use-slot';\nimport StyleProvider from '../../style-provider';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\tmounted.current = true;\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( { name, children } ) {\n\tconst { registerFill, unregisterFill, ...slot } = useSlot( name );\n\tconst rerender = useForceUpdate();\n\tconst ref = useRef( { rerender } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existence.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tregisterFill( ref );\n\t\treturn () => {\n\t\t\tunregisterFill( ref );\n\t\t};\n\t}, [ registerFill, unregisterFill ] );\n\n\tif ( ! slot.ref || ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.fillProps );\n\t}\n\n\t// When using a `Fill`, the `children` will be rendered in the document of the\n\t// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n\t// to make sure we're referencing the right document/iframe (instead of the\n\t// context of the `Fill`'s parent).\n\tconst wrappedChildren = (\n\t\t<StyleProvider document={ slot.ref.current.ownerDocument }>\n\t\t\t{ children }\n\t\t</StyleProvider>\n\t);\n\n\treturn createPortal( wrappedChildren, slot.ref.current );\n}\n"]}