@wordpress/components 21.3.0 → 22.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 (612) hide show
  1. package/CHANGELOG.md +65 -1
  2. package/build/angle-picker-control/index.js +1 -1
  3. package/build/angle-picker-control/index.js.map +1 -1
  4. package/build/autocomplete/autocompleter-ui.js +28 -2
  5. package/build/autocomplete/autocompleter-ui.js.map +1 -1
  6. package/build/border-box-control/border-box-control/component.js +63 -15
  7. package/build/border-box-control/border-box-control/component.js.map +1 -1
  8. package/build/border-box-control/border-box-control/hook.js +7 -3
  9. package/build/border-box-control/border-box-control/hook.js.map +1 -1
  10. package/build/border-box-control/border-box-control-linked-button/hook.js +3 -3
  11. package/build/border-box-control/border-box-control-linked-button/hook.js.map +1 -1
  12. package/build/border-box-control/border-box-control-split-controls/component.js +3 -3
  13. package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  14. package/build/border-box-control/border-box-control-split-controls/hook.js +8 -11
  15. package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  16. package/build/border-box-control/border-box-control-visualizer/hook.js +3 -7
  17. package/build/border-box-control/border-box-control-visualizer/hook.js.map +1 -1
  18. package/build/border-box-control/styles.js +34 -34
  19. package/build/border-box-control/styles.js.map +1 -1
  20. package/build/border-control/border-control/component.js +5 -4
  21. package/build/border-control/border-control/component.js.map +1 -1
  22. package/build/border-control/border-control/hook.js +12 -5
  23. package/build/border-control/border-control/hook.js.map +1 -1
  24. package/build/border-control/border-control-dropdown/hook.js +5 -5
  25. package/build/border-control/border-control-dropdown/hook.js.map +1 -1
  26. package/build/border-control/styles.js +19 -34
  27. package/build/border-control/styles.js.map +1 -1
  28. package/build/box-control/index.js +6 -2
  29. package/build/box-control/index.js.map +1 -1
  30. package/build/circular-option-picker/index.js +14 -14
  31. package/build/circular-option-picker/index.js.map +1 -1
  32. package/build/color-palette/index.js +83 -30
  33. package/build/color-palette/index.js.map +1 -1
  34. package/build/color-palette/styles.js +3 -3
  35. package/build/color-palette/styles.js.map +1 -1
  36. package/build/color-palette/types.js +6 -0
  37. package/build/color-palette/types.js.map +1 -0
  38. package/build/color-picker/input-with-slider.js +1 -1
  39. package/build/color-picker/input-with-slider.js.map +1 -1
  40. package/build/custom-gradient-picker/gradient-bar/index.js +1 -3
  41. package/build/custom-gradient-picker/gradient-bar/index.js.map +1 -1
  42. package/build/custom-select-control/index.js +8 -4
  43. package/build/custom-select-control/index.js.map +1 -1
  44. package/build/date-time/date-time/index.js +2 -0
  45. package/build/date-time/date-time/index.js.map +1 -1
  46. package/build/date-time/time/index.js +4 -4
  47. package/build/date-time/time/index.js.map +1 -1
  48. package/build/disabled/index.js +8 -1
  49. package/build/disabled/index.js.map +1 -1
  50. package/build/external-link/index.js +13 -2
  51. package/build/external-link/index.js.map +1 -1
  52. package/build/focusable-iframe/index.js +0 -1
  53. package/build/focusable-iframe/index.js.map +1 -1
  54. package/build/font-size-picker/index.js +61 -48
  55. package/build/font-size-picker/index.js.map +1 -1
  56. package/build/font-size-picker/utils.js +0 -21
  57. package/build/font-size-picker/utils.js.map +1 -1
  58. package/build/form-file-upload/index.js.map +1 -1
  59. package/build/higher-order/with-filters/index.js +1 -7
  60. package/build/higher-order/with-filters/index.js.map +1 -1
  61. package/build/index.js +7 -1
  62. package/build/index.js.map +1 -1
  63. package/build/input-control/index.js +2 -0
  64. package/build/input-control/index.js.map +1 -1
  65. package/build/input-control/input-base.js +1 -1
  66. package/build/input-control/input-base.js.map +1 -1
  67. package/build/input-control/styles/input-control-styles.js +21 -21
  68. package/build/input-control/styles/input-control-styles.js.map +1 -1
  69. package/build/isolated-event-container/index.js +5 -9
  70. package/build/isolated-event-container/index.js.map +1 -1
  71. package/build/item-group/styles.js +10 -10
  72. package/build/item-group/styles.js.map +1 -1
  73. package/build/navigator/navigator-screen/component.js +20 -14
  74. package/build/navigator/navigator-screen/component.js.map +1 -1
  75. package/build/number-control/index.js +82 -22
  76. package/build/number-control/index.js.map +1 -1
  77. package/build/number-control/styles/number-control-styles.js +36 -6
  78. package/build/number-control/styles/number-control-styles.js.map +1 -1
  79. package/build/popover/index.js +15 -29
  80. package/build/popover/index.js.map +1 -1
  81. package/build/radio-group/index.js +7 -1
  82. package/build/radio-group/index.js.map +1 -1
  83. package/build/{radio → radio-group/radio}/index.js +7 -1
  84. package/build/radio-group/radio/index.js.map +1 -0
  85. package/build/{radio-context → radio-group/radio-context}/index.js +0 -0
  86. package/build/radio-group/radio-context/index.js.map +1 -0
  87. package/build/slot-fill/bubbles-virtually/fill.js +9 -5
  88. package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
  89. package/build/slot-fill/bubbles-virtually/slot.js +13 -8
  90. package/build/slot-fill/bubbles-virtually/slot.js.map +1 -1
  91. package/build/slot-fill/bubbles-virtually/use-slot.js +15 -9
  92. package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  93. package/build/slot-fill/fill.js +12 -4
  94. package/build/slot-fill/fill.js.map +1 -1
  95. package/build/slot-fill/use-slot.js +3 -1
  96. package/build/slot-fill/use-slot.js.map +1 -1
  97. package/build/snackbar/index.js +1 -1
  98. package/build/snackbar/index.js.map +1 -1
  99. package/build/tab-panel/index.js +2 -6
  100. package/build/tab-panel/index.js.map +1 -1
  101. package/build/text-control/index.js +0 -2
  102. package/build/text-control/index.js.map +1 -1
  103. package/build/toggle-control/index.js +15 -3
  104. package/build/toggle-control/index.js.map +1 -1
  105. package/build/toggle-group-control/toggle-group-control/as-button-group.js +90 -0
  106. package/build/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -0
  107. package/build/toggle-group-control/toggle-group-control/as-radio-group.js +90 -0
  108. package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -0
  109. package/build/toggle-group-control/toggle-group-control/component.js +21 -50
  110. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  111. package/build/toggle-group-control/toggle-group-control/styles.js +8 -8
  112. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  113. package/build/toggle-group-control/toggle-group-control-option-base/component.js +39 -17
  114. package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  115. package/build/toggle-group-control/toggle-group-control-option-base/styles.js +23 -23
  116. package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  117. package/build/toolbar-dropdown-menu/index.js +1 -1
  118. package/build/toolbar-dropdown-menu/index.js.map +1 -1
  119. package/build/ui/context/context-system-provider.js +9 -22
  120. package/build/ui/context/context-system-provider.js.map +1 -1
  121. package/build/unit-control/index.js +7 -9
  122. package/build/unit-control/index.js.map +1 -1
  123. package/build/unit-control/styles/unit-control-styles.js +15 -25
  124. package/build/unit-control/styles/unit-control-styles.js.map +1 -1
  125. package/build/utils/config-values.js +0 -1
  126. package/build/utils/config-values.js.map +1 -1
  127. package/build/utils/hooks/use-update-effect.js +5 -1
  128. package/build/utils/hooks/use-update-effect.js.map +1 -1
  129. package/build-module/angle-picker-control/index.js +1 -1
  130. package/build-module/angle-picker-control/index.js.map +1 -1
  131. package/build-module/autocomplete/autocompleter-ui.js +29 -3
  132. package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
  133. package/build-module/border-box-control/border-box-control/component.js +61 -13
  134. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  135. package/build-module/border-box-control/border-box-control/hook.js +7 -3
  136. package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
  137. package/build-module/border-box-control/border-box-control-linked-button/hook.js +3 -3
  138. package/build-module/border-box-control/border-box-control-linked-button/hook.js.map +1 -1
  139. package/build-module/border-box-control/border-box-control-split-controls/component.js +3 -3
  140. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  141. package/build-module/border-box-control/border-box-control-split-controls/hook.js +9 -10
  142. package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  143. package/build-module/border-box-control/border-box-control-visualizer/hook.js +4 -6
  144. package/build-module/border-box-control/border-box-control-visualizer/hook.js.map +1 -1
  145. package/build-module/border-box-control/styles.js +26 -28
  146. package/build-module/border-box-control/styles.js.map +1 -1
  147. package/build-module/border-control/border-control/component.js +5 -4
  148. package/build-module/border-control/border-control/component.js.map +1 -1
  149. package/build-module/border-control/border-control/hook.js +12 -5
  150. package/build-module/border-control/border-control/hook.js.map +1 -1
  151. package/build-module/border-control/border-control-dropdown/hook.js +5 -5
  152. package/build-module/border-control/border-control-dropdown/hook.js.map +1 -1
  153. package/build-module/border-control/styles.js +20 -36
  154. package/build-module/border-control/styles.js.map +1 -1
  155. package/build-module/box-control/index.js +6 -2
  156. package/build-module/box-control/index.js.map +1 -1
  157. package/build-module/circular-option-picker/index.js +14 -14
  158. package/build-module/circular-option-picker/index.js.map +1 -1
  159. package/build-module/color-palette/index.js +81 -28
  160. package/build-module/color-palette/index.js.map +1 -1
  161. package/build-module/color-palette/styles.js +3 -3
  162. package/build-module/color-palette/styles.js.map +1 -1
  163. package/build-module/color-palette/types.js +2 -0
  164. package/build-module/color-palette/types.js.map +1 -0
  165. package/build-module/color-picker/input-with-slider.js +1 -1
  166. package/build-module/color-picker/input-with-slider.js.map +1 -1
  167. package/build-module/custom-gradient-picker/gradient-bar/index.js +1 -2
  168. package/build-module/custom-gradient-picker/gradient-bar/index.js.map +1 -1
  169. package/build-module/custom-select-control/index.js +8 -4
  170. package/build-module/custom-select-control/index.js.map +1 -1
  171. package/build-module/date-time/date-time/index.js +2 -0
  172. package/build-module/date-time/date-time/index.js.map +1 -1
  173. package/build-module/date-time/time/index.js +4 -4
  174. package/build-module/date-time/time/index.js.map +1 -1
  175. package/build-module/disabled/index.js +8 -1
  176. package/build-module/disabled/index.js.map +1 -1
  177. package/build-module/external-link/index.js +13 -2
  178. package/build-module/external-link/index.js.map +1 -1
  179. package/build-module/focusable-iframe/index.js +0 -1
  180. package/build-module/focusable-iframe/index.js.map +1 -1
  181. package/build-module/font-size-picker/index.js +65 -50
  182. package/build-module/font-size-picker/index.js.map +1 -1
  183. package/build-module/font-size-picker/utils.js +0 -19
  184. package/build-module/font-size-picker/utils.js.map +1 -1
  185. package/build-module/form-file-upload/index.js.map +1 -1
  186. package/build-module/higher-order/with-filters/index.js +1 -6
  187. package/build-module/higher-order/with-filters/index.js.map +1 -1
  188. package/build-module/index.js +2 -2
  189. package/build-module/index.js.map +1 -1
  190. package/build-module/input-control/index.js +2 -0
  191. package/build-module/input-control/index.js.map +1 -1
  192. package/build-module/input-control/input-base.js +1 -1
  193. package/build-module/input-control/input-base.js.map +1 -1
  194. package/build-module/input-control/styles/input-control-styles.js +21 -21
  195. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  196. package/build-module/isolated-event-container/index.js +7 -9
  197. package/build-module/isolated-event-container/index.js.map +1 -1
  198. package/build-module/item-group/styles.js +10 -10
  199. package/build-module/item-group/styles.js.map +1 -1
  200. package/build-module/navigator/navigator-screen/component.js +20 -4
  201. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  202. package/build-module/number-control/index.js +81 -26
  203. package/build-module/number-control/index.js.map +1 -1
  204. package/build-module/number-control/styles/number-control-styles.js +30 -4
  205. package/build-module/number-control/styles/number-control-styles.js.map +1 -1
  206. package/build-module/popover/index.js +15 -29
  207. package/build-module/popover/index.js.map +1 -1
  208. package/build-module/radio-group/index.js +6 -1
  209. package/build-module/radio-group/index.js.map +1 -1
  210. package/build-module/{radio → radio-group/radio}/index.js +6 -1
  211. package/build-module/radio-group/radio/index.js.map +1 -0
  212. package/build-module/{radio-context → radio-group/radio-context}/index.js +0 -0
  213. package/build-module/radio-group/radio-context/index.js.map +1 -0
  214. package/build-module/slot-fill/bubbles-virtually/fill.js +9 -5
  215. package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
  216. package/build-module/slot-fill/bubbles-virtually/slot.js +13 -8
  217. package/build-module/slot-fill/bubbles-virtually/slot.js.map +1 -1
  218. package/build-module/slot-fill/bubbles-virtually/use-slot.js +15 -9
  219. package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  220. package/build-module/slot-fill/fill.js +12 -4
  221. package/build-module/slot-fill/fill.js.map +1 -1
  222. package/build-module/slot-fill/use-slot.js +3 -1
  223. package/build-module/slot-fill/use-slot.js.map +1 -1
  224. package/build-module/snackbar/index.js +1 -1
  225. package/build-module/snackbar/index.js.map +1 -1
  226. package/build-module/tab-panel/index.js +2 -6
  227. package/build-module/tab-panel/index.js.map +1 -1
  228. package/build-module/text-control/index.js +0 -2
  229. package/build-module/text-control/index.js.map +1 -1
  230. package/build-module/toggle-control/index.js +15 -3
  231. package/build-module/toggle-control/index.js.map +1 -1
  232. package/build-module/toggle-group-control/toggle-group-control/as-button-group.js +76 -0
  233. package/build-module/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -0
  234. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +75 -0
  235. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -0
  236. package/build-module/toggle-group-control/toggle-group-control/component.js +19 -49
  237. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  238. package/build-module/toggle-group-control/toggle-group-control/styles.js +7 -6
  239. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  240. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +39 -17
  241. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  242. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +21 -18
  243. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  244. package/build-module/toolbar-dropdown-menu/index.js +1 -1
  245. package/build-module/toolbar-dropdown-menu/index.js.map +1 -1
  246. package/build-module/ui/context/context-system-provider.js +6 -20
  247. package/build-module/ui/context/context-system-provider.js.map +1 -1
  248. package/build-module/unit-control/index.js +8 -10
  249. package/build-module/unit-control/index.js.map +1 -1
  250. package/build-module/unit-control/styles/unit-control-styles.js +8 -24
  251. package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
  252. package/build-module/utils/config-values.js +0 -1
  253. package/build-module/utils/config-values.js.map +1 -1
  254. package/build-module/utils/hooks/use-update-effect.js +5 -1
  255. package/build-module/utils/hooks/use-update-effect.js.map +1 -1
  256. package/build-style/style-rtl.css +21 -41
  257. package/build-style/style.css +19 -39
  258. package/build-types/base-field/hook.d.ts +11 -11
  259. package/build-types/border-box-control/border-box-control/component.d.ts +53 -4
  260. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  261. package/build-types/border-box-control/border-box-control/hook.d.ts +13 -12
  262. package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
  263. package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts +12 -12
  264. package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts.map +1 -1
  265. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +1 -1
  266. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
  267. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +12 -12
  268. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
  269. package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts +12 -12
  270. package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts.map +1 -1
  271. package/build-types/border-box-control/stories/index.d.ts +17 -0
  272. package/build-types/border-box-control/stories/index.d.ts.map +1 -0
  273. package/build-types/border-box-control/styles.d.ts +7 -6
  274. package/build-types/border-box-control/styles.d.ts.map +1 -1
  275. package/build-types/border-box-control/types.d.ts +12 -16
  276. package/build-types/border-box-control/types.d.ts.map +1 -1
  277. package/build-types/border-control/border-control/component.d.ts +1 -1
  278. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  279. package/build-types/border-control/border-control/hook.d.ts +13 -13
  280. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  281. package/build-types/border-control/border-control-dropdown/component.d.ts +1 -1
  282. package/build-types/border-control/border-control-dropdown/hook.d.ts +11 -11
  283. package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
  284. package/build-types/border-control/border-control-style-picker/hook.d.ts +11 -11
  285. package/build-types/border-control/stories/index.d.ts +6 -6
  286. package/build-types/border-control/stories/index.d.ts.map +1 -1
  287. package/build-types/border-control/styles.d.ts +3 -3
  288. package/build-types/border-control/styles.d.ts.map +1 -1
  289. package/build-types/border-control/types.d.ts +7 -9
  290. package/build-types/border-control/types.d.ts.map +1 -1
  291. package/build-types/card/card/hook.d.ts +12 -12
  292. package/build-types/card/card-body/hook.d.ts +12 -12
  293. package/build-types/card/card-divider/hook.d.ts +13 -13
  294. package/build-types/card/card-footer/hook.d.ts +12 -12
  295. package/build-types/card/card-header/hook.d.ts +12 -12
  296. package/build-types/card/card-media/hook.d.ts +12 -12
  297. package/build-types/card/stories/index.d.ts.map +1 -1
  298. package/build-types/circular-option-picker/index.d.ts +4 -24
  299. package/build-types/circular-option-picker/index.d.ts.map +1 -1
  300. package/build-types/color-palette/index.d.ts +33 -18
  301. package/build-types/color-palette/index.d.ts.map +1 -1
  302. package/build-types/color-palette/stories/index.d.ts +21 -0
  303. package/build-types/color-palette/stories/index.d.ts.map +1 -0
  304. package/build-types/color-palette/styles.d.ts +3 -2
  305. package/build-types/color-palette/styles.d.ts.map +1 -1
  306. package/build-types/color-palette/test/index.d.ts +2 -0
  307. package/build-types/color-palette/test/index.d.ts.map +1 -0
  308. package/build-types/color-palette/types.d.ts +86 -0
  309. package/build-types/color-palette/types.d.ts.map +1 -0
  310. package/build-types/color-picker/styles.d.ts +5 -4
  311. package/build-types/color-picker/styles.d.ts.map +1 -1
  312. package/build-types/confirm-dialog/component.d.ts +4 -4
  313. package/build-types/custom-select-control/index.d.ts +1 -12
  314. package/build-types/custom-select-control/index.d.ts.map +1 -1
  315. package/build-types/custom-select-control/styles.d.ts +3 -1
  316. package/build-types/custom-select-control/styles.d.ts.map +1 -1
  317. package/build-types/date-time/date/styles.d.ts +3 -3
  318. package/build-types/date-time/date-time/index.d.ts +2 -0
  319. package/build-types/date-time/date-time/index.d.ts.map +1 -1
  320. package/build-types/date-time/date-time/styles.d.ts +3 -3
  321. package/build-types/date-time/stories/date-time.d.ts.map +1 -1
  322. package/build-types/date-time/time/styles.d.ts +8 -4
  323. package/build-types/date-time/time/styles.d.ts.map +1 -1
  324. package/build-types/disabled/index.d.ts +8 -1
  325. package/build-types/disabled/index.d.ts.map +1 -1
  326. package/build-types/elevation/hook.d.ts +12 -12
  327. package/build-types/external-link/index.d.ts.map +1 -1
  328. package/build-types/external-link/styles/external-link-styles.d.ts +1 -1
  329. package/build-types/external-link/test/index.d.ts +2 -0
  330. package/build-types/external-link/test/index.d.ts.map +1 -0
  331. package/build-types/flex/flex/hook.d.ts +12 -12
  332. package/build-types/flex/flex-block/hook.d.ts +12 -12
  333. package/build-types/flex/flex-item/hook.d.ts +12 -12
  334. package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts +2 -2
  335. package/build-types/focal-point-picker/styles/focal-point-style.d.ts +3 -3
  336. package/build-types/focusable-iframe/index.d.ts.map +1 -1
  337. package/build-types/font-size-picker/index.d.ts.map +1 -1
  338. package/build-types/font-size-picker/types.d.ts +1 -1
  339. package/build-types/font-size-picker/utils.d.ts +0 -8
  340. package/build-types/font-size-picker/utils.d.ts.map +1 -1
  341. package/build-types/form-file-upload/index.d.ts.map +1 -1
  342. package/build-types/form-file-upload/types.d.ts +5 -4
  343. package/build-types/form-file-upload/types.d.ts.map +1 -1
  344. package/build-types/grid/hook.d.ts +12 -12
  345. package/build-types/h-stack/component.d.ts +1 -1
  346. package/build-types/h-stack/hook.d.ts +12 -12
  347. package/build-types/heading/hook.d.ts +12 -12
  348. package/build-types/input-control/index.d.ts +1 -1
  349. package/build-types/input-control/index.d.ts.map +1 -1
  350. package/build-types/input-control/input-base.d.ts +5 -2
  351. package/build-types/input-control/input-base.d.ts.map +1 -1
  352. package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
  353. package/build-types/input-control/types.d.ts +3 -8
  354. package/build-types/input-control/types.d.ts.map +1 -1
  355. package/build-types/input-control/utils.d.ts +1 -1
  356. package/build-types/isolated-event-container/index.d.ts +3 -2
  357. package/build-types/isolated-event-container/index.d.ts.map +1 -1
  358. package/build-types/item-group/item/hook.d.ts +13 -13
  359. package/build-types/item-group/item-group/hook.d.ts +13 -13
  360. package/build-types/navigator/navigator-back-button/hook.d.ts +13 -13
  361. package/build-types/navigator/navigator-button/hook.d.ts +13 -13
  362. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  363. package/build-types/number-control/index.d.ts +2 -4
  364. package/build-types/number-control/index.d.ts.map +1 -1
  365. package/build-types/number-control/styles/number-control-styles.d.ts +5 -0
  366. package/build-types/number-control/styles/number-control-styles.d.ts.map +1 -1
  367. package/build-types/number-control/types.d.ts +12 -0
  368. package/build-types/number-control/types.d.ts.map +1 -1
  369. package/build-types/popover/index.d.ts +1 -1
  370. package/build-types/popover/index.d.ts.map +1 -1
  371. package/build-types/popover/stories/e2e/index.d.ts +1 -1
  372. package/build-types/popover/stories/index.d.ts +2 -0
  373. package/build-types/popover/stories/index.d.ts.map +1 -1
  374. package/build-types/popover/types.d.ts +18 -14
  375. package/build-types/popover/types.d.ts.map +1 -1
  376. package/build-types/radio-group/index.d.ts +10 -0
  377. package/build-types/radio-group/index.d.ts.map +1 -0
  378. package/build-types/radio-group/radio/index.d.ts +7 -0
  379. package/build-types/radio-group/radio/index.d.ts.map +1 -0
  380. package/build-types/{radio-context → radio-group/radio-context}/index.d.ts +0 -0
  381. package/build-types/radio-group/radio-context/index.d.ts.map +1 -0
  382. package/build-types/range-control/index.d.ts +1 -1
  383. package/build-types/range-control/styles/range-control-styles.d.ts +2 -1
  384. package/build-types/range-control/styles/range-control-styles.d.ts.map +1 -1
  385. package/build-types/resizable-box/index.d.ts +1 -1
  386. package/build-types/resizable-box/resize-tooltip/index.d.ts +1 -1
  387. package/build-types/resizable-box/resize-tooltip/label.d.ts +1 -1
  388. package/build-types/scrollable/hook.d.ts +12 -12
  389. package/build-types/search-control/index.d.ts +2 -2
  390. package/build-types/search-control/stories/index.d.ts +4 -4
  391. package/build-types/select-control/stories/index.d.ts.map +1 -1
  392. package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
  393. package/build-types/slot-fill/fill.d.ts.map +1 -1
  394. package/build-types/slot-fill/use-slot.d.ts.map +1 -1
  395. package/build-types/spacer/hook.d.ts +12 -12
  396. package/build-types/spinner/index.d.ts +1 -1
  397. package/build-types/surface/hook.d.ts +12 -12
  398. package/build-types/tab-panel/index.d.ts.map +1 -1
  399. package/build-types/text/hook.d.ts +12 -12
  400. package/build-types/text-control/index.d.ts +2 -4
  401. package/build-types/text-control/index.d.ts.map +1 -1
  402. package/build-types/text-control/stories/index.d.ts.map +1 -1
  403. package/build-types/toggle-control/index.d.ts.map +1 -1
  404. package/build-types/toggle-control/types.d.ts +2 -1
  405. package/build-types/toggle-control/types.d.ts.map +1 -1
  406. package/build-types/toggle-group-control/stories/index.d.ts +2 -2
  407. package/build-types/toggle-group-control/stories/index.d.ts.map +1 -1
  408. package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts +6 -0
  409. package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts.map +1 -0
  410. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts +6 -0
  411. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -0
  412. package/build-types/toggle-group-control/toggle-group-control/component.d.ts +2 -2
  413. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  414. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +2 -2
  415. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  416. package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -1
  417. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +4 -7
  418. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -1
  419. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +1 -1
  420. package/build-types/toggle-group-control/types.d.ts +19 -14
  421. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  422. package/build-types/tools-panel/tools-panel/hook.d.ts +12 -12
  423. package/build-types/tools-panel/tools-panel-header/hook.d.ts +12 -12
  424. package/build-types/tools-panel/tools-panel-item/hook.d.ts +12 -12
  425. package/build-types/truncate/hook.d.ts +12 -12
  426. package/build-types/ui/context/context-system-provider.d.ts.map +1 -1
  427. package/build-types/ui/control-group/hook.d.ts +12 -12
  428. package/build-types/ui/control-label/component.d.ts +1 -1
  429. package/build-types/ui/control-label/hook.d.ts +12 -12
  430. package/build-types/ui/form-group/form-group.d.ts +4 -4
  431. package/build-types/ui/form-group/use-form-group.d.ts +28 -28
  432. package/build-types/unit-control/index.d.ts +2 -2
  433. package/build-types/unit-control/index.d.ts.map +1 -1
  434. package/build-types/unit-control/styles/unit-control-styles.d.ts +2 -5
  435. package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
  436. package/build-types/unit-control/types.d.ts +3 -3
  437. package/build-types/unit-control/types.d.ts.map +1 -1
  438. package/build-types/utils/config-values.d.ts +0 -1
  439. package/build-types/utils/hooks/use-update-effect.d.ts.map +1 -1
  440. package/build-types/utils/types.d.ts +0 -14
  441. package/build-types/utils/types.d.ts.map +1 -1
  442. package/build-types/v-stack/component.d.ts +2 -2
  443. package/build-types/v-stack/hook.d.ts +12 -12
  444. package/build-types/v-stack/stories/index.d.ts +2 -2
  445. package/package.json +17 -17
  446. package/src/angle-picker-control/index.js +1 -1
  447. package/src/angle-picker-control/stories/index.js +3 -0
  448. package/src/autocomplete/autocompleter-ui.js +29 -2
  449. package/src/autocomplete/test/index.js +89 -0
  450. package/src/border-box-control/border-box-control/README.md +8 -0
  451. package/src/border-box-control/border-box-control/component.tsx +64 -13
  452. package/src/border-box-control/border-box-control/hook.ts +7 -2
  453. package/src/border-box-control/border-box-control-linked-button/hook.ts +3 -6
  454. package/src/border-box-control/border-box-control-split-controls/component.tsx +3 -6
  455. package/src/border-box-control/border-box-control-split-controls/hook.ts +11 -14
  456. package/src/border-box-control/border-box-control-visualizer/hook.ts +4 -7
  457. package/src/border-box-control/stories/index.tsx +90 -0
  458. package/src/border-box-control/styles.ts +28 -22
  459. package/src/border-box-control/test/index.js +287 -122
  460. package/src/border-box-control/types.ts +12 -16
  461. package/src/border-control/border-control/README.md +8 -0
  462. package/src/border-control/border-control/component.tsx +4 -3
  463. package/src/border-control/border-control/hook.ts +10 -6
  464. package/src/border-control/border-control-dropdown/hook.ts +5 -7
  465. package/src/border-control/stories/index.tsx +12 -14
  466. package/src/border-control/styles.ts +20 -23
  467. package/src/border-control/test/index.js +139 -96
  468. package/src/border-control/types.ts +7 -9
  469. package/src/box-control/README.md +14 -0
  470. package/src/box-control/index.js +4 -0
  471. package/src/box-control/stories/index.js +8 -27
  472. package/src/button/README.md +2 -15
  473. package/src/button/stories/index.js +109 -178
  474. package/src/button/style.scss +17 -54
  475. package/src/card/stories/index.tsx +27 -31
  476. package/src/card/test/__snapshots__/index.tsx.snap +36 -35
  477. package/src/card/test/index.tsx +2 -6
  478. package/src/circular-option-picker/index.js +14 -20
  479. package/src/color-palette/README.md +51 -49
  480. package/src/color-palette/{index.js → index.tsx} +132 -51
  481. package/src/color-palette/stories/{index.js → index.tsx} +38 -27
  482. package/src/color-palette/style.scss +2 -2
  483. package/src/color-palette/{styles.js → styles.ts} +0 -0
  484. package/src/color-palette/test/__snapshots__/{index.js.snap → index.tsx.snap} +0 -0
  485. package/src/color-palette/test/{index.js → index.tsx} +1 -1
  486. package/src/color-palette/types.ts +93 -0
  487. package/src/color-picker/input-with-slider.tsx +1 -1
  488. package/src/custom-gradient-picker/gradient-bar/index.js +1 -3
  489. package/src/custom-select-control/README.md +14 -0
  490. package/src/custom-select-control/index.js +22 -15
  491. package/src/date-time/date-time/index.tsx +2 -0
  492. package/src/date-time/stories/date-time.tsx +4 -0
  493. package/src/date-time/time/index.tsx +4 -4
  494. package/src/dimension-control/test/__snapshots__/index.test.js.snap +4 -0
  495. package/src/disabled/README.md +2 -0
  496. package/src/disabled/index.tsx +8 -1
  497. package/src/disabled/test/index.tsx +0 -5
  498. package/src/external-link/index.tsx +14 -6
  499. package/src/external-link/test/index.tsx +106 -0
  500. package/src/focusable-iframe/index.js +0 -1
  501. package/src/font-size-picker/README.md +3 -3
  502. package/src/font-size-picker/index.tsx +152 -142
  503. package/src/font-size-picker/test/index.tsx +447 -174
  504. package/src/font-size-picker/test/utils.ts +1 -45
  505. package/src/font-size-picker/types.ts +1 -1
  506. package/src/font-size-picker/utils.ts +0 -22
  507. package/src/form-file-upload/README.md +1 -3
  508. package/src/form-file-upload/index.tsx +1 -0
  509. package/src/form-file-upload/types.ts +5 -4
  510. package/src/form-toggle/test/__snapshots__/index.tsx.snap +15 -13
  511. package/src/form-toggle/test/index.tsx +1 -1
  512. package/src/h-stack/test/__snapshots__/index.tsx.snap +36 -30
  513. package/src/h-stack/test/index.tsx +3 -3
  514. package/src/higher-order/with-filters/index.js +4 -9
  515. package/src/index.js +2 -1
  516. package/src/input-control/index.tsx +2 -0
  517. package/src/input-control/input-base.tsx +3 -3
  518. package/src/input-control/styles/input-control-styles.tsx +1 -0
  519. package/src/input-control/types.ts +4 -11
  520. package/src/isolated-event-container/index.tsx +32 -0
  521. package/src/item-group/styles.ts +1 -1
  522. package/src/item-group/test/__snapshots__/index.js.snap +90 -85
  523. package/src/item-group/test/index.js +7 -17
  524. package/src/navigator/navigator-screen/component.tsx +20 -3
  525. package/src/number-control/README.md +9 -4
  526. package/src/number-control/index.tsx +100 -33
  527. package/src/number-control/styles/number-control-styles.js +26 -1
  528. package/src/number-control/test/index.js +50 -0
  529. package/src/number-control/types.ts +12 -0
  530. package/src/popover/README.md +12 -7
  531. package/src/popover/index.tsx +20 -30
  532. package/src/popover/stories/index.tsx +29 -1
  533. package/src/popover/style.scss +9 -0
  534. package/src/popover/types.ts +18 -15
  535. package/src/radio-group/README.md +4 -0
  536. package/src/radio-group/index.js +6 -1
  537. package/src/{radio → radio-group/radio}/index.js +6 -1
  538. package/src/{radio-context → radio-group/radio-context}/index.js +0 -0
  539. package/src/radio-group/stories/index.js +11 -2
  540. package/src/sandbox/test/index.js +2 -2
  541. package/src/select-control/stories/index.tsx +9 -4
  542. package/src/slot-fill/bubbles-virtually/fill.js +5 -5
  543. package/src/slot-fill/bubbles-virtually/slot.js +10 -8
  544. package/src/slot-fill/bubbles-virtually/use-slot.js +15 -9
  545. package/src/slot-fill/fill.js +12 -2
  546. package/src/slot-fill/use-slot.js +3 -0
  547. package/src/snackbar/index.js +1 -1
  548. package/src/surface/test/__snapshots__/index.tsx.snap +58 -46
  549. package/src/surface/test/index.tsx +6 -16
  550. package/src/tab-panel/index.tsx +2 -3
  551. package/src/tab-panel/test/index.tsx +78 -1
  552. package/src/text/test/__snapshots__/index.tsx.snap +19 -15
  553. package/src/text/test/index.tsx +2 -2
  554. package/src/text-control/index.tsx +0 -2
  555. package/src/text-control/stories/index.tsx +5 -6
  556. package/src/toggle-control/README.md +6 -4
  557. package/src/toggle-control/index.tsx +13 -2
  558. package/src/toggle-control/types.ts +2 -4
  559. package/src/toggle-group-control/stories/index.tsx +4 -4
  560. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +219 -160
  561. package/src/toggle-group-control/test/index.tsx +129 -2
  562. package/src/toggle-group-control/toggle-group-control/as-button-group.tsx +103 -0
  563. package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +99 -0
  564. package/src/toggle-group-control/toggle-group-control/component.tsx +29 -74
  565. package/src/toggle-group-control/toggle-group-control/styles.ts +12 -10
  566. package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +49 -25
  567. package/src/toggle-group-control/toggle-group-control-option-base/styles.ts +39 -19
  568. package/src/toggle-group-control/types.ts +75 -63
  569. package/src/toolbar-dropdown-menu/index.js +1 -1
  570. package/src/tools-panel/stories/index.js +0 -1
  571. package/src/tools-panel/stories/tools-panel-with-item-group-slot.js +0 -1
  572. package/src/tree-grid/test/__snapshots__/cell.js.snap +20 -18
  573. package/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap +3 -1
  574. package/src/tree-grid/test/__snapshots__/row.js.snap +33 -29
  575. package/src/tree-grid/test/cell.js +1 -1
  576. package/src/tree-grid/test/roving-tab-index.js +1 -1
  577. package/src/tree-grid/test/row.js +2 -2
  578. package/src/ui/context/context-system-provider.js +5 -18
  579. package/src/ui/context/test/__snapshots__/context-system-provider.js.snap +23 -17
  580. package/src/ui/context/test/context-system-provider.js +3 -3
  581. package/src/ui/control-group/test/__snapshots__/index.js.snap +18 -16
  582. package/src/ui/control-group/test/index.js +1 -1
  583. package/src/ui/control-label/test/__snapshots__/index.js.snap +27 -21
  584. package/src/ui/control-label/test/index.js +3 -3
  585. package/src/ui/form-group/test/__snapshots__/index.js.snap +34 -30
  586. package/src/ui/form-group/test/index.js +2 -2
  587. package/src/ui/shortcut/test/__snapshots__/index.js.snap +1 -1
  588. package/src/ui/shortcut/test/index.js +1 -1
  589. package/src/ui/spinner/test/__snapshots__/index.js.snap +75 -73
  590. package/src/ui/spinner/test/index.js +3 -7
  591. package/src/unit-control/index.tsx +29 -30
  592. package/src/unit-control/styles/unit-control-styles.ts +6 -12
  593. package/src/unit-control/test/utils.ts +43 -0
  594. package/src/unit-control/types.ts +5 -6
  595. package/src/utils/config-values.js +0 -1
  596. package/src/utils/hooks/use-update-effect.js +5 -1
  597. package/src/utils/types.ts +0 -15
  598. package/src/v-stack/test/__snapshots__/index.tsx.snap +36 -30
  599. package/src/v-stack/test/index.tsx +3 -3
  600. package/src/view/test/__snapshots__/index.js.snap +34 -24
  601. package/src/view/test/index.js +5 -5
  602. package/tsconfig.json +0 -2
  603. package/tsconfig.tsbuildinfo +1 -1
  604. package/build/radio/index.js.map +0 -1
  605. package/build/radio-context/index.js.map +0 -1
  606. package/build-module/radio/index.js.map +0 -1
  607. package/build-module/radio-context/index.js.map +0 -1
  608. package/build-types/radio-context/index.d.ts.map +0 -1
  609. package/src/border-box-control/stories/index.js +0 -106
  610. package/src/form-file-upload/stories/index.js +0 -51
  611. package/src/isolated-event-container/index.js +0 -28
  612. package/src/radio/stories/index.js +0 -20
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { createElement } from "@wordpress/element";
3
+ // @ts-nocheck
3
4
 
4
5
  /**
5
6
  * External dependencies
@@ -15,7 +16,7 @@ import { forwardRef } from '@wordpress/element';
15
16
  */
16
17
 
17
18
  import ButtonGroup from '../button-group';
18
- import RadioContext from '../radio-context';
19
+ import RadioContext from './radio-context';
19
20
 
20
21
  function RadioGroup(_ref, ref) {
21
22
  let {
@@ -44,6 +45,10 @@ function RadioGroup(_ref, ref) {
44
45
  "aria-label": label
45
46
  }, radioState, props)));
46
47
  }
48
+ /**
49
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
50
+ */
51
+
47
52
 
48
53
  export default forwardRef(RadioGroup);
49
54
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/radio-group/index.js"],"names":["useRadioState","RadioGroup","ReakitRadioGroup","forwardRef","ButtonGroup","RadioContext","ref","label","checked","defaultChecked","disabled","onChange","props","radioState","state","baseId","id","radioContext","setState"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,UAAU,IAAIC,gBAAtC,QAA8D,cAA9D;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASJ,UAAT,OAECK,GAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA,cAAlB;AAAkCC,IAAAA,QAAlC;AAA4CC,IAAAA,QAA5C;AAAsD,OAAGC;AAAzD,GAEC;AACD,QAAMC,UAAU,GAAGb,aAAa,CAAE;AACjCc,IAAAA,KAAK,EAAEL,cAD0B;AAEjCM,IAAAA,MAAM,EAAEH,KAAK,CAACI;AAFmB,GAAF,CAAhC;AAIA,QAAMC,YAAY,GAAG,EACpB,GAAGJ,UADiB;AAEpBH,IAAAA,QAFoB;AAGpB;AACAI,IAAAA,KAAK,EAAEN,OAAF,aAAEA,OAAF,cAAEA,OAAF,GAAaK,UAAU,CAACC,KAJT;AAKpBI,IAAAA,QAAQ,EAAEP,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAcE,UAAU,CAACK;AALb,GAArB;AAQA,SACC,cAAC,YAAD,CAAc,QAAd;AAAuB,IAAA,KAAK,EAAGD;AAA/B,KACC,cAAC,gBAAD;AACC,IAAA,GAAG,EAAGX,GADP;AAEC,IAAA,EAAE,EAAGF,WAFN;AAGC,kBAAaG;AAHd,KAIMM,UAJN,EAKMD,KALN,EADD,CADD;AAWA;;AAED,eAAeT,UAAU,CAAEF,UAAF,CAAzB","sourcesContent":["/**\n * External dependencies\n */\nimport { useRadioState, RadioGroup as ReakitRadioGroup } from 'reakit/Radio';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ButtonGroup from '../button-group';\nimport RadioContext from '../radio-context';\n\nfunction RadioGroup(\n\t{ label, checked, defaultChecked, disabled, onChange, ...props },\n\tref\n) {\n\tconst radioState = useRadioState( {\n\t\tstate: defaultChecked,\n\t\tbaseId: props.id,\n\t} );\n\tconst radioContext = {\n\t\t...radioState,\n\t\tdisabled,\n\t\t// Controlled or uncontrolled.\n\t\tstate: checked ?? radioState.state,\n\t\tsetState: onChange ?? radioState.setState,\n\t};\n\n\treturn (\n\t\t<RadioContext.Provider value={ radioContext }>\n\t\t\t<ReakitRadioGroup\n\t\t\t\tref={ ref }\n\t\t\t\tas={ ButtonGroup }\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...radioState }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</RadioContext.Provider>\n\t);\n}\n\nexport default forwardRef( RadioGroup );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/radio-group/index.js"],"names":["useRadioState","RadioGroup","ReakitRadioGroup","forwardRef","ButtonGroup","RadioContext","ref","label","checked","defaultChecked","disabled","onChange","props","radioState","state","baseId","id","radioContext","setState"],"mappings":";;AAAA;;AAEA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,UAAU,IAAIC,gBAAtC,QAA8D,cAA9D;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,YAAP,MAAyB,iBAAzB;;AAEA,SAASJ,UAAT,OAECK,GAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA,cAAlB;AAAkCC,IAAAA,QAAlC;AAA4CC,IAAAA,QAA5C;AAAsD,OAAGC;AAAzD,GAEC;AACD,QAAMC,UAAU,GAAGb,aAAa,CAAE;AACjCc,IAAAA,KAAK,EAAEL,cAD0B;AAEjCM,IAAAA,MAAM,EAAEH,KAAK,CAACI;AAFmB,GAAF,CAAhC;AAIA,QAAMC,YAAY,GAAG,EACpB,GAAGJ,UADiB;AAEpBH,IAAAA,QAFoB;AAGpB;AACAI,IAAAA,KAAK,EAAEN,OAAF,aAAEA,OAAF,cAAEA,OAAF,GAAaK,UAAU,CAACC,KAJT;AAKpBI,IAAAA,QAAQ,EAAEP,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAcE,UAAU,CAACK;AALb,GAArB;AAQA,SACC,cAAC,YAAD,CAAc,QAAd;AAAuB,IAAA,KAAK,EAAGD;AAA/B,KACC,cAAC,gBAAD;AACC,IAAA,GAAG,EAAGX,GADP;AAEC,IAAA,EAAE,EAAGF,WAFN;AAGC,kBAAaG;AAHd,KAIMM,UAJN,EAKMD,KALN,EADD,CADD;AAWA;AAED;AACA;AACA;;;AACA,eAAeT,UAAU,CAAEF,UAAF,CAAzB","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport { useRadioState, RadioGroup as ReakitRadioGroup } from 'reakit/Radio';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ButtonGroup from '../button-group';\nimport RadioContext from './radio-context';\n\nfunction RadioGroup(\n\t{ label, checked, defaultChecked, disabled, onChange, ...props },\n\tref\n) {\n\tconst radioState = useRadioState( {\n\t\tstate: defaultChecked,\n\t\tbaseId: props.id,\n\t} );\n\tconst radioContext = {\n\t\t...radioState,\n\t\tdisabled,\n\t\t// Controlled or uncontrolled.\n\t\tstate: checked ?? radioState.state,\n\t\tsetState: onChange ?? radioState.setState,\n\t};\n\n\treturn (\n\t\t<RadioContext.Provider value={ radioContext }>\n\t\t\t<ReakitRadioGroup\n\t\t\t\tref={ ref }\n\t\t\t\tas={ ButtonGroup }\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...radioState }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</RadioContext.Provider>\n\t);\n}\n\n/**\n * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.\n */\nexport default forwardRef( RadioGroup );\n"]}
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { createElement } from "@wordpress/element";
3
+ // @ts-nocheck
3
4
 
4
5
  /**
5
6
  * External dependencies
@@ -14,7 +15,7 @@ import { useContext, forwardRef } from '@wordpress/element';
14
15
  * Internal dependencies
15
16
  */
16
17
 
17
- import Button from '../button';
18
+ import Button from '../../button';
18
19
  import RadioContext from '../radio-context';
19
20
 
20
21
  function Radio(_ref, ref) {
@@ -32,6 +33,10 @@ function Radio(_ref, ref) {
32
33
  value: value
33
34
  }, radioContext, props), children || value);
34
35
  }
36
+ /**
37
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
38
+ */
39
+
35
40
 
36
41
  export default forwardRef(Radio);
37
42
  //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/radio-group/radio/index.js"],"names":["Radio","ReakitRadio","useContext","forwardRef","Button","RadioContext","ref","children","value","props","radioContext","checked","state"],"mappings":";;AAAA;;AAEA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,WAAlB,QAAqC,cAArC;AAEA;AACA;AACA;;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASL,KAAT,OAA+CM,GAA/C,EAAqD;AAAA,MAArC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmB,OAAGC;AAAtB,GAAqC;AACpD,QAAMC,YAAY,GAAGR,UAAU,CAAEG,YAAF,CAA/B;AACA,QAAMM,OAAO,GAAGD,YAAY,CAACE,KAAb,KAAuBJ,KAAvC;AAEA,SACC,cAAC,WAAD;AACC,IAAA,GAAG,EAAGF,GADP;AAEC,IAAA,EAAE,EAAGF,MAFN;AAGC,IAAA,OAAO,EAAGO,OAAO,GAAG,SAAH,GAAe,WAHjC;AAIC,IAAA,KAAK,EAAGH;AAJT,KAKME,YALN,EAMMD,KANN,GAQGF,QAAQ,IAAIC,KARf,CADD;AAYA;AAED;AACA;AACA;;;AACA,eAAeL,UAAU,CAAEH,KAAF,CAAzB","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport { Radio as ReakitRadio } from 'reakit/Radio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport RadioContext from '../radio-context';\n\nfunction Radio( { children, value, ...props }, ref ) {\n\tconst radioContext = useContext( RadioContext );\n\tconst checked = radioContext.state === value;\n\n\treturn (\n\t\t<ReakitRadio\n\t\t\tref={ ref }\n\t\t\tas={ Button }\n\t\t\tvariant={ checked ? 'primary' : 'secondary' }\n\t\t\tvalue={ value }\n\t\t\t{ ...radioContext }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children || value }\n\t\t</ReakitRadio>\n\t);\n}\n\n/**\n * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.\n */\nexport default forwardRef( Radio );\n"]}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/radio-group/radio-context/index.js"],"names":["createContext","RadioContext","state","setState"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AAEA,MAAMC,YAAY,GAAGD,aAAa,CAAE;AACnCE,EAAAA,KAAK,EAAE,IAD4B;AAEnCC,EAAAA,QAAQ,EAAE,MAAM,CAAE;AAFiB,CAAF,CAAlC;AAKA,eAAeF,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst RadioContext = createContext( {\n\tstate: null,\n\tsetState: () => {},\n} );\n\nexport default RadioContext;\n"]}
@@ -32,19 +32,23 @@ export default function Fill(_ref) {
32
32
  name,
33
33
  children
34
34
  } = _ref;
35
- const slot = useSlot(name);
35
+ const {
36
+ registerFill,
37
+ unregisterFill,
38
+ ...slot
39
+ } = useSlot(name);
36
40
  const ref = useRef({
37
41
  rerender: useForceUpdate()
38
42
  });
39
43
  useEffect(() => {
40
- // We register fills so we can keep track of their existance.
44
+ // We register fills so we can keep track of their existence.
41
45
  // Some Slot implementations need to know if there're already fills
42
46
  // registered so they can choose to render themselves or not.
43
- slot.registerFill(ref);
47
+ registerFill(ref);
44
48
  return () => {
45
- slot.unregisterFill(ref);
49
+ unregisterFill(ref);
46
50
  };
47
- }, [slot.registerFill, slot.unregisterFill]);
51
+ }, [registerFill, unregisterFill]);
48
52
 
49
53
  if (!slot.ref || !slot.ref.current) {
50
54
  return null;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useRef","useState","useEffect","createPortal","useSlot","StyleProvider","useForceUpdate","setState","mounted","current","Fill","name","children","slot","ref","rerender","registerFill","unregisterFill","fillProps","wrappedChildren","ownerDocument"],"mappings":";AAAA;;AACA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,QAAjB,EAA2BC,SAA3B,EAAsCC,YAAtC,QAA0D,oBAA1D;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,aAAP,MAA0B,sBAA1B;;AAEA,SAASC,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiBN,QAAQ,CAAE,EAAF,CAA/B;AACA,QAAMO,OAAO,GAAGR,MAAM,CAAE,IAAF,CAAtB;AAEAE,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZM,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GAJQ,EAIN,EAJM,CAAT;AAMA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAED,eAAe,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAMC,IAAI,GAAGT,OAAO,CAAEO,IAAF,CAApB;AACA,QAAMG,GAAG,GAAGd,MAAM,CAAE;AAAEe,IAAAA,QAAQ,EAAET,cAAc;AAA1B,GAAF,CAAlB;AAEAJ,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA;AACAW,IAAAA,IAAI,CAACG,YAAL,CAAmBF,GAAnB;AACA,WAAO,MAAM;AACZD,MAAAA,IAAI,CAACI,cAAL,CAAqBH,GAArB;AACA,KAFD;AAGA,GARQ,EAQN,CAAED,IAAI,CAACG,YAAP,EAAqBH,IAAI,CAACI,cAA1B,CARM,CAAT;;AAUA,MAAK,CAAEJ,IAAI,CAACC,GAAP,IAAc,CAAED,IAAI,CAACC,GAAL,CAASL,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEC,IAAI,CAACK,SAAP,CAAnB;AACA,GApBiD,CAsBlD;AACA;AACA;AACA;;;AACA,QAAMC,eAAe,GACpB,cAAC,aAAD;AAAe,IAAA,QAAQ,EAAGN,IAAI,CAACC,GAAL,CAASL,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAOT,YAAY,CAAEgB,eAAF,EAAmBN,IAAI,CAACC,GAAL,CAASL,OAA5B,CAAnB;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\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 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 existance.\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\tslot.registerFill( ref );\n\t\treturn () => {\n\t\t\tslot.unregisterFill( ref );\n\t\t};\n\t}, [ slot.registerFill, slot.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":["useRef","useState","useEffect","createPortal","useSlot","StyleProvider","useForceUpdate","setState","mounted","current","Fill","name","children","registerFill","unregisterFill","slot","ref","rerender","fillProps","wrappedChildren","ownerDocument"],"mappings":";AAAA;;AACA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,QAAjB,EAA2BC,SAA3B,EAAsCC,YAAtC,QAA0D,oBAA1D;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,aAAP,MAA0B,sBAA1B;;AAEA,SAASC,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiBN,QAAQ,CAAE,EAAF,CAA/B;AACA,QAAMO,OAAO,GAAGR,MAAM,CAAE,IAAF,CAAtB;AAEAE,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZM,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GAJQ,EAIN,EAJM,CAAT;AAMA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAED,eAAe,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgC,OAAGC;AAAnC,MAA4CX,OAAO,CAAEO,IAAF,CAAzD;AACA,QAAMK,GAAG,GAAGhB,MAAM,CAAE;AAAEiB,IAAAA,QAAQ,EAAEX,cAAc;AAA1B,GAAF,CAAlB;AAEAJ,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA;AACAW,IAAAA,YAAY,CAAEG,GAAF,CAAZ;AACA,WAAO,MAAM;AACZF,MAAAA,cAAc,CAAEE,GAAF,CAAd;AACA,KAFD;AAGA,GARQ,EAQN,CAAEH,YAAF,EAAgBC,cAAhB,CARM,CAAT;;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,cAAC,aAAD;AAAe,IAAA,QAAQ,EAAGJ,IAAI,CAACC,GAAL,CAASP,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAOT,YAAY,CAAEgB,eAAF,EAAmBJ,IAAI,CAACC,GAAL,CAASP,OAA5B,CAAnB;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\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"]}
@@ -20,17 +20,22 @@ function Slot(_ref, forwardedRef) {
20
20
  as: Component = 'div',
21
21
  ...props
22
22
  } = _ref;
23
- const registry = useContext(SlotFillContext);
23
+ const {
24
+ registerSlot,
25
+ unregisterSlot,
26
+ ...registry
27
+ } = useContext(SlotFillContext);
24
28
  const ref = useRef();
25
29
  useLayoutEffect(() => {
26
- registry.registerSlot(name, ref, fillProps);
30
+ registerSlot(name, ref, fillProps);
27
31
  return () => {
28
- registry.unregisterSlot(name, ref);
29
- }; // We are not including fillProps in the deps because we don't want to
30
- // unregister and register the slot whenever fillProps change, which would
31
- // cause the fill to be re-mounted. We are only considering the initial value
32
- // of fillProps.
33
- }, [registry.registerSlot, registry.unregisterSlot, name]); // fillProps may be an update that interacts with the layout, so we
32
+ unregisterSlot(name, ref);
33
+ }; // Ignore reason: We don't want to unregister and register the slot whenever
34
+ // `fillProps` change, which would cause the fill to be re-mounted. Instead,
35
+ // we can just update the slot (see hook below).
36
+ // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
37
+ // eslint-disable-next-line react-hooks/exhaustive-deps
38
+ }, [registerSlot, unregisterSlot, name]); // fillProps may be an update that interacts with the layout, so we
34
39
  // useLayoutEffect.
35
40
 
36
41
  useLayoutEffect(() => {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot.js"],"names":["useRef","useLayoutEffect","useContext","forwardRef","useMergeRefs","SlotFillContext","Slot","forwardedRef","name","fillProps","as","Component","props","registry","ref","registerSlot","unregisterSlot","updateSlot"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,SACCA,MADD,EAECC,eAFD,EAGCC,UAHD,EAICC,UAJD,QAKO,oBALP;AAMA,SAASC,YAAT,QAA6B,oBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,qBAA5B;;AAEA,SAASC,IAAT,OAECC,YAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG,EAApB;AAAwBC,IAAAA,EAAE,EAAEC,SAAS,GAAG,KAAxC;AAA+C,OAAGC;AAAlD,GAEC;AACD,QAAMC,QAAQ,GAAGX,UAAU,CAAEG,eAAF,CAA3B;AACA,QAAMS,GAAG,GAAGd,MAAM,EAAlB;AAEAC,EAAAA,eAAe,CAAE,MAAM;AACtBY,IAAAA,QAAQ,CAACE,YAAT,CAAuBP,IAAvB,EAA6BM,GAA7B,EAAkCL,SAAlC;AACA,WAAO,MAAM;AACZI,MAAAA,QAAQ,CAACG,cAAT,CAAyBR,IAAzB,EAA+BM,GAA/B;AACA,KAFD,CAFsB,CAKtB;AACA;AACA;AACA;AACA,GATc,EASZ,CAAED,QAAQ,CAACE,YAAX,EAAyBF,QAAQ,CAACG,cAAlC,EAAkDR,IAAlD,CATY,CAAf,CAJC,CAcD;AACA;;AACAP,EAAAA,eAAe,CAAE,MAAM;AACtBY,IAAAA,QAAQ,CAACI,UAAT,CAAqBT,IAArB,EAA2BC,SAA3B;AACA,GAFc,CAAf;AAIA,SACC,cAAC,SAAD;AAAW,IAAA,GAAG,EAAGL,YAAY,CAAE,CAAEG,YAAF,EAAgBO,GAAhB,CAAF;AAA7B,KAA8DF,KAA9D,EADD;AAGA;;AAED,eAAeT,UAAU,CAAEG,IAAF,CAAzB","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport {\n\tuseRef,\n\tuseLayoutEffect,\n\tuseContext,\n\tforwardRef,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nfunction Slot(\n\t{ name, fillProps = {}, as: Component = 'div', ...props },\n\tforwardedRef\n) {\n\tconst registry = useContext( SlotFillContext );\n\tconst ref = useRef();\n\n\tuseLayoutEffect( () => {\n\t\tregistry.registerSlot( name, ref, fillProps );\n\t\treturn () => {\n\t\t\tregistry.unregisterSlot( name, ref );\n\t\t};\n\t\t// We are not including fillProps in the deps because we don't want to\n\t\t// unregister and register the slot whenever fillProps change, which would\n\t\t// cause the fill to be re-mounted. We are only considering the initial value\n\t\t// of fillProps.\n\t}, [ registry.registerSlot, registry.unregisterSlot, name ] );\n\t// fillProps may be an update that interacts with the layout, so we\n\t// useLayoutEffect.\n\tuseLayoutEffect( () => {\n\t\tregistry.updateSlot( name, fillProps );\n\t} );\n\n\treturn (\n\t\t<Component ref={ useMergeRefs( [ forwardedRef, ref ] ) } { ...props } />\n\t);\n}\n\nexport default forwardRef( Slot );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot.js"],"names":["useRef","useLayoutEffect","useContext","forwardRef","useMergeRefs","SlotFillContext","Slot","forwardedRef","name","fillProps","as","Component","props","registerSlot","unregisterSlot","registry","ref","updateSlot"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,SACCA,MADD,EAECC,eAFD,EAGCC,UAHD,EAICC,UAJD,QAKO,oBALP;AAMA,SAASC,YAAT,QAA6B,oBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,qBAA5B;;AAEA,SAASC,IAAT,OAECC,YAFD,EAGE;AAAA,MAFD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG,EAApB;AAAwBC,IAAAA,EAAE,EAAEC,SAAS,GAAG,KAAxC;AAA+C,OAAGC;AAAlD,GAEC;AACD,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgC,OAAGC;AAAnC,MACLb,UAAU,CAAEG,eAAF,CADX;AAEA,QAAMW,GAAG,GAAGhB,MAAM,EAAlB;AAEAC,EAAAA,eAAe,CAAE,MAAM;AACtBY,IAAAA,YAAY,CAAEL,IAAF,EAAQQ,GAAR,EAAaP,SAAb,CAAZ;AACA,WAAO,MAAM;AACZK,MAAAA,cAAc,CAAEN,IAAF,EAAQQ,GAAR,CAAd;AACA,KAFD,CAFsB,CAKtB;AACA;AACA;AACA;AACA;AACA,GAVc,EAUZ,CAAEH,YAAF,EAAgBC,cAAhB,EAAgCN,IAAhC,CAVY,CAAf,CALC,CAgBD;AACA;;AACAP,EAAAA,eAAe,CAAE,MAAM;AACtBc,IAAAA,QAAQ,CAACE,UAAT,CAAqBT,IAArB,EAA2BC,SAA3B;AACA,GAFc,CAAf;AAIA,SACC,cAAC,SAAD;AAAW,IAAA,GAAG,EAAGL,YAAY,CAAE,CAAEG,YAAF,EAAgBS,GAAhB,CAAF;AAA7B,KAA8DJ,KAA9D,EADD;AAGA;;AAED,eAAeT,UAAU,CAAEG,IAAF,CAAzB","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport {\n\tuseRef,\n\tuseLayoutEffect,\n\tuseContext,\n\tforwardRef,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nfunction Slot(\n\t{ name, fillProps = {}, as: Component = 'div', ...props },\n\tforwardedRef\n) {\n\tconst { registerSlot, unregisterSlot, ...registry } =\n\t\tuseContext( SlotFillContext );\n\tconst ref = useRef();\n\n\tuseLayoutEffect( () => {\n\t\tregisterSlot( name, ref, fillProps );\n\t\treturn () => {\n\t\t\tunregisterSlot( name, ref );\n\t\t};\n\t\t// Ignore reason: We don't want to unregister and register the slot whenever\n\t\t// `fillProps` change, which would cause the fill to be re-mounted. Instead,\n\t\t// we can just update the slot (see hook below).\n\t\t// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ registerSlot, unregisterSlot, name ] );\n\t// fillProps may be an update that interacts with the layout, so we\n\t// useLayoutEffect.\n\tuseLayoutEffect( () => {\n\t\tregistry.updateSlot( name, fillProps );\n\t} );\n\n\treturn (\n\t\t<Component ref={ useMergeRefs( [ forwardedRef, ref ] ) } { ...props } />\n\t);\n}\n\nexport default forwardRef( Slot );\n"]}
@@ -15,7 +15,13 @@ import { useCallback, useContext } from '@wordpress/element';
15
15
 
16
16
  import SlotFillContext from './slot-fill-context';
17
17
  export default function useSlot(name) {
18
- const registry = useContext(SlotFillContext);
18
+ const {
19
+ updateSlot: registryUpdateSlot,
20
+ unregisterSlot: registryUnregisterSlot,
21
+ registerFill: registryRegisterFill,
22
+ unregisterFill: registryUnregisterFill,
23
+ ...registry
24
+ } = useContext(SlotFillContext);
19
25
  const slots = useSnapshot(registry.slots, {
20
26
  sync: true
21
27
  }); // The important bit here is that this call ensures
@@ -24,17 +30,17 @@ export default function useSlot(name) {
24
30
 
25
31
  const slot = slots.get(name);
26
32
  const updateSlot = useCallback(fillProps => {
27
- registry.updateSlot(name, fillProps);
28
- }, [name, registry.updateSlot]);
33
+ registryUpdateSlot(name, fillProps);
34
+ }, [name, registryUpdateSlot]);
29
35
  const unregisterSlot = useCallback(slotRef => {
30
- registry.unregisterSlot(name, slotRef);
31
- }, [name, registry.unregisterSlot]);
36
+ registryUnregisterSlot(name, slotRef);
37
+ }, [name, registryUnregisterSlot]);
32
38
  const registerFill = useCallback(fillRef => {
33
- registry.registerFill(name, fillRef);
34
- }, [name, registry.registerFill]);
39
+ registryRegisterFill(name, fillRef);
40
+ }, [name, registryRegisterFill]);
35
41
  const unregisterFill = useCallback(fillRef => {
36
- registry.unregisterFill(name, fillRef);
37
- }, [name, registry.unregisterFill]);
42
+ registryUnregisterFill(name, fillRef);
43
+ }, [name, registryUnregisterFill]);
38
44
  return { ...slot,
39
45
  updateSlot,
40
46
  unregisterSlot,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot.js"],"names":["useSnapshot","useCallback","useContext","SlotFillContext","useSlot","name","registry","slots","sync","slot","get","updateSlot","fillProps","unregisterSlot","slotRef","registerFill","fillRef","unregisterFill"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,QAA5B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,UAAtB,QAAwC,oBAAxC;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AAEA,eAAe,SAASC,OAAT,CAAkBC,IAAlB,EAAyB;AACvC,QAAMC,QAAQ,GAAGJ,UAAU,CAAEC,eAAF,CAA3B;AACA,QAAMI,KAAK,GAAGP,WAAW,CAAEM,QAAQ,CAACC,KAAX,EAAkB;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAlB,CAAzB,CAFuC,CAGvC;AACA;AACA;;AACA,QAAMC,IAAI,GAAGF,KAAK,CAACG,GAAN,CAAWL,IAAX,CAAb;AAEA,QAAMM,UAAU,GAAGV,WAAW,CAC3BW,SAAF,IAAiB;AAChBN,IAAAA,QAAQ,CAACK,UAAT,CAAqBN,IAArB,EAA2BO,SAA3B;AACA,GAH4B,EAI7B,CAAEP,IAAF,EAAQC,QAAQ,CAACK,UAAjB,CAJ6B,CAA9B;AAOA,QAAME,cAAc,GAAGZ,WAAW,CAC/Ba,OAAF,IAAe;AACdR,IAAAA,QAAQ,CAACO,cAAT,CAAyBR,IAAzB,EAA+BS,OAA/B;AACA,GAHgC,EAIjC,CAAET,IAAF,EAAQC,QAAQ,CAACO,cAAjB,CAJiC,CAAlC;AAOA,QAAME,YAAY,GAAGd,WAAW,CAC7Be,OAAF,IAAe;AACdV,IAAAA,QAAQ,CAACS,YAAT,CAAuBV,IAAvB,EAA6BW,OAA7B;AACA,GAH8B,EAI/B,CAAEX,IAAF,EAAQC,QAAQ,CAACS,YAAjB,CAJ+B,CAAhC;AAOA,QAAME,cAAc,GAAGhB,WAAW,CAC/Be,OAAF,IAAe;AACdV,IAAAA,QAAQ,CAACW,cAAT,CAAyBZ,IAAzB,EAA+BW,OAA/B;AACA,GAHgC,EAIjC,CAAEX,IAAF,EAAQC,QAAQ,CAACW,cAAjB,CAJiC,CAAlC;AAOA,SAAO,EACN,GAAGR,IADG;AAENE,IAAAA,UAFM;AAGNE,IAAAA,cAHM;AAINE,IAAAA,YAJM;AAKNE,IAAAA;AALM,GAAP;AAOA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nexport default function useSlot( name ) {\n\tconst registry = useContext( SlotFillContext );\n\tconst slots = useSnapshot( registry.slots, { sync: true } );\n\t// The important bit here is that this call ensures\n\t// the hook only causes a re-render if the slot\n\t// with the given name change, not any other slot.\n\tconst slot = slots.get( name );\n\n\tconst updateSlot = useCallback(\n\t\t( fillProps ) => {\n\t\t\tregistry.updateSlot( name, fillProps );\n\t\t},\n\t\t[ name, registry.updateSlot ]\n\t);\n\n\tconst unregisterSlot = useCallback(\n\t\t( slotRef ) => {\n\t\t\tregistry.unregisterSlot( name, slotRef );\n\t\t},\n\t\t[ name, registry.unregisterSlot ]\n\t);\n\n\tconst registerFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistry.registerFill( name, fillRef );\n\t\t},\n\t\t[ name, registry.registerFill ]\n\t);\n\n\tconst unregisterFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistry.unregisterFill( name, fillRef );\n\t\t},\n\t\t[ name, registry.unregisterFill ]\n\t);\n\n\treturn {\n\t\t...slot,\n\t\tupdateSlot,\n\t\tunregisterSlot,\n\t\tregisterFill,\n\t\tunregisterFill,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot.js"],"names":["useSnapshot","useCallback","useContext","SlotFillContext","useSlot","name","updateSlot","registryUpdateSlot","unregisterSlot","registryUnregisterSlot","registerFill","registryRegisterFill","unregisterFill","registryUnregisterFill","registry","slots","sync","slot","get","fillProps","slotRef","fillRef"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,QAA5B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,UAAtB,QAAwC,oBAAxC;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AAEA,eAAe,SAASC,OAAT,CAAkBC,IAAlB,EAAyB;AACvC,QAAM;AACLC,IAAAA,UAAU,EAAEC,kBADP;AAELC,IAAAA,cAAc,EAAEC,sBAFX;AAGLC,IAAAA,YAAY,EAAEC,oBAHT;AAILC,IAAAA,cAAc,EAAEC,sBAJX;AAKL,OAAGC;AALE,MAMFZ,UAAU,CAAEC,eAAF,CANd;AAOA,QAAMY,KAAK,GAAGf,WAAW,CAAEc,QAAQ,CAACC,KAAX,EAAkB;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAlB,CAAzB,CARuC,CASvC;AACA;AACA;;AACA,QAAMC,IAAI,GAAGF,KAAK,CAACG,GAAN,CAAWb,IAAX,CAAb;AAEA,QAAMC,UAAU,GAAGL,WAAW,CAC3BkB,SAAF,IAAiB;AAChBZ,IAAAA,kBAAkB,CAAEF,IAAF,EAAQc,SAAR,CAAlB;AACA,GAH4B,EAI7B,CAAEd,IAAF,EAAQE,kBAAR,CAJ6B,CAA9B;AAOA,QAAMC,cAAc,GAAGP,WAAW,CAC/BmB,OAAF,IAAe;AACdX,IAAAA,sBAAsB,CAAEJ,IAAF,EAAQe,OAAR,CAAtB;AACA,GAHgC,EAIjC,CAAEf,IAAF,EAAQI,sBAAR,CAJiC,CAAlC;AAOA,QAAMC,YAAY,GAAGT,WAAW,CAC7BoB,OAAF,IAAe;AACdV,IAAAA,oBAAoB,CAAEN,IAAF,EAAQgB,OAAR,CAApB;AACA,GAH8B,EAI/B,CAAEhB,IAAF,EAAQM,oBAAR,CAJ+B,CAAhC;AAOA,QAAMC,cAAc,GAAGX,WAAW,CAC/BoB,OAAF,IAAe;AACdR,IAAAA,sBAAsB,CAAER,IAAF,EAAQgB,OAAR,CAAtB;AACA,GAHgC,EAIjC,CAAEhB,IAAF,EAAQQ,sBAAR,CAJiC,CAAlC;AAOA,SAAO,EACN,GAAGI,IADG;AAENX,IAAAA,UAFM;AAGNE,IAAAA,cAHM;AAINE,IAAAA,YAJM;AAKNE,IAAAA;AALM,GAAP;AAOA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nexport default function useSlot( name ) {\n\tconst {\n\t\tupdateSlot: registryUpdateSlot,\n\t\tunregisterSlot: registryUnregisterSlot,\n\t\tregisterFill: registryRegisterFill,\n\t\tunregisterFill: registryUnregisterFill,\n\t\t...registry\n\t} = useContext( SlotFillContext );\n\tconst slots = useSnapshot( registry.slots, { sync: true } );\n\t// The important bit here is that this call ensures\n\t// the hook only causes a re-render if the slot\n\t// with the given name change, not any other slot.\n\tconst slot = slots.get( name );\n\n\tconst updateSlot = useCallback(\n\t\t( fillProps ) => {\n\t\t\tregistryUpdateSlot( name, fillProps );\n\t\t},\n\t\t[ name, registryUpdateSlot ]\n\t);\n\n\tconst unregisterSlot = useCallback(\n\t\t( slotRef ) => {\n\t\t\tregistryUnregisterSlot( name, slotRef );\n\t\t},\n\t\t[ name, registryUnregisterSlot ]\n\t);\n\n\tconst registerFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistryRegisterFill( name, fillRef );\n\t\t},\n\t\t[ name, registryRegisterFill ]\n\t);\n\n\tconst unregisterFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistryUnregisterFill( name, fillRef );\n\t\t},\n\t\t[ name, registryUnregisterFill ]\n\t);\n\n\treturn {\n\t\t...slot,\n\t\tupdateSlot,\n\t\tunregisterSlot,\n\t\tregisterFill,\n\t\tunregisterFill,\n\t};\n}\n"]}
@@ -26,15 +26,21 @@ function FillComponent(_ref) {
26
26
  children
27
27
  });
28
28
  useLayoutEffect(() => {
29
- registerFill(name, ref.current);
30
- return () => unregisterFill(name, ref.current);
29
+ const refValue = ref.current;
30
+ registerFill(name, refValue);
31
+ return () => unregisterFill(name, refValue); // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
32
+ // We'll leave them as-is until a more detailed investigation/refactor can be performed.
33
+ // eslint-disable-next-line react-hooks/exhaustive-deps
31
34
  }, []);
32
35
  useLayoutEffect(() => {
33
36
  ref.current.children = children;
34
37
 
35
38
  if (slot) {
36
39
  slot.forceUpdate();
37
- }
40
+ } // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
41
+ // We'll leave them as-is until a more detailed investigation/refactor can be performed.
42
+ // eslint-disable-next-line react-hooks/exhaustive-deps
43
+
38
44
  }, [children]);
39
45
  useLayoutEffect(() => {
40
46
  if (name === ref.current.name) {
@@ -44,7 +50,9 @@ function FillComponent(_ref) {
44
50
 
45
51
  unregisterFill(ref.current.name, ref.current);
46
52
  ref.current.name = name;
47
- registerFill(name, ref.current);
53
+ registerFill(name, ref.current); // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
54
+ // We'll leave them as-is until a more detailed investigation/refactor can be performed.
55
+ // eslint-disable-next-line react-hooks/exhaustive-deps
48
56
  }, [name]);
49
57
 
50
58
  if (!slot || !slot.node) {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/fill.js"],"names":["createPortal","useLayoutEffect","useRef","SlotFillContext","useSlot","FillComponent","name","children","registerFill","unregisterFill","slot","ref","current","forceUpdate","node","props","fillProps","Fill"],"mappings":";;AAAA;;AAEA;AACA;AACA;AACA,SAASA,YAAT,EAAuBC,eAAvB,EAAwCC,MAAxC,QAAsD,oBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,WAA5B;AACA,OAAOC,OAAP,MAAoB,YAApB;;AAEA,SAASC,aAAT,OAA2E;AAAA,MAAnD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,YAAlB;AAAgCC,IAAAA;AAAhC,GAAmD;AAC1E,QAAMC,IAAI,GAAGN,OAAO,CAAEE,IAAF,CAApB;AAEA,QAAMK,GAAG,GAAGT,MAAM,CAAE;AACnBI,IAAAA,IADmB;AAEnBC,IAAAA;AAFmB,GAAF,CAAlB;AAKAN,EAAAA,eAAe,CAAE,MAAM;AACtBO,IAAAA,YAAY,CAAEF,IAAF,EAAQK,GAAG,CAACC,OAAZ,CAAZ;AACA,WAAO,MAAMH,cAAc,CAAEH,IAAF,EAAQK,GAAG,CAACC,OAAZ,CAA3B;AACA,GAHc,EAGZ,EAHY,CAAf;AAKAX,EAAAA,eAAe,CAAE,MAAM;AACtBU,IAAAA,GAAG,CAACC,OAAJ,CAAYL,QAAZ,GAAuBA,QAAvB;;AACA,QAAKG,IAAL,EAAY;AACXA,MAAAA,IAAI,CAACG,WAAL;AACA;AACD,GALc,EAKZ,CAAEN,QAAF,CALY,CAAf;AAOAN,EAAAA,eAAe,CAAE,MAAM;AACtB,QAAKK,IAAI,KAAKK,GAAG,CAACC,OAAJ,CAAYN,IAA1B,EAAiC;AAChC;AACA;AACA;;AACDG,IAAAA,cAAc,CAAEE,GAAG,CAACC,OAAJ,CAAYN,IAAd,EAAoBK,GAAG,CAACC,OAAxB,CAAd;AACAD,IAAAA,GAAG,CAACC,OAAJ,CAAYN,IAAZ,GAAmBA,IAAnB;AACAE,IAAAA,YAAY,CAAEF,IAAF,EAAQK,GAAG,CAACC,OAAZ,CAAZ;AACA,GARc,EAQZ,CAAEN,IAAF,CARY,CAAf;;AAUA,MAAK,CAAEI,IAAF,IAAU,CAAEA,IAAI,CAACI,IAAtB,EAA6B;AAC5B,WAAO,IAAP;AACA,GAhCyE,CAkC1E;;;AACA,MAAK,OAAOP,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEG,IAAI,CAACK,KAAL,CAAWC,SAAb,CAAnB;AACA;;AAED,SAAOhB,YAAY,CAAEO,QAAF,EAAYG,IAAI,CAACI,IAAjB,CAAnB;AACA;;AAED,MAAMG,IAAI,GAAKF,KAAF,IACZ,cAAC,eAAD,CAAiB,QAAjB,QACG;AAAA,MAAE;AAAEP,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAAF;AAAA,SACD,cAAC,aAAD,eACMM,KADN;AAEC,IAAA,YAAY,EAAGP,YAFhB;AAGC,IAAA,cAAc,EAAGC;AAHlB,KADC;AAAA,CADH,CADD;;AAYA,eAAeQ,IAAf","sourcesContent":["// @ts-nocheck\n\n/**\n * WordPress dependencies\n */\nimport { createPortal, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport useSlot from './use-slot';\n\nfunction FillComponent( { name, children, registerFill, unregisterFill } ) {\n\tconst slot = useSlot( name );\n\n\tconst ref = useRef( {\n\t\tname,\n\t\tchildren,\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tregisterFill( name, ref.current );\n\t\treturn () => unregisterFill( name, ref.current );\n\t}, [] );\n\n\tuseLayoutEffect( () => {\n\t\tref.current.children = children;\n\t\tif ( slot ) {\n\t\t\tslot.forceUpdate();\n\t\t}\n\t}, [ children ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( name === ref.current.name ) {\n\t\t\t// Ignore initial effect.\n\t\t\treturn;\n\t\t}\n\t\tunregisterFill( ref.current.name, ref.current );\n\t\tref.current.name = name;\n\t\tregisterFill( name, ref.current );\n\t}, [ name ] );\n\n\tif ( ! slot || ! slot.node ) {\n\t\treturn null;\n\t}\n\n\t// If a function is passed as a child, provide it with the fillProps.\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.props.fillProps );\n\t}\n\n\treturn createPortal( children, slot.node );\n}\n\nconst Fill = ( props ) => (\n\t<SlotFillContext.Consumer>\n\t\t{ ( { registerFill, unregisterFill } ) => (\n\t\t\t<FillComponent\n\t\t\t\t{ ...props }\n\t\t\t\tregisterFill={ registerFill }\n\t\t\t\tunregisterFill={ unregisterFill }\n\t\t\t/>\n\t\t) }\n\t</SlotFillContext.Consumer>\n);\n\nexport default Fill;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/fill.js"],"names":["createPortal","useLayoutEffect","useRef","SlotFillContext","useSlot","FillComponent","name","children","registerFill","unregisterFill","slot","ref","refValue","current","forceUpdate","node","props","fillProps","Fill"],"mappings":";;AAAA;;AAEA;AACA;AACA;AACA,SAASA,YAAT,EAAuBC,eAAvB,EAAwCC,MAAxC,QAAsD,oBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,WAA5B;AACA,OAAOC,OAAP,MAAoB,YAApB;;AAEA,SAASC,aAAT,OAA2E;AAAA,MAAnD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,YAAlB;AAAgCC,IAAAA;AAAhC,GAAmD;AAC1E,QAAMC,IAAI,GAAGN,OAAO,CAAEE,IAAF,CAApB;AAEA,QAAMK,GAAG,GAAGT,MAAM,CAAE;AACnBI,IAAAA,IADmB;AAEnBC,IAAAA;AAFmB,GAAF,CAAlB;AAKAN,EAAAA,eAAe,CAAE,MAAM;AACtB,UAAMW,QAAQ,GAAGD,GAAG,CAACE,OAArB;AACAL,IAAAA,YAAY,CAAEF,IAAF,EAAQM,QAAR,CAAZ;AACA,WAAO,MAAMH,cAAc,CAAEH,IAAF,EAAQM,QAAR,CAA3B,CAHsB,CAItB;AACA;AACA;AACA,GAPc,EAOZ,EAPY,CAAf;AASAX,EAAAA,eAAe,CAAE,MAAM;AACtBU,IAAAA,GAAG,CAACE,OAAJ,CAAYN,QAAZ,GAAuBA,QAAvB;;AACA,QAAKG,IAAL,EAAY;AACXA,MAAAA,IAAI,CAACI,WAAL;AACA,KAJqB,CAKtB;AACA;AACA;;AACA,GARc,EAQZ,CAAEP,QAAF,CARY,CAAf;AAUAN,EAAAA,eAAe,CAAE,MAAM;AACtB,QAAKK,IAAI,KAAKK,GAAG,CAACE,OAAJ,CAAYP,IAA1B,EAAiC;AAChC;AACA;AACA;;AACDG,IAAAA,cAAc,CAAEE,GAAG,CAACE,OAAJ,CAAYP,IAAd,EAAoBK,GAAG,CAACE,OAAxB,CAAd;AACAF,IAAAA,GAAG,CAACE,OAAJ,CAAYP,IAAZ,GAAmBA,IAAnB;AACAE,IAAAA,YAAY,CAAEF,IAAF,EAAQK,GAAG,CAACE,OAAZ,CAAZ,CAPsB,CAQtB;AACA;AACA;AACA,GAXc,EAWZ,CAAEP,IAAF,CAXY,CAAf;;AAaA,MAAK,CAAEI,IAAF,IAAU,CAAEA,IAAI,CAACK,IAAtB,EAA6B;AAC5B,WAAO,IAAP;AACA,GA1CyE,CA4C1E;;;AACA,MAAK,OAAOR,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEG,IAAI,CAACM,KAAL,CAAWC,SAAb,CAAnB;AACA;;AAED,SAAOjB,YAAY,CAAEO,QAAF,EAAYG,IAAI,CAACK,IAAjB,CAAnB;AACA;;AAED,MAAMG,IAAI,GAAKF,KAAF,IACZ,cAAC,eAAD,CAAiB,QAAjB,QACG;AAAA,MAAE;AAAER,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAAF;AAAA,SACD,cAAC,aAAD,eACMO,KADN;AAEC,IAAA,YAAY,EAAGR,YAFhB;AAGC,IAAA,cAAc,EAAGC;AAHlB,KADC;AAAA,CADH,CADD;;AAYA,eAAeS,IAAf","sourcesContent":["// @ts-nocheck\n\n/**\n * WordPress dependencies\n */\nimport { createPortal, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport useSlot from './use-slot';\n\nfunction FillComponent( { name, children, registerFill, unregisterFill } ) {\n\tconst slot = useSlot( name );\n\n\tconst ref = useRef( {\n\t\tname,\n\t\tchildren,\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tconst refValue = ref.current;\n\t\tregisterFill( name, refValue );\n\t\treturn () => unregisterFill( name, refValue );\n\t\t// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.\n\t\t// We'll leave them as-is until a more detailed investigation/refactor can be performed.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseLayoutEffect( () => {\n\t\tref.current.children = children;\n\t\tif ( slot ) {\n\t\t\tslot.forceUpdate();\n\t\t}\n\t\t// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.\n\t\t// We'll leave them as-is until a more detailed investigation/refactor can be performed.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ children ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( name === ref.current.name ) {\n\t\t\t// Ignore initial effect.\n\t\t\treturn;\n\t\t}\n\t\tunregisterFill( ref.current.name, ref.current );\n\t\tref.current.name = name;\n\t\tregisterFill( name, ref.current );\n\t\t// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.\n\t\t// We'll leave them as-is until a more detailed investigation/refactor can be performed.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ name ] );\n\n\tif ( ! slot || ! slot.node ) {\n\t\treturn null;\n\t}\n\n\t// If a function is passed as a child, provide it with the fillProps.\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.props.fillProps );\n\t}\n\n\treturn createPortal( children, slot.node );\n}\n\nconst Fill = ( props ) => (\n\t<SlotFillContext.Consumer>\n\t\t{ ( { registerFill, unregisterFill } ) => (\n\t\t\t<FillComponent\n\t\t\t\t{ ...props }\n\t\t\t\tregisterFill={ registerFill }\n\t\t\t\tunregisterFill={ unregisterFill }\n\t\t\t/>\n\t\t) }\n\t</SlotFillContext.Consumer>\n);\n\nexport default Fill;\n"]}
@@ -27,7 +27,9 @@ const useSlot = name => {
27
27
  const unsubscribe = subscribe(() => {
28
28
  setSlot(getSlot(name));
29
29
  });
30
- return unsubscribe;
30
+ return unsubscribe; // Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,
31
+ // so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.
32
+ // eslint-disable-next-line react-hooks/exhaustive-deps
31
33
  }, [name]);
32
34
  return slot;
33
35
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/use-slot.js"],"names":["useContext","useState","useEffect","SlotFillContext","useSlot","name","getSlot","subscribe","slot","setSlot","unsubscribe"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,QAArB,EAA+BC,SAA/B,QAAgD,oBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,WAA5B;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,OAAO,GAAKC,IAAF,IAAY;AAC3B,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAyBP,UAAU,CAAEG,eAAF,CAAzC;AACA,QAAM,CAAEK,IAAF,EAAQC,OAAR,IAAoBR,QAAQ,CAAEK,OAAO,CAAED,IAAF,CAAT,CAAlC;AAEAH,EAAAA,SAAS,CAAE,MAAM;AAChBO,IAAAA,OAAO,CAAEH,OAAO,CAAED,IAAF,CAAT,CAAP;AACA,UAAMK,WAAW,GAAGH,SAAS,CAAE,MAAM;AACpCE,MAAAA,OAAO,CAAEH,OAAO,CAAED,IAAF,CAAT,CAAP;AACA,KAF4B,CAA7B;AAIA,WAAOK,WAAP;AACA,GAPQ,EAON,CAAEL,IAAF,CAPM,CAAT;AASA,SAAOG,IAAP;AACA,CAdD;;AAgBA,eAAeJ,OAAf","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useContext, useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\n\n/**\n * React hook returning the active slot given a name.\n *\n * @param {string} name Slot name.\n * @return {Object} Slot object.\n */\nconst useSlot = ( name ) => {\n\tconst { getSlot, subscribe } = useContext( SlotFillContext );\n\tconst [ slot, setSlot ] = useState( getSlot( name ) );\n\n\tuseEffect( () => {\n\t\tsetSlot( getSlot( name ) );\n\t\tconst unsubscribe = subscribe( () => {\n\t\t\tsetSlot( getSlot( name ) );\n\t\t} );\n\n\t\treturn unsubscribe;\n\t}, [ name ] );\n\n\treturn slot;\n};\n\nexport default useSlot;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/use-slot.js"],"names":["useContext","useState","useEffect","SlotFillContext","useSlot","name","getSlot","subscribe","slot","setSlot","unsubscribe"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,QAArB,EAA+BC,SAA/B,QAAgD,oBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,WAA5B;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,OAAO,GAAKC,IAAF,IAAY;AAC3B,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAyBP,UAAU,CAAEG,eAAF,CAAzC;AACA,QAAM,CAAEK,IAAF,EAAQC,OAAR,IAAoBR,QAAQ,CAAEK,OAAO,CAAED,IAAF,CAAT,CAAlC;AAEAH,EAAAA,SAAS,CAAE,MAAM;AAChBO,IAAAA,OAAO,CAAEH,OAAO,CAAED,IAAF,CAAT,CAAP;AACA,UAAMK,WAAW,GAAGH,SAAS,CAAE,MAAM;AACpCE,MAAAA,OAAO,CAAEH,OAAO,CAAED,IAAF,CAAT,CAAP;AACA,KAF4B,CAA7B;AAIA,WAAOK,WAAP,CANgB,CAOhB;AACA;AACA;AACA,GAVQ,EAUN,CAAEL,IAAF,CAVM,CAAT;AAYA,SAAOG,IAAP;AACA,CAjBD;;AAmBA,eAAeJ,OAAf","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useContext, useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\n\n/**\n * React hook returning the active slot given a name.\n *\n * @param {string} name Slot name.\n * @return {Object} Slot object.\n */\nconst useSlot = ( name ) => {\n\tconst { getSlot, subscribe } = useContext( SlotFillContext );\n\tconst [ slot, setSlot ] = useState( getSlot( name ) );\n\n\tuseEffect( () => {\n\t\tsetSlot( getSlot( name ) );\n\t\tconst unsubscribe = subscribe( () => {\n\t\t\tsetSlot( getSlot( name ) );\n\t\t} );\n\n\t\treturn unsubscribe;\n\t\t// Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,\n\t\t// so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ name ] );\n\n\treturn slot;\n};\n\nexport default useSlot;\n"]}
@@ -88,7 +88,7 @@ function Snackbar(_ref, ref) {
88
88
  }
89
89
  }, NOTICE_TIMEOUT);
90
90
  return () => clearTimeout(timeoutHandle);
91
- }, [onDismiss, onRemove]);
91
+ }, [onDismiss, onRemove, explicitDismiss]);
92
92
  const classes = classnames(className, 'components-snackbar', {
93
93
  'components-snackbar-explicit-dismiss': !!explicitDismiss
94
94
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/snackbar/index.js"],"names":["classnames","speak","useEffect","forwardRef","renderToString","__","warning","Button","noop","NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","Snackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","map","index","label","url"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\n\nconst noop = () => {};\nconst NOTICE_TIMEOUT = 10000;\n\n/** @typedef {import('@wordpress/element').WPElement} WPElement */\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param {string|WPElement} [message] Message to announce.\n * @param {'polite'|'assertive'} politeness Politeness to announce.\n */\nfunction useSpokenMessage( message, politeness ) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction Snackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove = noop,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss = noop,\n\t\tlistRef,\n\t},\n\tref\n) {\n\tonDismiss = onDismiss || noop;\n\n\tfunction dismissMe( event ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef.current.focus();\n\n\t\tonDismiss();\n\t\tonRemove();\n\t}\n\n\tfunction onActionClick( event, onClick ) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss();\n\t\t\t\tonRemove();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : noop }\n\t\t\ttabIndex=\"0\"\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : noop }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ ( event ) =>\n\t\t\t\t\t\t\t\tonActionClick( event, onClick )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( Snackbar );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/snackbar/index.js"],"names":["classnames","speak","useEffect","forwardRef","renderToString","__","warning","Button","noop","NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","Snackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","map","index","label","url"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\n\nconst noop = () => {};\nconst NOTICE_TIMEOUT = 10000;\n\n/** @typedef {import('@wordpress/element').WPElement} WPElement */\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param {string|WPElement} [message] Message to announce.\n * @param {'polite'|'assertive'} politeness Politeness to announce.\n */\nfunction useSpokenMessage( message, politeness ) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction Snackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove = noop,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss = noop,\n\t\tlistRef,\n\t},\n\tref\n) {\n\tonDismiss = onDismiss || noop;\n\n\tfunction dismissMe( event ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef.current.focus();\n\n\t\tonDismiss();\n\t\tonRemove();\n\t}\n\n\tfunction onActionClick( event, onClick ) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss();\n\t\t\t\tonRemove();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : noop }\n\t\t\ttabIndex=\"0\"\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : noop }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ ( event ) =>\n\t\t\t\t\t\t\t\tonActionClick( event, onClick )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( Snackbar );\n"]}
@@ -102,14 +102,10 @@ export function TabPanel(_ref2) {
102
102
  });
103
103
  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`;
104
104
  useEffect(() => {
105
- const newSelectedTab = find(tabs, {
106
- name: selected
107
- });
108
-
109
- if (!newSelectedTab && tabs.length > 0) {
105
+ if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.name) && tabs.length > 0) {
110
106
  handleTabSelection(initialTabName || tabs[0].name);
111
107
  }
112
- }, [tabs]);
108
+ }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName]);
113
109
  return createElement("div", {
114
110
  className: className
115
111
  }, createElement(NavigableMenu, {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","find","useState","useEffect","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","newSelectedTab","length","map","tab","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tconst newSelectedTab = find( tabs, { name: selected } );\n\t\tif ( ! newSelectedTab && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","find","useState","useEffect","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","length","map","tab","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
@@ -53,8 +53,6 @@ function UnforwardedTextControl(props, ref) {
53
53
  /**
54
54
  * TextControl components let users enter and edit text.
55
55
  *
56
- *
57
- * @example
58
56
  * ```jsx
59
57
  * import { TextControl } from '@wordpress/components';
60
58
  * import { useState } from '@wordpress/element';
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/text-control/index.tsx"],"names":["useInstanceId","forwardRef","BaseControl","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","className","onChange","type","additionalProps","instanceId","TextControl","id","onChangeValue","event","target","undefined"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAIA,SAASC,sBAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,mBAHK;AAILC,IAAAA,KAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,SANK;AAOLC,IAAAA,QAPK;AAQLC,IAAAA,IAAI,GAAG,MARF;AASL,OAAGC;AATE,MAUFV,KAVJ;AAWA,QAAMW,UAAU,GAAGf,aAAa,CAAEgB,WAAF,CAAhC;AACA,QAAMC,EAAE,GAAI,0BAA0BF,UAAY,EAAlD;;AACA,QAAMG,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaX,KAAf,CADT;;AAGA,SACC,cAAC,WAAD;AACC,IAAA,uBAAuB,EAAGH,uBAD3B;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,mBAAmB,EAAGC,mBAHvB;AAIC,IAAA,EAAE,EAAGS,EAJN;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,SAAS,EAAGC;AANb,KAQC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,IAAI,EAAGE,IAFR;AAGC,IAAA,EAAE,EAAGI,EAHN;AAIC,IAAA,KAAK,EAAGR,KAJT;AAKC,IAAA,QAAQ,EAAGS,aALZ;AAMC,wBAAmB,CAAC,CAAER,IAAH,GAAUO,EAAE,GAAG,QAAf,GAA0BI,SAN9C;AAOC,IAAA,GAAG,EAAGhB;AAPP,KAQMS,eARN,EARD,CADD;AAqBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,WAAW,GAAGf,UAAU,CAAEE,sBAAF,CAA9B;AAEP,eAAea,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextControl );\n\tconst id = `inspector-text-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName=\"components-text-control__input\"\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n *\n * @example\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n * const [ className, setClassName ] = useState( '' );\n *\n * return (\n * <TextControl\n * label=\"Additional CSS Class\"\n * value={ className }\n * onChange={ ( value ) => setClassName( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/text-control/index.tsx"],"names":["useInstanceId","forwardRef","BaseControl","UnforwardedTextControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","className","onChange","type","additionalProps","instanceId","TextControl","id","onChangeValue","event","target","undefined"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,oBAA9B;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAIA,SAASC,sBAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,mBAHK;AAILC,IAAAA,KAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,SANK;AAOLC,IAAAA,QAPK;AAQLC,IAAAA,IAAI,GAAG,MARF;AASL,OAAGC;AATE,MAUFV,KAVJ;AAWA,QAAMW,UAAU,GAAGf,aAAa,CAAEgB,WAAF,CAAhC;AACA,QAAMC,EAAE,GAAI,0BAA0BF,UAAY,EAAlD;;AACA,QAAMG,aAAa,GAAKC,KAAF,IACrBP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaX,KAAf,CADT;;AAGA,SACC,cAAC,WAAD;AACC,IAAA,uBAAuB,EAAGH,uBAD3B;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,mBAAmB,EAAGC,mBAHvB;AAIC,IAAA,EAAE,EAAGS,EAJN;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,SAAS,EAAGC;AANb,KAQC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,IAAI,EAAGE,IAFR;AAGC,IAAA,EAAE,EAAGI,EAHN;AAIC,IAAA,KAAK,EAAGR,KAJT;AAKC,IAAA,QAAQ,EAAGS,aALZ;AAMC,wBAAmB,CAAC,CAAER,IAAH,GAAUO,EAAE,GAAG,QAAf,GAA0BI,SAN9C;AAOC,IAAA,GAAG,EAAGhB;AAPP,KAQMS,eARN,EARD,CADD;AAqBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAME,WAAW,GAAGf,UAAU,CAAEE,sBAAF,CAA9B;AAEP,eAAea,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TextControlProps } from './types';\n\nfunction UnforwardedTextControl(\n\tprops: WordPressComponentProps< TextControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\ttype = 'text',\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextControl );\n\tconst id = `inspector-text-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<input\n\t\t\t\tclassName=\"components-text-control__input\"\n\t\t\t\ttype={ type }\n\t\t\t\tid={ id }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n * const [ className, setClassName ] = useState( '' );\n *\n * return (\n * <TextControl\n * label=\"Additional CSS Class\"\n * value={ className }\n * onChange={ ( value ) => setClassName( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextControl = forwardRef( UnforwardedTextControl );\n\nexport default TextControl;\n"]}
@@ -59,12 +59,24 @@ export function ToggleControl(_ref) {
59
59
  const cx = useCx();
60
60
  const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/css({
61
61
  marginBottom: space(3)
62
- }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBGb3JtVG9nZ2xlIGZyb20gJy4uL2Zvcm0tdG9nZ2xlJztcbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL3VpL2NvbnRleHQvd29yZHByZXNzLWNvbXBvbmVudCc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUNvbnRyb2xQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG4vKipcbiAqIFRvZ2dsZUNvbnRyb2wgaXMgdXNlZCB0byBnZW5lcmF0ZSBhIHRvZ2dsZSB1c2VyIGludGVyZmFjZS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFRvZ2dsZUNvbnRyb2wgfSBmcm9tICdAd29yZHByZXNzL2NvbXBvbmVudHMnO1xuICogaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuICpcbiAqIGNvbnN0IE15VG9nZ2xlQ29udHJvbCA9ICgpID0+IHtcbiAqICAgY29uc3QgWyB2YWx1ZSwgc2V0VmFsdWUgXSA9IHVzZVN0YXRlKCBmYWxzZSApO1xuICpcbiAqICAgcmV0dXJuIChcbiAqICAgICA8VG9nZ2xlQ29udHJvbFxuICogICAgICAgbGFiZWw9XCJGaXhlZCBCYWNrZ3JvdW5kXCJcbiAqICAgICAgIGNoZWNrZWQ9eyB2YWx1ZSB9XG4gKiAgICAgICBvbkNoYW5nZT17ICgpID0+IHNldFZhbHVlKCAoIHN0YXRlICkgPT4gISBzdGF0ZSApIH1cbiAqICAgICAvPlxuICogICApO1xuICogfTtcbiAqIGBgYFxuICovXG5leHBvcnQgZnVuY3Rpb24gVG9nZ2xlQ29udHJvbCgge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbSxcblx0bGFiZWwsXG5cdGNoZWNrZWQsXG5cdGhlbHAsXG5cdGNsYXNzTmFtZSxcblx0b25DaGFuZ2UsXG5cdGRpc2FibGVkLFxufTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IFRvZ2dsZUNvbnRyb2xQcm9wcywgJ2lucHV0JywgZmFsc2UgPiApIHtcblx0ZnVuY3Rpb24gb25DaGFuZ2VUb2dnbGUoIGV2ZW50OiBDaGFuZ2VFdmVudDwgSFRNTElucHV0RWxlbWVudCA+ICkge1xuXHRcdG9uQ2hhbmdlKCBldmVudC50YXJnZXQuY2hlY2tlZCApO1xuXHR9XG5cdGNvbnN0IGluc3RhbmNlSWQgPSB1c2VJbnN0YW5jZUlkKCBUb2dnbGVDb250cm9sICk7XG5cdGNvbnN0IGlkID0gYGluc3BlY3Rvci10b2dnbGUtY29udHJvbC0keyBpbnN0YW5jZUlkIH1gO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblx0Y29uc3QgY2xhc3NlcyA9IGN4KFxuXHRcdCdjb21wb25lbnRzLXRvZ2dsZS1jb250cm9sJyxcblx0XHRjbGFzc05hbWUsXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBjc3MoIHsgbWFyZ2luQm90dG9tOiBzcGFjZSggMyApIH0gKVxuXHQpO1xuXG5cdGxldCBkZXNjcmliZWRCeSwgaGVscExhYmVsO1xuXHRpZiAoIGhlbHAgKSB7XG5cdFx0ZGVzY3JpYmVkQnkgPSBpZCArICdfX2hlbHAnO1xuXHRcdGhlbHBMYWJlbCA9IHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nID8gaGVscCggY2hlY2tlZCApIDogaGVscDtcblx0fVxuXG5cdHJldHVybiAoXG5cdFx0PEJhc2VDb250cm9sXG5cdFx0XHRpZD17IGlkIH1cblx0XHRcdGhlbHA9eyBoZWxwTGFiZWwgfVxuXHRcdFx0Y2xhc3NOYW1lPXsgY2xhc3NlcyB9XG5cdFx0XHRfX25leHRIYXNOb01hcmdpbkJvdHRvbVxuXHRcdD5cblx0XHRcdDxIU3RhY2sganVzdGlmeT1cImZsZXgtc3RhcnRcIiBzcGFjaW5nPXsgMyB9PlxuXHRcdFx0XHQ8Rm9ybVRvZ2dsZVxuXHRcdFx0XHRcdGlkPXsgaWQgfVxuXHRcdFx0XHRcdGNoZWNrZWQ9eyBjaGVja2VkIH1cblx0XHRcdFx0XHRvbkNoYW5nZT17IG9uQ2hhbmdlVG9nZ2xlIH1cblx0XHRcdFx0XHRhcmlhLWRlc2NyaWJlZGJ5PXsgZGVzY3JpYmVkQnkgfVxuXHRcdFx0XHRcdGRpc2FibGVkPXsgZGlzYWJsZWQgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8bGFiZWxcblx0XHRcdFx0XHRodG1sRm9yPXsgaWQgfVxuXHRcdFx0XHRcdGNsYXNzTmFtZT1cImNvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2xfX2xhYmVsXCJcblx0XHRcdFx0PlxuXHRcdFx0XHRcdHsgbGFiZWwgfVxuXHRcdFx0XHQ8L2xhYmVsPlxuXHRcdFx0PC9IU3RhY2s+XG5cdFx0PC9CYXNlQ29udHJvbD5cblx0KTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlQ29udHJvbDtcbiJdfQ== */"));
62
+ }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBGb3JtVG9nZ2xlIGZyb20gJy4uL2Zvcm0tdG9nZ2xlJztcbmltcG9ydCBCYXNlQ29udHJvbCBmcm9tICcuLi9iYXNlLWNvbnRyb2wnO1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnRQcm9wcyB9IGZyb20gJy4uL3VpL2NvbnRleHQvd29yZHByZXNzLWNvbXBvbmVudCc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUNvbnRyb2xQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vaC1zdGFjayc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG4vKipcbiAqIFRvZ2dsZUNvbnRyb2wgaXMgdXNlZCB0byBnZW5lcmF0ZSBhIHRvZ2dsZSB1c2VyIGludGVyZmFjZS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFRvZ2dsZUNvbnRyb2wgfSBmcm9tICdAd29yZHByZXNzL2NvbXBvbmVudHMnO1xuICogaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuICpcbiAqIGNvbnN0IE15VG9nZ2xlQ29udHJvbCA9ICgpID0+IHtcbiAqICAgY29uc3QgWyB2YWx1ZSwgc2V0VmFsdWUgXSA9IHVzZVN0YXRlKCBmYWxzZSApO1xuICpcbiAqICAgcmV0dXJuIChcbiAqICAgICA8VG9nZ2xlQ29udHJvbFxuICogICAgICAgbGFiZWw9XCJGaXhlZCBCYWNrZ3JvdW5kXCJcbiAqICAgICAgIGNoZWNrZWQ9eyB2YWx1ZSB9XG4gKiAgICAgICBvbkNoYW5nZT17ICgpID0+IHNldFZhbHVlKCAoIHN0YXRlICkgPT4gISBzdGF0ZSApIH1cbiAqICAgICAvPlxuICogICApO1xuICogfTtcbiAqIGBgYFxuICovXG5leHBvcnQgZnVuY3Rpb24gVG9nZ2xlQ29udHJvbCgge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbSxcblx0bGFiZWwsXG5cdGNoZWNrZWQsXG5cdGhlbHAsXG5cdGNsYXNzTmFtZSxcblx0b25DaGFuZ2UsXG5cdGRpc2FibGVkLFxufTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IFRvZ2dsZUNvbnRyb2xQcm9wcywgJ2lucHV0JywgZmFsc2UgPiApIHtcblx0ZnVuY3Rpb24gb25DaGFuZ2VUb2dnbGUoIGV2ZW50OiBDaGFuZ2VFdmVudDwgSFRNTElucHV0RWxlbWVudCA+ICkge1xuXHRcdG9uQ2hhbmdlKCBldmVudC50YXJnZXQuY2hlY2tlZCApO1xuXHR9XG5cdGNvbnN0IGluc3RhbmNlSWQgPSB1c2VJbnN0YW5jZUlkKCBUb2dnbGVDb250cm9sICk7XG5cdGNvbnN0IGlkID0gYGluc3BlY3Rvci10b2dnbGUtY29udHJvbC0keyBpbnN0YW5jZUlkIH1gO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblx0Y29uc3QgY2xhc3NlcyA9IGN4KFxuXHRcdCdjb21wb25lbnRzLXRvZ2dsZS1jb250cm9sJyxcblx0XHRjbGFzc05hbWUsXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJiBjc3MoIHsgbWFyZ2luQm90dG9tOiBzcGFjZSggMyApIH0gKVxuXHQpO1xuXG5cdGxldCBkZXNjcmliZWRCeSwgaGVscExhYmVsO1xuXHRpZiAoIGhlbHAgKSB7XG5cdFx0aWYgKCB0eXBlb2YgaGVscCA9PT0gJ2Z1bmN0aW9uJyApIHtcblx0XHRcdC8vIGBoZWxwYCBhcyBhIGZ1bmN0aW9uIHdvcmtzIG9ubHkgZm9yIGNvbnRyb2xsZWQgY29tcG9uZW50cyB3aGVyZVxuXHRcdFx0Ly8gYGNoZWNrZWRgIGlzIHBhc3NlZCBkb3duIGZyb20gcGFyZW50IGNvbXBvbmVudC4gVW5jb250cm9sbGVkXG5cdFx0XHQvLyBjb21wb25lbnQgY2FuIHNob3cgb25seSBhIHN0YXRpYyBoZWxwIGxhYmVsLlxuXHRcdFx0aWYgKCBjaGVja2VkICE9PSB1bmRlZmluZWQgKSB7XG5cdFx0XHRcdGhlbHBMYWJlbCA9IGhlbHAoIGNoZWNrZWQgKTtcblx0XHRcdH1cblx0XHR9IGVsc2Uge1xuXHRcdFx0aGVscExhYmVsID0gaGVscDtcblx0XHR9XG5cdFx0aWYgKCBoZWxwTGFiZWwgKSB7XG5cdFx0XHRkZXNjcmliZWRCeSA9IGlkICsgJ19faGVscCc7XG5cdFx0fVxuXHR9XG5cblx0cmV0dXJuIChcblx0XHQ8QmFzZUNvbnRyb2xcblx0XHRcdGlkPXsgaWQgfVxuXHRcdFx0aGVscD17IGhlbHBMYWJlbCB9XG5cdFx0XHRjbGFzc05hbWU9eyBjbGFzc2VzIH1cblx0XHRcdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PlxuXHRcdFx0PEhTdGFjayBqdXN0aWZ5PVwiZmxleC1zdGFydFwiIHNwYWNpbmc9eyAzIH0+XG5cdFx0XHRcdDxGb3JtVG9nZ2xlXG5cdFx0XHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRcdFx0Y2hlY2tlZD17IGNoZWNrZWQgfVxuXHRcdFx0XHRcdG9uQ2hhbmdlPXsgb25DaGFuZ2VUb2dnbGUgfVxuXHRcdFx0XHRcdGFyaWEtZGVzY3JpYmVkYnk9eyBkZXNjcmliZWRCeSB9XG5cdFx0XHRcdFx0ZGlzYWJsZWQ9eyBkaXNhYmxlZCB9XG5cdFx0XHRcdC8+XG5cdFx0XHRcdDxsYWJlbFxuXHRcdFx0XHRcdGh0bWxGb3I9eyBpZCB9XG5cdFx0XHRcdFx0Y2xhc3NOYW1lPVwiY29tcG9uZW50cy10b2dnbGUtY29udHJvbF9fbGFiZWxcIlxuXHRcdFx0XHQ+XG5cdFx0XHRcdFx0eyBsYWJlbCB9XG5cdFx0XHRcdDwvbGFiZWw+XG5cdFx0XHQ8L0hTdGFjaz5cblx0XHQ8L0Jhc2VDb250cm9sPlxuXHQpO1xufVxuXG5leHBvcnQgZGVmYXVsdCBUb2dnbGVDb250cm9sO1xuIl19 */"));
63
63
  let describedBy, helpLabel;
64
64
 
65
65
  if (help) {
66
- describedBy = id + '__help';
67
- helpLabel = typeof help === 'function' ? help(checked) : help;
66
+ if (typeof help === 'function') {
67
+ // `help` as a function works only for controlled components where
68
+ // `checked` is passed down from parent component. Uncontrolled
69
+ // component can show only a static help label.
70
+ if (checked !== undefined) {
71
+ helpLabel = help(checked);
72
+ }
73
+ } else {
74
+ helpLabel = help;
75
+ }
76
+
77
+ if (helpLabel) {
78
+ describedBy = id + '__help';
79
+ }
68
80
  }
69
81
 
70
82
  return createElement(BaseControl, {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/toggle-control/index.tsx"],"names":["css","useInstanceId","FormToggle","BaseControl","HStack","useCx","space","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","id","cx","classes","marginBottom","describedBy","helpLabel"],"mappings":";;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,gBAAvB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AAGA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,aAAT,OAQ4D;AAAA,MARpC;AAC9BC,IAAAA,uBAD8B;AAE9BC,IAAAA,KAF8B;AAG9BC,IAAAA,OAH8B;AAI9BC,IAAAA,IAJ8B;AAK9BC,IAAAA,SAL8B;AAM9BC,IAAAA,QAN8B;AAO9BC,IAAAA;AAP8B,GAQoC;;AAClE,WAASC,cAAT,CAAyBC,KAAzB,EAAkE;AACjEH,IAAAA,QAAQ,CAAEG,KAAK,CAACC,MAAN,CAAaP,OAAf,CAAR;AACA;;AACD,QAAMQ,UAAU,GAAGjB,aAAa,CAAEM,aAAF,CAAhC;AACA,QAAMY,EAAE,GAAI,4BAA4BD,UAAY,EAApD;AAEA,QAAME,EAAE,GAAGf,KAAK,EAAhB;AACA,QAAMgB,OAAO,GAAGD,EAAE,CACjB,2BADiB,EAEjBR,SAFiB,EAGjB,CAAEJ,uBAAF,iBAA6BR,GAAG,CAAE;AAAEsB,IAAAA,YAAY,EAAEhB,KAAK,CAAE,CAAF;AAArB,GAAF,qpHAHf,CAAlB;AAMA,MAAIiB,WAAJ,EAAiBC,SAAjB;;AACA,MAAKb,IAAL,EAAY;AACXY,IAAAA,WAAW,GAAGJ,EAAE,GAAG,QAAnB;AACAK,IAAAA,SAAS,GAAG,OAAOb,IAAP,KAAgB,UAAhB,GAA6BA,IAAI,CAAED,OAAF,CAAjC,GAA+CC,IAA3D;AACA;;AAED,SACC,cAAC,WAAD;AACC,IAAA,EAAE,EAAGQ,EADN;AAEC,IAAA,IAAI,EAAGK,SAFR;AAGC,IAAA,SAAS,EAAGH,OAHb;AAIC,IAAA,uBAAuB;AAJxB,KAMC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACC,cAAC,UAAD;AACC,IAAA,EAAE,EAAGF,EADN;AAEC,IAAA,OAAO,EAAGT,OAFX;AAGC,IAAA,QAAQ,EAAGK,cAHZ;AAIC,wBAAmBQ,WAJpB;AAKC,IAAA,QAAQ,EAAGT;AALZ,IADD,EAQC;AACC,IAAA,OAAO,EAAGK,EADX;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGV,KAJH,CARD,CAND,CADD;AAwBA;AAED,eAAeF,aAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../ui/utils/space';\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n * const [ value, setValue ] = useState( false );\n *\n * return (\n * <ToggleControl\n * label=\"Fixed Background\"\n * checked={ value }\n * onChange={ () => setValue( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport function ToggleControl( {\n\t__nextHasNoMarginBottom,\n\tlabel,\n\tchecked,\n\thelp,\n\tclassName,\n\tonChange,\n\tdisabled,\n}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tdescribedBy = id + '__help';\n\t\thelpLabel = typeof help === 'function' ? help( checked ) : help;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={ helpLabel }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 3 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"components-toggle-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</label>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default ToggleControl;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/toggle-control/index.tsx"],"names":["css","useInstanceId","FormToggle","BaseControl","HStack","useCx","space","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","id","cx","classes","marginBottom","describedBy","helpLabel","undefined"],"mappings":";;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,gBAAvB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AAGA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,aAAT,OAQ4D;AAAA,MARpC;AAC9BC,IAAAA,uBAD8B;AAE9BC,IAAAA,KAF8B;AAG9BC,IAAAA,OAH8B;AAI9BC,IAAAA,IAJ8B;AAK9BC,IAAAA,SAL8B;AAM9BC,IAAAA,QAN8B;AAO9BC,IAAAA;AAP8B,GAQoC;;AAClE,WAASC,cAAT,CAAyBC,KAAzB,EAAkE;AACjEH,IAAAA,QAAQ,CAAEG,KAAK,CAACC,MAAN,CAAaP,OAAf,CAAR;AACA;;AACD,QAAMQ,UAAU,GAAGjB,aAAa,CAAEM,aAAF,CAAhC;AACA,QAAMY,EAAE,GAAI,4BAA4BD,UAAY,EAApD;AAEA,QAAME,EAAE,GAAGf,KAAK,EAAhB;AACA,QAAMgB,OAAO,GAAGD,EAAE,CACjB,2BADiB,EAEjBR,SAFiB,EAGjB,CAAEJ,uBAAF,iBAA6BR,GAAG,CAAE;AAAEsB,IAAAA,YAAY,EAAEhB,KAAK,CAAE,CAAF;AAArB,GAAF,ilIAHf,CAAlB;AAMA,MAAIiB,WAAJ,EAAiBC,SAAjB;;AACA,MAAKb,IAAL,EAAY;AACX,QAAK,OAAOA,IAAP,KAAgB,UAArB,EAAkC;AACjC;AACA;AACA;AACA,UAAKD,OAAO,KAAKe,SAAjB,EAA6B;AAC5BD,QAAAA,SAAS,GAAGb,IAAI,CAAED,OAAF,CAAhB;AACA;AACD,KAPD,MAOO;AACNc,MAAAA,SAAS,GAAGb,IAAZ;AACA;;AACD,QAAKa,SAAL,EAAiB;AAChBD,MAAAA,WAAW,GAAGJ,EAAE,GAAG,QAAnB;AACA;AACD;;AAED,SACC,cAAC,WAAD;AACC,IAAA,EAAE,EAAGA,EADN;AAEC,IAAA,IAAI,EAAGK,SAFR;AAGC,IAAA,SAAS,EAAGH,OAHb;AAIC,IAAA,uBAAuB;AAJxB,KAMC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACC,cAAC,UAAD;AACC,IAAA,EAAE,EAAGF,EADN;AAEC,IAAA,OAAO,EAAGT,OAFX;AAGC,IAAA,QAAQ,EAAGK,cAHZ;AAIC,wBAAmBQ,WAJpB;AAKC,IAAA,QAAQ,EAAGT;AALZ,IADD,EAQC;AACC,IAAA,OAAO,EAAGK,EADX;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGV,KAJH,CARD,CAND,CADD;AAwBA;AAED,eAAeF,aAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../ui/utils/space';\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n * const [ value, setValue ] = useState( false );\n *\n * return (\n * <ToggleControl\n * label=\"Fixed Background\"\n * checked={ value }\n * onChange={ () => setValue( ( state ) => ! state ) }\n * />\n * );\n * };\n * ```\n */\nexport function ToggleControl( {\n\t__nextHasNoMarginBottom,\n\tlabel,\n\tchecked,\n\thelp,\n\tclassName,\n\tonChange,\n\tdisabled,\n}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={ helpLabel }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 3 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"components-toggle-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</label>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default ToggleControl;\n"]}