@wordpress/components 19.17.0 → 20.0.1-next.d6164808d3.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 (599) hide show
  1. package/CHANGELOG.md +68 -1
  2. package/build/alignment-matrix-control/index.js +1 -1
  3. package/build/alignment-matrix-control/index.js.map +1 -1
  4. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js +9 -9
  5. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  6. package/build/angle-picker-control/index.js +3 -0
  7. package/build/angle-picker-control/index.js.map +1 -1
  8. package/build/angle-picker-control/styles/angle-picker-control-styles.js +14 -4
  9. package/build/angle-picker-control/styles/angle-picker-control-styles.js.map +1 -1
  10. package/build/autocomplete/index.js +9 -11
  11. package/build/autocomplete/index.js.map +1 -1
  12. package/build/base-control/styles/base-control-styles.js +8 -8
  13. package/build/base-control/styles/base-control-styles.js.map +1 -1
  14. package/build/base-field/styles.js +5 -5
  15. package/build/base-field/styles.js.map +1 -1
  16. package/build/box-control/styles/box-control-visualizer-styles.js +8 -8
  17. package/build/box-control/styles/box-control-visualizer-styles.js.map +1 -1
  18. package/build/color-list-picker/index.js +16 -5
  19. package/build/color-list-picker/index.js.map +1 -1
  20. package/build/color-palette/index.js +22 -12
  21. package/build/color-palette/index.js.map +1 -1
  22. package/build/color-palette/index.native.js +3 -3
  23. package/build/color-palette/index.native.js.map +1 -1
  24. package/build/combobox-control/index.js +7 -4
  25. package/build/combobox-control/index.js.map +1 -1
  26. package/build/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/constants.js +0 -0
  27. package/build/custom-gradient-picker/gradient-bar/constants.js.map +1 -0
  28. package/build/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/control-points.js +34 -41
  29. package/build/custom-gradient-picker/gradient-bar/control-points.js.map +1 -0
  30. package/build/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/index.js +0 -1
  31. package/build/custom-gradient-picker/gradient-bar/index.js.map +1 -0
  32. package/build/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/utils.js +0 -0
  33. package/build/custom-gradient-picker/gradient-bar/utils.js.map +1 -0
  34. package/build/custom-gradient-picker/index.js +19 -4
  35. package/build/custom-gradient-picker/index.js.map +1 -1
  36. package/build/custom-select-control/index.js +21 -11
  37. package/build/custom-select-control/index.js.map +1 -1
  38. package/build/custom-select-control/styles.js +34 -0
  39. package/build/custom-select-control/styles.js.map +1 -0
  40. package/build/date-time/constants.js +9 -0
  41. package/build/date-time/constants.js.map +1 -0
  42. package/build/date-time/date/index.js +175 -186
  43. package/build/date-time/date/index.js.map +1 -1
  44. package/build/date-time/date/styles.js +59 -40
  45. package/build/date-time/date/styles.js.map +1 -1
  46. package/build/date-time/date-time/index.js +5 -2
  47. package/build/date-time/date-time/index.js.map +1 -1
  48. package/build/date-time/time/index.js +22 -17
  49. package/build/date-time/time/index.js.map +1 -1
  50. package/build/date-time/utils.js +27 -0
  51. package/build/date-time/utils.js.map +1 -0
  52. package/build/dimension-control/index.js +2 -6
  53. package/build/dimension-control/index.js.map +1 -1
  54. package/build/disabled/index.js +28 -11
  55. package/build/disabled/index.js.map +1 -1
  56. package/build/disabled/styles/disabled-styles.js +3 -3
  57. package/build/disabled/styles/disabled-styles.js.map +1 -1
  58. package/build/{swatch → disabled}/types.js +0 -0
  59. package/build/{swatch → disabled}/types.js.map +0 -0
  60. package/build/dropdown/index.js +5 -6
  61. package/build/dropdown/index.js.map +1 -1
  62. package/build/duotone-picker/custom-duotone-bar.js +2 -2
  63. package/build/duotone-picker/custom-duotone-bar.js.map +1 -1
  64. package/build/duotone-picker/duotone-picker.js +9 -1
  65. package/build/duotone-picker/duotone-picker.js.map +1 -1
  66. package/build/duotone-picker/duotone-swatch.js +13 -3
  67. package/build/duotone-picker/duotone-swatch.js.map +1 -1
  68. package/build/focal-point-picker/index.js +4 -6
  69. package/build/focal-point-picker/index.js.map +1 -1
  70. package/build/focal-point-picker/styles/focal-point-style.js +4 -4
  71. package/build/focal-point-picker/styles/focal-point-style.js.map +1 -1
  72. package/build/font-size-picker/index.js +43 -14
  73. package/build/font-size-picker/index.js.map +1 -1
  74. package/build/font-size-picker/utils.js +32 -22
  75. package/build/font-size-picker/utils.js.map +1 -1
  76. package/build/form-token-field/index.js +11 -5
  77. package/build/form-token-field/index.js.map +1 -1
  78. package/build/gradient-picker/index.js +15 -3
  79. package/build/gradient-picker/index.js.map +1 -1
  80. package/build/guide/index.js +5 -3
  81. package/build/guide/index.js.map +1 -1
  82. package/build/guide/page-control.js +3 -7
  83. package/build/guide/page-control.js.map +1 -1
  84. package/build/item-group/styles.js +10 -10
  85. package/build/item-group/styles.js.map +1 -1
  86. package/build/mobile/bottom-sheet/index.native.js +3 -6
  87. package/build/mobile/bottom-sheet/index.native.js.map +1 -1
  88. package/build/mobile/global-styles-context/utils.native.js +3 -1
  89. package/build/mobile/global-styles-context/utils.native.js.map +1 -1
  90. package/build/mobile/image/index.native.js +6 -26
  91. package/build/mobile/image/index.native.js.map +1 -1
  92. package/build/mobile/picker/index.android.js +3 -3
  93. package/build/mobile/picker/index.android.js.map +1 -1
  94. package/build/modal/index.js +1 -3
  95. package/build/modal/index.js.map +1 -1
  96. package/build/navigable-container/container.js +9 -8
  97. package/build/navigable-container/container.js.map +1 -1
  98. package/build/navigator/navigator-back-button/hook.js +0 -4
  99. package/build/navigator/navigator-back-button/hook.js.map +1 -1
  100. package/build/navigator/navigator-button/hook.js +0 -4
  101. package/build/navigator/navigator-button/hook.js.map +1 -1
  102. package/build/notice/list.js +10 -6
  103. package/build/notice/list.js.map +1 -1
  104. package/build/palette-edit/index.js +1 -0
  105. package/build/palette-edit/index.js.map +1 -1
  106. package/build/palette-edit/styles.js +10 -10
  107. package/build/palette-edit/styles.js.map +1 -1
  108. package/build/popover/index.js +100 -97
  109. package/build/popover/index.js.map +1 -1
  110. package/build/popover/utils.js +178 -0
  111. package/build/popover/utils.js.map +1 -0
  112. package/build/range-control/index.js +3 -0
  113. package/build/range-control/index.js.map +1 -1
  114. package/build/range-control/styles/range-control-styles.js +43 -37
  115. package/build/range-control/styles/range-control-styles.js.map +1 -1
  116. package/build/select-control/chevron-down.js +30 -0
  117. package/build/select-control/chevron-down.js.map +1 -0
  118. package/build/select-control/index.js +7 -7
  119. package/build/select-control/index.js.map +1 -1
  120. package/build/select-control/styles/select-control-styles.js +30 -15
  121. package/build/select-control/styles/select-control-styles.js.map +1 -1
  122. package/build/snackbar/list.js +5 -3
  123. package/build/snackbar/list.js.map +1 -1
  124. package/build/spinner/index.js +2 -0
  125. package/build/spinner/index.js.map +1 -1
  126. package/build/text/styles.js +7 -7
  127. package/build/text/styles.js.map +1 -1
  128. package/build/toggle-group-control/toggle-group-control/component.js +16 -8
  129. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  130. package/build/toggle-group-control/toggle-group-control/styles.js +7 -5
  131. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  132. package/build/toggle-group-control/toggle-group-control-option/component.js +15 -5
  133. package/build/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  134. package/build/toggle-group-control/toggle-group-control-option-base/component.js +5 -1
  135. package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  136. package/build/toggle-group-control/toggle-group-control-option-base/styles.js +20 -7
  137. package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  138. package/build/toggle-group-control/toggle-group-control-option-icon/component.js +26 -7
  139. package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  140. package/build/tools-panel/styles.js +11 -11
  141. package/build/tools-panel/styles.js.map +1 -1
  142. package/build/ui/context/context-connect.js +1 -3
  143. package/build/ui/context/context-connect.js.map +1 -1
  144. package/build/unit-control/index.js +2 -3
  145. package/build/unit-control/index.js.map +1 -1
  146. package/build/utils/colors-values.js +52 -142
  147. package/build/utils/colors-values.js.map +1 -1
  148. package/build/utils/config-values.js +1 -1
  149. package/build/utils/config-values.js.map +1 -1
  150. package/build/utils/input/input-control.js +1 -1
  151. package/build/utils/input/input-control.js.map +1 -1
  152. package/build/utils/rtl.js +6 -5
  153. package/build/utils/rtl.js.map +1 -1
  154. package/build/utils/strings.js +50 -0
  155. package/build/utils/strings.js.map +1 -0
  156. package/build-module/alignment-matrix-control/index.js +1 -1
  157. package/build-module/alignment-matrix-control/index.js.map +1 -1
  158. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js +9 -9
  159. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  160. package/build-module/angle-picker-control/index.js +3 -0
  161. package/build-module/angle-picker-control/index.js.map +1 -1
  162. package/build-module/angle-picker-control/styles/angle-picker-control-styles.js +13 -4
  163. package/build-module/angle-picker-control/styles/angle-picker-control-styles.js.map +1 -1
  164. package/build-module/autocomplete/index.js +9 -10
  165. package/build-module/autocomplete/index.js.map +1 -1
  166. package/build-module/base-control/styles/base-control-styles.js +8 -8
  167. package/build-module/base-control/styles/base-control-styles.js.map +1 -1
  168. package/build-module/base-field/styles.js +5 -5
  169. package/build-module/base-field/styles.js.map +1 -1
  170. package/build-module/box-control/styles/box-control-visualizer-styles.js +8 -8
  171. package/build-module/box-control/styles/box-control-visualizer-styles.js.map +1 -1
  172. package/build-module/color-list-picker/index.js +13 -5
  173. package/build-module/color-list-picker/index.js.map +1 -1
  174. package/build-module/color-palette/index.js +22 -11
  175. package/build-module/color-palette/index.js.map +1 -1
  176. package/build-module/color-palette/index.native.js +4 -4
  177. package/build-module/color-palette/index.native.js.map +1 -1
  178. package/build-module/combobox-control/index.js +6 -3
  179. package/build-module/combobox-control/index.js.map +1 -1
  180. package/build-module/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/constants.js +0 -0
  181. package/build-module/custom-gradient-picker/gradient-bar/constants.js.map +1 -0
  182. package/build-module/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/control-points.js +34 -41
  183. package/build-module/custom-gradient-picker/gradient-bar/control-points.js.map +1 -0
  184. package/build-module/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/index.js +0 -1
  185. package/build-module/custom-gradient-picker/gradient-bar/index.js.map +1 -0
  186. package/build-module/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/utils.js +0 -0
  187. package/build-module/custom-gradient-picker/gradient-bar/utils.js.map +1 -0
  188. package/build-module/custom-gradient-picker/index.js +16 -3
  189. package/build-module/custom-gradient-picker/index.js.map +1 -1
  190. package/build-module/custom-select-control/index.js +20 -12
  191. package/build-module/custom-select-control/index.js.map +1 -1
  192. package/build-module/custom-select-control/styles.js +22 -0
  193. package/build-module/custom-select-control/styles.js.map +1 -0
  194. package/build-module/date-time/constants.js +2 -0
  195. package/build-module/date-time/constants.js.map +1 -0
  196. package/build-module/date-time/date/index.js +178 -184
  197. package/build-module/date-time/date/index.js.map +1 -1
  198. package/build-module/date-time/date/styles.js +47 -38
  199. package/build-module/date-time/date/styles.js.map +1 -1
  200. package/build-module/date-time/date-time/index.js +4 -2
  201. package/build-module/date-time/date-time/index.js.map +1 -1
  202. package/build-module/date-time/time/index.js +20 -16
  203. package/build-module/date-time/time/index.js.map +1 -1
  204. package/build-module/date-time/utils.js +19 -0
  205. package/build-module/date-time/utils.js.map +1 -0
  206. package/build-module/dimension-control/index.js +1 -5
  207. package/build-module/dimension-control/index.js.map +1 -1
  208. package/build-module/disabled/index.js +28 -11
  209. package/build-module/disabled/index.js.map +1 -1
  210. package/build-module/disabled/styles/disabled-styles.js +3 -3
  211. package/build-module/disabled/styles/disabled-styles.js.map +1 -1
  212. package/build-module/{swatch → disabled}/types.js +0 -0
  213. package/build-module/{swatch → disabled}/types.js.map +0 -0
  214. package/build-module/dropdown/index.js +5 -6
  215. package/build-module/dropdown/index.js.map +1 -1
  216. package/build-module/duotone-picker/custom-duotone-bar.js +1 -1
  217. package/build-module/duotone-picker/custom-duotone-bar.js.map +1 -1
  218. package/build-module/duotone-picker/duotone-picker.js +7 -1
  219. package/build-module/duotone-picker/duotone-picker.js.map +1 -1
  220. package/build-module/duotone-picker/duotone-swatch.js +11 -3
  221. package/build-module/duotone-picker/duotone-swatch.js.map +1 -1
  222. package/build-module/focal-point-picker/index.js +4 -5
  223. package/build-module/focal-point-picker/index.js.map +1 -1
  224. package/build-module/focal-point-picker/styles/focal-point-style.js +4 -4
  225. package/build-module/focal-point-picker/styles/focal-point-style.js.map +1 -1
  226. package/build-module/font-size-picker/index.js +39 -14
  227. package/build-module/font-size-picker/index.js.map +1 -1
  228. package/build-module/font-size-picker/utils.js +31 -23
  229. package/build-module/font-size-picker/utils.js.map +1 -1
  230. package/build-module/form-token-field/index.js +12 -6
  231. package/build-module/form-token-field/index.js.map +1 -1
  232. package/build-module/gradient-picker/index.js +14 -3
  233. package/build-module/gradient-picker/index.js.map +1 -1
  234. package/build-module/guide/index.js +5 -3
  235. package/build-module/guide/index.js.map +1 -1
  236. package/build-module/guide/page-control.js +3 -6
  237. package/build-module/guide/page-control.js.map +1 -1
  238. package/build-module/item-group/styles.js +10 -10
  239. package/build-module/item-group/styles.js.map +1 -1
  240. package/build-module/mobile/bottom-sheet/index.native.js +3 -5
  241. package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
  242. package/build-module/mobile/global-styles-context/utils.native.js +2 -1
  243. package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
  244. package/build-module/mobile/image/index.native.js +8 -28
  245. package/build-module/mobile/image/index.native.js.map +1 -1
  246. package/build-module/mobile/picker/index.android.js +3 -3
  247. package/build-module/mobile/picker/index.android.js.map +1 -1
  248. package/build-module/modal/index.js +1 -2
  249. package/build-module/modal/index.js.map +1 -1
  250. package/build-module/navigable-container/container.js +9 -7
  251. package/build-module/navigable-container/container.js.map +1 -1
  252. package/build-module/navigator/navigator-back-button/hook.js +0 -4
  253. package/build-module/navigator/navigator-back-button/hook.js.map +1 -1
  254. package/build-module/navigator/navigator-button/hook.js +0 -4
  255. package/build-module/navigator/navigator-button/hook.js.map +1 -1
  256. package/build-module/notice/list.js +10 -5
  257. package/build-module/notice/list.js.map +1 -1
  258. package/build-module/palette-edit/index.js +1 -0
  259. package/build-module/palette-edit/index.js.map +1 -1
  260. package/build-module/palette-edit/styles.js +10 -10
  261. package/build-module/palette-edit/styles.js.map +1 -1
  262. package/build-module/popover/index.js +100 -98
  263. package/build-module/popover/index.js.map +1 -1
  264. package/build-module/popover/utils.js +164 -0
  265. package/build-module/popover/utils.js.map +1 -0
  266. package/build-module/range-control/index.js +3 -0
  267. package/build-module/range-control/index.js.map +1 -1
  268. package/build-module/range-control/styles/range-control-styles.js +43 -37
  269. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  270. package/build-module/select-control/chevron-down.js +21 -0
  271. package/build-module/select-control/chevron-down.js.map +1 -0
  272. package/build-module/select-control/index.js +7 -7
  273. package/build-module/select-control/index.js.map +1 -1
  274. package/build-module/select-control/styles/select-control-styles.js +24 -13
  275. package/build-module/select-control/styles/select-control-styles.js.map +1 -1
  276. package/build-module/snackbar/list.js +5 -2
  277. package/build-module/snackbar/list.js.map +1 -1
  278. package/build-module/spinner/index.js +2 -0
  279. package/build-module/spinner/index.js.map +1 -1
  280. package/build-module/text/styles.js +7 -7
  281. package/build-module/text/styles.js.map +1 -1
  282. package/build-module/toggle-group-control/toggle-group-control/component.js +14 -7
  283. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  284. package/build-module/toggle-group-control/toggle-group-control/styles.js +5 -4
  285. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  286. package/build-module/toggle-group-control/toggle-group-control-option/component.js +17 -3
  287. package/build-module/toggle-group-control/toggle-group-control-option/component.js.map +1 -1
  288. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +5 -1
  289. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  290. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +16 -6
  291. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  292. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +27 -5
  293. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  294. package/build-module/tools-panel/styles.js +11 -11
  295. package/build-module/tools-panel/styles.js.map +1 -1
  296. package/build-module/ui/context/context-connect.js +1 -2
  297. package/build-module/ui/context/context-connect.js.map +1 -1
  298. package/build-module/unit-control/index.js +2 -2
  299. package/build-module/unit-control/index.js.map +1 -1
  300. package/build-module/utils/colors-values.js +52 -141
  301. package/build-module/utils/colors-values.js.map +1 -1
  302. package/build-module/utils/config-values.js +1 -1
  303. package/build-module/utils/config-values.js.map +1 -1
  304. package/build-module/utils/input/input-control.js +1 -1
  305. package/build-module/utils/input/input-control.js.map +1 -1
  306. package/build-module/utils/rtl.js +6 -4
  307. package/build-module/utils/rtl.js.map +1 -1
  308. package/build-module/utils/strings.js +37 -0
  309. package/build-module/utils/strings.js.map +1 -0
  310. package/build-style/style-rtl.css +176 -1227
  311. package/build-style/style.css +171 -1225
  312. package/build-types/color-palette/index.d.ts +2 -1
  313. package/build-types/color-palette/index.d.ts.map +1 -1
  314. package/build-types/color-picker/styles.d.ts +2 -2
  315. package/build-types/date-time/constants.d.ts +2 -0
  316. package/build-types/date-time/constants.d.ts.map +1 -0
  317. package/build-types/date-time/date/index.d.ts +3 -1
  318. package/build-types/date-time/date/index.d.ts.map +1 -1
  319. package/build-types/date-time/date/styles.d.ts +22 -8
  320. package/build-types/date-time/date/styles.d.ts.map +1 -1
  321. package/build-types/date-time/date/test/index.d.ts +1 -1
  322. package/build-types/date-time/date/test/index.d.ts.map +1 -1
  323. package/build-types/date-time/date-time/index.d.ts.map +1 -1
  324. package/build-types/date-time/time/index.d.ts.map +1 -1
  325. package/build-types/date-time/utils.d.ts +8 -0
  326. package/build-types/date-time/utils.d.ts.map +1 -0
  327. package/build-types/disabled/index.d.ts +35 -28
  328. package/build-types/disabled/index.d.ts.map +1 -1
  329. package/build-types/disabled/stories/index.d.ts +13 -0
  330. package/build-types/disabled/stories/index.d.ts.map +1 -0
  331. package/build-types/disabled/styles/disabled-styles.d.ts +2 -1
  332. package/build-types/disabled/styles/disabled-styles.d.ts.map +1 -1
  333. package/build-types/disabled/test/index.d.ts +2 -0
  334. package/build-types/{flyout/flyout → disabled/test}/index.d.ts.map +1 -1
  335. package/build-types/disabled/types.d.ts +14 -0
  336. package/build-types/disabled/types.d.ts.map +1 -0
  337. package/build-types/dropdown/index.d.ts.map +1 -1
  338. package/build-types/form-token-field/index.d.ts.map +1 -1
  339. package/build-types/form-token-field/stories/index.d.ts +1 -0
  340. package/build-types/form-token-field/stories/index.d.ts.map +1 -1
  341. package/build-types/form-token-field/types.d.ts +7 -0
  342. package/build-types/form-token-field/types.d.ts.map +1 -1
  343. package/build-types/navigator/navigator-back-button/hook.d.ts +0 -3
  344. package/build-types/navigator/navigator-back-button/hook.d.ts.map +1 -1
  345. package/build-types/navigator/navigator-button/hook.d.ts +0 -3
  346. package/build-types/navigator/navigator-button/hook.d.ts.map +1 -1
  347. package/build-types/placeholder/test/index.d.ts +2 -0
  348. package/build-types/{flyout → placeholder/test}/index.d.ts.map +1 -1
  349. package/build-types/popover/index.d.ts +1 -1
  350. package/build-types/popover/index.d.ts.map +1 -1
  351. package/build-types/popover/utils.d.ts +26 -69
  352. package/build-types/popover/utils.d.ts.map +1 -1
  353. package/build-types/range-control/index.d.ts +2 -2
  354. package/build-types/range-control/index.d.ts.map +1 -1
  355. package/build-types/range-control/styles/range-control-styles.d.ts +5 -2
  356. package/build-types/range-control/styles/range-control-styles.d.ts.map +1 -1
  357. package/build-types/range-control/types.d.ts +2 -2
  358. package/build-types/range-control/types.d.ts.map +1 -1
  359. package/build-types/select-control/chevron-down.d.ts +4 -0
  360. package/build-types/select-control/chevron-down.d.ts.map +1 -0
  361. package/build-types/select-control/index.d.ts.map +1 -1
  362. package/build-types/select-control/styles/select-control-styles.d.ts +8 -0
  363. package/build-types/select-control/styles/select-control-styles.d.ts.map +1 -1
  364. package/build-types/spinner/index.d.ts.map +1 -1
  365. package/build-types/toggle-group-control/stories/index.d.ts +25 -0
  366. package/build-types/toggle-group-control/stories/index.d.ts.map +1 -0
  367. package/build-types/toggle-group-control/test/index.d.ts +2 -0
  368. package/build-types/toggle-group-control/test/index.d.ts.map +1 -0
  369. package/build-types/toggle-group-control/toggle-group-control/component.d.ts +6 -3
  370. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  371. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +1 -0
  372. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  373. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +6 -7
  374. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map +1 -1
  375. package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -1
  376. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +4 -0
  377. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -1
  378. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +11 -9
  379. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts.map +1 -1
  380. package/build-types/toggle-group-control/types.d.ts +23 -10
  381. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  382. package/build-types/ui/context/context-connect.d.ts +3 -0
  383. package/build-types/ui/context/context-connect.d.ts.map +1 -1
  384. package/build-types/ui/form-group/use-form-group.d.ts +2 -2
  385. package/build-types/unit-control/index.d.ts +2 -1
  386. package/build-types/unit-control/index.d.ts.map +1 -1
  387. package/build-types/unit-control/types.d.ts +5 -1
  388. package/build-types/unit-control/types.d.ts.map +1 -1
  389. package/build-types/utils/colors-values.d.ts +18 -97
  390. package/build-types/utils/colors-values.d.ts.map +1 -1
  391. package/build-types/utils/rtl.d.ts.map +1 -1
  392. package/build-types/utils/strings.d.ts +2 -0
  393. package/build-types/utils/strings.d.ts.map +1 -0
  394. package/package.json +22 -21
  395. package/src/alignment-matrix-control/index.js +1 -1
  396. package/src/alignment-matrix-control/stories/index.js +49 -24
  397. package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +1 -3
  398. package/src/angle-picker-control/index.js +7 -1
  399. package/src/angle-picker-control/stories/index.js +8 -5
  400. package/src/angle-picker-control/styles/angle-picker-control-styles.js +12 -3
  401. package/src/autocomplete/index.js +9 -18
  402. package/src/base-control/styles/base-control-styles.ts +1 -1
  403. package/src/base-field/styles.js +1 -1
  404. package/src/base-field/test/__snapshots__/index.js.snap +2 -2
  405. package/src/box-control/styles/box-control-visualizer-styles.js +0 -1
  406. package/src/box-control/test/index.js +8 -8
  407. package/src/button/test/index.js +188 -146
  408. package/src/color-list-picker/index.js +15 -3
  409. package/src/color-list-picker/style.scss +11 -0
  410. package/src/color-palette/index.js +32 -16
  411. package/src/color-palette/index.native.js +10 -6
  412. package/src/color-palette/stories/index.js +1 -1
  413. package/src/color-palette/test/__snapshots__/index.js.snap +17 -3
  414. package/src/combobox-control/index.js +6 -5
  415. package/src/combobox-control/stories/index.js +9 -3
  416. package/src/combobox-control/style.scss +0 -1
  417. package/src/confirm-dialog/test/index.js +85 -62
  418. package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/constants.js +0 -0
  419. package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/control-points.js +54 -50
  420. package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/index.js +0 -3
  421. package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/test/utils.js +0 -0
  422. package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/utils.js +0 -0
  423. package/src/custom-gradient-picker/index.js +18 -3
  424. package/src/custom-gradient-picker/stories/index.js +4 -3
  425. package/src/custom-gradient-picker/style.scss +30 -27
  426. package/src/custom-select-control/README.md +10 -0
  427. package/src/custom-select-control/index.js +22 -16
  428. package/src/custom-select-control/stories/index.js +1 -1
  429. package/src/custom-select-control/style.scss +0 -12
  430. package/src/custom-select-control/styles.ts +28 -0
  431. package/src/custom-select-control/test/index.js +4 -1
  432. package/src/date-time/constants.ts +1 -0
  433. package/src/date-time/date/index.tsx +289 -184
  434. package/src/date-time/date/styles.ts +86 -27
  435. package/src/date-time/date/test/index.tsx +18 -28
  436. package/src/date-time/date-time/index.tsx +3 -2
  437. package/src/date-time/time/index.tsx +23 -19
  438. package/src/date-time/utils.ts +17 -0
  439. package/src/dimension-control/index.js +1 -5
  440. package/src/disabled/index.tsx +80 -0
  441. package/src/disabled/stories/index.tsx +87 -0
  442. package/src/disabled/styles/{disabled-styles.js → disabled-styles.tsx} +0 -0
  443. package/src/disabled/test/index.tsx +174 -0
  444. package/src/disabled/types.ts +13 -0
  445. package/src/dropdown/index.js +3 -5
  446. package/src/dropdown-menu/stories/index.js +13 -2
  447. package/src/duotone-picker/custom-duotone-bar.js +1 -1
  448. package/src/duotone-picker/duotone-picker.js +34 -26
  449. package/src/duotone-picker/duotone-swatch.js +12 -5
  450. package/src/duotone-picker/stories/duotone-picker.js +66 -0
  451. package/src/duotone-picker/stories/duotone-swatch.js +32 -0
  452. package/src/focal-point-picker/index.js +10 -5
  453. package/src/focal-point-picker/styles/focal-point-style.js +0 -1
  454. package/src/focal-point-picker/test/index.js +78 -45
  455. package/src/font-size-picker/index.js +161 -144
  456. package/src/font-size-picker/stories/index.js +1 -0
  457. package/src/font-size-picker/style.scss +8 -5
  458. package/src/font-size-picker/test/index.js +13 -6
  459. package/src/font-size-picker/test/{util.js → utils.js} +77 -1
  460. package/src/font-size-picker/utils.js +38 -23
  461. package/src/form-token-field/README.md +1 -0
  462. package/src/form-token-field/index.tsx +24 -10
  463. package/src/form-token-field/stories/index.tsx +8 -0
  464. package/src/form-token-field/test/index.js +31 -0
  465. package/src/form-token-field/types.ts +7 -0
  466. package/src/gradient-picker/index.js +22 -7
  467. package/src/gradient-picker/stories/index.js +56 -81
  468. package/src/guide/index.js +3 -1
  469. package/src/guide/page-control.js +1 -6
  470. package/src/guide/stories/index.js +12 -11
  471. package/src/guide/test/index.js +54 -37
  472. package/src/guide/test/page-control.js +14 -17
  473. package/src/higher-order/with-notices/test/index.js +4 -2
  474. package/src/higher-order/with-spoken-messages/test/index.js +1 -1
  475. package/src/item-group/styles.ts +3 -3
  476. package/src/menu-group/test/index.js +18 -7
  477. package/src/mobile/bottom-sheet/index.native.js +2 -4
  478. package/src/mobile/global-styles-context/utils.native.js +2 -1
  479. package/src/mobile/image/index.native.js +9 -30
  480. package/src/mobile/picker/index.android.js +10 -4
  481. package/src/mobile/picker/styles.native.scss +4 -4
  482. package/src/modal/index.js +1 -2
  483. package/src/modal/test/index.js +11 -9
  484. package/src/navigable-container/container.js +12 -18
  485. package/src/navigable-container/test/menu.js +14 -11
  486. package/src/navigator/navigator-back-button/hook.ts +0 -3
  487. package/src/navigator/navigator-button/hook.ts +0 -3
  488. package/src/notice/list.js +12 -10
  489. package/src/palette-edit/index.js +1 -0
  490. package/src/palette-edit/styles.js +6 -5
  491. package/src/placeholder/README.md +1 -1
  492. package/src/placeholder/style.scss +65 -20
  493. package/src/placeholder/test/index.tsx +174 -0
  494. package/src/popover/index.js +133 -112
  495. package/src/popover/stories/index.js +17 -3
  496. package/src/popover/test/__snapshots__/index.js.snap +6 -6
  497. package/src/popover/test/index.js +129 -36
  498. package/src/popover/utils.js +107 -0
  499. package/src/range-control/index.tsx +3 -0
  500. package/src/range-control/styles/range-control-styles.ts +9 -4
  501. package/src/range-control/types.ts +5 -2
  502. package/src/select-control/chevron-down.tsx +25 -0
  503. package/src/select-control/index.tsx +6 -9
  504. package/src/select-control/styles/select-control-styles.ts +23 -14
  505. package/src/slot-fill/test/slot.js +5 -5
  506. package/src/snackbar/list.js +3 -2
  507. package/src/spinner/index.tsx +2 -0
  508. package/src/style.scss +0 -2
  509. package/src/text/styles.js +1 -1
  510. package/src/text/test/index.tsx +1 -1
  511. package/src/toggle-group-control/stories/index.tsx +127 -0
  512. package/src/toggle-group-control/test/__snapshots__/{index.js.snap → index.tsx.snap} +28 -22
  513. package/src/toggle-group-control/test/{index.js → index.tsx} +2 -4
  514. package/src/toggle-group-control/toggle-group-control/README.md +2 -0
  515. package/src/toggle-group-control/toggle-group-control/component.tsx +18 -9
  516. package/src/toggle-group-control/toggle-group-control/styles.ts +9 -6
  517. package/src/toggle-group-control/toggle-group-control-option/component.tsx +19 -3
  518. package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +3 -0
  519. package/src/toggle-group-control/toggle-group-control-option-base/styles.ts +18 -0
  520. package/src/toggle-group-control/toggle-group-control-option-icon/README.md +6 -8
  521. package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +30 -7
  522. package/src/toggle-group-control/types.ts +74 -59
  523. package/src/toolbar/test/index.js +4 -4
  524. package/src/toolbar-group/test/index.js +9 -15
  525. package/src/tools-panel/styles.ts +2 -2
  526. package/src/tools-panel/test/index.js +3 -2
  527. package/src/tooltip/test/index.js +188 -172
  528. package/src/ui/context/context-connect.ts +3 -2
  529. package/src/unit-control/index.tsx +2 -2
  530. package/src/unit-control/types.ts +10 -1
  531. package/src/utils/colors-values.js +42 -137
  532. package/src/utils/config-values.js +1 -1
  533. package/src/utils/input/input-control.js +6 -6
  534. package/src/utils/rtl.js +6 -2
  535. package/src/utils/strings.ts +72 -0
  536. package/src/utils/test/strings.js +15 -0
  537. package/tsconfig.json +0 -1
  538. package/tsconfig.tsbuildinfo +1 -1
  539. package/build/custom-gradient-bar/constants.js.map +0 -1
  540. package/build/custom-gradient-bar/control-points.js.map +0 -1
  541. package/build/custom-gradient-bar/index.js.map +0 -1
  542. package/build/custom-gradient-bar/utils.js.map +0 -1
  543. package/build/date-time/date/utils.js +0 -34
  544. package/build/date-time/date/utils.js.map +0 -1
  545. package/build/swatch/index.js +0 -41
  546. package/build/swatch/index.js.map +0 -1
  547. package/build-module/custom-gradient-bar/constants.js.map +0 -1
  548. package/build-module/custom-gradient-bar/control-points.js.map +0 -1
  549. package/build-module/custom-gradient-bar/index.js.map +0 -1
  550. package/build-module/custom-gradient-bar/utils.js.map +0 -1
  551. package/build-module/date-time/date/utils.js +0 -22
  552. package/build-module/date-time/date/utils.js.map +0 -1
  553. package/build-module/swatch/index.js +0 -30
  554. package/build-module/swatch/index.js.map +0 -1
  555. package/build-types/color-picker/color-display.d.ts +0 -13
  556. package/build-types/color-picker/color-display.d.ts.map +0 -1
  557. package/build-types/date-time/date/test/utils.d.ts +0 -2
  558. package/build-types/date-time/date/test/utils.d.ts.map +0 -1
  559. package/build-types/date-time/date/utils.d.ts +0 -15
  560. package/build-types/date-time/date/utils.d.ts.map +0 -1
  561. package/build-types/flyout/context.d.ts +0 -6
  562. package/build-types/flyout/context.d.ts.map +0 -1
  563. package/build-types/flyout/flyout/component.d.ts +0 -21
  564. package/build-types/flyout/flyout/component.d.ts.map +0 -1
  565. package/build-types/flyout/flyout/hook.d.ts +0 -270
  566. package/build-types/flyout/flyout/hook.d.ts.map +0 -1
  567. package/build-types/flyout/flyout/index.d.ts +0 -3
  568. package/build-types/flyout/flyout-content/component.d.ts +0 -3
  569. package/build-types/flyout/flyout-content/component.d.ts.map +0 -1
  570. package/build-types/flyout/flyout-content/index.d.ts +0 -2
  571. package/build-types/flyout/flyout-content/index.d.ts.map +0 -1
  572. package/build-types/flyout/index.d.ts +0 -2
  573. package/build-types/flyout/styles.d.ts +0 -22
  574. package/build-types/flyout/styles.d.ts.map +0 -1
  575. package/build-types/flyout/types.d.ts +0 -80
  576. package/build-types/flyout/types.d.ts.map +0 -1
  577. package/build-types/flyout/utils.d.ts +0 -8
  578. package/build-types/flyout/utils.d.ts.map +0 -1
  579. package/build-types/swatch/index.d.ts +0 -5
  580. package/build-types/swatch/index.d.ts.map +0 -1
  581. package/build-types/swatch/types.d.ts +0 -11
  582. package/build-types/swatch/types.d.ts.map +0 -1
  583. package/build-types/utils/hooks/use-combined-ref.d.ts +0 -8
  584. package/build-types/utils/hooks/use-combined-ref.d.ts.map +0 -1
  585. package/src/date-time/date/datepicker.scss +0 -863
  586. package/src/date-time/date/style.scss +0 -85
  587. package/src/date-time/date/test/utils.ts +0 -32
  588. package/src/date-time/date/utils.ts +0 -20
  589. package/src/date-time/style.scss +0 -1
  590. package/src/disabled/index.js +0 -55
  591. package/src/disabled/stories/index.js +0 -61
  592. package/src/disabled/test/index.js +0 -240
  593. package/src/menu-group/test/__snapshots__/index.js.snap +0 -23
  594. package/src/placeholder/test/index.js +0 -163
  595. package/src/swatch/index.tsx +0 -22
  596. package/src/swatch/style.scss +0 -21
  597. package/src/swatch/types.ts +0 -11
  598. package/src/toggle-group-control/stories/index.js +0 -203
  599. package/src/tools-panel/test/__snapshots__/index.js.snap +0 -210
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.js"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","GradientColorPickerDropdown","isRenderedInSidebar","className","props","popoverProps","placement","offset","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n} ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\tplacement: 'bottom',\n\t\t\toffset: 8,\n\t\t} ),\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\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\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\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{ ! disableRemove && controlPoints.length > 2 && (\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t} );\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\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={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}
@@ -156,7 +156,6 @@ function CustomGradientBar(_ref) {
156
156
  className: "components-custom-gradient-picker__markers-container"
157
157
  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _element.createElement)(_controlPoints.default.InsertPoint, {
158
158
  __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
159
- gradientPickerDomRef: gradientMarkersContainerDomRef,
160
159
  disableAlpha: disableAlpha,
161
160
  insertPosition: gradientBarState.insertPosition,
162
161
  value: controlPoints,
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.js"],"names":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientMarkersContainerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientMarkersContainerDomRef.current\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tsome( controlPoints, ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ gradientMarkersContainerDomRef }\n\t\t\t\tclassName=\"components-custom-gradient-picker__markers-container\"\n\t\t\t>\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ControlPoints\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientMarkersContainerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.js"],"names":["clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","MINIMUM_DISTANCE_BETWEEN_POINTS","initialPosition","position","minPosition","maxPosition","some","index","abs","addControlPoint","points","color","nextIndex","findIndex","point","newPoint","newPoints","slice","splice","removeControlPoint","filter","pointIndex","updateControlPoint","newValue","updateControlPointPosition","updateControlPointColor","newColor","updateControlPointColorByPosition","getHorizontalRelativeGradientPosition","mouseXCoordinate","containerElement","x","width","getBoundingClientRect","absolutePositionValue","round"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\n\n/**\n * Control point for the gradient bar.\n *\n * @typedef {Object} ControlPoint\n * @property {string} color Color of the control point.\n * @property {number} position Integer position of the control point as a percentage.\n */\n\n/**\n * Color as parsed from the gradient by gradient-parser.\n *\n * @typedef {Object} Color\n * @property {string} r Red component.\n * @property {string} g Green component.\n * @property {string} b Green component.\n * @property {string} [a] Optional alpha component.\n */\n\n/**\n * Clamps a number between 0 and 100.\n *\n * @param {number} value Value to clamp.\n *\n * @return {number} Value clamped between 0 and 100.\n */\nexport function clampPercent( value ) {\n\treturn Math.max( 0, Math.min( 100, value ) );\n}\n\n/**\n * Check if a control point is overlapping with another.\n *\n * @param {ControlPoint[]} value Array of control points.\n * @param {number} initialIndex Index of the position to test.\n * @param {number} newPosition New position of the control point.\n * @param {number} minDistance Distance considered to be overlapping.\n *\n * @return {boolean} True if the point is overlapping.\n */\nexport function isOverlapping(\n\tvalue,\n\tinitialIndex,\n\tnewPosition,\n\tminDistance = MINIMUM_DISTANCE_BETWEEN_POINTS\n) {\n\tconst initialPosition = value[ initialIndex ].position;\n\tconst minPosition = Math.min( initialPosition, newPosition );\n\tconst maxPosition = Math.max( initialPosition, newPosition );\n\n\treturn value.some( ( { position }, index ) => {\n\t\treturn (\n\t\t\tindex !== initialIndex &&\n\t\t\t( Math.abs( position - newPosition ) < minDistance ||\n\t\t\t\t( minPosition < position && position < maxPosition ) )\n\t\t);\n\t} );\n}\n\n/**\n * Adds a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points Array of control points.\n * @param {number} position Position to insert the new point.\n * @param {Color} color Color to update the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function addControlPoint( points, position, color ) {\n\tconst nextIndex = points.findIndex(\n\t\t( point ) => point.position > position\n\t);\n\tconst newPoint = { color, position };\n\tconst newPoints = points.slice();\n\tnewPoints.splice( nextIndex - 1, 0, newPoint );\n\treturn newPoints;\n}\n\n/**\n * Removes a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points Array of control points.\n * @param {number} index Index to remove.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function removeControlPoint( points, index ) {\n\treturn points.filter( ( point, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n\n/**\n * Updates a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points Array of control points.\n * @param {number} index Index to update.\n * @param {ControlPoint[]} newPoint New control point to replace the index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPoint( points, index, newPoint ) {\n\tconst newValue = points.slice();\n\tnewValue[ index ] = newPoint;\n\treturn newValue;\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points Array of control points.\n * @param {number} index Index to update.\n * @param {number} newPosition Position to move the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPointPosition( points, index, newPosition ) {\n\tif ( isOverlapping( points, index, newPosition ) ) {\n\t\treturn points;\n\t}\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tposition: newPosition,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points Array of control points.\n * @param {number} index Index to update.\n * @param {Color} newColor Color to update the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPointColor( points, index, newColor ) {\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tcolor: newColor,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points Array of control points.\n * @param {number} position Position of the color stop.\n * @param {string} newColor Color to update the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPointColorByPosition(\n\tpoints,\n\tposition,\n\tnewColor\n) {\n\tconst index = points.findIndex( ( point ) => point.position === position );\n\treturn updateControlPointColor( points, index, newColor );\n}\n\n/**\n * Gets the horizontal coordinate when dragging a control point with the mouse.\n *\n * @param {number} mouseXCoordinate Horizontal coordinate of the mouse position.\n * @param {Element} containerElement Container for the gradient picker.\n *\n * @return {number} Whole number percentage from the left.\n */\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate,\n\tcontainerElement\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue = mouseXCoordinate - x;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue * 100 ) / width )\n\t);\n}\n"]}
@@ -9,16 +9,20 @@ exports.default = CustomGradientPicker;
9
9
 
10
10
  var _element = require("@wordpress/element");
11
11
 
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+
12
14
  var _i18n = require("@wordpress/i18n");
13
15
 
14
16
  var _anglePickerControl = _interopRequireDefault(require("../angle-picker-control"));
15
17
 
16
- var _customGradientBar = _interopRequireDefault(require("../custom-gradient-bar"));
18
+ var _gradientBar = _interopRequireDefault(require("./gradient-bar"));
17
19
 
18
20
  var _flex = require("../flex");
19
21
 
20
22
  var _selectControl = _interopRequireDefault(require("../select-control"));
21
23
 
24
+ var _vStack = require("../v-stack");
25
+
22
26
  var _utils = require("./utils");
23
27
 
24
28
  var _serializer = require("./serializer");
@@ -27,6 +31,10 @@ var _constants = require("./constants");
27
31
 
28
32
  var _customGradientPickerStyles = require("./styles/custom-gradient-picker-styles");
29
33
 
34
+ /**
35
+ * External dependencies
36
+ */
37
+
30
38
  /**
31
39
  * WordPress dependencies
32
40
  */
@@ -54,6 +62,7 @@ const GradientAnglePicker = _ref => {
54
62
  };
55
63
 
56
64
  return (0, _element.createElement)(_anglePickerControl.default, {
65
+ __nextHasNoMarginBottom: true,
57
66
  onChange: onAngleChange,
58
67
  labelPosition: "top",
59
68
  value: hasGradient ? angle : ''
@@ -100,6 +109,7 @@ const GradientTypePicker = _ref2 => {
100
109
  };
101
110
 
102
111
  return (0, _element.createElement)(_selectControl.default, {
112
+ __nextHasNoMarginBottom: true,
103
113
  className: "components-custom-gradient-picker__type-picker",
104
114
  label: (0, _i18n.__)('Type'),
105
115
  labelPosition: "top",
@@ -112,6 +122,8 @@ const GradientTypePicker = _ref2 => {
112
122
 
113
123
  function CustomGradientPicker(_ref3) {
114
124
  let {
125
+ /** Start opting into the new margin-free styles that will become the default in a future version. */
126
+ __nextHasNoMargin = false,
115
127
  value,
116
128
  onChange,
117
129
  __experimentalIsRenderedInSidebar
@@ -128,9 +140,12 @@ function CustomGradientPicker(_ref3) {
128
140
  color: (0, _utils.getStopCssColor)(colorStop),
129
141
  position: parseInt(colorStop.length.value)
130
142
  }));
131
- return (0, _element.createElement)("div", {
132
- className: "components-custom-gradient-picker"
133
- }, (0, _element.createElement)(_customGradientBar.default, {
143
+ return (0, _element.createElement)(_vStack.VStack, {
144
+ spacing: 5,
145
+ className: (0, _classnames.default)('components-custom-gradient-picker', {
146
+ 'is-next-has-no-margin': __nextHasNoMargin
147
+ })
148
+ }, (0, _element.createElement)(_gradientBar.default, {
134
149
  __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
135
150
  background: background,
136
151
  hasGradient: hasGradient,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__nextHasNoMargin","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 5 }\n\t\t\tclassName={ classnames( 'components-custom-gradient-picker', {\n\t\t\t\t'is-next-has-no-margin': __nextHasNoMargin,\n\t\t\t} ) }\n\t\t>\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n"]}
@@ -19,11 +19,15 @@ var _icons = require("@wordpress/icons");
19
19
 
20
20
  var _i18n = require("@wordpress/i18n");
21
21
 
22
+ var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
23
+
22
24
  var _ = require("../");
23
25
 
24
26
  var _selectControlStyles = require("../select-control/styles/select-control-styles");
25
27
 
26
- var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
28
+ var _chevronDown = _interopRequireDefault(require("../select-control/chevron-down"));
29
+
30
+ var _styles = require("./styles");
27
31
 
28
32
  var _baseControlStyles = require("../base-control/styles/base-control-styles");
29
33
 
@@ -116,6 +120,14 @@ function CustomSelectControl(_ref3) {
116
120
  });
117
121
  const [isFocused, setIsFocused] = (0, _element.useState)(false);
118
122
 
123
+ if (!__nextUnconstrainedWidth) {
124
+ (0, _deprecated.default)('Constrained width styles for wp.components.CustomSelectControl', {
125
+ since: '6.1',
126
+ version: '6.4',
127
+ hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version'
128
+ });
129
+ }
130
+
119
131
  function getDescribedBy() {
120
132
  if (describedBy) {
121
133
  return describedBy;
@@ -152,10 +164,14 @@ function CustomSelectControl(_ref3) {
152
164
  /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
153
165
  (0, _element.createElement)(_baseControlStyles.StyledLabel, getLabelProps({
154
166
  className: 'components-custom-select-control__label'
155
- }), label), (0, _element.createElement)(_inputBase.default, {
167
+ }), label), (0, _element.createElement)(_styles.InputBaseWithBackCompatMinWidth, {
168
+ __next36pxDefaultSize: __next36pxDefaultSize,
169
+ __nextUnconstrainedWidth: __nextUnconstrainedWidth,
156
170
  isFocused: isOpen || isFocused,
157
171
  __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
158
- labelPosition: __nextUnconstrainedWidth ? undefined : 'top'
172
+ labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
173
+ size: size,
174
+ suffix: (0, _element.createElement)(_chevronDown.default, null)
159
175
  }, (0, _element.createElement)(_selectControlStyles.Select, (0, _extends2.default)({
160
176
  as: "button",
161
177
  onFocus: () => setIsFocused(true),
@@ -166,15 +182,9 @@ function CustomSelectControl(_ref3) {
166
182
  // This is needed because some speech recognition software don't support `aria-labelledby`.
167
183
  'aria-label': label,
168
184
  'aria-labelledby': undefined,
169
- className: (0, _classnames.default)('components-custom-select-control__button', {
170
- 'is-next-unconstrained-width': __nextUnconstrainedWidth
171
- }),
185
+ className: 'components-custom-select-control__button',
172
186
  describedBy: getDescribedBy()
173
- })), itemToString(selectedItem), (0, _element.createElement)(_icons.Icon, {
174
- icon: _icons.chevronDown,
175
- className: "components-custom-select-control__button-icon",
176
- size: 18
177
- }))), (0, _element.createElement)("ul", (0, _extends2.default)({}, menuProps, {
187
+ })), itemToString(selectedItem))), (0, _element.createElement)("ul", (0, _extends2.default)({}, menuProps, {
178
188
  onKeyDown: onKeyDownHandler
179
189
  }), isOpen && items.map((item, index) => // eslint-disable-next-line react/jsx-key
180
190
  (0, _element.createElement)("li", getItemProps({
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next36pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","chevronDown","map","index","key","__experimentalHint","style","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check, chevronDown } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport InputBase from '../input-control/input-base';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\nexport default function CustomSelectControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next36pxDefaultSize = false,\n\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t__nextUnconstrainedWidth = false,\n\tclassName,\n\thideLabelFromVision,\n\tlabel,\n\tdescribedBy,\n\toptions: items,\n\tonChange: onSelectedItemChange,\n\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\tsize = 'default',\n\tvalue: _selectedItem,\n} ) {\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBase\n\t\t\t\tisFocused={ isOpen || isFocused }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\t__nextUnconstrainedWidth ? undefined : 'auto'\n\t\t\t\t}\n\t\t\t\tlabelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-custom-select-control__button',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-next-unconstrained-width':\n\t\t\t\t\t\t\t\t\t__nextUnconstrainedWidth,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\tclassName=\"components-custom-select-control__button-icon\"\n\t\t\t\t\t\tsize={ 18 }\n\t\t\t\t\t/>\n\t\t\t\t</SelectControlSelect>\n\t\t\t</InputBase>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-36px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next36pxDefaultSize,\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\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next36pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","since","version","hint","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","map","index","key","__experimentalHint","style","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { InputBaseWithBackCompatMinWidth } from './styles';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\nexport default function CustomSelectControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next36pxDefaultSize = false,\n\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t__nextUnconstrainedWidth = false,\n\tclassName,\n\thideLabelFromVision,\n\tlabel,\n\tdescribedBy,\n\toptions: items,\n\tonChange: onSelectedItemChange,\n\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\tsize = 'default',\n\tvalue: _selectedItem,\n} ) {\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tif ( ! __nextUnconstrainedWidth ) {\n\t\tdeprecated(\n\t\t\t'Constrained width styles for wp.components.CustomSelectControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBaseWithBackCompatMinWidth\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t__nextUnconstrainedWidth={ __nextUnconstrainedWidth }\n\t\t\t\tisFocused={ isOpen || isFocused }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\t__nextUnconstrainedWidth ? undefined : 'auto'\n\t\t\t\t}\n\t\t\t\tlabelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t</InputBaseWithBackCompatMinWidth>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-36px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next36pxDefaultSize,\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\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n"]}
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.InputBaseWithBackCompatMinWidth = void 0;
9
+
10
+ var _base = _interopRequireDefault(require("@emotion/styled/base"));
11
+
12
+ var _react = require("@emotion/react");
13
+
14
+ var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
15
+
16
+ var _inputControlStyles = require("../input-control/styles/input-control-styles");
17
+
18
+ /**
19
+ * External dependencies
20
+ */
21
+
22
+ /**
23
+ * Internal dependencies
24
+ */
25
+ const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/(0, _react.css)(_inputControlStyles.Container, "{min-width:130px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:backCompatMinWidth;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQk8iLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jdXN0b20tc2VsZWN0LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRCYXNlIGZyb20gJy4uL2lucHV0LWNvbnRyb2wvaW5wdXQtYmFzZSc7XG5pbXBvcnQgeyBDb250YWluZXIgYXMgSW5wdXRDb250cm9sQ29udGFpbmVyIH0gZnJvbSAnLi4vaW5wdXQtY29udHJvbC9zdHlsZXMvaW5wdXQtY29udHJvbC1zdHlsZXMnO1xuXG50eXBlIEJhY2tDb21wYXRNaW5XaWR0aFByb3BzID0ge1xuXHRfX25leHRVbmNvbnN0cmFpbmVkV2lkdGg6IGJvb2xlYW47XG59O1xuXG5jb25zdCBiYWNrQ29tcGF0TWluV2lkdGggPSAoIHByb3BzOiBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyApID0+XG5cdCEgcHJvcHMuX19uZXh0VW5jb25zdHJhaW5lZFdpZHRoXG5cdFx0PyBjc3NgXG5cdFx0XHRcdCR7IElucHV0Q29udHJvbENvbnRhaW5lciB9IHtcblx0XHRcdFx0XHRtaW4td2lkdGg6IDEzMHB4O1xuXHRcdFx0XHR9XG5cdFx0ICBgXG5cdFx0OiAnJztcblxuZXhwb3J0IGNvbnN0IElucHV0QmFzZVdpdGhCYWNrQ29tcGF0TWluV2lkdGggPSBzdHlsZWQoIElucHV0QmFzZSApYFxuXHQkeyBiYWNrQ29tcGF0TWluV2lkdGggfVxuYDtcbiJdfQ== */") : '';
26
+
27
+ const InputBaseWithBackCompatMinWidth = ( /*#__PURE__*/0, _base.default)(_inputBase.default, process.env.NODE_ENV === "production" ? {
28
+ target: "eswuck60"
29
+ } : {
30
+ target: "eswuck60",
31
+ label: "InputBaseWithBackCompatMinWidth"
32
+ })(backCompatMinWidth, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmtFIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0QmFzZSBmcm9tICcuLi9pbnB1dC1jb250cm9sL2lucHV0LWJhc2UnO1xuaW1wb3J0IHsgQ29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lciB9IGZyb20gJy4uL2lucHV0LWNvbnRyb2wvc3R5bGVzL2lucHV0LWNvbnRyb2wtc3R5bGVzJztcblxudHlwZSBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyA9IHtcblx0X19uZXh0VW5jb25zdHJhaW5lZFdpZHRoOiBib29sZWFuO1xufTtcblxuY29uc3QgYmFja0NvbXBhdE1pbldpZHRoID0gKCBwcm9wczogQmFja0NvbXBhdE1pbldpZHRoUHJvcHMgKSA9PlxuXHQhIHByb3BzLl9fbmV4dFVuY29uc3RyYWluZWRXaWR0aFxuXHRcdD8gY3NzYFxuXHRcdFx0XHQkeyBJbnB1dENvbnRyb2xDb250YWluZXIgfSB7XG5cdFx0XHRcdFx0bWluLXdpZHRoOiAxMzBweDtcblx0XHRcdFx0fVxuXHRcdCAgYFxuXHRcdDogJyc7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEJhc2VXaXRoQmFja0NvbXBhdE1pbldpZHRoID0gc3R5bGVkKCBJbnB1dEJhc2UgKWBcblx0JHsgYmFja0NvbXBhdE1pbldpZHRoIH1cbmA7XG4iXX0= */"));
33
+ exports.InputBaseWithBackCompatMinWidth = InputBaseWithBackCompatMinWidth;
34
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/custom-select-control/styles.ts"],"names":["backCompatMinWidth","props","__nextUnconstrainedWidth","css","InputControlContainer","InputBaseWithBackCompatMinWidth","InputBase"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAQA,MAAMA,kBAAkB,GAAKC,KAAF,IAC1B,CAAEA,KAAK,CAACC,wBAAR,oBACGC,UADH,EAEMC,6BAFN,o5CAMG,EAPJ;;AASO,MAAMC,+BAA+B,GAAG,iCAAQC,kBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACxCN,kBADwC,qzCAArC","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputBase from '../input-control/input-base';\nimport { Container as InputControlContainer } from '../input-control/styles/input-control-styles';\n\ntype BackCompatMinWidthProps = {\n\t__nextUnconstrainedWidth: boolean;\n};\n\nconst backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>\n\t! props.__nextUnconstrainedWidth\n\t\t? css`\n\t\t\t\t${ InputControlContainer } {\n\t\t\t\t\tmin-width: 130px;\n\t\t\t\t}\n\t\t `\n\t\t: '';\n\nexport const InputBaseWithBackCompatMinWidth = styled( InputBase )`\n\t${ backCompatMinWidth }\n`;\n"]}
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TIMEZONELESS_FORMAT = void 0;
7
+ const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";
8
+ exports.TIMEZONELESS_FORMAT = TIMEZONELESS_FORMAT;
9
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/date-time/constants.ts"],"names":["TIMEZONELESS_FORMAT"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG,uBAA5B","sourcesContent":["export const TIMEZONELESS_FORMAT = \"yyyy-MM-dd'T'HH:mm:ss\";\n"]}