@wordpress/components 28.11.0 → 28.13.1-next.082ed6819.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 (514) hide show
  1. package/CHANGELOG.md +68 -0
  2. package/build/autocomplete/autocompleter-ui.js +1 -0
  3. package/build/autocomplete/autocompleter-ui.js.map +1 -1
  4. package/build/border-box-control/border-box-control/component.js +1 -0
  5. package/build/border-box-control/border-box-control/component.js.map +1 -1
  6. package/build/border-box-control/border-box-control-split-controls/component.js +2 -1
  7. package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  8. package/build/border-control/border-control/component.js +2 -1
  9. package/build/border-control/border-control/component.js.map +1 -1
  10. package/build/border-control/border-control/hook.js +3 -1
  11. package/build/border-control/border-control/hook.js.map +1 -1
  12. package/build/border-control/border-control-dropdown/component.js +1 -1
  13. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  14. package/build/border-control/types.js.map +1 -1
  15. package/build/box-control/all-input-control.js +1 -0
  16. package/build/box-control/all-input-control.js.map +1 -1
  17. package/build/box-control/axial-input-controls.js +1 -0
  18. package/build/box-control/axial-input-controls.js.map +1 -1
  19. package/build/box-control/input-controls.js +1 -0
  20. package/build/box-control/input-controls.js.map +1 -1
  21. package/build/color-palette/index.js +2 -0
  22. package/build/color-palette/index.js.map +1 -1
  23. package/build/color-picker/color-copy-button.js +6 -4
  24. package/build/color-picker/color-copy-button.js.map +1 -1
  25. package/build/color-picker/component.js +1 -0
  26. package/build/color-picker/component.js.map +1 -1
  27. package/build/color-picker/styles.js +21 -28
  28. package/build/color-picker/styles.js.map +1 -1
  29. package/build/combobox-control/index.js +17 -12
  30. package/build/combobox-control/index.js.map +1 -1
  31. package/build/composite/hover.js +1 -1
  32. package/build/composite/hover.js.map +1 -1
  33. package/build/composite/typeahead.js +1 -1
  34. package/build/composite/typeahead.js.map +1 -1
  35. package/build/dashicon/types.js.map +1 -1
  36. package/build/dimension-control/index.js +7 -0
  37. package/build/dimension-control/index.js.map +1 -1
  38. package/build/disabled/index.js +8 -1
  39. package/build/disabled/index.js.map +1 -1
  40. package/build/duotone-picker/duotone-picker.js +2 -0
  41. package/build/duotone-picker/duotone-picker.js.map +1 -1
  42. package/build/font-size-picker/font-size-picker-toggle-group.js +1 -0
  43. package/build/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
  44. package/build/font-size-picker/index.js +7 -0
  45. package/build/font-size-picker/index.js.map +1 -1
  46. package/build/form-file-upload/index.js +7 -1
  47. package/build/form-file-upload/index.js.map +1 -1
  48. package/build/form-token-field/token.js +1 -0
  49. package/build/form-token-field/token.js.map +1 -1
  50. package/build/gradient-picker/index.js +34 -32
  51. package/build/gradient-picker/index.js.map +1 -1
  52. package/build/gradient-picker/types.js.map +1 -1
  53. package/build/guide/page-control.js +1 -0
  54. package/build/guide/page-control.js.map +1 -1
  55. package/build/menu/styles.js +16 -16
  56. package/build/menu/styles.js.map +1 -1
  57. package/build/menu-item/index.js +1 -0
  58. package/build/menu-item/index.js.map +1 -1
  59. package/build/modal/index.js +2 -2
  60. package/build/modal/index.js.map +1 -1
  61. package/build/notice/index.js +2 -0
  62. package/build/notice/index.js.map +1 -1
  63. package/build/palette-edit/index.js +5 -0
  64. package/build/palette-edit/index.js.map +1 -1
  65. package/build/panel/body.js +1 -0
  66. package/build/panel/body.js.map +1 -1
  67. package/build/popover/index.js +4 -1
  68. package/build/popover/index.js.map +1 -1
  69. package/build/private-apis.js +0 -2
  70. package/build/private-apis.js.map +1 -1
  71. package/build/radio-group/radio.js +6 -0
  72. package/build/radio-group/radio.js.map +1 -1
  73. package/build/radio-group/types.js.map +1 -1
  74. package/build/range-control/index.js +11 -0
  75. package/build/range-control/index.js.map +1 -1
  76. package/build/range-control/types.js.map +1 -1
  77. package/build/slot-fill/bubbles-virtually/fill.js +14 -31
  78. package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
  79. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js +13 -4
  80. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  81. package/build/slot-fill/bubbles-virtually/slot.js +11 -9
  82. package/build/slot-fill/bubbles-virtually/slot.js.map +1 -1
  83. package/build/slot-fill/bubbles-virtually/use-slot.js +1 -8
  84. package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  85. package/build/slot-fill/fill.js +7 -24
  86. package/build/slot-fill/fill.js.map +1 -1
  87. package/build/slot-fill/index.js +5 -10
  88. package/build/slot-fill/index.js.map +1 -1
  89. package/build/slot-fill/provider.js +2 -2
  90. package/build/slot-fill/provider.js.map +1 -1
  91. package/build/slot-fill/slot.js +37 -77
  92. package/build/slot-fill/slot.js.map +1 -1
  93. package/build/slot-fill/types.js.map +1 -1
  94. package/build/snackbar/index.js +2 -1
  95. package/build/snackbar/index.js.map +1 -1
  96. package/build/tabs/tablist.js +13 -2
  97. package/build/tabs/tablist.js.map +1 -1
  98. package/build/text-control/index.js +7 -0
  99. package/build/text-control/index.js.map +1 -1
  100. package/build/toggle-group-control/toggle-group-control/component.js +10 -1
  101. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  102. package/build/toggle-group-control/toggle-group-control-option/component.js +1 -0
  103. package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  104. package/build/toggle-group-control/toggle-group-control-option-icon/component.js +1 -1
  105. package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  106. package/build/toggle-group-control/types.js.map +1 -1
  107. package/build/utils/deprecated-36px-size.js +3 -2
  108. package/build/utils/deprecated-36px-size.js.map +1 -1
  109. package/build-module/autocomplete/autocompleter-ui.js +1 -0
  110. package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
  111. package/build-module/border-box-control/border-box-control/component.js +1 -0
  112. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  113. package/build-module/border-box-control/border-box-control-split-controls/component.js +2 -1
  114. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  115. package/build-module/border-control/border-control/component.js +2 -1
  116. package/build-module/border-control/border-control/component.js.map +1 -1
  117. package/build-module/border-control/border-control/hook.js +3 -1
  118. package/build-module/border-control/border-control/hook.js.map +1 -1
  119. package/build-module/border-control/border-control-dropdown/component.js +1 -1
  120. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  121. package/build-module/border-control/types.js.map +1 -1
  122. package/build-module/box-control/all-input-control.js +1 -0
  123. package/build-module/box-control/all-input-control.js.map +1 -1
  124. package/build-module/box-control/axial-input-controls.js +1 -0
  125. package/build-module/box-control/axial-input-controls.js.map +1 -1
  126. package/build-module/box-control/input-controls.js +1 -0
  127. package/build-module/box-control/input-controls.js.map +1 -1
  128. package/build-module/color-palette/index.js +2 -0
  129. package/build-module/color-palette/index.js.map +1 -1
  130. package/build-module/color-picker/color-copy-button.js +6 -4
  131. package/build-module/color-picker/color-copy-button.js.map +1 -1
  132. package/build-module/color-picker/component.js +1 -0
  133. package/build-module/color-picker/component.js.map +1 -1
  134. package/build-module/color-picker/styles.js +20 -27
  135. package/build-module/color-picker/styles.js.map +1 -1
  136. package/build-module/combobox-control/index.js +18 -13
  137. package/build-module/combobox-control/index.js.map +1 -1
  138. package/build-module/composite/hover.js +1 -1
  139. package/build-module/composite/hover.js.map +1 -1
  140. package/build-module/composite/typeahead.js +1 -1
  141. package/build-module/composite/typeahead.js.map +1 -1
  142. package/build-module/dashicon/types.js.map +1 -1
  143. package/build-module/dimension-control/index.js +7 -0
  144. package/build-module/dimension-control/index.js.map +1 -1
  145. package/build-module/disabled/index.js +8 -1
  146. package/build-module/disabled/index.js.map +1 -1
  147. package/build-module/duotone-picker/duotone-picker.js +2 -0
  148. package/build-module/duotone-picker/duotone-picker.js.map +1 -1
  149. package/build-module/font-size-picker/font-size-picker-toggle-group.js +1 -0
  150. package/build-module/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
  151. package/build-module/font-size-picker/index.js +7 -0
  152. package/build-module/font-size-picker/index.js.map +1 -1
  153. package/build-module/form-file-upload/index.js +7 -1
  154. package/build-module/form-file-upload/index.js.map +1 -1
  155. package/build-module/form-token-field/token.js +1 -0
  156. package/build-module/form-token-field/token.js.map +1 -1
  157. package/build-module/gradient-picker/index.js +34 -32
  158. package/build-module/gradient-picker/index.js.map +1 -1
  159. package/build-module/gradient-picker/types.js.map +1 -1
  160. package/build-module/guide/page-control.js +1 -0
  161. package/build-module/guide/page-control.js.map +1 -1
  162. package/build-module/menu/styles.js +16 -16
  163. package/build-module/menu/styles.js.map +1 -1
  164. package/build-module/menu-item/index.js +1 -0
  165. package/build-module/menu-item/index.js.map +1 -1
  166. package/build-module/modal/index.js +2 -2
  167. package/build-module/modal/index.js.map +1 -1
  168. package/build-module/notice/index.js +2 -0
  169. package/build-module/notice/index.js.map +1 -1
  170. package/build-module/palette-edit/index.js +5 -0
  171. package/build-module/palette-edit/index.js.map +1 -1
  172. package/build-module/panel/body.js +1 -0
  173. package/build-module/panel/body.js.map +1 -1
  174. package/build-module/popover/index.js +4 -1
  175. package/build-module/popover/index.js.map +1 -1
  176. package/build-module/private-apis.js +0 -2
  177. package/build-module/private-apis.js.map +1 -1
  178. package/build-module/radio-group/radio.js +6 -0
  179. package/build-module/radio-group/radio.js.map +1 -1
  180. package/build-module/radio-group/types.js.map +1 -1
  181. package/build-module/range-control/index.js +11 -0
  182. package/build-module/range-control/index.js.map +1 -1
  183. package/build-module/range-control/types.js.map +1 -1
  184. package/build-module/slot-fill/bubbles-virtually/fill.js +15 -32
  185. package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
  186. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js +13 -4
  187. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  188. package/build-module/slot-fill/bubbles-virtually/slot.js +11 -9
  189. package/build-module/slot-fill/bubbles-virtually/slot.js.map +1 -1
  190. package/build-module/slot-fill/bubbles-virtually/use-slot.js +2 -9
  191. package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  192. package/build-module/slot-fill/fill.js +7 -24
  193. package/build-module/slot-fill/fill.js.map +1 -1
  194. package/build-module/slot-fill/index.js +5 -8
  195. package/build-module/slot-fill/index.js.map +1 -1
  196. package/build-module/slot-fill/provider.js +2 -3
  197. package/build-module/slot-fill/provider.js.map +1 -1
  198. package/build-module/slot-fill/slot.js +38 -78
  199. package/build-module/slot-fill/slot.js.map +1 -1
  200. package/build-module/slot-fill/types.js.map +1 -1
  201. package/build-module/snackbar/index.js +2 -1
  202. package/build-module/snackbar/index.js.map +1 -1
  203. package/build-module/tabs/tablist.js +13 -2
  204. package/build-module/tabs/tablist.js.map +1 -1
  205. package/build-module/text-control/index.js +7 -0
  206. package/build-module/text-control/index.js.map +1 -1
  207. package/build-module/toggle-group-control/toggle-group-control/component.js +10 -1
  208. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  209. package/build-module/toggle-group-control/toggle-group-control-option/component.js +1 -0
  210. package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  211. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +1 -1
  212. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  213. package/build-module/toggle-group-control/types.js.map +1 -1
  214. package/build-module/utils/deprecated-36px-size.js +3 -2
  215. package/build-module/utils/deprecated-36px-size.js.map +1 -1
  216. package/build-style/style-rtl.css +15 -36
  217. package/build-style/style.css +15 -36
  218. package/build-types/autocomplete/autocompleter-ui.d.ts.map +1 -1
  219. package/build-types/base-control/stories/index.story.d.ts.map +1 -1
  220. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  221. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
  222. package/build-types/border-control/border-control/component.d.ts +1 -0
  223. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  224. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  225. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  226. package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -1
  227. package/build-types/border-control/stories/index.story.d.ts +10 -5
  228. package/build-types/border-control/stories/index.story.d.ts.map +1 -1
  229. package/build-types/border-control/types.d.ts +7 -0
  230. package/build-types/border-control/types.d.ts.map +1 -1
  231. package/build-types/box-control/all-input-control.d.ts.map +1 -1
  232. package/build-types/box-control/axial-input-controls.d.ts.map +1 -1
  233. package/build-types/box-control/input-controls.d.ts.map +1 -1
  234. package/build-types/box-control/styles/box-control-styles.d.ts +2 -1
  235. package/build-types/box-control/styles/box-control-styles.d.ts.map +1 -1
  236. package/build-types/checkbox-control/stories/index.story.d.ts.map +1 -1
  237. package/build-types/circular-option-picker/stories/index.story.d.ts.map +1 -1
  238. package/build-types/color-indicator/stories/index.story.d.ts.map +1 -1
  239. package/build-types/color-palette/index.d.ts.map +1 -1
  240. package/build-types/color-palette/stories/index.story.d.ts.map +1 -1
  241. package/build-types/color-picker/color-copy-button.d.ts.map +1 -1
  242. package/build-types/color-picker/component.d.ts.map +1 -1
  243. package/build-types/color-picker/stories/index.story.d.ts.map +1 -1
  244. package/build-types/color-picker/styles.d.ts +2 -4
  245. package/build-types/color-picker/styles.d.ts.map +1 -1
  246. package/build-types/combobox-control/index.d.ts +1 -0
  247. package/build-types/combobox-control/index.d.ts.map +1 -1
  248. package/build-types/combobox-control/stories/index.story.d.ts.map +1 -1
  249. package/build-types/composite/typeahead.d.ts.map +1 -1
  250. package/build-types/confirm-dialog/stories/index.story.d.ts.map +1 -1
  251. package/build-types/custom-gradient-picker/stories/index.story.d.ts.map +1 -1
  252. package/build-types/custom-select-control/stories/index.story.d.ts.map +1 -1
  253. package/build-types/custom-select-control-v2/stories/index.story.d.ts.map +1 -1
  254. package/build-types/dashicon/types.d.ts +1 -1
  255. package/build-types/dashicon/types.d.ts.map +1 -1
  256. package/build-types/date-time/stories/date-time.story.d.ts.map +1 -1
  257. package/build-types/date-time/stories/date.story.d.ts.map +1 -1
  258. package/build-types/date-time/stories/time.story.d.ts.map +1 -1
  259. package/build-types/dimension-control/index.d.ts +1 -0
  260. package/build-types/dimension-control/index.d.ts.map +1 -1
  261. package/build-types/disabled/index.d.ts +8 -1
  262. package/build-types/disabled/index.d.ts.map +1 -1
  263. package/build-types/disabled/stories/index.story.d.ts.map +1 -1
  264. package/build-types/drop-zone/stories/index.story.d.ts.map +1 -1
  265. package/build-types/dropdown/stories/index.story.d.ts.map +1 -1
  266. package/build-types/dropdown-menu/stories/index.story.d.ts.map +1 -1
  267. package/build-types/duotone-picker/duotone-picker.d.ts.map +1 -1
  268. package/build-types/external-link/stories/index.story.d.ts.map +1 -1
  269. package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map +1 -1
  270. package/build-types/font-size-picker/index.d.ts.map +1 -1
  271. package/build-types/font-size-picker/stories/index.story.d.ts.map +1 -1
  272. package/build-types/form-file-upload/index.d.ts.map +1 -1
  273. package/build-types/form-file-upload/stories/index.story.d.ts.map +1 -1
  274. package/build-types/form-token-field/stories/index.story.d.ts.map +1 -1
  275. package/build-types/form-token-field/token.d.ts.map +1 -1
  276. package/build-types/gradient-picker/index.d.ts +32 -32
  277. package/build-types/gradient-picker/index.d.ts.map +1 -1
  278. package/build-types/gradient-picker/stories/index.story.d.ts.map +1 -1
  279. package/build-types/gradient-picker/types.d.ts +1 -5
  280. package/build-types/gradient-picker/types.d.ts.map +1 -1
  281. package/build-types/guide/page-control.d.ts.map +1 -1
  282. package/build-types/h-stack/stories/index.story.d.ts.map +1 -1
  283. package/build-types/heading/stories/index.story.d.ts.map +1 -1
  284. package/build-types/input-control/stories/index.story.d.ts.map +1 -1
  285. package/build-types/lock-unlock.d.ts +2 -2
  286. package/build-types/menu/stories/index.story.d.ts.map +1 -1
  287. package/build-types/menu-group/stories/index.story.d.ts.map +1 -1
  288. package/build-types/menu-item/index.d.ts.map +1 -1
  289. package/build-types/menu-item/stories/index.story.d.ts.map +1 -1
  290. package/build-types/menu-items-choice/stories/index.story.d.ts.map +1 -1
  291. package/build-types/modal/stories/index.story.d.ts.map +1 -1
  292. package/build-types/navigator/stories/index.story.d.ts.map +1 -1
  293. package/build-types/notice/index.d.ts.map +1 -1
  294. package/build-types/notice/stories/index.story.d.ts.map +1 -1
  295. package/build-types/number-control/stories/index.story.d.ts.map +1 -1
  296. package/build-types/palette-edit/index.d.ts.map +1 -1
  297. package/build-types/panel/body.d.ts.map +1 -1
  298. package/build-types/placeholder/stories/index.story.d.ts.map +1 -1
  299. package/build-types/popover/index.d.ts.map +1 -1
  300. package/build-types/popover/stories/index.story.d.ts.map +1 -1
  301. package/build-types/private-apis.d.ts.map +1 -1
  302. package/build-types/progress-bar/stories/index.story.d.ts.map +1 -1
  303. package/build-types/radio-control/stories/index.story.d.ts.map +1 -1
  304. package/build-types/radio-group/radio.d.ts +4 -2
  305. package/build-types/radio-group/radio.d.ts.map +1 -1
  306. package/build-types/radio-group/stories/index.story.d.ts.map +1 -1
  307. package/build-types/radio-group/types.d.ts +5 -1
  308. package/build-types/radio-group/types.d.ts.map +1 -1
  309. package/build-types/range-control/index.d.ts +3 -1
  310. package/build-types/range-control/index.d.ts.map +1 -1
  311. package/build-types/range-control/stories/index.story.d.ts.map +1 -1
  312. package/build-types/range-control/types.d.ts +7 -0
  313. package/build-types/range-control/types.d.ts.map +1 -1
  314. package/build-types/responsive-wrapper/stories/index.story.d.ts.map +1 -1
  315. package/build-types/search-control/stories/index.story.d.ts.map +1 -1
  316. package/build-types/select-control/stories/index.story.d.ts.map +1 -1
  317. package/build-types/slot-fill/bubbles-virtually/fill.d.ts +1 -1
  318. package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
  319. package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map +1 -1
  320. package/build-types/slot-fill/bubbles-virtually/slot.d.ts.map +1 -1
  321. package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts +1 -1
  322. package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts.map +1 -1
  323. package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts +3 -7
  324. package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
  325. package/build-types/slot-fill/fill.d.ts.map +1 -1
  326. package/build-types/slot-fill/index.d.ts +5 -12
  327. package/build-types/slot-fill/index.d.ts.map +1 -1
  328. package/build-types/slot-fill/provider.d.ts.map +1 -1
  329. package/build-types/slot-fill/slot.d.ts +1 -1
  330. package/build-types/slot-fill/slot.d.ts.map +1 -1
  331. package/build-types/slot-fill/types.d.ts +15 -18
  332. package/build-types/slot-fill/types.d.ts.map +1 -1
  333. package/build-types/slot-fill/use-slot.d.ts +1 -1
  334. package/build-types/slot-fill/use-slot.d.ts.map +1 -1
  335. package/build-types/snackbar/index.d.ts.map +1 -1
  336. package/build-types/snackbar/stories/index.story.d.ts.map +1 -1
  337. package/build-types/snackbar/stories/list.story.d.ts.map +1 -1
  338. package/build-types/spinner/stories/index.story.d.ts.map +1 -1
  339. package/build-types/tabs/tablist.d.ts.map +1 -1
  340. package/build-types/text/stories/index.story.d.ts.map +1 -1
  341. package/build-types/text-control/index.d.ts +1 -0
  342. package/build-types/text-control/index.d.ts.map +1 -1
  343. package/build-types/text-control/stories/index.story.d.ts.map +1 -1
  344. package/build-types/text-highlight/stories/index.story.d.ts.map +1 -1
  345. package/build-types/textarea-control/stories/index.story.d.ts.map +1 -1
  346. package/build-types/tip/stories/index.story.d.ts.map +1 -1
  347. package/build-types/toggle-control/stories/index.story.d.ts.map +1 -1
  348. package/build-types/toggle-group-control/stories/index.story.d.ts.map +1 -1
  349. package/build-types/toggle-group-control/toggle-group-control/component.d.ts +2 -0
  350. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  351. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +1 -0
  352. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
  353. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +1 -1
  354. package/build-types/toggle-group-control/types.d.ts +7 -0
  355. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  356. package/build-types/tools-panel/stories/index.story.d.ts.map +1 -1
  357. package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
  358. package/build-types/tree-grid/stories/index.story.d.ts.map +1 -1
  359. package/build-types/tree-select/stories/index.story.d.ts.map +1 -1
  360. package/build-types/truncate/stories/index.story.d.ts.map +1 -1
  361. package/build-types/unit-control/stories/index.story.d.ts.map +1 -1
  362. package/build-types/utils/deprecated-36px-size.d.ts +3 -2
  363. package/build-types/utils/deprecated-36px-size.d.ts.map +1 -1
  364. package/build-types/v-stack/stories/index.story.d.ts.map +1 -1
  365. package/package.json +21 -21
  366. package/src/autocomplete/autocompleter-ui.tsx +1 -0
  367. package/src/base-control/stories/index.story.tsx +2 -1
  368. package/src/border-box-control/border-box-control/component.tsx +1 -0
  369. package/src/border-box-control/border-box-control-split-controls/component.tsx +1 -0
  370. package/src/border-control/border-control/component.tsx +1 -0
  371. package/src/border-control/border-control/hook.ts +2 -0
  372. package/src/border-control/border-control-dropdown/component.tsx +1 -1
  373. package/src/border-control/types.ts +7 -0
  374. package/src/box-control/all-input-control.tsx +1 -0
  375. package/src/box-control/axial-input-controls.tsx +1 -0
  376. package/src/box-control/input-controls.tsx +1 -0
  377. package/src/checkbox-control/stories/index.story.tsx +2 -1
  378. package/src/circular-option-picker/stories/index.story.tsx +2 -1
  379. package/src/color-indicator/stories/index.story.tsx +2 -1
  380. package/src/color-palette/index.tsx +5 -1
  381. package/src/color-palette/stories/index.story.tsx +2 -1
  382. package/src/color-picker/color-copy-button.tsx +8 -10
  383. package/src/color-picker/component.tsx +1 -0
  384. package/src/color-picker/stories/index.story.tsx +2 -1
  385. package/src/color-picker/styles.ts +0 -13
  386. package/src/combobox-control/README.md +1 -0
  387. package/src/combobox-control/index.tsx +19 -13
  388. package/src/combobox-control/stories/index.story.tsx +3 -1
  389. package/src/combobox-control/style.scss +0 -6
  390. package/src/combobox-control/test/index.tsx +7 -1
  391. package/src/composite/hover.tsx +1 -1
  392. package/src/composite/typeahead.tsx +3 -1
  393. package/src/confirm-dialog/stories/index.story.tsx +2 -1
  394. package/src/custom-gradient-picker/stories/index.story.tsx +2 -1
  395. package/src/custom-select-control/stories/index.story.tsx +2 -1
  396. package/src/custom-select-control-v2/stories/index.story.tsx +2 -1
  397. package/src/dashicon/types.ts +0 -2
  398. package/src/date-time/stories/date-time.story.tsx +2 -1
  399. package/src/date-time/stories/date.story.tsx +2 -1
  400. package/src/date-time/stories/time.story.tsx +2 -1
  401. package/src/dimension-control/README.md +1 -0
  402. package/src/dimension-control/index.tsx +8 -0
  403. package/src/dimension-control/stories/index.story.tsx +1 -0
  404. package/src/dimension-control/test/__snapshots__/index.test.js.snap +24 -24
  405. package/src/dimension-control/test/index.test.js +7 -1
  406. package/src/disabled/README.md +9 -7
  407. package/src/disabled/index.tsx +8 -1
  408. package/src/disabled/stories/index.story.tsx +1 -0
  409. package/src/drop-zone/stories/index.story.tsx +2 -1
  410. package/src/dropdown/stories/index.story.tsx +2 -1
  411. package/src/dropdown-menu/stories/index.story.tsx +2 -1
  412. package/src/duotone-picker/duotone-picker.tsx +2 -0
  413. package/src/external-link/stories/index.story.tsx +2 -1
  414. package/src/font-size-picker/README.md +1 -0
  415. package/src/font-size-picker/font-size-picker-toggle-group.tsx +1 -0
  416. package/src/font-size-picker/index.tsx +8 -0
  417. package/src/font-size-picker/stories/index.story.tsx +1 -0
  418. package/src/font-size-picker/test/index.tsx +5 -1
  419. package/src/form-file-upload/index.tsx +13 -1
  420. package/src/form-file-upload/stories/index.story.tsx +2 -1
  421. package/src/form-token-field/stories/index.story.tsx +2 -1
  422. package/src/form-token-field/style.scss +8 -12
  423. package/src/form-token-field/token.tsx +1 -0
  424. package/src/gradient-picker/README.md +107 -69
  425. package/src/gradient-picker/docs-manifest.json +5 -0
  426. package/src/gradient-picker/index.tsx +34 -32
  427. package/src/gradient-picker/stories/index.story.tsx +2 -1
  428. package/src/gradient-picker/types.ts +3 -5
  429. package/src/guide/page-control.tsx +1 -0
  430. package/src/guide/style.scss +4 -6
  431. package/src/h-stack/stories/index.story.tsx +2 -1
  432. package/src/heading/stories/index.story.tsx +2 -1
  433. package/src/higher-order/with-constrained-tabbing/README.md +13 -3
  434. package/src/higher-order/with-focus-return/README.md +9 -2
  435. package/src/input-control/stories/index.story.tsx +2 -1
  436. package/src/menu/stories/index.story.tsx +2 -1
  437. package/src/menu/styles.ts +1 -1
  438. package/src/menu-group/stories/index.story.tsx +2 -1
  439. package/src/menu-item/index.tsx +1 -0
  440. package/src/menu-item/stories/index.story.tsx +2 -1
  441. package/src/menu-item/test/__snapshots__/index.js.snap +4 -4
  442. package/src/menu-items-choice/stories/index.story.tsx +2 -1
  443. package/src/modal/index.tsx +2 -2
  444. package/src/modal/stories/index.story.tsx +3 -2
  445. package/src/navigator/stories/index.story.tsx +2 -1
  446. package/src/notice/index.tsx +2 -0
  447. package/src/notice/stories/index.story.tsx +7 -2
  448. package/src/notice/test/__snapshots__/index.tsx.snap +4 -4
  449. package/src/number-control/stories/index.story.tsx +2 -1
  450. package/src/palette-edit/index.tsx +5 -0
  451. package/src/panel/body.tsx +1 -0
  452. package/src/placeholder/stories/index.story.tsx +1 -0
  453. package/src/popover/index.tsx +3 -0
  454. package/src/popover/stories/index.story.tsx +2 -1
  455. package/src/private-apis.ts +0 -2
  456. package/src/progress-bar/stories/index.story.tsx +2 -1
  457. package/src/radio-control/stories/index.story.tsx +2 -1
  458. package/src/radio-group/README.md +8 -8
  459. package/src/radio-group/radio.tsx +7 -0
  460. package/src/radio-group/stories/index.story.tsx +16 -4
  461. package/src/radio-group/types.ts +6 -1
  462. package/src/range-control/README.md +4 -3
  463. package/src/range-control/index.tsx +11 -0
  464. package/src/range-control/stories/index.story.tsx +9 -1
  465. package/src/range-control/test/index.tsx +7 -1
  466. package/src/range-control/types.ts +7 -0
  467. package/src/responsive-wrapper/stories/index.story.tsx +2 -1
  468. package/src/search-control/stories/index.story.tsx +2 -1
  469. package/src/select-control/stories/index.story.tsx +2 -1
  470. package/src/slot-fill/README.md +26 -15
  471. package/src/slot-fill/bubbles-virtually/fill.tsx +18 -28
  472. package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx +26 -16
  473. package/src/slot-fill/bubbles-virtually/slot.tsx +13 -9
  474. package/src/slot-fill/bubbles-virtually/use-slot.ts +3 -26
  475. package/src/slot-fill/fill.ts +7 -22
  476. package/src/slot-fill/index.tsx +5 -7
  477. package/src/slot-fill/provider.tsx +8 -17
  478. package/src/slot-fill/slot.tsx +48 -85
  479. package/src/slot-fill/types.ts +14 -51
  480. package/src/snackbar/index.tsx +2 -1
  481. package/src/snackbar/stories/index.story.tsx +2 -1
  482. package/src/snackbar/stories/list.story.tsx +2 -1
  483. package/src/snackbar/style.scss +7 -16
  484. package/src/spinner/stories/index.story.tsx +2 -1
  485. package/src/tabs/tablist.tsx +13 -2
  486. package/src/text/stories/index.story.tsx +2 -1
  487. package/src/text-control/README.md +1 -0
  488. package/src/text-control/index.tsx +8 -0
  489. package/src/text-control/stories/index.story.tsx +3 -1
  490. package/src/text-control/test/text-control.tsx +7 -1
  491. package/src/text-highlight/stories/index.story.tsx +2 -1
  492. package/src/textarea-control/stories/index.story.tsx +2 -1
  493. package/src/tip/stories/index.story.tsx +2 -1
  494. package/src/toggle-control/stories/index.story.tsx +2 -1
  495. package/src/toggle-group-control/stories/index.story.tsx +3 -1
  496. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +12 -12
  497. package/src/toggle-group-control/test/index.tsx +7 -1
  498. package/src/toggle-group-control/toggle-group-control/README.md +2 -1
  499. package/src/toggle-group-control/toggle-group-control/component.tsx +11 -1
  500. package/src/toggle-group-control/toggle-group-control-option/README.md +1 -1
  501. package/src/toggle-group-control/toggle-group-control-option/component.tsx +1 -0
  502. package/src/toggle-group-control/toggle-group-control-option-icon/README.md +1 -1
  503. package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +1 -1
  504. package/src/toggle-group-control/types.ts +7 -0
  505. package/src/tools-panel/stories/index.story.tsx +3 -0
  506. package/src/tooltip/stories/index.story.tsx +2 -1
  507. package/src/tree-grid/stories/index.story.tsx +2 -1
  508. package/src/tree-select/stories/index.story.tsx +2 -1
  509. package/src/truncate/stories/index.story.tsx +2 -1
  510. package/src/unit-control/stories/index.story.tsx +2 -1
  511. package/src/utils/deprecated-36px-size.ts +8 -2
  512. package/src/v-stack/stories/index.story.tsx +2 -1
  513. package/src/visually-hidden/stories/index.story.tsx +1 -1
  514. package/tsconfig.tsbuildinfo +1 -1
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_boxControlStyles","_unitControl","_utils","_jsxRuntime","noop","AllInputControl","__next40pxDefaultSize","onChange","onFocus","values","sides","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","inputId","useInstanceId","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","handleOnFocus","event","side","onValueChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","sliderOnChange","join","handleOnUnitChange","unit","newUnits","jsxs","Fragment","children","jsx","StyledUnitControl","className","disableUnits","id","isPressEnterToChange","value","onUnitChange","placeholder","label","all","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport {\n\tFlexedRangeControl,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n\tCUSTOM_VALUE_SETTINGS,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst inputId = useInstanceId( AllInputControl, 'box-control-input-all' );\n\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( allValue );\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst onValueChange = ( next?: string ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst sliderOnChange = ( next?: number ) => {\n\t\tonValueChange(\n\t\t\tnext !== undefined ? [ next, parsedUnit ].join( '' ) : undefined\n\t\t);\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<StyledUnitControl\n\t\t\t\t{ ...props }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\tdisableUnits={ isMixed }\n\t\t\t\tid={ inputId }\n\t\t\t\tisPressEnterToChange\n\t\t\t\tvalue={ allValue }\n\t\t\t\tonChange={ onValueChange }\n\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\tplaceholder={ allPlaceholder }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t/>\n\n\t\t\t<FlexedRangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\taria-controls={ inputId }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ sliderOnChange }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1\n\t\t\t\t}\n\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_boxControlStyles","_unitControl","_utils","_jsxRuntime","noop","AllInputControl","__next40pxDefaultSize","onChange","onFocus","values","sides","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","inputId","useInstanceId","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","handleOnFocus","event","side","onValueChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","sliderOnChange","join","handleOnUnitChange","unit","newUnits","jsxs","Fragment","children","jsx","StyledUnitControl","className","disableUnits","id","isPressEnterToChange","value","onUnitChange","placeholder","label","all","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport {\n\tFlexedRangeControl,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n\tCUSTOM_VALUE_SETTINGS,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst inputId = useInstanceId( AllInputControl, 'box-control-input-all' );\n\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( allValue );\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst onValueChange = ( next?: string ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst sliderOnChange = ( next?: number ) => {\n\t\tonValueChange(\n\t\t\tnext !== undefined ? [ next, parsedUnit ].join( '' ) : undefined\n\t\t);\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<StyledUnitControl\n\t\t\t\t{ ...props }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\tdisableUnits={ isMixed }\n\t\t\t\tid={ inputId }\n\t\t\t\tisPressEnterToChange\n\t\t\t\tvalue={ allValue }\n\t\t\t\tonChange={ onValueChange }\n\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\tplaceholder={ allPlaceholder }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t/>\n\n\t\t\t<FlexedRangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\taria-controls={ inputId }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ sliderOnChange }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1\n\t\t\t\t}\n\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
@@ -106,6 +106,7 @@ function AxialInputControls({
106
106
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
107
107
  __nextHasNoMarginBottom: true,
108
108
  __next40pxDefaultSize: __next40pxDefaultSize,
109
+ __shouldNotWarnDeprecated36pxSize: true,
109
110
  "aria-controls": inputId,
110
111
  label: _utils2.LABELS[side],
111
112
  hideLabelFromVision: true,
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_utils","_tooltip","_interopRequireDefault","_utils2","_boxControlStyles","_jsxRuntime","_react","groupedSides","AxialInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnValueChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","top","bottom","left","right","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","inputId","join","jsxs","InputWrapper","FlexedBoxControlIcon","default","placement","text","LABELS","createElement","StyledUnitControl","className","id","isPressEnterToChange","value","newValue","onUnitChange","label","hideLabelFromVision","key","FlexedRangeControl","__nextHasNoMarginBottom","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport Tooltip from '../tooltip';\nimport { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\t__next40pxDefaultSize,\n\tonChange,\n\tonFocus,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId(\n\t\tAxialInputControls,\n\t\t`box-control-input`\n\t);\n\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnValueChange = ( side: GroupedSide, next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ side }>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange( side, newValue )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t\t\t ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_utils","_tooltip","_interopRequireDefault","_utils2","_boxControlStyles","_jsxRuntime","_react","groupedSides","AxialInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnValueChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","top","bottom","left","right","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","inputId","join","jsxs","InputWrapper","FlexedBoxControlIcon","default","placement","text","LABELS","createElement","StyledUnitControl","className","id","isPressEnterToChange","value","newValue","onUnitChange","label","hideLabelFromVision","key","FlexedRangeControl","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport Tooltip from '../tooltip';\nimport { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\t__next40pxDefaultSize,\n\tonChange,\n\tonFocus,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId(\n\t\tAxialInputControls,\n\t\t`box-control-input`\n\t);\n\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnValueChange = ( side: GroupedSide, next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ side }>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange( side, newValue )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t\t\t ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
@@ -112,6 +112,7 @@ function BoxInputControls({
112
112
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
113
113
  __nextHasNoMarginBottom: true,
114
114
  __next40pxDefaultSize: __next40pxDefaultSize,
115
+ __shouldNotWarnDeprecated36pxSize: true,
115
116
  "aria-controls": inputId,
116
117
  label: _utils2.LABELS[side],
117
118
  hideLabelFromVision: true,
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_jsxRuntime","noop","BoxInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","inputId","join","jsxs","InputWrapper","expanded","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","className","id","isPressEnterToChange","value","onUnitChange","label","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","newValue","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId( BoxInputControls, 'box-control-input' );\n\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tside: keyof BoxControlValue,\n\t\tnext?: string,\n\t\textra?: { event: React.SyntheticEvent< Element, Event > }\n\t) => {\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tnextValues[ side ] = nextValue;\n\n\t\t/**\n\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t * when changing the TOP will also update BOTTOM.\n\t\t */\n\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t// it also works with drag events?\n\t\tif ( extra?.event.altKey ) {\n\t\t\tswitch ( side ) {\n\t\t\t\tcase 'top':\n\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'bottom':\n\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( nextValue, extra ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\t\tnextValue,\n\t\t\t\t\t\t\t\t\t\textra\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_jsxRuntime","noop","BoxInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","inputId","join","jsxs","InputWrapper","expanded","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","className","id","isPressEnterToChange","value","onUnitChange","label","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","newValue","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId( BoxInputControls, 'box-control-input' );\n\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tside: keyof BoxControlValue,\n\t\tnext?: string,\n\t\textra?: { event: React.SyntheticEvent< Element, Event > }\n\t) => {\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tnextValues[ side ] = nextValue;\n\n\t\t/**\n\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t * when changing the TOP will also update BOTTOM.\n\t\t */\n\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t// it also works with drag events?\n\t\tif ( extra?.event.altKey ) {\n\t\t\tswitch ( side ) {\n\t\t\t\tcase 'top':\n\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'bottom':\n\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( nextValue, extra ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\t\tnextValue,\n\t\t\t\t\t\t\t\t\t\textra\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
@@ -189,6 +189,8 @@ function UnforwardedColorPalette(props, forwardedRef) {
189
189
  };
190
190
  const actions = !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
191
191
  onClick: clearColor,
192
+ accessibleWhenDisabled: true,
193
+ disabled: !value,
192
194
  children: (0, _i18n.__)('Clear')
193
195
  });
194
196
  let metaProps;
@@ -1 +1 @@
1
- {"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","_jsxRuntime","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","jsx","default","Option","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","children","colorPalette","id","jsxs","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","_jsxRuntime","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","jsx","default","Option","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","children","colorPalette","id","jsxs","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","accessibleWhenDisabled","disabled","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction\n\t\t\tonClick={ clearColor }\n\t\t\taccessibleWhenDisabled\n\t\t\tdisabled={ ! value }\n\t\t>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
@@ -9,7 +9,7 @@ var _compose = require("@wordpress/compose");
9
9
  var _element = require("@wordpress/element");
10
10
  var _icons = require("@wordpress/icons");
11
11
  var _i18n = require("@wordpress/i18n");
12
- var _styles = require("./styles");
12
+ var _button = require("../button");
13
13
  var _tooltip = _interopRequireDefault(require("../tooltip"));
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
15
  /**
@@ -61,12 +61,14 @@ const ColorCopyButton = props => {
61
61
  }
62
62
  };
63
63
  }, []);
64
+ const label = copiedColor === color.toHex() ? (0, _i18n.__)('Copied!') : (0, _i18n.__)('Copy');
64
65
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
65
66
  delay: 0,
66
67
  hideOnClick: false,
67
- text: copiedColor === color.toHex() ? (0, _i18n.__)('Copied!') : (0, _i18n.__)('Copy'),
68
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CopyButton, {
69
- size: "small",
68
+ text: label,
69
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
70
+ size: "compact",
71
+ "aria-label": label,
70
72
  ref: copyRef,
71
73
  icon: _icons.copy,
72
74
  showTooltip: false
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_element","_icons","_i18n","_styles","_tooltip","_interopRequireDefault","_jsxRuntime","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","useState","copyTimerRef","useRef","copyRef","useCopyToClipboard","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","useEffect","jsx","default","delay","hideOnClick","text","__","children","CopyButton","size","ref","icon","copy","showTooltip","exports"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport Tooltip from '../tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimerRef = useRef<\n\t\tReturnType< typeof setTimeout > | undefined\n\t>();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimerRef.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimerRef.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimerRef on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tdelay={ 0 }\n\t\t\thideOnClick={ false }\n\t\t\ttext={\n\t\t\t\tcopiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )\n\t\t\t}\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tsize=\"small\"\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAiC,IAAAO,WAAA,GAAAP,OAAA;AAZjC;AACA;AACA;;AAMA;AACA;AACA;;AAMO,MAAMQ,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAmB,IAAK,CAAC;EACzE,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAEzB,CAAC;EACH,MAAMC,OAAO,GAAG,IAAAC,2BAAkB,EACjC,MAAM;IACL,QAASP,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACS,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAOT,KAAK,CAACU,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOV,KAAK,CAACW,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKN,YAAY,CAACO,OAAO,EAAG;MAC3BC,YAAY,CAAER,YAAY,CAACO,OAAQ,CAAC;IACrC;IACAT,cAAc,CAAEH,KAAK,CAACW,KAAK,CAAC,CAAE,CAAC;IAC/BN,YAAY,CAACO,OAAO,GAAGE,UAAU,CAAE,MAAM;MACxCX,cAAc,CAAE,IAAK,CAAC;MACtBE,YAAY,CAACO,OAAO,GAAGG,SAAS;IACjC,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACD,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKX,YAAY,CAACO,OAAO,EAAG;QAC3BC,YAAY,CAAER,YAAY,CAACO,OAAQ,CAAC;MACrC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,oBACC,IAAAf,WAAA,CAAAoB,GAAA,EAACtB,QAAA,CAAAuB,OAAO;IACPC,KAAK,EAAG,CAAG;IACXC,WAAW,EAAG,KAAO;IACrBC,IAAI,EACHnB,WAAW,KAAKF,KAAK,CAACW,KAAK,CAAC,CAAC,GAAG,IAAAW,QAAE,EAAE,SAAU,CAAC,GAAG,IAAAA,QAAE,EAAE,MAAO,CAC7D;IAAAC,QAAA,eAED,IAAA1B,WAAA,CAAAoB,GAAA,EAACvB,OAAA,CAAA8B,UAAU;MACVC,IAAI,EAAC,OAAO;MACZC,GAAG,EAAGnB,OAAS;MACfoB,IAAI,EAAGC,WAAM;MACbC,WAAW,EAAG;IAAO,CACrB;EAAC,CACM,CAAC;AAEZ,CAAC;AAACC,OAAA,CAAAhC,eAAA,GAAAA,eAAA","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_element","_icons","_i18n","_button","_tooltip","_interopRequireDefault","_jsxRuntime","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","useState","copyTimerRef","useRef","copyRef","useCopyToClipboard","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","useEffect","label","__","jsx","default","delay","hideOnClick","text","children","Button","size","ref","icon","copy","showTooltip","exports"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimerRef = useRef<\n\t\tReturnType< typeof setTimeout > | undefined\n\t>();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimerRef.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimerRef.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimerRef on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst label =\n\t\tcopiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' );\n\n\treturn (\n\t\t<Tooltip delay={ 0 } hideOnClick={ false } text={ label }>\n\t\t\t<Button\n\t\t\t\tsize=\"compact\"\n\t\t\t\taria-label={ label }\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAiC,IAAAO,WAAA,GAAAP,OAAA;AAZjC;AACA;AACA;;AAMA;AACA;AACA;;AAMO,MAAMQ,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAmB,IAAK,CAAC;EACzE,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAEzB,CAAC;EACH,MAAMC,OAAO,GAAG,IAAAC,2BAAkB,EACjC,MAAM;IACL,QAASP,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACS,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAOT,KAAK,CAACU,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOV,KAAK,CAACW,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKN,YAAY,CAACO,OAAO,EAAG;MAC3BC,YAAY,CAAER,YAAY,CAACO,OAAQ,CAAC;IACrC;IACAT,cAAc,CAAEH,KAAK,CAACW,KAAK,CAAC,CAAE,CAAC;IAC/BN,YAAY,CAACO,OAAO,GAAGE,UAAU,CAAE,MAAM;MACxCX,cAAc,CAAE,IAAK,CAAC;MACtBE,YAAY,CAACO,OAAO,GAAGG,SAAS;IACjC,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACD,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKX,YAAY,CAACO,OAAO,EAAG;QAC3BC,YAAY,CAAER,YAAY,CAACO,OAAQ,CAAC;MACrC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMK,KAAK,GACVf,WAAW,KAAKF,KAAK,CAACW,KAAK,CAAC,CAAC,GAAG,IAAAO,QAAE,EAAE,SAAU,CAAC,GAAG,IAAAA,QAAE,EAAE,MAAO,CAAC;EAE/D,oBACC,IAAArB,WAAA,CAAAsB,GAAA,EAACxB,QAAA,CAAAyB,OAAO;IAACC,KAAK,EAAG,CAAG;IAACC,WAAW,EAAG,KAAO;IAACC,IAAI,EAAGN,KAAO;IAAAO,QAAA,eACxD,IAAA3B,WAAA,CAAAsB,GAAA,EAACzB,OAAA,CAAA+B,MAAM;MACNC,IAAI,EAAC,SAAS;MACd,cAAaT,KAAO;MACpBU,GAAG,EAAGpB,OAAS;MACfqB,IAAI,EAAGC,WAAM;MACbC,WAAW,EAAG;IAAO,CACrB;EAAC,CACM,CAAC;AAEZ,CAAC;AAACC,OAAA,CAAAjC,eAAA,GAAAA,eAAA","ignoreList":[]}
@@ -76,6 +76,7 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
76
76
  justify: "space-between",
77
77
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SelectControl, {
78
78
  __nextHasNoMarginBottom: true,
79
+ size: "compact",
79
80
  options: options,
80
81
  value: colorType,
81
82
  onChange: nextColorType => setColorType(nextColorType),
@@ -1 +1 @@
1
- {"version":3,"names":["_colord","require","_names","_interopRequireDefault","_element","_compose","_i18n","_context","_styles","_colorCopyButton","_colorInput","_picker","_hooks","_jsxRuntime","extend","namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","useContextSystem","setColor","useControlledValue","safeColordColor","useMemo","colord","debouncedSetColor","useDebounce","handleChange","useCallback","nextValue","toHex","colorType","setColorType","useState","jsxs","ColorfulWrapper","ref","children","jsx","Picker","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","justify","SelectControl","__nextHasNoMarginBottom","nextColorType","__","hideLabelFromVision","variant","ColorCopyButton","ColorInputWrapper","direction","gap","ColorInput","ColorPicker","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_colord","require","_names","_interopRequireDefault","_element","_compose","_i18n","_context","_styles","_colorCopyButton","_colorInput","_picker","_hooks","_jsxRuntime","extend","namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","useContextSystem","setColor","useControlledValue","safeColordColor","useMemo","colord","debouncedSetColor","useDebounce","handleChange","useCallback","nextValue","toHex","colorType","setColorType","useState","jsxs","ColorfulWrapper","ref","children","jsx","Picker","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","justify","SelectControl","__nextHasNoMarginBottom","size","nextColorType","__","hideLabelFromVision","variant","ColorCopyButton","ColorInputWrapper","direction","gap","ColorInput","ColorPicker","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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","ignoreList":[]}