@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.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 (748) hide show
  1. package/CHANGELOG.md +54 -1
  2. package/CONTRIBUTING.md +1 -1
  3. package/LICENSE.md +1 -1
  4. package/README.md +8 -4
  5. package/build/base-control/index.js +2 -3
  6. package/build/base-control/index.js.map +1 -1
  7. package/build/base-control/styles/base-control-styles.js +23 -13
  8. package/build/base-control/styles/base-control-styles.js.map +1 -1
  9. package/build/base-field/hook.js +1 -1
  10. package/build/base-field/hook.js.map +1 -1
  11. package/build/box-control/styles/box-control-styles.js +9 -9
  12. package/build/box-control/styles/box-control-styles.js.map +1 -1
  13. package/build/button/deprecated.js +2 -1
  14. package/build/button/deprecated.js.map +1 -1
  15. package/build/button/index.js +2 -1
  16. package/build/button/index.js.map +1 -1
  17. package/build/card/card/component.js +1 -1
  18. package/build/card/card/component.js.map +1 -1
  19. package/build/card/card/hook.js +1 -1
  20. package/build/card/card/hook.js.map +1 -1
  21. package/build/card/card-body/hook.js +1 -1
  22. package/build/card/card-body/hook.js.map +1 -1
  23. package/build/card/card-divider/hook.js +1 -1
  24. package/build/card/card-divider/hook.js.map +1 -1
  25. package/build/card/card-footer/hook.js +1 -1
  26. package/build/card/card-footer/hook.js.map +1 -1
  27. package/build/card/card-header/hook.js +1 -1
  28. package/build/card/card-header/hook.js.map +1 -1
  29. package/build/card/card-media/hook.js +1 -1
  30. package/build/card/card-media/hook.js.map +1 -1
  31. package/build/circular-option-picker/index.js +2 -0
  32. package/build/circular-option-picker/index.js.map +1 -1
  33. package/build/color-indicator/index.js +2 -0
  34. package/build/color-indicator/index.js.map +1 -1
  35. package/build/color-palette/index.js +4 -7
  36. package/build/color-palette/index.js.map +1 -1
  37. package/build/color-palette/index.native.js +4 -2
  38. package/build/color-palette/index.native.js.map +1 -1
  39. package/build/color-picker/color-display.js.map +1 -1
  40. package/build/color-picker/color-input.js.map +1 -1
  41. package/build/color-picker/component.js +2 -5
  42. package/build/color-picker/component.js.map +1 -1
  43. package/build/color-picker/use-deprecated-props.js +2 -0
  44. package/build/color-picker/use-deprecated-props.js.map +1 -1
  45. package/build/confirm-dialog/component.js +10 -6
  46. package/build/confirm-dialog/component.js.map +1 -1
  47. package/build/confirm-dialog/styles.js +30 -0
  48. package/build/confirm-dialog/styles.js.map +1 -0
  49. package/build/custom-gradient-bar/control-points.js +1 -2
  50. package/build/custom-gradient-bar/control-points.js.map +1 -1
  51. package/build/custom-select-control/index.js +10 -2
  52. package/build/custom-select-control/index.js.map +1 -1
  53. package/build/date-time/time.js +1 -1
  54. package/build/date-time/time.js.map +1 -1
  55. package/build/divider/component.js.map +1 -1
  56. package/build/dropdown/index.js +3 -3
  57. package/build/dropdown/index.js.map +1 -1
  58. package/build/elevation/hook.js +5 -5
  59. package/build/elevation/hook.js.map +1 -1
  60. package/build/external-link/styles/external-link-styles.js +5 -5
  61. package/build/external-link/styles/external-link-styles.js.map +1 -1
  62. package/build/flex/flex/hook.js +4 -4
  63. package/build/flex/flex/hook.js.map +1 -1
  64. package/build/form-token-field/suggestions-list.js +75 -81
  65. package/build/form-token-field/suggestions-list.js.map +1 -1
  66. package/build/grid/hook.js +2 -2
  67. package/build/grid/hook.js.map +1 -1
  68. package/build/heading/component.js +0 -1
  69. package/build/heading/component.js.map +1 -1
  70. package/build/icon/index.js +0 -1
  71. package/build/icon/index.js.map +1 -1
  72. package/build/input-control/index.js.map +1 -1
  73. package/build/input-control/input-base.js +0 -1
  74. package/build/input-control/input-base.js.map +1 -1
  75. package/build/input-control/input-field.js.map +1 -1
  76. package/build/input-control/reducer/actions.js +0 -1
  77. package/build/input-control/reducer/actions.js.map +1 -1
  78. package/build/input-control/reducer/reducer.js.map +1 -1
  79. package/build/input-control/reducer/state.js +0 -1
  80. package/build/input-control/reducer/state.js.map +1 -1
  81. package/build/input-control/styles/input-control-styles.js +32 -30
  82. package/build/input-control/styles/input-control-styles.js.map +1 -1
  83. package/build/item-group/item/component.js +0 -1
  84. package/build/item-group/item/component.js.map +1 -1
  85. package/build/item-group/item/hook.js +1 -2
  86. package/build/item-group/item/hook.js.map +1 -1
  87. package/build/item-group/item-group/component.js +0 -1
  88. package/build/item-group/item-group/component.js.map +1 -1
  89. package/build/mobile/bottom-sheet/bottom-sheet-context.native.js +3 -1
  90. package/build/mobile/bottom-sheet/bottom-sheet-context.native.js.map +1 -1
  91. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +4 -12
  92. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js.map +1 -1
  93. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +23 -5
  94. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  95. package/build/mobile/bottom-sheet/cell.native.js +3 -5
  96. package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
  97. package/build/mobile/bottom-sheet/index.native.js +16 -16
  98. package/build/mobile/bottom-sheet/index.native.js.map +1 -1
  99. package/build/mobile/bottom-sheet/range-text-input.native.js +2 -3
  100. package/build/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
  101. package/build/mobile/color-settings/index.native.js +2 -0
  102. package/build/mobile/color-settings/index.native.js.map +1 -1
  103. package/build/mobile/color-settings/palette.screen.native.js +5 -0
  104. package/build/mobile/color-settings/palette.screen.native.js.map +1 -1
  105. package/build/mobile/color-settings/utils.native.js +9 -3
  106. package/build/mobile/color-settings/utils.native.js.map +1 -1
  107. package/build/mobile/keyboard-avoiding-view/index.ios.js +6 -8
  108. package/build/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
  109. package/build/mobile/link-picker/index.native.js +3 -1
  110. package/build/mobile/link-picker/index.native.js.map +1 -1
  111. package/build/mobile/link-picker/link-picker-screen.native.js +18 -5
  112. package/build/mobile/link-picker/link-picker-screen.native.js.map +1 -1
  113. package/build/mobile/link-settings/index.native.js +3 -1
  114. package/build/mobile/link-settings/index.native.js.map +1 -1
  115. package/build/mobile/readable-content-view/index.native.js +2 -2
  116. package/build/mobile/readable-content-view/index.native.js.map +1 -1
  117. package/build/mobile/utils/use-is-floating-keyboard.native.js +2 -2
  118. package/build/mobile/utils/use-is-floating-keyboard.native.js.map +1 -1
  119. package/build/mobile/utils/use-unit-converter-to-mobile.native.js +7 -3
  120. package/build/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  121. package/build/modal/index.js +1 -12
  122. package/build/modal/index.js.map +1 -1
  123. package/build/navigator/context.js +5 -1
  124. package/build/navigator/context.js.map +1 -1
  125. package/build/navigator/navigator-provider/component.js +42 -22
  126. package/build/navigator/navigator-provider/component.js.map +1 -1
  127. package/build/navigator/navigator-screen/component.js +57 -29
  128. package/build/navigator/navigator-screen/component.js.map +1 -1
  129. package/build/navigator/use-navigator.js +8 -8
  130. package/build/navigator/use-navigator.js.map +1 -1
  131. package/build/notice/index.native.js +2 -2
  132. package/build/notice/index.native.js.map +1 -1
  133. package/build/palette-edit/index.js +39 -30
  134. package/build/palette-edit/index.js.map +1 -1
  135. package/build/palette-edit/styles.js +11 -13
  136. package/build/palette-edit/styles.js.map +1 -1
  137. package/build/placeholder/index.js +4 -4
  138. package/build/placeholder/index.js.map +1 -1
  139. package/build/range-control/styles/range-control-styles.js +29 -29
  140. package/build/range-control/styles/range-control-styles.js.map +1 -1
  141. package/build/resizable-box/index.js.map +1 -1
  142. package/build/resizable-box/resize-tooltip/index.js.map +1 -1
  143. package/build/resizable-box/resize-tooltip/label.js +0 -1
  144. package/build/resizable-box/resize-tooltip/label.js.map +1 -1
  145. package/build/sandbox/index.native.js +5 -5
  146. package/build/sandbox/index.native.js.map +1 -1
  147. package/build/scrollable/hook.js +1 -1
  148. package/build/scrollable/hook.js.map +1 -1
  149. package/build/select-control/index.js.map +1 -1
  150. package/build/slot-fill/bubbles-virtually/fill.js +11 -2
  151. package/build/slot-fill/bubbles-virtually/fill.js.map +1 -1
  152. package/build/spacer/component.js +0 -1
  153. package/build/spacer/component.js.map +1 -1
  154. package/build/spinner/index.js +44 -5
  155. package/build/spinner/index.js.map +1 -1
  156. package/build/spinner/index.native.js +4 -2
  157. package/build/spinner/index.native.js.map +1 -1
  158. package/build/spinner/styles.js +56 -0
  159. package/build/spinner/styles.js.map +1 -0
  160. package/build/surface/hook.js +1 -1
  161. package/build/surface/hook.js.map +1 -1
  162. package/build/text/get-line-height.js +0 -1
  163. package/build/text/get-line-height.js.map +1 -1
  164. package/build/text/hook.js +5 -5
  165. package/build/text/hook.js.map +1 -1
  166. package/build/tip/index.js +4 -8
  167. package/build/tip/index.js.map +1 -1
  168. package/build/toggle-group-control/toggle-group-control/component.js +2 -12
  169. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  170. package/build/toggle-group-control/toggle-group-control/styles.js +3 -14
  171. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  172. package/build/toggle-group-control/toggle-group-control-option/component.js +0 -1
  173. package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  174. package/build/toggle-group-control/toggle-group-control-option/styles.js +8 -8
  175. package/build/toggle-group-control/toggle-group-control-option/styles.js.map +1 -1
  176. package/build/tools-panel/styles.js +10 -10
  177. package/build/tools-panel/styles.js.map +1 -1
  178. package/build/tools-panel/tools-panel/component.js +0 -1
  179. package/build/tools-panel/tools-panel/component.js.map +1 -1
  180. package/build/tools-panel/tools-panel/hook.js +51 -44
  181. package/build/tools-panel/tools-panel/hook.js.map +1 -1
  182. package/build/tools-panel/tools-panel-header/component.js +0 -1
  183. package/build/tools-panel/tools-panel-header/component.js.map +1 -1
  184. package/build/tools-panel/tools-panel-header/hook.js +3 -3
  185. package/build/tools-panel/tools-panel-header/hook.js.map +1 -1
  186. package/build/tools-panel/tools-panel-item/component.js +0 -1
  187. package/build/tools-panel/tools-panel-item/component.js.map +1 -1
  188. package/build/tools-panel/tools-panel-item/hook.js +17 -9
  189. package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
  190. package/build/tree-grid/index.js +19 -10
  191. package/build/tree-grid/index.js.map +1 -1
  192. package/build/truncate/hook.js +2 -2
  193. package/build/truncate/hook.js.map +1 -1
  194. package/build/ui/shortcut/component.js +0 -1
  195. package/build/ui/shortcut/component.js.map +1 -1
  196. package/build/ui/utils/font-size.js +0 -1
  197. package/build/ui/utils/font-size.js.map +1 -1
  198. package/build/ui/utils/get-valid-children.js +0 -1
  199. package/build/ui/utils/get-valid-children.js.map +1 -1
  200. package/build/unit-control/index.js +0 -1
  201. package/build/unit-control/index.js.map +1 -1
  202. package/build/unit-control/unit-select-control.js.map +1 -1
  203. package/build/utils/colors-values.js +6 -3
  204. package/build/utils/colors-values.js.map +1 -1
  205. package/build/utils/config-values.js +1 -4
  206. package/build/utils/config-values.js.map +1 -1
  207. package/build/utils/hooks/use-combined-ref.js.map +1 -1
  208. package/build/utils/hooks/use-latest-ref.js +0 -1
  209. package/build/utils/hooks/use-latest-ref.js.map +1 -1
  210. package/build/z-stack/component.js +0 -1
  211. package/build/z-stack/component.js.map +1 -1
  212. package/build-module/base-control/index.js +3 -4
  213. package/build-module/base-control/index.js.map +1 -1
  214. package/build-module/base-control/styles/base-control-styles.js +20 -12
  215. package/build-module/base-control/styles/base-control-styles.js.map +1 -1
  216. package/build-module/base-field/hook.js +1 -1
  217. package/build-module/base-field/hook.js.map +1 -1
  218. package/build-module/box-control/styles/box-control-styles.js +9 -9
  219. package/build-module/box-control/styles/box-control-styles.js.map +1 -1
  220. package/build-module/button/deprecated.js +2 -1
  221. package/build-module/button/deprecated.js.map +1 -1
  222. package/build-module/button/index.js +2 -1
  223. package/build-module/button/index.js.map +1 -1
  224. package/build-module/card/card/component.js +1 -1
  225. package/build-module/card/card/component.js.map +1 -1
  226. package/build-module/card/card/hook.js +1 -1
  227. package/build-module/card/card/hook.js.map +1 -1
  228. package/build-module/card/card-body/hook.js +1 -1
  229. package/build-module/card/card-body/hook.js.map +1 -1
  230. package/build-module/card/card-divider/hook.js +1 -1
  231. package/build-module/card/card-divider/hook.js.map +1 -1
  232. package/build-module/card/card-footer/hook.js +1 -1
  233. package/build-module/card/card-footer/hook.js.map +1 -1
  234. package/build-module/card/card-header/hook.js +1 -1
  235. package/build-module/card/card-header/hook.js.map +1 -1
  236. package/build-module/card/card-media/hook.js +1 -1
  237. package/build-module/card/card-media/hook.js.map +1 -1
  238. package/build-module/circular-option-picker/index.js +1 -0
  239. package/build-module/circular-option-picker/index.js.map +1 -1
  240. package/build-module/color-indicator/index.js +1 -0
  241. package/build-module/color-indicator/index.js.map +1 -1
  242. package/build-module/color-palette/index.js +4 -8
  243. package/build-module/color-palette/index.js.map +1 -1
  244. package/build-module/color-palette/index.native.js +4 -2
  245. package/build-module/color-palette/index.native.js.map +1 -1
  246. package/build-module/color-picker/color-display.js.map +1 -1
  247. package/build-module/color-picker/color-input.js.map +1 -1
  248. package/build-module/color-picker/component.js +2 -4
  249. package/build-module/color-picker/component.js.map +1 -1
  250. package/build-module/color-picker/use-deprecated-props.js +3 -2
  251. package/build-module/color-picker/use-deprecated-props.js.map +1 -1
  252. package/build-module/confirm-dialog/component.js +6 -3
  253. package/build-module/confirm-dialog/component.js.map +1 -1
  254. package/build-module/confirm-dialog/styles.js +25 -0
  255. package/build-module/confirm-dialog/styles.js.map +1 -0
  256. package/build-module/custom-gradient-bar/control-points.js +2 -3
  257. package/build-module/custom-gradient-bar/control-points.js.map +1 -1
  258. package/build-module/custom-select-control/index.js +11 -2
  259. package/build-module/custom-select-control/index.js.map +1 -1
  260. package/build-module/date-time/time.js +1 -1
  261. package/build-module/date-time/time.js.map +1 -1
  262. package/build-module/divider/component.js +1 -1
  263. package/build-module/divider/component.js.map +1 -1
  264. package/build-module/dropdown/index.js +3 -3
  265. package/build-module/dropdown/index.js.map +1 -1
  266. package/build-module/elevation/hook.js +5 -5
  267. package/build-module/elevation/hook.js.map +1 -1
  268. package/build-module/external-link/styles/external-link-styles.js +5 -5
  269. package/build-module/external-link/styles/external-link-styles.js.map +1 -1
  270. package/build-module/flex/flex/hook.js +4 -4
  271. package/build-module/flex/flex/hook.js.map +1 -1
  272. package/build-module/form-token-field/suggestions-list.js +73 -79
  273. package/build-module/form-token-field/suggestions-list.js.map +1 -1
  274. package/build-module/grid/hook.js +2 -2
  275. package/build-module/grid/hook.js.map +1 -1
  276. package/build-module/heading/component.js +0 -1
  277. package/build-module/heading/component.js.map +1 -1
  278. package/build-module/icon/index.js +0 -1
  279. package/build-module/icon/index.js.map +1 -1
  280. package/build-module/input-control/index.js +1 -1
  281. package/build-module/input-control/index.js.map +1 -1
  282. package/build-module/input-control/input-base.js +0 -1
  283. package/build-module/input-control/input-base.js.map +1 -1
  284. package/build-module/input-control/input-field.js +1 -1
  285. package/build-module/input-control/input-field.js.map +1 -1
  286. package/build-module/input-control/reducer/actions.js +0 -1
  287. package/build-module/input-control/reducer/actions.js.map +1 -1
  288. package/build-module/input-control/reducer/reducer.js +1 -1
  289. package/build-module/input-control/reducer/reducer.js.map +1 -1
  290. package/build-module/input-control/reducer/state.js +0 -1
  291. package/build-module/input-control/reducer/state.js.map +1 -1
  292. package/build-module/input-control/styles/input-control-styles.js +32 -30
  293. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  294. package/build-module/item-group/item/component.js +0 -1
  295. package/build-module/item-group/item/component.js.map +1 -1
  296. package/build-module/item-group/item/hook.js +1 -2
  297. package/build-module/item-group/item/hook.js.map +1 -1
  298. package/build-module/item-group/item-group/component.js +0 -1
  299. package/build-module/item-group/item-group/component.js.map +1 -1
  300. package/build-module/mobile/bottom-sheet/bottom-sheet-context.native.js +3 -1
  301. package/build-module/mobile/bottom-sheet/bottom-sheet-context.native.js.map +1 -1
  302. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +5 -13
  303. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js.map +1 -1
  304. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +23 -5
  305. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  306. package/build-module/mobile/bottom-sheet/cell.native.js +3 -3
  307. package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
  308. package/build-module/mobile/bottom-sheet/index.native.js +16 -13
  309. package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
  310. package/build-module/mobile/bottom-sheet/range-text-input.native.js +2 -2
  311. package/build-module/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
  312. package/build-module/mobile/color-settings/index.native.js +2 -0
  313. package/build-module/mobile/color-settings/index.native.js.map +1 -1
  314. package/build-module/mobile/color-settings/palette.screen.native.js +5 -0
  315. package/build-module/mobile/color-settings/palette.screen.native.js.map +1 -1
  316. package/build-module/mobile/color-settings/utils.native.js +7 -3
  317. package/build-module/mobile/color-settings/utils.native.js.map +1 -1
  318. package/build-module/mobile/keyboard-avoiding-view/index.ios.js +6 -6
  319. package/build-module/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
  320. package/build-module/mobile/link-picker/index.native.js +2 -1
  321. package/build-module/mobile/link-picker/index.native.js.map +1 -1
  322. package/build-module/mobile/link-picker/link-picker-screen.native.js +13 -5
  323. package/build-module/mobile/link-picker/link-picker-screen.native.js.map +1 -1
  324. package/build-module/mobile/link-settings/index.native.js +2 -1
  325. package/build-module/mobile/link-settings/index.native.js.map +1 -1
  326. package/build-module/mobile/readable-content-view/index.native.js +2 -2
  327. package/build-module/mobile/readable-content-view/index.native.js.map +1 -1
  328. package/build-module/mobile/utils/use-is-floating-keyboard.native.js +2 -2
  329. package/build-module/mobile/utils/use-is-floating-keyboard.native.js.map +1 -1
  330. package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js +7 -3
  331. package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  332. package/build-module/modal/index.js +1 -11
  333. package/build-module/modal/index.js.map +1 -1
  334. package/build-module/navigator/context.js +5 -1
  335. package/build-module/navigator/context.js.map +1 -1
  336. package/build-module/navigator/navigator-provider/component.js +43 -24
  337. package/build-module/navigator/navigator-provider/component.js.map +1 -1
  338. package/build-module/navigator/navigator-screen/component.js +57 -32
  339. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  340. package/build-module/navigator/use-navigator.js +8 -8
  341. package/build-module/navigator/use-navigator.js.map +1 -1
  342. package/build-module/notice/index.native.js +2 -2
  343. package/build-module/notice/index.native.js.map +1 -1
  344. package/build-module/palette-edit/index.js +38 -30
  345. package/build-module/palette-edit/index.js.map +1 -1
  346. package/build-module/palette-edit/styles.js +11 -12
  347. package/build-module/palette-edit/styles.js.map +1 -1
  348. package/build-module/placeholder/index.js +4 -4
  349. package/build-module/placeholder/index.js.map +1 -1
  350. package/build-module/range-control/styles/range-control-styles.js +29 -29
  351. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  352. package/build-module/resizable-box/index.js.map +1 -1
  353. package/build-module/resizable-box/resize-tooltip/index.js +3 -3
  354. package/build-module/resizable-box/resize-tooltip/index.js.map +1 -1
  355. package/build-module/resizable-box/resize-tooltip/label.js +0 -1
  356. package/build-module/resizable-box/resize-tooltip/label.js.map +1 -1
  357. package/build-module/sandbox/index.native.js +5 -5
  358. package/build-module/sandbox/index.native.js.map +1 -1
  359. package/build-module/scrollable/hook.js +1 -1
  360. package/build-module/scrollable/hook.js.map +1 -1
  361. package/build-module/select-control/index.js.map +1 -1
  362. package/build-module/slot-fill/bubbles-virtually/fill.js +11 -2
  363. package/build-module/slot-fill/bubbles-virtually/fill.js.map +1 -1
  364. package/build-module/spacer/component.js +0 -1
  365. package/build-module/spacer/component.js.map +1 -1
  366. package/build-module/spinner/index.js +40 -5
  367. package/build-module/spinner/index.js.map +1 -1
  368. package/build-module/spinner/index.native.js +4 -2
  369. package/build-module/spinner/index.native.js.map +1 -1
  370. package/build-module/spinner/styles.js +49 -0
  371. package/build-module/spinner/styles.js.map +1 -0
  372. package/build-module/surface/hook.js +1 -1
  373. package/build-module/surface/hook.js.map +1 -1
  374. package/build-module/text/get-line-height.js +0 -1
  375. package/build-module/text/get-line-height.js.map +1 -1
  376. package/build-module/text/hook.js +5 -5
  377. package/build-module/text/hook.js.map +1 -1
  378. package/build-module/tip/index.js +4 -8
  379. package/build-module/tip/index.js.map +1 -1
  380. package/build-module/toggle-group-control/toggle-group-control/component.js +2 -10
  381. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  382. package/build-module/toggle-group-control/toggle-group-control/styles.js +3 -11
  383. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  384. package/build-module/toggle-group-control/toggle-group-control-option/component.js +0 -1
  385. package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  386. package/build-module/toggle-group-control/toggle-group-control-option/styles.js +8 -8
  387. package/build-module/toggle-group-control/toggle-group-control-option/styles.js.map +1 -1
  388. package/build-module/tools-panel/styles.js +10 -10
  389. package/build-module/tools-panel/styles.js.map +1 -1
  390. package/build-module/tools-panel/tools-panel/component.js +0 -1
  391. package/build-module/tools-panel/tools-panel/component.js.map +1 -1
  392. package/build-module/tools-panel/tools-panel/hook.js +52 -45
  393. package/build-module/tools-panel/tools-panel/hook.js.map +1 -1
  394. package/build-module/tools-panel/tools-panel-header/component.js +0 -1
  395. package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
  396. package/build-module/tools-panel/tools-panel-header/hook.js +3 -3
  397. package/build-module/tools-panel/tools-panel-header/hook.js.map +1 -1
  398. package/build-module/tools-panel/tools-panel-item/component.js +0 -1
  399. package/build-module/tools-panel/tools-panel-item/component.js.map +1 -1
  400. package/build-module/tools-panel/tools-panel-item/hook.js +17 -9
  401. package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
  402. package/build-module/tree-grid/index.js +18 -10
  403. package/build-module/tree-grid/index.js.map +1 -1
  404. package/build-module/truncate/hook.js +2 -2
  405. package/build-module/truncate/hook.js.map +1 -1
  406. package/build-module/ui/shortcut/component.js +0 -1
  407. package/build-module/ui/shortcut/component.js.map +1 -1
  408. package/build-module/ui/utils/font-size.js +0 -1
  409. package/build-module/ui/utils/font-size.js.map +1 -1
  410. package/build-module/ui/utils/get-valid-children.js +0 -1
  411. package/build-module/ui/utils/get-valid-children.js.map +1 -1
  412. package/build-module/unit-control/index.js +0 -1
  413. package/build-module/unit-control/index.js.map +1 -1
  414. package/build-module/unit-control/unit-select-control.js +1 -2
  415. package/build-module/unit-control/unit-select-control.js.map +1 -1
  416. package/build-module/utils/colors-values.js +6 -3
  417. package/build-module/utils/colors-values.js.map +1 -1
  418. package/build-module/utils/config-values.js +1 -4
  419. package/build-module/utils/config-values.js.map +1 -1
  420. package/build-module/utils/hooks/use-combined-ref.js +0 -1
  421. package/build-module/utils/hooks/use-combined-ref.js.map +1 -1
  422. package/build-module/utils/hooks/use-latest-ref.js +0 -1
  423. package/build-module/utils/hooks/use-latest-ref.js.map +1 -1
  424. package/build-module/z-stack/component.js +0 -1
  425. package/build-module/z-stack/component.js.map +1 -1
  426. package/build-style/style-rtl.css +22 -6
  427. package/build-style/style.css +22 -6
  428. package/build-types/base-control/index.d.ts.map +1 -1
  429. package/build-types/base-control/styles/base-control-styles.d.ts +4 -0
  430. package/build-types/base-control/styles/base-control-styles.d.ts.map +1 -1
  431. package/build-types/button/index.d.ts.map +1 -1
  432. package/build-types/card/types.d.ts.map +1 -1
  433. package/build-types/circular-option-picker/index.d.ts +31 -0
  434. package/build-types/circular-option-picker/index.d.ts.map +1 -0
  435. package/build-types/color-palette/index.d.ts +16 -0
  436. package/build-types/color-palette/index.d.ts.map +1 -0
  437. package/build-types/color-palette/styles.d.ts +8 -0
  438. package/build-types/color-palette/styles.d.ts.map +1 -0
  439. package/build-types/color-picker/color-display.d.ts +14 -0
  440. package/build-types/color-picker/color-display.d.ts.map +1 -0
  441. package/build-types/color-picker/color-input.d.ts +14 -0
  442. package/build-types/color-picker/color-input.d.ts.map +1 -0
  443. package/build-types/color-picker/component.d.ts +11 -0
  444. package/build-types/color-picker/component.d.ts.map +1 -0
  445. package/build-types/color-picker/hex-input.d.ts +13 -0
  446. package/build-types/color-picker/hex-input.d.ts.map +1 -0
  447. package/build-types/color-picker/hsl-input.d.ts +13 -0
  448. package/build-types/color-picker/hsl-input.d.ts.map +1 -0
  449. package/build-types/color-picker/index.d.ts +5 -0
  450. package/build-types/color-picker/index.d.ts.map +1 -0
  451. package/build-types/color-picker/input-with-slider.d.ts +12 -0
  452. package/build-types/color-picker/input-with-slider.d.ts.map +1 -0
  453. package/build-types/color-picker/legacy-adapter.d.ts +6 -0
  454. package/build-types/color-picker/legacy-adapter.d.ts.map +1 -0
  455. package/build-types/color-picker/picker.d.ts +10 -0
  456. package/build-types/color-picker/picker.d.ts.map +1 -0
  457. package/build-types/color-picker/rgb-input.d.ts +13 -0
  458. package/build-types/color-picker/rgb-input.d.ts.map +1 -0
  459. package/build-types/color-picker/styles.d.ts +76 -0
  460. package/build-types/color-picker/styles.d.ts.map +1 -0
  461. package/build-types/color-picker/types.d.ts +2 -0
  462. package/build-types/color-picker/types.d.ts.map +1 -0
  463. package/build-types/color-picker/use-deprecated-props.d.ts +49 -0
  464. package/build-types/color-picker/use-deprecated-props.d.ts.map +1 -0
  465. package/build-types/confirm-dialog/component.d.ts +11 -14
  466. package/build-types/confirm-dialog/component.d.ts.map +1 -1
  467. package/build-types/confirm-dialog/styles.d.ts +10 -0
  468. package/build-types/confirm-dialog/styles.d.ts.map +1 -0
  469. package/build-types/confirm-dialog/types.d.ts.map +1 -1
  470. package/build-types/divider/component.d.ts.map +1 -1
  471. package/build-types/dropdown/index.d.ts +1 -13
  472. package/build-types/dropdown/index.d.ts.map +1 -1
  473. package/build-types/elevation/hook.d.ts.map +1 -1
  474. package/build-types/elevation/types.d.ts.map +1 -1
  475. package/build-types/flex/flex/hook.d.ts.map +1 -1
  476. package/build-types/flex/types.d.ts.map +1 -1
  477. package/build-types/flyout/types.d.ts.map +1 -1
  478. package/build-types/grid/hook.d.ts.map +1 -1
  479. package/build-types/grid/types.d.ts.map +1 -1
  480. package/build-types/h-stack/hook.d.ts +1 -1
  481. package/build-types/h-stack/hook.d.ts.map +1 -1
  482. package/build-types/h-stack/types.d.ts.map +1 -1
  483. package/build-types/heading/component.d.ts.map +1 -1
  484. package/build-types/higher-order/with-focus-outside/index.d.ts +1 -1
  485. package/build-types/icon/index.d.ts.map +1 -1
  486. package/build-types/input-control/index.d.ts.map +1 -1
  487. package/build-types/input-control/input-base.d.ts.map +1 -1
  488. package/build-types/input-control/input-field.d.ts.map +1 -1
  489. package/build-types/input-control/reducer/actions.d.ts.map +1 -1
  490. package/build-types/input-control/reducer/reducer.d.ts.map +1 -1
  491. package/build-types/input-control/reducer/state.d.ts.map +1 -1
  492. package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
  493. package/build-types/input-control/types.d.ts.map +1 -1
  494. package/build-types/item-group/item/component.d.ts.map +1 -1
  495. package/build-types/item-group/item/hook.d.ts.map +1 -1
  496. package/build-types/item-group/item-group/component.d.ts.map +1 -1
  497. package/build-types/navigator/context.d.ts.map +1 -1
  498. package/build-types/navigator/navigator-provider/component.d.ts +16 -17
  499. package/build-types/navigator/navigator-provider/component.d.ts.map +1 -1
  500. package/build-types/navigator/navigator-screen/component.d.ts +16 -16
  501. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  502. package/build-types/navigator/types.d.ts +10 -9
  503. package/build-types/navigator/types.d.ts.map +1 -1
  504. package/build-types/resizable-box/index.d.ts +1 -1
  505. package/build-types/resizable-box/index.d.ts.map +1 -1
  506. package/build-types/resizable-box/resize-tooltip/index.d.ts +1 -1
  507. package/build-types/resizable-box/resize-tooltip/index.d.ts.map +1 -1
  508. package/build-types/resizable-box/resize-tooltip/label.d.ts.map +1 -1
  509. package/build-types/select-control/index.d.ts +3 -2
  510. package/build-types/select-control/index.d.ts.map +1 -1
  511. package/build-types/slot-fill/bubbles-virtually/fill.d.ts.map +1 -1
  512. package/build-types/spacer/component.d.ts.map +1 -1
  513. package/build-types/spacer/types.d.ts.map +1 -1
  514. package/build-types/spinner/index.d.ts +18 -1
  515. package/build-types/spinner/index.d.ts.map +1 -1
  516. package/build-types/spinner/styles.d.ts +13 -0
  517. package/build-types/spinner/styles.d.ts.map +1 -0
  518. package/build-types/surface/hook.d.ts.map +1 -1
  519. package/build-types/text/get-line-height.d.ts.map +1 -1
  520. package/build-types/text/hook.d.ts.map +1 -1
  521. package/build-types/text/types.d.ts.map +1 -1
  522. package/build-types/tip/index.d.ts.map +1 -1
  523. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  524. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +0 -5
  525. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  526. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
  527. package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map +1 -1
  528. package/build-types/toggle-group-control/types.d.ts +1 -7
  529. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  530. package/build-types/tools-panel/styles.d.ts.map +1 -1
  531. package/build-types/tools-panel/tools-panel/component.d.ts.map +1 -1
  532. package/build-types/tools-panel/tools-panel/hook.d.ts +8 -4
  533. package/build-types/tools-panel/tools-panel/hook.d.ts.map +1 -1
  534. package/build-types/tools-panel/tools-panel-header/component.d.ts.map +1 -1
  535. package/build-types/tools-panel/tools-panel-item/component.d.ts.map +1 -1
  536. package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
  537. package/build-types/tools-panel/types.d.ts +14 -0
  538. package/build-types/tools-panel/types.d.ts.map +1 -1
  539. package/build-types/ui/context/wordpress-component.d.ts.map +1 -1
  540. package/build-types/ui/control-group/types.d.ts.map +1 -1
  541. package/build-types/ui/form-group/types.d.ts.map +1 -1
  542. package/build-types/ui/shortcut/component.d.ts.map +1 -1
  543. package/build-types/ui/tooltip/types.d.ts.map +1 -1
  544. package/build-types/ui/utils/font-size.d.ts.map +1 -1
  545. package/build-types/ui/utils/get-valid-children.d.ts.map +1 -1
  546. package/build-types/unit-control/index.d.ts +3 -2
  547. package/build-types/unit-control/index.d.ts.map +1 -1
  548. package/build-types/unit-control/types.d.ts +2 -1
  549. package/build-types/unit-control/types.d.ts.map +1 -1
  550. package/build-types/unit-control/unit-select-control.d.ts.map +1 -1
  551. package/build-types/utils/colors-values.d.ts +1 -0
  552. package/build-types/utils/colors-values.d.ts.map +1 -1
  553. package/build-types/utils/config-values.d.ts +1 -5
  554. package/build-types/utils/config-values.d.ts.map +1 -1
  555. package/build-types/utils/hooks/use-combined-ref.d.ts.map +1 -1
  556. package/build-types/utils/hooks/use-latest-ref.d.ts.map +1 -1
  557. package/build-types/v-stack/types.d.ts.map +1 -1
  558. package/build-types/z-stack/component.d.ts.map +1 -1
  559. package/package.json +20 -17
  560. package/src/base-control/index.js +11 -2
  561. package/src/base-control/styles/base-control-styles.js +10 -1
  562. package/src/base-field/hook.js +1 -1
  563. package/src/box-control/styles/box-control-styles.js +1 -1
  564. package/src/button/deprecated.js +1 -0
  565. package/src/button/index.js +1 -0
  566. package/src/card/card/component.js +1 -1
  567. package/src/card/card/hook.js +1 -1
  568. package/src/card/card-body/hook.js +1 -1
  569. package/src/card/card-divider/hook.js +1 -1
  570. package/src/card/card-footer/hook.js +1 -1
  571. package/src/card/card-header/hook.js +1 -1
  572. package/src/card/card-media/hook.js +1 -1
  573. package/src/card/types.ts +0 -1
  574. package/src/circular-option-picker/index.js +1 -0
  575. package/src/color-indicator/README.md +28 -0
  576. package/src/color-indicator/index.js +2 -0
  577. package/src/color-indicator/style.scss +1 -1
  578. package/src/color-palette/index.js +7 -8
  579. package/src/color-palette/index.native.js +2 -0
  580. package/src/color-palette/style.scss +11 -3
  581. package/src/color-palette/test/__snapshots__/index.js.snap +0 -1
  582. package/src/color-picker/README.md +1 -1
  583. package/src/color-picker/color-display.tsx +1 -1
  584. package/src/color-picker/color-input.tsx +1 -1
  585. package/src/color-picker/component.tsx +3 -4
  586. package/src/color-picker/use-deprecated-props.ts +2 -1
  587. package/src/combobox-control/stories/index.js +6 -2
  588. package/src/combobox-control/style.scss +2 -2
  589. package/src/confirm-dialog/component.tsx +7 -4
  590. package/src/confirm-dialog/stories/index.js +5 -2
  591. package/src/confirm-dialog/styles.ts +18 -0
  592. package/src/confirm-dialog/types.ts +0 -1
  593. package/src/custom-gradient-bar/control-points.js +2 -3
  594. package/src/custom-gradient-picker/style.scss +0 -1
  595. package/src/custom-select-control/index.js +13 -1
  596. package/src/custom-select-control/stories/index.js +27 -0
  597. package/src/custom-select-control/test/index.js +46 -0
  598. package/src/date-time/README.md +4 -4
  599. package/src/date-time/test/time.js +2 -2
  600. package/src/date-time/time.js +2 -2
  601. package/src/dimension-control/README.md +2 -0
  602. package/src/divider/component.tsx +0 -1
  603. package/src/dropdown/index.js +14 -13
  604. package/src/elevation/hook.js +1 -0
  605. package/src/elevation/types.ts +0 -1
  606. package/src/external-link/styles/external-link-styles.js +3 -3
  607. package/src/flex/flex/hook.js +1 -0
  608. package/src/flex/types.ts +0 -1
  609. package/src/flyout/types.ts +0 -1
  610. package/src/form-token-field/style.scss +1 -1
  611. package/src/form-token-field/suggestions-list.js +109 -120
  612. package/src/form-token-field/test/index.js +4 -2
  613. package/src/gradient-picker/README.md +94 -0
  614. package/src/grid/hook.js +1 -0
  615. package/src/grid/types.ts +0 -1
  616. package/src/h-stack/types.ts +0 -1
  617. package/src/heading/component.tsx +0 -1
  618. package/src/icon/index.tsx +0 -1
  619. package/src/input-control/index.tsx +0 -1
  620. package/src/input-control/input-base.tsx +0 -1
  621. package/src/input-control/input-field.tsx +0 -1
  622. package/src/input-control/reducer/actions.ts +0 -1
  623. package/src/input-control/reducer/reducer.ts +0 -1
  624. package/src/input-control/reducer/state.ts +0 -1
  625. package/src/input-control/styles/input-control-styles.tsx +7 -7
  626. package/src/input-control/types.ts +0 -1
  627. package/src/item-group/item/component.tsx +0 -1
  628. package/src/item-group/item/hook.ts +1 -2
  629. package/src/item-group/item-group/component.tsx +0 -1
  630. package/src/item-group/stories/index.js +2 -2
  631. package/src/mobile/bottom-sheet/bottom-sheet-context.native.js +2 -0
  632. package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js +8 -14
  633. package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +33 -3
  634. package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js +162 -0
  635. package/src/mobile/bottom-sheet/cell.native.js +8 -6
  636. package/src/mobile/bottom-sheet/index.native.js +24 -14
  637. package/src/mobile/bottom-sheet/link-suggestion-styles.native.scss +3 -0
  638. package/src/mobile/bottom-sheet/range-text-input.native.js +5 -2
  639. package/src/mobile/bottom-sheet/styles.native.scss +4 -0
  640. package/src/mobile/bottom-sheet/test/index.native.js +24 -0
  641. package/src/mobile/color-settings/index.native.js +2 -0
  642. package/src/mobile/color-settings/palette.screen.native.js +5 -0
  643. package/src/mobile/color-settings/utils.native.js +8 -3
  644. package/src/mobile/html-text-input/test/index.native.js +34 -35
  645. package/src/mobile/keyboard-avoiding-view/index.ios.js +12 -9
  646. package/src/mobile/link-picker/index.native.js +2 -1
  647. package/src/mobile/link-picker/link-picker-screen.native.js +13 -5
  648. package/src/mobile/link-settings/index.native.js +2 -1
  649. package/src/mobile/link-settings/test/edit.native.js +172 -236
  650. package/src/mobile/link-settings/test/link-settings-navigation.native.js +97 -0
  651. package/src/mobile/readable-content-view/index.native.js +5 -2
  652. package/src/mobile/utils/use-is-floating-keyboard.native.js +2 -5
  653. package/src/mobile/utils/use-unit-converter-to-mobile.native.js +11 -3
  654. package/src/modal/index.js +1 -10
  655. package/src/navigator/context.ts +5 -1
  656. package/src/navigator/navigator-provider/README.md +30 -20
  657. package/src/navigator/navigator-provider/component.tsx +69 -25
  658. package/src/navigator/navigator-screen/component.tsx +71 -34
  659. package/src/navigator/stories/index.js +26 -13
  660. package/src/navigator/test/index.js +167 -32
  661. package/src/navigator/types.ts +11 -11
  662. package/src/navigator/use-navigator.ts +4 -4
  663. package/src/notice/index.native.js +5 -2
  664. package/src/palette-edit/index.js +115 -75
  665. package/src/palette-edit/styles.js +22 -3
  666. package/src/placeholder/index.js +8 -6
  667. package/src/placeholder/style.scss +12 -0
  668. package/src/placeholder/test/index.js +18 -1
  669. package/src/range-control/styles/range-control-styles.js +1 -1
  670. package/src/resizable-box/index.tsx +0 -1
  671. package/src/resizable-box/resize-tooltip/index.tsx +1 -2
  672. package/src/resizable-box/resize-tooltip/label.tsx +0 -1
  673. package/src/sandbox/index.native.js +8 -5
  674. package/src/scrollable/hook.js +1 -1
  675. package/src/scrollable/stories/index.js +6 -3
  676. package/src/select-control/README.md +2 -2
  677. package/src/select-control/index.tsx +3 -2
  678. package/src/select-control/stories/index.js +1 -1
  679. package/src/slot-fill/bubbles-virtually/fill.js +12 -1
  680. package/src/spacer/component.tsx +0 -1
  681. package/src/spacer/types.ts +0 -1
  682. package/src/spinner/README.md +10 -10
  683. package/src/spinner/index.js +42 -3
  684. package/src/spinner/index.native.js +7 -2
  685. package/src/spinner/stories/index.js +36 -3
  686. package/src/spinner/styles.js +47 -0
  687. package/src/surface/hook.js +1 -0
  688. package/src/text/get-line-height.ts +0 -1
  689. package/src/text/hook.js +1 -0
  690. package/src/text/types.ts +0 -1
  691. package/src/tip/index.js +2 -4
  692. package/src/toggle-group-control/test/__snapshots__/index.js.snap +25 -27
  693. package/src/toggle-group-control/toggle-group-control/component.tsx +1 -12
  694. package/src/toggle-group-control/toggle-group-control/styles.ts +0 -14
  695. package/src/toggle-group-control/toggle-group-control-option/component.tsx +0 -1
  696. package/src/toggle-group-control/toggle-group-control-option/styles.ts +1 -3
  697. package/src/toggle-group-control/types.ts +1 -9
  698. package/src/tools-panel/stories/index.js +21 -1
  699. package/src/tools-panel/stories/tools-panel-with-item-group-slot.js +244 -0
  700. package/src/tools-panel/styles.ts +1 -3
  701. package/src/tools-panel/test/__snapshots__/index.js.snap +219 -0
  702. package/src/tools-panel/test/index.js +218 -20
  703. package/src/tools-panel/tools-panel/README.md +3 -2
  704. package/src/tools-panel/tools-panel/component.tsx +0 -1
  705. package/src/tools-panel/tools-panel/hook.ts +164 -97
  706. package/src/tools-panel/tools-panel-header/component.tsx +0 -1
  707. package/src/tools-panel/tools-panel-header/hook.ts +3 -3
  708. package/src/tools-panel/tools-panel-item/component.tsx +0 -1
  709. package/src/tools-panel/tools-panel-item/hook.ts +39 -8
  710. package/src/tools-panel/types.ts +14 -1
  711. package/src/tooltip/test/index.native.js +3 -1
  712. package/src/tree-grid/index.js +157 -126
  713. package/src/truncate/hook.js +1 -1
  714. package/src/ui/README.md +1 -1
  715. package/src/ui/context/wordpress-component.ts +0 -1
  716. package/src/ui/control-group/types.ts +0 -1
  717. package/src/ui/form-group/types.ts +0 -1
  718. package/src/ui/shortcut/component.tsx +0 -1
  719. package/src/ui/tooltip/types.ts +0 -1
  720. package/src/ui/utils/font-size.ts +0 -1
  721. package/src/ui/utils/get-valid-children.ts +0 -1
  722. package/src/unit-control/index.tsx +0 -1
  723. package/src/unit-control/types.ts +2 -2
  724. package/src/unit-control/unit-select-control.tsx +0 -1
  725. package/src/utils/colors-values.js +4 -3
  726. package/src/utils/config-values.js +1 -5
  727. package/src/utils/hooks/stories/use-cx.js +121 -44
  728. package/src/utils/hooks/use-combined-ref.ts +0 -1
  729. package/src/utils/hooks/use-latest-ref.ts +0 -1
  730. package/src/v-stack/types.ts +0 -1
  731. package/src/z-stack/component.tsx +0 -1
  732. package/tsconfig.json +3 -0
  733. package/tsconfig.tsbuildinfo +1 -1
  734. package/build/spinner/styles/spinner-styles.js +0 -40
  735. package/build/spinner/styles/spinner-styles.js.map +0 -1
  736. package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +0 -90
  737. package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +0 -1
  738. package/build-module/spinner/styles/spinner-styles.js +0 -28
  739. package/build-module/spinner/styles/spinner-styles.js.map +0 -1
  740. package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +0 -86
  741. package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +0 -1
  742. package/build-types/spinner/styles/spinner-styles.d.ts +0 -5
  743. package/build-types/spinner/styles/spinner-styles.d.ts.map +0 -1
  744. package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts +0 -9
  745. package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts.map +0 -1
  746. package/src/spinner/styles/spinner-styles.js +0 -47
  747. package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx +0 -86
  748. package/src/ui/visually-hidden/README.md +0 -21
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/card/card-footer/hook.js"],"names":["useMemo","useContextSystem","styles","useCx","useCardFooter","props","className","justify","isBorderless","isShady","size","otherProps","cx","classes","Footer","borderRadius","borderColor","cardPaddings","borderless","shady"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;;AACA,OAAO,SAASC,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,YAAY,GAAG,KAHV;AAILC,IAAAA,OAAO,GAAG,KAJL;AAKLC,IAAAA,IAAI,GAAG,QALF;AAML,OAAGC;AANE,MAOFV,gBAAgB,CAAEI,KAAF,EAAS,YAAT,CAPpB;AASA,QAAMO,EAAE,GAAGT,KAAK,EAAhB;AAEA,QAAMU,OAAO,GAAGb,OAAO,CACtB,MACCY,EAAE,CACDV,MAAM,CAACY,MADN,EAEDZ,MAAM,CAACa,YAFN,EAGDb,MAAM,CAACc,WAHN,EAIDd,MAAM,CAACe,YAAP,CAAqBP,IAArB,CAJC,EAKDF,YAAY,IAAIN,MAAM,CAACgB,UALtB,EAMDT,OAAO,IAAIP,MAAM,CAACiB,KANjB,EAOD;AACA,2BARC,EASDb,SATC,CAFmB,EAatB,CAAEA,SAAF,EAAaE,YAAb,EAA2BC,OAA3B,EAAoCC,IAApC,CAbsB,CAAvB;AAgBA,SAAO,EACN,GAAGC,UADG;AAENL,IAAAA,SAAS,EAAEO,OAFL;AAGNN,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../../ui/context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props\n */\nexport function useCardFooter( props ) {\n\tconst {\n\t\tclassName,\n\t\tjustify,\n\t\tisBorderless = false,\n\t\tisShady = false,\n\t\tsize = 'medium',\n\t\t...otherProps\n\t} = useContextSystem( props, 'CardFooter' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Footer,\n\t\t\t\tstyles.borderRadius,\n\t\t\t\tstyles.borderColor,\n\t\t\t\tstyles.cardPaddings[ size ],\n\t\t\t\tisBorderless && styles.borderless,\n\t\t\t\tisShady && styles.shady,\n\t\t\t\t// This classname is added for legacy compatibility reasons.\n\t\t\t\t'components-card__footer',\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, isBorderless, isShady, size ]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tjustify,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/card/card-footer/hook.js"],"names":["useMemo","useContextSystem","styles","useCx","useCardFooter","props","className","justify","isBorderless","isShady","size","otherProps","cx","classes","Footer","borderRadius","borderColor","cardPaddings","borderless","shady"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;;AACA,OAAO,SAASC,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,OAFK;AAGLC,IAAAA,YAAY,GAAG,KAHV;AAILC,IAAAA,OAAO,GAAG,KAJL;AAKLC,IAAAA,IAAI,GAAG,QALF;AAML,OAAGC;AANE,MAOFV,gBAAgB,CAAEI,KAAF,EAAS,YAAT,CAPpB;AASA,QAAMO,EAAE,GAAGT,KAAK,EAAhB;AAEA,QAAMU,OAAO,GAAGb,OAAO,CACtB,MACCY,EAAE,CACDV,MAAM,CAACY,MADN,EAEDZ,MAAM,CAACa,YAFN,EAGDb,MAAM,CAACc,WAHN,EAIDd,MAAM,CAACe,YAAP,CAAqBP,IAArB,CAJC,EAKDF,YAAY,IAAIN,MAAM,CAACgB,UALtB,EAMDT,OAAO,IAAIP,MAAM,CAACiB,KANjB,EAOD;AACA,2BARC,EASDb,SATC,CAFmB,EAatB,CAAEA,SAAF,EAAaM,EAAb,EAAiBJ,YAAjB,EAA+BC,OAA/B,EAAwCC,IAAxC,CAbsB,CAAvB;AAgBA,SAAO,EACN,GAAGC,UADG;AAENL,IAAAA,SAAS,EAAEO,OAFL;AAGNN,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../../ui/context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props\n */\nexport function useCardFooter( props ) {\n\tconst {\n\t\tclassName,\n\t\tjustify,\n\t\tisBorderless = false,\n\t\tisShady = false,\n\t\tsize = 'medium',\n\t\t...otherProps\n\t} = useContextSystem( props, 'CardFooter' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Footer,\n\t\t\t\tstyles.borderRadius,\n\t\t\t\tstyles.borderColor,\n\t\t\t\tstyles.cardPaddings[ size ],\n\t\t\t\tisBorderless && styles.borderless,\n\t\t\t\tisShady && styles.shady,\n\t\t\t\t// This classname is added for legacy compatibility reasons.\n\t\t\t\t'components-card__footer',\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBorderless, isShady, size ]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tjustify,\n\t};\n}\n"]}
@@ -23,7 +23,7 @@ export function useCardHeader(props) {
23
23
  } = useContextSystem(props, 'CardHeader');
24
24
  const cx = useCx();
25
25
  const classes = useMemo(() => cx(styles.Header, styles.borderRadius, styles.borderColor, styles.cardPaddings[size], isBorderless && styles.borderless, isShady && styles.shady, // This classname is added for legacy compatibility reasons.
26
- 'components-card__header', className), [className, isBorderless, isShady, size]);
26
+ 'components-card__header', className), [className, cx, isBorderless, isShady, size]);
27
27
  return { ...otherProps,
28
28
  className: classes
29
29
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/card/card-header/hook.js"],"names":["useMemo","useContextSystem","styles","useCx","useCardHeader","props","className","isBorderless","isShady","size","otherProps","cx","classes","Header","borderRadius","borderColor","cardPaddings","borderless","shady"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;;AACA,OAAO,SAASC,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,YAAY,GAAG,KAFV;AAGLC,IAAAA,OAAO,GAAG,KAHL;AAILC,IAAAA,IAAI,GAAG,QAJF;AAKL,OAAGC;AALE,MAMFT,gBAAgB,CAAEI,KAAF,EAAS,YAAT,CANpB;AAQA,QAAMM,EAAE,GAAGR,KAAK,EAAhB;AAEA,QAAMS,OAAO,GAAGZ,OAAO,CACtB,MACCW,EAAE,CACDT,MAAM,CAACW,MADN,EAEDX,MAAM,CAACY,YAFN,EAGDZ,MAAM,CAACa,WAHN,EAIDb,MAAM,CAACc,YAAP,CAAqBP,IAArB,CAJC,EAKDF,YAAY,IAAIL,MAAM,CAACe,UALtB,EAMDT,OAAO,IAAIN,MAAM,CAACgB,KANjB,EAOD;AACA,2BARC,EASDZ,SATC,CAFmB,EAatB,CAAEA,SAAF,EAAaC,YAAb,EAA2BC,OAA3B,EAAoCC,IAApC,CAbsB,CAAvB;AAgBA,SAAO,EACN,GAAGC,UADG;AAENJ,IAAAA,SAAS,EAAEM;AAFL,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../../ui/context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props\n */\nexport function useCardHeader( props ) {\n\tconst {\n\t\tclassName,\n\t\tisBorderless = false,\n\t\tisShady = false,\n\t\tsize = 'medium',\n\t\t...otherProps\n\t} = useContextSystem( props, 'CardHeader' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Header,\n\t\t\t\tstyles.borderRadius,\n\t\t\t\tstyles.borderColor,\n\t\t\t\tstyles.cardPaddings[ size ],\n\t\t\t\tisBorderless && styles.borderless,\n\t\t\t\tisShady && styles.shady,\n\t\t\t\t// This classname is added for legacy compatibility reasons.\n\t\t\t\t'components-card__header',\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, isBorderless, isShady, size ]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/card/card-header/hook.js"],"names":["useMemo","useContextSystem","styles","useCx","useCardHeader","props","className","isBorderless","isShady","size","otherProps","cx","classes","Header","borderRadius","borderColor","cardPaddings","borderless","shady"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;;AACA,OAAO,SAASC,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,YAAY,GAAG,KAFV;AAGLC,IAAAA,OAAO,GAAG,KAHL;AAILC,IAAAA,IAAI,GAAG,QAJF;AAKL,OAAGC;AALE,MAMFT,gBAAgB,CAAEI,KAAF,EAAS,YAAT,CANpB;AAQA,QAAMM,EAAE,GAAGR,KAAK,EAAhB;AAEA,QAAMS,OAAO,GAAGZ,OAAO,CACtB,MACCW,EAAE,CACDT,MAAM,CAACW,MADN,EAEDX,MAAM,CAACY,YAFN,EAGDZ,MAAM,CAACa,WAHN,EAIDb,MAAM,CAACc,YAAP,CAAqBP,IAArB,CAJC,EAKDF,YAAY,IAAIL,MAAM,CAACe,UALtB,EAMDT,OAAO,IAAIN,MAAM,CAACgB,KANjB,EAOD;AACA,2BARC,EASDZ,SATC,CAFmB,EAatB,CAAEA,SAAF,EAAaK,EAAb,EAAiBJ,YAAjB,EAA+BC,OAA/B,EAAwCC,IAAxC,CAbsB,CAAvB;AAgBA,SAAO,EACN,GAAGC,UADG;AAENJ,IAAAA,SAAS,EAAEM;AAFL,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../../ui/context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props\n */\nexport function useCardHeader( props ) {\n\tconst {\n\t\tclassName,\n\t\tisBorderless = false,\n\t\tisShady = false,\n\t\tsize = 'medium',\n\t\t...otherProps\n\t} = useContextSystem( props, 'CardHeader' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Header,\n\t\t\t\tstyles.borderRadius,\n\t\t\t\tstyles.borderColor,\n\t\t\t\tstyles.cardPaddings[ size ],\n\t\t\t\tisBorderless && styles.borderless,\n\t\t\t\tisShady && styles.shady,\n\t\t\t\t// This classname is added for legacy compatibility reasons.\n\t\t\t\t'components-card__header',\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBorderless, isShady, size ]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t};\n}\n"]}
@@ -20,7 +20,7 @@ export function useCardMedia(props) {
20
20
  } = useContextSystem(props, 'CardMedia');
21
21
  const cx = useCx();
22
22
  const classes = useMemo(() => cx(styles.Media, styles.borderRadius, // This classname is added for legacy compatibility reasons.
23
- 'components-card__media', className), [className]);
23
+ 'components-card__media', className), [className, cx]);
24
24
  return { ...otherProps,
25
25
  className: classes
26
26
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/card/card-media/hook.js"],"names":["useMemo","useContextSystem","styles","useCx","useCardMedia","props","className","otherProps","cx","classes","Media","borderRadius"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,CAAuBC,KAAvB,EAA+B;AACrC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BN,gBAAgB,CAAEI,KAAF,EAAS,WAAT,CAArD;AAEA,QAAMG,EAAE,GAAGL,KAAK,EAAhB;AAEA,QAAMM,OAAO,GAAGT,OAAO,CACtB,MACCQ,EAAE,CACDN,MAAM,CAACQ,KADN,EAEDR,MAAM,CAACS,YAFN,EAGD;AACA,0BAJC,EAKDL,SALC,CAFmB,EAStB,CAAEA,SAAF,CATsB,CAAvB;AAYA,SAAO,EACN,GAAGC,UADG;AAEND,IAAAA,SAAS,EAAEG;AAFL,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../../ui/context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props\n */\nexport function useCardMedia( props ) {\n\tconst { className, ...otherProps } = useContextSystem( props, 'CardMedia' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Media,\n\t\t\t\tstyles.borderRadius,\n\t\t\t\t// This classname is added for legacy compatibility reasons.\n\t\t\t\t'components-card__media',\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className ]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/card/card-media/hook.js"],"names":["useMemo","useContextSystem","styles","useCx","useCardMedia","props","className","otherProps","cx","classes","Media","borderRadius"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,CAAuBC,KAAvB,EAA+B;AACrC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BN,gBAAgB,CAAEI,KAAF,EAAS,WAAT,CAArD;AAEA,QAAMG,EAAE,GAAGL,KAAK,EAAhB;AAEA,QAAMM,OAAO,GAAGT,OAAO,CACtB,MACCQ,EAAE,CACDN,MAAM,CAACQ,KADN,EAEDR,MAAM,CAACS,YAFN,EAGD;AACA,0BAJC,EAKDL,SALC,CAFmB,EAStB,CAAEA,SAAF,EAAaE,EAAb,CATsB,CAAvB;AAYA,SAAO,EACN,GAAGD,UADG;AAEND,IAAAA,SAAS,EAAEG;AAFL,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../../ui/context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props\n */\nexport function useCardMedia( props ) {\n\tconst { className, ...otherProps } = useContextSystem( props, 'CardMedia' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Media,\n\t\t\t\tstyles.borderRadius,\n\t\t\t\t// This classname is added for legacy compatibility reasons.\n\t\t\t\t'components-card__media',\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx ]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t};\n}\n"]}
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { createElement } from "@wordpress/element";
3
+ // @ts-nocheck
3
4
 
4
5
  /**
5
6
  * External dependencies
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["classnames","Icon","check","Button","Dropdown","Tooltip","Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;;AAEA,SAASC,MAAT,OAMI;AAAA,MANa;AAChBC,IAAAA,SADgB;AAEhBC,IAAAA,UAFgB;AAGhBC,IAAAA,iBAHgB;AAIhBC,IAAAA,WAJgB;AAKhB,OAAGC;AALa,GAMb;AACH,QAAMC,YAAY,GACjB,cAAC,MAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAGX,UAAU,CACrBO,SADqB,EAErB,mDAFqB;AADvB,KAMGG,WAAW,GACZ,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,cAAC,IAAD;AACC,IAAA,IAAI,EAAGN;AADR,KAEQO,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAED,SAASI,kBAAT,QAKI;AAAA,MALyB;AAC5BC,IAAAA,WAD4B;AAE5BP,IAAAA,SAF4B;AAG5BQ,IAAAA,aAH4B;AAI5BC,IAAAA;AAJ4B,GAKzB;AACH,SACC,cAAC,QAAD;AACC,IAAA,SAAS,EAAGhB,UAAU,CACrB,yDADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEU,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,cAAC,MAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAED,SAASI,YAAT,QAAqE;AAAA,MAA9C;AAAEZ,IAAAA,SAAF;AAAaa,IAAAA,QAAb;AAAuB,OAAGT;AAA1B,GAA8C;AACpE,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAGX,UAAU,CACrB,0CADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,OAAO,MALR;AAMC,IAAA,OAAO,EAAC;AANT,KAOMI,eAPN,GASGS,QATH,CADD;AAaA;;AAED,eAAe,SAASC,oBAAT,QAKX;AAAA,MAL0C;AAC7CC,IAAAA,OAD6C;AAE7Cf,IAAAA,SAF6C;AAG7CgB,IAAAA,OAH6C;AAI7CH,IAAAA;AAJ6C,GAK1C;AACH,SACC;AACC,IAAA,SAAS,EAAGpB,UAAU,CACrB,mCADqB,EAErBO,SAFqB;AADvB,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGgB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;AAEDD,oBAAoB,CAACf,MAArB,GAA8BA,MAA9B;AACAe,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\n\nfunction Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n} ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n} ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nfunction ButtonAction( { className, children, ...additionalProps } ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tisSmall\n\t\t\tvariant=\"secondary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function CircularOptionPicker( {\n\tactions,\n\tclassName,\n\toptions,\n\tchildren,\n} ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["classnames","Icon","check","Button","Dropdown","Tooltip","Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;;AAEA,SAASC,MAAT,OAMI;AAAA,MANa;AAChBC,IAAAA,SADgB;AAEhBC,IAAAA,UAFgB;AAGhBC,IAAAA,iBAHgB;AAIhBC,IAAAA,WAJgB;AAKhB,OAAGC;AALa,GAMb;AACH,QAAMC,YAAY,GACjB,cAAC,MAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAGX,UAAU,CACrBO,SADqB,EAErB,mDAFqB;AADvB,KAMGG,WAAW,GACZ,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,cAAC,IAAD;AACC,IAAA,IAAI,EAAGN;AADR,KAEQO,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAED,SAASI,kBAAT,QAKI;AAAA,MALyB;AAC5BC,IAAAA,WAD4B;AAE5BP,IAAAA,SAF4B;AAG5BQ,IAAAA,aAH4B;AAI5BC,IAAAA;AAJ4B,GAKzB;AACH,SACC,cAAC,QAAD;AACC,IAAA,SAAS,EAAGhB,UAAU,CACrB,yDADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEU,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,cAAC,MAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAED,SAASI,YAAT,QAAqE;AAAA,MAA9C;AAAEZ,IAAAA,SAAF;AAAaa,IAAAA,QAAb;AAAuB,OAAGT;AAA1B,GAA8C;AACpE,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAGX,UAAU,CACrB,0CADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,OAAO,MALR;AAMC,IAAA,OAAO,EAAC;AANT,KAOMI,eAPN,GASGS,QATH,CADD;AAaA;;AAED,eAAe,SAASC,oBAAT,QAKX;AAAA,MAL0C;AAC7CC,IAAAA,OAD6C;AAE7Cf,IAAAA,SAF6C;AAG7CgB,IAAAA,OAH6C;AAI7CH,IAAAA;AAJ6C,GAK1C;AACH,SACC;AACC,IAAA,SAAS,EAAGpB,UAAU,CACrB,mCADqB,EAErBO,SAFqB;AADvB,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGgB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;AAEDD,oBAAoB,CAACf,MAArB,GAA8BA,MAA9B;AACAe,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\n\nfunction Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n} ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n} ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nfunction ButtonAction( { className, children, ...additionalProps } ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tisSmall\n\t\t\tvariant=\"secondary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function CircularOptionPicker( {\n\tactions,\n\tclassName,\n\toptions,\n\tchildren,\n} ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n"]}
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { createElement } from "@wordpress/element";
3
+ // @ts-nocheck
3
4
 
4
5
  /**
5
6
  * External dependencies
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/color-indicator/index.js"],"names":["classnames","ColorIndicator","className","colorValue","props","background"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAEA,MAAMC,cAAc,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,GAAF;AAAA,SACtB;AACC,IAAA,SAAS,EAAGJ,UAAU,CAAE,2BAAF,EAA+BE,SAA/B,CADvB;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd;AAFT,KAGMC,KAHN,EADsB;AAAA,CAAvB;;AAQA,eAAeH,cAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nconst ColorIndicator = ( { className, colorValue, ...props } ) => (\n\t<span\n\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\tstyle={ { background: colorValue } }\n\t\t{ ...props }\n\t/>\n);\n\nexport default ColorIndicator;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/color-indicator/index.js"],"names":["classnames","ColorIndicator","className","colorValue","props","background"],"mappings":";;AAAA;;AAEA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAEA,MAAMC,cAAc,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,GAAF;AAAA,SACtB;AACC,IAAA,SAAS,EAAGJ,UAAU,CAAE,2BAAF,EAA+BE,SAA/B,CADvB;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd;AAFT,KAGMC,KAHN,EADsB;AAAA,CAAvB;;AAQA,eAAeH,cAAf","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nconst ColorIndicator = ( { className, colorValue, ...props } ) => (\n\t<span\n\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\tstyle={ { background: colorValue } }\n\t\t{ ...props }\n\t/>\n);\n\nexport default ColorIndicator;\n"]}
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { createElement } from "@wordpress/element";
3
+ // @ts-nocheck
3
4
 
4
5
  /**
5
6
  * External dependencies
@@ -13,7 +14,7 @@ import classnames from 'classnames';
13
14
  * WordPress dependencies
14
15
  */
15
16
 
16
- import { __, sprintf, isRTL } from '@wordpress/i18n';
17
+ import { __, sprintf } from '@wordpress/i18n';
17
18
  import { useCallback, useMemo } from '@wordpress/element';
18
19
  /**
19
20
  * Internal dependencies
@@ -122,7 +123,7 @@ export default function ColorPalette(_ref6) {
122
123
  __experimentalIsRenderedInSidebar = false
123
124
  } = _ref6;
124
125
  const clearColor = useCallback(() => onChange(undefined), [onChange]);
125
- const Component = __experimentalHasMultipleOrigins ? MultiplePalettes : SinglePalette;
126
+ const Component = __experimentalHasMultipleOrigins && colors !== null && colors !== void 0 && colors.length ? MultiplePalettes : SinglePalette;
126
127
 
127
128
  const renderCustomColorPicker = () => createElement(ColorPicker, {
128
129
  color: value,
@@ -131,13 +132,9 @@ export default function ColorPalette(_ref6) {
131
132
  });
132
133
 
133
134
  let dropdownPosition;
134
- let popoverProps;
135
135
 
136
136
  if (__experimentalIsRenderedInSidebar) {
137
- dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
138
- popoverProps = {
139
- __unstableForcePosition: true
140
- };
137
+ dropdownPosition = 'bottom left';
141
138
  }
142
139
 
143
140
  const colordColor = colord(value);
@@ -148,7 +145,6 @@ export default function ColorPalette(_ref6) {
148
145
  position: dropdownPosition,
149
146
  isRenderedInSidebar: __experimentalIsRenderedInSidebar,
150
147
  renderContent: renderCustomColorPicker,
151
- popoverProps: popoverProps,
152
148
  renderToggle: _ref7 => {
153
149
  let {
154
150
  isOpen,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","isRTL","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","popoverProps","__unstableForcePosition","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\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\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</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={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = isRTL() ? 'bottom right' : 'bottom left';\n\t\tpopoverProps = { __unstableForcePosition: true };\n\t}\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\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\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</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={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && colors?.length\n\t\t\t? MultiplePalettes\n\t\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = 'bottom left';\n\t}\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\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<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
@@ -189,7 +189,8 @@ function ColorPalette(_ref) {
189
189
  onContentSizeChange: onContentSizeChange,
190
190
  onScrollBeginDrag: () => shouldEnableBottomSheetScroll(false),
191
191
  onScrollEndDrag: () => shouldEnableBottomSheetScroll(true),
192
- ref: scrollViewRef
192
+ ref: scrollViewRef,
193
+ testID: "color-palette"
193
194
  }, shouldShowCustomIndicator && createElement(View, {
194
195
  style: customIndicatorWrapperStyle,
195
196
  onLayout: onCustomIndicatorLayout
@@ -221,7 +222,8 @@ function ColorPalette(_ref) {
221
222
  accessibilityState: {
222
223
  selected: isSelected(color)
223
224
  },
224
- accessibilityHint: color
225
+ accessibilityHint: color,
226
+ testID: color
225
227
  }, createElement(Animated.View, {
226
228
  style: {
227
229
  transform: [{
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","uniq","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","contentContainer","container","selected","colorIndicator","toUpperCase","scaleValue","transform"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && colors && colors.includes( activeColor );\n\t\tif ( activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","uniq","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","contentContainer","container","selected","colorIndicator","toUpperCase","scaleValue","transform"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && colors && colors.includes( activeColor );\n\t\tif ( activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t\ttestID=\"color-palette\"\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","COLORS","ValueDisplay","values","map","value","abbreviation","ui","theme","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color={ COLORS.ui.theme }>#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\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 ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","COLORS","ValueDisplay","values","map","value","abbreviation","ui","theme","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color={ COLORS.ui.theme }>#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\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 ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["RgbInput","HslInput","HexInput","ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AASA,OAAO,MAAMC,UAAU,GAAG,QAKF;AAAA,MALI;AAC3BC,IAAAA,SAD2B;AAE3BC,IAAAA,KAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA;AAJ2B,GAKJ;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeI,KAAf,CAAP;;AACD,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeA,KAAf,CAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeA,KAAf,CAAP;AAPF;AASA,CAhBM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\n\ninterface ColorInputProps {\n\tcolorType: 'hsl' | 'hex' | 'rgb';\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["RgbInput","HslInput","HexInput","ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AASA,OAAO,MAAMC,UAAU,GAAG,QAKF;AAAA,MALI;AAC3BC,IAAAA,SAD2B;AAE3BC,IAAAA,KAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA;AAJ2B,GAKJ;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeI,KAAf,CAAP;;AACD,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeA,KAAf,CAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeA,KAAf,CAAP;AAPF;AASA,CAhBM","sourcesContent":["/**\n * External dependencies\n */\nimport type { Colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\n\ninterface ColorInputProps {\n\tcolorType: 'hsl' | 'hex' | 'rgb';\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}
@@ -4,15 +4,13 @@ import { createElement } from "@wordpress/element";
4
4
  /**
5
5
  * External dependencies
6
6
  */
7
- // eslint-disable-next-line no-restricted-imports
8
- import { useCallback } from 'react';
9
7
  import { colord, extend } from 'colord';
10
8
  import namesPlugin from 'colord/plugins/names';
11
9
  /**
12
10
  * WordPress dependencies
13
11
  */
14
12
 
15
- import { useState, useMemo } from '@wordpress/element';
13
+ import { useCallback, useState, useMemo } from '@wordpress/element';
16
14
  import { settings } from '@wordpress/icons';
17
15
  import { useDebounce } from '@wordpress/compose';
18
16
  import { __ } from '@wordpress/i18n';
@@ -56,7 +54,7 @@ const ColorPicker = (props, forwardedRef) => {
56
54
  defaultValue
57
55
  });
58
56
  const safeColordColor = useMemo(() => {
59
- return colord(color);
57
+ return colord(color || '');
60
58
  }, [color]);
61
59
  const debouncedSetColor = useDebounce(setColor);
62
60
  const handleChange = useCallback(nextValue => {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["useCallback","colord","extend","namesPlugin","useState","useMemo","settings","useDebounce","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","useControlledValue","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Ref, useCallback } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\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 ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< 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 [ showInputs, setShowInputs ] = useState< boolean >( false );\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<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\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) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","settings","useDebounce","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","useControlledValue","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\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 ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< 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 [ showInputs, setShowInputs ] = useState< boolean >( false );\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<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\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) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
@@ -1,8 +1,7 @@
1
1
  /**
2
2
  * External dependencies
3
3
  */
4
- import { colord } from 'colord'; // eslint-disable-next-line no-restricted-imports
5
-
4
+ import { colord } from 'colord';
6
5
  import memoize from 'memize';
7
6
  /**
8
7
  * WordPress dependencies
@@ -31,6 +30,8 @@ function getColorFromLegacyProps(props) {
31
30
  if (props.color.hex) {
32
31
  return props.color.hex;
33
32
  }
33
+
34
+ return undefined;
34
35
  }
35
36
 
36
37
  const transformColorStringToLegacyColor = memoize(color => {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/color-picker/use-deprecated-props.ts"],"names":["colord","memoize","useCallback","useMemo","isLegacyProps","props","onChangeComplete","disableAlpha","color","hex","getColorFromLegacyProps","undefined","transformColorStringToLegacyColor","colordColor","toHex","rgb","toRgb","hsv","toHsv","hsl","toHsl","source","oldHue","h","useDeprecatedProps","onChange","enableAlpha"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,MADD,QAQO,QARP,C,CASA;;AAEA,OAAOC,OAAP,MAAoB,QAApB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,OAAtB,QAAqC,oBAArC;AAEA;AACA;AACA;;AA6CA,SAASC,aAAT,CAAwBC,KAAxB,EAA2D;AAAA;;AAC1D,SACC,OAAOA,KAAK,CAACC,gBAAb,KAAkC,WAAlC,IACA,OAAOD,KAAK,CAACE,YAAb,KAA8B,WAD9B,IAEA,wBAAOF,KAAK,CAACG,KAAb,iDAAO,aAAaC,GAApB,MAA4B,QAH7B;AAKA;;AAED,SAASC,uBAAT,CAAkCL,KAAlC,EAA2E;AAC1E,MAAK,QAAOA,KAAP,aAAOA,KAAP,uBAAOA,KAAK,CAAEG,KAAd,MAAwB,WAA7B,EAA2C;AAC1C,WAAOG,SAAP;AACA;;AACD,MAAK,OAAON,KAAK,CAACG,KAAb,KAAuB,QAA5B,EAAuC;AACtC,WAAOH,KAAK,CAACG,KAAb;AACA;;AACD,MAAKH,KAAK,CAACG,KAAN,CAAYC,GAAjB,EAAuB;AACtB,WAAOJ,KAAK,CAACG,KAAN,CAAYC,GAAnB;AACA;AACD;;AAED,MAAMG,iCAAiC,GAAGX,OAAO,CAC9CO,KAAF,IAAkC;AACjC,QAAMK,WAAW,GAAGb,MAAM,CAAEQ,KAAF,CAA1B;AACA,QAAMC,GAAG,GAAGI,WAAW,CAACC,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGF,WAAW,CAACG,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGJ,WAAW,CAACK,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGN,WAAW,CAACO,KAAZ,EAAZ;AAEA,SAAO;AACNX,IAAAA,GADM;AAENM,IAAAA,GAFM;AAGNE,IAAAA,GAHM;AAINE,IAAAA,GAJM;AAKNE,IAAAA,MAAM,EAAE,KALF;AAMNC,IAAAA,MAAM,EAAEH,GAAG,CAACI;AANN,GAAP;AAQA,CAhB+C,CAAjD;AAmBA,OAAO,SAASC,kBAAT,CACNnB,KADM,EAEa;AACnB,QAAMoB,QAAQ,GAAGvB,WAAW,CACzBM,KAAF,IAAqB;AAAA;;AACpB,QAAKJ,aAAa,CAAEC,KAAF,CAAlB,EAA8B;AAC7B,aAAOA,KAAK,CAACC,gBAAN,CACNM,iCAAiC,CAAEJ,KAAF,CAD3B,CAAP;AAGA;;AAED,8BAAOH,KAAK,CAACoB,QAAb,oDAAO,qBAAApB,KAAK,EAAaG,KAAb,CAAZ;AACA,GAT0B,EAU3B,CACGH,KAAF,CAAyBC,gBAD1B,EAEGD,KAAF,CAA8BoB,QAF/B,CAV2B,CAA5B;AAgBA,QAAMjB,KAAK,GAAGL,OAAO,CAAE,MAAM;AAC5B,WAAOC,aAAa,CAAEC,KAAF,CAAb,GACJK,uBAAuB,CAAEL,KAAF,CADnB,GAEJA,KAAK,CAACG,KAFT;AAGA,GAJoB,EAIlB,CAAEH,KAAK,CAACG,KAAR,CAJkB,CAArB;AAMA,QAAMkB,WAAW,GAAGvB,OAAO,CAAE,MAAM;AAClC,WAAOC,aAAa,CAAEC,KAAF,CAAb,GACJ,CAAEA,KAAK,CAACE,YADJ,GAEJF,KAAK,CAACqB,WAFT;AAGA,GAJ0B,EAIxB,CACArB,KAAF,CAAyBE,YADvB,EAEAF,KAAF,CAA8BqB,WAF5B,CAJwB,CAA3B;AASA,SAAO,EACN,IAAKtB,aAAa,CAAEC,KAAF,CAAb,GAAyB,EAAzB,GAA8BA,KAAnC,CADM;AAENoB,IAAAA,QAFM;AAGNjB,IAAAA,KAHM;AAINkB,IAAAA;AAJM,GAAP;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tcolord,\n\tHslColor,\n\tHslaColor,\n\tHsvColor,\n\tHsvaColor,\n\tRgbColor,\n\tRgbaColor,\n} from 'colord';\n// eslint-disable-next-line no-restricted-imports\nimport type { ComponentProps } from 'react';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type ColorPicker from './component';\n\ntype ColorPickerProps = ComponentProps< typeof ColorPicker >;\n\n/**\n * @deprecated\n */\ntype LegacyColor =\n\t| string\n\t| {\n\t\t\thex: string;\n\t\t\thsl: HslColor | HslaColor;\n\t\t\thsv: HsvColor | HsvaColor;\n\t\t\trgb: RgbColor | RgbaColor;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\toldHue: number;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tsource: 'hex';\n\t };\n\n/**\n * @deprecated\n */\nexport interface LegacyProps {\n\tcolor?: LegacyColor;\n\t/**\n\t * @deprecated\n\t */\n\tonChangeComplete: ( colors: LegacyColor ) => void;\n\t/**\n\t * @deprecated\n\t */\n\toldHue: string;\n\tclassName: string;\n\t/**\n\t * @deprecated\n\t */\n\tdisableAlpha: boolean;\n}\n\nfunction isLegacyProps( props: any ): props is LegacyProps {\n\treturn (\n\t\ttypeof props.onChangeComplete !== 'undefined' ||\n\t\ttypeof props.disableAlpha !== 'undefined' ||\n\t\ttypeof props.color?.hex === 'string'\n\t);\n}\n\nfunction getColorFromLegacyProps( props: LegacyProps ): string | undefined {\n\tif ( typeof props?.color === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\tif ( typeof props.color === 'string' ) {\n\t\treturn props.color;\n\t}\n\tif ( props.color.hex ) {\n\t\treturn props.color.hex;\n\t}\n}\n\nconst transformColorStringToLegacyColor = memoize(\n\t( color: string ): LegacyColor => {\n\t\tconst colordColor = colord( color );\n\t\tconst hex = colordColor.toHex();\n\t\tconst rgb = colordColor.toRgb();\n\t\tconst hsv = colordColor.toHsv();\n\t\tconst hsl = colordColor.toHsl();\n\n\t\treturn {\n\t\t\thex,\n\t\t\trgb,\n\t\t\thsv,\n\t\t\thsl,\n\t\t\tsource: 'hex',\n\t\t\toldHue: hsl.h,\n\t\t};\n\t}\n);\n\nexport function useDeprecatedProps(\n\tprops: LegacyProps | ColorPickerProps\n): ColorPickerProps {\n\tconst onChange = useCallback(\n\t\t( color: string ) => {\n\t\t\tif ( isLegacyProps( props ) ) {\n\t\t\t\treturn props.onChangeComplete(\n\t\t\t\t\ttransformColorStringToLegacyColor( color )\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn props.onChange?.( color );\n\t\t},\n\t\t[\n\t\t\t( props as LegacyProps ).onChangeComplete,\n\t\t\t( props as ColorPickerProps ).onChange,\n\t\t]\n\t);\n\n\tconst color = useMemo( () => {\n\t\treturn isLegacyProps( props )\n\t\t\t? getColorFromLegacyProps( props )\n\t\t\t: props.color;\n\t}, [ props.color ] );\n\n\tconst enableAlpha = useMemo( () => {\n\t\treturn isLegacyProps( props )\n\t\t\t? ! props.disableAlpha\n\t\t\t: props.enableAlpha;\n\t}, [\n\t\t( props as LegacyProps ).disableAlpha,\n\t\t( props as ColorPickerProps ).enableAlpha,\n\t] );\n\n\treturn {\n\t\t...( isLegacyProps( props ) ? {} : props ),\n\t\tonChange,\n\t\tcolor,\n\t\tenableAlpha,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/color-picker/use-deprecated-props.ts"],"names":["colord","memoize","useCallback","useMemo","isLegacyProps","props","onChangeComplete","disableAlpha","color","hex","getColorFromLegacyProps","undefined","transformColorStringToLegacyColor","colordColor","toHex","rgb","toRgb","hsv","toHsv","hsl","toHsl","source","oldHue","h","useDeprecatedProps","onChange","enableAlpha"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,MADD,QAQO,QARP;AAUA,OAAOC,OAAP,MAAoB,QAApB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,OAAtB,QAAqC,oBAArC;AAEA;AACA;AACA;;AA6CA,SAASC,aAAT,CAAwBC,KAAxB,EAA2D;AAAA;;AAC1D,SACC,OAAOA,KAAK,CAACC,gBAAb,KAAkC,WAAlC,IACA,OAAOD,KAAK,CAACE,YAAb,KAA8B,WAD9B,IAEA,wBAAOF,KAAK,CAACG,KAAb,iDAAO,aAAaC,GAApB,MAA4B,QAH7B;AAKA;;AAED,SAASC,uBAAT,CAAkCL,KAAlC,EAA2E;AAC1E,MAAK,QAAOA,KAAP,aAAOA,KAAP,uBAAOA,KAAK,CAAEG,KAAd,MAAwB,WAA7B,EAA2C;AAC1C,WAAOG,SAAP;AACA;;AACD,MAAK,OAAON,KAAK,CAACG,KAAb,KAAuB,QAA5B,EAAuC;AACtC,WAAOH,KAAK,CAACG,KAAb;AACA;;AACD,MAAKH,KAAK,CAACG,KAAN,CAAYC,GAAjB,EAAuB;AACtB,WAAOJ,KAAK,CAACG,KAAN,CAAYC,GAAnB;AACA;;AAED,SAAOE,SAAP;AACA;;AAED,MAAMC,iCAAiC,GAAGX,OAAO,CAC9CO,KAAF,IAAkC;AACjC,QAAMK,WAAW,GAAGb,MAAM,CAAEQ,KAAF,CAA1B;AACA,QAAMC,GAAG,GAAGI,WAAW,CAACC,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGF,WAAW,CAACG,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGJ,WAAW,CAACK,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGN,WAAW,CAACO,KAAZ,EAAZ;AAEA,SAAO;AACNX,IAAAA,GADM;AAENM,IAAAA,GAFM;AAGNE,IAAAA,GAHM;AAINE,IAAAA,GAJM;AAKNE,IAAAA,MAAM,EAAE,KALF;AAMNC,IAAAA,MAAM,EAAEH,GAAG,CAACI;AANN,GAAP;AAQA,CAhB+C,CAAjD;AAmBA,OAAO,SAASC,kBAAT,CACNnB,KADM,EAEa;AACnB,QAAMoB,QAAQ,GAAGvB,WAAW,CACzBM,KAAF,IAAqB;AAAA;;AACpB,QAAKJ,aAAa,CAAEC,KAAF,CAAlB,EAA8B;AAC7B,aAAOA,KAAK,CAACC,gBAAN,CACNM,iCAAiC,CAAEJ,KAAF,CAD3B,CAAP;AAGA;;AAED,8BAAOH,KAAK,CAACoB,QAAb,oDAAO,qBAAApB,KAAK,EAAaG,KAAb,CAAZ;AACA,GAT0B,EAU3B,CACGH,KAAF,CAAyBC,gBAD1B,EAEGD,KAAF,CAA8BoB,QAF/B,CAV2B,CAA5B;AAgBA,QAAMjB,KAAK,GAAGL,OAAO,CAAE,MAAM;AAC5B,WAAOC,aAAa,CAAEC,KAAF,CAAb,GACJK,uBAAuB,CAAEL,KAAF,CADnB,GAEJA,KAAK,CAACG,KAFT;AAGA,GAJoB,EAIlB,CAAEH,KAAK,CAACG,KAAR,CAJkB,CAArB;AAMA,QAAMkB,WAAW,GAAGvB,OAAO,CAAE,MAAM;AAClC,WAAOC,aAAa,CAAEC,KAAF,CAAb,GACJ,CAAEA,KAAK,CAACE,YADJ,GAEJF,KAAK,CAACqB,WAFT;AAGA,GAJ0B,EAIxB,CACArB,KAAF,CAAyBE,YADvB,EAEAF,KAAF,CAA8BqB,WAF5B,CAJwB,CAA3B;AASA,SAAO,EACN,IAAKtB,aAAa,CAAEC,KAAF,CAAb,GAAyB,EAAzB,GAA8BA,KAAnC,CADM;AAENoB,IAAAA,QAFM;AAGNjB,IAAAA,KAHM;AAINkB,IAAAA;AAJM,GAAP;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tcolord,\n\tHslColor,\n\tHslaColor,\n\tHsvColor,\n\tHsvaColor,\n\tRgbColor,\n\tRgbaColor,\n} from 'colord';\nimport type { ComponentProps } from 'react';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type ColorPicker from './component';\n\ntype ColorPickerProps = ComponentProps< typeof ColorPicker >;\n\n/**\n * @deprecated\n */\ntype LegacyColor =\n\t| string\n\t| {\n\t\t\thex: string;\n\t\t\thsl: HslColor | HslaColor;\n\t\t\thsv: HsvColor | HsvaColor;\n\t\t\trgb: RgbColor | RgbaColor;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\toldHue: number;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tsource: 'hex';\n\t };\n\n/**\n * @deprecated\n */\nexport interface LegacyProps {\n\tcolor?: LegacyColor;\n\t/**\n\t * @deprecated\n\t */\n\tonChangeComplete: ( colors: LegacyColor ) => void;\n\t/**\n\t * @deprecated\n\t */\n\toldHue: string;\n\tclassName: string;\n\t/**\n\t * @deprecated\n\t */\n\tdisableAlpha: boolean;\n}\n\nfunction isLegacyProps( props: any ): props is LegacyProps {\n\treturn (\n\t\ttypeof props.onChangeComplete !== 'undefined' ||\n\t\ttypeof props.disableAlpha !== 'undefined' ||\n\t\ttypeof props.color?.hex === 'string'\n\t);\n}\n\nfunction getColorFromLegacyProps( props: LegacyProps ): string | undefined {\n\tif ( typeof props?.color === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\tif ( typeof props.color === 'string' ) {\n\t\treturn props.color;\n\t}\n\tif ( props.color.hex ) {\n\t\treturn props.color.hex;\n\t}\n\n\treturn undefined;\n}\n\nconst transformColorStringToLegacyColor = memoize(\n\t( color: string ): LegacyColor => {\n\t\tconst colordColor = colord( color );\n\t\tconst hex = colordColor.toHex();\n\t\tconst rgb = colordColor.toRgb();\n\t\tconst hsv = colordColor.toHsv();\n\t\tconst hsl = colordColor.toHsl();\n\n\t\treturn {\n\t\t\thex,\n\t\t\trgb,\n\t\t\thsv,\n\t\t\thsl,\n\t\t\tsource: 'hex',\n\t\t\toldHue: hsl.h,\n\t\t};\n\t}\n);\n\nexport function useDeprecatedProps(\n\tprops: LegacyProps | ColorPickerProps\n): ColorPickerProps {\n\tconst onChange = useCallback(\n\t\t( color: string ) => {\n\t\t\tif ( isLegacyProps( props ) ) {\n\t\t\t\treturn props.onChangeComplete(\n\t\t\t\t\ttransformColorStringToLegacyColor( color )\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn props.onChange?.( color );\n\t\t},\n\t\t[\n\t\t\t( props as LegacyProps ).onChangeComplete,\n\t\t\t( props as ColorPickerProps ).onChange,\n\t\t]\n\t);\n\n\tconst color = useMemo( () => {\n\t\treturn isLegacyProps( props )\n\t\t\t? getColorFromLegacyProps( props )\n\t\t\t: props.color;\n\t}, [ props.color ] );\n\n\tconst enableAlpha = useMemo( () => {\n\t\treturn isLegacyProps( props )\n\t\t\t? ! props.disableAlpha\n\t\t\t: props.enableAlpha;\n\t}, [\n\t\t( props as LegacyProps ).disableAlpha,\n\t\t( props as ColorPickerProps ).enableAlpha,\n\t] );\n\n\treturn {\n\t\t...( isLegacyProps( props ) ? {} : props ),\n\t\tonChange,\n\t\tcolor,\n\t\tenableAlpha,\n\t};\n}\n"]}
@@ -4,14 +4,12 @@ import { createElement, Fragment } from "@wordpress/element";
4
4
  /**
5
5
  * External dependencies
6
6
  */
7
- // eslint-disable-next-line no-restricted-imports
8
- import React, { useEffect, useState } from 'react'; // eslint-disable-next-line no-restricted-imports
9
7
 
10
8
  /**
11
9
  * WordPress dependencies
12
10
  */
13
11
  import { __ } from '@wordpress/i18n';
14
- import { useCallback } from '@wordpress/element';
12
+ import { useCallback, useEffect, useState } from '@wordpress/element';
15
13
  /**
16
14
  * Internal dependencies
17
15
  */
@@ -22,6 +20,8 @@ import { Flex } from '../flex';
22
20
  import Button from '../button';
23
21
  import { Text } from '../text';
24
22
  import { VStack } from '../v-stack';
23
+ import * as styles from './styles';
24
+ import { useCx } from '../utils/hooks/use-cx';
25
25
 
26
26
  function ConfirmDialog(props, forwardedRef) {
27
27
  const {
@@ -31,6 +31,8 @@ function ConfirmDialog(props, forwardedRef) {
31
31
  children,
32
32
  ...otherProps
33
33
  } = useContextSystem(props, 'ConfirmDialog');
34
+ const cx = useCx();
35
+ const wrapperClassName = cx(styles.wrapper);
34
36
  const [isOpen, setIsOpen] = useState();
35
37
  const [shouldSelfClose, setShouldSelfClose] = useState();
36
38
  useEffect(() => {
@@ -65,6 +67,7 @@ function ConfirmDialog(props, forwardedRef) {
65
67
  closeButtonLabel: cancelLabel,
66
68
  isDismissible: true,
67
69
  ref: forwardedRef,
70
+ overlayClassName: wrapperClassName,
68
71
  __experimentalHideHeader: true
69
72
  }, otherProps), createElement(VStack, {
70
73
  spacing: 8
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["React","useEffect","useState","__","useCallback","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","otherProps","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","key","cancelLabel","confirmLabel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport React, { useEffect, useState } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) => (\n\t\t\tevent: DialogInputEvent\n\t\t) => {\n\t\t\tcallback?.( event );\n\t\t\tif ( shouldSelfClose ) {\n\t\t\t\tsetIsOpen( false );\n\t\t\t}\n\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = __( 'Cancel' );\n\tconst confirmLabel = __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["__","useCallback","useEffect","useState","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","styles","useCx","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","otherProps","cx","wrapperClassName","wrapper","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","key","cancelLabel","confirmLabel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) => (\n\t\t\tevent: DialogInputEvent\n\t\t) => {\n\t\t\tcallback?.( event );\n\t\t\tif ( shouldSelfClose ) {\n\t\t\t\tsetIsOpen( false );\n\t\t\t}\n\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = __( 'Cancel' );\n\tconst confirmLabel = __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}