@wordpress/components 19.1.5 → 19.2.1-next.33ec3857e2.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 (384) hide show
  1. package/CHANGELOG.md +40 -3
  2. package/build/angle-picker-control/index.js +2 -0
  3. package/build/angle-picker-control/index.js.map +1 -1
  4. package/build/button/index.native.js +13 -3
  5. package/build/button/index.native.js.map +1 -1
  6. package/build/checkbox-control/index.js +1 -1
  7. package/build/checkbox-control/index.js.map +1 -1
  8. package/build/clipboard-button/index.js +1 -2
  9. package/build/clipboard-button/index.js.map +1 -1
  10. package/build/color-palette/index.js +12 -0
  11. package/build/color-palette/index.js.map +1 -1
  12. package/build/color-picker/color-display.js +4 -2
  13. package/build/color-picker/color-display.js.map +1 -1
  14. package/build/color-picker/hex-input.js +3 -1
  15. package/build/color-picker/hex-input.js.map +1 -1
  16. package/build/color-picker/input-with-slider.js +3 -1
  17. package/build/color-picker/input-with-slider.js.map +1 -1
  18. package/build/confirm-dialog/component.js +103 -0
  19. package/build/confirm-dialog/component.js.map +1 -0
  20. package/build/confirm-dialog/index.js +16 -0
  21. package/build/confirm-dialog/index.js.map +1 -0
  22. package/build/confirm-dialog/types.js +6 -0
  23. package/build/confirm-dialog/types.js.map +1 -0
  24. package/build/custom-gradient-picker/index.js +1 -0
  25. package/build/custom-gradient-picker/index.js.map +1 -1
  26. package/build/date-time/date.js +63 -86
  27. package/build/date-time/date.js.map +1 -1
  28. package/build/date-time/utils.js +32 -0
  29. package/build/date-time/utils.js.map +1 -0
  30. package/build/divider/component.js +8 -7
  31. package/build/divider/component.js.map +1 -1
  32. package/build/divider/styles.js +38 -13
  33. package/build/divider/styles.js.map +1 -1
  34. package/build/drop-zone/index.js +14 -6
  35. package/build/drop-zone/index.js.map +1 -1
  36. package/build/drop-zone/provider.js +1 -0
  37. package/build/drop-zone/provider.js.map +1 -1
  38. package/build/flyout/styles.js +2 -2
  39. package/build/flyout/styles.js.map +1 -1
  40. package/build/focusable-iframe/index.js +1 -0
  41. package/build/focusable-iframe/index.js.map +1 -1
  42. package/build/font-size-picker/index.js +10 -9
  43. package/build/font-size-picker/index.js.map +1 -1
  44. package/build/font-size-picker/utils.js +28 -17
  45. package/build/font-size-picker/utils.js.map +1 -1
  46. package/build/higher-order/with-focus-outside/index.js +2 -0
  47. package/build/higher-order/with-focus-outside/index.js.map +1 -1
  48. package/build/index.js +8 -0
  49. package/build/index.js.map +1 -1
  50. package/build/input-control/styles/input-control-styles.js +44 -32
  51. package/build/input-control/styles/input-control-styles.js.map +1 -1
  52. package/build/mobile/bottom-sheet/link-suggestion-item-cell.native.js +10 -3
  53. package/build/mobile/bottom-sheet/link-suggestion-item-cell.native.js.map +1 -1
  54. package/build/mobile/color-settings/index.native.js +4 -2
  55. package/build/mobile/color-settings/index.native.js.map +1 -1
  56. package/build/mobile/color-settings/palette.screen.native.js +7 -6
  57. package/build/mobile/color-settings/palette.screen.native.js.map +1 -1
  58. package/build/mobile/global-styles-context/utils.native.js +1 -1
  59. package/build/mobile/global-styles-context/utils.native.js.map +1 -1
  60. package/build/mobile/gridicons/index.native.js +3 -1
  61. package/build/mobile/gridicons/index.native.js.map +1 -1
  62. package/build/mobile/link-picker/index.native.js +45 -4
  63. package/build/mobile/link-picker/index.native.js.map +1 -1
  64. package/build/mobile/link-settings/index.native.js +10 -0
  65. package/build/mobile/link-settings/index.native.js.map +1 -1
  66. package/build/modal/aria-helper.js +2 -0
  67. package/build/modal/aria-helper.js.map +1 -1
  68. package/build/modal/index.js +17 -8
  69. package/build/modal/index.js.map +1 -1
  70. package/build/select-control/styles/select-control-styles.js +33 -9
  71. package/build/select-control/styles/select-control-styles.js.map +1 -1
  72. package/build/style-provider/index.js +2 -0
  73. package/build/style-provider/index.js.map +1 -1
  74. package/build/toggle-group-control/toggle-group-control/component.js +7 -2
  75. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  76. package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +25 -14
  77. package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +1 -1
  78. package/build/tools-panel/styles.js +12 -10
  79. package/build/tools-panel/styles.js.map +1 -1
  80. package/build/tools-panel/tools-panel/component.js +6 -8
  81. package/build/tools-panel/tools-panel/component.js.map +1 -1
  82. package/build/tools-panel/tools-panel/hook.js +48 -17
  83. package/build/tools-panel/tools-panel/hook.js.map +1 -1
  84. package/build/tools-panel/tools-panel-item/hook.js +5 -1
  85. package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
  86. package/build/unit-control/styles/unit-control-styles.js +23 -41
  87. package/build/unit-control/styles/unit-control-styles.js.map +1 -1
  88. package/build/z-stack/component.js.map +1 -1
  89. package/build/z-stack/styles.js +10 -8
  90. package/build/z-stack/styles.js.map +1 -1
  91. package/build-module/angle-picker-control/index.js +2 -0
  92. package/build-module/angle-picker-control/index.js.map +1 -1
  93. package/build-module/button/index.native.js +13 -3
  94. package/build-module/button/index.native.js.map +1 -1
  95. package/build-module/checkbox-control/index.js +1 -1
  96. package/build-module/checkbox-control/index.js.map +1 -1
  97. package/build-module/clipboard-button/index.js +1 -2
  98. package/build-module/clipboard-button/index.js.map +1 -1
  99. package/build-module/color-palette/index.js +13 -1
  100. package/build-module/color-palette/index.js.map +1 -1
  101. package/build-module/color-picker/color-display.js +3 -2
  102. package/build-module/color-picker/color-display.js.map +1 -1
  103. package/build-module/color-picker/hex-input.js +2 -1
  104. package/build-module/color-picker/hex-input.js.map +1 -1
  105. package/build-module/color-picker/input-with-slider.js +2 -1
  106. package/build-module/color-picker/input-with-slider.js.map +1 -1
  107. package/build-module/confirm-dialog/component.js +84 -0
  108. package/build-module/confirm-dialog/component.js.map +1 -0
  109. package/build-module/confirm-dialog/index.js +6 -0
  110. package/build-module/confirm-dialog/index.js.map +1 -0
  111. package/build-module/confirm-dialog/types.js +2 -0
  112. package/build-module/confirm-dialog/types.js.map +1 -0
  113. package/build-module/custom-gradient-picker/index.js +1 -0
  114. package/build-module/custom-gradient-picker/index.js.map +1 -1
  115. package/build-module/date-time/date.js +63 -87
  116. package/build-module/date-time/date.js.map +1 -1
  117. package/build-module/date-time/utils.js +20 -0
  118. package/build-module/date-time/utils.js.map +1 -0
  119. package/build-module/divider/component.js +8 -7
  120. package/build-module/divider/component.js.map +1 -1
  121. package/build-module/divider/styles.js +37 -13
  122. package/build-module/divider/styles.js.map +1 -1
  123. package/build-module/drop-zone/index.js +14 -6
  124. package/build-module/drop-zone/index.js.map +1 -1
  125. package/build-module/drop-zone/provider.js +1 -0
  126. package/build-module/drop-zone/provider.js.map +1 -1
  127. package/build-module/flyout/styles.js +2 -2
  128. package/build-module/flyout/styles.js.map +1 -1
  129. package/build-module/focusable-iframe/index.js +1 -0
  130. package/build-module/focusable-iframe/index.js.map +1 -1
  131. package/build-module/font-size-picker/index.js +10 -9
  132. package/build-module/font-size-picker/index.js.map +1 -1
  133. package/build-module/font-size-picker/utils.js +28 -17
  134. package/build-module/font-size-picker/utils.js.map +1 -1
  135. package/build-module/higher-order/with-focus-outside/index.js +1 -0
  136. package/build-module/higher-order/with-focus-outside/index.js.map +1 -1
  137. package/build-module/index.js +1 -0
  138. package/build-module/index.js.map +1 -1
  139. package/build-module/input-control/styles/input-control-styles.js +44 -32
  140. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  141. package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js +10 -4
  142. package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js.map +1 -1
  143. package/build-module/mobile/color-settings/index.native.js +4 -2
  144. package/build-module/mobile/color-settings/index.native.js.map +1 -1
  145. package/build-module/mobile/color-settings/palette.screen.native.js +7 -6
  146. package/build-module/mobile/color-settings/palette.screen.native.js.map +1 -1
  147. package/build-module/mobile/global-styles-context/utils.native.js +1 -1
  148. package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
  149. package/build-module/mobile/gridicons/index.native.js +1 -0
  150. package/build-module/mobile/gridicons/index.native.js.map +1 -1
  151. package/build-module/mobile/link-picker/index.native.js +50 -8
  152. package/build-module/mobile/link-picker/index.native.js.map +1 -1
  153. package/build-module/mobile/link-settings/index.native.js +10 -0
  154. package/build-module/mobile/link-settings/index.native.js.map +1 -1
  155. package/build-module/modal/aria-helper.js +2 -0
  156. package/build-module/modal/aria-helper.js.map +1 -1
  157. package/build-module/modal/index.js +15 -8
  158. package/build-module/modal/index.js.map +1 -1
  159. package/build-module/select-control/styles/select-control-styles.js +33 -9
  160. package/build-module/select-control/styles/select-control-styles.js.map +1 -1
  161. package/build-module/style-provider/index.js +1 -0
  162. package/build-module/style-provider/index.js.map +1 -1
  163. package/build-module/toggle-group-control/toggle-group-control/component.js +8 -3
  164. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  165. package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js +25 -14
  166. package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map +1 -1
  167. package/build-module/tools-panel/styles.js +12 -11
  168. package/build-module/tools-panel/styles.js.map +1 -1
  169. package/build-module/tools-panel/tools-panel/component.js +5 -8
  170. package/build-module/tools-panel/tools-panel/component.js.map +1 -1
  171. package/build-module/tools-panel/tools-panel/hook.js +48 -17
  172. package/build-module/tools-panel/tools-panel/hook.js.map +1 -1
  173. package/build-module/tools-panel/tools-panel-item/hook.js +5 -1
  174. package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
  175. package/build-module/unit-control/styles/unit-control-styles.js +23 -41
  176. package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
  177. package/build-module/z-stack/component.js.map +1 -1
  178. package/build-module/z-stack/styles.js +13 -8
  179. package/build-module/z-stack/styles.js.map +1 -1
  180. package/build-style/style-rtl.css +23 -11
  181. package/build-style/style.css +23 -11
  182. package/build-types/base-field/hook.d.ts +16 -16
  183. package/build-types/card/card/hook.d.ts +16 -16
  184. package/build-types/card/card-body/hook.d.ts +16 -16
  185. package/build-types/card/card-divider/hook.d.ts +18 -18
  186. package/build-types/card/card-footer/hook.d.ts +17 -17
  187. package/build-types/card/card-header/hook.d.ts +16 -16
  188. package/build-types/card/card-media/hook.d.ts +16 -16
  189. package/build-types/divider/component.d.ts +8 -7
  190. package/build-types/divider/component.d.ts.map +1 -1
  191. package/build-types/divider/styles.d.ts +2 -2
  192. package/build-types/divider/styles.d.ts.map +1 -1
  193. package/build-types/divider/types.d.ts +5 -5
  194. package/build-types/divider/types.d.ts.map +1 -1
  195. package/build-types/elevation/hook.d.ts +15 -15
  196. package/build-types/flex/flex/hook.d.ts +16 -16
  197. package/build-types/flex/flex-block/hook.d.ts +16 -16
  198. package/build-types/flex/flex-item/hook.d.ts +16 -16
  199. package/build-types/flyout/flyout/hook.d.ts +17 -17
  200. package/build-types/flyout/styles.d.ts +7 -9
  201. package/build-types/flyout/styles.d.ts.map +1 -1
  202. package/build-types/grid/hook.d.ts +16 -16
  203. package/build-types/h-stack/hook.d.ts +16 -16
  204. package/build-types/heading/hook.d.ts +16 -16
  205. package/build-types/input-control/index.d.ts +1 -1
  206. package/build-types/input-control/index.d.ts.map +1 -1
  207. package/build-types/input-control/input-field.d.ts +1 -1
  208. package/build-types/input-control/input-field.d.ts.map +1 -1
  209. package/build-types/input-control/styles/input-control-styles.d.ts +1 -2
  210. package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
  211. package/build-types/input-control/types.d.ts +2 -1
  212. package/build-types/input-control/types.d.ts.map +1 -1
  213. package/build-types/item-group/item/hook.d.ts +16 -16
  214. package/build-types/item-group/item-group/hook.d.ts +16 -16
  215. package/build-types/number-control/styles/number-control-styles.d.ts +1 -1
  216. package/build-types/scrollable/hook.d.ts +16 -16
  217. package/build-types/select-control/styles/select-control-styles.d.ts.map +1 -1
  218. package/build-types/select-control/types.d.ts +1 -1
  219. package/build-types/select-control/types.d.ts.map +1 -1
  220. package/build-types/spacer/hook.d.ts +16 -16
  221. package/build-types/surface/hook.d.ts +16 -16
  222. package/build-types/text/hook.d.ts +16 -16
  223. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  224. package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts.map +1 -1
  225. package/build-types/tools-panel/styles.d.ts.map +1 -1
  226. package/build-types/tools-panel/tools-panel/component.d.ts.map +1 -1
  227. package/build-types/tools-panel/tools-panel/hook.d.ts +16 -16
  228. package/build-types/tools-panel/tools-panel/hook.d.ts.map +1 -1
  229. package/build-types/tools-panel/tools-panel-header/hook.d.ts +16 -16
  230. package/build-types/tools-panel/tools-panel-item/hook.d.ts +16 -16
  231. package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
  232. package/build-types/tools-panel/types.d.ts +2 -1
  233. package/build-types/tools-panel/types.d.ts.map +1 -1
  234. package/build-types/truncate/hook.d.ts +16 -16
  235. package/build-types/ui/control-group/hook.d.ts +18 -18
  236. package/build-types/ui/control-label/hook.d.ts +16 -16
  237. package/build-types/ui/form-group/form-group.d.ts +4 -4
  238. package/build-types/ui/form-group/use-form-group.d.ts +55 -55
  239. package/build-types/unit-control/index.d.ts +1 -1
  240. package/build-types/unit-control/index.d.ts.map +1 -1
  241. package/build-types/unit-control/styles/unit-control-styles.d.ts +1 -0
  242. package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
  243. package/build-types/unit-control/types.d.ts +2 -2
  244. package/build-types/unit-control/types.d.ts.map +1 -1
  245. package/build-types/v-stack/hook.d.ts +16 -16
  246. package/build-types/z-stack/component.d.ts +1 -1
  247. package/build-types/z-stack/styles.d.ts.map +1 -1
  248. package/package.json +21 -23
  249. package/src/alignment-matrix-control/stories/index.js +1 -1
  250. package/src/angle-picker-control/index.js +2 -0
  251. package/src/base-control/stories/index.js +1 -1
  252. package/src/button/index.native.js +15 -1
  253. package/src/button/stories/index.js +1 -1
  254. package/src/button/style.scss +14 -0
  255. package/src/card/card/README.md +3 -3
  256. package/src/card/stories/index.js +1 -1
  257. package/src/card/test/__snapshots__/index.js.snap +6 -6
  258. package/src/checkbox-control/index.js +1 -1
  259. package/src/checkbox-control/stories/index.js +1 -1
  260. package/src/clipboard-button/index.js +1 -2
  261. package/src/color-indicator/stories/index.js +1 -1
  262. package/src/color-indicator/style.scss +5 -8
  263. package/src/color-palette/index.js +10 -1
  264. package/src/color-palette/stories/index.js +1 -1
  265. package/src/color-palette/test/__snapshots__/index.js.snap +1 -0
  266. package/src/color-picker/color-display.tsx +3 -2
  267. package/src/color-picker/hex-input.tsx +2 -1
  268. package/src/color-picker/input-with-slider.tsx +2 -1
  269. package/src/color-picker/stories/index.js +1 -1
  270. package/src/combobox-control/README.md +2 -2
  271. package/src/confirm-dialog/README.md +128 -0
  272. package/src/confirm-dialog/component.tsx +114 -0
  273. package/src/confirm-dialog/index.tsx +6 -0
  274. package/src/confirm-dialog/stories/index.js +120 -0
  275. package/src/confirm-dialog/test/index.js +302 -0
  276. package/src/confirm-dialog/types.ts +26 -0
  277. package/src/custom-gradient-picker/index.js +1 -0
  278. package/src/custom-gradient-picker/style.scss +0 -4
  279. package/src/date-time/README.md +7 -0
  280. package/src/date-time/date.js +67 -84
  281. package/src/date-time/stories/index.js +1 -1
  282. package/src/date-time/stories/time.js +1 -1
  283. package/src/date-time/test/date.js +3 -29
  284. package/src/date-time/test/utils.js +32 -0
  285. package/src/date-time/utils.js +18 -0
  286. package/src/dimension-control/README.md +1 -1
  287. package/src/divider/README.md +33 -5
  288. package/src/divider/component.tsx +8 -7
  289. package/src/divider/stories/index.js +43 -17
  290. package/src/divider/styles.ts +53 -16
  291. package/src/divider/test/__snapshots__/index.js.snap +11 -11
  292. package/src/divider/test/index.js +4 -4
  293. package/src/divider/types.ts +5 -5
  294. package/src/drop-zone/index.js +14 -6
  295. package/src/drop-zone/provider.js +1 -0
  296. package/src/dropdown-menu/stories/index.js +1 -1
  297. package/src/duotone-picker/README.md +1 -1
  298. package/src/elevation/stories/index.js +1 -1
  299. package/src/external-link/stories/index.js +1 -1
  300. package/src/flyout/styles.ts +4 -2
  301. package/src/focusable-iframe/index.js +1 -0
  302. package/src/font-size-picker/index.js +27 -13
  303. package/src/font-size-picker/stories/index.js +63 -1
  304. package/src/font-size-picker/test/index.js +87 -0
  305. package/src/font-size-picker/test/util.js +74 -0
  306. package/src/font-size-picker/utils.js +31 -17
  307. package/src/form-token-field/stories/index.js +1 -1
  308. package/src/gradient-picker/stories/index.js +1 -1
  309. package/src/grid/stories/index.js +1 -1
  310. package/src/guide/stories/index.js +1 -1
  311. package/src/higher-order/with-focus-outside/index.js +2 -0
  312. package/src/icon/stories/index.js +1 -1
  313. package/src/index.js +1 -0
  314. package/src/input-control/stories/index.js +2 -1
  315. package/src/input-control/styles/input-control-styles.tsx +16 -6
  316. package/src/input-control/types.ts +3 -1
  317. package/src/item-group/stories/index.js +84 -2
  318. package/src/menu-item/README.md +2 -2
  319. package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js +6 -2
  320. package/src/mobile/color-settings/index.native.js +2 -0
  321. package/src/mobile/color-settings/palette.screen.native.js +8 -5
  322. package/src/mobile/color-settings/style.native.scss +1 -1
  323. package/src/mobile/global-styles-context/utils.native.js +1 -1
  324. package/src/mobile/gridicons/index.native.js +3 -3
  325. package/src/mobile/inserter-button/style.native.scss +1 -0
  326. package/src/mobile/link-picker/index.native.js +41 -7
  327. package/src/mobile/link-settings/index.native.js +11 -0
  328. package/src/mobile/link-settings/test/edit.native.js +432 -0
  329. package/src/modal/README.md +10 -0
  330. package/src/modal/aria-helper.js +2 -0
  331. package/src/modal/index.js +72 -55
  332. package/src/modal/stories/index.js +6 -1
  333. package/src/modal/style.scss +9 -0
  334. package/src/modal/test/index.js +11 -0
  335. package/src/navigation/README.md +0 -9
  336. package/src/notice/stories/index.js +1 -1
  337. package/src/number-control/stories/index.js +1 -1
  338. package/src/panel/stories/index.js +1 -1
  339. package/src/placeholder/stories/index.js +1 -1
  340. package/src/popover/stories/index.js +1 -1
  341. package/src/query-controls/README.md +138 -6
  342. package/src/radio-group/README.md +4 -1
  343. package/src/range-control/stories/index.js +1 -1
  344. package/src/resizable-box/stories/index.js +1 -1
  345. package/src/scrollable/stories/index.js +1 -1
  346. package/src/search-control/stories/index.js +1 -1
  347. package/src/select-control/stories/index.js +2 -1
  348. package/src/select-control/styles/select-control-styles.ts +25 -2
  349. package/src/select-control/types.ts +1 -1
  350. package/src/slot-fill/stories/index.js +1 -1
  351. package/src/snackbar/stories/index.js +1 -1
  352. package/src/spacer/stories/index.js +1 -1
  353. package/src/style-provider/index.js +2 -0
  354. package/src/surface/stories/index.js +1 -1
  355. package/src/tab-panel/stories/index.js +1 -1
  356. package/src/text-control/stories/index.js +1 -1
  357. package/src/text-highlight/stories/index.js +1 -1
  358. package/src/textarea-control/stories/index.js +1 -1
  359. package/src/tip/stories/index.js +1 -1
  360. package/src/toggle-control/stories/index.js +1 -1
  361. package/src/toggle-group-control/stories/index.js +1 -1
  362. package/src/toggle-group-control/toggle-group-control/component.tsx +7 -2
  363. package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx +24 -9
  364. package/src/toolbar-button/stories/index.js +1 -1
  365. package/src/tools-panel/stories/index.js +237 -0
  366. package/src/tools-panel/styles.ts +41 -1
  367. package/src/tools-panel/test/index.js +234 -1
  368. package/src/tools-panel/tools-panel/README.md +9 -0
  369. package/src/tools-panel/tools-panel/component.tsx +2 -5
  370. package/src/tools-panel/tools-panel/hook.ts +50 -18
  371. package/src/tools-panel/tools-panel-item/hook.ts +5 -1
  372. package/src/tools-panel/types.ts +5 -1
  373. package/src/tooltip/stories/index.js +1 -1
  374. package/src/tree-select/stories/index.js +1 -1
  375. package/src/truncate/stories/index.js +1 -1
  376. package/src/unit-control/stories/index.js +19 -1
  377. package/src/unit-control/styles/unit-control-styles.ts +33 -46
  378. package/src/unit-control/types.ts +5 -2
  379. package/src/z-stack/README.md +1 -1
  380. package/src/z-stack/component.tsx +1 -1
  381. package/src/z-stack/stories/index.js +1 -1
  382. package/src/z-stack/styles.ts +7 -2
  383. package/tsconfig.json +6 -2
  384. package/tsconfig.tsbuildinfo +1 -1
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ Object.defineProperty(exports, "ConfirmDialog", {
9
+ enumerable: true,
10
+ get: function () {
11
+ return _component.default;
12
+ }
13
+ });
14
+
15
+ var _component = _interopRequireDefault(require("./component"));
16
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/confirm-dialog/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAGA","sourcesContent":["/**\n * Internal dependencies\n */\nimport ConfirmDialog from './component';\n\nexport { ConfirmDialog };\n"]}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -105,6 +105,7 @@ const GradientTypePicker = _ref2 => {
105
105
  labelPosition: "top",
106
106
  onChange: handleOnChange,
107
107
  options: _constants.GRADIENT_OPTIONS,
108
+ size: "__unstable-large",
108
109
  value: hasGradient && type
109
110
  });
110
111
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}
@@ -17,6 +17,8 @@ var _DayPickerSingleDateController = _interopRequireDefault(require("react-dates
17
17
 
18
18
  var _i18n = require("@wordpress/i18n");
19
19
 
20
+ var _utils = require("./utils");
21
+
20
22
  /**
21
23
  * External dependencies
22
24
  */
@@ -27,6 +29,10 @@ var _i18n = require("@wordpress/i18n");
27
29
  * WordPress dependencies
28
30
  */
29
31
 
32
+ /**
33
+ * Internal dependencies
34
+ */
35
+
30
36
  /**
31
37
  * Module Constants
32
38
  */
@@ -77,20 +83,20 @@ function DatePickerDay(_ref) {
77
83
  }, day.format('D'));
78
84
  }
79
85
 
80
- class DatePicker extends _element.Component {
81
- constructor() {
82
- super(...arguments);
83
- this.onChangeMoment = this.onChangeMoment.bind(this);
84
- this.nodeRef = (0, _element.createRef)();
85
- this.onMonthPreviewedHandler = this.onMonthPreviewedHandler.bind(this);
86
- }
87
-
88
- onMonthPreviewedHandler(newMonthDate) {
89
- var _this$props$onMonthPr, _this$props;
90
-
91
- (_this$props$onMonthPr = (_this$props = this.props).onMonthPreviewed) === null || _this$props$onMonthPr === void 0 ? void 0 : _this$props$onMonthPr.call(_this$props, newMonthDate.toISOString());
92
- this.keepFocusInside();
93
- }
86
+ function DatePicker(_ref2) {
87
+ let {
88
+ currentDate,
89
+ onChange,
90
+ events,
91
+ isInvalidDate,
92
+ onMonthPreviewed
93
+ } = _ref2;
94
+ const nodeRef = (0, _element.useRef)();
95
+
96
+ const onMonthPreviewedHandler = newMonthDate => {
97
+ onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(newMonthDate.toISOString());
98
+ keepFocusInside();
99
+ };
94
100
  /*
95
101
  * Todo: We should remove this function ASAP.
96
102
  * It is kept because focus is lost when we click on the previous and next month buttons.
@@ -99,21 +105,21 @@ class DatePicker extends _element.Component {
99
105
  */
100
106
 
101
107
 
102
- keepFocusInside() {
103
- if (!this.nodeRef.current) {
108
+ const keepFocusInside = () => {
109
+ if (!nodeRef.current) {
104
110
  return;
105
111
  }
106
112
 
107
113
  const {
108
114
  ownerDocument
109
- } = this.nodeRef.current;
115
+ } = nodeRef.current;
110
116
  const {
111
117
  activeElement
112
118
  } = ownerDocument; // If focus was lost.
113
119
 
114
- if (!activeElement || !this.nodeRef.current.contains(ownerDocument.activeElement)) {
120
+ if (!activeElement || !nodeRef.current.contains(ownerDocument.activeElement)) {
115
121
  // Retrieve the focus region div.
116
- const focusRegion = this.nodeRef.current.querySelector('.DayPicker_focusRegion');
122
+ const focusRegion = nodeRef.current.querySelector('.DayPicker_focusRegion');
117
123
 
118
124
  if (!focusRegion) {
119
125
  return;
@@ -122,14 +128,10 @@ class DatePicker extends _element.Component {
122
128
 
123
129
  focusRegion.focus();
124
130
  }
125
- }
126
-
127
- onChangeMoment(newDate) {
128
- const {
129
- currentDate,
130
- onChange
131
- } = this.props; // If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
131
+ };
132
132
 
133
+ const onChangeMoment = newDate => {
134
+ // If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
133
135
  const momentDate = currentDate ? (0, _moment.default)(currentDate) : (0, _moment.default)();
134
136
  const momentTime = {
135
137
  hours: momentDate.hours(),
@@ -138,71 +140,46 @@ class DatePicker extends _element.Component {
138
140
  };
139
141
  onChange(newDate.set(momentTime).format(TIMEZONELESS_FORMAT)); // Keep focus on the date picker.
140
142
 
141
- this.keepFocusInside();
142
- }
143
- /**
144
- * Create a Moment object from a date string. With no currentDate supplied, default to a Moment
145
- * object representing now. If a null value is passed, return a null value.
146
- *
147
- * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.
148
- * @return {?moment.Moment} Moment object for selected date or null.
149
- */
143
+ keepFocusInside();
144
+ };
150
145
 
151
-
152
- getMomentDate(currentDate) {
153
- if (null === currentDate) {
154
- return null;
155
- }
156
-
157
- return currentDate ? (0, _moment.default)(currentDate) : (0, _moment.default)();
158
- }
159
-
160
- getEventsPerDay(day) {
161
- var _this$props$events;
162
-
163
- if (!((_this$props$events = this.props.events) !== null && _this$props$events !== void 0 && _this$props$events.length)) {
146
+ const getEventsPerDay = day => {
147
+ if (!(events !== null && events !== void 0 && events.length)) {
164
148
  return [];
165
149
  }
166
150
 
167
- return this.props.events.filter(eventDay => day.isSame(eventDay.date, 'day'));
168
- }
169
-
170
- render() {
171
- const {
172
- currentDate,
173
- isInvalidDate
174
- } = this.props;
175
- const momentDate = this.getMomentDate(currentDate);
176
- return (0, _element.createElement)("div", {
177
- className: "components-datetime__date",
178
- ref: this.nodeRef
179
- }, (0, _element.createElement)(_DayPickerSingleDateController.default, {
180
- date: momentDate,
181
- daySize: 30,
182
- focused: true,
183
- hideKeyboardShortcutsPanel: true // This is a hack to force the calendar to update on month or year change
184
- // https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
185
- ,
186
- key: `datepicker-controller-${momentDate ? momentDate.format('MM-YYYY') : 'null'}`,
187
- noBorder: true,
188
- numberOfMonths: 1,
189
- onDateChange: this.onChangeMoment,
190
- transitionDuration: 0,
191
- weekDayFormat: "ddd",
192
- dayAriaLabelFormat: ARIAL_LABEL_TIME_FORMAT,
193
- isRTL: (0, _i18n.isRTL)(),
194
- isOutsideRange: date => {
195
- return isInvalidDate && isInvalidDate(date.toDate());
196
- },
197
- onPrevMonthClick: this.onMonthPreviewedHandler,
198
- onNextMonthClick: this.onMonthPreviewedHandler,
199
- renderDayContents: day => (0, _element.createElement)(DatePickerDay, {
200
- day: day,
201
- events: this.getEventsPerDay(day)
202
- })
203
- }));
204
- }
151
+ return events.filter(eventDay => day.isSame(eventDay.date, 'day'));
152
+ };
205
153
 
154
+ const momentDate = (0, _utils.getMomentDate)(currentDate);
155
+ return (0, _element.createElement)("div", {
156
+ className: "components-datetime__date",
157
+ ref: nodeRef
158
+ }, (0, _element.createElement)(_DayPickerSingleDateController.default, {
159
+ date: momentDate,
160
+ daySize: 30,
161
+ focused: true,
162
+ hideKeyboardShortcutsPanel: true // This is a hack to force the calendar to update on month or year change
163
+ // https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
164
+ ,
165
+ key: `datepicker-controller-${momentDate ? momentDate.format('MM-YYYY') : 'null'}`,
166
+ noBorder: true,
167
+ numberOfMonths: 1,
168
+ onDateChange: onChangeMoment,
169
+ transitionDuration: 0,
170
+ weekDayFormat: "ddd",
171
+ dayAriaLabelFormat: ARIAL_LABEL_TIME_FORMAT,
172
+ isRTL: (0, _i18n.isRTL)(),
173
+ isOutsideRange: date => {
174
+ return isInvalidDate && isInvalidDate(date.toDate());
175
+ },
176
+ onPrevMonthClick: onMonthPreviewedHandler,
177
+ onNextMonthClick: onMonthPreviewedHandler,
178
+ renderDayContents: day => (0, _element.createElement)(DatePickerDay, {
179
+ day: day,
180
+ events: getEventsPerDay(day)
181
+ })
182
+ }));
206
183
  }
207
184
 
208
185
  var _default = DatePicker;
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/date-time/date.js"],"names":["TIMEZONELESS_FORMAT","ARIAL_LABEL_TIME_FORMAT","DatePickerDay","day","events","ref","current","parentNode","dayAriaLabel","format","length","setAttribute","dayWithEventsDescription","DatePicker","Component","constructor","arguments","onChangeMoment","bind","nodeRef","onMonthPreviewedHandler","newMonthDate","props","onMonthPreviewed","toISOString","keepFocusInside","ownerDocument","activeElement","contains","focusRegion","querySelector","focus","newDate","currentDate","onChange","momentDate","momentTime","hours","minutes","seconds","set","getMomentDate","getEventsPerDay","filter","eventDay","isSame","date","render","isInvalidDate","toDate"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\nimport classnames from 'classnames';\n\n// react-dates doesn't tree-shake correctly, so we import from the individual\n// component here, to avoid including too much of the library\nimport DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';\n\n/**\n * WordPress dependencies\n */\nimport { Component, createRef, useEffect, useRef } from '@wordpress/element';\nimport { isRTL, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\nconst ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';\n\nfunction DatePickerDay( { day, events = [] } ) {\n\tconst ref = useRef();\n\n\t/*\n\t * a11y hack to make the `There is/are n events` string\n\t * available speaking for readers,\n\t * re-defining the aria-label attribute.\n\t * This attribute is handled by the react-dates component.\n\t */\n\tuseEffect( () => {\n\t\t// Bail when no parent node.\n\t\tif ( ! ref?.current?.parentNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { parentNode } = ref.current;\n\t\tconst dayAriaLabel = moment( day ).format( ARIAL_LABEL_TIME_FORMAT );\n\n\t\tif ( ! events.length ) {\n\t\t\t// Set aria-label without event description.\n\t\t\tparentNode.setAttribute( 'aria-label', dayAriaLabel );\n\t\t\treturn;\n\t\t}\n\n\t\tconst dayWithEventsDescription = sprintf(\n\t\t\t// translators: 1: Calendar day format, 2: Calendar event number.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event.',\n\t\t\t\t'%1$s. There are %2$d events.',\n\t\t\t\tevents.length\n\t\t\t),\n\t\t\tdayAriaLabel,\n\t\t\tevents.length\n\t\t);\n\n\t\tparentNode.setAttribute( 'aria-label', dayWithEventsDescription );\n\t}, [ events.length ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'components-datetime__date__day', {\n\t\t\t\t'has-events': events?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ day.format( 'D' ) }\n\t\t</div>\n\t);\n}\n\nclass DatePicker extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.onChangeMoment = this.onChangeMoment.bind( this );\n\t\tthis.nodeRef = createRef();\n\t\tthis.onMonthPreviewedHandler = this.onMonthPreviewedHandler.bind(\n\t\t\tthis\n\t\t);\n\t}\n\n\tonMonthPreviewedHandler( newMonthDate ) {\n\t\tthis.props.onMonthPreviewed?.( newMonthDate.toISOString() );\n\t\tthis.keepFocusInside();\n\t}\n\n\t/*\n\t * Todo: We should remove this function ASAP.\n\t * It is kept because focus is lost when we click on the previous and next month buttons.\n\t * This focus loss closes the date picker popover.\n\t * Ideally we should add an upstream commit on react-dates to fix this issue.\n\t */\n\tkeepFocusInside() {\n\t\tif ( ! this.nodeRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = this.nodeRef.current;\n\t\tconst { activeElement } = ownerDocument;\n\n\t\t// If focus was lost.\n\t\tif (\n\t\t\t! activeElement ||\n\t\t\t! this.nodeRef.current.contains( ownerDocument.activeElement )\n\t\t) {\n\t\t\t// Retrieve the focus region div.\n\t\t\tconst focusRegion = this.nodeRef.current.querySelector(\n\t\t\t\t'.DayPicker_focusRegion'\n\t\t\t);\n\t\t\tif ( ! focusRegion ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Keep the focus on focus region.\n\t\t\tfocusRegion.focus();\n\t\t}\n\t}\n\n\tonChangeMoment( newDate ) {\n\t\tconst { currentDate, onChange } = this.props;\n\n\t\t// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.\n\t\tconst momentDate = currentDate ? moment( currentDate ) : moment();\n\t\tconst momentTime = {\n\t\t\thours: momentDate.hours(),\n\t\t\tminutes: momentDate.minutes(),\n\t\t\tseconds: 0,\n\t\t};\n\n\t\tonChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );\n\n\t\t// Keep focus on the date picker.\n\t\tthis.keepFocusInside();\n\t}\n\n\t/**\n\t * Create a Moment object from a date string. With no currentDate supplied, default to a Moment\n\t * object representing now. If a null value is passed, return a null value.\n\t *\n\t * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.\n\t * @return {?moment.Moment} Moment object for selected date or null.\n\t */\n\tgetMomentDate( currentDate ) {\n\t\tif ( null === currentDate ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn currentDate ? moment( currentDate ) : moment();\n\t}\n\n\tgetEventsPerDay( day ) {\n\t\tif ( ! this.props.events?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn this.props.events.filter( ( eventDay ) =>\n\t\t\tday.isSame( eventDay.date, 'day' )\n\t\t);\n\t}\n\n\trender() {\n\t\tconst { currentDate, isInvalidDate } = this.props;\n\t\tconst momentDate = this.getMomentDate( currentDate );\n\n\t\treturn (\n\t\t\t<div className=\"components-datetime__date\" ref={ this.nodeRef }>\n\t\t\t\t<DayPickerSingleDateController\n\t\t\t\t\tdate={ momentDate }\n\t\t\t\t\tdaySize={ 30 }\n\t\t\t\t\tfocused\n\t\t\t\t\thideKeyboardShortcutsPanel\n\t\t\t\t\t// This is a hack to force the calendar to update on month or year change\n\t\t\t\t\t// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665\n\t\t\t\t\tkey={ `datepicker-controller-${\n\t\t\t\t\t\tmomentDate ? momentDate.format( 'MM-YYYY' ) : 'null'\n\t\t\t\t\t}` }\n\t\t\t\t\tnoBorder\n\t\t\t\t\tnumberOfMonths={ 1 }\n\t\t\t\t\tonDateChange={ this.onChangeMoment }\n\t\t\t\t\ttransitionDuration={ 0 }\n\t\t\t\t\tweekDayFormat=\"ddd\"\n\t\t\t\t\tdayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }\n\t\t\t\t\tisRTL={ isRTL() }\n\t\t\t\t\tisOutsideRange={ ( date ) => {\n\t\t\t\t\t\treturn isInvalidDate && isInvalidDate( date.toDate() );\n\t\t\t\t\t} }\n\t\t\t\t\tonPrevMonthClick={ this.onMonthPreviewedHandler }\n\t\t\t\t\tonNextMonthClick={ this.onMonthPreviewedHandler }\n\t\t\t\t\trenderDayContents={ ( day ) => (\n\t\t\t\t\t\t<DatePickerDay\n\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\tevents={ this.getEventsPerDay( day ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default DatePicker;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/date-time/date.js"],"names":["TIMEZONELESS_FORMAT","ARIAL_LABEL_TIME_FORMAT","DatePickerDay","day","events","ref","current","parentNode","dayAriaLabel","format","length","setAttribute","dayWithEventsDescription","DatePicker","currentDate","onChange","isInvalidDate","onMonthPreviewed","nodeRef","onMonthPreviewedHandler","newMonthDate","toISOString","keepFocusInside","ownerDocument","activeElement","contains","focusRegion","querySelector","focus","onChangeMoment","newDate","momentDate","momentTime","hours","minutes","seconds","set","getEventsPerDay","filter","eventDay","isSame","date","toDate"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\nimport classnames from 'classnames';\n\n// react-dates doesn't tree-shake correctly, so we import from the individual\n// component here, to avoid including too much of the library\nimport DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isRTL, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getMomentDate } from './utils';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\nconst ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';\n\nfunction DatePickerDay( { day, events = [] } ) {\n\tconst ref = useRef();\n\n\t/*\n\t * a11y hack to make the `There is/are n events` string\n\t * available speaking for readers,\n\t * re-defining the aria-label attribute.\n\t * This attribute is handled by the react-dates component.\n\t */\n\tuseEffect( () => {\n\t\t// Bail when no parent node.\n\t\tif ( ! ref?.current?.parentNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { parentNode } = ref.current;\n\t\tconst dayAriaLabel = moment( day ).format( ARIAL_LABEL_TIME_FORMAT );\n\n\t\tif ( ! events.length ) {\n\t\t\t// Set aria-label without event description.\n\t\t\tparentNode.setAttribute( 'aria-label', dayAriaLabel );\n\t\t\treturn;\n\t\t}\n\n\t\tconst dayWithEventsDescription = sprintf(\n\t\t\t// translators: 1: Calendar day format, 2: Calendar event number.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event.',\n\t\t\t\t'%1$s. There are %2$d events.',\n\t\t\t\tevents.length\n\t\t\t),\n\t\t\tdayAriaLabel,\n\t\t\tevents.length\n\t\t);\n\n\t\tparentNode.setAttribute( 'aria-label', dayWithEventsDescription );\n\t}, [ events.length ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'components-datetime__date__day', {\n\t\t\t\t'has-events': events?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ day.format( 'D' ) }\n\t\t</div>\n\t);\n}\n\nfunction DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents,\n\tisInvalidDate,\n\tonMonthPreviewed,\n} ) {\n\tconst nodeRef = useRef();\n\tconst onMonthPreviewedHandler = ( newMonthDate ) => {\n\t\tonMonthPreviewed?.( newMonthDate.toISOString() );\n\t\tkeepFocusInside();\n\t};\n\n\t/*\n\t * Todo: We should remove this function ASAP.\n\t * It is kept because focus is lost when we click on the previous and next month buttons.\n\t * This focus loss closes the date picker popover.\n\t * Ideally we should add an upstream commit on react-dates to fix this issue.\n\t */\n\tconst keepFocusInside = () => {\n\t\tif ( ! nodeRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = nodeRef.current;\n\t\tconst { activeElement } = ownerDocument;\n\n\t\t// If focus was lost.\n\t\tif (\n\t\t\t! activeElement ||\n\t\t\t! nodeRef.current.contains( ownerDocument.activeElement )\n\t\t) {\n\t\t\t// Retrieve the focus region div.\n\t\t\tconst focusRegion = nodeRef.current.querySelector(\n\t\t\t\t'.DayPicker_focusRegion'\n\t\t\t);\n\t\t\tif ( ! focusRegion ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Keep the focus on focus region.\n\t\t\tfocusRegion.focus();\n\t\t}\n\t};\n\n\tconst onChangeMoment = ( newDate ) => {\n\t\t// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.\n\t\tconst momentDate = currentDate ? moment( currentDate ) : moment();\n\t\tconst momentTime = {\n\t\t\thours: momentDate.hours(),\n\t\t\tminutes: momentDate.minutes(),\n\t\t\tseconds: 0,\n\t\t};\n\n\t\tonChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );\n\n\t\t// Keep focus on the date picker.\n\t\tkeepFocusInside();\n\t};\n\n\tconst getEventsPerDay = ( day ) => {\n\t\tif ( ! events?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn events.filter( ( eventDay ) =>\n\t\t\tday.isSame( eventDay.date, 'day' )\n\t\t);\n\t};\n\n\tconst momentDate = getMomentDate( currentDate );\n\n\treturn (\n\t\t<div className=\"components-datetime__date\" ref={ nodeRef }>\n\t\t\t<DayPickerSingleDateController\n\t\t\t\tdate={ momentDate }\n\t\t\t\tdaySize={ 30 }\n\t\t\t\tfocused\n\t\t\t\thideKeyboardShortcutsPanel\n\t\t\t\t// This is a hack to force the calendar to update on month or year change\n\t\t\t\t// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665\n\t\t\t\tkey={ `datepicker-controller-${\n\t\t\t\t\tmomentDate ? momentDate.format( 'MM-YYYY' ) : 'null'\n\t\t\t\t}` }\n\t\t\t\tnoBorder\n\t\t\t\tnumberOfMonths={ 1 }\n\t\t\t\tonDateChange={ onChangeMoment }\n\t\t\t\ttransitionDuration={ 0 }\n\t\t\t\tweekDayFormat=\"ddd\"\n\t\t\t\tdayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }\n\t\t\t\tisRTL={ isRTL() }\n\t\t\t\tisOutsideRange={ ( date ) => {\n\t\t\t\t\treturn isInvalidDate && isInvalidDate( date.toDate() );\n\t\t\t\t} }\n\t\t\t\tonPrevMonthClick={ onMonthPreviewedHandler }\n\t\t\t\tonNextMonthClick={ onMonthPreviewedHandler }\n\t\t\t\trenderDayContents={ ( day ) => (\n\t\t\t\t\t<DatePickerDay\n\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\tevents={ getEventsPerDay( day ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default DatePicker;\n"]}
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.getMomentDate = void 0;
9
+
10
+ var _moment = _interopRequireDefault(require("moment"));
11
+
12
+ /**
13
+ * External dependencies
14
+ */
15
+
16
+ /**
17
+ * Create a Moment object from a date string. With no date supplied, default to a Moment
18
+ * object representing now. If a null value is passed, return a null value.
19
+ *
20
+ * @param {?string} date Date representing the currently selected date or null to signify no selection.
21
+ * @return {?moment.Moment} Moment object for selected date or null.
22
+ */
23
+ const getMomentDate = date => {
24
+ if (null === date) {
25
+ return null;
26
+ }
27
+
28
+ return date ? (0, _moment.default)(date) : (0, _moment.default)();
29
+ };
30
+
31
+ exports.getMomentDate = getMomentDate;
32
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/date-time/utils.js"],"names":["getMomentDate","date"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,IAAF,IAAY;AACxC,MAAK,SAASA,IAAd,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAOA,IAAI,GAAG,qBAAQA,IAAR,CAAH,GAAoB,sBAA/B;AACA,CALM","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\n\n/**\n * Create a Moment object from a date string. With no date supplied, default to a Moment\n * object representing now. If a null value is passed, return a null value.\n *\n * @param {?string} date Date representing the currently selected date or null to signify no selection.\n * @return {?moment.Moment} Moment object for selected date or null.\n */\nexport const getMomentDate = ( date ) => {\n\tif ( null === date ) {\n\t\treturn null;\n\t}\n\treturn date ? moment( date ) : moment();\n};\n"]}
@@ -39,17 +39,18 @@ function Divider(props, forwardedRef) {
39
39
  * @example
40
40
  * ```js
41
41
  * import {
42
- * __experimentalDivider as Divider,
43
- * __experimentalText as Text }
44
- * from `@wordpress/components`;
42
+ * __experimentalDivider as Divider,
43
+ * __experimentalText as Text,
44
+ * __experimentalVStack as VStack,
45
+ * } from `@wordpress/components`;
45
46
  *
46
47
  * function Example() {
47
48
  * return (
48
- * <ListGroup>
49
- * <FormGroup>...</FormGroup>
49
+ * <VStack spacing={4}>
50
+ * <Text>Some text here</Text>
50
51
  * <Divider />
51
- * <FormGroup>...</FormGroup>
52
- * </ListGroup>
52
+ * <Text>Some more text here</Text>
53
+ * </VStack>
53
54
  * );
54
55
  * }
55
56
  * ```
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/divider/component.tsx"],"names":["Divider","props","forwardedRef","contextProps","DividerView","ConnectedDivider"],"mappings":";;;;;;;;;;;;;AAIA;;AAOA;;AAKA;;AAhBA;AACA;AACA;AACA;;AAKA;AACA;AACA;AASA,SAASA,OAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,+BAAkBF,KAAlB,EAAyB,SAAzB,CAArB;AAEA,SACC,4BAAC,iBAAD;AACC,IAAA,EAAE,EAAGG;AADN,KAEMD,YAFN;AAGC,IAAA,GAAG,EAAGD;AAHP,KADD;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,gBAAgB,GAAG,6BAAgBL,OAAhB,EAAyB,SAAzB,CAAzB;eAEeK,gB","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Separator } from 'reakit';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { DividerView } from './styles';\nimport type { Props } from './types';\n\nfunction Divider(\n\tprops: WordPressComponentProps< Props, 'hr', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst contextProps = useContextSystem( props, 'Divider' );\n\n\treturn (\n\t\t<Separator\n\t\t\tas={ DividerView }\n\t\t\t{ ...contextProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\n/**\n * `Divider` is a layout component that separates groups of related content.\n *\n * @example\n * ```js\n * import {\n * __experimentalDivider as Divider,\n * __experimentalText as Text }\n * from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<ListGroup>\n * \t\t\t<FormGroup>...</FormGroup>\n * \t\t\t<Divider />\n * \t\t\t<FormGroup>...</FormGroup>\n * \t\t</ListGroup>\n * \t);\n * }\n * ```\n */\nconst ConnectedDivider = contextConnect( Divider, 'Divider' );\n\nexport default ConnectedDivider;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/divider/component.tsx"],"names":["Divider","props","forwardedRef","contextProps","DividerView","ConnectedDivider"],"mappings":";;;;;;;;;;;;;AAIA;;AAOA;;AAKA;;AAhBA;AACA;AACA;AACA;;AAKA;AACA;AACA;AASA,SAASA,OAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,+BAAkBF,KAAlB,EAAyB,SAAzB,CAArB;AAEA,SACC,4BAAC,iBAAD;AACC,IAAA,EAAE,EAAGG;AADN,KAEMD,YAFN;AAGC,IAAA,GAAG,EAAGD;AAHP,KADD;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,gBAAgB,GAAG,6BAAgBL,OAAhB,EAAyB,SAAzB,CAAzB;eAEeK,gB","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Separator } from 'reakit';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { DividerView } from './styles';\nimport type { Props } from './types';\n\nfunction Divider(\n\tprops: WordPressComponentProps< Props, 'hr', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst contextProps = useContextSystem( props, 'Divider' );\n\n\treturn (\n\t\t<Separator\n\t\t\tas={ DividerView }\n\t\t\t{ ...contextProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\n/**\n * `Divider` is a layout component that separates groups of related content.\n *\n * @example\n * ```js\n * import {\n * \t\t__experimentalDivider as Divider,\n * \t\t__experimentalText as Text,\n * \t\t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack spacing={4}>\n * \t\t\t<Text>Some text here</Text>\n * \t\t\t<Divider />\n * \t\t\t<Text>Some more text here</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nconst ConnectedDivider = contextConnect( Divider, 'Divider' );\n\nexport default ConnectedDivider;\n"]}
@@ -13,7 +13,7 @@ var _react = require("@emotion/react");
13
13
 
14
14
  var _space = require("../ui/utils/space");
15
15
 
16
- var _configValues = _interopRequireDefault(require("../utils/config-values"));
16
+ var _utils = require("../utils");
17
17
 
18
18
  /**
19
19
  * External dependencies
@@ -22,24 +22,49 @@ var _configValues = _interopRequireDefault(require("../utils/config-values"));
22
22
  /**
23
23
  * Internal dependencies
24
24
  */
25
+ const MARGIN_DIRECTIONS = {
26
+ vertical: {
27
+ start: 'marginLeft',
28
+ end: 'marginRight'
29
+ },
30
+ horizontal: {
31
+ start: 'marginTop',
32
+ end: 'marginBottom'
33
+ }
34
+ }; // Renders the correct margins given the Divider's `orientation` and the writing direction.
35
+ // When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
36
+ // the latter will take priority.
37
+
25
38
  const renderMargin = _ref => {
26
39
  let {
40
+ 'aria-orientation': orientation = 'horizontal',
27
41
  margin,
28
- marginTop,
29
- marginBottom
42
+ marginStart,
43
+ marginEnd
30
44
  } = _ref;
45
+ return /*#__PURE__*/(0, _react.css)((0, _utils.rtl)({
46
+ [MARGIN_DIRECTIONS[orientation].start]: (0, _space.space)(marginStart !== null && marginStart !== void 0 ? marginStart : margin),
47
+ [MARGIN_DIRECTIONS[orientation].end]: (0, _space.space)(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin)
48
+ })(), process.env.NODE_ENV === "production" ? "" : ";label:renderMargin;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0NDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyQm9yZGVyIH1cblx0JHsgcmVuZGVyU2l6ZSB9XG5cdCR7IHJlbmRlck1hcmdpbiB9XG5gO1xuIl19 */");
49
+ };
31
50
 
32
- if (typeof margin !== 'undefined') {
33
- return /*#__PURE__*/(0, _react.css)({
34
- marginBottom: (0, _space.space)(margin),
35
- marginTop: (0, _space.space)(margin)
36
- }, process.env.NODE_ENV === "production" ? "" : ";label:renderMargin;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZVMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9kaXZpZGVyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuaW1wb3J0IHR5cGUgeyBPd25Qcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHsgbWFyZ2luLCBtYXJnaW5Ub3AsIG1hcmdpbkJvdHRvbSB9OiBPd25Qcm9wcyApID0+IHtcblx0aWYgKCB0eXBlb2YgbWFyZ2luICE9PSAndW5kZWZpbmVkJyApIHtcblx0XHRyZXR1cm4gY3NzKCB7XG5cdFx0XHRtYXJnaW5Cb3R0b206IHNwYWNlKCBtYXJnaW4gKSxcblx0XHRcdG1hcmdpblRvcDogc3BhY2UoIG1hcmdpbiApLFxuXHRcdH0gKTtcblx0fVxuXG5cdHJldHVybiBjc3MoIHtcblx0XHRtYXJnaW5Ub3A6IHNwYWNlKCBtYXJnaW5Ub3AgKSxcblx0XHRtYXJnaW5Cb3R0b206IHNwYWNlKCBtYXJnaW5Cb3R0b20gKSxcblx0fSApO1xufTtcblxuZXhwb3J0IGNvbnN0IERpdmlkZXJWaWV3ID0gc3R5bGVkLmhyPCBPd25Qcm9wcyA+YFxuXHRib3JkZXItY29sb3I6ICR7IENPTkZJRy5jb2xvckRpdmlkZXIgfTtcblx0Ym9yZGVyLXdpZHRoOiAwIDAgMXB4IDA7XG5cdGhlaWdodDogMDtcblx0bWFyZ2luOiAwO1xuXHR3aWR0aDogYXV0bztcblxuXHQkeyByZW5kZXJNYXJnaW4gfVxuYDtcbiJdfQ== */");
37
- }
51
+ const renderBorder = _ref2 => {
52
+ let {
53
+ 'aria-orientation': orientation = 'horizontal'
54
+ } = _ref2;
55
+ return /*#__PURE__*/(0, _react.css)({
56
+ [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor'
57
+ }, process.env.NODE_ENV === "production" ? "" : ";label:renderBorder;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0RRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyQm9yZGVyIH1cblx0JHsgcmVuZGVyU2l6ZSB9XG5cdCR7IHJlbmRlck1hcmdpbiB9XG5gO1xuIl19 */");
58
+ };
38
59
 
60
+ const renderSize = _ref3 => {
61
+ let {
62
+ 'aria-orientation': orientation = 'horizontal'
63
+ } = _ref3;
39
64
  return /*#__PURE__*/(0, _react.css)({
40
- marginTop: (0, _space.space)(marginTop),
41
- marginBottom: (0, _space.space)(marginBottom)
42
- }, process.env.NODE_ENV === "production" ? "" : ";label:renderMargin;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB0eXBlIHsgT3duUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgcmVuZGVyTWFyZ2luID0gKCB7IG1hcmdpbiwgbWFyZ2luVG9wLCBtYXJnaW5Cb3R0b20gfTogT3duUHJvcHMgKSA9PiB7XG5cdGlmICggdHlwZW9mIG1hcmdpbiAhPT0gJ3VuZGVmaW5lZCcgKSB7XG5cdFx0cmV0dXJuIGNzcygge1xuXHRcdFx0bWFyZ2luQm90dG9tOiBzcGFjZSggbWFyZ2luICksXG5cdFx0XHRtYXJnaW5Ub3A6IHNwYWNlKCBtYXJnaW4gKSxcblx0XHR9ICk7XG5cdH1cblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0bWFyZ2luVG9wOiBzcGFjZSggbWFyZ2luVG9wICksXG5cdFx0bWFyZ2luQm90dG9tOiBzcGFjZSggbWFyZ2luQm90dG9tICksXG5cdH0gKTtcbn07XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgT3duUHJvcHMgPmBcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29sb3JEaXZpZGVyIH07XG5cdGJvcmRlci13aWR0aDogMCAwIDFweCAwO1xuXHRoZWlnaHQ6IDA7XG5cdG1hcmdpbjogMDtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgcmVuZGVyTWFyZ2luIH1cbmA7XG4iXX0= */");
65
+ height: orientation === 'vertical' ? 'auto' : 0,
66
+ width: orientation === 'vertical' ? 0 : 'auto'
67
+ }, process.env.NODE_ENV === "production" ? "" : ";label:renderSize;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNERDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyQm9yZGVyIH1cblx0JHsgcmVuZGVyU2l6ZSB9XG5cdCR7IHJlbmRlck1hcmdpbiB9XG5gO1xuIl19 */");
43
68
  };
44
69
 
45
70
  const DividerView = (0, _base.default)("hr", process.env.NODE_ENV === "production" ? {
@@ -47,6 +72,6 @@ const DividerView = (0, _base.default)("hr", process.env.NODE_ENV === "productio
47
72
  } : {
48
73
  target: "e19on6iw0",
49
74
  label: "DividerView"
50
- })("border-color:", _configValues.default.colorDivider, ";border-width:0 0 1px 0;height:0;margin:0;width:auto;", renderMargin, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJnRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2RpdmlkZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5pbXBvcnQgdHlwZSB7IE93blByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IHJlbmRlck1hcmdpbiA9ICggeyBtYXJnaW4sIG1hcmdpblRvcCwgbWFyZ2luQm90dG9tIH06IE93blByb3BzICkgPT4ge1xuXHRpZiAoIHR5cGVvZiBtYXJnaW4gIT09ICd1bmRlZmluZWQnICkge1xuXHRcdHJldHVybiBjc3MoIHtcblx0XHRcdG1hcmdpbkJvdHRvbTogc3BhY2UoIG1hcmdpbiApLFxuXHRcdFx0bWFyZ2luVG9wOiBzcGFjZSggbWFyZ2luICksXG5cdFx0fSApO1xuXHR9XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdG1hcmdpblRvcDogc3BhY2UoIG1hcmdpblRvcCApLFxuXHRcdG1hcmdpbkJvdHRvbTogc3BhY2UoIG1hcmdpbkJvdHRvbSApLFxuXHR9ICk7XG59O1xuXG5leHBvcnQgY29uc3QgRGl2aWRlclZpZXcgPSBzdHlsZWQuaHI8IE93blByb3BzID5gXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbG9yRGl2aWRlciB9O1xuXHRib3JkZXItd2lkdGg6IDAgMCAxcHggMDtcblx0aGVpZ2h0OiAwO1xuXHRtYXJnaW46IDA7XG5cdHdpZHRoOiBhdXRvO1xuXG5cdCR7IHJlbmRlck1hcmdpbiB9XG5gO1xuIl19 */"));
75
+ })("border:0;margin:0;", renderBorder, " ", renderSize, " ", renderMargin, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUU2QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2RpdmlkZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgTUFSR0lOX0RJUkVDVElPTlM6IFJlY29yZDxcblx0Tm9uTnVsbGFibGU8IFByb3BzWyAnb3JpZW50YXRpb24nIF0gPixcblx0UmVjb3JkPCAnc3RhcnQnIHwgJ2VuZCcsIHN0cmluZyA+XG4+ID0ge1xuXHR2ZXJ0aWNhbDoge1xuXHRcdHN0YXJ0OiAnbWFyZ2luTGVmdCcsXG5cdFx0ZW5kOiAnbWFyZ2luUmlnaHQnLFxuXHR9LFxuXHRob3Jpem9udGFsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5Ub3AnLFxuXHRcdGVuZDogJ21hcmdpbkJvdHRvbScsXG5cdH0sXG59O1xuXG4vLyBSZW5kZXJzIHRoZSBjb3JyZWN0IG1hcmdpbnMgZ2l2ZW4gdGhlIERpdmlkZXIncyBgb3JpZW50YXRpb25gIGFuZCB0aGUgd3JpdGluZyBkaXJlY3Rpb24uXG4vLyBXaGVuIGJvdGggdGhlIGdlbmVyaWMgYG1hcmdpbmAgYW5kIHRoZSBzcGVjaWZpYyBgbWFyZ2luU3RhcnR8bWFyZ2luRW5kYCBwcm9wcyBhcmUgZGVmaW5lZCxcbi8vIHRoZSBsYXR0ZXIgd2lsbCB0YWtlIHByaW9yaXR5LlxuY29uc3QgcmVuZGVyTWFyZ2luID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG5cdG1hcmdpbixcblx0bWFyZ2luU3RhcnQsXG5cdG1hcmdpbkVuZCxcbn06IFByb3BzICkgPT5cblx0Y3NzKFxuXHRcdHJ0bCgge1xuXHRcdFx0WyBNQVJHSU5fRElSRUNUSU9OU1sgb3JpZW50YXRpb24gXS5zdGFydCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luU3RhcnQgPz8gbWFyZ2luXG5cdFx0XHQpLFxuXHRcdFx0WyBNQVJHSU5fRElSRUNUSU9OU1sgb3JpZW50YXRpb24gXS5lbmQgXTogc3BhY2UoXG5cdFx0XHRcdG1hcmdpbkVuZCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0fSApKClcblx0KTtcblxuY29uc3QgcmVuZGVyQm9yZGVyID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG59OiBQcm9wcyApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdFsgb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCdcblx0XHRcdD8gJ2JvcmRlclJpZ2h0J1xuXHRcdFx0OiAnYm9yZGVyQm90dG9tJyBdOiAnMXB4IHNvbGlkIGN1cnJlbnRDb2xvcicsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHJlbmRlclNpemUgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT5cblx0Y3NzKCB7XG5cdFx0aGVpZ2h0OiBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/ICdhdXRvJyA6IDAsXG5cdFx0d2lkdGg6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gMCA6ICdhdXRvJyxcblx0fSApO1xuXG5leHBvcnQgY29uc3QgRGl2aWRlclZpZXcgPSBzdHlsZWQuaHI8IFByb3BzID5gXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXG5cdCR7IHJlbmRlckJvcmRlciB9XG5cdCR7IHJlbmRlclNpemUgfVxuXHQkeyByZW5kZXJNYXJnaW4gfVxuYDtcbiJdfQ== */"));
51
76
  exports.DividerView = DividerView;
52
77
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/divider/styles.ts"],"names":["renderMargin","margin","marginTop","marginBottom","DividerView","CONFIG","colorDivider"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAKA,MAAMA,YAAY,GAAG,QAAqD;AAAA,MAAnD;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,SAAV;AAAqBC,IAAAA;AAArB,GAAmD;;AACzE,MAAK,OAAOF,MAAP,KAAkB,WAAvB,EAAqC;AACpC,wBAAO,gBAAK;AACXE,MAAAA,YAAY,EAAE,kBAAOF,MAAP,CADH;AAEXC,MAAAA,SAAS,EAAE,kBAAOD,MAAP;AAFA,KAAL,s+CAAP;AAIA;;AAED,sBAAO,gBAAK;AACXC,IAAAA,SAAS,EAAE,kBAAOA,SAAP,CADA;AAEXC,IAAAA,YAAY,EAAE,kBAAOA,YAAP;AAFH,GAAL,s+CAAP;AAIA,CAZD;;AAcO,MAAMC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,oBACNC,sBAAOC,YADD,2DAOpBN,YAPoB,y6CAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { space } from '../ui/utils/space';\nimport CONFIG from '../utils/config-values';\nimport type { OwnProps } from './types';\n\nconst renderMargin = ( { margin, marginTop, marginBottom }: OwnProps ) => {\n\tif ( typeof margin !== 'undefined' ) {\n\t\treturn css( {\n\t\t\tmarginBottom: space( margin ),\n\t\t\tmarginTop: space( margin ),\n\t\t} );\n\t}\n\n\treturn css( {\n\t\tmarginTop: space( marginTop ),\n\t\tmarginBottom: space( marginBottom ),\n\t} );\n};\n\nexport const DividerView = styled.hr< OwnProps >`\n\tborder-color: ${ CONFIG.colorDivider };\n\tborder-width: 0 0 1px 0;\n\theight: 0;\n\tmargin: 0;\n\twidth: auto;\n\n\t${ renderMargin }\n`;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/divider/styles.ts"],"names":["MARGIN_DIRECTIONS","vertical","start","end","horizontal","renderMargin","orientation","margin","marginStart","marginEnd","renderBorder","renderSize","height","width","DividerView"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAKA,MAAMA,iBAGL,GAAG;AACHC,EAAAA,QAAQ,EAAE;AACTC,IAAAA,KAAK,EAAE,YADE;AAETC,IAAAA,GAAG,EAAE;AAFI,GADP;AAKHC,EAAAA,UAAU,EAAE;AACXF,IAAAA,KAAK,EAAE,WADI;AAEXC,IAAAA,GAAG,EAAE;AAFM;AALT,CAHJ,C,CAcA;AACA;AACA;;AACA,MAAME,YAAY,GAAG;AAAA,MAAE;AACtB,wBAAoBC,WAAW,GAAG,YADZ;AAEtBC,IAAAA,MAFsB;AAGtBC,IAAAA,WAHsB;AAItBC,IAAAA;AAJsB,GAAF;AAAA,sBAMpB,gBACC,gBAAK;AACJ,KAAET,iBAAiB,CAAEM,WAAF,CAAjB,CAAiCJ,KAAnC,GAA4C,kBAC3CM,WAD2C,aAC3CA,WAD2C,cAC3CA,WAD2C,GAC5BD,MAD4B,CADxC;AAIJ,KAAEP,iBAAiB,CAAEM,WAAF,CAAjB,CAAiCH,GAAnC,GAA0C,kBACzCM,SADyC,aACzCA,SADyC,cACzCA,SADyC,GAC5BF,MAD4B;AAJtC,GAAL,GADD,kqFANoB;AAAA,CAArB;;AAiBA,MAAMG,YAAY,GAAG,SAEP;AAAA,MAFS;AACtB,wBAAoBJ,WAAW,GAAG;AADZ,GAET;AACb,sBAAO,gBAAK;AACX,KAAEA,WAAW,KAAK,UAAhB,GACC,aADD,GAEC,cAFH,GAEqB;AAHV,GAAL,kqFAAP;AAKA,CARD;;AAUA,MAAMK,UAAU,GAAG;AAAA,MAAE;AACpB,wBAAoBL,WAAW,GAAG;AADd,GAAF;AAAA,sBAGlB,gBAAK;AACJM,IAAAA,MAAM,EAAEN,WAAW,KAAK,UAAhB,GAA6B,MAA7B,GAAsC,CAD1C;AAEJO,IAAAA,KAAK,EAAEP,WAAW,KAAK,UAAhB,GAA6B,CAA7B,GAAiC;AAFpC,GAAL,gqFAHkB;AAAA,CAAnB;;AAQO,MAAMQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIpBJ,YAJoB,OAKpBC,UALoB,OAMpBN,YANoB,ymFAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { space } from '../ui/utils/space';\nimport { rtl } from '../utils';\nimport type { Props } from './types';\n\nconst MARGIN_DIRECTIONS: Record<\n\tNonNullable< Props[ 'orientation' ] >,\n\tRecord< 'start' | 'end', string >\n> = {\n\tvertical: {\n\t\tstart: 'marginLeft',\n\t\tend: 'marginRight',\n\t},\n\thorizontal: {\n\t\tstart: 'marginTop',\n\t\tend: 'marginBottom',\n\t},\n};\n\n// Renders the correct margins given the Divider's `orientation` and the writing direction.\n// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,\n// the latter will take priority.\nconst renderMargin = ( {\n\t'aria-orientation': orientation = 'horizontal',\n\tmargin,\n\tmarginStart,\n\tmarginEnd,\n}: Props ) =>\n\tcss(\n\t\trtl( {\n\t\t\t[ MARGIN_DIRECTIONS[ orientation ].start ]: space(\n\t\t\t\tmarginStart ?? margin\n\t\t\t),\n\t\t\t[ MARGIN_DIRECTIONS[ orientation ].end ]: space(\n\t\t\t\tmarginEnd ?? margin\n\t\t\t),\n\t\t} )()\n\t);\n\nconst renderBorder = ( {\n\t'aria-orientation': orientation = 'horizontal',\n}: Props ) => {\n\treturn css( {\n\t\t[ orientation === 'vertical'\n\t\t\t? 'borderRight'\n\t\t\t: 'borderBottom' ]: '1px solid currentColor',\n\t} );\n};\n\nconst renderSize = ( {\n\t'aria-orientation': orientation = 'horizontal',\n}: Props ) =>\n\tcss( {\n\t\theight: orientation === 'vertical' ? 'auto' : 0,\n\t\twidth: orientation === 'vertical' ? 0 : 'auto',\n\t} );\n\nexport const DividerView = styled.hr< Props >`\n\tborder: 0;\n\tmargin: 0;\n\n\t${ renderBorder }\n\t${ renderSize }\n\t${ renderMargin }\n`;\n"]}
@@ -49,11 +49,15 @@ function DropZoneComponent(_ref) {
49
49
  onDrop(event) {
50
50
  const files = (0, _dom.getFilesFromDataTransfer)(event.dataTransfer);
51
51
  const html = event.dataTransfer.getData('text/html');
52
+ /**
53
+ * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
54
+ * The order of the checks is important to recognise the HTML drop.
55
+ */
52
56
 
53
- if (files.length && onFilesDrop) {
54
- onFilesDrop(files);
55
- } else if (html && onHTMLDrop) {
57
+ if (html && onHTMLDrop) {
56
58
  onHTMLDrop(html);
59
+ } else if (files.length && onFilesDrop) {
60
+ onFilesDrop(files);
57
61
  } else if (onDrop) {
58
62
  onDrop(event);
59
63
  }
@@ -62,13 +66,17 @@ function DropZoneComponent(_ref) {
62
66
  onDragStart(event) {
63
67
  setIsDraggingOverDocument(true);
64
68
  let _type = 'default';
69
+ /**
70
+ * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
71
+ * The order of the checks is important to recognise the HTML drop.
72
+ */
65
73
 
66
- if ( // Check for the types because sometimes the files themselves
74
+ if ((0, _lodash.includes)(event.dataTransfer.types, 'text/html')) {
75
+ _type = 'html';
76
+ } else if ( // Check for the types because sometimes the files themselves
67
77
  // are only available on drop.
68
78
  (0, _lodash.includes)(event.dataTransfer.types, 'Files') || (0, _dom.getFilesFromDataTransfer)(event.dataTransfer).length > 0) {
69
79
  _type = 'file';
70
- } else if ((0, _lodash.includes)(event.dataTransfer.types, 'text/html')) {
71
- _type = 'html';
72
80
  }
73
81
 
74
82
  setType(_type);