@wordpress/components 22.0.0 → 23.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (796) hide show
  1. package/CHANGELOG.md +99 -0
  2. package/build/alignment-matrix-control/cell.js.map +1 -1
  3. package/build/alignment-matrix-control/icon.js +4 -2
  4. package/build/alignment-matrix-control/icon.js.map +1 -1
  5. package/build/alignment-matrix-control/index.js +25 -1
  6. package/build/alignment-matrix-control/index.js.map +1 -1
  7. package/build/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js +13 -13
  8. package/build/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js.map +1 -1
  9. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js +16 -16
  10. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  11. package/build/alignment-matrix-control/types.js +6 -0
  12. package/build/alignment-matrix-control/types.js.map +1 -0
  13. package/build/alignment-matrix-control/utils.js +9 -8
  14. package/build/alignment-matrix-control/utils.js.map +1 -1
  15. package/build/angle-picker-control/index.js +3 -1
  16. package/build/angle-picker-control/index.js.map +1 -1
  17. package/build/angle-picker-control/styles/angle-picker-control-styles.js +9 -9
  18. package/build/angle-picker-control/styles/angle-picker-control-styles.js.map +1 -1
  19. package/build/autocomplete/index.js +45 -12
  20. package/build/autocomplete/index.js.map +1 -1
  21. package/build/base-control/hooks.js +52 -0
  22. package/build/base-control/hooks.js.map +1 -0
  23. package/build/base-control/index.js +24 -7
  24. package/build/base-control/index.js.map +1 -1
  25. package/build/base-field/hook.js +0 -14
  26. package/build/base-field/hook.js.map +1 -1
  27. package/build/base-field/index.js.map +1 -1
  28. package/build/base-field/styles.js +5 -5
  29. package/build/base-field/styles.js.map +1 -1
  30. package/build/base-field/types.js +6 -0
  31. package/build/base-field/types.js.map +1 -0
  32. package/build/border-box-control/border-box-control/component.js +1 -1
  33. package/build/border-box-control/border-box-control/component.js.map +1 -1
  34. package/build/border-box-control/border-box-control/hook.js +13 -1
  35. package/build/border-box-control/border-box-control/hook.js.map +1 -1
  36. package/build/border-box-control/border-box-control-split-controls/hook.js +11 -1
  37. package/build/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  38. package/build/border-control/border-control/component.js +3 -2
  39. package/build/border-control/border-control/component.js.map +1 -1
  40. package/build/border-control/border-control/hook.js +11 -1
  41. package/build/border-control/border-control/hook.js.map +1 -1
  42. package/build/border-control/border-control-dropdown/component.js +1 -1
  43. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  44. package/build/border-control/border-control-dropdown/hook.js +10 -2
  45. package/build/border-control/border-control-dropdown/hook.js.map +1 -1
  46. package/build/border-control/styles.js +16 -16
  47. package/build/border-control/styles.js.map +1 -1
  48. package/build/box-control/linked-button.js +3 -4
  49. package/build/box-control/linked-button.js.map +1 -1
  50. package/build/color-palette/index.js +3 -8
  51. package/build/color-palette/index.js.map +1 -1
  52. package/build/color-picker/input-with-slider.js +18 -3
  53. package/build/color-picker/input-with-slider.js.map +1 -1
  54. package/build/color-picker/styles.js +8 -8
  55. package/build/color-picker/styles.js.map +1 -1
  56. package/build/custom-select-control/index.js +19 -4
  57. package/build/custom-select-control/index.js.map +1 -1
  58. package/build/dashicon/index.js +18 -6
  59. package/build/dashicon/index.js.map +1 -1
  60. package/build/date-time/date-time/index.js +4 -4
  61. package/build/date-time/date-time/index.js.map +1 -1
  62. package/build/draggable/index.js +58 -38
  63. package/build/draggable/index.js.map +1 -1
  64. package/build/draggable/types.js +6 -0
  65. package/build/draggable/types.js.map +1 -0
  66. package/build/duotone-picker/duotone-picker.js +2 -2
  67. package/build/duotone-picker/duotone-picker.js.map +1 -1
  68. package/build/flex/flex/hook.js +2 -3
  69. package/build/flex/flex/hook.js.map +1 -1
  70. package/build/focal-point-picker/focal-point.js +2 -12
  71. package/build/focal-point-picker/focal-point.js.map +1 -1
  72. package/build/focal-point-picker/styles/focal-point-style.js +11 -51
  73. package/build/focal-point-picker/styles/focal-point-style.js.map +1 -1
  74. package/build/font-size-picker/constants.js +41 -0
  75. package/build/font-size-picker/constants.js.map +1 -0
  76. package/build/font-size-picker/font-size-picker-select.js +97 -0
  77. package/build/font-size-picker/font-size-picker-select.js.map +1 -0
  78. package/build/font-size-picker/font-size-picker-toggle-group.js +50 -0
  79. package/build/font-size-picker/font-size-picker-toggle-group.js.map +1 -0
  80. package/build/font-size-picker/index.js +39 -76
  81. package/build/font-size-picker/index.js.map +1 -1
  82. package/build/font-size-picker/utils.js +17 -89
  83. package/build/font-size-picker/utils.js.map +1 -1
  84. package/build/form-token-field/index.js +9 -6
  85. package/build/form-token-field/index.js.map +1 -1
  86. package/build/gradient-picker/index.js +3 -9
  87. package/build/gradient-picker/index.js.map +1 -1
  88. package/build/higher-order/navigate-regions/index.js +3 -0
  89. package/build/higher-order/navigate-regions/index.js.map +1 -1
  90. package/build/higher-order/with-fallback-styles/index.js +2 -2
  91. package/build/higher-order/with-fallback-styles/index.js.map +1 -1
  92. package/build/icon/index.js +3 -2
  93. package/build/icon/index.js.map +1 -1
  94. package/build/index.js +21 -1
  95. package/build/index.js.map +1 -1
  96. package/build/input-control/index.js +17 -5
  97. package/build/input-control/index.js.map +1 -1
  98. package/build/input-control/input-base.js +2 -0
  99. package/build/input-control/input-base.js.map +1 -1
  100. package/build/menu-group/index.js +17 -3
  101. package/build/menu-group/index.js.map +1 -1
  102. package/build/menu-group/types.js +6 -0
  103. package/build/menu-group/types.js.map +1 -0
  104. package/build/mobile/bottom-sheet/cell.native.js +1 -1
  105. package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
  106. package/build/mobile/bottom-sheet/switch-cell.native.js +1 -3
  107. package/build/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  108. package/build/mobile/global-styles-context/index.native.js +8 -8
  109. package/build/mobile/global-styles-context/index.native.js.map +1 -1
  110. package/build/mobile/keyboard-aware-flat-list/index.ios.js +4 -2
  111. package/build/mobile/keyboard-aware-flat-list/index.ios.js.map +1 -1
  112. package/build/modal/index.js +8 -0
  113. package/build/modal/index.js.map +1 -1
  114. package/build/navigator/navigator-provider/component.js +12 -8
  115. package/build/navigator/navigator-provider/component.js.map +1 -1
  116. package/build/navigator/navigator-screen/component.js +9 -5
  117. package/build/navigator/navigator-screen/component.js.map +1 -1
  118. package/build/number-control/styles/number-control-styles.js +8 -8
  119. package/build/number-control/styles/number-control-styles.js.map +1 -1
  120. package/build/palette-edit/index.js +75 -34
  121. package/build/palette-edit/index.js.map +1 -1
  122. package/build/popover/index.js +18 -6
  123. package/build/popover/index.js.map +1 -1
  124. package/build/query-controls/index.js +1 -0
  125. package/build/query-controls/index.js.map +1 -1
  126. package/build/range-control/styles/range-control-styles.js +47 -57
  127. package/build/range-control/styles/range-control-styles.js.map +1 -1
  128. package/build/snackbar/index.js +35 -24
  129. package/build/snackbar/index.js.map +1 -1
  130. package/build/snackbar/list.js +14 -19
  131. package/build/snackbar/list.js.map +1 -1
  132. package/build/snackbar/types.js +6 -0
  133. package/build/snackbar/types.js.map +1 -0
  134. package/build/spinner/styles.js +4 -4
  135. package/build/spinner/styles.js.map +1 -1
  136. package/build/tab-panel/index.js +12 -8
  137. package/build/tab-panel/index.js.map +1 -1
  138. package/build/theme/color-algorithms.js +118 -0
  139. package/build/theme/color-algorithms.js.map +1 -0
  140. package/build/theme/index.js +21 -18
  141. package/build/theme/index.js.map +1 -1
  142. package/build/theme/styles.js +10 -7
  143. package/build/theme/styles.js.map +1 -1
  144. package/build/toggle-control/index.js +5 -2
  145. package/build/toggle-control/index.js.map +1 -1
  146. package/build/toggle-group-control/toggle-group-control/component.js +1 -0
  147. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  148. package/build/toggle-group-control/toggle-group-control/styles.js +11 -6
  149. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  150. package/build/tools-panel/styles.js +14 -14
  151. package/build/tools-panel/styles.js.map +1 -1
  152. package/build/tools-panel/tools-panel-item/hook.js +9 -5
  153. package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
  154. package/build/ui/context/context-system-provider.js +3 -1
  155. package/build/ui/context/context-system-provider.js.map +1 -1
  156. package/build/unit-control/index.js +5 -2
  157. package/build/unit-control/index.js.map +1 -1
  158. package/build/utils/colors-values.js +4 -3
  159. package/build/utils/colors-values.js.map +1 -1
  160. package/build/utils/config-values.js +0 -2
  161. package/build/utils/config-values.js.map +1 -1
  162. package/build/utils/hooks/use-controlled-value.js.map +1 -1
  163. package/build/utils/input/base.js +2 -2
  164. package/build/utils/input/base.js.map +1 -1
  165. package/build/view/index.js.map +1 -1
  166. package/build-module/alignment-matrix-control/cell.js.map +1 -1
  167. package/build-module/alignment-matrix-control/icon.js +4 -2
  168. package/build-module/alignment-matrix-control/icon.js.map +1 -1
  169. package/build-module/alignment-matrix-control/index.js +23 -1
  170. package/build-module/alignment-matrix-control/index.js.map +1 -1
  171. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js +13 -13
  172. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js.map +1 -1
  173. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js +16 -16
  174. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  175. package/build-module/alignment-matrix-control/types.js +2 -0
  176. package/build-module/alignment-matrix-control/types.js.map +1 -0
  177. package/build-module/alignment-matrix-control/utils.js +13 -8
  178. package/build-module/alignment-matrix-control/utils.js.map +1 -1
  179. package/build-module/angle-picker-control/index.js +2 -1
  180. package/build-module/angle-picker-control/index.js.map +1 -1
  181. package/build-module/angle-picker-control/styles/angle-picker-control-styles.js +9 -9
  182. package/build-module/angle-picker-control/styles/angle-picker-control-styles.js.map +1 -1
  183. package/build-module/autocomplete/index.js +45 -12
  184. package/build-module/autocomplete/index.js.map +1 -1
  185. package/build-module/base-control/hooks.js +41 -0
  186. package/build-module/base-control/hooks.js.map +1 -0
  187. package/build-module/base-control/index.js +18 -8
  188. package/build-module/base-control/index.js.map +1 -1
  189. package/build-module/base-field/hook.js +0 -14
  190. package/build-module/base-field/hook.js.map +1 -1
  191. package/build-module/base-field/index.js.map +1 -1
  192. package/build-module/base-field/styles.js +5 -5
  193. package/build-module/base-field/styles.js.map +1 -1
  194. package/build-module/base-field/types.js +2 -0
  195. package/build-module/base-field/types.js.map +1 -0
  196. package/build-module/border-box-control/border-box-control/component.js +1 -1
  197. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  198. package/build-module/border-box-control/border-box-control/hook.js +13 -1
  199. package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
  200. package/build-module/border-box-control/border-box-control-split-controls/hook.js +11 -1
  201. package/build-module/border-box-control/border-box-control-split-controls/hook.js.map +1 -1
  202. package/build-module/border-control/border-control/component.js +3 -2
  203. package/build-module/border-control/border-control/component.js.map +1 -1
  204. package/build-module/border-control/border-control/hook.js +11 -1
  205. package/build-module/border-control/border-control/hook.js.map +1 -1
  206. package/build-module/border-control/border-control-dropdown/component.js +1 -1
  207. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  208. package/build-module/border-control/border-control-dropdown/hook.js +10 -2
  209. package/build-module/border-control/border-control-dropdown/hook.js.map +1 -1
  210. package/build-module/border-control/styles.js +17 -17
  211. package/build-module/border-control/styles.js.map +1 -1
  212. package/build-module/box-control/linked-button.js +3 -4
  213. package/build-module/box-control/linked-button.js.map +1 -1
  214. package/build-module/color-palette/index.js +3 -8
  215. package/build-module/color-palette/index.js.map +1 -1
  216. package/build-module/color-picker/input-with-slider.js +18 -3
  217. package/build-module/color-picker/input-with-slider.js.map +1 -1
  218. package/build-module/color-picker/styles.js +8 -8
  219. package/build-module/color-picker/styles.js.map +1 -1
  220. package/build-module/custom-select-control/index.js +19 -4
  221. package/build-module/custom-select-control/index.js.map +1 -1
  222. package/build-module/dashicon/index.js +18 -6
  223. package/build-module/dashicon/index.js.map +1 -1
  224. package/build-module/date-time/date-time/index.js +4 -4
  225. package/build-module/date-time/date-time/index.js.map +1 -1
  226. package/build-module/draggable/index.js +59 -38
  227. package/build-module/draggable/index.js.map +1 -1
  228. package/build-module/draggable/types.js +2 -0
  229. package/build-module/draggable/types.js.map +1 -0
  230. package/build-module/duotone-picker/duotone-picker.js +2 -2
  231. package/build-module/duotone-picker/duotone-picker.js.map +1 -1
  232. package/build-module/flex/flex/hook.js +2 -3
  233. package/build-module/flex/flex/hook.js.map +1 -1
  234. package/build-module/focal-point-picker/focal-point.js +3 -13
  235. package/build-module/focal-point-picker/focal-point.js.map +1 -1
  236. package/build-module/focal-point-picker/styles/focal-point-style.js +6 -52
  237. package/build-module/focal-point-picker/styles/focal-point-style.js.map +1 -1
  238. package/build-module/font-size-picker/constants.js +31 -0
  239. package/build-module/font-size-picker/constants.js.map +1 -0
  240. package/build-module/font-size-picker/font-size-picker-select.js +83 -0
  241. package/build-module/font-size-picker/font-size-picker-select.js.map +1 -0
  242. package/build-module/font-size-picker/font-size-picker-toggle-group.js +40 -0
  243. package/build-module/font-size-picker/font-size-picker-toggle-group.js.map +1 -0
  244. package/build-module/font-size-picker/index.js +38 -76
  245. package/build-module/font-size-picker/index.js.map +1 -1
  246. package/build-module/font-size-picker/utils.js +15 -86
  247. package/build-module/font-size-picker/utils.js.map +1 -1
  248. package/build-module/form-token-field/index.js +9 -6
  249. package/build-module/form-token-field/index.js.map +1 -1
  250. package/build-module/gradient-picker/index.js +3 -8
  251. package/build-module/gradient-picker/index.js.map +1 -1
  252. package/build-module/higher-order/navigate-regions/index.js +3 -0
  253. package/build-module/higher-order/navigate-regions/index.js.map +1 -1
  254. package/build-module/higher-order/with-fallback-styles/index.js +2 -2
  255. package/build-module/higher-order/with-fallback-styles/index.js.map +1 -1
  256. package/build-module/icon/index.js +3 -2
  257. package/build-module/icon/index.js.map +1 -1
  258. package/build-module/index.js +3 -2
  259. package/build-module/index.js.map +1 -1
  260. package/build-module/input-control/index.js +16 -5
  261. package/build-module/input-control/index.js.map +1 -1
  262. package/build-module/input-control/input-base.js +2 -0
  263. package/build-module/input-control/input-base.js.map +1 -1
  264. package/build-module/menu-group/index.js +20 -2
  265. package/build-module/menu-group/index.js.map +1 -1
  266. package/build-module/menu-group/types.js +2 -0
  267. package/build-module/menu-group/types.js.map +1 -0
  268. package/build-module/mobile/bottom-sheet/cell.native.js +1 -1
  269. package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
  270. package/build-module/mobile/bottom-sheet/switch-cell.native.js +1 -2
  271. package/build-module/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  272. package/build-module/mobile/global-styles-context/index.native.js +8 -7
  273. package/build-module/mobile/global-styles-context/index.native.js.map +1 -1
  274. package/build-module/mobile/keyboard-aware-flat-list/index.ios.js +2 -2
  275. package/build-module/mobile/keyboard-aware-flat-list/index.ios.js.map +1 -1
  276. package/build-module/modal/index.js +8 -0
  277. package/build-module/modal/index.js.map +1 -1
  278. package/build-module/navigator/navigator-provider/component.js +12 -8
  279. package/build-module/navigator/navigator-provider/component.js.map +1 -1
  280. package/build-module/navigator/navigator-screen/component.js +9 -5
  281. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  282. package/build-module/number-control/styles/number-control-styles.js +8 -10
  283. package/build-module/number-control/styles/number-control-styles.js.map +1 -1
  284. package/build-module/palette-edit/index.js +76 -35
  285. package/build-module/palette-edit/index.js.map +1 -1
  286. package/build-module/popover/index.js +18 -6
  287. package/build-module/popover/index.js.map +1 -1
  288. package/build-module/query-controls/index.js +1 -0
  289. package/build-module/query-controls/index.js.map +1 -1
  290. package/build-module/range-control/styles/range-control-styles.js +47 -57
  291. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  292. package/build-module/snackbar/index.js +33 -23
  293. package/build-module/snackbar/index.js.map +1 -1
  294. package/build-module/snackbar/list.js +14 -22
  295. package/build-module/snackbar/list.js.map +1 -1
  296. package/build-module/snackbar/types.js +2 -0
  297. package/build-module/snackbar/types.js.map +1 -0
  298. package/build-module/spinner/styles.js +4 -4
  299. package/build-module/spinner/styles.js.map +1 -1
  300. package/build-module/tab-panel/index.js +13 -9
  301. package/build-module/tab-panel/index.js.map +1 -1
  302. package/build-module/theme/color-algorithms.js +105 -0
  303. package/build-module/theme/color-algorithms.js.map +1 -0
  304. package/build-module/theme/index.js +21 -17
  305. package/build-module/theme/index.js.map +1 -1
  306. package/build-module/theme/styles.js +8 -6
  307. package/build-module/theme/styles.js.map +1 -1
  308. package/build-module/toggle-control/index.js +4 -2
  309. package/build-module/toggle-control/index.js.map +1 -1
  310. package/build-module/toggle-group-control/toggle-group-control/component.js +1 -0
  311. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  312. package/build-module/toggle-group-control/toggle-group-control/styles.js +12 -6
  313. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  314. package/build-module/tools-panel/styles.js +14 -14
  315. package/build-module/tools-panel/styles.js.map +1 -1
  316. package/build-module/tools-panel/tools-panel-item/hook.js +9 -5
  317. package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
  318. package/build-module/ui/context/context-system-provider.js +3 -2
  319. package/build-module/ui/context/context-system-provider.js.map +1 -1
  320. package/build-module/unit-control/index.js +5 -2
  321. package/build-module/unit-control/index.js.map +1 -1
  322. package/build-module/utils/colors-values.js +4 -3
  323. package/build-module/utils/colors-values.js.map +1 -1
  324. package/build-module/utils/config-values.js +0 -2
  325. package/build-module/utils/config-values.js.map +1 -1
  326. package/build-module/utils/hooks/use-controlled-value.js.map +1 -1
  327. package/build-module/utils/input/base.js +2 -2
  328. package/build-module/utils/input/base.js.map +1 -1
  329. package/build-module/view/index.js.map +1 -1
  330. package/build-style/style-rtl.css +145 -100
  331. package/build-style/style.css +145 -100
  332. package/build-types/alignment-matrix-control/cell.d.ts +5 -0
  333. package/build-types/alignment-matrix-control/cell.d.ts.map +1 -0
  334. package/build-types/alignment-matrix-control/icon.d.ts +6 -0
  335. package/build-types/alignment-matrix-control/icon.d.ts.map +1 -0
  336. package/build-types/alignment-matrix-control/index.d.ts +30 -0
  337. package/build-types/alignment-matrix-control/index.d.ts.map +1 -0
  338. package/build-types/alignment-matrix-control/stories/index.d.ts +14 -0
  339. package/build-types/alignment-matrix-control/stories/index.d.ts.map +1 -0
  340. package/build-types/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.d.ts +19 -0
  341. package/build-types/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.d.ts.map +1 -0
  342. package/build-types/alignment-matrix-control/styles/alignment-matrix-control-styles.d.ts +23 -0
  343. package/build-types/alignment-matrix-control/styles/alignment-matrix-control-styles.d.ts.map +1 -0
  344. package/build-types/alignment-matrix-control/test/index.d.ts +2 -0
  345. package/build-types/alignment-matrix-control/test/index.d.ts.map +1 -0
  346. package/build-types/alignment-matrix-control/types.d.ts +39 -0
  347. package/build-types/alignment-matrix-control/types.d.ts.map +1 -0
  348. package/build-types/alignment-matrix-control/utils.d.ts +33 -0
  349. package/build-types/alignment-matrix-control/utils.d.ts.map +1 -0
  350. package/build-types/base-control/hooks.d.ts +23 -0
  351. package/build-types/base-control/hooks.d.ts.map +1 -0
  352. package/build-types/base-control/index.d.ts +17 -7
  353. package/build-types/base-control/index.d.ts.map +1 -1
  354. package/build-types/base-control/stories/index.d.ts.map +1 -1
  355. package/build-types/base-control/test/index.d.ts +2 -0
  356. package/build-types/base-control/test/index.d.ts.map +1 -0
  357. package/build-types/base-control/types.d.ts +8 -2
  358. package/build-types/base-control/types.d.ts.map +1 -1
  359. package/build-types/base-field/hook.d.ts +7 -31
  360. package/build-types/base-field/hook.d.ts.map +1 -1
  361. package/build-types/base-field/index.d.ts +1 -1
  362. package/build-types/base-field/index.d.ts.map +1 -1
  363. package/build-types/base-field/styles.d.ts +5 -5
  364. package/build-types/base-field/styles.d.ts.map +1 -1
  365. package/build-types/base-field/test/index.d.ts +2 -0
  366. package/build-types/base-field/test/index.d.ts.map +1 -0
  367. package/build-types/base-field/types.d.ts +29 -0
  368. package/build-types/base-field/types.d.ts.map +1 -0
  369. package/build-types/border-box-control/border-box-control/component.d.ts +4 -4
  370. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  371. package/build-types/border-box-control/border-box-control/hook.d.ts +8 -8
  372. package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
  373. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts +4 -2
  374. package/build-types/border-box-control/border-box-control-linked-button/component.d.ts.map +1 -1
  375. package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts +2 -2
  376. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +3 -3
  377. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +7 -7
  378. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
  379. package/build-types/border-box-control/border-box-control-visualizer/component.d.ts +3 -2
  380. package/build-types/border-box-control/border-box-control-visualizer/component.d.ts.map +1 -1
  381. package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts +2 -2
  382. package/build-types/border-box-control/stories/index.d.ts +3 -3
  383. package/build-types/border-box-control/types.d.ts +5 -38
  384. package/build-types/border-box-control/types.d.ts.map +1 -1
  385. package/build-types/border-control/border-control/component.d.ts +4 -2
  386. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  387. package/build-types/border-control/border-control/hook.d.ts +7 -7
  388. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  389. package/build-types/border-control/border-control-dropdown/component.d.ts +3 -3
  390. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  391. package/build-types/border-control/border-control-dropdown/hook.d.ts +7 -7
  392. package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
  393. package/build-types/border-control/border-control-style-picker/hook.d.ts +2 -2
  394. package/build-types/border-control/stories/index.d.ts +24 -12
  395. package/build-types/border-control/stories/index.d.ts.map +1 -1
  396. package/build-types/border-control/styles.d.ts.map +1 -1
  397. package/build-types/border-control/types.d.ts +10 -51
  398. package/build-types/border-control/types.d.ts.map +1 -1
  399. package/build-types/card/card/hook.d.ts +2 -2
  400. package/build-types/card/card-body/hook.d.ts +2 -2
  401. package/build-types/card/card-divider/hook.d.ts +2 -2
  402. package/build-types/card/card-footer/hook.d.ts +2 -2
  403. package/build-types/card/card-header/hook.d.ts +2 -2
  404. package/build-types/card/card-media/hook.d.ts +2 -2
  405. package/build-types/color-palette/index.d.ts +16 -2
  406. package/build-types/color-palette/index.d.ts.map +1 -1
  407. package/build-types/color-palette/stories/index.d.ts +30 -2
  408. package/build-types/color-palette/stories/index.d.ts.map +1 -1
  409. package/build-types/color-palette/styles.d.ts +1 -1
  410. package/build-types/color-palette/types.d.ts +14 -10
  411. package/build-types/color-palette/types.d.ts.map +1 -1
  412. package/build-types/color-picker/input-with-slider.d.ts.map +1 -1
  413. package/build-types/color-picker/styles.d.ts +5 -5
  414. package/build-types/color-picker/styles.d.ts.map +1 -1
  415. package/build-types/custom-select-control/index.d.ts.map +1 -1
  416. package/build-types/dashicon/index.d.ts +7 -16
  417. package/build-types/dashicon/index.d.ts.map +1 -1
  418. package/build-types/dashicon/types.d.ts +14 -0
  419. package/build-types/dashicon/types.d.ts.map +1 -1
  420. package/build-types/date-time/date/styles.d.ts +3 -3
  421. package/build-types/date-time/date-time/styles.d.ts +3 -3
  422. package/build-types/date-time/time/styles.d.ts +8 -8
  423. package/build-types/date-time/types.d.ts +0 -16
  424. package/build-types/date-time/types.d.ts.map +1 -1
  425. package/build-types/draggable/index.d.ts +42 -66
  426. package/build-types/draggable/index.d.ts.map +1 -1
  427. package/build-types/draggable/stories/index.d.ts +12 -0
  428. package/build-types/draggable/stories/index.d.ts.map +1 -0
  429. package/build-types/draggable/types.d.ts +58 -0
  430. package/build-types/draggable/types.d.ts.map +1 -0
  431. package/build-types/elevation/hook.d.ts +2 -2
  432. package/build-types/external-link/styles/external-link-styles.d.ts +1 -1
  433. package/build-types/flex/flex/hook.d.ts +2 -2
  434. package/build-types/flex/flex/hook.d.ts.map +1 -1
  435. package/build-types/flex/flex-block/hook.d.ts +2 -2
  436. package/build-types/flex/flex-item/hook.d.ts +2 -2
  437. package/build-types/focal-point-picker/focal-point.d.ts.map +1 -1
  438. package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts +2 -5
  439. package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts.map +1 -1
  440. package/build-types/focal-point-picker/styles/focal-point-style.d.ts +1 -12
  441. package/build-types/focal-point-picker/styles/focal-point-style.d.ts.map +1 -1
  442. package/build-types/font-size-picker/constants.d.ts +15 -0
  443. package/build-types/font-size-picker/constants.d.ts.map +1 -0
  444. package/build-types/font-size-picker/font-size-picker-select.d.ts +5 -0
  445. package/build-types/font-size-picker/font-size-picker-select.d.ts.map +1 -0
  446. package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts +5 -0
  447. package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map +1 -0
  448. package/build-types/font-size-picker/index.d.ts.map +1 -1
  449. package/build-types/font-size-picker/types.d.ts +13 -13
  450. package/build-types/font-size-picker/types.d.ts.map +1 -1
  451. package/build-types/font-size-picker/utils.d.ts +6 -18
  452. package/build-types/font-size-picker/utils.d.ts.map +1 -1
  453. package/build-types/form-token-field/index.d.ts.map +1 -1
  454. package/build-types/grid/hook.d.ts +2 -2
  455. package/build-types/h-stack/component.d.ts +1 -1
  456. package/build-types/h-stack/hook.d.ts +2 -2
  457. package/build-types/heading/hook.d.ts +2 -2
  458. package/build-types/icon/index.d.ts +1 -1
  459. package/build-types/icon/index.d.ts.map +1 -1
  460. package/build-types/input-control/index.d.ts +1 -1
  461. package/build-types/input-control/index.d.ts.map +1 -1
  462. package/build-types/input-control/input-base.d.ts.map +1 -1
  463. package/build-types/input-control/stories/index.d.ts +1 -0
  464. package/build-types/input-control/stories/index.d.ts.map +1 -1
  465. package/build-types/input-control/types.d.ts +2 -1
  466. package/build-types/input-control/types.d.ts.map +1 -1
  467. package/build-types/item-group/item/hook.d.ts +2 -2
  468. package/build-types/item-group/item-group/hook.d.ts +2 -2
  469. package/build-types/menu-group/index.d.ts +21 -1
  470. package/build-types/menu-group/index.d.ts.map +1 -1
  471. package/build-types/menu-group/test/index.d.ts +2 -0
  472. package/build-types/menu-group/test/index.d.ts.map +1 -0
  473. package/build-types/menu-group/types.d.ts +23 -0
  474. package/build-types/menu-group/types.d.ts.map +1 -0
  475. package/build-types/modal/index.d.ts.map +1 -1
  476. package/build-types/modal/stories/index.d.ts.map +1 -1
  477. package/build-types/navigator/navigator-back-button/hook.d.ts +3 -3
  478. package/build-types/navigator/navigator-button/hook.d.ts +3 -3
  479. package/build-types/navigator/navigator-provider/component.d.ts.map +1 -1
  480. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  481. package/build-types/number-control/index.d.ts +2 -2
  482. package/build-types/number-control/index.d.ts.map +1 -1
  483. package/build-types/number-control/stories/index.d.ts +25 -0
  484. package/build-types/number-control/stories/index.d.ts.map +1 -0
  485. package/build-types/number-control/styles/number-control-styles.d.ts +6 -6
  486. package/build-types/number-control/styles/number-control-styles.d.ts.map +1 -1
  487. package/build-types/number-control/test/index.d.ts +2 -0
  488. package/build-types/number-control/test/index.d.ts.map +1 -0
  489. package/build-types/popover/index.d.ts +1 -1
  490. package/build-types/popover/index.d.ts.map +1 -1
  491. package/build-types/popover/stories/e2e/index.d.ts +1 -1
  492. package/build-types/range-control/index.d.ts +1 -1
  493. package/build-types/range-control/styles/range-control-styles.d.ts +2 -2
  494. package/build-types/resizable-box/resize-tooltip/index.d.ts +15 -19
  495. package/build-types/resizable-box/resize-tooltip/index.d.ts.map +1 -1
  496. package/build-types/resizable-box/resize-tooltip/label.d.ts +4 -3
  497. package/build-types/resizable-box/resize-tooltip/label.d.ts.map +1 -1
  498. package/build-types/scrollable/hook.d.ts +2 -2
  499. package/build-types/search-control/index.d.ts +1 -1
  500. package/build-types/search-control/stories/index.d.ts +2 -2
  501. package/build-types/snackbar/index.d.ts +19 -0
  502. package/build-types/snackbar/index.d.ts.map +1 -0
  503. package/build-types/snackbar/list.d.ts +18 -0
  504. package/build-types/snackbar/list.d.ts.map +1 -0
  505. package/build-types/snackbar/stories/index.d.ts +16 -0
  506. package/build-types/snackbar/stories/index.d.ts.map +1 -0
  507. package/build-types/snackbar/stories/list.d.ts +12 -0
  508. package/build-types/snackbar/stories/list.d.ts.map +1 -0
  509. package/build-types/snackbar/types.d.ts +111 -0
  510. package/build-types/snackbar/types.d.ts.map +1 -0
  511. package/build-types/spacer/hook.d.ts +2 -2
  512. package/build-types/spinner/index.d.ts +1 -1
  513. package/build-types/surface/hook.d.ts +2 -2
  514. package/build-types/tab-panel/index.d.ts +1 -1
  515. package/build-types/tab-panel/index.d.ts.map +1 -1
  516. package/build-types/tab-panel/types.d.ts +19 -1
  517. package/build-types/tab-panel/types.d.ts.map +1 -1
  518. package/build-types/text/hook.d.ts +2 -2
  519. package/build-types/text-control/index.d.ts +2 -2
  520. package/build-types/text-control/stories/index.d.ts.map +1 -1
  521. package/build-types/text-control/types.d.ts +1 -5
  522. package/build-types/text-control/types.d.ts.map +1 -1
  523. package/build-types/theme/color-algorithms.d.ts +20 -0
  524. package/build-types/theme/color-algorithms.d.ts.map +1 -0
  525. package/build-types/theme/index.d.ts +1 -1
  526. package/build-types/theme/index.d.ts.map +1 -1
  527. package/build-types/theme/stories/index.d.ts +4 -0
  528. package/build-types/theme/stories/index.d.ts.map +1 -1
  529. package/build-types/theme/styles.d.ts +3 -2
  530. package/build-types/theme/styles.d.ts.map +1 -1
  531. package/build-types/theme/test/color-algorithms.d.ts +2 -0
  532. package/build-types/theme/test/color-algorithms.d.ts.map +1 -0
  533. package/build-types/theme/types.d.ts +41 -3
  534. package/build-types/theme/types.d.ts.map +1 -1
  535. package/build-types/toggle-control/index.d.ts.map +1 -1
  536. package/build-types/toggle-group-control/stories/index.d.ts.map +1 -1
  537. package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts +2 -2
  538. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts +2 -2
  539. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +1 -2
  540. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  541. package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts +1 -1
  542. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts +1 -1
  543. package/build-types/toggle-group-control/types.d.ts +2 -1
  544. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  545. package/build-types/tools-panel/tools-panel/hook.d.ts +2 -2
  546. package/build-types/tools-panel/tools-panel-header/hook.d.ts +2 -2
  547. package/build-types/tools-panel/tools-panel-item/hook.d.ts +2 -2
  548. package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
  549. package/build-types/truncate/hook.d.ts +2 -2
  550. package/build-types/ui/context/context-system-provider.d.ts.map +1 -1
  551. package/build-types/ui/control-group/hook.d.ts +2 -2
  552. package/build-types/ui/control-label/hook.d.ts +2 -2
  553. package/build-types/ui/form-group/form-group.d.ts +2 -2
  554. package/build-types/ui/form-group/use-form-group.d.ts +5 -5
  555. package/build-types/unit-control/index.d.ts +2 -1
  556. package/build-types/unit-control/index.d.ts.map +1 -1
  557. package/build-types/unit-control/styles/unit-control-styles.d.ts +2 -2
  558. package/build-types/unit-control/types.d.ts +4 -0
  559. package/build-types/unit-control/types.d.ts.map +1 -1
  560. package/build-types/utils/colors-values.d.ts +1 -0
  561. package/build-types/utils/colors-values.d.ts.map +1 -1
  562. package/build-types/utils/config-values.d.ts +0 -2
  563. package/build-types/utils/hooks/use-controlled-value.d.ts +2 -1
  564. package/build-types/utils/hooks/use-controlled-value.d.ts.map +1 -1
  565. package/build-types/v-stack/component.d.ts +2 -2
  566. package/build-types/v-stack/hook.d.ts +2 -2
  567. package/build-types/v-stack/stories/index.d.ts +2 -2
  568. package/build-types/view/index.d.ts +1 -1
  569. package/build-types/view/index.d.ts.map +1 -1
  570. package/package.json +21 -20
  571. package/src/alignment-matrix-control/README.md +7 -7
  572. package/src/alignment-matrix-control/{cell.js → cell.tsx} +7 -1
  573. package/src/alignment-matrix-control/{icon.js → icon.tsx} +6 -3
  574. package/src/alignment-matrix-control/{index.js → index.tsx} +31 -4
  575. package/src/alignment-matrix-control/stories/{index.js → index.tsx} +17 -9
  576. package/src/alignment-matrix-control/styles/{alignment-matrix-control-icon-styles.js → alignment-matrix-control-icon-styles.ts} +11 -3
  577. package/src/alignment-matrix-control/styles/{alignment-matrix-control-styles.js → alignment-matrix-control-styles.ts} +13 -3
  578. package/src/alignment-matrix-control/test/{index.js → index.tsx} +5 -5
  579. package/src/alignment-matrix-control/types.ts +54 -0
  580. package/src/alignment-matrix-control/{utils.js → utils.tsx} +24 -14
  581. package/src/angle-picker-control/index.js +2 -1
  582. package/src/angle-picker-control/styles/angle-picker-control-styles.js +4 -0
  583. package/src/autocomplete/index.js +55 -15
  584. package/src/autocomplete/style.scss +1 -1
  585. package/src/base-control/README.md +21 -12
  586. package/src/base-control/hooks.ts +45 -0
  587. package/src/base-control/index.tsx +18 -7
  588. package/src/base-control/stories/index.tsx +8 -10
  589. package/src/base-control/test/index.tsx +52 -0
  590. package/src/base-control/types.ts +8 -2
  591. package/src/base-field/README.md +21 -22
  592. package/src/base-field/{hook.js → hook.ts} +5 -15
  593. package/src/base-field/{index.js → index.ts} +0 -0
  594. package/src/base-field/{styles.js → styles.ts} +2 -2
  595. package/src/base-field/test/__snapshots__/{index.js.snap → index.tsx.snap} +13 -11
  596. package/src/base-field/test/index.tsx +84 -0
  597. package/src/base-field/types.ts +29 -0
  598. package/src/border-box-control/border-box-control/README.md +6 -17
  599. package/src/border-box-control/border-box-control/component.tsx +1 -1
  600. package/src/border-box-control/border-box-control/hook.ts +18 -4
  601. package/src/border-box-control/border-box-control-split-controls/hook.ts +10 -0
  602. package/src/border-box-control/test/index.js +3 -1
  603. package/src/border-box-control/types.ts +32 -58
  604. package/src/border-control/border-control/README.md +4 -17
  605. package/src/border-control/border-control/component.tsx +3 -2
  606. package/src/border-control/border-control/hook.ts +10 -0
  607. package/src/border-control/border-control-dropdown/component.tsx +7 -6
  608. package/src/border-control/border-control-dropdown/hook.ts +9 -1
  609. package/src/border-control/styles.ts +1 -10
  610. package/src/border-control/types.ts +43 -80
  611. package/src/box-control/linked-button.js +8 -11
  612. package/src/box-control/test/index.js +206 -135
  613. package/src/button/stories/index.js +30 -0
  614. package/src/button/style.scss +17 -14
  615. package/src/button/test/index.js +32 -15
  616. package/src/card/test/__snapshots__/index.tsx.snap +64 -368
  617. package/src/card/test/index.tsx +34 -22
  618. package/src/checkbox-control/style.scss +3 -3
  619. package/src/circular-option-picker/style.scss +1 -0
  620. package/src/color-palette/README.md +12 -16
  621. package/src/color-palette/index.tsx +5 -7
  622. package/src/color-palette/stories/index.tsx +1 -5
  623. package/src/color-palette/style.scss +1 -1
  624. package/src/color-palette/test/__snapshots__/index.tsx.snap +4 -4
  625. package/src/color-palette/test/index.tsx +84 -36
  626. package/src/color-palette/types.ts +14 -10
  627. package/src/color-picker/README.md +1 -0
  628. package/src/color-picker/input-with-slider.tsx +14 -2
  629. package/src/color-picker/styles.ts +0 -4
  630. package/src/confirm-dialog/README.md +3 -2
  631. package/src/custom-select-control/README.md +14 -0
  632. package/src/custom-select-control/index.js +21 -2
  633. package/src/custom-select-control/stories/index.js +1 -0
  634. package/src/custom-select-control/style.scss +6 -1
  635. package/src/custom-select-control/test/index.js +39 -0
  636. package/src/dashicon/index.tsx +51 -0
  637. package/src/dashicon/types.ts +17 -0
  638. package/src/date-time/date/test/index.tsx +2 -2
  639. package/src/date-time/date-time/index.tsx +2 -2
  640. package/src/date-time/types.ts +0 -19
  641. package/src/dimension-control/test/__snapshots__/index.test.js.snap +4 -8
  642. package/src/disabled/test/index.tsx +21 -11
  643. package/src/divider/test/index.tsx +4 -4
  644. package/src/draggable/README.md +13 -18
  645. package/src/draggable/{index.js → index.tsx} +71 -47
  646. package/src/draggable/stories/index.tsx +83 -0
  647. package/src/draggable/types.ts +58 -0
  648. package/src/drop-zone/style.scss +1 -1
  649. package/src/dropdown/test/index.js +39 -49
  650. package/src/dropdown-menu/test/index.js +18 -12
  651. package/src/duotone-picker/duotone-picker.js +2 -2
  652. package/src/flex/flex/hook.ts +0 -3
  653. package/src/flex/test/index.tsx +29 -3
  654. package/src/focal-point-picker/focal-point.tsx +2 -24
  655. package/src/focal-point-picker/styles/focal-point-style.ts +8 -32
  656. package/src/focal-point-picker/test/media.js +26 -21
  657. package/src/font-size-picker/constants.ts +37 -0
  658. package/src/font-size-picker/font-size-picker-select.tsx +98 -0
  659. package/src/font-size-picker/font-size-picker-toggle-group.tsx +41 -0
  660. package/src/font-size-picker/index.tsx +55 -118
  661. package/src/font-size-picker/test/index.tsx +253 -44
  662. package/src/font-size-picker/test/utils.ts +58 -98
  663. package/src/font-size-picker/types.ts +25 -16
  664. package/src/font-size-picker/utils.ts +16 -102
  665. package/src/form-toggle/style.scss +3 -3
  666. package/src/form-token-field/index.tsx +13 -5
  667. package/src/form-token-field/style.scss +3 -3
  668. package/src/form-token-field/test/index.tsx +6 -6
  669. package/src/gradient-picker/index.js +5 -8
  670. package/src/grid/test/grid.tsx +31 -31
  671. package/src/higher-order/navigate-regions/index.js +4 -0
  672. package/src/higher-order/navigate-regions/style.scss +52 -20
  673. package/src/higher-order/with-fallback-styles/index.js +4 -2
  674. package/src/higher-order/with-filters/test/index.js +94 -101
  675. package/src/higher-order/with-focus-return/test/index.js +1 -4
  676. package/src/higher-order/with-notices/test/index.js +1 -1
  677. package/src/icon/index.tsx +3 -2
  678. package/src/icon/test/index.js +10 -0
  679. package/src/index.js +3 -2
  680. package/src/input-control/index.tsx +42 -28
  681. package/src/input-control/input-base.tsx +8 -1
  682. package/src/input-control/stories/index.tsx +6 -0
  683. package/src/input-control/test/index.js +18 -0
  684. package/src/input-control/types.ts +2 -0
  685. package/src/item-group/stories/index.js +1 -1
  686. package/src/menu-group/{index.js → index.tsx} +22 -3
  687. package/src/menu-group/test/{index.js → index.tsx} +0 -0
  688. package/src/menu-group/types.ts +23 -0
  689. package/src/menu-item/style.scss +1 -1
  690. package/src/mobile/bottom-sheet/cell.native.js +1 -1
  691. package/src/mobile/bottom-sheet/switch-cell.native.js +2 -2
  692. package/src/mobile/bottom-sheet/test/range-cell.native.js +4 -4
  693. package/src/mobile/global-styles-context/index.native.js +9 -11
  694. package/src/mobile/html-text-input/test/index.native.js +2 -2
  695. package/src/mobile/keyboard-aware-flat-list/index.ios.js +2 -2
  696. package/src/mobile/link-settings/test/edit.native.js +70 -126
  697. package/src/mobile/link-settings/test/link-settings-navigation.native.js +5 -5
  698. package/src/modal/index.tsx +11 -0
  699. package/src/modal/stories/index.tsx +3 -0
  700. package/src/modal/test/index.tsx +15 -0
  701. package/src/navigation/stories/index.js +6 -6
  702. package/src/navigation/stories/{controlled-state.js → utils/controlled-state.js} +3 -3
  703. package/src/navigation/stories/{default.js → utils/default.js} +3 -3
  704. package/src/navigation/stories/{group.js → utils/group.js} +4 -4
  705. package/src/navigation/stories/{hide-if-empty.js → utils/hide-if-empty.js} +3 -3
  706. package/src/navigation/stories/{more-examples.js → utils/more-examples.js} +4 -4
  707. package/src/navigation/stories/{search.js → utils/search.js} +5 -5
  708. package/src/navigator/navigator-provider/component.tsx +13 -10
  709. package/src/navigator/navigator-screen/component.tsx +8 -3
  710. package/src/notice/README.md +2 -1
  711. package/src/notice/style.scss +1 -1
  712. package/src/notice/test/list.js +8 -5
  713. package/src/number-control/stories/{index.js → index.tsx} +24 -7
  714. package/src/number-control/styles/{number-control-styles.js → number-control-styles.ts} +5 -3
  715. package/src/number-control/test/index.tsx +600 -0
  716. package/src/palette-edit/index.js +91 -39
  717. package/src/palette-edit/test/index.js +25 -1
  718. package/src/panel/style.scss +1 -1
  719. package/src/popover/index.tsx +28 -9
  720. package/src/popover/style.scss +12 -11
  721. package/src/popover/test/index.tsx +25 -15
  722. package/src/query-controls/index.js +1 -0
  723. package/src/range-control/styles/range-control-styles.ts +2 -2
  724. package/src/range-control/test/index.tsx +57 -60
  725. package/src/resizable-box/style.scss +3 -2
  726. package/src/sandbox/test/index.js +13 -11
  727. package/src/scrollable/test/index.tsx +7 -3
  728. package/src/search-control/style.scss +5 -1
  729. package/src/snackbar/README.md +63 -8
  730. package/src/snackbar/{index.js → index.tsx} +46 -28
  731. package/src/snackbar/{list.js → list.tsx} +20 -21
  732. package/src/snackbar/stories/index.tsx +96 -0
  733. package/src/snackbar/stories/list.tsx +98 -0
  734. package/src/snackbar/style.scss +2 -2
  735. package/src/snackbar/types.ts +116 -0
  736. package/src/spacer/test/index.tsx +33 -3
  737. package/src/spinner/styles.ts +1 -1
  738. package/src/surface/test/index.tsx +12 -12
  739. package/src/tab-panel/README.md +9 -0
  740. package/src/tab-panel/index.tsx +23 -9
  741. package/src/tab-panel/style.scss +46 -35
  742. package/src/tab-panel/test/index.tsx +111 -0
  743. package/src/tab-panel/types.ts +20 -1
  744. package/src/text/test/__snapshots__/index.tsx.snap +1 -0
  745. package/src/text/test/index.tsx +100 -48
  746. package/src/text-control/stories/index.tsx +0 -1
  747. package/src/text-control/types.ts +1 -6
  748. package/src/theme/README.md +32 -2
  749. package/src/theme/color-algorithms.ts +138 -0
  750. package/src/theme/index.tsx +23 -16
  751. package/src/theme/stories/index.tsx +67 -0
  752. package/src/theme/styles.ts +22 -17
  753. package/src/theme/test/color-algorithms.ts +100 -0
  754. package/src/theme/test/index.tsx +68 -35
  755. package/src/theme/types.ts +43 -3
  756. package/src/toggle-control/index.tsx +4 -2
  757. package/src/toggle-group-control/stories/index.tsx +2 -0
  758. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +6 -8
  759. package/src/toggle-group-control/test/index.tsx +40 -17
  760. package/src/toggle-group-control/toggle-group-control/README.md +8 -1
  761. package/src/toggle-group-control/toggle-group-control/component.tsx +1 -1
  762. package/src/toggle-group-control/toggle-group-control/styles.ts +22 -16
  763. package/src/toggle-group-control/types.ts +2 -1
  764. package/src/toolbar-group/test/index.js +8 -6
  765. package/src/tools-panel/stories/index.js +1 -1
  766. package/src/tools-panel/stories/{tools-panel-with-item-group-slot.js → utils/tools-panel-with-item-group-slot.js} +14 -11
  767. package/src/tools-panel/styles.ts +1 -1
  768. package/src/tools-panel/test/index.js +20 -14
  769. package/src/tools-panel/tools-panel-item/hook.ts +6 -1
  770. package/src/tooltip/README.md +7 -0
  771. package/src/tooltip/style.scss +2 -2
  772. package/src/tooltip/test/index.js +109 -18
  773. package/src/tree-grid/test/index.js +12 -12
  774. package/src/truncate/test/index.tsx +9 -9
  775. package/src/ui/context/context-system-provider.js +3 -2
  776. package/src/ui/context/test/context-system-provider.js +5 -4
  777. package/src/ui/control-label/test/index.js +3 -5
  778. package/src/ui/form-group/test/index.js +16 -17
  779. package/src/unit-control/README.md +9 -1
  780. package/src/unit-control/index.tsx +3 -0
  781. package/src/unit-control/test/index.tsx +1 -0
  782. package/src/unit-control/types.ts +4 -0
  783. package/src/utils/colors-values.js +5 -3
  784. package/src/utils/config-values.js +0 -2
  785. package/src/utils/hooks/stories/use-cx.js +1 -1
  786. package/src/utils/hooks/use-controlled-value.ts +2 -2
  787. package/src/utils/input/base.js +2 -2
  788. package/src/utils/theme-variables.scss +20 -0
  789. package/src/view/{index.js → index.ts} +0 -0
  790. package/tsconfig.json +2 -4
  791. package/tsconfig.tsbuildinfo +1 -1
  792. package/src/base-field/test/index.js +0 -67
  793. package/src/dashicon/index.js +0 -26
  794. package/src/draggable/stories/index.js +0 -72
  795. package/src/number-control/test/index.js +0 -478
  796. package/src/snackbar/stories/index.js +0 -89
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["useSelect","classnames","Icon","check","__","sprintf","useCallback","useState","deprecated","VisuallyHidden","Select","SelectControlSelect","SelectControlChevronDown","InputBaseWithBackCompatMinWidth","StyledLabel","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next36pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","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"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\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 '../visually-hidden';\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};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next36pxDefaultSize = false,\n\t\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t\t__nextUnconstrainedWidth = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t} = props;\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\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\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"]}
1
+ {"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["useSelect","classnames","Icon","check","__","sprintf","useCallback","useState","deprecated","VisuallyHidden","Select","SelectControlSelect","SelectControlChevronDown","InputBaseWithBackCompatMinWidth","StyledLabel","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next36pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","handleOnFocus","e","handleOnBlur","since","version","hint","getDescribedBy","menuProps","onKeyDownHandler","stopPropagation","onKeyDown","startsWith","__experimentalHint","map","index","key","style"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\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 '../visually-hidden';\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};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next36pxDefaultSize = false,\n\t\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t\t__nextUnconstrainedWidth = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\tonFocus,\n\t\tonBlur,\n\t\t__experimentalShowSelectedHint = false,\n\t} = props;\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 handleOnFocus( e ) {\n\t\tsetIsFocused( true );\n\t\tonFocus?.( e );\n\t}\n\n\tfunction handleOnBlur( e ) {\n\t\tsetIsFocused( false );\n\t\tonBlur?.( e );\n\t}\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\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tonBlur={ handleOnBlur }\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\t{ __experimentalShowSelectedHint &&\n\t\t\t\t\t\tselectedItem.__experimentalHint && (\n\t\t\t\t\t\t\t<span className=\"components-custom-select-control__hint\">\n\t\t\t\t\t\t\t\t{ selectedItem.__experimentalHint }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\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"]}
@@ -6,23 +6,35 @@ import { createElement } from "@wordpress/element";
6
6
  *
7
7
  * @property {import('./types').IconKey} icon Icon name
8
8
  * @property {string} [className] Class name
9
+ * @property {number} [size] Size of the icon
9
10
  */
10
11
 
11
- /** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */
12
-
13
12
  /**
14
- * @param {Props} props
15
- * @return {JSX.Element} Element
13
+ * Internal dependencies
16
14
  */
17
15
  function Dashicon(_ref) {
18
16
  let {
19
17
  icon,
20
18
  className,
19
+ size = 20,
20
+ style = {},
21
21
  ...extraProps
22
22
  } = _ref;
23
- const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' ');
23
+ const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' '); // For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default
24
+
25
+ const sizeStyles = // using `!=` to catch both 20 and "20"
26
+ // eslint-disable-next-line eqeqeq
27
+ 20 != size ? {
28
+ fontSize: `${size}px`,
29
+ width: `${size}px`,
30
+ height: `${size}px`
31
+ } : {};
32
+ const styles = { ...sizeStyles,
33
+ ...style
34
+ };
24
35
  return createElement("span", _extends({
25
- className: iconClass
36
+ className: iconClass,
37
+ style: styles
26
38
  }, extraProps));
27
39
  }
28
40
 
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/dashicon/index.js"],"names":["Dashicon","icon","className","extraProps","iconClass","filter","Boolean","join"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA,SAASA,QAAT,OAAwD;AAAA,MAArC;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAR;AAAmB,OAAGC;AAAtB,GAAqC;AACvD,QAAMC,SAAS,GAAG,CACjB,UADiB,EAEjB,WAFiB,EAGjB,eAAeH,IAHE,EAIjBC,SAJiB,EAMhBG,MANgB,CAMRC,OANQ,EAOhBC,IAPgB,CAOV,GAPU,CAAlB;AASA,SAAO;AAAM,IAAA,SAAS,EAAGH;AAAlB,KAAmCD,UAAnC,EAAP;AACA;;AAED,eAAeH,QAAf","sourcesContent":["/**\n * @typedef OwnProps\n *\n * @property {import('./types').IconKey} icon Icon name\n * @property {string} [className] Class name\n */\n/** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */\n\n/**\n * @param {Props} props\n * @return {JSX.Element} Element\n */\nfunction Dashicon( { icon, className, ...extraProps } ) {\n\tconst iconClass = [\n\t\t'dashicon',\n\t\t'dashicons',\n\t\t'dashicons-' + icon,\n\t\tclassName,\n\t]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\treturn <span className={ iconClass } { ...extraProps } />;\n}\n\nexport default Dashicon;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/dashicon/index.tsx"],"names":["Dashicon","icon","className","size","style","extraProps","iconClass","filter","Boolean","join","sizeStyles","fontSize","width","height","styles"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAIA,SAASA,QAAT,OAM6D;AAAA,MAN1C;AAClBC,IAAAA,IADkB;AAElBC,IAAAA,SAFkB;AAGlBC,IAAAA,IAAI,GAAG,EAHW;AAIlBC,IAAAA,KAAK,GAAG,EAJU;AAKlB,OAAGC;AALe,GAM0C;AAC5D,QAAMC,SAAS,GAAG,CACjB,UADiB,EAEjB,WAFiB,EAGjB,eAAeL,IAHE,EAIjBC,SAJiB,EAMhBK,MANgB,CAMRC,OANQ,EAOhBC,IAPgB,CAOV,GAPU,CAAlB,CAD4D,CAU5D;;AACA,QAAMC,UAAU,GACf;AACA;AACA,QAAMP,IAAN,GACG;AACAQ,IAAAA,QAAQ,EAAG,GAAGR,IAAM,IADpB;AAEAS,IAAAA,KAAK,EAAG,GAAGT,IAAM,IAFjB;AAGAU,IAAAA,MAAM,EAAG,GAAGV,IAAM;AAHlB,GADH,GAMG,EATJ;AAWA,QAAMW,MAAM,GAAG,EACd,GAAGJ,UADW;AAEd,OAAGN;AAFW,GAAf;AAKA,SAAO;AAAM,IAAA,SAAS,EAAGE,SAAlB;AAA8B,IAAA,KAAK,EAAGQ;AAAtC,KAAoDT,UAApD,EAAP;AACA;;AAED,eAAeL,QAAf","sourcesContent":["/**\n * @typedef OwnProps\n *\n * @property {import('./types').IconKey} icon Icon name\n * @property {string} [className] Class name\n * @property {number} [size] Size of the icon\n */\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DashiconProps } from './types';\n\nfunction Dashicon( {\n\ticon,\n\tclassName,\n\tsize = 20,\n\tstyle = {},\n\t...extraProps\n}: WordPressComponentProps< DashiconProps, 'span', false > ) {\n\tconst iconClass = [\n\t\t'dashicon',\n\t\t'dashicons',\n\t\t'dashicons-' + icon,\n\t\tclassName,\n\t]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\t// For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default\n\tconst sizeStyles =\n\t\t// using `!=` to catch both 20 and \"20\"\n\t\t// eslint-disable-next-line eqeqeq\n\t\t20 != size\n\t\t\t? {\n\t\t\t\t\tfontSize: `${ size }px`,\n\t\t\t\t\twidth: `${ size }px`,\n\t\t\t\t\theight: `${ size }px`,\n\t\t\t }\n\t\t\t: {};\n\n\tconst styles = {\n\t\t...sizeStyles,\n\t\t...style,\n\t};\n\n\treturn <span className={ iconClass } style={ styles } { ...extraProps } />;\n}\n\nexport default Dashicon;\n"]}
@@ -41,8 +41,8 @@ function UnforwardedDateTimePicker(_ref, ref) {
41
41
  if (!__nextRemoveHelpButton) {
42
42
  deprecated('Help button in wp.components.DateTimePicker', {
43
43
  since: '13.4',
44
- version: '14.6',
45
- // Six months of plugin releases.
44
+ version: '15.8',
45
+ // One year of plugin releases.
46
46
  hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.'
47
47
  });
48
48
  }
@@ -50,8 +50,8 @@ function UnforwardedDateTimePicker(_ref, ref) {
50
50
  if (!__nextRemoveResetButton) {
51
51
  deprecated('Reset button in wp.components.DateTimePicker', {
52
52
  since: '13.4',
53
- version: '14.6',
54
- // Six months of plugin releases.
53
+ version: '15.8',
54
+ // One year of plugin releases.
55
55
  hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.'
56
56
  });
57
57
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"names":["useState","forwardRef","__","_x","deprecated","Button","default","DatePicker","TimePicker","Wrapper","CalendarHelp","HStack","Heading","Spacer","noop","UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","__nextRemoveHelpButton","__nextRemoveResetButton","since","version","hint","calendarHelpIsVisible","setCalendarHelpIsVisible","onClickDescriptionToggle","DateTimePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState, forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper, CalendarHelp } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { Spacer } from '../../spacer';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t\t__nextRemoveHelpButton = false,\n\t\t__nextRemoveResetButton = false,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\tif ( ! __nextRemoveHelpButton ) {\n\t\tdeprecated( 'Help button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '14.6', // Six months of plugin releases.\n\t\t\thint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\n\tif ( ! __nextRemoveResetButton ) {\n\t\tdeprecated( 'Reset button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '14.6', // Six months of plugin releases.\n\t\t\thint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst [ calendarHelpIsVisible, setCalendarHelpIsVisible ] =\n\t\tuseState( false );\n\n\tfunction onClickDescriptionToggle() {\n\t\tsetCalendarHelpIsVisible( ! calendarHelpIsVisible );\n\t}\n\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t{ ! calendarHelpIsVisible && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\t/>\n\t\t\t\t\t<DatePicker\n\t\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\t\tevents={ events }\n\t\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ calendarHelpIsVisible && (\n\t\t\t\t<CalendarHelp\n\t\t\t\t\tclassName=\"components-datetime__calendar-help\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<Heading level={ 4 }>{ __( 'Click to Select' ) }</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Click the right or left arrows to select other months in the past or the future.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>{ __( 'Click the desired day to select it.' ) }</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t<Heading level={ 4 }>\n\t\t\t\t\t\t{ __( 'Navigating with a keyboard' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\taria-label={ _x( 'Enter', 'keyboard button' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t↵\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t<span>{ __( 'Select the date in focus.' ) }</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Left and Right Arrows' ) }>\n\t\t\t\t\t\t\t\t←/→\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (left) or forward (right) by one day.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Up and Down Arrows' ) }>\n\t\t\t\t\t\t\t\t↑/↓\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (up) or forward (down) by one week.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Page Up and Page Down' ) }>\n\t\t\t\t\t\t\t\t{ __( 'PgUp/PgDn' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (PgUp) or forward (PgDn) by one month.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Home and End' ) }>\n\t\t\t\t\t\t\t\t{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }\n\t\t\t\t\t\t\t\t{ __( 'Home/End' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Go to the first (Home) or last (End) day of a week.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</CalendarHelp>\n\t\t\t) }\n\t\t\t{ ( ! __nextRemoveResetButton || ! __nextRemoveHelpButton ) && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__buttons\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ ! __nextRemoveResetButton &&\n\t\t\t\t\t\t! calendarHelpIsVisible &&\n\t\t\t\t\t\tcurrentDate && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__date-reset-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\tonClick={ () => onChange?.( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t{ ! __nextRemoveHelpButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-datetime__date-help-toggle\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\tonClick={ onClickDescriptionToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ calendarHelpIsVisible\n\t\t\t\t\t\t\t\t? __( 'Close' )\n\t\t\t\t\t\t\t\t: __( 'Calendar Help' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n * const [ date, setDate ] = useState( new Date() );\n *\n * return (\n * <DateTimePicker\n * currentDate={ date }\n * onChange={ ( newDate ) => setDate( newDate ) }\n * is12Hour\n * __nextRemoveHelpButton\n * __nextRemoveResetButton\n * />\n * );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"names":["useState","forwardRef","__","_x","deprecated","Button","default","DatePicker","TimePicker","Wrapper","CalendarHelp","HStack","Heading","Spacer","noop","UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","__nextRemoveHelpButton","__nextRemoveResetButton","since","version","hint","calendarHelpIsVisible","setCalendarHelpIsVisible","onClickDescriptionToggle","DateTimePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState, forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper, CalendarHelp } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { Spacer } from '../../spacer';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t\t__nextRemoveHelpButton = false,\n\t\t__nextRemoveResetButton = false,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\tif ( ! __nextRemoveHelpButton ) {\n\t\tdeprecated( 'Help button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '15.8', // One year of plugin releases.\n\t\t\thint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\n\tif ( ! __nextRemoveResetButton ) {\n\t\tdeprecated( 'Reset button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '15.8', // One year of plugin releases.\n\t\t\thint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst [ calendarHelpIsVisible, setCalendarHelpIsVisible ] =\n\t\tuseState( false );\n\n\tfunction onClickDescriptionToggle() {\n\t\tsetCalendarHelpIsVisible( ! calendarHelpIsVisible );\n\t}\n\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t{ ! calendarHelpIsVisible && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\t/>\n\t\t\t\t\t<DatePicker\n\t\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\t\tevents={ events }\n\t\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ calendarHelpIsVisible && (\n\t\t\t\t<CalendarHelp\n\t\t\t\t\tclassName=\"components-datetime__calendar-help\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<Heading level={ 4 }>{ __( 'Click to Select' ) }</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Click the right or left arrows to select other months in the past or the future.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>{ __( 'Click the desired day to select it.' ) }</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t<Heading level={ 4 }>\n\t\t\t\t\t\t{ __( 'Navigating with a keyboard' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\taria-label={ _x( 'Enter', 'keyboard button' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t↵\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t<span>{ __( 'Select the date in focus.' ) }</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Left and Right Arrows' ) }>\n\t\t\t\t\t\t\t\t←/→\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (left) or forward (right) by one day.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Up and Down Arrows' ) }>\n\t\t\t\t\t\t\t\t↑/↓\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (up) or forward (down) by one week.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Page Up and Page Down' ) }>\n\t\t\t\t\t\t\t\t{ __( 'PgUp/PgDn' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (PgUp) or forward (PgDn) by one month.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Home and End' ) }>\n\t\t\t\t\t\t\t\t{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }\n\t\t\t\t\t\t\t\t{ __( 'Home/End' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Go to the first (Home) or last (End) day of a week.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</CalendarHelp>\n\t\t\t) }\n\t\t\t{ ( ! __nextRemoveResetButton || ! __nextRemoveHelpButton ) && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__buttons\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ ! __nextRemoveResetButton &&\n\t\t\t\t\t\t! calendarHelpIsVisible &&\n\t\t\t\t\t\tcurrentDate && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__date-reset-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\tonClick={ () => onChange?.( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t{ ! __nextRemoveHelpButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-datetime__date-help-toggle\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\tonClick={ onClickDescriptionToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ calendarHelpIsVisible\n\t\t\t\t\t\t\t\t? __( 'Close' )\n\t\t\t\t\t\t\t\t: __( 'Calendar Help' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n * const [ date, setDate ] = useState( new Date() );\n *\n * return (\n * <DateTimePicker\n * currentDate={ date }\n * onChange={ ( newDate ) => setDate( newDate ) }\n * is12Hour\n * __nextRemoveHelpButton\n * __nextRemoveResetButton\n * />\n * );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"]}
@@ -1,39 +1,63 @@
1
1
  import { createElement, Fragment } from "@wordpress/element";
2
2
 
3
+ /**
4
+ * External dependencies
5
+ */
6
+
3
7
  /**
4
8
  * WordPress dependencies
5
9
  */
6
10
  import { throttle } from '@wordpress/compose';
7
11
  import { useEffect, useRef } from '@wordpress/element';
12
+ /**
13
+ * Internal dependencies
14
+ */
15
+
8
16
  const dragImageClass = 'components-draggable__invisible-drag-image';
9
17
  const cloneWrapperClass = 'components-draggable__clone';
10
18
  const clonePadding = 0;
11
19
  const bodyClass = 'is-dragging-components-draggable';
12
20
  /**
13
- * @typedef RenderProp
14
- * @property {(event: import('react').DragEvent) => void} onDraggableStart `onDragStart` handler.
15
- * @property {(event: import('react').DragEvent) => void} onDraggableEnd `onDragEnd` handler.
21
+ * `Draggable` is a Component that provides a way to set up a cross-browser
22
+ * (including IE) customizable drag image and the transfer data for the drag
23
+ * event. It decouples the drag handle and the element to drag: use it by
24
+ * wrapping the component that will become the drag handle and providing the DOM
25
+ * ID of the element to drag.
26
+ *
27
+ * Note that the drag handle needs to declare the `draggable="true"` property
28
+ * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event
29
+ * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`
30
+ * takes care of the logic to setup the drag image and the transfer data, but is
31
+ * not concerned with creating an actual DOM element that is draggable.
32
+ *
33
+ * ```jsx
34
+ * import { Draggable, Panel, PanelBody } from '@wordpress/components';
35
+ * import { Icon, more } from '@wordpress/icons';
36
+ *
37
+ * const MyDraggable = () => (
38
+ * <div id="draggable-panel">
39
+ * <Panel header="Draggable panel">
40
+ * <PanelBody>
41
+ * <Draggable elementId="draggable-panel" transferData={ {} }>
42
+ * { ( { onDraggableStart, onDraggableEnd } ) => (
43
+ * <div
44
+ * className="example-drag-handle"
45
+ * draggable
46
+ * onDragStart={ onDraggableStart }
47
+ * onDragEnd={ onDraggableEnd }
48
+ * >
49
+ * <Icon icon={ more } />
50
+ * </div>
51
+ * ) }
52
+ * </Draggable>
53
+ * </PanelBody>
54
+ * </Panel>
55
+ * </div>
56
+ * );
57
+ * ```
16
58
  */
17
59
 
18
- /**
19
- * @typedef Props
20
- * @property {(props: RenderProp) => JSX.Element | null} children Children.
21
- * @property {(event: import('react').DragEvent) => void} [onDragStart] Callback when dragging starts.
22
- * @property {(event: import('react').DragEvent) => void} [onDragOver] Callback when dragging happens over the document.
23
- * @property {(event: import('react').DragEvent) => void} [onDragEnd] Callback when dragging ends.
24
- * @property {string} [cloneClassname] Classname for the cloned element.
25
- * @property {string} [elementId] ID for the element.
26
- * @property {any} [transferData] Transfer data for the drag event.
27
- * @property {string} [__experimentalTransferDataType] The transfer data type to set.
28
- * @property {import('react').ReactNode} __experimentalDragComponent Component to show when dragging.
29
- */
30
-
31
- /**
32
- * @param {Props} props
33
- * @return {JSX.Element} A draggable component.
34
- */
35
-
36
- export default function Draggable(_ref) {
60
+ export function Draggable(_ref) {
37
61
  let {
38
62
  children,
39
63
  onDragStart,
@@ -45,14 +69,12 @@ export default function Draggable(_ref) {
45
69
  __experimentalTransferDataType: transferDataType = 'text',
46
70
  __experimentalDragComponent: dragComponent
47
71
  } = _ref;
48
-
49
- /** @type {import('react').MutableRefObject<HTMLDivElement | null>} */
50
72
  const dragComponentRef = useRef(null);
51
73
  const cleanup = useRef(() => {});
52
74
  /**
53
75
  * Removes the element clone, resets cursor, and removes drag listener.
54
76
  *
55
- * @param {import('react').DragEvent} event The non-custom DragEvent.
77
+ * @param event The non-custom DragEvent.
56
78
  */
57
79
 
58
80
  function end(event) {
@@ -71,20 +93,19 @@ export default function Draggable(_ref) {
71
93
  * - Sets transfer data.
72
94
  * - Adds dragover listener.
73
95
  *
74
- * @param {import('react').DragEvent} event The non-custom DragEvent.
96
+ * @param event The non-custom DragEvent.
75
97
  */
76
98
 
77
99
 
78
100
  function start(event) {
79
- // @ts-ignore We know that ownerDocument does exist on an Element
80
101
  const {
81
102
  ownerDocument
82
103
  } = event.target;
83
104
  event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));
84
105
  const cloneWrapper = ownerDocument.createElement('div'); // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.
85
106
 
86
- cloneWrapper.style.top = 0;
87
- cloneWrapper.style.left = 0;
107
+ cloneWrapper.style.top = '0';
108
+ cloneWrapper.style.left = '0';
88
109
  const dragImage = ownerDocument.createElement('div'); // Set a fake drag image to avoid browser defaults. Remove from DOM
89
110
  // right after. event.dataTransfer.setDragImage is not supported yet in
90
111
  // IE, we need to check for its existence first.
@@ -120,8 +141,8 @@ export default function Draggable(_ref) {
120
141
 
121
142
  const elementRect = element.getBoundingClientRect();
122
143
  const elementWrapper = element.parentNode;
123
- const elementTopOffset = parseInt(elementRect.top, 10);
124
- const elementLeftOffset = parseInt(elementRect.left, 10);
144
+ const elementTopOffset = elementRect.top;
145
+ const elementLeftOffset = elementRect.left;
125
146
  cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;
126
147
  const clone = element.cloneNode(true);
127
148
  clone.id = `clone-${elementId}`; // Position clone right over the original element (20px padding).
@@ -130,18 +151,19 @@ export default function Draggable(_ref) {
130
151
  y = elementTopOffset - clonePadding;
131
152
  cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`; // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
132
153
 
133
- Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode.removeChild(child));
154
+ Array.from(clone.querySelectorAll('iframe')).forEach(child => {
155
+ var _child$parentNode;
156
+
157
+ return (_child$parentNode = child.parentNode) === null || _child$parentNode === void 0 ? void 0 : _child$parentNode.removeChild(child);
158
+ });
134
159
  cloneWrapper.appendChild(clone); // Inject the cloneWrapper into the DOM.
135
160
 
136
- elementWrapper.appendChild(cloneWrapper);
161
+ elementWrapper === null || elementWrapper === void 0 ? void 0 : elementWrapper.appendChild(cloneWrapper);
137
162
  } // Mark the current cursor coordinates.
138
163
 
139
164
 
140
165
  let cursorLeft = event.clientX;
141
166
  let cursorTop = event.clientY;
142
- /**
143
- * @param {import('react').DragEvent<Element>} e
144
- */
145
167
 
146
168
  function over(e) {
147
169
  // Skip doing any work if mouse has not moved.
@@ -172,8 +194,6 @@ export default function Draggable(_ref) {
172
194
  // https://reactjs.org/docs/events.html#event-pooling
173
195
 
174
196
  event.persist();
175
- /** @type {number | undefined} */
176
-
177
197
  let timerId;
178
198
 
179
199
  if (onDragStart) {
@@ -211,4 +231,5 @@ export default function Draggable(_ref) {
211
231
  ref: dragComponentRef
212
232
  }, dragComponent));
213
233
  }
234
+ export default Draggable;
214
235
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/draggable/index.js"],"names":["throttle","useEffect","useRef","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","cleanup","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","parseInt","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","addEventListener","persist","timerId","setTimeout","remove","removeEventListener","clearTimeout","onDraggableStart","onDraggableEnd","display"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * @typedef RenderProp\n * @property {(event: import('react').DragEvent) => void} onDraggableStart `onDragStart` handler.\n * @property {(event: import('react').DragEvent) => void} onDraggableEnd `onDragEnd` handler.\n */\n\n/**\n * @typedef Props\n * @property {(props: RenderProp) => JSX.Element | null} children Children.\n * @property {(event: import('react').DragEvent) => void} [onDragStart] Callback when dragging starts.\n * @property {(event: import('react').DragEvent) => void} [onDragOver] Callback when dragging happens over the document.\n * @property {(event: import('react').DragEvent) => void} [onDragEnd] Callback when dragging ends.\n * @property {string} [cloneClassname] Classname for the cloned element.\n * @property {string} [elementId] ID for the element.\n * @property {any} [transferData] Transfer data for the drag event.\n * @property {string} [__experimentalTransferDataType] The transfer data type to set.\n * @property {import('react').ReactNode} __experimentalDragComponent Component to show when dragging.\n */\n\n/**\n * @param {Props} props\n * @return {JSX.Element} A draggable component.\n */\nexport default function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n} ) {\n\t/** @type {import('react').MutableRefObject<HTMLDivElement | null>} */\n\tconst dragComponentRef = useRef( null );\n\tconst cleanup = useRef( () => {} );\n\n\t/**\n\t * Removes the element clone, resets cursor, and removes drag listener.\n\t *\n\t * @param {import('react').DragEvent} event The non-custom DragEvent.\n\t */\n\tfunction end( event ) {\n\t\tevent.preventDefault();\n\t\tcleanup.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/**\n\t * This method does a couple of things:\n\t *\n\t * - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t *\n\t * @param {import('react').DragEvent} event The non-custom DragEvent.\n\t */\n\tfunction start( event ) {\n\t\t// @ts-ignore We know that ownerDocument does exist on an Element\n\t\tconst { ownerDocument } = event.target;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = 0;\n\t\tcloneWrapper.style.left = 0;\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById( elementId );\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = parseInt( elementRect.top, 10 );\n\t\t\tconst elementLeftOffset = parseInt( elementRect.left, 10 );\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding * 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true );\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from( clone.querySelectorAll( 'iframe' ) ).forEach(\n\t\t\t\t( child ) => child.parentNode.removeChild( child )\n\t\t\t);\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\telementWrapper.appendChild( cloneWrapper );\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\t/**\n\t\t * @param {import('react').DragEvent<Element>} e\n\t\t */\n\t\tfunction over( e ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\t// @ts-ignore\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\t// Allow the Synthetic Event to be accessed from asynchronous code.\n\t\t// https://reactjs.org/docs/events.html#event-pooling\n\t\tevent.persist();\n\n\t\t/** @type {number | undefined} */\n\t\tlet timerId;\n\n\t\tif ( onDragStart ) {\n\t\t\ttimerId = setTimeout( () => onDragStart( event ) );\n\t\t}\n\n\t\tcleanup.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\n\t\t\tclearTimeout( timerId );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanup.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/draggable/index.tsx"],"names":["throttle","useEffect","useRef","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","cleanup","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","addEventListener","persist","timerId","setTimeout","remove","removeEventListener","clearTimeout","onDraggableStart","onDraggableEnd","display"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { DragEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DraggableProps } from './types';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n * <div id=\"draggable-panel\">\n * <Panel header=\"Draggable panel\">\n * <PanelBody>\n * <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n * { ( { onDraggableStart, onDraggableEnd } ) => (\n * <div\n * className=\"example-drag-handle\"\n * draggable\n * onDragStart={ onDraggableStart }\n * onDragEnd={ onDraggableEnd }\n * >\n * <Icon icon={ more } />\n * </div>\n * ) }\n * </Draggable>\n * </PanelBody>\n * </Panel>\n * </div>\n * );\n * ```\n */\nexport function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n}: DraggableProps ) {\n\tconst dragComponentRef = useRef< HTMLDivElement >( null );\n\tconst cleanup = useRef( () => {} );\n\n\t/**\n\t * Removes the element clone, resets cursor, and removes drag listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction end( event: DragEvent ) {\n\t\tevent.preventDefault();\n\t\tcleanup.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/**\n\t * This method does a couple of things:\n\t *\n\t * - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction start( event: DragEvent ) {\n\t\tconst { ownerDocument } = event.target as HTMLElement;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = '0';\n\t\tcloneWrapper.style.left = '0';\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById(\n\t\t\t\telementId\n\t\t\t) as HTMLElement;\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = elementRect.top;\n\t\t\tconst elementLeftOffset = elementRect.left;\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding * 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true ) as HTMLElement;\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from< HTMLIFrameElement >(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode?.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\telementWrapper?.appendChild( cloneWrapper );\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\tfunction over( e: DragEvent ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\t// @ts-ignore\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\t// Allow the Synthetic Event to be accessed from asynchronous code.\n\t\t// https://reactjs.org/docs/events.html#event-pooling\n\t\tevent.persist();\n\n\t\tlet timerId: number | undefined;\n\n\t\tif ( onDragStart ) {\n\t\t\ttimerId = setTimeout( () => onDragStart( event ) );\n\t\t}\n\n\t\tcleanup.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\n\t\t\tclearTimeout( timerId );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanup.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Draggable;\n"]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -3,7 +3,7 @@ import { createElement } from "@wordpress/element";
3
3
  /**
4
4
  * External dependencies
5
5
  */
6
- import { isEqual } from 'lodash';
6
+ import fastDeepEqual from 'fast-deep-equal/es6';
7
7
  /**
8
8
  * WordPress dependencies
9
9
  */
@@ -58,7 +58,7 @@ function DuotonePicker(_ref) {
58
58
  __('Duotone code: %s'), slug);
59
59
  const label = name ? sprintf( // translators: %s: The name of the option e.g: "Dark grayscale".
60
60
  __('Duotone: %s'), name) : tooltipText;
61
- const isSelected = isEqual(colors, value);
61
+ const isSelected = fastDeepEqual(colors, value);
62
62
  return createElement(CircularOptionPicker.Option, {
63
63
  key: slug,
64
64
  value: colors,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.js"],"names":["isEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from '../color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\n\nfunction DuotonePicker( {\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ __( 'Unset' ) }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst options = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = isEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\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\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\tonChange( newValue );\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</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.js"],"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from '../color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\n\nfunction DuotonePicker( {\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ __( 'Unset' ) }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst options = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\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\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\tonChange( newValue );\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</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"]}
@@ -51,7 +51,6 @@ export function useFlex(props) {
51
51
  const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp];
52
52
  const direction = useResponsiveValue(directionAsArray);
53
53
  const isColumn = typeof direction === 'string' && !!direction.includes('column');
54
- const isReverse = typeof direction === 'string' && direction.includes('reverse');
55
54
  const cx = useCx();
56
55
  const classes = useMemo(() => {
57
56
  const base = /*#__PURE__*/css({
@@ -62,9 +61,9 @@ export function useFlex(props) {
62
61
  justifyContent: justify,
63
62
  height: isColumn && expanded ? '100%' : undefined,
64
63
  width: !isColumn && expanded ? '100%' : undefined
65
- }, process.env.NODE_ENV === "production" ? "" : ";label:base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUVlIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0sIFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi8uLi91aS91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZsZXhQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gdXNlRGVwcmVjYXRlZFByb3BzKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPlxuKTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPiB7XG5cdGNvbnN0IHsgaXNSZXZlcnNlZCwgLi4ub3RoZXJQcm9wcyB9ID0gcHJvcHM7XG5cblx0aWYgKCB0eXBlb2YgaXNSZXZlcnNlZCAhPT0gJ3VuZGVmaW5lZCcgKSB7XG5cdFx0ZGVwcmVjYXRlZCggJ0ZsZXggaXNSZXZlcnNlZCcsIHtcblx0XHRcdGFsdGVybmF0aXZlOiAnRmxleCBkaXJlY3Rpb249XCJyb3ctcmV2ZXJzZVwiIG9yIFwiY29sdW1uLXJldmVyc2VcIicsXG5cdFx0XHRzaW5jZTogJzUuOScsXG5cdFx0fSApO1xuXHRcdHJldHVybiB7XG5cdFx0XHQuLi5vdGhlclByb3BzLFxuXHRcdFx0ZGlyZWN0aW9uOiBpc1JldmVyc2VkID8gJ3Jvdy1yZXZlcnNlJyA6ICdyb3cnLFxuXHRcdH07XG5cdH1cblxuXHRyZXR1cm4gb3RoZXJQcm9wcztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZsZXgoIHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+ICkge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24gPSAnY2VudGVyJyxcblx0XHRjbGFzc05hbWUsXG5cdFx0ZGlyZWN0aW9uOiBkaXJlY3Rpb25Qcm9wID0gJ3JvdycsXG5cdFx0ZXhwYW5kZWQgPSB0cnVlLFxuXHRcdGdhcCA9IDIsXG5cdFx0anVzdGlmeSA9ICdzcGFjZS1iZXR3ZWVuJyxcblx0XHR3cmFwID0gZmFsc2UsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggdXNlRGVwcmVjYXRlZFByb3BzKCBwcm9wcyApLCAnRmxleCcgKTtcblxuXHRjb25zdCBkaXJlY3Rpb25Bc0FycmF5ID0gQXJyYXkuaXNBcnJheSggZGlyZWN0aW9uUHJvcCApXG5cdFx0PyBkaXJlY3Rpb25Qcm9wXG5cdFx0OiBbIGRpcmVjdGlvblByb3AgXTtcblx0Y29uc3QgZGlyZWN0aW9uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBkaXJlY3Rpb25Bc0FycmF5ICk7XG5cblx0Y29uc3QgaXNDb2x1bW4gPVxuXHRcdHR5cGVvZiBkaXJlY3Rpb24gPT09ICdzdHJpbmcnICYmICEhIGRpcmVjdGlvbi5pbmNsdWRlcyggJ2NvbHVtbicgKTtcblx0Y29uc3QgaXNSZXZlcnNlID1cblx0XHR0eXBlb2YgZGlyZWN0aW9uID09PSAnc3RyaW5nJyAmJiBkaXJlY3Rpb24uaW5jbHVkZXMoICdyZXZlcnNlJyApO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblxuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyggKCkgPT4ge1xuXHRcdGNvbnN0IGJhc2UgPSBjc3MoIHtcblx0XHRcdGFsaWduSXRlbXM6IGlzQ29sdW1uID8gJ25vcm1hbCcgOiBhbGlnbixcblx0XHRcdGZsZXhEaXJlY3Rpb246IGRpcmVjdGlvbixcblx0XHRcdGZsZXhXcmFwOiB3cmFwID8gJ3dyYXAnIDogdW5kZWZpbmVkLFxuXHRcdFx0Z2FwOiBzcGFjZSggZ2FwICksXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdGhlaWdodDogaXNDb2x1bW4gJiYgZXhwYW5kZWQgPyAnMTAwJScgOiB1bmRlZmluZWQsXG5cdFx0XHR3aWR0aDogISBpc0NvbHVtbiAmJiBleHBhbmRlZCA/ICcxMDAlJyA6IHVuZGVmaW5lZCxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goXG5cdFx0XHRzdHlsZXMuRmxleCxcblx0XHRcdGJhc2UsXG5cdFx0XHRpc0NvbHVtbiA/IHN0eWxlcy5JdGVtc0NvbHVtbiA6IHN0eWxlcy5JdGVtc1Jvdyxcblx0XHRcdGNsYXNzTmFtZVxuXHRcdCk7XG5cdH0sIFtcblx0XHRhbGlnbixcblx0XHRjbGFzc05hbWUsXG5cdFx0Y3gsXG5cdFx0ZGlyZWN0aW9uLFxuXHRcdGV4cGFuZGVkLFxuXHRcdGdhcCxcblx0XHRpc0NvbHVtbixcblx0XHRpc1JldmVyc2UsXG5cdFx0anVzdGlmeSxcblx0XHR3cmFwLFxuXHRdICk7XG5cblx0cmV0dXJuIHsgLi4ub3RoZXJQcm9wcywgY2xhc3NOYW1lOiBjbGFzc2VzLCBpc0NvbHVtbiB9O1xufVxuIl19 */");
64
+ }, process.env.NODE_ENV === "production" ? "" : ";label:base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0RlIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0sIFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi8uLi91aS91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZsZXhQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gdXNlRGVwcmVjYXRlZFByb3BzKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPlxuKTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPiB7XG5cdGNvbnN0IHsgaXNSZXZlcnNlZCwgLi4ub3RoZXJQcm9wcyB9ID0gcHJvcHM7XG5cblx0aWYgKCB0eXBlb2YgaXNSZXZlcnNlZCAhPT0gJ3VuZGVmaW5lZCcgKSB7XG5cdFx0ZGVwcmVjYXRlZCggJ0ZsZXggaXNSZXZlcnNlZCcsIHtcblx0XHRcdGFsdGVybmF0aXZlOiAnRmxleCBkaXJlY3Rpb249XCJyb3ctcmV2ZXJzZVwiIG9yIFwiY29sdW1uLXJldmVyc2VcIicsXG5cdFx0XHRzaW5jZTogJzUuOScsXG5cdFx0fSApO1xuXHRcdHJldHVybiB7XG5cdFx0XHQuLi5vdGhlclByb3BzLFxuXHRcdFx0ZGlyZWN0aW9uOiBpc1JldmVyc2VkID8gJ3Jvdy1yZXZlcnNlJyA6ICdyb3cnLFxuXHRcdH07XG5cdH1cblxuXHRyZXR1cm4gb3RoZXJQcm9wcztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZsZXgoIHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+ICkge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24gPSAnY2VudGVyJyxcblx0XHRjbGFzc05hbWUsXG5cdFx0ZGlyZWN0aW9uOiBkaXJlY3Rpb25Qcm9wID0gJ3JvdycsXG5cdFx0ZXhwYW5kZWQgPSB0cnVlLFxuXHRcdGdhcCA9IDIsXG5cdFx0anVzdGlmeSA9ICdzcGFjZS1iZXR3ZWVuJyxcblx0XHR3cmFwID0gZmFsc2UsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggdXNlRGVwcmVjYXRlZFByb3BzKCBwcm9wcyApLCAnRmxleCcgKTtcblxuXHRjb25zdCBkaXJlY3Rpb25Bc0FycmF5ID0gQXJyYXkuaXNBcnJheSggZGlyZWN0aW9uUHJvcCApXG5cdFx0PyBkaXJlY3Rpb25Qcm9wXG5cdFx0OiBbIGRpcmVjdGlvblByb3AgXTtcblx0Y29uc3QgZGlyZWN0aW9uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBkaXJlY3Rpb25Bc0FycmF5ICk7XG5cblx0Y29uc3QgaXNDb2x1bW4gPVxuXHRcdHR5cGVvZiBkaXJlY3Rpb24gPT09ICdzdHJpbmcnICYmICEhIGRpcmVjdGlvbi5pbmNsdWRlcyggJ2NvbHVtbicgKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRjb25zdCBiYXNlID0gY3NzKCB7XG5cdFx0XHRhbGlnbkl0ZW1zOiBpc0NvbHVtbiA/ICdub3JtYWwnIDogYWxpZ24sXG5cdFx0XHRmbGV4RGlyZWN0aW9uOiBkaXJlY3Rpb24sXG5cdFx0XHRmbGV4V3JhcDogd3JhcCA/ICd3cmFwJyA6IHVuZGVmaW5lZCxcblx0XHRcdGdhcDogc3BhY2UoIGdhcCApLFxuXHRcdFx0anVzdGlmeUNvbnRlbnQ6IGp1c3RpZnksXG5cdFx0XHRoZWlnaHQ6IGlzQ29sdW1uICYmIGV4cGFuZGVkID8gJzEwMCUnIDogdW5kZWZpbmVkLFxuXHRcdFx0d2lkdGg6ICEgaXNDb2x1bW4gJiYgZXhwYW5kZWQgPyAnMTAwJScgOiB1bmRlZmluZWQsXG5cdFx0fSApO1xuXG5cdFx0cmV0dXJuIGN4KFxuXHRcdFx0c3R5bGVzLkZsZXgsXG5cdFx0XHRiYXNlLFxuXHRcdFx0aXNDb2x1bW4gPyBzdHlsZXMuSXRlbXNDb2x1bW4gOiBzdHlsZXMuSXRlbXNSb3csXG5cdFx0XHRjbGFzc05hbWVcblx0XHQpO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGN4LFxuXHRcdGRpcmVjdGlvbixcblx0XHRleHBhbmRlZCxcblx0XHRnYXAsXG5cdFx0aXNDb2x1bW4sXG5cdFx0anVzdGlmeSxcblx0XHR3cmFwLFxuXHRdICk7XG5cblx0cmV0dXJuIHsgLi4ub3RoZXJQcm9wcywgY2xhc3NOYW1lOiBjbGFzc2VzLCBpc0NvbHVtbiB9O1xufVxuIl19 */");
66
65
  return cx(styles.Flex, base, isColumn ? styles.ItemsColumn : styles.ItemsRow, className);
67
- }, [align, className, cx, direction, expanded, gap, isColumn, isReverse, justify, wrap]);
66
+ }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]);
68
67
  return { ...otherProps,
69
68
  className: classes,
70
69
  isColumn
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["css","useMemo","deprecated","useContextSystem","useResponsiveValue","space","styles","useCx","useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","isReverse","cx","classes","base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","Flex","ItemsColumn","ItemsRow"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign = 'center',\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\tconst isReverse =\n\t\ttypeof direction === 'string' && direction.includes( 'reverse' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst base = css( {\n\t\t\talignItems: isColumn ? 'normal' : align,\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tgap: space( gap ),\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t} );\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tbase,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tisReverse,\n\t\tjustify,\n\t\twrap,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["css","useMemo","deprecated","useContextSystem","useResponsiveValue","space","styles","useCx","useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","cx","classes","base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","Flex","ItemsColumn","ItemsRow"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,oBAAxB;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,kBAAT,QAAmC,qCAAnC;AACA,SAASC,KAAT,QAAsB,sBAAtB;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,aAAtB;;AAGA,SAASC,kBAAT,CACCC,KADD,EAE+C;AAC9C,QAAM;AAAEC,IAAAA,UAAF;AAAc,OAAGC;AAAjB,MAAgCF,KAAtC;;AAEA,MAAK,OAAOC,UAAP,KAAsB,WAA3B,EAAyC;AACxCR,IAAAA,UAAU,CAAE,iBAAF,EAAqB;AAC9BU,MAAAA,WAAW,EAAE,kDADiB;AAE9BC,MAAAA,KAAK,EAAE;AAFuB,KAArB,CAAV;AAIA,WAAO,EACN,GAAGF,UADG;AAENG,MAAAA,SAAS,EAAEJ,UAAU,GAAG,aAAH,GAAmB;AAFlC,KAAP;AAIA;;AAED,SAAOC,UAAP;AACA;;AAED,OAAO,SAASI,OAAT,CAAkBN,KAAlB,EAAuE;AAC7E,QAAM;AACLO,IAAAA,KAAK,GAAG,QADH;AAELC,IAAAA,SAFK;AAGLH,IAAAA,SAAS,EAAEI,aAAa,GAAG,KAHtB;AAILC,IAAAA,QAAQ,GAAG,IAJN;AAKLC,IAAAA,GAAG,GAAG,CALD;AAMLC,IAAAA,OAAO,GAAG,eANL;AAOLC,IAAAA,IAAI,GAAG,KAPF;AAQL,OAAGX;AARE,MASFR,gBAAgB,CAAEK,kBAAkB,CAAEC,KAAF,CAApB,EAA+B,MAA/B,CATpB;AAWA,QAAMc,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAeP,aAAf,IACtBA,aADsB,GAEtB,CAAEA,aAAF,CAFH;AAGA,QAAMJ,SAAS,GAAGV,kBAAkB,CAAEmB,gBAAF,CAApC;AAEA,QAAMG,QAAQ,GACb,OAAOZ,SAAP,KAAqB,QAArB,IAAiC,CAAC,CAAEA,SAAS,CAACa,QAAV,CAAoB,QAApB,CADrC;AAGA,QAAMC,EAAE,GAAGrB,KAAK,EAAhB;AAEA,QAAMsB,OAAO,GAAG5B,OAAO,CAAE,MAAM;AAC9B,UAAM6B,IAAI,gBAAG9B,GAAG,CAAE;AACjB+B,MAAAA,UAAU,EAAEL,QAAQ,GAAG,QAAH,GAAcV,KADjB;AAEjBgB,MAAAA,aAAa,EAAElB,SAFE;AAGjBmB,MAAAA,QAAQ,EAAEX,IAAI,GAAG,MAAH,GAAYY,SAHT;AAIjBd,MAAAA,GAAG,EAAEf,KAAK,CAAEe,GAAF,CAJO;AAKjBe,MAAAA,cAAc,EAAEd,OALC;AAMjBe,MAAAA,MAAM,EAAEV,QAAQ,IAAIP,QAAZ,GAAuB,MAAvB,GAAgCe,SANvB;AAOjBG,MAAAA,KAAK,EAAE,CAAEX,QAAF,IAAcP,QAAd,GAAyB,MAAzB,GAAkCe;AAPxB,KAAF,0iHAAhB;AAUA,WAAON,EAAE,CACRtB,MAAM,CAACgC,IADC,EAERR,IAFQ,EAGRJ,QAAQ,GAAGpB,MAAM,CAACiC,WAAV,GAAwBjC,MAAM,CAACkC,QAH/B,EAIRvB,SAJQ,CAAT;AAMA,GAjBsB,EAiBpB,CACFD,KADE,EAEFC,SAFE,EAGFW,EAHE,EAIFd,SAJE,EAKFK,QALE,EAMFC,GANE,EAOFM,QAPE,EAQFL,OARE,EASFC,IATE,CAjBoB,CAAvB;AA6BA,SAAO,EAAE,GAAGX,UAAL;AAAiBM,IAAAA,SAAS,EAAEY,OAA5B;AAAqCH,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign = 'center',\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst base = css( {\n\t\t\talignItems: isColumn ? 'normal' : align,\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tgap: space( gap ),\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t} );\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tbase,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tjustify,\n\t\twrap,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}