@wordpress/components 19.8.4 → 19.11.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 (630) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/CONTRIBUTING.md +80 -7
  3. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
  4. package/build/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  5. package/build/border-box-control/border-box-control/component.js +22 -7
  6. package/build/border-box-control/border-box-control/component.js.map +1 -1
  7. package/build/border-box-control/border-box-control-linked-button/hook.js +3 -2
  8. package/build/border-box-control/border-box-control-linked-button/hook.js.map +1 -1
  9. package/build/border-box-control/border-box-control-split-controls/component.js +21 -8
  10. package/build/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  11. package/build/border-box-control/border-box-control-visualizer/hook.js +3 -2
  12. package/build/border-box-control/border-box-control-visualizer/hook.js.map +1 -1
  13. package/build/border-box-control/styles.js +11 -15
  14. package/build/border-box-control/styles.js.map +1 -1
  15. package/build/border-control/border-control/component.js +5 -3
  16. package/build/border-control/border-control/component.js.map +1 -1
  17. package/build/border-control/border-control/hook.js +6 -3
  18. package/build/border-control/border-control/hook.js.map +1 -1
  19. package/build/border-control/border-control-dropdown/component.js +6 -2
  20. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  21. package/build/border-control/border-control-dropdown/hook.js +5 -5
  22. package/build/border-control/border-control-dropdown/hook.js.map +1 -1
  23. package/build/border-control/styles.js +58 -29
  24. package/build/border-control/styles.js.map +1 -1
  25. package/build/box-control/index.js +0 -21
  26. package/build/box-control/index.js.map +1 -1
  27. package/build/box-control/utils.js +1 -8
  28. package/build/box-control/utils.js.map +1 -1
  29. package/build/button/index.js +3 -5
  30. package/build/button/index.js.map +1 -1
  31. package/build/button/index.native.js +16 -2
  32. package/build/button/index.native.js.map +1 -1
  33. package/build/button-group/index.js +24 -7
  34. package/build/button-group/index.js.map +1 -1
  35. package/build/{flyout → button-group}/types.js +0 -0
  36. package/build/button-group/types.js.map +1 -0
  37. package/build/checkbox-control/index.js +34 -7
  38. package/build/checkbox-control/index.js.map +1 -1
  39. package/build/checkbox-control/types.js +6 -0
  40. package/build/checkbox-control/types.js.map +1 -0
  41. package/build/circular-option-picker/index.js +1 -2
  42. package/build/circular-option-picker/index.js.map +1 -1
  43. package/build/color-palette/index.js +5 -12
  44. package/build/color-palette/index.js.map +1 -1
  45. package/build/date-time/date.js +43 -19
  46. package/build/date-time/date.js.map +1 -1
  47. package/build/date-time/index.js +28 -3
  48. package/build/date-time/index.js.map +1 -1
  49. package/build/date-time/time.js +42 -40
  50. package/build/date-time/time.js.map +1 -1
  51. package/build/date-time/timezone.js +4 -3
  52. package/build/date-time/timezone.js.map +1 -1
  53. package/build/date-time/types.js +6 -0
  54. package/build/date-time/types.js.map +1 -0
  55. package/build/date-time/utils.js +6 -4
  56. package/build/date-time/utils.js.map +1 -1
  57. package/build/disabled/index.js +4 -76
  58. package/build/disabled/index.js.map +1 -1
  59. package/build/draggable/index.native.js +223 -0
  60. package/build/draggable/index.native.js.map +1 -0
  61. package/build/dropdown/index.js +7 -5
  62. package/build/dropdown/index.js.map +1 -1
  63. package/build/focal-point-picker/index.native.js +3 -3
  64. package/build/focal-point-picker/index.native.js.map +1 -1
  65. package/build/heading/hook.js +1 -1
  66. package/build/heading/hook.js.map +1 -1
  67. package/build/index.js +0 -8
  68. package/build/index.js.map +1 -1
  69. package/build/index.native.js +16 -0
  70. package/build/index.native.js.map +1 -1
  71. package/build/input-control/index.js +27 -4
  72. package/build/input-control/index.js.map +1 -1
  73. package/build/input-control/styles/input-control-styles.js +42 -30
  74. package/build/input-control/styles/input-control-styles.js.map +1 -1
  75. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +1 -1
  76. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  77. package/build/mobile/bottom-sheet/index.native.js +1 -1
  78. package/build/mobile/bottom-sheet/index.native.js.map +1 -1
  79. package/build/mobile/bottom-sheet-select-control/index.native.js +4 -2
  80. package/build/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  81. package/build/mobile/html-text-input/index.native.js +19 -8
  82. package/build/mobile/html-text-input/index.native.js.map +1 -1
  83. package/build/mobile/keyboard-aware-flat-list/index.android.js +28 -5
  84. package/build/mobile/keyboard-aware-flat-list/index.android.js.map +1 -1
  85. package/build/mobile/keyboard-aware-flat-list/index.ios.js +47 -24
  86. package/build/mobile/keyboard-aware-flat-list/index.ios.js.map +1 -1
  87. package/build/navigation/styles/navigation-styles.js +12 -12
  88. package/build/navigation/styles/navigation-styles.js.map +1 -1
  89. package/build/notice/index.native.js +44 -40
  90. package/build/notice/index.native.js.map +1 -1
  91. package/build/notice/list.native.js +27 -45
  92. package/build/notice/list.native.js.map +1 -1
  93. package/build/palette-edit/index.js +38 -7
  94. package/build/palette-edit/index.js.map +1 -1
  95. package/build/popover/index.js +223 -323
  96. package/build/popover/index.js.map +1 -1
  97. package/build/resizable-box/resize-tooltip/utils.js +5 -8
  98. package/build/resizable-box/resize-tooltip/utils.js.map +1 -1
  99. package/build/sandbox/index.js +2 -2
  100. package/build/sandbox/index.js.map +1 -1
  101. package/build/sandbox/index.native.js +1 -1
  102. package/build/sandbox/index.native.js.map +1 -1
  103. package/build/select-control/index.js +31 -4
  104. package/build/select-control/index.js.map +1 -1
  105. package/build/select-control/styles/select-control-styles.js +17 -14
  106. package/build/select-control/styles/select-control-styles.js.map +1 -1
  107. package/build/surface/styles.js +8 -8
  108. package/build/surface/styles.js.map +1 -1
  109. package/build/text/hook.js +5 -5
  110. package/build/text/hook.js.map +1 -1
  111. package/build/text/styles/text-mixins.native.js +1 -1
  112. package/build/text/styles/text-mixins.native.js.map +1 -1
  113. package/build/text/styles.js +7 -7
  114. package/build/text/styles.js.map +1 -1
  115. package/build/text-control/index.js +35 -28
  116. package/build/text-control/index.js.map +1 -1
  117. package/build/text-control/types.js +6 -0
  118. package/build/text-control/types.js.map +1 -0
  119. package/build/toggle-group-control/toggle-group-control/component.js +1 -3
  120. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  121. package/build/toggle-group-control/toggle-group-control-option-icon/component.js +6 -4
  122. package/build/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  123. package/build/tools-panel/tools-panel-header/component.js +52 -36
  124. package/build/tools-panel/tools-panel-header/component.js.map +1 -1
  125. package/build/tooltip/index.js +2 -2
  126. package/build/tooltip/index.js.map +1 -1
  127. package/build/ui/spinner/component.js +1 -1
  128. package/build/ui/spinner/component.js.map +1 -1
  129. package/build/unit-control/index.js +3 -3
  130. package/build/unit-control/index.js.map +1 -1
  131. package/build/unit-control/styles/unit-control-styles.js +11 -20
  132. package/build/unit-control/styles/unit-control-styles.js.map +1 -1
  133. package/build/unit-control/utils.js.map +1 -1
  134. package/build/utils/colors-values.js +9 -24
  135. package/build/utils/colors-values.js.map +1 -1
  136. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js +11 -11
  137. package/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js.map +1 -1
  138. package/build-module/border-box-control/border-box-control/component.js +22 -7
  139. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  140. package/build-module/border-box-control/border-box-control-linked-button/hook.js +3 -2
  141. package/build-module/border-box-control/border-box-control-linked-button/hook.js.map +1 -1
  142. package/build-module/border-box-control/border-box-control-split-controls/component.js +21 -8
  143. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  144. package/build-module/border-box-control/border-box-control-visualizer/hook.js +3 -2
  145. package/build-module/border-box-control/border-box-control-visualizer/hook.js.map +1 -1
  146. package/build-module/border-box-control/styles.js +9 -15
  147. package/build-module/border-box-control/styles.js.map +1 -1
  148. package/build-module/border-control/border-control/component.js +5 -3
  149. package/build-module/border-control/border-control/component.js.map +1 -1
  150. package/build-module/border-control/border-control/hook.js +6 -3
  151. package/build-module/border-control/border-control/hook.js.map +1 -1
  152. package/build-module/border-control/border-control-dropdown/component.js +6 -2
  153. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  154. package/build-module/border-control/border-control-dropdown/hook.js +5 -5
  155. package/build-module/border-control/border-control-dropdown/hook.js.map +1 -1
  156. package/build-module/border-control/styles.js +56 -29
  157. package/build-module/border-control/styles.js.map +1 -1
  158. package/build-module/box-control/index.js +1 -20
  159. package/build-module/box-control/index.js.map +1 -1
  160. package/build-module/box-control/utils.js +0 -6
  161. package/build-module/box-control/utils.js.map +1 -1
  162. package/build-module/button/index.js +3 -4
  163. package/build-module/button/index.js.map +1 -1
  164. package/build-module/button/index.native.js +16 -3
  165. package/build-module/button/index.native.js.map +1 -1
  166. package/build-module/button-group/index.js +27 -7
  167. package/build-module/button-group/index.js.map +1 -1
  168. package/build-module/{flyout → button-group}/types.js +0 -0
  169. package/build-module/{flyout → button-group}/types.js.map +0 -0
  170. package/build-module/checkbox-control/index.js +31 -7
  171. package/build-module/checkbox-control/index.js.map +1 -1
  172. package/build-module/checkbox-control/types.js +2 -0
  173. package/{build/flyout → build-module/checkbox-control}/types.js.map +0 -0
  174. package/build-module/circular-option-picker/index.js +1 -2
  175. package/build-module/circular-option-picker/index.js.map +1 -1
  176. package/build-module/color-palette/index.js +5 -11
  177. package/build-module/color-palette/index.js.map +1 -1
  178. package/build-module/date-time/date.js +44 -19
  179. package/build-module/date-time/date.js.map +1 -1
  180. package/build-module/date-time/index.js +28 -4
  181. package/build-module/date-time/index.js.map +1 -1
  182. package/build-module/date-time/time.js +43 -41
  183. package/build-module/date-time/time.js.map +1 -1
  184. package/build-module/date-time/timezone.js +4 -3
  185. package/build-module/date-time/timezone.js.map +1 -1
  186. package/build-module/date-time/types.js +2 -0
  187. package/build-module/date-time/types.js.map +1 -0
  188. package/build-module/date-time/utils.js +6 -4
  189. package/build-module/date-time/utils.js.map +1 -1
  190. package/build-module/disabled/index.js +5 -76
  191. package/build-module/disabled/index.js.map +1 -1
  192. package/build-module/draggable/index.native.js +206 -0
  193. package/build-module/draggable/index.native.js.map +1 -0
  194. package/build-module/dropdown/index.js +7 -5
  195. package/build-module/dropdown/index.js.map +1 -1
  196. package/build-module/focal-point-picker/index.native.js +3 -3
  197. package/build-module/focal-point-picker/index.native.js.map +1 -1
  198. package/build-module/heading/hook.js +1 -1
  199. package/build-module/heading/hook.js.map +1 -1
  200. package/build-module/index.js +0 -1
  201. package/build-module/index.js.map +1 -1
  202. package/build-module/index.native.js +2 -1
  203. package/build-module/index.native.js.map +1 -1
  204. package/build-module/input-control/index.js +24 -3
  205. package/build-module/input-control/index.js.map +1 -1
  206. package/build-module/input-control/styles/input-control-styles.js +42 -30
  207. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  208. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +1 -1
  209. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  210. package/build-module/mobile/bottom-sheet/index.native.js +1 -1
  211. package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
  212. package/build-module/mobile/bottom-sheet-select-control/index.native.js +4 -2
  213. package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  214. package/build-module/mobile/html-text-input/index.native.js +20 -9
  215. package/build-module/mobile/html-text-input/index.native.js.map +1 -1
  216. package/build-module/mobile/keyboard-aware-flat-list/index.android.js +21 -5
  217. package/build-module/mobile/keyboard-aware-flat-list/index.android.js.map +1 -1
  218. package/build-module/mobile/keyboard-aware-flat-list/index.ios.js +42 -25
  219. package/build-module/mobile/keyboard-aware-flat-list/index.ios.js.map +1 -1
  220. package/build-module/navigation/styles/navigation-styles.js +13 -13
  221. package/build-module/navigation/styles/navigation-styles.js.map +1 -1
  222. package/build-module/notice/index.native.js +45 -41
  223. package/build-module/notice/index.native.js.map +1 -1
  224. package/build-module/notice/list.native.js +28 -46
  225. package/build-module/notice/list.native.js.map +1 -1
  226. package/build-module/palette-edit/index.js +37 -7
  227. package/build-module/palette-edit/index.js.map +1 -1
  228. package/build-module/popover/index.js +225 -325
  229. package/build-module/popover/index.js.map +1 -1
  230. package/build-module/resizable-box/resize-tooltip/utils.js +4 -5
  231. package/build-module/resizable-box/resize-tooltip/utils.js.map +1 -1
  232. package/build-module/sandbox/index.js +2 -2
  233. package/build-module/sandbox/index.js.map +1 -1
  234. package/build-module/sandbox/index.native.js +1 -1
  235. package/build-module/sandbox/index.native.js.map +1 -1
  236. package/build-module/select-control/index.js +29 -3
  237. package/build-module/select-control/index.js.map +1 -1
  238. package/build-module/select-control/styles/select-control-styles.js +17 -14
  239. package/build-module/select-control/styles/select-control-styles.js.map +1 -1
  240. package/build-module/surface/styles.js +8 -8
  241. package/build-module/surface/styles.js.map +1 -1
  242. package/build-module/text/hook.js +5 -5
  243. package/build-module/text/hook.js.map +1 -1
  244. package/build-module/text/styles/text-mixins.native.js +2 -2
  245. package/build-module/text/styles/text-mixins.native.js.map +1 -1
  246. package/build-module/text/styles.js +7 -7
  247. package/build-module/text/styles.js.map +1 -1
  248. package/build-module/text-control/index.js +35 -27
  249. package/build-module/text-control/index.js.map +1 -1
  250. package/build-module/text-control/types.js +2 -0
  251. package/build-module/text-control/types.js.map +1 -0
  252. package/build-module/toggle-group-control/toggle-group-control/component.js +2 -3
  253. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  254. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js +1 -5
  255. package/build-module/toggle-group-control/toggle-group-control-option-icon/component.js.map +1 -1
  256. package/build-module/tools-panel/tools-panel-header/component.js +51 -36
  257. package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
  258. package/build-module/tooltip/index.js +2 -2
  259. package/build-module/tooltip/index.js.map +1 -1
  260. package/build-module/ui/spinner/component.js +1 -1
  261. package/build-module/ui/spinner/component.js.map +1 -1
  262. package/build-module/unit-control/index.js +3 -3
  263. package/build-module/unit-control/index.js.map +1 -1
  264. package/build-module/unit-control/styles/unit-control-styles.js +11 -20
  265. package/build-module/unit-control/styles/unit-control-styles.js.map +1 -1
  266. package/build-module/unit-control/utils.js.map +1 -1
  267. package/build-module/utils/colors-values.js +19 -23
  268. package/build-module/utils/colors-values.js.map +1 -1
  269. package/build-style/style-rtl.css +55 -170
  270. package/build-style/style.css +51 -170
  271. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  272. package/build-types/border-box-control/border-box-control/hook.d.ts +3 -1
  273. package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
  274. package/build-types/border-box-control/border-box-control-linked-button/hook.d.ts.map +1 -1
  275. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
  276. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts +3 -1
  277. package/build-types/border-box-control/border-box-control-split-controls/hook.d.ts.map +1 -1
  278. package/build-types/border-box-control/border-box-control-visualizer/hook.d.ts.map +1 -1
  279. package/build-types/border-box-control/styles.d.ts +2 -2
  280. package/build-types/border-box-control/styles.d.ts.map +1 -1
  281. package/build-types/border-box-control/types.d.ts +40 -13
  282. package/build-types/border-box-control/types.d.ts.map +1 -1
  283. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  284. package/build-types/border-control/border-control/hook.d.ts +2 -1
  285. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  286. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  287. package/build-types/border-control/border-control-dropdown/hook.d.ts +1 -0
  288. package/build-types/border-control/border-control-dropdown/hook.d.ts.map +1 -1
  289. package/build-types/border-control/styles.d.ts +2 -1
  290. package/build-types/border-control/styles.d.ts.map +1 -1
  291. package/build-types/border-control/types.d.ts +18 -6
  292. package/build-types/border-control/types.d.ts.map +1 -1
  293. package/build-types/button/index.d.ts.map +1 -1
  294. package/build-types/button-group/index.d.ts +25 -0
  295. package/build-types/button-group/index.d.ts.map +1 -0
  296. package/build-types/button-group/stories/index.d.ts +12 -0
  297. package/build-types/button-group/stories/index.d.ts.map +1 -0
  298. package/build-types/button-group/types.d.ts +11 -0
  299. package/build-types/button-group/types.d.ts.map +1 -0
  300. package/build-types/checkbox-control/index.d.ts +26 -0
  301. package/build-types/checkbox-control/index.d.ts.map +1 -0
  302. package/build-types/checkbox-control/stories/index.d.ts +13 -0
  303. package/build-types/checkbox-control/stories/index.d.ts.map +1 -0
  304. package/build-types/checkbox-control/types.d.ts +35 -0
  305. package/build-types/checkbox-control/types.d.ts.map +1 -0
  306. package/build-types/circular-option-picker/index.d.ts.map +1 -1
  307. package/build-types/color-palette/index.d.ts.map +1 -1
  308. package/build-types/color-picker/styles.d.ts +3 -3
  309. package/build-types/date-time/date.d.ts +24 -0
  310. package/build-types/date-time/date.d.ts.map +1 -0
  311. package/build-types/date-time/index.d.ts +35 -0
  312. package/build-types/date-time/index.d.ts.map +1 -0
  313. package/build-types/date-time/stories/date.d.ts +14 -0
  314. package/build-types/date-time/stories/date.d.ts.map +1 -0
  315. package/build-types/date-time/stories/index.d.ts +14 -0
  316. package/build-types/date-time/stories/index.d.ts.map +1 -0
  317. package/build-types/date-time/stories/time.d.ts +12 -0
  318. package/build-types/date-time/stories/time.d.ts.map +1 -0
  319. package/build-types/date-time/stories/utils.d.ts +3 -0
  320. package/build-types/date-time/stories/utils.d.ts.map +1 -0
  321. package/build-types/date-time/test/date.d.ts +2 -0
  322. package/build-types/date-time/test/date.d.ts.map +1 -0
  323. package/build-types/date-time/test/time.d.ts +2 -0
  324. package/build-types/date-time/test/time.d.ts.map +1 -0
  325. package/build-types/date-time/test/utils.d.ts +2 -0
  326. package/build-types/date-time/test/utils.d.ts.map +1 -0
  327. package/build-types/date-time/time.d.ts +25 -0
  328. package/build-types/date-time/time.d.ts.map +1 -0
  329. package/build-types/date-time/timezone.d.ts +8 -0
  330. package/build-types/date-time/timezone.d.ts.map +1 -0
  331. package/build-types/date-time/types.d.ts +91 -0
  332. package/build-types/date-time/types.d.ts.map +1 -0
  333. package/build-types/date-time/utils.d.ts +15 -0
  334. package/build-types/date-time/utils.d.ts.map +1 -0
  335. package/build-types/disabled/index.d.ts.map +1 -1
  336. package/build-types/dropdown/index.d.ts.map +1 -1
  337. package/build-types/input-control/index.d.ts +23 -3
  338. package/build-types/input-control/index.d.ts.map +1 -1
  339. package/build-types/input-control/input-field.d.ts +1 -1
  340. package/build-types/input-control/input-field.d.ts.map +1 -1
  341. package/build-types/input-control/stories/index.d.ts +5 -5
  342. package/build-types/input-control/stories/index.d.ts.map +1 -1
  343. package/build-types/input-control/styles/input-control-styles.d.ts +1 -0
  344. package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
  345. package/build-types/input-control/types.d.ts +79 -3
  346. package/build-types/input-control/types.d.ts.map +1 -1
  347. package/build-types/number-control/styles/number-control-styles.d.ts +1 -1
  348. package/build-types/popover/index.d.ts +5 -8
  349. package/build-types/popover/index.d.ts.map +1 -1
  350. package/build-types/resizable-box/index.d.ts +1 -1
  351. package/build-types/resizable-box/resize-tooltip/index.d.ts +1 -1
  352. package/build-types/resizable-box/resize-tooltip/utils.d.ts.map +1 -1
  353. package/build-types/select-control/index.d.ts +30 -26
  354. package/build-types/select-control/index.d.ts.map +1 -1
  355. package/build-types/select-control/stories/index.d.ts +23 -0
  356. package/build-types/select-control/stories/index.d.ts.map +1 -0
  357. package/build-types/select-control/styles/select-control-styles.d.ts +3 -4
  358. package/build-types/select-control/styles/select-control-styles.d.ts.map +1 -1
  359. package/build-types/select-control/test/select-control.d.ts +2 -0
  360. package/build-types/select-control/test/select-control.d.ts.map +1 -0
  361. package/build-types/select-control/types.d.ts +52 -1
  362. package/build-types/select-control/types.d.ts.map +1 -1
  363. package/build-types/text-control/index.d.ts +2 -2
  364. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  365. package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts.map +1 -1
  366. package/build-types/tools-panel/tools-panel-header/component.d.ts.map +1 -1
  367. package/build-types/tools-panel/types.d.ts +0 -1
  368. package/build-types/tools-panel/types.d.ts.map +1 -1
  369. package/build-types/tooltip/index.d.ts.map +1 -1
  370. package/build-types/unit-control/index.d.ts +2 -2
  371. package/build-types/unit-control/index.d.ts.map +1 -1
  372. package/build-types/unit-control/styles/unit-control-styles.d.ts.map +1 -1
  373. package/build-types/unit-control/test/index.d.ts +2 -0
  374. package/build-types/unit-control/test/index.d.ts.map +1 -0
  375. package/build-types/unit-control/test/utils.d.ts +2 -0
  376. package/build-types/unit-control/test/utils.d.ts.map +1 -0
  377. package/build-types/unit-control/types.d.ts +1 -1
  378. package/build-types/unit-control/types.d.ts.map +1 -1
  379. package/build-types/unit-control/utils.d.ts +3 -3
  380. package/build-types/unit-control/utils.d.ts.map +1 -1
  381. package/build-types/utils/colors-values.d.ts +6 -146
  382. package/build-types/utils/colors-values.d.ts.map +1 -1
  383. package/package.json +19 -19
  384. package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +5 -3
  385. package/src/autocomplete/style.scss +1 -1
  386. package/src/border-box-control/border-box-control/README.md +10 -14
  387. package/src/border-box-control/border-box-control/component.tsx +21 -4
  388. package/src/border-box-control/border-box-control-linked-button/hook.ts +10 -6
  389. package/src/border-box-control/border-box-control-split-controls/component.tsx +24 -7
  390. package/src/border-box-control/border-box-control-visualizer/hook.ts +11 -6
  391. package/src/border-box-control/stories/index.js +1 -0
  392. package/src/border-box-control/styles.ts +15 -8
  393. package/src/border-box-control/types.ts +40 -14
  394. package/src/border-control/border-control/README.md +0 -7
  395. package/src/border-control/border-control/component.tsx +4 -2
  396. package/src/border-control/border-control/hook.ts +5 -2
  397. package/src/border-control/border-control-dropdown/component.tsx +18 -11
  398. package/src/border-control/border-control-dropdown/hook.ts +7 -5
  399. package/src/border-control/stories/index.js +1 -0
  400. package/src/border-control/styles.ts +82 -22
  401. package/src/border-control/types.ts +18 -6
  402. package/src/box-control/README.md +0 -74
  403. package/src/box-control/index.js +0 -15
  404. package/src/box-control/stories/index.js +0 -29
  405. package/src/box-control/utils.js +0 -7
  406. package/src/button/index.js +2 -4
  407. package/src/button/index.native.js +33 -18
  408. package/src/button/test/index.js +16 -1
  409. package/src/button-group/index.tsx +47 -0
  410. package/src/button-group/stories/index.tsx +41 -0
  411. package/src/button-group/types.ts +11 -0
  412. package/src/checkbox-control/README.md +10 -8
  413. package/src/checkbox-control/{index.js → index.tsx} +49 -14
  414. package/src/checkbox-control/stories/{index.js → index.tsx} +49 -27
  415. package/src/checkbox-control/types.ts +36 -0
  416. package/src/circular-option-picker/index.js +1 -2
  417. package/src/circular-option-picker/style.scss +1 -0
  418. package/src/color-palette/README.md +0 -1
  419. package/src/color-palette/index.js +6 -13
  420. package/src/color-palette/style.scss +3 -18
  421. package/src/color-palette/test/__snapshots__/index.js.snap +2 -3
  422. package/src/confirm-dialog/stories/index.js +87 -99
  423. package/src/date-time/README.md +13 -10
  424. package/src/date-time/{date.js → date.tsx} +49 -20
  425. package/src/date-time/{index.js → index.tsx} +31 -5
  426. package/src/date-time/stories/date.tsx +73 -0
  427. package/src/date-time/stories/index.tsx +75 -0
  428. package/src/date-time/stories/time.tsx +51 -0
  429. package/src/date-time/stories/utils.ts +9 -0
  430. package/src/date-time/test/date.tsx +127 -0
  431. package/src/date-time/test/{time.js → time.tsx} +34 -19
  432. package/src/date-time/test/{utils.js → utils.ts} +1 -1
  433. package/src/date-time/{time.js → time.tsx} +57 -46
  434. package/src/date-time/{timezone.js → timezone.tsx} +4 -3
  435. package/src/date-time/types.ts +106 -0
  436. package/src/date-time/utils.ts +20 -0
  437. package/src/dimension-control/test/__snapshots__/index.test.js.snap +4 -4
  438. package/src/disabled/index.js +5 -90
  439. package/src/draggable/index.native.js +215 -0
  440. package/src/draggable/style.native.scss +3 -0
  441. package/src/dropdown/index.js +9 -4
  442. package/src/dropdown/style.scss +1 -1
  443. package/src/focal-point-picker/index.native.js +3 -3
  444. package/src/form-file-upload/test/index.js +20 -13
  445. package/src/heading/hook.ts +1 -1
  446. package/src/heading/test/__snapshots__/index.js.snap +3 -3
  447. package/src/index.js +0 -1
  448. package/src/index.native.js +1 -0
  449. package/src/input-control/README.md +3 -3
  450. package/src/input-control/index.tsx +23 -3
  451. package/src/input-control/stories/index.tsx +63 -0
  452. package/src/input-control/styles/input-control-styles.tsx +20 -7
  453. package/src/input-control/types.ts +79 -2
  454. package/src/item-group/stories/index.js +22 -18
  455. package/src/menu-item/style.scss +10 -0
  456. package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +1 -1
  457. package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js +9 -2
  458. package/src/mobile/bottom-sheet/index.native.js +1 -1
  459. package/src/mobile/bottom-sheet-select-control/index.native.js +8 -2
  460. package/src/mobile/html-text-input/index.native.js +45 -29
  461. package/src/mobile/html-text-input/style.android.scss +2 -15
  462. package/src/mobile/html-text-input/style.ios.scss +2 -15
  463. package/src/mobile/html-text-input/{style-common.native.scss → style.scss} +16 -0
  464. package/src/mobile/keyboard-aware-flat-list/index.android.js +15 -5
  465. package/src/mobile/keyboard-aware-flat-list/index.ios.js +75 -46
  466. package/src/mobile/link-settings/test/link-settings-navigation.native.js +9 -1
  467. package/src/navigation/styles/navigation-styles.js +5 -5
  468. package/src/navigator/stories/index.js +16 -10
  469. package/src/notice/index.native.js +44 -54
  470. package/src/notice/list.native.js +27 -51
  471. package/src/notice/style.native.scss +1 -0
  472. package/src/palette-edit/index.js +37 -9
  473. package/src/palette-edit/style.scss +0 -7
  474. package/src/palette-edit/test/index.js +63 -0
  475. package/src/panel/README.md +1 -1
  476. package/src/placeholder/test/index.js +7 -0
  477. package/src/popover/README.md +7 -9
  478. package/src/popover/index.js +242 -417
  479. package/src/popover/style.scss +20 -190
  480. package/src/popover/test/__snapshots__/index.js.snap +6 -18
  481. package/src/query-controls/README.md +2 -2
  482. package/src/resizable-box/resize-tooltip/utils.ts +4 -5
  483. package/src/sandbox/index.js +2 -2
  484. package/src/sandbox/index.native.js +1 -1
  485. package/src/select-control/README.md +2 -2
  486. package/src/select-control/index.tsx +30 -29
  487. package/src/select-control/stories/index.tsx +90 -0
  488. package/src/select-control/styles/select-control-styles.ts +16 -12
  489. package/src/select-control/test/{select-control.js → select-control.tsx} +2 -2
  490. package/src/select-control/types.ts +66 -1
  491. package/src/surface/styles.js +1 -1
  492. package/src/tab-panel/style.scss +1 -1
  493. package/src/text/hook.js +1 -1
  494. package/src/text/styles/text-mixins.native.js +2 -2
  495. package/src/text/styles.js +1 -1
  496. package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap} +16 -0
  497. package/src/text/test/{index.js → index.tsx} +12 -6
  498. package/src/text-control/index.tsx +84 -0
  499. package/src/text-control/stories/index.tsx +66 -0
  500. package/src/text-control/types.ts +29 -0
  501. package/src/toggle-group-control/test/__snapshots__/index.js.snap +4 -10
  502. package/src/toggle-group-control/toggle-group-control/component.tsx +7 -3
  503. package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +1 -5
  504. package/src/toolbar-group/style.scss +20 -0
  505. package/src/tools-panel/test/__snapshots__/index.js.snap +2 -2
  506. package/src/tools-panel/test/index.js +71 -18
  507. package/src/tools-panel/tools-panel-header/component.tsx +75 -33
  508. package/src/tools-panel/types.ts +0 -1
  509. package/src/tooltip/index.js +8 -2
  510. package/src/tooltip/style.scss +2 -4
  511. package/src/tooltip/test/index.js +6 -0
  512. package/src/tooltip/test/index.native.js +1 -1
  513. package/src/ui/spinner/component.js +1 -1
  514. package/src/ui/spinner/test/__snapshots__/index.js.snap +3 -3
  515. package/src/unit-control/index.tsx +2 -5
  516. package/src/unit-control/styles/unit-control-styles.ts +3 -13
  517. package/src/unit-control/test/__snapshots__/index.tsx.snap +33 -0
  518. package/src/unit-control/test/{index.js → index.tsx} +295 -166
  519. package/src/unit-control/test/{utils.js → utils.ts} +38 -19
  520. package/src/unit-control/types.ts +4 -1
  521. package/src/unit-control/utils.ts +5 -3
  522. package/src/utils/colors-values.js +18 -22
  523. package/tsconfig.json +14 -3
  524. package/tsconfig.tsbuildinfo +1 -1
  525. package/build/box-control/visualizer.js +0 -165
  526. package/build/box-control/visualizer.js.map +0 -1
  527. package/build/flyout/context.js +0 -23
  528. package/build/flyout/context.js.map +0 -1
  529. package/build/flyout/flyout/component.js +0 -106
  530. package/build/flyout/flyout/component.js.map +0 -1
  531. package/build/flyout/flyout/hook.js +0 -53
  532. package/build/flyout/flyout/hook.js.map +0 -1
  533. package/build/flyout/flyout/index.js +0 -24
  534. package/build/flyout/flyout/index.js.map +0 -1
  535. package/build/flyout/flyout-content/component.js +0 -65
  536. package/build/flyout/flyout-content/component.js.map +0 -1
  537. package/build/flyout/flyout-content/index.js +0 -16
  538. package/build/flyout/flyout-content/index.js.map +0 -1
  539. package/build/flyout/index.js +0 -16
  540. package/build/flyout/index.js.map +0 -1
  541. package/build/flyout/styles.js +0 -46
  542. package/build/flyout/styles.js.map +0 -1
  543. package/build/flyout/utils.js +0 -36
  544. package/build/flyout/utils.js.map +0 -1
  545. package/build/mobile/html-text-input/container.android.js +0 -41
  546. package/build/mobile/html-text-input/container.android.js.map +0 -1
  547. package/build/mobile/html-text-input/container.ios.js +0 -60
  548. package/build/mobile/html-text-input/container.ios.js.map +0 -1
  549. package/build/popover/utils.js +0 -322
  550. package/build/popover/utils.js.map +0 -1
  551. package/build-module/box-control/visualizer.js +0 -154
  552. package/build-module/box-control/visualizer.js.map +0 -1
  553. package/build-module/flyout/context.js +0 -11
  554. package/build-module/flyout/context.js.map +0 -1
  555. package/build-module/flyout/flyout/component.js +0 -89
  556. package/build-module/flyout/flyout/component.js.map +0 -1
  557. package/build-module/flyout/flyout/hook.js +0 -44
  558. package/build-module/flyout/flyout/hook.js.map +0 -1
  559. package/build-module/flyout/flyout/index.js +0 -3
  560. package/build-module/flyout/flyout/index.js.map +0 -1
  561. package/build-module/flyout/flyout-content/component.js +0 -51
  562. package/build-module/flyout/flyout-content/component.js.map +0 -1
  563. package/build-module/flyout/flyout-content/index.js +0 -2
  564. package/build-module/flyout/flyout-content/index.js.map +0 -1
  565. package/build-module/flyout/index.js +0 -2
  566. package/build-module/flyout/index.js.map +0 -1
  567. package/build-module/flyout/styles.js +0 -27
  568. package/build-module/flyout/styles.js.map +0 -1
  569. package/build-module/flyout/utils.js +0 -25
  570. package/build-module/flyout/utils.js.map +0 -1
  571. package/build-module/mobile/html-text-input/container.android.js +0 -29
  572. package/build-module/mobile/html-text-input/container.android.js.map +0 -1
  573. package/build-module/mobile/html-text-input/container.ios.js +0 -48
  574. package/build-module/mobile/html-text-input/container.ios.js.map +0 -1
  575. package/build-module/popover/utils.js +0 -308
  576. package/build-module/popover/utils.js.map +0 -1
  577. package/build-types/flyout/context.d.ts +0 -6
  578. package/build-types/flyout/context.d.ts.map +0 -1
  579. package/build-types/flyout/flyout/component.d.ts +0 -21
  580. package/build-types/flyout/flyout/component.d.ts.map +0 -1
  581. package/build-types/flyout/flyout/hook.d.ts +0 -270
  582. package/build-types/flyout/flyout/hook.d.ts.map +0 -1
  583. package/build-types/flyout/flyout/index.d.ts +0 -3
  584. package/build-types/flyout/flyout/index.d.ts.map +0 -1
  585. package/build-types/flyout/flyout-content/component.d.ts +0 -3
  586. package/build-types/flyout/flyout-content/component.d.ts.map +0 -1
  587. package/build-types/flyout/flyout-content/index.d.ts +0 -2
  588. package/build-types/flyout/flyout-content/index.d.ts.map +0 -1
  589. package/build-types/flyout/index.d.ts +0 -2
  590. package/build-types/flyout/index.d.ts.map +0 -1
  591. package/build-types/flyout/styles.d.ts +0 -22
  592. package/build-types/flyout/styles.d.ts.map +0 -1
  593. package/build-types/flyout/types.d.ts +0 -80
  594. package/build-types/flyout/types.d.ts.map +0 -1
  595. package/build-types/flyout/utils.d.ts +0 -8
  596. package/build-types/flyout/utils.d.ts.map +0 -1
  597. package/build-types/popover/utils.d.ts +0 -70
  598. package/build-types/popover/utils.d.ts.map +0 -1
  599. package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts +0 -19
  600. package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map +0 -1
  601. package/src/box-control/visualizer.js +0 -116
  602. package/src/button-group/index.js +0 -17
  603. package/src/button-group/stories/index.js +0 -21
  604. package/src/date-time/stories/date.js +0 -17
  605. package/src/date-time/stories/index.js +0 -72
  606. package/src/date-time/stories/time.js +0 -32
  607. package/src/date-time/test/date.js +0 -97
  608. package/src/date-time/utils.js +0 -18
  609. package/src/flyout/context.js +0 -10
  610. package/src/flyout/flyout/README.md +0 -98
  611. package/src/flyout/flyout/component.js +0 -111
  612. package/src/flyout/flyout/hook.js +0 -45
  613. package/src/flyout/flyout/index.js +0 -2
  614. package/src/flyout/flyout-content/component.js +0 -53
  615. package/src/flyout/flyout-content/index.js +0 -1
  616. package/src/flyout/index.js +0 -1
  617. package/src/flyout/stories/index.js +0 -24
  618. package/src/flyout/styles.ts +0 -41
  619. package/src/flyout/test/__snapshots__/index.js.snap +0 -186
  620. package/src/flyout/test/index.js +0 -103
  621. package/src/flyout/types.ts +0 -84
  622. package/src/flyout/utils.js +0 -23
  623. package/src/input-control/stories/index.js +0 -71
  624. package/src/mobile/html-text-input/container.android.js +0 -23
  625. package/src/mobile/html-text-input/container.ios.js +0 -50
  626. package/src/popover/test/utils.js +0 -304
  627. package/src/popover/utils.js +0 -396
  628. package/src/select-control/stories/index.js +0 -104
  629. package/src/text-control/index.js +0 -72
  630. package/src/text-control/stories/index.js +0 -46
@@ -6,10 +6,10 @@ import { Fragment } from "@wordpress/element";
6
6
  import classnames from 'classnames';
7
7
  import { isInteger } from 'lodash';
8
8
  import moment from 'moment';
9
+
9
10
  /**
10
11
  * WordPress dependencies
11
12
  */
12
-
13
13
  import { createElement, useState, useMemo, useEffect } from '@wordpress/element';
14
14
  import { __ } from '@wordpress/i18n';
15
15
  /**
@@ -19,24 +19,14 @@ import { __ } from '@wordpress/i18n';
19
19
  import Button from '../button';
20
20
  import ButtonGroup from '../button-group';
21
21
  import TimeZone from './timezone';
22
- /**
23
- * Module Constants
24
- */
25
-
26
22
  const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
27
23
 
28
24
  function from12hTo24h(hours, isPm) {
29
25
  return isPm ? (hours % 12 + 12) % 24 : hours % 12;
30
26
  }
31
27
  /**
32
- * <UpdateOnBlurAsIntegerField>
33
- * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
34
- *
35
- * @param {Object} props Component props.
36
- * @param {string} props.as Render the component as specific element tag, defaults to "input".
37
- * @param {number|string} props.value The default value of the component which will be parsed to integer.
38
- * @param {Function} props.onUpdate Call back when blurred and validated.
39
- * @param {string} [props.className]
28
+ * A shared component to parse, validate, and handle remounting of the
29
+ * underlying form field element like <input> and <select>.
40
30
  */
41
31
 
42
32
 
@@ -54,7 +44,7 @@ function UpdateOnBlurAsIntegerField(_ref) {
54
44
  target
55
45
  } = event;
56
46
 
57
- if (value === target.value) {
47
+ if (String(value) === target.value) {
58
48
  return;
59
49
  }
60
50
 
@@ -62,10 +52,10 @@ function UpdateOnBlurAsIntegerField(_ref) {
62
52
 
63
53
  if (!isInteger(parsedValue) || typeof props.max !== 'undefined' && parsedValue > props.max || typeof props.min !== 'undefined' && parsedValue < props.min) {
64
54
  // If validation failed, reset the value to the previous valid value.
65
- target.value = value;
55
+ target.value = String(value);
66
56
  } else {
67
57
  // Otherwise, it's valid, call onUpdate.
68
- onUpdate(target.name, parsedValue);
58
+ onUpdate(parsedValue);
69
59
  }
70
60
  }
71
61
 
@@ -79,14 +69,24 @@ function UpdateOnBlurAsIntegerField(_ref) {
79
69
  });
80
70
  }
81
71
  /**
82
- * <TimePicker>
72
+ * TimePicker is a React component that renders a clock for time selection.
73
+ *
74
+ * ```jsx
75
+ * import { TimePicker } from '@wordpress/components';
76
+ * import { useState } from '@wordpress/element';
83
77
  *
84
- * @typedef {Date|string|number} WPValidDateTimeFormat
78
+ * const MyTimePicker = () => {
79
+ * const [ time, setTime ] = useState( new Date() );
85
80
  *
86
- * @param {Object} props Component props.
87
- * @param {boolean} props.is12Hour Should the time picker showed in 12 hour format or 24 hour format.
88
- * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.
89
- * @param {Function} props.onChange Callback function when the date changed.
81
+ * return (
82
+ * <TimePicker
83
+ * currentTime={ date }
84
+ * onChange={ ( newTime ) => setTime( newTime ) }
85
+ * is12Hour
86
+ * />
87
+ * );
88
+ * };
89
+ * ```
90
90
  */
91
91
 
92
92
 
@@ -97,7 +97,7 @@ export function TimePicker(_ref2) {
97
97
  onChange
98
98
  } = _ref2;
99
99
  const [date, setDate] = useState(() => // Truncate the date at the minutes, see: #15495.
100
- moment(currentTime).startOf('minutes')); // Reset the state when currentTime changed.
100
+ currentTime ? moment(currentTime).startOf('minutes') : moment()); // Reset the state when currentTime changed.
101
101
 
102
102
  useEffect(() => {
103
103
  setDate(currentTime ? moment(currentTime).startOf('minutes') : moment());
@@ -115,33 +115,35 @@ export function TimePicker(_ref2) {
115
115
  year: date.format('YYYY'),
116
116
  minutes: date.format('mm'),
117
117
  hours: date.format(is12Hour ? 'hh' : 'HH'),
118
- am: date.format('H') <= 11 ? 'AM' : 'PM'
118
+ am: Number(date.format('H')) <= 11 ? 'AM' : 'PM'
119
119
  }), [date, is12Hour]);
120
120
  /**
121
121
  * Function that sets the date state and calls the onChange with a new date.
122
122
  * The date is truncated at the minutes.
123
123
  *
124
- * @param {Object} newDate The date object.
124
+ * @param {Moment} newDate The date object.
125
125
  */
126
126
 
127
127
  function changeDate(newDate) {
128
128
  setDate(newDate);
129
- onChange(newDate.format(TIMEZONELESS_FORMAT));
129
+ onChange === null || onChange === void 0 ? void 0 : onChange(newDate.format(TIMEZONELESS_FORMAT));
130
130
  }
131
131
 
132
- function update(name, value) {
133
- // If the 12-hour format is being used and the 'PM' period is selected, then
134
- // the incoming value (which ranges 1-12) should be increased by 12 to match
135
- // the expected 24-hour format.
136
- let adjustedValue = value;
132
+ function update(name) {
133
+ return value => {
134
+ // If the 12-hour format is being used and the 'PM' period is selected, then
135
+ // the incoming value (which ranges 1-12) should be increased by 12 to match
136
+ // the expected 24-hour format.
137
+ let adjustedValue = value;
137
138
 
138
- if (name === 'hours' && is12Hour) {
139
- adjustedValue = from12hTo24h(value, am === 'PM');
140
- } // Clone the date and call the specific setter function according to `name`.
139
+ if (name === 'hours' && is12Hour) {
140
+ adjustedValue = from12hTo24h(value, am === 'PM');
141
+ } // Clone the date and call the specific setter function according to `name`.
141
142
 
142
143
 
143
- const newDate = date.clone()[name](adjustedValue);
144
- changeDate(newDate);
144
+ const newDate = date.clone()[name](adjustedValue);
145
+ changeDate(newDate);
146
+ };
145
147
  }
146
148
 
147
149
  function updateAmPm(value) {
@@ -168,7 +170,7 @@ export function TimePicker(_ref2) {
168
170
  step: 1,
169
171
  min: 1,
170
172
  max: 31,
171
- onUpdate: update
173
+ onUpdate: update('date')
172
174
  }));
173
175
  const monthFormat = createElement("div", {
174
176
  className: "components-datetime__time-field components-datetime__time-field-month"
@@ -179,7 +181,7 @@ export function TimePicker(_ref2) {
179
181
  name: "month",
180
182
  value: month // The value starts from 0, so we have to -1 when setting month.
181
183
  ,
182
- onUpdate: (key, value) => update(key, value - 1)
184
+ onUpdate: value => update('month')(value - 1)
183
185
  }, createElement("option", {
184
186
  value: "01"
185
187
  }, __('January')), createElement("option", {
@@ -223,7 +225,7 @@ export function TimePicker(_ref2) {
223
225
  min: 0,
224
226
  max: 9999,
225
227
  value: year,
226
- onUpdate: update
228
+ onUpdate: update('year')
227
229
  })))), createElement("fieldset", null, createElement("legend", {
228
230
  className: "components-datetime__time-legend invisible"
229
231
  }, __('Time')), createElement("div", {
@@ -239,7 +241,7 @@ export function TimePicker(_ref2) {
239
241
  min: is12Hour ? 1 : 0,
240
242
  max: is12Hour ? 12 : 23,
241
243
  value: hours,
242
- onUpdate: update
244
+ onUpdate: update('hours')
243
245
  }), createElement("span", {
244
246
  className: "components-datetime__time-separator",
245
247
  "aria-hidden": "true"
@@ -252,7 +254,7 @@ export function TimePicker(_ref2) {
252
254
  min: 0,
253
255
  max: 59,
254
256
  value: minutes,
255
- onUpdate: update
257
+ onUpdate: update('minutes')
256
258
  })), is12Hour && createElement(ButtonGroup, {
257
259
  className: "components-datetime__time-field components-datetime__time-field-am-pm"
258
260
  }, createElement(Button, {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/date-time/time.js"],"names":["classnames","isInteger","moment","createElement","useState","useMemo","useEffect","__","Button","ButtonGroup","TimeZone","TIMEZONELESS_FORMAT","from12hTo24h","hours","isPm","UpdateOnBlurAsIntegerField","as","value","onUpdate","className","props","handleBlur","event","target","parsedValue","parseInt","max","min","name","key","defaultValue","onBlur","TimePicker","is12Hour","currentTime","onChange","date","setDate","startOf","day","month","year","minutes","am","format","changeDate","newDate","update","adjustedValue","clone","updateAmPm","parsedHours","dayFormat","monthFormat","dayMonthFormat"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isInteger } from 'lodash';\nimport moment from 'moment';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateElement,\n\tuseState,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ButtonGroup from '../button-group';\nimport TimeZone from './timezone';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\n\nfunction from12hTo24h( hours, isPm ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * <UpdateOnBlurAsIntegerField>\n * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.\n *\n * @param {Object} props Component props.\n * @param {string} props.as Render the component as specific element tag, defaults to \"input\".\n * @param {number|string} props.value The default value of the component which will be parsed to integer.\n * @param {Function} props.onUpdate Call back when blurred and validated.\n * @param {string} [props.className]\n */\nfunction UpdateOnBlurAsIntegerField( {\n\tas,\n\tvalue,\n\tonUpdate,\n\tclassName,\n\t...props\n} ) {\n\tfunction handleBlur( event ) {\n\t\tconst { target } = event;\n\n\t\tif ( value === target.value ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst parsedValue = parseInt( target.value, 10 );\n\n\t\t// Run basic number validation on the input.\n\t\tif (\n\t\t\t! isInteger( parsedValue ) ||\n\t\t\t( typeof props.max !== 'undefined' && parsedValue > props.max ) ||\n\t\t\t( typeof props.min !== 'undefined' && parsedValue < props.min )\n\t\t) {\n\t\t\t// If validation failed, reset the value to the previous valid value.\n\t\t\ttarget.value = value;\n\t\t} else {\n\t\t\t// Otherwise, it's valid, call onUpdate.\n\t\t\tonUpdate( target.name, parsedValue );\n\t\t}\n\t}\n\n\treturn createElement( as || 'input', {\n\t\t// Re-mount the input value to accept the latest value as the defaultValue.\n\t\tkey: value,\n\t\tdefaultValue: value,\n\t\tonBlur: handleBlur,\n\t\tclassName: classnames(\n\t\t\t'components-datetime__time-field-integer-field',\n\t\t\tclassName\n\t\t),\n\t\t...props,\n\t} );\n}\n\n/**\n * <TimePicker>\n *\n * @typedef {Date|string|number} WPValidDateTimeFormat\n *\n * @param {Object} props Component props.\n * @param {boolean} props.is12Hour Should the time picker showed in 12 hour format or 24 hour format.\n * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.\n * @param {Function} props.onChange Callback function when the date changed.\n */\nexport function TimePicker( { is12Hour, currentTime, onChange } ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tmoment( currentTime ).startOf( 'minutes' )\n\t);\n\n\t// Reset the state when currentTime changed.\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: date.format( 'DD' ),\n\t\t\tmonth: date.format( 'MM' ),\n\t\t\tyear: date.format( 'YYYY' ),\n\t\t\tminutes: date.format( 'mm' ),\n\t\t\thours: date.format( is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: date.format( 'H' ) <= 11 ? 'AM' : 'PM',\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\t/**\n\t * Function that sets the date state and calls the onChange with a new date.\n\t * The date is truncated at the minutes.\n\t *\n\t * @param {Object} newDate The date object.\n\t */\n\tfunction changeDate( newDate ) {\n\t\tsetDate( newDate );\n\t\tonChange( newDate.format( TIMEZONELESS_FORMAT ) );\n\t}\n\n\tfunction update( name, value ) {\n\t\t// If the 12-hour format is being used and the 'PM' period is selected, then\n\t\t// the incoming value (which ranges 1-12) should be increased by 12 to match\n\t\t// the expected 24-hour format.\n\t\tlet adjustedValue = value;\n\t\tif ( name === 'hours' && is12Hour ) {\n\t\t\tadjustedValue = from12hTo24h( value, am === 'PM' );\n\t\t}\n\n\t\t// Clone the date and call the specific setter function according to `name`.\n\t\tconst newDate = date.clone()[ name ]( adjustedValue );\n\t\tchangeDate( newDate );\n\t}\n\n\tfunction updateAmPm( value ) {\n\t\treturn () => {\n\t\t\tif ( am === value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst parsedHours = parseInt( hours, 10 );\n\n\t\t\tconst newDate = date\n\t\t\t\t.clone()\n\t\t\t\t.hours( from12hTo24h( parsedHours, value === 'PM' ) );\n\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tconst dayFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-day\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\taria-label={ __( 'Day' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-day-input\"\n\t\t\t\ttype=\"number\"\n\t\t\t\t// The correct function to call in moment.js is \"date\" not \"day\".\n\t\t\t\tname=\"date\"\n\t\t\t\tvalue={ day }\n\t\t\t\tstep={ 1 }\n\t\t\t\tmin={ 1 }\n\t\t\t\tmax={ 31 }\n\t\t\t\tonUpdate={ update }\n\t\t\t/>\n\t\t</div>\n\t);\n\n\tconst monthFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-month\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\tas=\"select\"\n\t\t\t\taria-label={ __( 'Month' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-month-select\"\n\t\t\t\tname=\"month\"\n\t\t\t\tvalue={ month }\n\t\t\t\t// The value starts from 0, so we have to -1 when setting month.\n\t\t\t\tonUpdate={ ( key, value ) => update( key, value - 1 ) }\n\t\t\t>\n\t\t\t\t<option value=\"01\">{ __( 'January' ) }</option>\n\t\t\t\t<option value=\"02\">{ __( 'February' ) }</option>\n\t\t\t\t<option value=\"03\">{ __( 'March' ) }</option>\n\t\t\t\t<option value=\"04\">{ __( 'April' ) }</option>\n\t\t\t\t<option value=\"05\">{ __( 'May' ) }</option>\n\t\t\t\t<option value=\"06\">{ __( 'June' ) }</option>\n\t\t\t\t<option value=\"07\">{ __( 'July' ) }</option>\n\t\t\t\t<option value=\"08\">{ __( 'August' ) }</option>\n\t\t\t\t<option value=\"09\">{ __( 'September' ) }</option>\n\t\t\t\t<option value=\"10\">{ __( 'October' ) }</option>\n\t\t\t\t<option value=\"11\">{ __( 'November' ) }</option>\n\t\t\t\t<option value=\"12\">{ __( 'December' ) }</option>\n\t\t\t</UpdateOnBlurAsIntegerField>\n\t\t</div>\n\t);\n\n\tconst dayMonthFormat = is12Hour ? (\n\t\t<>\n\t\t\t{ monthFormat }\n\t\t\t{ dayFormat }\n\t\t</>\n\t) : (\n\t\t<>\n\t\t\t{ dayFormat }\n\t\t\t{ monthFormat }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( 'components-datetime__time' ) }>\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t{ dayMonthFormat }\n\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-year\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Year' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-year-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"year\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 9999 }\n\t\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-time\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Hours' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"hours\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ is12Hour ? 1 : 0 }\n\t\t\t\t\t\t\tmax={ is12Hour ? 12 : 23 }\n\t\t\t\t\t\t\tvalue={ hours }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Minutes' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"minutes\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 59 }\n\t\t\t\t\t\t\tvalue={ minutes }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup className=\"components-datetime__time-field components-datetime__time-field-am-pm\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'AM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'AM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'AM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'PM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'PM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'PM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t);\n}\n\nexport default TimePicker;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/date-time/time.tsx"],"names":["classnames","isInteger","moment","createElement","useState","useMemo","useEffect","__","Button","ButtonGroup","TimeZone","TIMEZONELESS_FORMAT","from12hTo24h","hours","isPm","UpdateOnBlurAsIntegerField","as","value","onUpdate","className","props","handleBlur","event","target","String","parsedValue","parseInt","max","min","key","defaultValue","onBlur","TimePicker","is12Hour","currentTime","onChange","date","setDate","startOf","day","month","year","minutes","am","format","Number","changeDate","newDate","update","name","adjustedValue","clone","updateAmPm","parsedHours","dayFormat","monthFormat","dayMonthFormat"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isInteger } from 'lodash';\nimport moment from 'moment';\nimport type { FocusEvent } from 'react';\nimport type { Moment } from 'moment';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateElement,\n\tuseState,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ButtonGroup from '../button-group';\nimport TimeZone from './timezone';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { UpdateOnBlurAsIntegerFieldProps, TimePickerProps } from './types';\n\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\n\nfunction from12hTo24h( hours: number, isPm: boolean ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * A shared component to parse, validate, and handle remounting of the\n * underlying form field element like <input> and <select>.\n */\nfunction UpdateOnBlurAsIntegerField( {\n\tas,\n\tvalue,\n\tonUpdate,\n\tclassName,\n\t...props\n}: WordPressComponentProps< UpdateOnBlurAsIntegerFieldProps, 'input', true > ) {\n\tfunction handleBlur( event: FocusEvent< HTMLInputElement > ) {\n\t\tconst { target } = event;\n\n\t\tif ( String( value ) === target.value ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst parsedValue = parseInt( target.value, 10 );\n\n\t\t// Run basic number validation on the input.\n\t\tif (\n\t\t\t! isInteger( parsedValue ) ||\n\t\t\t( typeof props.max !== 'undefined' && parsedValue > props.max ) ||\n\t\t\t( typeof props.min !== 'undefined' && parsedValue < props.min )\n\t\t) {\n\t\t\t// If validation failed, reset the value to the previous valid value.\n\t\t\ttarget.value = String( value );\n\t\t} else {\n\t\t\t// Otherwise, it's valid, call onUpdate.\n\t\t\tonUpdate( parsedValue );\n\t\t}\n\t}\n\n\treturn createElement( as || 'input', {\n\t\t// Re-mount the input value to accept the latest value as the defaultValue.\n\t\tkey: value,\n\t\tdefaultValue: value,\n\t\tonBlur: handleBlur,\n\t\tclassName: classnames(\n\t\t\t'components-datetime__time-field-integer-field',\n\t\t\tclassName\n\t\t),\n\t\t...props,\n\t} );\n}\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n * const [ time, setTime ] = useState( new Date() );\n *\n * return (\n * <TimePicker\n * currentTime={ date }\n * onChange={ ( newTime ) => setTime( newTime ) }\n * is12Hour\n * />\n * );\n * };\n * ```\n */\nexport function TimePicker( {\n\tis12Hour,\n\tcurrentTime,\n\tonChange,\n}: TimePickerProps ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t);\n\n\t// Reset the state when currentTime changed.\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: date.format( 'DD' ),\n\t\t\tmonth: date.format( 'MM' ),\n\t\t\tyear: date.format( 'YYYY' ),\n\t\t\tminutes: date.format( 'mm' ),\n\t\t\thours: date.format( is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: Number( date.format( 'H' ) ) <= 11 ? 'AM' : 'PM',\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\t/**\n\t * Function that sets the date state and calls the onChange with a new date.\n\t * The date is truncated at the minutes.\n\t *\n\t * @param {Moment} newDate The date object.\n\t */\n\tfunction changeDate( newDate: Moment ) {\n\t\tsetDate( newDate );\n\t\tonChange?.( newDate.format( TIMEZONELESS_FORMAT ) );\n\t}\n\n\tfunction update( name: 'date' | 'month' | 'year' | 'hours' | 'minutes' ) {\n\t\treturn ( value: number ) => {\n\t\t\t// If the 12-hour format is being used and the 'PM' period is selected, then\n\t\t\t// the incoming value (which ranges 1-12) should be increased by 12 to match\n\t\t\t// the expected 24-hour format.\n\t\t\tlet adjustedValue = value;\n\t\t\tif ( name === 'hours' && is12Hour ) {\n\t\t\t\tadjustedValue = from12hTo24h( value, am === 'PM' );\n\t\t\t}\n\n\t\t\t// Clone the date and call the specific setter function according to `name`.\n\t\t\tconst newDate = date.clone()[ name ]( adjustedValue );\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tfunction updateAmPm( value: 'AM' | 'PM' ) {\n\t\treturn () => {\n\t\t\tif ( am === value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst parsedHours = parseInt( hours, 10 );\n\n\t\t\tconst newDate = date\n\t\t\t\t.clone()\n\t\t\t\t.hours( from12hTo24h( parsedHours, value === 'PM' ) );\n\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tconst dayFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-day\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\taria-label={ __( 'Day' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-day-input\"\n\t\t\t\ttype=\"number\"\n\t\t\t\t// The correct function to call in moment.js is \"date\" not \"day\".\n\t\t\t\tname=\"date\"\n\t\t\t\tvalue={ day }\n\t\t\t\tstep={ 1 }\n\t\t\t\tmin={ 1 }\n\t\t\t\tmax={ 31 }\n\t\t\t\tonUpdate={ update( 'date' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n\n\tconst monthFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-month\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\tas=\"select\"\n\t\t\t\taria-label={ __( 'Month' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-month-select\"\n\t\t\t\tname=\"month\"\n\t\t\t\tvalue={ month }\n\t\t\t\t// The value starts from 0, so we have to -1 when setting month.\n\t\t\t\tonUpdate={ ( value ) => update( 'month' )( value - 1 ) }\n\t\t\t>\n\t\t\t\t<option value=\"01\">{ __( 'January' ) }</option>\n\t\t\t\t<option value=\"02\">{ __( 'February' ) }</option>\n\t\t\t\t<option value=\"03\">{ __( 'March' ) }</option>\n\t\t\t\t<option value=\"04\">{ __( 'April' ) }</option>\n\t\t\t\t<option value=\"05\">{ __( 'May' ) }</option>\n\t\t\t\t<option value=\"06\">{ __( 'June' ) }</option>\n\t\t\t\t<option value=\"07\">{ __( 'July' ) }</option>\n\t\t\t\t<option value=\"08\">{ __( 'August' ) }</option>\n\t\t\t\t<option value=\"09\">{ __( 'September' ) }</option>\n\t\t\t\t<option value=\"10\">{ __( 'October' ) }</option>\n\t\t\t\t<option value=\"11\">{ __( 'November' ) }</option>\n\t\t\t\t<option value=\"12\">{ __( 'December' ) }</option>\n\t\t\t</UpdateOnBlurAsIntegerField>\n\t\t</div>\n\t);\n\n\tconst dayMonthFormat = is12Hour ? (\n\t\t<>\n\t\t\t{ monthFormat }\n\t\t\t{ dayFormat }\n\t\t</>\n\t) : (\n\t\t<>\n\t\t\t{ dayFormat }\n\t\t\t{ monthFormat }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( 'components-datetime__time' ) }>\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t{ dayMonthFormat }\n\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-year\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Year' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-year-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"year\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 9999 }\n\t\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\t\tonUpdate={ update( 'year' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-time\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Hours' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"hours\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ is12Hour ? 1 : 0 }\n\t\t\t\t\t\t\tmax={ is12Hour ? 12 : 23 }\n\t\t\t\t\t\t\tvalue={ hours }\n\t\t\t\t\t\t\tonUpdate={ update( 'hours' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Minutes' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"minutes\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 59 }\n\t\t\t\t\t\t\tvalue={ minutes }\n\t\t\t\t\t\t\tonUpdate={ update( 'minutes' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup className=\"components-datetime__time-field components-datetime__time-field-am-pm\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'AM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'AM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'AM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'PM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'PM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'PM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t);\n}\n\nexport default TimePicker;\n"]}
@@ -11,7 +11,8 @@ import { __experimentalGetSettings as getDateSettings } from '@wordpress/date';
11
11
 
12
12
  import Tooltip from '../tooltip';
13
13
  /**
14
- * Displays timezone information when user timezone is different from site timezone.
14
+ * Displays timezone information when user timezone is different from site
15
+ * timezone.
15
16
  */
16
17
 
17
18
  const TimeZone = () => {
@@ -26,8 +27,8 @@ const TimeZone = () => {
26
27
  return null;
27
28
  }
28
29
 
29
- const offsetSymbol = timezone.offset >= 0 ? '+' : '';
30
- const zoneAbbr = '' !== timezone.abbr && isNaN(timezone.abbr) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
30
+ const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
31
+ const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
31
32
  const timezoneDetail = 'UTC' === timezone.string ? __('Coordinated Universal Time') : `(${zoneAbbr}) ${timezone.string.replace('_', ' ')}`;
32
33
  return createElement(Tooltip, {
33
34
  position: "top center",
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/date-time/timezone.js"],"names":["__","__experimentalGetSettings","getDateSettings","Tooltip","TimeZone","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,yBAAyB,IAAIC,eAAtC,QAA6D,iBAA7D;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA;AACA;AACA;;AACA,MAAMC,QAAQ,GAAG,MAAM;AACtB,QAAM;AAAEC,IAAAA;AAAF,MAAeH,eAAe,EAApC,CADsB,CAGtB;;AACA,QAAMI,kBAAkB,GAAG,CAAC,CAAD,IAAO,IAAIC,IAAJ,GAAWC,iBAAX,KAAiC,EAAxC,CAA3B,CAJsB,CAMtB;AACA;;AACA,MAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,KAA8BJ,kBAAnC,EAAwD;AACvD,WAAO,IAAP;AACA;;AAED,QAAMK,YAAY,GAAGN,QAAQ,CAACK,MAAT,IAAmB,CAAnB,GAAuB,GAAvB,GAA6B,EAAlD;AACA,QAAME,QAAQ,GACb,OAAOP,QAAQ,CAACQ,IAAhB,IAAwBC,KAAK,CAAET,QAAQ,CAACQ,IAAX,CAA7B,GACGR,QAAQ,CAACQ,IADZ,GAEI,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAH7C;AAKA,QAAMK,cAAc,GACnB,UAAUV,QAAQ,CAACW,MAAnB,GACGhB,EAAE,CAAE,4BAAF,CADL,GAEI,IAAIY,QAAU,KAAKP,QAAQ,CAACW,MAAT,CAAgBC,OAAhB,CAAyB,GAAzB,EAA8B,GAA9B,CAAqC,EAH7D;AAKA,SACC,cAAC,OAAD;AAAS,IAAA,QAAQ,EAAC,YAAlB;AAA+B,IAAA,IAAI,EAAGF;AAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiDH,QAAjD,CADD,CADD;AAKA,CA5BD;;AA8BA,eAAeR,QAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalGetSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\n\n/**\n * Displays timezone information when user timezone is different from site timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = timezone.offset >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( timezone.abbr )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip position=\"top center\" text={ timezoneDetail }>\n\t\t\t<div className=\"components-datetime__timezone\">{ zoneAbbr }</div>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/date-time/timezone.tsx"],"names":["__","__experimentalGetSettings","getDateSettings","Tooltip","TimeZone","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,yBAAyB,IAAIC,eAAtC,QAA6D,iBAA7D;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA;AACA;AACA;AACA;;AACA,MAAMC,QAAQ,GAAG,MAAM;AACtB,QAAM;AAAEC,IAAAA;AAAF,MAAeH,eAAe,EAApC,CADsB,CAGtB;;AACA,QAAMI,kBAAkB,GAAG,CAAC,CAAD,IAAO,IAAIC,IAAJ,GAAWC,iBAAX,KAAiC,EAAxC,CAA3B,CAJsB,CAMtB;AACA;;AACA,MAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,KAA8BJ,kBAAnC,EAAwD;AACvD,WAAO,IAAP;AACA;;AAED,QAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,IAA6B,CAA7B,GAAiC,GAAjC,GAAuC,EAA5D;AACA,QAAME,QAAQ,GACb,OAAOP,QAAQ,CAACQ,IAAhB,IAAwBC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAX,CAAR,CAA7B,GACGR,QAAQ,CAACQ,IADZ,GAEI,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAH7C;AAKA,QAAMK,cAAc,GACnB,UAAUV,QAAQ,CAACW,MAAnB,GACGhB,EAAE,CAAE,4BAAF,CADL,GAEI,IAAIY,QAAU,KAAKP,QAAQ,CAACW,MAAT,CAAgBC,OAAhB,CAAyB,GAAzB,EAA8B,GAA9B,CAAqC,EAH7D;AAKA,SACC,cAAC,OAAD;AAAS,IAAA,QAAQ,EAAC,YAAlB;AAA+B,IAAA,IAAI,EAAGF;AAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiDH,QAAjD,CADD,CADD;AAKA,CA5BD;;AA8BA,eAAeR,QAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalGetSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip position=\"top center\" text={ timezoneDetail }>\n\t\t\t<div className=\"components-datetime__timezone\">{ zoneAbbr }</div>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -3,11 +3,13 @@
3
3
  */
4
4
  import moment from 'moment';
5
5
  /**
6
- * Create a Moment object from a date string. With no date supplied, default to a Moment
7
- * object representing now. If a null value is passed, return a null value.
6
+ * Create a Moment object from a date string. With no date supplied, default to
7
+ * a Moment object representing now. If a null value is passed, return a null
8
+ * value.
8
9
  *
9
- * @param {?string} date Date representing the currently selected date or null to signify no selection.
10
- * @return {?moment.Moment} Moment object for selected date or null.
10
+ * @param [date] Date representing the currently selected
11
+ * date or null to signify no selection.
12
+ * @return Moment object for selected date or null.
11
13
  */
12
14
 
13
15
  export const getMomentDate = date => {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/date-time/utils.js"],"names":["moment","getMomentDate","date"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,aAAa,GAAKC,IAAF,IAAY;AACxC,MAAK,SAASA,IAAd,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAOA,IAAI,GAAGF,MAAM,CAAEE,IAAF,CAAT,GAAoBF,MAAM,EAArC;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"]}
1
+ {"version":3,"sources":["@wordpress/components/src/date-time/utils.ts"],"names":["moment","getMomentDate","date"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,aAAa,GAAKC,IAAF,IAA4C;AACxE,MAAK,SAASA,IAAd,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAOA,IAAI,GAAGF,MAAM,CAAEE,IAAF,CAAT,GAAoBF,MAAM,EAArC;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\n * a Moment object representing now. If a null value is passed, return a null\n * value.\n *\n * @param [date] Date representing the currently selected\n * date or null to signify no selection.\n * @return Moment object for selected date or null.\n */\nexport const getMomentDate = ( date?: Date | string | number | null ) => {\n\tif ( null === date ) {\n\t\treturn null;\n\t}\n\treturn date ? moment( date ) : moment();\n};\n"]}
@@ -4,14 +4,13 @@ import { createElement } from "@wordpress/element";
4
4
  /**
5
5
  * External dependencies
6
6
  */
7
- import { includes, debounce } from 'lodash';
8
7
  import classnames from 'classnames';
9
8
  /**
10
9
  * WordPress dependencies
11
10
  */
12
11
 
13
- import { createContext, useCallback, useLayoutEffect, useRef } from '@wordpress/element';
14
- import { focus } from '@wordpress/dom';
12
+ import { useDisabled } from '@wordpress/compose';
13
+ import { createContext } from '@wordpress/element';
15
14
  /**
16
15
  * Internal dependencies
17
16
  */
@@ -22,17 +21,6 @@ const {
22
21
  Consumer,
23
22
  Provider
24
23
  } = Context;
25
- /**
26
- * Names of control nodes which qualify for disabled behavior.
27
- *
28
- * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
29
- *
30
- * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
31
- *
32
- * @type {string[]}
33
- */
34
-
35
- const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP', 'OPTION', 'SELECT', 'TEXTAREA'];
36
24
  /**
37
25
  * @typedef OwnProps
38
26
  * @property {string} [className] Classname for the disabled element.
@@ -53,67 +41,8 @@ function Disabled(_ref) {
53
41
  ...props
54
42
  } = _ref;
55
43
 
56
- /** @type {import('react').RefObject<HTMLDivElement>} */
57
- const node = useRef(null);
58
-
59
- const disable = () => {
60
- if (!node.current) {
61
- return;
62
- }
63
-
64
- focus.focusable.find(node.current).forEach(focusable => {
65
- if (includes(DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName)) {
66
- focusable.setAttribute('disabled', '');
67
- }
68
-
69
- if (focusable.nodeName === 'A') {
70
- focusable.setAttribute('tabindex', '-1');
71
- }
72
-
73
- const tabIndex = focusable.getAttribute('tabindex');
74
-
75
- if (tabIndex !== null && tabIndex !== '-1') {
76
- focusable.removeAttribute('tabindex');
77
- }
78
-
79
- if (focusable.hasAttribute('contenteditable')) {
80
- focusable.setAttribute('contenteditable', 'false');
81
- }
82
- });
83
- }; // Debounce re-disable since disabling process itself will incur
84
- // additional mutations which should be ignored.
85
-
86
-
87
- const debouncedDisable = useCallback(debounce(disable, undefined, {
88
- leading: true
89
- }), []);
90
- useLayoutEffect(() => {
91
- if (!isDisabled) {
92
- return;
93
- }
94
-
95
- disable();
96
- /** @type {MutationObserver | undefined} */
97
-
98
- let observer;
99
-
100
- if (node.current) {
101
- observer = new window.MutationObserver(debouncedDisable);
102
- observer.observe(node.current, {
103
- childList: true,
104
- attributes: true,
105
- subtree: true
106
- });
107
- }
108
-
109
- return () => {
110
- if (observer) {
111
- observer.disconnect();
112
- }
113
-
114
- debouncedDisable.cancel();
115
- };
116
- }, []);
44
+ /** @type {import('react').RefCallback<HTMLDivElement>} */
45
+ const ref = useDisabled();
117
46
 
118
47
  if (!isDisabled) {
119
48
  return createElement(Provider, {
@@ -124,7 +53,7 @@ function Disabled(_ref) {
124
53
  return createElement(Provider, {
125
54
  value: true
126
55
  }, createElement(StyledWrapper, _extends({
127
- ref: node,
56
+ ref: ref,
128
57
  className: classnames(className, 'components-disabled')
129
58
  }, props), children));
130
59
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/disabled/index.js"],"names":["includes","debounce","classnames","createContext","useCallback","useLayoutEffect","useRef","focus","StyledWrapper","Context","Consumer","Provider","DISABLED_ELIGIBLE_NODE_NAMES","Disabled","className","children","isDisabled","props","node","disable","current","focusable","find","forEach","nodeName","setAttribute","tabIndex","getAttribute","removeAttribute","hasAttribute","debouncedDisable","undefined","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { includes, debounce } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseLayoutEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { StyledWrapper } from './styles/disabled-styles';\n\nconst Context = createContext( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * Names of control nodes which qualify for disabled behavior.\n *\n * See WHATWG HTML Standard: 4.10.18.5: \"Enabling and disabling form controls: the disabled attribute\".\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute\n *\n * @type {string[]}\n */\nconst DISABLED_ELIGIBLE_NODE_NAMES = [\n\t'BUTTON',\n\t'FIELDSET',\n\t'INPUT',\n\t'OPTGROUP',\n\t'OPTION',\n\t'SELECT',\n\t'TEXTAREA',\n];\n\n/**\n * @typedef OwnProps\n * @property {string} [className] Classname for the disabled element.\n * @property {import('react').ReactNode} children Children to disable.\n * @property {boolean} [isDisabled=true] Whether to disable the children.\n */\n\n/**\n * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props\n * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.\n */\nfunction Disabled( { className, children, isDisabled = true, ...props } ) {\n\t/** @type {import('react').RefObject<HTMLDivElement>} */\n\tconst node = useRef( null );\n\n\tconst disable = () => {\n\t\tif ( ! node.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfocus.focusable.find( node.current ).forEach( ( focusable ) => {\n\t\t\tif (\n\t\t\t\tincludes( DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName )\n\t\t\t) {\n\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t}\n\n\t\t\tif ( focusable.nodeName === 'A' ) {\n\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t}\n\n\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t}\n\n\t\t\tif ( focusable.hasAttribute( 'contenteditable' ) ) {\n\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Debounce re-disable since disabling process itself will incur\n\t// additional mutations which should be ignored.\n\tconst debouncedDisable = useCallback(\n\t\tdebounce( disable, undefined, { leading: true } ),\n\t\t[]\n\t);\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tdisable();\n\n\t\t/** @type {MutationObserver | undefined} */\n\t\tlet observer;\n\t\tif ( node.current ) {\n\t\t\tobserver = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node.current, {\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tsubtree: true,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( observer ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t\tdebouncedDisable.cancel();\n\t\t};\n\t}, [] );\n\n\tif ( ! isDisabled ) {\n\t\treturn <Provider value={ false }>{ children }</Provider>;\n\t}\n\n\treturn (\n\t\t<Provider value={ true }>\n\t\t\t<StyledWrapper\n\t\t\t\tref={ node }\n\t\t\t\tclassName={ classnames( className, 'components-disabled' ) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</StyledWrapper>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/disabled/index.js"],"names":["classnames","useDisabled","createContext","StyledWrapper","Context","Consumer","Provider","Disabled","className","children","isDisabled","props","ref"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,QAA4B,oBAA5B;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,0BAA9B;AAEA,MAAMC,OAAO,GAAGF,aAAa,CAAE,KAAF,CAA7B;AACA,MAAM;AAAEG,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASG,QAAT,OAA0E;AAAA,MAAvD;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,UAAU,GAAG,IAApC;AAA0C,OAAGC;AAA7C,GAAuD;;AACzE;AACA,QAAMC,GAAG,GAAGX,WAAW,EAAvB;;AAEA,MAAK,CAAES,UAAP,EAAoB;AACnB,WAAO,cAAC,QAAD;AAAU,MAAA,KAAK,EAAG;AAAlB,OAA4BD,QAA5B,CAAP;AACA;;AAED,SACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KACC,cAAC,aAAD;AACC,IAAA,GAAG,EAAGG,GADP;AAEC,IAAA,SAAS,EAAGZ,UAAU,CAAEQ,SAAF,EAAa,qBAAb;AAFvB,KAGMG,KAHN,GAKGF,QALH,CADD,CADD;AAWA;;AAEDF,QAAQ,CAACH,OAAT,GAAmBA,OAAnB;AACAG,QAAQ,CAACF,QAAT,GAAoBA,QAApB;AAEA,eAAeE,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useDisabled } from '@wordpress/compose';\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { StyledWrapper } from './styles/disabled-styles';\n\nconst Context = createContext( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * @typedef OwnProps\n * @property {string} [className] Classname for the disabled element.\n * @property {import('react').ReactNode} children Children to disable.\n * @property {boolean} [isDisabled=true] Whether to disable the children.\n */\n\n/**\n * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props\n * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.\n */\nfunction Disabled( { className, children, isDisabled = true, ...props } ) {\n\t/** @type {import('react').RefCallback<HTMLDivElement>} */\n\tconst ref = useDisabled();\n\n\tif ( ! isDisabled ) {\n\t\treturn <Provider value={ false }>{ children }</Provider>;\n\t}\n\n\treturn (\n\t\t<Provider value={ true }>\n\t\t\t<StyledWrapper\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ classnames( className, 'components-disabled' ) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</StyledWrapper>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}