@wordpress/components 28.12.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 (396) hide show
  1. package/CHANGELOG.md +43 -1
  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/types.js.map +1 -1
  13. package/build/box-control/all-input-control.js +1 -0
  14. package/build/box-control/all-input-control.js.map +1 -1
  15. package/build/box-control/axial-input-controls.js +1 -0
  16. package/build/box-control/axial-input-controls.js.map +1 -1
  17. package/build/box-control/input-controls.js +1 -0
  18. package/build/box-control/input-controls.js.map +1 -1
  19. package/build/color-palette/index.js +2 -0
  20. package/build/color-palette/index.js.map +1 -1
  21. package/build/color-picker/color-copy-button.js +6 -4
  22. package/build/color-picker/color-copy-button.js.map +1 -1
  23. package/build/color-picker/component.js +1 -0
  24. package/build/color-picker/component.js.map +1 -1
  25. package/build/color-picker/styles.js +21 -28
  26. package/build/color-picker/styles.js.map +1 -1
  27. package/build/combobox-control/index.js +17 -12
  28. package/build/combobox-control/index.js.map +1 -1
  29. package/build/composite/hover.js +1 -1
  30. package/build/composite/hover.js.map +1 -1
  31. package/build/composite/typeahead.js +1 -1
  32. package/build/composite/typeahead.js.map +1 -1
  33. package/build/dashicon/types.js.map +1 -1
  34. package/build/dimension-control/index.js +7 -0
  35. package/build/dimension-control/index.js.map +1 -1
  36. package/build/disabled/index.js +8 -1
  37. package/build/disabled/index.js.map +1 -1
  38. package/build/duotone-picker/duotone-picker.js +2 -0
  39. package/build/duotone-picker/duotone-picker.js.map +1 -1
  40. package/build/font-size-picker/font-size-picker-toggle-group.js +1 -0
  41. package/build/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
  42. package/build/font-size-picker/index.js +7 -0
  43. package/build/font-size-picker/index.js.map +1 -1
  44. package/build/form-file-upload/index.js +3 -1
  45. package/build/form-file-upload/index.js.map +1 -1
  46. package/build/gradient-picker/index.js +34 -32
  47. package/build/gradient-picker/index.js.map +1 -1
  48. package/build/gradient-picker/types.js.map +1 -1
  49. package/build/menu/styles.js +16 -16
  50. package/build/menu/styles.js.map +1 -1
  51. package/build/modal/index.js +2 -2
  52. package/build/modal/index.js.map +1 -1
  53. package/build/private-apis.js +0 -2
  54. package/build/private-apis.js.map +1 -1
  55. package/build/range-control/index.js +11 -0
  56. package/build/range-control/index.js.map +1 -1
  57. package/build/range-control/types.js.map +1 -1
  58. package/build/slot-fill/bubbles-virtually/fill.js +14 -31
  59. package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
  60. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js +13 -4
  61. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  62. package/build/slot-fill/bubbles-virtually/slot.js +11 -9
  63. package/build/slot-fill/bubbles-virtually/slot.js.map +1 -1
  64. package/build/slot-fill/bubbles-virtually/use-slot.js +1 -8
  65. package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  66. package/build/slot-fill/fill.js +7 -24
  67. package/build/slot-fill/fill.js.map +1 -1
  68. package/build/slot-fill/index.js +5 -10
  69. package/build/slot-fill/index.js.map +1 -1
  70. package/build/slot-fill/provider.js +2 -2
  71. package/build/slot-fill/provider.js.map +1 -1
  72. package/build/slot-fill/slot.js +37 -77
  73. package/build/slot-fill/slot.js.map +1 -1
  74. package/build/slot-fill/types.js.map +1 -1
  75. package/build/text-control/index.js +7 -0
  76. package/build/text-control/index.js.map +1 -1
  77. package/build/toggle-group-control/toggle-group-control/component.js +9 -0
  78. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  79. package/build/toggle-group-control/toggle-group-control-option/component.js +1 -0
  80. package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  81. package/build/toggle-group-control/toggle-group-control-option-icon/component.js +1 -1
  82. package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  83. package/build/toggle-group-control/types.js.map +1 -1
  84. package/build/utils/deprecated-36px-size.js +3 -2
  85. package/build/utils/deprecated-36px-size.js.map +1 -1
  86. package/build-module/autocomplete/autocompleter-ui.js +1 -0
  87. package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
  88. package/build-module/border-box-control/border-box-control/component.js +1 -0
  89. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  90. package/build-module/border-box-control/border-box-control-split-controls/component.js +2 -1
  91. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  92. package/build-module/border-control/border-control/component.js +2 -1
  93. package/build-module/border-control/border-control/component.js.map +1 -1
  94. package/build-module/border-control/border-control/hook.js +3 -1
  95. package/build-module/border-control/border-control/hook.js.map +1 -1
  96. package/build-module/border-control/types.js.map +1 -1
  97. package/build-module/box-control/all-input-control.js +1 -0
  98. package/build-module/box-control/all-input-control.js.map +1 -1
  99. package/build-module/box-control/axial-input-controls.js +1 -0
  100. package/build-module/box-control/axial-input-controls.js.map +1 -1
  101. package/build-module/box-control/input-controls.js +1 -0
  102. package/build-module/box-control/input-controls.js.map +1 -1
  103. package/build-module/color-palette/index.js +2 -0
  104. package/build-module/color-palette/index.js.map +1 -1
  105. package/build-module/color-picker/color-copy-button.js +6 -4
  106. package/build-module/color-picker/color-copy-button.js.map +1 -1
  107. package/build-module/color-picker/component.js +1 -0
  108. package/build-module/color-picker/component.js.map +1 -1
  109. package/build-module/color-picker/styles.js +20 -27
  110. package/build-module/color-picker/styles.js.map +1 -1
  111. package/build-module/combobox-control/index.js +18 -13
  112. package/build-module/combobox-control/index.js.map +1 -1
  113. package/build-module/composite/hover.js +1 -1
  114. package/build-module/composite/hover.js.map +1 -1
  115. package/build-module/composite/typeahead.js +1 -1
  116. package/build-module/composite/typeahead.js.map +1 -1
  117. package/build-module/dashicon/types.js.map +1 -1
  118. package/build-module/dimension-control/index.js +7 -0
  119. package/build-module/dimension-control/index.js.map +1 -1
  120. package/build-module/disabled/index.js +8 -1
  121. package/build-module/disabled/index.js.map +1 -1
  122. package/build-module/duotone-picker/duotone-picker.js +2 -0
  123. package/build-module/duotone-picker/duotone-picker.js.map +1 -1
  124. package/build-module/font-size-picker/font-size-picker-toggle-group.js +1 -0
  125. package/build-module/font-size-picker/font-size-picker-toggle-group.js.map +1 -1
  126. package/build-module/font-size-picker/index.js +7 -0
  127. package/build-module/font-size-picker/index.js.map +1 -1
  128. package/build-module/form-file-upload/index.js +3 -1
  129. package/build-module/form-file-upload/index.js.map +1 -1
  130. package/build-module/gradient-picker/index.js +34 -32
  131. package/build-module/gradient-picker/index.js.map +1 -1
  132. package/build-module/gradient-picker/types.js.map +1 -1
  133. package/build-module/menu/styles.js +16 -16
  134. package/build-module/menu/styles.js.map +1 -1
  135. package/build-module/modal/index.js +2 -2
  136. package/build-module/modal/index.js.map +1 -1
  137. package/build-module/private-apis.js +0 -2
  138. package/build-module/private-apis.js.map +1 -1
  139. package/build-module/range-control/index.js +11 -0
  140. package/build-module/range-control/index.js.map +1 -1
  141. package/build-module/range-control/types.js.map +1 -1
  142. package/build-module/slot-fill/bubbles-virtually/fill.js +15 -32
  143. package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
  144. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js +13 -4
  145. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  146. package/build-module/slot-fill/bubbles-virtually/slot.js +11 -9
  147. package/build-module/slot-fill/bubbles-virtually/slot.js.map +1 -1
  148. package/build-module/slot-fill/bubbles-virtually/use-slot.js +2 -9
  149. package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  150. package/build-module/slot-fill/fill.js +7 -24
  151. package/build-module/slot-fill/fill.js.map +1 -1
  152. package/build-module/slot-fill/index.js +5 -8
  153. package/build-module/slot-fill/index.js.map +1 -1
  154. package/build-module/slot-fill/provider.js +2 -3
  155. package/build-module/slot-fill/provider.js.map +1 -1
  156. package/build-module/slot-fill/slot.js +38 -78
  157. package/build-module/slot-fill/slot.js.map +1 -1
  158. package/build-module/slot-fill/types.js.map +1 -1
  159. package/build-module/text-control/index.js +7 -0
  160. package/build-module/text-control/index.js.map +1 -1
  161. package/build-module/toggle-group-control/toggle-group-control/component.js +9 -0
  162. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  163. package/build-module/toggle-group-control/toggle-group-control-option/component.js +1 -0
  164. package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  165. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +1 -1
  166. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  167. package/build-module/toggle-group-control/types.js.map +1 -1
  168. package/build-module/utils/deprecated-36px-size.js +3 -2
  169. package/build-module/utils/deprecated-36px-size.js.map +1 -1
  170. package/build-style/style-rtl.css +0 -7
  171. package/build-style/style.css +0 -7
  172. package/build-types/autocomplete/autocompleter-ui.d.ts.map +1 -1
  173. package/build-types/base-control/stories/index.story.d.ts.map +1 -1
  174. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  175. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
  176. package/build-types/border-control/border-control/component.d.ts +1 -0
  177. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  178. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  179. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  180. package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -1
  181. package/build-types/border-control/stories/index.story.d.ts +10 -5
  182. package/build-types/border-control/stories/index.story.d.ts.map +1 -1
  183. package/build-types/border-control/types.d.ts +7 -0
  184. package/build-types/border-control/types.d.ts.map +1 -1
  185. package/build-types/box-control/all-input-control.d.ts.map +1 -1
  186. package/build-types/box-control/axial-input-controls.d.ts.map +1 -1
  187. package/build-types/box-control/input-controls.d.ts.map +1 -1
  188. package/build-types/box-control/styles/box-control-styles.d.ts +2 -1
  189. package/build-types/box-control/styles/box-control-styles.d.ts.map +1 -1
  190. package/build-types/checkbox-control/stories/index.story.d.ts.map +1 -1
  191. package/build-types/circular-option-picker/stories/index.story.d.ts.map +1 -1
  192. package/build-types/color-indicator/stories/index.story.d.ts.map +1 -1
  193. package/build-types/color-palette/index.d.ts.map +1 -1
  194. package/build-types/color-palette/stories/index.story.d.ts.map +1 -1
  195. package/build-types/color-picker/color-copy-button.d.ts.map +1 -1
  196. package/build-types/color-picker/component.d.ts.map +1 -1
  197. package/build-types/color-picker/stories/index.story.d.ts.map +1 -1
  198. package/build-types/color-picker/styles.d.ts +2 -4
  199. package/build-types/color-picker/styles.d.ts.map +1 -1
  200. package/build-types/combobox-control/index.d.ts +1 -0
  201. package/build-types/combobox-control/index.d.ts.map +1 -1
  202. package/build-types/combobox-control/stories/index.story.d.ts.map +1 -1
  203. package/build-types/composite/typeahead.d.ts.map +1 -1
  204. package/build-types/custom-gradient-picker/stories/index.story.d.ts.map +1 -1
  205. package/build-types/custom-select-control/stories/index.story.d.ts.map +1 -1
  206. package/build-types/custom-select-control-v2/stories/index.story.d.ts.map +1 -1
  207. package/build-types/dashicon/types.d.ts +1 -1
  208. package/build-types/dashicon/types.d.ts.map +1 -1
  209. package/build-types/date-time/stories/date-time.story.d.ts.map +1 -1
  210. package/build-types/date-time/stories/date.story.d.ts.map +1 -1
  211. package/build-types/date-time/stories/time.story.d.ts.map +1 -1
  212. package/build-types/dimension-control/index.d.ts +1 -0
  213. package/build-types/dimension-control/index.d.ts.map +1 -1
  214. package/build-types/disabled/index.d.ts +8 -1
  215. package/build-types/disabled/index.d.ts.map +1 -1
  216. package/build-types/disabled/stories/index.story.d.ts.map +1 -1
  217. package/build-types/drop-zone/stories/index.story.d.ts.map +1 -1
  218. package/build-types/dropdown-menu/stories/index.story.d.ts.map +1 -1
  219. package/build-types/duotone-picker/duotone-picker.d.ts.map +1 -1
  220. package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map +1 -1
  221. package/build-types/font-size-picker/index.d.ts.map +1 -1
  222. package/build-types/font-size-picker/stories/index.story.d.ts.map +1 -1
  223. package/build-types/form-file-upload/index.d.ts.map +1 -1
  224. package/build-types/form-file-upload/stories/index.story.d.ts.map +1 -1
  225. package/build-types/form-token-field/stories/index.story.d.ts.map +1 -1
  226. package/build-types/gradient-picker/index.d.ts +32 -32
  227. package/build-types/gradient-picker/index.d.ts.map +1 -1
  228. package/build-types/gradient-picker/stories/index.story.d.ts.map +1 -1
  229. package/build-types/gradient-picker/types.d.ts +1 -5
  230. package/build-types/gradient-picker/types.d.ts.map +1 -1
  231. package/build-types/h-stack/stories/index.story.d.ts.map +1 -1
  232. package/build-types/input-control/stories/index.story.d.ts.map +1 -1
  233. package/build-types/menu-group/stories/index.story.d.ts.map +1 -1
  234. package/build-types/menu-item/stories/index.story.d.ts.map +1 -1
  235. package/build-types/menu-items-choice/stories/index.story.d.ts.map +1 -1
  236. package/build-types/number-control/stories/index.story.d.ts.map +1 -1
  237. package/build-types/placeholder/stories/index.story.d.ts.map +1 -1
  238. package/build-types/private-apis.d.ts.map +1 -1
  239. package/build-types/radio-control/stories/index.story.d.ts.map +1 -1
  240. package/build-types/range-control/index.d.ts +3 -1
  241. package/build-types/range-control/index.d.ts.map +1 -1
  242. package/build-types/range-control/stories/index.story.d.ts.map +1 -1
  243. package/build-types/range-control/types.d.ts +7 -0
  244. package/build-types/range-control/types.d.ts.map +1 -1
  245. package/build-types/responsive-wrapper/stories/index.story.d.ts.map +1 -1
  246. package/build-types/search-control/stories/index.story.d.ts.map +1 -1
  247. package/build-types/select-control/stories/index.story.d.ts.map +1 -1
  248. package/build-types/slot-fill/bubbles-virtually/fill.d.ts +1 -1
  249. package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
  250. package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map +1 -1
  251. package/build-types/slot-fill/bubbles-virtually/slot.d.ts.map +1 -1
  252. package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts +1 -1
  253. package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts.map +1 -1
  254. package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts +3 -7
  255. package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
  256. package/build-types/slot-fill/fill.d.ts.map +1 -1
  257. package/build-types/slot-fill/index.d.ts +5 -12
  258. package/build-types/slot-fill/index.d.ts.map +1 -1
  259. package/build-types/slot-fill/provider.d.ts.map +1 -1
  260. package/build-types/slot-fill/slot.d.ts +1 -1
  261. package/build-types/slot-fill/slot.d.ts.map +1 -1
  262. package/build-types/slot-fill/types.d.ts +15 -18
  263. package/build-types/slot-fill/types.d.ts.map +1 -1
  264. package/build-types/slot-fill/use-slot.d.ts +1 -1
  265. package/build-types/slot-fill/use-slot.d.ts.map +1 -1
  266. package/build-types/text-control/index.d.ts +1 -0
  267. package/build-types/text-control/index.d.ts.map +1 -1
  268. package/build-types/text-control/stories/index.story.d.ts.map +1 -1
  269. package/build-types/textarea-control/stories/index.story.d.ts.map +1 -1
  270. package/build-types/toggle-control/stories/index.story.d.ts.map +1 -1
  271. package/build-types/toggle-group-control/stories/index.story.d.ts.map +1 -1
  272. package/build-types/toggle-group-control/toggle-group-control/component.d.ts +2 -0
  273. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  274. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +1 -0
  275. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
  276. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +1 -1
  277. package/build-types/toggle-group-control/types.d.ts +7 -0
  278. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  279. package/build-types/tools-panel/stories/index.story.d.ts.map +1 -1
  280. package/build-types/tree-select/stories/index.story.d.ts.map +1 -1
  281. package/build-types/unit-control/stories/index.story.d.ts.map +1 -1
  282. package/build-types/utils/deprecated-36px-size.d.ts +2 -1
  283. package/build-types/utils/deprecated-36px-size.d.ts.map +1 -1
  284. package/build-types/v-stack/stories/index.story.d.ts.map +1 -1
  285. package/package.json +19 -19
  286. package/src/autocomplete/autocompleter-ui.tsx +1 -0
  287. package/src/base-control/stories/index.story.tsx +2 -1
  288. package/src/border-box-control/border-box-control/component.tsx +1 -0
  289. package/src/border-box-control/border-box-control-split-controls/component.tsx +1 -0
  290. package/src/border-control/border-control/component.tsx +1 -0
  291. package/src/border-control/border-control/hook.ts +2 -0
  292. package/src/border-control/types.ts +7 -0
  293. package/src/box-control/all-input-control.tsx +1 -0
  294. package/src/box-control/axial-input-controls.tsx +1 -0
  295. package/src/box-control/input-controls.tsx +1 -0
  296. package/src/checkbox-control/stories/index.story.tsx +2 -1
  297. package/src/circular-option-picker/stories/index.story.tsx +2 -1
  298. package/src/color-indicator/stories/index.story.tsx +2 -1
  299. package/src/color-palette/index.tsx +5 -1
  300. package/src/color-palette/stories/index.story.tsx +2 -1
  301. package/src/color-picker/color-copy-button.tsx +8 -10
  302. package/src/color-picker/component.tsx +1 -0
  303. package/src/color-picker/stories/index.story.tsx +2 -1
  304. package/src/color-picker/styles.ts +0 -13
  305. package/src/combobox-control/README.md +1 -0
  306. package/src/combobox-control/index.tsx +19 -13
  307. package/src/combobox-control/stories/index.story.tsx +3 -1
  308. package/src/combobox-control/style.scss +0 -6
  309. package/src/combobox-control/test/index.tsx +7 -1
  310. package/src/composite/hover.tsx +1 -1
  311. package/src/composite/typeahead.tsx +3 -1
  312. package/src/custom-gradient-picker/stories/index.story.tsx +2 -1
  313. package/src/custom-select-control/stories/index.story.tsx +2 -1
  314. package/src/custom-select-control-v2/stories/index.story.tsx +2 -1
  315. package/src/dashicon/types.ts +0 -2
  316. package/src/date-time/stories/date-time.story.tsx +2 -1
  317. package/src/date-time/stories/date.story.tsx +2 -1
  318. package/src/date-time/stories/time.story.tsx +2 -1
  319. package/src/dimension-control/README.md +1 -0
  320. package/src/dimension-control/index.tsx +8 -0
  321. package/src/dimension-control/stories/index.story.tsx +1 -0
  322. package/src/dimension-control/test/__snapshots__/index.test.js.snap +24 -24
  323. package/src/dimension-control/test/index.test.js +7 -1
  324. package/src/disabled/README.md +9 -7
  325. package/src/disabled/index.tsx +8 -1
  326. package/src/disabled/stories/index.story.tsx +1 -0
  327. package/src/drop-zone/stories/index.story.tsx +2 -1
  328. package/src/dropdown-menu/stories/index.story.tsx +2 -1
  329. package/src/duotone-picker/duotone-picker.tsx +2 -0
  330. package/src/font-size-picker/README.md +1 -0
  331. package/src/font-size-picker/font-size-picker-toggle-group.tsx +1 -0
  332. package/src/font-size-picker/index.tsx +8 -0
  333. package/src/font-size-picker/stories/index.story.tsx +1 -0
  334. package/src/font-size-picker/test/index.tsx +5 -1
  335. package/src/form-file-upload/index.tsx +9 -3
  336. package/src/form-file-upload/stories/index.story.tsx +2 -1
  337. package/src/form-token-field/stories/index.story.tsx +2 -1
  338. package/src/gradient-picker/README.md +107 -69
  339. package/src/gradient-picker/docs-manifest.json +5 -0
  340. package/src/gradient-picker/index.tsx +34 -32
  341. package/src/gradient-picker/stories/index.story.tsx +2 -1
  342. package/src/gradient-picker/types.ts +3 -5
  343. package/src/h-stack/stories/index.story.tsx +2 -1
  344. package/src/higher-order/with-constrained-tabbing/README.md +13 -3
  345. package/src/higher-order/with-focus-return/README.md +9 -2
  346. package/src/input-control/stories/index.story.tsx +2 -1
  347. package/src/menu/styles.ts +1 -1
  348. package/src/menu-group/stories/index.story.tsx +2 -1
  349. package/src/menu-item/stories/index.story.tsx +2 -1
  350. package/src/menu-items-choice/stories/index.story.tsx +2 -1
  351. package/src/modal/index.tsx +2 -2
  352. package/src/modal/stories/index.story.tsx +1 -1
  353. package/src/number-control/stories/index.story.tsx +2 -1
  354. package/src/placeholder/stories/index.story.tsx +1 -0
  355. package/src/private-apis.ts +0 -2
  356. package/src/radio-control/stories/index.story.tsx +2 -1
  357. package/src/range-control/README.md +4 -3
  358. package/src/range-control/index.tsx +11 -0
  359. package/src/range-control/stories/index.story.tsx +9 -1
  360. package/src/range-control/test/index.tsx +7 -1
  361. package/src/range-control/types.ts +7 -0
  362. package/src/responsive-wrapper/stories/index.story.tsx +2 -1
  363. package/src/search-control/stories/index.story.tsx +2 -1
  364. package/src/select-control/stories/index.story.tsx +2 -1
  365. package/src/slot-fill/README.md +26 -15
  366. package/src/slot-fill/bubbles-virtually/fill.tsx +18 -28
  367. package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx +26 -16
  368. package/src/slot-fill/bubbles-virtually/slot.tsx +13 -9
  369. package/src/slot-fill/bubbles-virtually/use-slot.ts +3 -26
  370. package/src/slot-fill/fill.ts +7 -22
  371. package/src/slot-fill/index.tsx +5 -7
  372. package/src/slot-fill/provider.tsx +8 -17
  373. package/src/slot-fill/slot.tsx +48 -85
  374. package/src/slot-fill/types.ts +14 -51
  375. package/src/text-control/README.md +1 -0
  376. package/src/text-control/index.tsx +8 -0
  377. package/src/text-control/stories/index.story.tsx +3 -1
  378. package/src/text-control/test/text-control.tsx +7 -1
  379. package/src/textarea-control/stories/index.story.tsx +2 -1
  380. package/src/toggle-control/stories/index.story.tsx +2 -1
  381. package/src/toggle-group-control/stories/index.story.tsx +3 -1
  382. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +12 -12
  383. package/src/toggle-group-control/test/index.tsx +7 -1
  384. package/src/toggle-group-control/toggle-group-control/README.md +2 -1
  385. package/src/toggle-group-control/toggle-group-control/component.tsx +10 -0
  386. package/src/toggle-group-control/toggle-group-control-option/README.md +1 -1
  387. package/src/toggle-group-control/toggle-group-control-option/component.tsx +1 -0
  388. package/src/toggle-group-control/toggle-group-control-option-icon/README.md +1 -1
  389. package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +1 -1
  390. package/src/toggle-group-control/types.ts +7 -0
  391. package/src/tools-panel/stories/index.story.tsx +3 -0
  392. package/src/tree-select/stories/index.story.tsx +2 -1
  393. package/src/unit-control/stories/index.story.tsx +2 -1
  394. package/src/utils/deprecated-36px-size.ts +3 -0
  395. package/src/v-stack/stories/index.story.tsx +2 -1
  396. package/tsconfig.tsbuildinfo +1 -1
@@ -1 +1 @@
1
- {"version":3,"names":["_element","require","_button","_interopRequireDefault","_jsxRuntime","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","useRef","openFileDialog","current","click","ui","jsx","default","compatAccept","includes","jsxs","className","type","style","display","_default","exports"],"sources":["@wordpress/components/src/form-file-upload/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context';\nimport type { FormFileUploadProps } from './types';\n\n/**\n * FormFileUpload is a component that allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n * <FormFileUpload\n * accept=\"image/*\"\n * onChange={ ( event ) => console.log( event.currentTarget.files ) }\n * >\n * Upload\n * </FormFileUpload>\n * );\n * ```\n */\nexport function FormFileUpload( {\n\taccept,\n\tchildren,\n\tmultiple = false,\n\tonChange,\n\tonClick,\n\trender,\n\t...props\n}: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {\n\tconst ref = useRef< HTMLInputElement >( null );\n\tconst openFileDialog = () => {\n\t\tref.current?.click();\n\t};\n\n\tconst ui = render ? (\n\t\trender( { openFileDialog } )\n\t) : (\n\t\t<Button onClick={ openFileDialog } { ...props }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n\t// @todo: Temporary fix a bug that prevents Chromium browsers from selecting \".heic\" files\n\t// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.\n\t// This can be removed once the Chromium fix is in the stable channel.\n\tconst compatAccept = !! accept?.includes( 'image/*' )\n\t\t? `${ accept }, image/heic, image/heif`\n\t\t: accept;\n\n\treturn (\n\t\t<div className=\"components-form-file-upload\">\n\t\t\t{ ui }\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tref={ ref }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\taccept={ compatAccept }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tdata-testid=\"form-file-upload-input\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default FormFileUpload;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+B,IAAAG,WAAA,GAAAH,OAAA;AAR/B;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAE;EAC/BC,MAAM;EACNC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACN,GAAGC;AAC6D,CAAC,EAAG;EACpE,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC9C,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC5BF,GAAG,CAACG,OAAO,EAAEC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,MAAMC,EAAE,GAAGP,MAAM,GAChBA,MAAM,CAAE;IAAEI;EAAe,CAAE,CAAC,gBAE5B,IAAAX,WAAA,CAAAe,GAAA,EAACjB,OAAA,CAAAkB,OAAM;IAACV,OAAO,EAAGK,cAAgB;IAAA,GAAMH,KAAK;IAAAL,QAAA,EAC1CA;EAAQ,CACH,CACR;EACD;EACA;EACA;EACA,MAAMc,YAAY,GAAG,CAAC,CAAEf,MAAM,EAAEgB,QAAQ,CAAE,SAAU,CAAC,GAClD,GAAIhB,MAAM,0BAA2B,GACrCA,MAAM;EAET,oBACC,IAAAF,WAAA,CAAAmB,IAAA;IAAKC,SAAS,EAAC,6BAA6B;IAAAjB,QAAA,GACzCW,EAAE,eACJ,IAAAd,WAAA,CAAAe,GAAA;MACCM,IAAI,EAAC,MAAM;MACXZ,GAAG,EAAGA,GAAK;MACXL,QAAQ,EAAGA,QAAU;MACrBkB,KAAK,EAAG;QAAEC,OAAO,EAAE;MAAO,CAAG;MAC7BrB,MAAM,EAAGe,YAAc;MACvBZ,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnB,eAAY;IAAwB,CACpC,CAAC;EAAA,CACE,CAAC;AAER;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAEcf,cAAc","ignoreList":[]}
1
+ {"version":3,"names":["_element","require","_button","_interopRequireDefault","_jsxRuntime","FormFileUpload","accept","children","multiple","onChange","onClick","render","props","ref","useRef","openFileDialog","current","click","ui","jsx","default","isSafari","globalThis","window","navigator","userAgent","includes","compatAccept","jsxs","className","type","style","display","_default","exports"],"sources":["@wordpress/components/src/form-file-upload/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context';\nimport type { FormFileUploadProps } from './types';\n\n/**\n * FormFileUpload is a component that allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n * <FormFileUpload\n * accept=\"image/*\"\n * onChange={ ( event ) => console.log( event.currentTarget.files ) }\n * >\n * Upload\n * </FormFileUpload>\n * );\n * ```\n */\nexport function FormFileUpload( {\n\taccept,\n\tchildren,\n\tmultiple = false,\n\tonChange,\n\tonClick,\n\trender,\n\t...props\n}: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {\n\tconst ref = useRef< HTMLInputElement >( null );\n\tconst openFileDialog = () => {\n\t\tref.current?.click();\n\t};\n\n\tconst ui = render ? (\n\t\trender( { openFileDialog } )\n\t) : (\n\t\t<Button onClick={ openFileDialog } { ...props }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n\t// @todo: Temporary fix a bug that prevents Chromium browsers from selecting \".heic\" files\n\t// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.\n\t// This can be removed once the Chromium fix is in the stable channel.\n\t// Prevent Safari from adding \"image/heic\" and \"image/heif\" to the accept attribute.\n\tconst isSafari =\n\t\tglobalThis.window?.navigator.userAgent.includes( 'Safari' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&\n\t\t! globalThis.window?.navigator.userAgent.includes( 'Chromium' );\n\tconst compatAccept =\n\t\t! isSafari && !! accept?.includes( 'image/*' )\n\t\t\t? `${ accept }, image/heic, image/heif`\n\t\t\t: accept;\n\n\treturn (\n\t\t<div className=\"components-form-file-upload\">\n\t\t\t{ ui }\n\t\t\t<input\n\t\t\t\ttype=\"file\"\n\t\t\t\tref={ ref }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\taccept={ compatAccept }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tdata-testid=\"form-file-upload-input\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default FormFileUpload;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+B,IAAAG,WAAA,GAAAH,OAAA;AAR/B;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAE;EAC/BC,MAAM;EACNC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACN,GAAGC;AAC6D,CAAC,EAAG;EACpE,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC9C,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC5BF,GAAG,CAACG,OAAO,EAAEC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,MAAMC,EAAE,GAAGP,MAAM,GAChBA,MAAM,CAAE;IAAEI;EAAe,CAAE,CAAC,gBAE5B,IAAAX,WAAA,CAAAe,GAAA,EAACjB,OAAA,CAAAkB,OAAM;IAACV,OAAO,EAAGK,cAAgB;IAAA,GAAMH,KAAK;IAAAL,QAAA,EAC1CA;EAAQ,CACH,CACR;EACD;EACA;EACA;EACA;EACA,MAAMc,QAAQ,GACbC,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC3D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,QAAS,CAAC,IAC7D,CAAEJ,UAAU,CAACC,MAAM,EAAEC,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAE,UAAW,CAAC;EAChE,MAAMC,YAAY,GACjB,CAAEN,QAAQ,IAAI,CAAC,CAAEf,MAAM,EAAEoB,QAAQ,CAAE,SAAU,CAAC,GAC3C,GAAIpB,MAAM,0BAA2B,GACrCA,MAAM;EAEV,oBACC,IAAAF,WAAA,CAAAwB,IAAA;IAAKC,SAAS,EAAC,6BAA6B;IAAAtB,QAAA,GACzCW,EAAE,eACJ,IAAAd,WAAA,CAAAe,GAAA;MACCW,IAAI,EAAC,MAAM;MACXjB,GAAG,EAAGA,GAAK;MACXL,QAAQ,EAAGA,QAAU;MACrBuB,KAAK,EAAG;QAAEC,OAAO,EAAE;MAAO,CAAG;MAC7B1B,MAAM,EAAGqB,YAAc;MACvBlB,QAAQ,EAAGA,QAAU;MACrBC,OAAO,EAAGA,OAAS;MACnB,eAAY;IAAwB,CACpC,CAAC;EAAA,CACE,CAAC;AAER;AAAC,IAAAuB,QAAA,GAAAC,OAAA,CAAAd,OAAA,GAEcf,cAAc","ignoreList":[]}
@@ -150,44 +150,44 @@ function Component(props) {
150
150
  }
151
151
 
152
152
  /**
153
- * GradientPicker is a React component that renders a color gradient picker to
153
+ * GradientPicker is a React component that renders a color gradient picker to
154
154
  * define a multi step gradient. There's either a _linear_ or a _radial_ type
155
155
  * available.
156
156
  *
157
157
  * ```jsx
158
- *import { GradientPicker } from '@wordpress/components';
159
- *import { useState } from '@wordpress/element';
158
+ * import { useState } from 'react';
159
+ * import { GradientPicker } from '@wordpress/components';
160
160
  *
161
- *const myGradientPicker = () => {
162
- * const [ gradient, setGradient ] = useState( null );
161
+ * const MyGradientPicker = () => {
162
+ * const [ gradient, setGradient ] = useState( null );
163
163
  *
164
- * return (
165
- * <GradientPicker
166
- * value={ gradient }
167
- * onChange={ ( currentGradient ) => setGradient( currentGradient ) }
168
- * gradients={ [
169
- * {
170
- * name: 'JShine',
171
- * gradient:
172
- * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
173
- * slug: 'jshine',
174
- * },
175
- * {
176
- * name: 'Moonlit Asteroid',
177
- * gradient:
178
- * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
179
- * slug: 'moonlit-asteroid',
180
- * },
181
- * {
182
- * name: 'Rastafarie',
183
- * gradient:
184
- * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
185
- * slug: 'rastafari',
186
- * },
187
- * ] }
188
- * />
189
- * );
190
- *};
164
+ * return (
165
+ * <GradientPicker
166
+ * value={ gradient }
167
+ * onChange={ ( currentGradient ) => setGradient( currentGradient ) }
168
+ * gradients={ [
169
+ * {
170
+ * name: 'JShine',
171
+ * gradient:
172
+ * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
173
+ * slug: 'jshine',
174
+ * },
175
+ * {
176
+ * name: 'Moonlit Asteroid',
177
+ * gradient:
178
+ * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
179
+ * slug: 'moonlit-asteroid',
180
+ * },
181
+ * {
182
+ * name: 'Rastafarie',
183
+ * gradient:
184
+ * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
185
+ * slug: 'rastafari',
186
+ * },
187
+ * ] }
188
+ * />
189
+ * );
190
+ * };
191
191
  *```
192
192
  *
193
193
  */
@@ -218,6 +218,8 @@ function GradientPicker({
218
218
  value: value,
219
219
  actions: clearable && !disableCustomGradients && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
220
220
  onClick: clearGradient,
221
+ accessibleWhenDisabled: true,
222
+ disabled: !value,
221
223
  children: (0, _i18n.__)('Clear')
222
224
  }),
223
225
  headingLevel: headingLevel
@@ -1 +1 @@
1
- {"version":3,"names":["_i18n","require","_compose","_element","_circularOptionPicker","_interopRequireDefault","_customGradientPicker","_vStack","_styles","_jsxRuntime","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","useMemo","map","gradient","name","slug","index","jsx","default","Option","isSelected","tooltipText","sprintf","__","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","useInstanceId","VStack","spacing","children","gradientSet","id","jsxs","ColorHeading","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","useCallback","undefined","ButtonAction","_default","exports"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ 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 level={ headingLevel } id={ id }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, 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\nfunction Component( props: PickerProps< any > ) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\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<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n *import { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 || clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_i18n","require","_compose","_element","_circularOptionPicker","_interopRequireDefault","_customGradientPicker","_vStack","_styles","_jsxRuntime","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","useMemo","map","gradient","name","slug","index","jsx","default","Option","isSelected","tooltipText","sprintf","__","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","useInstanceId","VStack","spacing","children","gradientSet","id","jsxs","ColorHeading","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","useCallback","undefined","ButtonAction","accessibleWhenDisabled","disabled","_default","exports"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ 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 level={ headingLevel } id={ id }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, 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\nfunction Component( props: PickerProps< any > ) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\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<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n * const [ gradient, setGradient ] = useState( null );\n *\n * return (\n * <GradientPicker\n * value={ gradient }\n * onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n * gradients={ [\n * {\n * name: 'JShine',\n * gradient:\n * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n * slug: 'jshine',\n * },\n * {\n * name: 'Moonlit Asteroid',\n * gradient:\n * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n * slug: 'moonlit-asteroid',\n * },\n * {\n * name: 'Rastafarie',\n * gradient:\n * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n * slug: 'rastafari',\n * },\n * ] }\n * />\n * );\n * };\n *```\n *\n */\nexport function GradientPicker( {\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 || clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,qBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAAuD,IAAAQ,WAAA,GAAAR,OAAA;AAbvD;AACA;AACA;;AAKA;AACA;AACA;;AAYA;AACA;AACA,MAAMS,sBAAsB,GAC3BC,GAA0B,IAE1BC,KAAK,CAACC,OAAO,CAAEF,GAAG,CAACG,SAAU,CAAC,IAAI,EAAI,UAAU,IAAIH,GAAG,CAAE;AAE1D,MAAMI,qBAAqB,GAAKC,GAAU,IAA6B;EACtE,OACCA,GAAG,CAACC,MAAM,GAAG,CAAC,IACdD,GAAG,CAACE,KAAK,CAAIC,WAAW,IAAMT,sBAAsB,CAAES,WAAY,CAAE,CAAC;AAEvE,CAAC;AAED,SAASC,YAAYA,CAAE;EACtBC,SAAS;EACTC,aAAa;EACbR,SAAS;EACTS,QAAQ;EACRC,KAAK;EACL,GAAGC;AAC2B,CAAC,EAAG;EAClC,MAAMC,eAAe,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACtC,OAAOb,SAAS,CAACc,GAAG,CAAE,CAAE;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAAK,CAAC,EAAEC,KAAK,kBACtD,IAAAvB,WAAA,CAAAwB,GAAA,EAAC7B,qBAAA,CAAA8B,OAAoB,CAACC,MAAM;MAE3BX,KAAK,EAAGK,QAAU;MAClBO,UAAU,EAAGZ,KAAK,KAAKK,QAAU;MACjCQ,WAAW,EACVP,IAAI;MACJ;MACA,IAAAQ,aAAO,EAAE,IAAAC,QAAE,EAAE,mBAAoB,CAAC,EAAEV,QAAS,CAC7C;MACDW,KAAK,EAAG;QAAEC,KAAK,EAAE,iBAAiB;QAAEC,UAAU,EAAEb;MAAS,CAAG;MAC5Dc,OAAO,EACNnB,KAAK,KAAKK,QAAQ,GACfP,aAAa,GACb,MAAMC,QAAQ,CAAEM,QAAQ,EAAEG,KAAM,CACnC;MACD,cACCF,IAAI;MACD;MACA,IAAAQ,aAAO,EAAE,IAAAC,QAAE,EAAE,cAAe,CAAC,EAAET,IAAK,CAAC;MACrC;MACA,IAAAQ,aAAO,EAAE,IAAAC,QAAE,EAAE,mBAAoB,CAAC,EAAEV,QAAS;IAChD,GApBKE,IAqBN,CACA,CAAC;EACJ,CAAC,EAAE,CAAEjB,SAAS,EAAEU,KAAK,EAAED,QAAQ,EAAED,aAAa,CAAG,CAAC;EAClD,oBACC,IAAAb,WAAA,CAAAwB,GAAA,EAAC7B,qBAAA,CAAA8B,OAAoB,CAACU,WAAW;IAChCvB,SAAS,EAAGA,SAAW;IACvBwB,OAAO,EAAGnB,eAAiB;IAAA,GACtBD;EAAe,CACpB,CAAC;AAEJ;AAEA,SAASqB,cAAcA,CAAE;EACxBzB,SAAS;EACTC,aAAa;EACbR,SAAS;EACTS,QAAQ;EACRC,KAAK;EACLuB;AAC4B,CAAC,EAAG;EAChC,MAAMC,UAAU,GAAG,IAAAC,sBAAa,EAAEH,cAAe,CAAC;EAElD,oBACC,IAAArC,WAAA,CAAAwB,GAAA,EAAC1B,OAAA,CAAA2C,MAAM;IAACC,OAAO,EAAG,CAAG;IAAC9B,SAAS,EAAGA,SAAW;IAAA+B,QAAA,EAC1CtC,SAAS,CAACc,GAAG,CAAE,CAAE;MAAEE,IAAI;MAAEhB,SAAS,EAAEuC;IAAY,CAAC,EAAErB,KAAK,KAAM;MAC/D,MAAMsB,EAAE,GAAG,iBAAkBN,UAAU,IAAMhB,KAAK,EAAG;MACrD,oBACC,IAAAvB,WAAA,CAAA8C,IAAA,EAAChD,OAAA,CAAA2C,MAAM;QAACC,OAAO,EAAG,CAAG;QAAAC,QAAA,gBACpB,IAAA3C,WAAA,CAAAwB,GAAA,EAACzB,OAAA,CAAAgD,YAAY;UAACC,KAAK,EAAGV,YAAc;UAACO,EAAE,EAAGA,EAAI;UAAAF,QAAA,EAC3CtB;QAAI,CACO,CAAC,eACf,IAAArB,WAAA,CAAAwB,GAAA,EAACb,YAAY;UACZE,aAAa,EAAGA,aAAe;UAC/BR,SAAS,EAAGuC,WAAa;UACzB9B,QAAQ,EAAKM,QAAQ,IACpBN,QAAQ,CAAEM,QAAQ,EAAEG,KAAM,CAC1B;UACDR,KAAK,EAAGA,KAAO;UACf,mBAAkB8B;QAAI,CACtB,CAAC;MAAA,GAZyBtB,KAapB,CAAC;IAEX,CAAE;EAAC,CACI,CAAC;AAEX;AAEA,SAAS0B,SAASA,CAAEC,KAAyB,EAAG;EAC/C,MAAM;IACLC,SAAS;IACTC,IAAI;IACJC,OAAO;IACPf,YAAY;IACZ,YAAY,EAAEgB,SAAS;IACvB,iBAAiB,EAAEC,cAAc;IACjC,GAAGvC;EACJ,CAAC,GAAGkC,KAAK;EACT,MAAMd,OAAO,GAAG9B,qBAAqB,CAAE4C,KAAK,CAAC7C,SAAU,CAAC,gBACvD,IAAAL,WAAA,CAAAwB,GAAA,EAACa,cAAc;IAACC,YAAY,EAAGA,YAAc;IAAA,GAAMtB;EAAe,CAAI,CAAC,gBAEvE,IAAAhB,WAAA,CAAAwB,GAAA,EAACb,YAAY;IAAA,GAAMK;EAAe,CAAI,CACtC;EAED,IAAIwC,SAGkB;EAEtB,IAAKL,SAAS,EAAG;IAChBK,SAAS,GAAG;MAAEL,SAAS,EAAE;IAAK,CAAC;EAChC,CAAC,MAAM;IACN,MAAMM,UAAgD,GAAG;MACxDN,SAAS,EAAE,KAAK;MAChBC;IACD,CAAC;IAED,IAAKE,SAAS,EAAG;MAChBE,SAAS,GAAG;QAAE,GAAGC,UAAU;QAAE,YAAY,EAAEH;MAAU,CAAC;IACvD,CAAC,MAAM,IAAKC,cAAc,EAAG;MAC5BC,SAAS,GAAG;QACX,GAAGC,UAAU;QACb,iBAAiB,EAAEF;MACpB,CAAC;IACF,CAAC,MAAM;MACNC,SAAS,GAAG;QACX,GAAGC,UAAU;QACb,YAAY,EAAE,IAAA3B,QAAE,EAAE,sBAAuB;MAC1C,CAAC;IACF;EACD;EAEA,oBACC,IAAA9B,WAAA,CAAAwB,GAAA,EAAC7B,qBAAA,CAAA8B,OAAoB;IAAA,GACf+B,SAAS;IACdH,OAAO,EAAGA,OAAS;IACnBjB,OAAO,EAAGA;EAAS,CACnB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASsB,cAAcA,CAAE;EAC/B9C,SAAS;EACTP,SAAS,GAAG,EAAE;EACdS,QAAQ;EACRC,KAAK;EACL4C,SAAS,GAAG,IAAI;EAChBC,sBAAsB,GAAG,KAAK;EAC9BC,iCAAiC;EACjCvB,YAAY,GAAG,CAAC;EAChB,GAAGtB;AAC0B,CAAC,EAAG;EACjC,MAAMH,aAAa,GAAG,IAAAiD,oBAAW,EAChC,MAAMhD,QAAQ,CAAEiD,SAAU,CAAC,EAC3B,CAAEjD,QAAQ,CACX,CAAC;EAED,oBACC,IAAAd,WAAA,CAAA8C,IAAA,EAAChD,OAAA,CAAA2C,MAAM;IAACC,OAAO,EAAGrC,SAAS,CAACG,MAAM,GAAG,CAAC,GAAG,CAAG;IAAAmC,QAAA,GACzC,CAAEiB,sBAAsB,iBACzB,IAAA5D,WAAA,CAAAwB,GAAA,EAAC3B,qBAAA,CAAA4B,OAAoB;MACpBoC,iCAAiC,EAChCA,iCACA;MACD9C,KAAK,EAAGA,KAAO;MACfD,QAAQ,EAAGA;IAAU,CACrB,CACD,EACC,CAAET,SAAS,CAACG,MAAM,GAAG,CAAC,IAAImD,SAAS,kBACpC,IAAA3D,WAAA,CAAAwB,GAAA,EAACyB,SAAS;MAAA,GACJjC,eAAe;MACpBJ,SAAS,EAAGA,SAAW;MACvBC,aAAa,EAAGA,aAAe;MAC/BR,SAAS,EAAGA,SAAW;MACvBS,QAAQ,EAAGA,QAAU;MACrBC,KAAK,EAAGA,KAAO;MACfsC,OAAO,EACNM,SAAS,IACT,CAAEC,sBAAsB,iBACvB,IAAA5D,WAAA,CAAAwB,GAAA,EAAC7B,qBAAA,CAAA8B,OAAoB,CAACuC,YAAY;QACjC9B,OAAO,EAAGrB,aAAe;QACzBoD,sBAAsB;QACtBC,QAAQ,EAAG,CAAEnD,KAAO;QAAA4B,QAAA,EAElB,IAAAb,QAAE,EAAE,OAAQ;MAAC,CACmB,CAEpC;MACDQ,YAAY,EAAGA;IAAc,CAC7B,CACD;EAAA,CACM,CAAC;AAEX;AAAC,IAAA6B,QAAA,GAAAC,OAAA,CAAA3C,OAAA,GAEciC,cAAc","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] | OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/**\n\t * The class name added to the wrapper.\n\t */\n\tclassName?: string;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string | undefined ) => void;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: GradientObject[ 'gradient' ] | null;\n\t/**\n\t * Whether the palette should have a clearing button or not.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (ie. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * A label to identify the purpose of the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-labelledby` should be required\n\t\t\t */\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t }\n\t| {\n\t\t\t/**\n\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-label` should be required\n\t\t\t */\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/**\n\t * An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t *\n\t * @default []\n\t */\n\tgradients?: GradientsProp;\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t *\n\t * @default false\n\t */\n\tdisableCustomGradients?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject | OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string | undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] | OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/**\n\t * The class name added to the wrapper.\n\t */\n\tclassName?: string;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string | undefined ) => void;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: GradientObject[ 'gradient' ] | null;\n\t/**\n\t * Whether the palette should have a clearing button or not.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (i.e. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t| {\n\t\t\t// TODO: [#54055] Either this or `aria-labelledby` should be required\n\t\t\t/**\n\t\t\t * A label to identify the purpose of the control.\n\t\t\t */\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t }\n\t| {\n\t\t\t// TODO: [#54055] Either this or `aria-label` should be required\n\t\t\t/**\n\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t */\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/**\n\t * An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t *\n\t * @default []\n\t */\n\tgradients?: GradientsProp;\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t *\n\t * @default false\n\t */\n\tdisableCustomGradients?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject | OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string | undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}