@wordpress/components 28.8.6 → 28.10.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 (894) hide show
  1. package/CHANGELOG.md +44 -5
  2. package/build/alignment-matrix-control/icon.js.map +1 -1
  3. package/build/alignment-matrix-control/types.js.map +1 -1
  4. package/build/alignment-matrix-control/utils.js.map +1 -1
  5. package/build/angle-picker-control/angle-circle.js.map +1 -1
  6. package/build/autocomplete/autocompleter-ui.js +3 -3
  7. package/build/autocomplete/autocompleter-ui.js.map +1 -1
  8. package/build/autocomplete/get-default-use-items.js.map +1 -1
  9. package/build/autocomplete/index.js +5 -1
  10. package/build/autocomplete/index.js.map +1 -1
  11. package/build/base-control/hooks.js.map +1 -1
  12. package/build/base-control/index.js.map +1 -1
  13. package/build/border-box-control/border-box-control/component.js +3 -14
  14. package/build/border-box-control/border-box-control/component.js.map +1 -1
  15. package/build/border-box-control/border-box-control/hook.js.map +1 -1
  16. package/build/border-box-control/styles.js.map +1 -1
  17. package/build/border-box-control/utils.js.map +1 -1
  18. package/build/border-control/border-control/component.js +1 -2
  19. package/build/border-control/border-control/component.js.map +1 -1
  20. package/build/border-control/border-control/hook.js.map +1 -1
  21. package/build/border-control/border-control-dropdown/component.js +2 -14
  22. package/build/border-control/border-control-dropdown/component.js.map +1 -1
  23. package/build/border-control/styles.js +13 -13
  24. package/build/border-control/styles.js.map +1 -1
  25. package/build/border-control/types.js.map +1 -1
  26. package/build/box-control/axial-input-controls.js.map +1 -1
  27. package/build/box-control/icon.js.map +1 -1
  28. package/build/box-control/index.js +4 -4
  29. package/build/box-control/index.js.map +1 -1
  30. package/build/box-control/input-controls.js.map +1 -1
  31. package/build/box-control/types.js.map +1 -1
  32. package/build/button/index.native.js +1 -1
  33. package/build/button/index.native.js.map +1 -1
  34. package/build/card/card/component.js +1 -1
  35. package/build/card/card/component.js.map +1 -1
  36. package/build/card/styles.js.map +1 -1
  37. package/build/color-palette/index.js.map +1 -1
  38. package/build/color-palette/index.native.js +2 -1
  39. package/build/color-palette/index.native.js.map +1 -1
  40. package/build/color-picker/styles.js.map +1 -1
  41. package/build/combobox-control/index.js +1 -1
  42. package/build/combobox-control/index.js.map +1 -1
  43. package/build/composite/legacy/index.js.map +1 -1
  44. package/build/context/context-connect.js +1 -0
  45. package/build/context/context-connect.js.map +1 -1
  46. package/build/context/context-system-provider.js +1 -1
  47. package/build/context/context-system-provider.js.map +1 -1
  48. package/build/context/get-styled-class-name-from-key.js.map +1 -1
  49. package/build/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
  50. package/build/custom-gradient-picker/index.js.map +1 -1
  51. package/build/custom-gradient-picker/serializer.js.map +1 -1
  52. package/build/custom-gradient-picker/utils.js.map +1 -1
  53. package/build/custom-select-control-v2/styles.js.map +1 -1
  54. package/build/dashicon/index.js.map +1 -1
  55. package/build/date-time/date/styles.js.map +1 -1
  56. package/build/date-time/time/timezone.js.map +1 -1
  57. package/build/draggable/index.js.map +1 -1
  58. package/build/drop-zone/index.js.map +1 -1
  59. package/build/dropdown-menu-v2/styles.js.map +1 -1
  60. package/build/duotone-picker/color-list-picker/index.js.map +1 -1
  61. package/build/duotone-picker/utils.js.map +1 -1
  62. package/build/elevation/hook.js.map +1 -1
  63. package/build/external-link/index.js +20 -23
  64. package/build/external-link/index.js.map +1 -1
  65. package/build/focal-point-picker/index.js.map +1 -1
  66. package/build/focal-point-picker/index.native.js.map +1 -1
  67. package/build/focal-point-picker/styles/focal-point-style.js.map +1 -1
  68. package/build/font-size-picker/index.js.map +1 -1
  69. package/build/form-token-field/index.js +2 -1
  70. package/build/form-token-field/index.js.map +1 -1
  71. package/build/form-token-field/suggestions-list.js.map +1 -1
  72. package/build/form-token-field/token-input.js.map +1 -1
  73. package/build/form-token-field/token.js +1 -1
  74. package/build/form-token-field/token.js.map +1 -1
  75. package/build/gradient-picker/index.js.map +1 -1
  76. package/build/grid/hook.js.map +1 -1
  77. package/build/guide/page-control.js +1 -1
  78. package/build/guide/page-control.js.map +1 -1
  79. package/build/h-stack/hook.js.map +1 -1
  80. package/build/heading/hook.js.map +1 -1
  81. package/build/index.js +36 -5
  82. package/build/index.js.map +1 -1
  83. package/build/input-control/index.js.map +1 -1
  84. package/build/input-control/input-base.js.map +1 -1
  85. package/build/input-control/styles/input-control-styles.js.map +1 -1
  86. package/build/item-group/styles.js.map +1 -1
  87. package/build/menu-group/index.js.map +1 -1
  88. package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  89. package/build/mobile/bottom-sheet/cell.native.js +4 -4
  90. package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
  91. package/build/mobile/bottom-sheet/index.native.js.map +1 -1
  92. package/build/mobile/bottom-sheet/range-cell.native.js +1 -1
  93. package/build/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  94. package/build/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
  95. package/build/mobile/bottom-sheet/stepper-cell/index.native.js +1 -1
  96. package/build/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  97. package/build/mobile/bottom-sheet/switch-cell.native.js +4 -4
  98. package/build/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  99. package/build/mobile/cycle-select-control/index.native.js.map +1 -1
  100. package/build/mobile/gradient/index.native.js.map +1 -1
  101. package/build/mobile/image/index.native.js.map +1 -1
  102. package/build/mobile/link-picker/index.native.js +1 -1
  103. package/build/mobile/link-picker/index.native.js.map +1 -1
  104. package/build/mobile/link-picker/link-picker-results.native.js.map +1 -1
  105. package/build/mobile/picker/index.android.js.map +1 -1
  106. package/build/mobile/segmented-control/index.native.js.map +1 -1
  107. package/build/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
  108. package/build/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  109. package/build/modal/aria-helper.js +2 -1
  110. package/build/modal/aria-helper.js.map +1 -1
  111. package/build/modal/index.js +2 -1
  112. package/build/modal/index.js.map +1 -1
  113. package/build/modal/use-modal-exit-animation.js.map +1 -1
  114. package/build/navigation/group/index.js.map +1 -1
  115. package/build/navigation/item/base.js.map +1 -1
  116. package/build/navigation/menu/index.js.map +1 -1
  117. package/build/navigation/menu/menu-title-search.js +2 -2
  118. package/build/navigation/menu/menu-title-search.js.map +1 -1
  119. package/build/navigation/menu/menu-title.js.map +1 -1
  120. package/build/navigation/styles/navigation-styles.js.map +1 -1
  121. package/build/navigator/index.js +128 -32
  122. package/build/navigator/index.js.map +1 -1
  123. package/build/navigator/legacy.js +179 -0
  124. package/build/navigator/legacy.js.map +1 -0
  125. package/build/navigator/{navigator-provider → navigator}/component.js +5 -40
  126. package/build/navigator/navigator/component.js.map +1 -0
  127. package/build/navigator/navigator-back-button/component.js +2 -38
  128. package/build/navigator/navigator-back-button/component.js.map +1 -1
  129. package/build/navigator/navigator-back-button/hook.js +1 -1
  130. package/build/navigator/navigator-back-button/hook.js.map +1 -1
  131. package/build/navigator/navigator-button/component.js +2 -37
  132. package/build/navigator/navigator-button/component.js.map +1 -1
  133. package/build/navigator/navigator-button/hook.js +1 -1
  134. package/build/navigator/navigator-button/hook.js.map +1 -1
  135. package/build/navigator/navigator-screen/component.js +40 -62
  136. package/build/navigator/navigator-screen/component.js.map +1 -1
  137. package/build/navigator/navigator-screen/use-screen-animate-presence.js +114 -0
  138. package/build/navigator/navigator-screen/use-screen-animate-presence.js.map +1 -0
  139. package/build/navigator/navigator-to-parent-button/component.js +3 -7
  140. package/build/navigator/navigator-to-parent-button/component.js.map +1 -1
  141. package/build/navigator/styles.js +78 -35
  142. package/build/navigator/styles.js.map +1 -1
  143. package/build/navigator/types.js.map +1 -1
  144. package/build/navigator/use-navigator.js +4 -1
  145. package/build/navigator/use-navigator.js.map +1 -1
  146. package/build/number-control/styles/number-control-styles.js.map +1 -1
  147. package/build/palette-edit/index.js +1 -1
  148. package/build/palette-edit/index.js.map +1 -1
  149. package/build/popover/index.js +1 -1
  150. package/build/popover/index.js.map +1 -1
  151. package/build/popover/overlay-middlewares.js.map +1 -1
  152. package/build/popover/utils.js.map +1 -1
  153. package/build/progress-bar/index.js.map +1 -1
  154. package/build/progress-bar/styles.js.map +1 -1
  155. package/build/query-controls/index.js.map +1 -1
  156. package/build/query-controls/index.native.js.map +1 -1
  157. package/build/radio-control/index.js.map +1 -1
  158. package/build/radio-control/index.native.js.map +1 -1
  159. package/build/range-control/index.js.map +1 -1
  160. package/build/range-control/index.native.js.map +1 -1
  161. package/build/range-control/rail.js.map +1 -1
  162. package/build/range-control/styles/range-control-styles.js +32 -32
  163. package/build/range-control/styles/range-control-styles.js.map +1 -1
  164. package/build/range-control/tooltip.js +1 -1
  165. package/build/range-control/tooltip.js.map +1 -1
  166. package/build/range-control/utils.js.map +1 -1
  167. package/build/resizable-box/resize-tooltip/label.js.map +1 -1
  168. package/build/resizable-box/resize-tooltip/utils.js.map +1 -1
  169. package/build/responsive-wrapper/index.js.map +1 -1
  170. package/build/sandbox/index.js.map +1 -1
  171. package/build/sandbox/index.native.js.map +1 -1
  172. package/build/search-control/index.js +11 -2
  173. package/build/search-control/index.js.map +1 -1
  174. package/build/search-control/index.native.js.map +1 -1
  175. package/build/search-control/types.js.map +1 -1
  176. package/build/select-control/index.js.map +1 -1
  177. package/build/select-control/index.native.js.map +1 -1
  178. package/build/slot-fill/index.js.map +1 -1
  179. package/build/spinner/styles.js.map +1 -1
  180. package/build/style-provider/index.js +1 -0
  181. package/build/style-provider/index.js.map +1 -1
  182. package/build/surface/hook.js.map +1 -1
  183. package/build/surface/styles.js.map +1 -1
  184. package/build/tab-panel/index.js.map +1 -1
  185. package/build/tabs/index.js.map +1 -1
  186. package/build/tabs/styles.js +30 -12
  187. package/build/tabs/styles.js.map +1 -1
  188. package/build/tabs/tab.js +7 -2
  189. package/build/tabs/tab.js.map +1 -1
  190. package/build/tabs/tablist.js +71 -39
  191. package/build/tabs/tablist.js.map +1 -1
  192. package/build/tabs/tabpanel.js.map +1 -1
  193. package/build/tabs/use-track-overflow.js +73 -0
  194. package/build/tabs/use-track-overflow.js.map +1 -0
  195. package/build/text/get-line-height.js.map +1 -1
  196. package/build/text/styles/text-mixins.native.js.map +1 -1
  197. package/build/text/utils.js.map +1 -1
  198. package/build/text-control/index.native.js.map +1 -1
  199. package/build/text-highlight/index.js.map +1 -1
  200. package/build/textarea-control/index.js.map +1 -1
  201. package/build/theme/color-algorithms.js.map +1 -1
  202. package/build/theme/styles.js.map +1 -1
  203. package/build/toggle-control/index.js.map +1 -1
  204. package/build/toggle-control/index.native.js.map +1 -1
  205. package/build/toggle-group-control/toggle-group-control/as-button-group.js +4 -2
  206. package/build/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -1
  207. package/build/toggle-group-control/toggle-group-control/as-radio-group.js +13 -2
  208. package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
  209. package/build/toggle-group-control/toggle-group-control/component.js +15 -8
  210. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  211. package/build/toggle-group-control/toggle-group-control/styles.js +7 -7
  212. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  213. package/build/toggle-group-control/toggle-group-control-option-base/component.js +13 -20
  214. package/build/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  215. package/build/toggle-group-control/toggle-group-control-option-base/styles.js +8 -9
  216. package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  217. package/build/toggle-group-control/types.js.map +1 -1
  218. package/build/toolbar/toolbar/index.js.map +1 -1
  219. package/build/tools-panel/styles.js.map +1 -1
  220. package/build/unit-control/index.js.map +1 -1
  221. package/build/unit-control/utils.js.map +1 -1
  222. package/build/utils/breakpoint.js.map +1 -1
  223. package/build/utils/colors-values.js.map +1 -1
  224. package/build/utils/config-values.js.map +1 -1
  225. package/build/utils/element-rect.js +22 -13
  226. package/build/utils/element-rect.js.map +1 -1
  227. package/build/utils/font-size.js.map +1 -1
  228. package/build/utils/hooks/use-animated-offset-rect.js +80 -0
  229. package/build/utils/hooks/use-animated-offset-rect.js.map +1 -0
  230. package/build/utils/hooks/use-cx.js.map +1 -1
  231. package/build/utils/hooks/use-on-value-update.js +3 -7
  232. package/build/utils/hooks/use-on-value-update.js.map +1 -1
  233. package/build/utils/math.js +2 -2
  234. package/build/utils/math.js.map +1 -1
  235. package/build/utils/space.js.map +1 -1
  236. package/build/utils/unit-values.js.map +1 -1
  237. package/build/utils/use-responsive-value.js.map +1 -1
  238. package/build-module/alignment-matrix-control/cell.js +1 -2
  239. package/build-module/alignment-matrix-control/cell.js.map +1 -1
  240. package/build-module/alignment-matrix-control/icon.js.map +1 -1
  241. package/build-module/alignment-matrix-control/types.js.map +1 -1
  242. package/build-module/alignment-matrix-control/utils.js.map +1 -1
  243. package/build-module/angle-picker-control/angle-circle.js.map +1 -1
  244. package/build-module/angle-picker-control/index.js +1 -2
  245. package/build-module/angle-picker-control/index.js.map +1 -1
  246. package/build-module/autocomplete/autocompleter-ui.js +4 -6
  247. package/build-module/autocomplete/autocompleter-ui.js.map +1 -1
  248. package/build-module/autocomplete/autocompleter-ui.native.js +1 -2
  249. package/build-module/autocomplete/autocompleter-ui.native.js.map +1 -1
  250. package/build-module/autocomplete/get-default-use-items.js.map +1 -1
  251. package/build-module/autocomplete/index.js +6 -4
  252. package/build-module/autocomplete/index.js.map +1 -1
  253. package/build-module/base-control/hooks.js.map +1 -1
  254. package/build-module/base-control/index.js +1 -2
  255. package/build-module/base-control/index.js.map +1 -1
  256. package/build-module/base-control/index.native.js +1 -2
  257. package/build-module/base-control/index.native.js.map +1 -1
  258. package/build-module/border-box-control/border-box-control/component.js +4 -16
  259. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  260. package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
  261. package/build-module/border-box-control/border-box-control-split-controls/component.js +1 -2
  262. package/build-module/border-box-control/border-box-control-split-controls/component.js.map +1 -1
  263. package/build-module/border-box-control/styles.js.map +1 -1
  264. package/build-module/border-box-control/utils.js.map +1 -1
  265. package/build-module/border-control/border-control/component.js +2 -4
  266. package/build-module/border-control/border-control/component.js.map +1 -1
  267. package/build-module/border-control/border-control/hook.js.map +1 -1
  268. package/build-module/border-control/border-control-dropdown/component.js +3 -17
  269. package/build-module/border-control/border-control-dropdown/component.js.map +1 -1
  270. package/build-module/border-control/styles.js +13 -13
  271. package/build-module/border-control/styles.js.map +1 -1
  272. package/build-module/border-control/types.js.map +1 -1
  273. package/build-module/box-control/all-input-control.js +1 -3
  274. package/build-module/box-control/all-input-control.js.map +1 -1
  275. package/build-module/box-control/axial-input-controls.js +1 -3
  276. package/build-module/box-control/axial-input-controls.js.map +1 -1
  277. package/build-module/box-control/icon.js +1 -2
  278. package/build-module/box-control/icon.js.map +1 -1
  279. package/build-module/box-control/index.js +5 -6
  280. package/build-module/box-control/index.js.map +1 -1
  281. package/build-module/box-control/input-controls.js +1 -3
  282. package/build-module/box-control/input-controls.js.map +1 -1
  283. package/build-module/box-control/types.js.map +1 -1
  284. package/build-module/button/index.js +1 -3
  285. package/build-module/button/index.js.map +1 -1
  286. package/build-module/button/index.native.js +2 -3
  287. package/build-module/button/index.native.js.map +1 -1
  288. package/build-module/card/card/component.js +2 -3
  289. package/build-module/card/card/component.js.map +1 -1
  290. package/build-module/card/styles.js.map +1 -1
  291. package/build-module/checkbox-control/index.js +1 -2
  292. package/build-module/checkbox-control/index.js.map +1 -1
  293. package/build-module/circular-option-picker/circular-option-picker-option.js +1 -2
  294. package/build-module/circular-option-picker/circular-option-picker-option.js.map +1 -1
  295. package/build-module/circular-option-picker/circular-option-picker.js +1 -2
  296. package/build-module/circular-option-picker/circular-option-picker.js.map +1 -1
  297. package/build-module/color-indicator/index.native.js +1 -2
  298. package/build-module/color-indicator/index.native.js.map +1 -1
  299. package/build-module/color-palette/index.js +1 -2
  300. package/build-module/color-palette/index.js.map +1 -1
  301. package/build-module/color-palette/index.native.js +3 -4
  302. package/build-module/color-palette/index.native.js.map +1 -1
  303. package/build-module/color-picker/component.js +1 -2
  304. package/build-module/color-picker/component.js.map +1 -1
  305. package/build-module/color-picker/hsl-input.js +1 -3
  306. package/build-module/color-picker/hsl-input.js.map +1 -1
  307. package/build-module/color-picker/hsv-color-picker.native.js +1 -2
  308. package/build-module/color-picker/hsv-color-picker.native.js.map +1 -1
  309. package/build-module/color-picker/hue-picker.native.js +1 -2
  310. package/build-module/color-picker/hue-picker.native.js.map +1 -1
  311. package/build-module/color-picker/index.native.js +1 -3
  312. package/build-module/color-picker/index.native.js.map +1 -1
  313. package/build-module/color-picker/input-with-slider.js +1 -2
  314. package/build-module/color-picker/input-with-slider.js.map +1 -1
  315. package/build-module/color-picker/rgb-input.js +1 -3
  316. package/build-module/color-picker/rgb-input.js.map +1 -1
  317. package/build-module/color-picker/saturation-picker.native.js +1 -2
  318. package/build-module/color-picker/saturation-picker.native.js.map +1 -1
  319. package/build-module/color-picker/styles.js.map +1 -1
  320. package/build-module/combobox-control/index.js +2 -3
  321. package/build-module/combobox-control/index.js.map +1 -1
  322. package/build-module/composite/legacy/index.js.map +1 -1
  323. package/build-module/confirm-dialog/component.js +1 -3
  324. package/build-module/confirm-dialog/component.js.map +1 -1
  325. package/build-module/context/context-connect.js +1 -0
  326. package/build-module/context/context-connect.js.map +1 -1
  327. package/build-module/context/context-system-provider.js +1 -1
  328. package/build-module/context/context-system-provider.js.map +1 -1
  329. package/build-module/context/get-styled-class-name-from-key.js.map +1 -1
  330. package/build-module/custom-gradient-picker/gradient-bar/control-points.js +1 -3
  331. package/build-module/custom-gradient-picker/gradient-bar/control-points.js.map +1 -1
  332. package/build-module/custom-gradient-picker/gradient-bar/index.js +1 -2
  333. package/build-module/custom-gradient-picker/gradient-bar/index.js.map +1 -1
  334. package/build-module/custom-gradient-picker/index.js +1 -2
  335. package/build-module/custom-gradient-picker/index.js.map +1 -1
  336. package/build-module/custom-gradient-picker/index.native.js +1 -3
  337. package/build-module/custom-gradient-picker/index.native.js.map +1 -1
  338. package/build-module/custom-gradient-picker/serializer.js.map +1 -1
  339. package/build-module/custom-gradient-picker/utils.js.map +1 -1
  340. package/build-module/custom-select-control/index.js +1 -3
  341. package/build-module/custom-select-control/index.js.map +1 -1
  342. package/build-module/custom-select-control-v2/custom-select.js +1 -2
  343. package/build-module/custom-select-control-v2/custom-select.js.map +1 -1
  344. package/build-module/custom-select-control-v2/item.js +1 -2
  345. package/build-module/custom-select-control-v2/item.js.map +1 -1
  346. package/build-module/custom-select-control-v2/styles.js.map +1 -1
  347. package/build-module/dashicon/index.js.map +1 -1
  348. package/build-module/date-time/date/index.js +1 -2
  349. package/build-module/date-time/date/index.js.map +1 -1
  350. package/build-module/date-time/date/styles.js.map +1 -1
  351. package/build-module/date-time/date-time/index.js +1 -3
  352. package/build-module/date-time/date-time/index.js.map +1 -1
  353. package/build-module/date-time/time/index.js +1 -2
  354. package/build-module/date-time/time/index.js.map +1 -1
  355. package/build-module/date-time/time/time-input/index.js +1 -2
  356. package/build-module/date-time/time/time-input/index.js.map +1 -1
  357. package/build-module/date-time/time/timezone.js.map +1 -1
  358. package/build-module/dimension-control/index.js +1 -3
  359. package/build-module/dimension-control/index.js.map +1 -1
  360. package/build-module/draggable/index.js +1 -3
  361. package/build-module/draggable/index.js.map +1 -1
  362. package/build-module/drop-zone/index.js +1 -2
  363. package/build-module/drop-zone/index.js.map +1 -1
  364. package/build-module/dropdown/index.js +1 -2
  365. package/build-module/dropdown/index.js.map +1 -1
  366. package/build-module/dropdown/index.native.js +1 -2
  367. package/build-module/dropdown/index.native.js.map +1 -1
  368. package/build-module/dropdown-menu/index.js +1 -2
  369. package/build-module/dropdown-menu/index.js.map +1 -1
  370. package/build-module/dropdown-menu/index.native.js +1 -2
  371. package/build-module/dropdown-menu/index.native.js.map +1 -1
  372. package/build-module/dropdown-menu-v2/checkbox-item.js +1 -2
  373. package/build-module/dropdown-menu-v2/checkbox-item.js.map +1 -1
  374. package/build-module/dropdown-menu-v2/index.js +1 -3
  375. package/build-module/dropdown-menu-v2/index.js.map +1 -1
  376. package/build-module/dropdown-menu-v2/item.js +1 -2
  377. package/build-module/dropdown-menu-v2/item.js.map +1 -1
  378. package/build-module/dropdown-menu-v2/radio-item.js +1 -2
  379. package/build-module/dropdown-menu-v2/radio-item.js.map +1 -1
  380. package/build-module/dropdown-menu-v2/styles.js.map +1 -1
  381. package/build-module/duotone-picker/color-list-picker/index.js +1 -3
  382. package/build-module/duotone-picker/color-list-picker/index.js.map +1 -1
  383. package/build-module/duotone-picker/duotone-picker.js +1 -2
  384. package/build-module/duotone-picker/duotone-picker.js.map +1 -1
  385. package/build-module/duotone-picker/utils.js.map +1 -1
  386. package/build-module/elevation/hook.js.map +1 -1
  387. package/build-module/external-link/index.js +21 -25
  388. package/build-module/external-link/index.js.map +1 -1
  389. package/build-module/external-link/index.native.js +1 -2
  390. package/build-module/external-link/index.native.js.map +1 -1
  391. package/build-module/focal-point-picker/controls.js +1 -2
  392. package/build-module/focal-point-picker/controls.js.map +1 -1
  393. package/build-module/focal-point-picker/focal-point.native.js +1 -2
  394. package/build-module/focal-point-picker/focal-point.native.js.map +1 -1
  395. package/build-module/focal-point-picker/grid.js +1 -2
  396. package/build-module/focal-point-picker/grid.js.map +1 -1
  397. package/build-module/focal-point-picker/index.js +1 -2
  398. package/build-module/focal-point-picker/index.js.map +1 -1
  399. package/build-module/focal-point-picker/index.native.js +1 -2
  400. package/build-module/focal-point-picker/index.native.js.map +1 -1
  401. package/build-module/focal-point-picker/styles/focal-point-style.js.map +1 -1
  402. package/build-module/focal-point-picker/tooltip/index.native.js +1 -2
  403. package/build-module/focal-point-picker/tooltip/index.native.js.map +1 -1
  404. package/build-module/font-size-picker/index.js +1 -2
  405. package/build-module/font-size-picker/index.js.map +1 -1
  406. package/build-module/font-size-picker/index.native.js +1 -3
  407. package/build-module/font-size-picker/index.native.js.map +1 -1
  408. package/build-module/form-file-upload/index.js +1 -2
  409. package/build-module/form-file-upload/index.js.map +1 -1
  410. package/build-module/form-toggle/index.js +1 -2
  411. package/build-module/form-toggle/index.js.map +1 -1
  412. package/build-module/form-token-field/index.js +3 -3
  413. package/build-module/form-token-field/index.js.map +1 -1
  414. package/build-module/form-token-field/suggestions-list.js +1 -2
  415. package/build-module/form-token-field/suggestions-list.js.map +1 -1
  416. package/build-module/form-token-field/token-input.js.map +1 -1
  417. package/build-module/form-token-field/token.js +2 -3
  418. package/build-module/form-token-field/token.js.map +1 -1
  419. package/build-module/gradient-picker/index.js +1 -2
  420. package/build-module/gradient-picker/index.js.map +1 -1
  421. package/build-module/grid/hook.js.map +1 -1
  422. package/build-module/guide/index.js +1 -2
  423. package/build-module/guide/index.js.map +1 -1
  424. package/build-module/guide/page-control.js +1 -1
  425. package/build-module/guide/page-control.js.map +1 -1
  426. package/build-module/h-stack/hook.js.map +1 -1
  427. package/build-module/heading/hook.js.map +1 -1
  428. package/build-module/higher-order/with-fallback-styles/index.js +3 -4
  429. package/build-module/higher-order/with-fallback-styles/index.js.map +1 -1
  430. package/build-module/index.js +14 -4
  431. package/build-module/index.js.map +1 -1
  432. package/build-module/input-control/index.js.map +1 -1
  433. package/build-module/input-control/input-base.js +1 -2
  434. package/build-module/input-control/input-base.js.map +1 -1
  435. package/build-module/input-control/styles/input-control-styles.js.map +1 -1
  436. package/build-module/item-group/styles.js.map +1 -1
  437. package/build-module/keyboard-shortcuts/index.js +1 -3
  438. package/build-module/keyboard-shortcuts/index.js.map +1 -1
  439. package/build-module/menu-group/index.js +1 -2
  440. package/build-module/menu-group/index.js.map +1 -1
  441. package/build-module/menu-item/index.js +1 -2
  442. package/build-module/menu-item/index.js.map +1 -1
  443. package/build-module/menu-items-choice/index.js +1 -2
  444. package/build-module/menu-items-choice/index.js.map +1 -1
  445. package/build-module/mobile/badge/index.native.js +1 -3
  446. package/build-module/mobile/badge/index.native.js.map +1 -1
  447. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +1 -2
  448. package/build-module/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js.map +1 -1
  449. package/build-module/mobile/bottom-sheet/cell.native.js +5 -6
  450. package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
  451. package/build-module/mobile/bottom-sheet/color-cell.native.js +1 -2
  452. package/build-module/mobile/bottom-sheet/color-cell.native.js.map +1 -1
  453. package/build-module/mobile/bottom-sheet/index.native.js +1 -3
  454. package/build-module/mobile/bottom-sheet/index.native.js.map +1 -1
  455. package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js +1 -2
  456. package/build-module/mobile/bottom-sheet/link-suggestion-item-cell.native.js.map +1 -1
  457. package/build-module/mobile/bottom-sheet/nav-bar/back-button.native.js +1 -2
  458. package/build-module/mobile/bottom-sheet/nav-bar/back-button.native.js.map +1 -1
  459. package/build-module/mobile/bottom-sheet/range-cell.native.js +2 -3
  460. package/build-module/mobile/bottom-sheet/range-cell.native.js.map +1 -1
  461. package/build-module/mobile/bottom-sheet/range-text-input.native.js +1 -2
  462. package/build-module/mobile/bottom-sheet/range-text-input.native.js.map +1 -1
  463. package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js +2 -3
  464. package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
  465. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.android.js +1 -2
  466. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.android.js.map +1 -1
  467. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.ios.js +1 -2
  468. package/build-module/mobile/bottom-sheet/stepper-cell/stepper.ios.js.map +1 -1
  469. package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js +1 -3
  470. package/build-module/mobile/bottom-sheet/sub-sheet/index.native.js.map +1 -1
  471. package/build-module/mobile/bottom-sheet/switch-cell.native.js +4 -4
  472. package/build-module/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
  473. package/build-module/mobile/bottom-sheet-select-control/index.native.js +1 -3
  474. package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
  475. package/build-module/mobile/bottom-sheet-text-control/index.native.js +1 -3
  476. package/build-module/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
  477. package/build-module/mobile/color-settings/gradient-picker-screen.native.js +1 -2
  478. package/build-module/mobile/color-settings/gradient-picker-screen.native.js.map +1 -1
  479. package/build-module/mobile/color-settings/index.native.js +1 -2
  480. package/build-module/mobile/color-settings/index.native.js.map +1 -1
  481. package/build-module/mobile/color-settings/palette.screen.native.js +1 -3
  482. package/build-module/mobile/color-settings/palette.screen.native.js.map +1 -1
  483. package/build-module/mobile/cycle-select-control/index.native.js.map +1 -1
  484. package/build-module/mobile/focal-point-settings-panel/index.native.js +1 -2
  485. package/build-module/mobile/focal-point-settings-panel/index.native.js.map +1 -1
  486. package/build-module/mobile/gradient/index.native.js +1 -2
  487. package/build-module/mobile/gradient/index.native.js.map +1 -1
  488. package/build-module/mobile/html-text-input/index.native.js +1 -2
  489. package/build-module/mobile/html-text-input/index.native.js.map +1 -1
  490. package/build-module/mobile/image/icon-retry.native.js +1 -2
  491. package/build-module/mobile/image/icon-retry.native.js.map +1 -1
  492. package/build-module/mobile/image/image-editing-button.native.js +1 -2
  493. package/build-module/mobile/image/image-editing-button.native.js.map +1 -1
  494. package/build-module/mobile/image/index.native.js +1 -3
  495. package/build-module/mobile/image/index.native.js.map +1 -1
  496. package/build-module/mobile/keyboard-avoiding-view/index.ios.js +1 -2
  497. package/build-module/mobile/keyboard-avoiding-view/index.ios.js.map +1 -1
  498. package/build-module/mobile/link-picker/index.native.js +2 -3
  499. package/build-module/mobile/link-picker/index.native.js.map +1 -1
  500. package/build-module/mobile/link-picker/link-picker-results.native.js.map +1 -1
  501. package/build-module/mobile/link-settings/index.native.js +1 -3
  502. package/build-module/mobile/link-settings/index.native.js.map +1 -1
  503. package/build-module/mobile/link-settings/link-settings-navigation.native.js +1 -2
  504. package/build-module/mobile/link-settings/link-settings-navigation.native.js.map +1 -1
  505. package/build-module/mobile/picker/index.android.js +1 -2
  506. package/build-module/mobile/picker/index.android.js.map +1 -1
  507. package/build-module/mobile/segmented-control/index.native.js +1 -2
  508. package/build-module/mobile/segmented-control/index.native.js.map +1 -1
  509. package/build-module/mobile/utils/get-px-from-css-unit.native.js.map +1 -1
  510. package/build-module/mobile/utils/use-unit-converter-to-mobile.native.js.map +1 -1
  511. package/build-module/modal/aria-helper.js +2 -1
  512. package/build-module/modal/aria-helper.js.map +1 -1
  513. package/build-module/modal/index.js +3 -4
  514. package/build-module/modal/index.js.map +1 -1
  515. package/build-module/modal/use-modal-exit-animation.js.map +1 -1
  516. package/build-module/navigation/back-button/index.js +1 -2
  517. package/build-module/navigation/back-button/index.js.map +1 -1
  518. package/build-module/navigation/group/index.js +1 -2
  519. package/build-module/navigation/group/index.js.map +1 -1
  520. package/build-module/navigation/item/base-content.js +1 -3
  521. package/build-module/navigation/item/base-content.js.map +1 -1
  522. package/build-module/navigation/item/base.js.map +1 -1
  523. package/build-module/navigation/item/index.js +1 -2
  524. package/build-module/navigation/item/index.js.map +1 -1
  525. package/build-module/navigation/menu/index.js +1 -2
  526. package/build-module/navigation/menu/index.js.map +1 -1
  527. package/build-module/navigation/menu/menu-title-search.js +2 -2
  528. package/build-module/navigation/menu/menu-title-search.js.map +1 -1
  529. package/build-module/navigation/menu/menu-title.js +1 -2
  530. package/build-module/navigation/menu/menu-title.js.map +1 -1
  531. package/build-module/navigation/menu/search-no-results-found.js +1 -2
  532. package/build-module/navigation/menu/search-no-results-found.js.map +1 -1
  533. package/build-module/navigation/styles/navigation-styles.js.map +1 -1
  534. package/build-module/navigator/index.js +130 -5
  535. package/build-module/navigator/index.js.map +1 -1
  536. package/build-module/navigator/legacy.js +167 -0
  537. package/build-module/navigator/legacy.js.map +1 -0
  538. package/build-module/navigator/{navigator-provider → navigator}/component.js +4 -39
  539. package/build-module/navigator/navigator/component.js.map +1 -0
  540. package/build-module/navigator/navigator-back-button/component.js +1 -37
  541. package/build-module/navigator/navigator-back-button/component.js.map +1 -1
  542. package/build-module/navigator/navigator-back-button/hook.js +1 -1
  543. package/build-module/navigator/navigator-back-button/hook.js.map +1 -1
  544. package/build-module/navigator/navigator-button/component.js +1 -36
  545. package/build-module/navigator/navigator-button/component.js.map +1 -1
  546. package/build-module/navigator/navigator-button/hook.js +1 -1
  547. package/build-module/navigator/navigator-button/hook.js.map +1 -1
  548. package/build-module/navigator/navigator-screen/component.js +39 -61
  549. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  550. package/build-module/navigator/navigator-screen/use-screen-animate-presence.js +106 -0
  551. package/build-module/navigator/navigator-screen/use-screen-animate-presence.js.map +1 -0
  552. package/build-module/navigator/navigator-to-parent-button/component.js +2 -6
  553. package/build-module/navigator/navigator-to-parent-button/component.js.map +1 -1
  554. package/build-module/navigator/styles.js +77 -33
  555. package/build-module/navigator/styles.js.map +1 -1
  556. package/build-module/navigator/types.js.map +1 -1
  557. package/build-module/navigator/use-navigator.js +4 -1
  558. package/build-module/navigator/use-navigator.js.map +1 -1
  559. package/build-module/notice/index.js +1 -2
  560. package/build-module/notice/index.js.map +1 -1
  561. package/build-module/notice/index.native.js +1 -3
  562. package/build-module/notice/index.native.js.map +1 -1
  563. package/build-module/number-control/index.js +1 -3
  564. package/build-module/number-control/index.js.map +1 -1
  565. package/build-module/number-control/styles/number-control-styles.js.map +1 -1
  566. package/build-module/palette-edit/index.js +2 -4
  567. package/build-module/palette-edit/index.js.map +1 -1
  568. package/build-module/panel/actions.native.js +1 -2
  569. package/build-module/panel/actions.native.js.map +1 -1
  570. package/build-module/panel/body.js +1 -2
  571. package/build-module/panel/body.js.map +1 -1
  572. package/build-module/panel/body.native.js +1 -2
  573. package/build-module/panel/body.native.js.map +1 -1
  574. package/build-module/panel/header.js +1 -2
  575. package/build-module/panel/header.js.map +1 -1
  576. package/build-module/panel/index.js +1 -2
  577. package/build-module/panel/index.js.map +1 -1
  578. package/build-module/placeholder/index.js +1 -2
  579. package/build-module/placeholder/index.js.map +1 -1
  580. package/build-module/popover/index.js +2 -4
  581. package/build-module/popover/index.js.map +1 -1
  582. package/build-module/popover/overlay-middlewares.js.map +1 -1
  583. package/build-module/popover/utils.js.map +1 -1
  584. package/build-module/progress-bar/index.js +1 -2
  585. package/build-module/progress-bar/index.js.map +1 -1
  586. package/build-module/progress-bar/styles.js.map +1 -1
  587. package/build-module/query-controls/index.js.map +1 -1
  588. package/build-module/query-controls/index.native.js +1 -3
  589. package/build-module/query-controls/index.native.js.map +1 -1
  590. package/build-module/radio-control/index.js +1 -2
  591. package/build-module/radio-control/index.js.map +1 -1
  592. package/build-module/radio-control/index.native.js +1 -2
  593. package/build-module/radio-control/index.native.js.map +1 -1
  594. package/build-module/range-control/index.js +1 -2
  595. package/build-module/range-control/index.js.map +1 -1
  596. package/build-module/range-control/index.native.js.map +1 -1
  597. package/build-module/range-control/mark.js +1 -3
  598. package/build-module/range-control/mark.js.map +1 -1
  599. package/build-module/range-control/rail.js +1 -3
  600. package/build-module/range-control/rail.js.map +1 -1
  601. package/build-module/range-control/styles/range-control-styles.js +32 -32
  602. package/build-module/range-control/styles/range-control-styles.js.map +1 -1
  603. package/build-module/range-control/tooltip.js +1 -1
  604. package/build-module/range-control/tooltip.js.map +1 -1
  605. package/build-module/range-control/utils.js.map +1 -1
  606. package/build-module/resizable-box/index.js +1 -2
  607. package/build-module/resizable-box/index.js.map +1 -1
  608. package/build-module/resizable-box/resize-tooltip/index.js +1 -2
  609. package/build-module/resizable-box/resize-tooltip/index.js.map +1 -1
  610. package/build-module/resizable-box/resize-tooltip/label.js.map +1 -1
  611. package/build-module/resizable-box/resize-tooltip/utils.js.map +1 -1
  612. package/build-module/responsive-wrapper/index.js.map +1 -1
  613. package/build-module/sandbox/index.js +1 -2
  614. package/build-module/sandbox/index.js.map +1 -1
  615. package/build-module/sandbox/index.native.js +1 -2
  616. package/build-module/sandbox/index.native.js.map +1 -1
  617. package/build-module/search-control/index.js +11 -2
  618. package/build-module/search-control/index.js.map +1 -1
  619. package/build-module/search-control/index.native.js +1 -2
  620. package/build-module/search-control/index.native.js.map +1 -1
  621. package/build-module/search-control/types.js.map +1 -1
  622. package/build-module/select-control/index.js.map +1 -1
  623. package/build-module/select-control/index.native.js.map +1 -1
  624. package/build-module/slot-fill/index.js +1 -3
  625. package/build-module/slot-fill/index.js.map +1 -1
  626. package/build-module/slot-fill/slot.js +1 -2
  627. package/build-module/slot-fill/slot.js.map +1 -1
  628. package/build-module/snackbar/index.js +1 -2
  629. package/build-module/snackbar/index.js.map +1 -1
  630. package/build-module/snackbar/list.js +1 -2
  631. package/build-module/snackbar/list.js.map +1 -1
  632. package/build-module/spinner/index.js +1 -2
  633. package/build-module/spinner/index.js.map +1 -1
  634. package/build-module/spinner/styles.js.map +1 -1
  635. package/build-module/style-provider/index.js +1 -0
  636. package/build-module/style-provider/index.js.map +1 -1
  637. package/build-module/surface/hook.js.map +1 -1
  638. package/build-module/surface/styles.js.map +1 -1
  639. package/build-module/tab-panel/index.js +1 -2
  640. package/build-module/tab-panel/index.js.map +1 -1
  641. package/build-module/tabs/index.js.map +1 -1
  642. package/build-module/tabs/styles.js +28 -6
  643. package/build-module/tabs/styles.js.map +1 -1
  644. package/build-module/tabs/tab.js +9 -4
  645. package/build-module/tabs/tab.js.map +1 -1
  646. package/build-module/tabs/tablist.js +72 -40
  647. package/build-module/tabs/tablist.js.map +1 -1
  648. package/build-module/tabs/tabpanel.js.map +1 -1
  649. package/build-module/tabs/use-track-overflow.js +67 -0
  650. package/build-module/tabs/use-track-overflow.js.map +1 -0
  651. package/build-module/text/get-line-height.js.map +1 -1
  652. package/build-module/text/styles/text-mixins.native.js.map +1 -1
  653. package/build-module/text/utils.js.map +1 -1
  654. package/build-module/text-control/index.native.js.map +1 -1
  655. package/build-module/text-highlight/index.js +1 -2
  656. package/build-module/text-highlight/index.js.map +1 -1
  657. package/build-module/textarea-control/index.js.map +1 -1
  658. package/build-module/theme/color-algorithms.js.map +1 -1
  659. package/build-module/theme/styles.js.map +1 -1
  660. package/build-module/tip/index.js +1 -2
  661. package/build-module/tip/index.js.map +1 -1
  662. package/build-module/toggle-control/index.js +1 -2
  663. package/build-module/toggle-control/index.js.map +1 -1
  664. package/build-module/toggle-control/index.native.js.map +1 -1
  665. package/build-module/toggle-group-control/toggle-group-control/as-button-group.js +4 -2
  666. package/build-module/toggle-group-control/toggle-group-control/as-button-group.js.map +1 -1
  667. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js +14 -3
  668. package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map +1 -1
  669. package/build-module/toggle-group-control/toggle-group-control/component.js +17 -12
  670. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  671. package/build-module/toggle-group-control/toggle-group-control/styles.js +7 -7
  672. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  673. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js +16 -25
  674. package/build-module/toggle-group-control/toggle-group-control-option-base/component.js.map +1 -1
  675. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +7 -8
  676. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  677. package/build-module/toggle-group-control/types.js.map +1 -1
  678. package/build-module/toolbar/toolbar/index.js.map +1 -1
  679. package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js +2 -2
  680. package/build-module/toolbar/toolbar-button/toolbar-button-container.native.js.map +1 -1
  681. package/build-module/toolbar/toolbar-group/index.js +1 -2
  682. package/build-module/toolbar/toolbar-group/index.js.map +1 -1
  683. package/build-module/tools-panel/styles.js.map +1 -1
  684. package/build-module/tools-panel/tools-panel/component.js +1 -2
  685. package/build-module/tools-panel/tools-panel/component.js.map +1 -1
  686. package/build-module/tools-panel/tools-panel-header/component.js +1 -3
  687. package/build-module/tools-panel/tools-panel-header/component.js.map +1 -1
  688. package/build-module/tooltip/index.js +1 -2
  689. package/build-module/tooltip/index.js.map +1 -1
  690. package/build-module/tooltip/index.native.js +1 -3
  691. package/build-module/tooltip/index.native.js.map +1 -1
  692. package/build-module/tree-grid/cell.js +1 -2
  693. package/build-module/tree-grid/cell.js.map +1 -1
  694. package/build-module/unit-control/index.js.map +1 -1
  695. package/build-module/unit-control/index.native.js +1 -3
  696. package/build-module/unit-control/index.native.js.map +1 -1
  697. package/build-module/unit-control/utils.js.map +1 -1
  698. package/build-module/utils/breakpoint.js.map +1 -1
  699. package/build-module/utils/colors-values.js.map +1 -1
  700. package/build-module/utils/config-values.js.map +1 -1
  701. package/build-module/utils/element-rect.js +22 -12
  702. package/build-module/utils/element-rect.js.map +1 -1
  703. package/build-module/utils/font-size.js.map +1 -1
  704. package/build-module/utils/hooks/use-animated-offset-rect.js +74 -0
  705. package/build-module/utils/hooks/use-animated-offset-rect.js.map +1 -0
  706. package/build-module/utils/hooks/use-cx.js.map +1 -1
  707. package/build-module/utils/hooks/use-on-value-update.js +3 -6
  708. package/build-module/utils/hooks/use-on-value-update.js.map +1 -1
  709. package/build-module/utils/math.js +2 -2
  710. package/build-module/utils/math.js.map +1 -1
  711. package/build-module/utils/space.js.map +1 -1
  712. package/build-module/utils/unit-values.js.map +1 -1
  713. package/build-module/utils/use-responsive-value.js.map +1 -1
  714. package/build-style/style-rtl.css +30 -14
  715. package/build-style/style.css +30 -14
  716. package/build-types/alignment-matrix-control/types.d.ts +2 -0
  717. package/build-types/alignment-matrix-control/types.d.ts.map +1 -1
  718. package/build-types/autocomplete/index.d.ts.map +1 -1
  719. package/build-types/border-box-control/border-box-control/component.d.ts +5 -15
  720. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  721. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts +2 -1
  722. package/build-types/border-box-control/border-box-control-split-controls/component.d.ts.map +1 -1
  723. package/build-types/border-box-control/stories/index.story.d.ts +3 -2
  724. package/build-types/border-box-control/stories/index.story.d.ts.map +1 -1
  725. package/build-types/border-control/border-control/component.d.ts +3 -2
  726. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  727. package/build-types/border-control/border-control-dropdown/component.d.ts +2 -1
  728. package/build-types/border-control/border-control-dropdown/component.d.ts.map +1 -1
  729. package/build-types/border-control/border-control-style-picker/component.d.ts.map +1 -1
  730. package/build-types/border-control/stories/index.story.d.ts +15 -30
  731. package/build-types/border-control/stories/index.story.d.ts.map +1 -1
  732. package/build-types/border-control/styles.d.ts.map +1 -1
  733. package/build-types/border-control/types.d.ts +12 -7
  734. package/build-types/border-control/types.d.ts.map +1 -1
  735. package/build-types/box-control/index.d.ts +4 -4
  736. package/build-types/box-control/stories/index.story.d.ts.map +1 -1
  737. package/build-types/box-control/types.d.ts +3 -3
  738. package/build-types/composite/stories/index.story.d.ts +22 -0
  739. package/build-types/composite/stories/index.story.d.ts.map +1 -1
  740. package/build-types/dropdown/stories/index.story.d.ts.map +1 -1
  741. package/build-types/dropdown-menu/stories/index.story.d.ts.map +1 -1
  742. package/build-types/index.d.ts +23 -4
  743. package/build-types/index.d.ts.map +1 -1
  744. package/build-types/modal/aria-helper.d.ts.map +1 -1
  745. package/build-types/navigator/index.d.ts +171 -5
  746. package/build-types/navigator/index.d.ts.map +1 -1
  747. package/build-types/navigator/legacy.d.ts +226 -0
  748. package/build-types/navigator/legacy.d.ts.map +1 -0
  749. package/build-types/navigator/navigator/component.d.ts +3 -0
  750. package/build-types/navigator/navigator/component.d.ts.map +1 -0
  751. package/build-types/navigator/navigator-back-button/component.d.ts +0 -35
  752. package/build-types/navigator/navigator-back-button/component.d.ts.map +1 -1
  753. package/build-types/navigator/navigator-button/component.d.ts +0 -34
  754. package/build-types/navigator/navigator-button/component.d.ts.map +1 -1
  755. package/build-types/navigator/navigator-screen/component.d.ts +0 -35
  756. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  757. package/build-types/navigator/navigator-screen/use-screen-animate-presence.d.ts +16 -0
  758. package/build-types/navigator/navigator-screen/use-screen-animate-presence.d.ts.map +1 -0
  759. package/build-types/navigator/navigator-to-parent-button/component.d.ts +0 -4
  760. package/build-types/navigator/navigator-to-parent-button/component.d.ts.map +1 -1
  761. package/build-types/navigator/stories/index.story.d.ts +5 -5
  762. package/build-types/navigator/stories/index.story.d.ts.map +1 -1
  763. package/build-types/navigator/styles.d.ts +20 -7
  764. package/build-types/navigator/styles.d.ts.map +1 -1
  765. package/build-types/navigator/types.d.ts +19 -1
  766. package/build-types/navigator/types.d.ts.map +1 -1
  767. package/build-types/navigator/use-navigator.d.ts +4 -1
  768. package/build-types/navigator/use-navigator.d.ts.map +1 -1
  769. package/build-types/range-control/styles/range-control-styles.d.ts +1 -1
  770. package/build-types/range-control/styles/range-control-styles.d.ts.map +1 -1
  771. package/build-types/search-control/index.d.ts.map +1 -1
  772. package/build-types/search-control/stories/index.story.d.ts +0 -8
  773. package/build-types/search-control/stories/index.story.d.ts.map +1 -1
  774. package/build-types/search-control/types.d.ts +3 -0
  775. package/build-types/search-control/types.d.ts.map +1 -1
  776. package/build-types/select-control/stories/index.story.d.ts +7 -0
  777. package/build-types/select-control/stories/index.story.d.ts.map +1 -1
  778. package/build-types/tabs/stories/index.story.d.ts +2 -1
  779. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  780. package/build-types/tabs/styles.d.ts +7 -0
  781. package/build-types/tabs/styles.d.ts.map +1 -1
  782. package/build-types/tabs/tab.d.ts.map +1 -1
  783. package/build-types/tabs/tablist.d.ts.map +1 -1
  784. package/build-types/tabs/use-track-overflow.d.ts +17 -0
  785. package/build-types/tabs/use-track-overflow.d.ts.map +1 -0
  786. package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts +2 -2
  787. package/build-types/toggle-group-control/toggle-group-control/as-button-group.d.ts.map +1 -1
  788. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts +2 -2
  789. package/build-types/toggle-group-control/toggle-group-control/as-radio-group.d.ts.map +1 -1
  790. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  791. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  792. package/build-types/toggle-group-control/toggle-group-control-option-base/component.d.ts.map +1 -1
  793. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +0 -1
  794. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -1
  795. package/build-types/toggle-group-control/types.d.ts +2 -1
  796. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  797. package/build-types/utils/element-rect.d.ts +8 -0
  798. package/build-types/utils/element-rect.d.ts.map +1 -1
  799. package/build-types/utils/hooks/use-animated-offset-rect.d.ts +62 -0
  800. package/build-types/utils/hooks/use-animated-offset-rect.d.ts.map +1 -0
  801. package/build-types/utils/hooks/use-on-value-update.d.ts.map +1 -1
  802. package/package.json +20 -20
  803. package/schemas/docs-manifest.json +38 -0
  804. package/src/alignment-matrix-control/README.md +46 -36
  805. package/src/alignment-matrix-control/docs-manifest.json +12 -0
  806. package/src/alignment-matrix-control/types.ts +2 -0
  807. package/src/angle-picker-control/README.md +36 -23
  808. package/src/angle-picker-control/docs-manifest.json +5 -0
  809. package/src/autocomplete/index.tsx +4 -1
  810. package/src/border-box-control/border-box-control/README.md +22 -26
  811. package/src/border-box-control/border-box-control/component.tsx +3 -14
  812. package/src/border-box-control/stories/index.story.tsx +2 -1
  813. package/src/border-control/border-control/README.md +26 -36
  814. package/src/border-control/border-control/component.tsx +1 -2
  815. package/src/border-control/border-control-dropdown/component.tsx +1 -15
  816. package/src/border-control/stories/index.story.tsx +4 -10
  817. package/src/border-control/styles.ts +0 -1
  818. package/src/border-control/test/index.js +2 -15
  819. package/src/border-control/types.ts +12 -7
  820. package/src/box-control/README.md +9 -12
  821. package/src/box-control/index.tsx +4 -4
  822. package/src/box-control/stories/index.story.tsx +1 -1
  823. package/src/box-control/types.ts +3 -3
  824. package/src/button/style.scss +5 -1
  825. package/src/composite/legacy/test/index.tsx +22 -21
  826. package/src/composite/stories/index.story.tsx +42 -0
  827. package/src/composite/test/index.tsx +629 -38
  828. package/src/dropdown/stories/index.story.tsx +1 -0
  829. package/src/dropdown/style.scss +10 -13
  830. package/src/dropdown-menu/stories/index.story.tsx +3 -0
  831. package/src/index.ts +19 -1
  832. package/src/menu-group/style.scss +4 -1
  833. package/src/menu-items-choice/style.scss +2 -0
  834. package/src/modal/aria-helper.ts +1 -0
  835. package/src/navigator/README.md +176 -0
  836. package/src/navigator/index.tsx +131 -0
  837. package/src/navigator/legacy.ts +169 -0
  838. package/src/navigator/{navigator-provider → navigator}/component.tsx +6 -44
  839. package/src/navigator/navigator-back-button/component.tsx +1 -37
  840. package/src/navigator/navigator-back-button/hook.ts +1 -1
  841. package/src/navigator/navigator-button/component.tsx +1 -36
  842. package/src/navigator/navigator-button/hook.ts +1 -1
  843. package/src/navigator/navigator-screen/component.tsx +48 -76
  844. package/src/navigator/navigator-screen/use-screen-animate-presence.ts +177 -0
  845. package/src/navigator/navigator-to-parent-button/component.tsx +2 -7
  846. package/src/navigator/stories/index.story.tsx +55 -54
  847. package/src/navigator/styles.ts +112 -41
  848. package/src/navigator/test/index.tsx +47 -47
  849. package/src/navigator/types.ts +19 -1
  850. package/src/navigator/use-navigator.ts +4 -1
  851. package/src/range-control/styles/range-control-styles.ts +19 -10
  852. package/src/range-control/tooltip.tsx +1 -1
  853. package/src/search-control/README.md +2 -0
  854. package/src/search-control/index.tsx +9 -2
  855. package/src/search-control/stories/index.story.tsx +0 -15
  856. package/src/search-control/test/index.tsx +4 -1
  857. package/src/search-control/types.ts +3 -0
  858. package/src/select-control/stories/index.story.tsx +14 -1
  859. package/src/tabs/stories/index.story.tsx +106 -0
  860. package/src/tabs/styles.ts +161 -58
  861. package/src/tabs/tab.tsx +8 -2
  862. package/src/tabs/tablist.tsx +72 -39
  863. package/src/tabs/use-track-overflow.ts +76 -0
  864. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +208 -44
  865. package/src/toggle-group-control/test/index.tsx +26 -0
  866. package/src/toggle-group-control/toggle-group-control/as-button-group.tsx +18 -10
  867. package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx +30 -12
  868. package/src/toggle-group-control/toggle-group-control/component.tsx +19 -6
  869. package/src/toggle-group-control/toggle-group-control/styles.ts +41 -0
  870. package/src/toggle-group-control/toggle-group-control-option-base/component.tsx +15 -28
  871. package/src/toggle-group-control/toggle-group-control-option-base/styles.ts +0 -11
  872. package/src/toggle-group-control/types.ts +3 -1
  873. package/src/tools-panel/tools-panel/README.md +10 -10
  874. package/src/utils/element-rect.ts +32 -15
  875. package/src/utils/hooks/use-animated-offset-rect.ts +107 -0
  876. package/src/utils/hooks/use-on-value-update.ts +3 -6
  877. package/tsconfig.tsbuildinfo +1 -1
  878. package/build/navigator/navigator-provider/component.js.map +0 -1
  879. package/build/utils/hooks/use-event.js +0 -41
  880. package/build/utils/hooks/use-event.js.map +0 -1
  881. package/build-module/navigator/navigator-provider/component.js.map +0 -1
  882. package/build-module/utils/hooks/use-event.js +0 -35
  883. package/build-module/utils/hooks/use-event.js.map +0 -1
  884. package/build-types/navigator/navigator-provider/component.d.ts +0 -37
  885. package/build-types/navigator/navigator-provider/component.d.ts.map +0 -1
  886. package/build-types/utils/hooks/use-event.d.ts +0 -20
  887. package/build-types/utils/hooks/use-event.d.ts.map +0 -1
  888. package/src/navigator/index.ts +0 -6
  889. package/src/navigator/navigator-back-button/README.md +0 -15
  890. package/src/navigator/navigator-button/README.md +0 -38
  891. package/src/navigator/navigator-provider/README.md +0 -94
  892. package/src/navigator/navigator-screen/README.md +0 -33
  893. package/src/navigator/navigator-to-parent-button/README.md +0 -17
  894. package/src/utils/hooks/use-event.ts +0 -38
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_element","require","_isShallowEqual","_interopRequireDefault","_warning","_context","_useCx","_router","_view","_context2","styles","_interopRequireWildcard","_deprecated","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","addScreen","screens","screen","some","s","path","globalThis","SCRIPT_DEBUG","warning","id","removeScreen","filter","goTo","state","options","_focusSelectorsCopy2","focusSelectors","currentLocation","isBack","skipFocus","replace","focusTargetSelector","restOptions","focusSelectorsCopy","getFocusSelectorsCopy","_focusSelectorsCopy","Map","currentFocusSelector","delete","isInitial","hasRestoredFocus","goToParent","currentPath","undefined","parentPath","findParent","routerReducer","action","matchedPath","restState","type","patternMatch","isShallowEqual","params","UnconnectedNavigator","props","forwardedRef","initialPath","initialPathProp","children","className","otherProps","useContextSystem","routerState","dispatch","useReducer","methods","useMemo","goBack","deprecated","since","alternative","navigatorContextValue","_matchedPath$params","location","match","cx","useCx","classes","navigatorWrapper","jsx","View","ref","NavigatorContext","Provider","value","Navigator","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useReducer } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { patternMatch, findParent } from '../utils/router';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport type {\n\tNavigatorProps,\n\tNavigatorLocation,\n\tNavigatorContext as NavigatorContextType,\n\tNavigateOptions,\n\tScreen,\n\tNavigateToParentOptions,\n} from '../types';\nimport deprecated from '@wordpress/deprecated';\n\ntype MatchedPath = ReturnType< typeof patternMatch >;\n\ntype RouterAction =\n\t| { type: 'add' | 'remove'; screen: Screen }\n\t| { type: 'goto'; path: string; options?: NavigateOptions }\n\t| { type: 'gotoparent'; options?: NavigateToParentOptions };\n\ntype RouterState = {\n\tinitialPath: string;\n\tscreens: Screen[];\n\tcurrentLocation: NavigatorLocation;\n\tmatchedPath: MatchedPath;\n\tfocusSelectors: Map< string, string >;\n};\n\nfunction addScreen( { screens }: RouterState, screen: Screen ) {\n\tif ( screens.some( ( s ) => s.path === screen.path ) ) {\n\t\twarning(\n\t\t\t`Navigator: a screen with path ${ screen.path } already exists.\nThe screen with id ${ screen.id } will not be added.`\n\t\t);\n\t\treturn screens;\n\t}\n\treturn [ ...screens, screen ];\n}\n\nfunction removeScreen( { screens }: RouterState, screen: Screen ) {\n\treturn screens.filter( ( s ) => s.id !== screen.id );\n}\n\nfunction goTo(\n\tstate: RouterState,\n\tpath: string,\n\toptions: NavigateOptions = {}\n) {\n\tconst { focusSelectors } = state;\n\tconst currentLocation = { ...state.currentLocation };\n\n\tconst {\n\t\t// Default assignments\n\t\tisBack = false,\n\t\tskipFocus = false,\n\t\t// Extract to avoid forwarding\n\t\treplace,\n\t\tfocusTargetSelector,\n\t\t// Rest\n\t\t...restOptions\n\t} = options;\n\n\tif ( currentLocation.path === path ) {\n\t\treturn { currentLocation, focusSelectors };\n\t}\n\n\tlet focusSelectorsCopy: typeof focusSelectors | undefined;\n\tfunction getFocusSelectorsCopy() {\n\t\tfocusSelectorsCopy =\n\t\t\tfocusSelectorsCopy ?? new Map( state.focusSelectors );\n\t\treturn focusSelectorsCopy;\n\t}\n\n\t// Set a focus selector that will be used when navigating\n\t// back to the current location.\n\tif ( focusTargetSelector && currentLocation.path ) {\n\t\tgetFocusSelectorsCopy().set(\n\t\t\tcurrentLocation.path,\n\t\t\tfocusTargetSelector\n\t\t);\n\t}\n\n\t// Get the focus selector for the new location.\n\tlet currentFocusSelector;\n\tif ( focusSelectors.get( path ) ) {\n\t\tif ( isBack ) {\n\t\t\t// Use the found focus selector only when navigating back.\n\t\t\tcurrentFocusSelector = focusSelectors.get( path );\n\t\t}\n\t\t// Make a copy of the focusSelectors map to remove the focus selector\n\t\t// only if necessary (ie. a focus selector was found).\n\t\tgetFocusSelectorsCopy().delete( path );\n\t}\n\n\treturn {\n\t\tcurrentLocation: {\n\t\t\t...restOptions,\n\t\t\tisInitial: false,\n\t\t\tpath,\n\t\t\tisBack,\n\t\t\thasRestoredFocus: false,\n\t\t\tfocusTargetSelector: currentFocusSelector,\n\t\t\tskipFocus,\n\t\t},\n\t\tfocusSelectors: focusSelectorsCopy ?? focusSelectors,\n\t};\n}\n\nfunction goToParent(\n\tstate: RouterState,\n\toptions: NavigateToParentOptions = {}\n) {\n\tconst { screens, focusSelectors } = state;\n\tconst currentLocation = { ...state.currentLocation };\n\tconst currentPath = currentLocation.path;\n\tif ( currentPath === undefined ) {\n\t\treturn { currentLocation, focusSelectors };\n\t}\n\tconst parentPath = findParent( currentPath, screens );\n\tif ( parentPath === undefined ) {\n\t\treturn { currentLocation, focusSelectors };\n\t}\n\treturn goTo( state, parentPath, {\n\t\t...options,\n\t\tisBack: true,\n\t} );\n}\n\nfunction routerReducer(\n\tstate: RouterState,\n\taction: RouterAction\n): RouterState {\n\tlet {\n\t\tscreens,\n\t\tcurrentLocation,\n\t\tmatchedPath,\n\t\tfocusSelectors,\n\t\t...restState\n\t} = state;\n\tswitch ( action.type ) {\n\t\tcase 'add':\n\t\t\tscreens = addScreen( state, action.screen );\n\t\t\tbreak;\n\t\tcase 'remove':\n\t\t\tscreens = removeScreen( state, action.screen );\n\t\t\tbreak;\n\t\tcase 'goto':\n\t\t\t( { currentLocation, focusSelectors } = goTo(\n\t\t\t\tstate,\n\t\t\t\taction.path,\n\t\t\t\taction.options\n\t\t\t) );\n\t\t\tbreak;\n\t\tcase 'gotoparent':\n\t\t\t( { currentLocation, focusSelectors } = goToParent(\n\t\t\t\tstate,\n\t\t\t\taction.options\n\t\t\t) );\n\t\t\tbreak;\n\t}\n\n\t// Return early in case there is no change\n\tif (\n\t\tscreens === state.screens &&\n\t\tcurrentLocation === state.currentLocation\n\t) {\n\t\treturn state;\n\t}\n\n\t// Compute the matchedPath\n\tconst currentPath = currentLocation.path;\n\tmatchedPath =\n\t\tcurrentPath !== undefined\n\t\t\t? patternMatch( currentPath, screens )\n\t\t\t: undefined;\n\n\t// If the new match is the same as the previous match,\n\t// return the previous one to keep immutability.\n\tif (\n\t\tmatchedPath &&\n\t\tstate.matchedPath &&\n\t\tmatchedPath.id === state.matchedPath.id &&\n\t\tisShallowEqual( matchedPath.params, state.matchedPath.params )\n\t) {\n\t\tmatchedPath = state.matchedPath;\n\t}\n\n\treturn {\n\t\t...restState,\n\t\tscreens,\n\t\tcurrentLocation,\n\t\tmatchedPath,\n\t\tfocusSelectors,\n\t};\n}\n\nfunction UnconnectedNavigator(\n\tprops: WordPressComponentProps< NavigatorProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tinitialPath: initialPathProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator' );\n\n\tconst [ routerState, dispatch ] = useReducer(\n\t\trouterReducer,\n\t\tinitialPathProp,\n\t\t( path ) => ( {\n\t\t\tscreens: [],\n\t\t\tcurrentLocation: { path, isInitial: true },\n\t\t\tmatchedPath: undefined,\n\t\t\tfocusSelectors: new Map(),\n\t\t\tinitialPath: initialPathProp,\n\t\t} )\n\t);\n\n\t// The methods are constant forever, create stable references to them.\n\tconst methods = useMemo(\n\t\t() => ( {\n\t\t\t// Note: calling goBack calls `goToParent` internally, as it was established\n\t\t\t// that `goBack` should behave like `goToParent`, and `goToParent` should\n\t\t\t// be marked as deprecated.\n\t\t\tgoBack: ( options: NavigateToParentOptions | undefined ) =>\n\t\t\t\tdispatch( { type: 'gotoparent', options } ),\n\t\t\tgoTo: ( path: string, options?: NavigateOptions ) =>\n\t\t\t\tdispatch( { type: 'goto', path, options } ),\n\t\t\tgoToParent: ( options: NavigateToParentOptions | undefined ) => {\n\t\t\t\tdeprecated( `wp.components.useNavigator().goToParent`, {\n\t\t\t\t\tsince: '6.7',\n\t\t\t\t\talternative: 'wp.components.useNavigator().goBack',\n\t\t\t\t} );\n\t\t\t\tdispatch( { type: 'gotoparent', options } );\n\t\t\t},\n\t\t\taddScreen: ( screen: Screen ) =>\n\t\t\t\tdispatch( { type: 'add', screen } ),\n\t\t\tremoveScreen: ( screen: Screen ) =>\n\t\t\t\tdispatch( { type: 'remove', screen } ),\n\t\t} ),\n\t\t[]\n\t);\n\n\tconst { currentLocation, matchedPath } = routerState;\n\n\tconst navigatorContextValue: NavigatorContextType = useMemo(\n\t\t() => ( {\n\t\t\tlocation: currentLocation,\n\t\t\tparams: matchedPath?.params ?? {},\n\t\t\tmatch: matchedPath?.id,\n\t\t\t...methods,\n\t\t} ),\n\t\t[ currentLocation, matchedPath, methods ]\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() => cx( styles.navigatorWrapper, className ),\n\t\t[ className, cx ]\n\t);\n\n\treturn (\n\t\t<View ref={ forwardedRef } className={ classes } { ...otherProps }>\n\t\t\t<NavigatorContext.Provider value={ navigatorContextValue }>\n\t\t\t\t{ children }\n\t\t\t</NavigatorContext.Provider>\n\t\t</View>\n\t);\n}\n\nexport const Navigator = contextConnect( UnconnectedNavigator, 'Navigator' );\n"],"mappings":"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","ignoreList":[]}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.NavigatorBackButton = void 0;
6
+ exports.NavigatorBackButton = void 0;
7
7
  var _context = require("../../context");
8
8
  var _view = require("../../view");
9
9
  var _hook = require("./hook");
@@ -23,41 +23,5 @@ function UnconnectedNavigatorBackButton(props, forwardedRef) {
23
23
  ...navigatorBackButtonProps
24
24
  });
25
25
  }
26
-
27
- /**
28
- * The `NavigatorBackButton` component can be used to navigate to a screen and
29
- * should be used in combination with the `NavigatorProvider`, the
30
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
31
- * hook).
32
- *
33
- * @example
34
- * ```jsx
35
- * import {
36
- * __experimentalNavigatorProvider as NavigatorProvider,
37
- * __experimentalNavigatorScreen as NavigatorScreen,
38
- * __experimentalNavigatorButton as NavigatorButton,
39
- * __experimentalNavigatorBackButton as NavigatorBackButton,
40
- * } from '@wordpress/components';
41
- *
42
- * const MyNavigation = () => (
43
- * <NavigatorProvider initialPath="/">
44
- * <NavigatorScreen path="/">
45
- * <p>This is the home screen.</p>
46
- * <NavigatorButton path="/child">
47
- * Navigate to child screen.
48
- * </NavigatorButton>
49
- * </NavigatorScreen>
50
- *
51
- * <NavigatorScreen path="/child">
52
- * <p>This is the child screen.</p>
53
- * <NavigatorBackButton>
54
- * Go back (to parent)
55
- * </NavigatorBackButton>
56
- * </NavigatorScreen>
57
- * </NavigatorProvider>
58
- * );
59
- * ```
60
- */
61
- const NavigatorBackButton = exports.NavigatorBackButton = (0, _context.contextConnect)(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
62
- var _default = exports.default = NavigatorBackButton;
26
+ const NavigatorBackButton = exports.NavigatorBackButton = (0, _context.contextConnect)(UnconnectedNavigatorBackButton, 'Navigator.BackButton');
63
27
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","useNavigatorBackButton","jsx","View","ref","NavigatorBackButton","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\n/**\n * The `NavigatorBackButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back (to parent)\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'NavigatorBackButton'\n);\n\nexport default NavigatorBackButton;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAXhD;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,8BAA8BA,CACtCC,KAAoE,EACpEC,YAAiC,EAChC;EACD,MAAMC,wBAAwB,GAAG,IAAAC,4BAAsB,EAAEH,KAAM,CAAC;EAEhE,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGL,YAAc;IAAA,GAAMC;EAAwB,CAAI,CAAC;AACrE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMK,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,IAAAE,uBAAc,EAChDV,8BAA8B,EAC9B,qBACD,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEaJ,mBAAmB","ignoreList":[]}
1
+ {"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","useNavigatorBackButton","jsx","View","ref","NavigatorBackButton","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'Navigator.BackButton'\n);\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAXhD;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,8BAA8BA,CACtCC,KAAoE,EACpEC,YAAiC,EAChC;EACD,MAAMC,wBAAwB,GAAG,IAAAC,4BAAsB,EAAEH,KAAM,CAAC;EAEhE,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGL,YAAc;IAAA,GAAMC;EAAwB,CAAI,CAAC;AACrE;AAEO,MAAMK,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,IAAAE,uBAAc,EAChDV,8BAA8B,EAC9B,sBACD,CAAC","ignoreList":[]}
@@ -22,7 +22,7 @@ function useNavigatorBackButton(props) {
22
22
  onClick,
23
23
  as = _button.default,
24
24
  ...otherProps
25
- } = (0, _context.useContextSystem)(props, 'NavigatorBackButton');
25
+ } = (0, _context.useContextSystem)(props, 'Navigator.BackButton');
26
26
  const {
27
27
  goBack
28
28
  } = (0, _useNavigator.useNavigator)();
@@ -1 +1 @@
1
- {"version":3,"names":["_element","require","_context","_button","_interopRequireDefault","_useNavigator","useNavigatorBackButton","props","onClick","as","Button","otherProps","useContextSystem","goBack","useNavigator","handleClick","useCallback","e","preventDefault"],"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorBackButtonProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorBackButton' );\n\n\tconst { goBack } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoBack();\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goBack, onClick ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOO,SAASK,sBAAsBA,CACrCC,KAAoE,EACnE;EACD,MAAM;IACLC,OAAO;IACPC,EAAE,GAAGC,eAAM;IAEX,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEL,KAAK,EAAE,qBAAsB,CAAC;EAEpD,MAAM;IAAEM;EAAO,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EACjC,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,MAAM,CAAC,CAAC;IACRL,OAAO,GAAIS,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,MAAM,EAAEL,OAAO,CAClB,CAAC;EAEF,OAAO;IACNC,EAAE;IACFD,OAAO,EAAEO,WAAW;IACpB,GAAGJ;EACJ,CAAC;AACF","ignoreList":[]}
1
+ {"version":3,"names":["_element","require","_context","_button","_interopRequireDefault","_useNavigator","useNavigatorBackButton","props","onClick","as","Button","otherProps","useContextSystem","goBack","useNavigator","handleClick","useCallback","e","preventDefault"],"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorBackButtonProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.BackButton' );\n\n\tconst { goBack } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoBack();\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goBack, onClick ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOO,SAASK,sBAAsBA,CACrCC,KAAoE,EACnE;EACD,MAAM;IACLC,OAAO;IACPC,EAAE,GAAGC,eAAM;IAEX,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEL,KAAK,EAAE,sBAAuB,CAAC;EAErD,MAAM;IAAEM;EAAO,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EACjC,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,MAAM,CAAC,CAAC;IACRL,OAAO,GAAIS,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,MAAM,EAAEL,OAAO,CAClB,CAAC;EAEF,OAAO;IACNC,EAAE;IACFD,OAAO,EAAEO,WAAW;IACpB,GAAGJ;EACJ,CAAC;AACF","ignoreList":[]}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.NavigatorButton = void 0;
6
+ exports.NavigatorButton = void 0;
7
7
  var _context = require("../../context");
8
8
  var _view = require("../../view");
9
9
  var _hook = require("./hook");
@@ -23,40 +23,5 @@ function UnconnectedNavigatorButton(props, forwardedRef) {
23
23
  ...navigatorButtonProps
24
24
  });
25
25
  }
26
-
27
- /**
28
- * The `NavigatorButton` component can be used to navigate to a screen and should
29
- * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
30
- * and the `NavigatorBackButton` components (or the `useNavigator` hook).
31
- *
32
- * @example
33
- * ```jsx
34
- * import {
35
- * __experimentalNavigatorProvider as NavigatorProvider,
36
- * __experimentalNavigatorScreen as NavigatorScreen,
37
- * __experimentalNavigatorButton as NavigatorButton,
38
- * __experimentalNavigatorBackButton as NavigatorBackButton,
39
- * } from '@wordpress/components';
40
- *
41
- * const MyNavigation = () => (
42
- * <NavigatorProvider initialPath="/">
43
- * <NavigatorScreen path="/">
44
- * <p>This is the home screen.</p>
45
- * <NavigatorButton path="/child">
46
- * Navigate to child screen.
47
- * </NavigatorButton>
48
- * </NavigatorScreen>
49
- *
50
- * <NavigatorScreen path="/child">
51
- * <p>This is the child screen.</p>
52
- * <NavigatorBackButton>
53
- * Go back
54
- * </NavigatorBackButton>
55
- * </NavigatorScreen>
56
- * </NavigatorProvider>
57
- * );
58
- * ```
59
- */
60
- const NavigatorButton = exports.NavigatorButton = (0, _context.contextConnect)(UnconnectedNavigatorButton, 'NavigatorButton');
61
- var _default = exports.default = NavigatorButton;
26
+ const NavigatorButton = exports.NavigatorButton = (0, _context.contextConnect)(UnconnectedNavigatorButton, 'Navigator.Button');
62
27
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","useNavigatorButton","jsx","View","ref","NavigatorButton","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport type { NavigatorButtonProps } from '../types';\n\nfunction UnconnectedNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorButtonProps = useNavigatorButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorButtonProps } />;\n}\n\n/**\n * The `NavigatorButton` component can be used to navigate to a screen and should\n * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`\n * and the `NavigatorBackButton` components (or the `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorButton = contextConnect(\n\tUnconnectedNavigatorButton,\n\t'NavigatorButton'\n);\n\nexport default NavigatorButton;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAA4C,IAAAG,WAAA,GAAAH,OAAA;AAX5C;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,0BAA0BA,CAClCC,KAAgE,EAChEC,YAAiC,EAChC;EACD,MAAMC,oBAAoB,GAAG,IAAAC,wBAAkB,EAAEH,KAAM,CAAC;EAExD,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGL,YAAc;IAAA,GAAMC;EAAoB,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMK,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,uBAAc,EAC5CV,0BAA0B,EAC1B,iBACD,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEaJ,eAAe","ignoreList":[]}
1
+ {"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","useNavigatorButton","jsx","View","ref","NavigatorButton","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport type { NavigatorButtonProps } from '../types';\n\nfunction UnconnectedNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorButtonProps = useNavigatorButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorButtonProps } />;\n}\n\nexport const NavigatorButton = contextConnect(\n\tUnconnectedNavigatorButton,\n\t'Navigator.Button'\n);\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAA4C,IAAAG,WAAA,GAAAH,OAAA;AAX5C;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,0BAA0BA,CAClCC,KAAgE,EAChEC,YAAiC,EAChC;EACD,MAAMC,oBAAoB,GAAG,IAAAC,wBAAkB,EAAEH,KAAM,CAAC;EAExD,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGL,YAAc;IAAA,GAAMC;EAAoB,CAAI,CAAC;AACjE;AAEO,MAAMK,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,uBAAc,EAC5CV,0BAA0B,EAC1B,kBACD,CAAC","ignoreList":[]}
@@ -26,7 +26,7 @@ function useNavigatorButton(props) {
26
26
  as = _button.default,
27
27
  attributeName = 'id',
28
28
  ...otherProps
29
- } = (0, _context.useContextSystem)(props, 'NavigatorButton');
29
+ } = (0, _context.useContextSystem)(props, 'Navigator.Button');
30
30
  const escapedPath = (0, _escapeHtml.escapeAttribute)(path);
31
31
  const {
32
32
  goTo
@@ -1 +1 @@
1
- {"version":3,"names":["_element","require","_escapeHtml","_context","_button","_interopRequireDefault","_useNavigator","cssSelectorForAttribute","attrName","attrValue","useNavigatorButton","props","path","onClick","as","Button","attributeName","otherProps","useContextSystem","escapedPath","escapeAttribute","goTo","useNavigator","handleClick","useCallback","e","preventDefault","focusTargetSelector"],"sources":["@wordpress/components/src/navigator/navigator-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorButtonProps } from '../types';\n\nconst cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>\n\t`[${ attrName }=\"${ attrValue }\"]`;\n\nexport function useNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >\n) {\n\tconst {\n\t\tpath,\n\t\tonClick,\n\t\tas = Button,\n\t\tattributeName = 'id',\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorButton' );\n\n\tconst escapedPath = escapeAttribute( path );\n\n\tconst { goTo } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoTo( escapedPath, {\n\t\t\t\t\tfocusTargetSelector: cssSelectorForAttribute(\n\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\tescapedPath\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goTo, onClick, attributeName, escapedPath ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t\t[ attributeName ]: escapedPath,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAIA;AACA;AACA;;AAOA,MAAMM,uBAAuB,GAAGA,CAAEC,QAAgB,EAAEC,SAAiB,KACnE,IAAID,QAAU,KAAKC,SAAW,IAAG;AAE5B,SAASC,kBAAkBA,CACjCC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,OAAO;IACPC,EAAE,GAAGC,eAAM;IACXC,aAAa,GAAG,IAAI;IACpB,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEP,KAAK,EAAE,iBAAkB,CAAC;EAEhD,MAAMQ,WAAW,GAAG,IAAAC,2BAAe,EAAER,IAAK,CAAC;EAE3C,MAAM;IAAES;EAAK,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EAC/B,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,IAAI,CAAEF,WAAW,EAAE;MAClBQ,mBAAmB,EAAEpB,uBAAuB,CAC3CS,aAAa,EACbG,WACD;IACD,CAAE,CAAC;IACHN,OAAO,GAAIY,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,IAAI,EAAER,OAAO,EAAEG,aAAa,EAAEG,WAAW,CAC5C,CAAC;EAEF,OAAO;IACNL,EAAE;IACFD,OAAO,EAAEU,WAAW;IACpB,GAAGN,UAAU;IACb,CAAED,aAAa,GAAIG;EACpB,CAAC;AACF","ignoreList":[]}
1
+ {"version":3,"names":["_element","require","_escapeHtml","_context","_button","_interopRequireDefault","_useNavigator","cssSelectorForAttribute","attrName","attrValue","useNavigatorButton","props","path","onClick","as","Button","attributeName","otherProps","useContextSystem","escapedPath","escapeAttribute","goTo","useNavigator","handleClick","useCallback","e","preventDefault","focusTargetSelector"],"sources":["@wordpress/components/src/navigator/navigator-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorButtonProps } from '../types';\n\nconst cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>\n\t`[${ attrName }=\"${ attrValue }\"]`;\n\nexport function useNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >\n) {\n\tconst {\n\t\tpath,\n\t\tonClick,\n\t\tas = Button,\n\t\tattributeName = 'id',\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.Button' );\n\n\tconst escapedPath = escapeAttribute( path );\n\n\tconst { goTo } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoTo( escapedPath, {\n\t\t\t\t\tfocusTargetSelector: cssSelectorForAttribute(\n\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\tescapedPath\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goTo, onClick, attributeName, escapedPath ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t\t[ attributeName ]: escapedPath,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAIA;AACA;AACA;;AAOA,MAAMM,uBAAuB,GAAGA,CAAEC,QAAgB,EAAEC,SAAiB,KACpE,IAAKD,QAAQ,KAAOC,SAAS,IAAK;AAE5B,SAASC,kBAAkBA,CACjCC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,OAAO;IACPC,EAAE,GAAGC,eAAM;IACXC,aAAa,GAAG,IAAI;IACpB,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEP,KAAK,EAAE,kBAAmB,CAAC;EAEjD,MAAMQ,WAAW,GAAG,IAAAC,2BAAe,EAAER,IAAK,CAAC;EAE3C,MAAM;IAAES;EAAK,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EAC/B,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,IAAI,CAAEF,WAAW,EAAE;MAClBQ,mBAAmB,EAAEpB,uBAAuB,CAC3CS,aAAa,EACbG,WACD;IACD,CAAE,CAAC;IACHN,OAAO,GAAIY,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,IAAI,EAAER,OAAO,EAAEG,aAAa,EAAEG,WAAW,CAC5C,CAAC;EAEF,OAAO;IACNL,EAAE;IACFD,OAAO,EAAEU,WAAW;IACpB,GAAGN,UAAU;IACb,CAAED,aAAa,GAAIG;EACpB,CAAC;AACF","ignoreList":[]}
@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.default = exports.NavigatorScreen = void 0;
7
+ exports.NavigatorScreen = void 0;
8
8
  var _dom = require("@wordpress/dom");
9
9
  var _element = require("@wordpress/element");
10
10
  var _compose = require("@wordpress/compose");
11
- var _i18n = require("@wordpress/i18n");
12
11
  var _escapeHtml = require("@wordpress/escape-html");
13
12
  var _warning = _interopRequireDefault(require("@wordpress/warning"));
14
13
  var _context = require("../../context");
@@ -16,6 +15,7 @@ var _useCx = require("../../utils/hooks/use-cx");
16
15
  var _view = require("../../view");
17
16
  var _context2 = require("../context");
18
17
  var styles = _interopRequireWildcard(require("../styles"));
18
+ var _useScreenAnimatePresence = require("./use-screen-animate-presence");
19
19
  var _jsxRuntime = require("react/jsx-runtime");
20
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
21
21
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,23 +33,33 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
33
33
 
34
34
  function UnconnectedNavigatorScreen(props, forwardedRef) {
35
35
  if (!/^\//.test(props.path)) {
36
- globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.') : void 0;
36
+ globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.') : void 0;
37
37
  }
38
38
  const screenId = (0, _element.useId)();
39
39
  const {
40
40
  children,
41
41
  className,
42
42
  path,
43
+ onAnimationEnd: onAnimationEndProp,
43
44
  ...otherProps
44
- } = (0, _context.useContextSystem)(props, 'NavigatorScreen');
45
+ } = (0, _context.useContextSystem)(props, 'Navigator.Screen');
45
46
  const {
46
47
  location,
47
48
  match,
48
49
  addScreen,
49
50
  removeScreen
50
51
  } = (0, _element.useContext)(_context2.NavigatorContext);
52
+ const {
53
+ isInitial,
54
+ isBack,
55
+ focusTargetSelector,
56
+ skipFocus
57
+ } = location;
51
58
  const isMatch = match === screenId;
52
59
  const wrapperRef = (0, _element.useRef)(null);
60
+ const skipAnimationAndFocusRestoration = !!isInitial && !isBack;
61
+
62
+ // Register / unregister screen with the navigator context.
53
63
  (0, _element.useEffect)(() => {
54
64
  const screen = {
55
65
  id: screenId,
@@ -58,101 +68,69 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
58
68
  addScreen(screen);
59
69
  return () => removeScreen(screen);
60
70
  }, [screenId, path, addScreen, removeScreen]);
61
- const isRTL = (0, _i18n.isRTL)();
71
+
72
+ // Animation.
62
73
  const {
63
- isInitial,
64
- isBack
65
- } = location;
66
- const cx = (0, _useCx.useCx)();
67
- const classes = (0, _element.useMemo)(() => cx(styles.navigatorScreen({
68
- isInitial,
74
+ animationStyles,
75
+ shouldRenderScreen,
76
+ screenProps
77
+ } = (0, _useScreenAnimatePresence.useScreenAnimatePresence)({
78
+ isMatch,
69
79
  isBack,
70
- isRTL
71
- }), className), [className, cx, isInitial, isBack, isRTL]);
80
+ onAnimationEnd: onAnimationEndProp,
81
+ skipAnimation: skipAnimationAndFocusRestoration
82
+ });
83
+ const cx = (0, _useCx.useCx)();
84
+ const classes = (0, _element.useMemo)(() => cx(styles.navigatorScreen, animationStyles, className), [className, cx, animationStyles]);
85
+
86
+ // Focus restoration
72
87
  const locationRef = (0, _element.useRef)(location);
73
88
  (0, _element.useEffect)(() => {
74
89
  locationRef.current = location;
75
90
  }, [location]);
76
-
77
- // Focus restoration
78
- const isInitialLocation = location.isInitial && !location.isBack;
79
91
  (0, _element.useEffect)(() => {
92
+ const wrapperEl = wrapperRef.current;
80
93
  // Only attempt to restore focus:
81
94
  // - if the current location is not the initial one (to avoid moving focus on page load)
82
95
  // - when the screen becomes visible
83
96
  // - if the wrapper ref has been assigned
84
97
  // - if focus hasn't already been restored for the current location
85
98
  // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
86
- if (isInitialLocation || !isMatch || !wrapperRef.current || locationRef.current.hasRestoredFocus || location.skipFocus) {
99
+ if (skipAnimationAndFocusRestoration || !isMatch || !wrapperEl || locationRef.current.hasRestoredFocus || skipFocus) {
87
100
  return;
88
101
  }
89
- const activeElement = wrapperRef.current.ownerDocument.activeElement;
102
+ const activeElement = wrapperEl.ownerDocument.activeElement;
90
103
 
91
104
  // If an element is already focused within the wrapper do not focus the
92
105
  // element. This prevents inputs or buttons from losing focus unnecessarily.
93
- if (wrapperRef.current.contains(activeElement)) {
106
+ if (wrapperEl.contains(activeElement)) {
94
107
  return;
95
108
  }
96
109
  let elementToFocus = null;
97
110
 
98
111
  // When navigating back, if a selector is provided, use it to look for the
99
112
  // target element (assumed to be a node inside the current NavigatorScreen)
100
- if (location.isBack && location.focusTargetSelector) {
101
- elementToFocus = wrapperRef.current.querySelector(location.focusTargetSelector);
113
+ if (isBack && focusTargetSelector) {
114
+ elementToFocus = wrapperEl.querySelector(focusTargetSelector);
102
115
  }
103
116
 
104
117
  // If the previous query didn't run or find any element to focus, fallback
105
118
  // to the first tabbable element in the screen (or the screen itself).
106
119
  if (!elementToFocus) {
107
- const [firstTabbable] = _dom.focus.tabbable.find(wrapperRef.current);
108
- elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
120
+ const [firstTabbable] = _dom.focus.tabbable.find(wrapperEl);
121
+ elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperEl;
109
122
  }
110
123
  locationRef.current.hasRestoredFocus = true;
111
124
  elementToFocus.focus();
112
- }, [isInitialLocation, isMatch, location.isBack, location.focusTargetSelector, location.skipFocus]);
125
+ }, [skipAnimationAndFocusRestoration, isMatch, isBack, focusTargetSelector, skipFocus]);
113
126
  const mergedWrapperRef = (0, _compose.useMergeRefs)([forwardedRef, wrapperRef]);
114
- return isMatch ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
127
+ return shouldRenderScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
115
128
  ref: mergedWrapperRef,
116
129
  className: classes,
130
+ ...screenProps,
117
131
  ...otherProps,
118
132
  children: children
119
133
  }) : null;
120
134
  }
121
-
122
- /**
123
- * The `NavigatorScreen` component represents a single view/screen/panel and
124
- * should be used in combination with the `NavigatorProvider`, the
125
- * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
126
- * hook).
127
- *
128
- * @example
129
- * ```jsx
130
- * import {
131
- * __experimentalNavigatorProvider as NavigatorProvider,
132
- * __experimentalNavigatorScreen as NavigatorScreen,
133
- * __experimentalNavigatorButton as NavigatorButton,
134
- * __experimentalNavigatorBackButton as NavigatorBackButton,
135
- * } from '@wordpress/components';
136
- *
137
- * const MyNavigation = () => (
138
- * <NavigatorProvider initialPath="/">
139
- * <NavigatorScreen path="/">
140
- * <p>This is the home screen.</p>
141
- * <NavigatorButton path="/child">
142
- * Navigate to child screen.
143
- * </NavigatorButton>
144
- * </NavigatorScreen>
145
- *
146
- * <NavigatorScreen path="/child">
147
- * <p>This is the child screen.</p>
148
- * <NavigatorBackButton>
149
- * Go back
150
- * </NavigatorBackButton>
151
- * </NavigatorScreen>
152
- * </NavigatorProvider>
153
- * );
154
- * ```
155
- */
156
- const NavigatorScreen = exports.NavigatorScreen = (0, _context.contextConnect)(UnconnectedNavigatorScreen, 'NavigatorScreen');
157
- var _default = exports.default = NavigatorScreen;
135
+ const NavigatorScreen = exports.NavigatorScreen = (0, _context.contextConnect)(UnconnectedNavigatorScreen, 'Navigator.Screen');
158
136
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_dom","require","_element","_compose","_i18n","_escapeHtml","_warning","_interopRequireDefault","_context","_useCx","_view","_context2","styles","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedNavigatorScreen","props","forwardedRef","test","path","globalThis","SCRIPT_DEBUG","warning","screenId","useId","children","className","otherProps","useContextSystem","location","match","addScreen","removeScreen","useContext","NavigatorContext","isMatch","wrapperRef","useRef","useEffect","screen","id","escapeAttribute","isRTL","isRTLFn","isInitial","isBack","cx","useCx","classes","useMemo","navigatorScreen","locationRef","current","isInitialLocation","hasRestoredFocus","skipFocus","activeElement","ownerDocument","contains","elementToFocus","focusTargetSelector","querySelector","firstTabbable","focus","tabbable","find","mergedWrapperRef","useMergeRefs","jsx","View","ref","NavigatorScreen","exports","contextConnect","_default"],"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseId,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\nimport { escapeAttribute } from '@wordpress/escape-html';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport type { NavigatorScreenProps } from '../types';\n\nfunction UnconnectedNavigatorScreen(\n\tprops: WordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tif ( ! /^\\//.test( props.path ) ) {\n\t\twarning(\n\t\t\t'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'\n\t\t);\n\t}\n\n\tconst screenId = useId();\n\tconst { children, className, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst { location, match, addScreen, removeScreen } =\n\t\tuseContext( NavigatorContext );\n\tconst isMatch = match === screenId;\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\n\tuseEffect( () => {\n\t\tconst screen = {\n\t\t\tid: screenId,\n\t\t\tpath: escapeAttribute( path ),\n\t\t};\n\t\taddScreen( screen );\n\t\treturn () => removeScreen( screen );\n\t}, [ screenId, path, addScreen, removeScreen ] );\n\n\tconst isRTL = isRTLFn();\n\tconst { isInitial, isBack } = location;\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.navigatorScreen( {\n\t\t\t\t\tisInitial,\n\t\t\t\t\tisBack,\n\t\t\t\t\tisRTL,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isInitial, isBack, isRTL ]\n\t);\n\n\tconst locationRef = useRef( location );\n\n\tuseEffect( () => {\n\t\tlocationRef.current = location;\n\t}, [ location ] );\n\n\t// Focus restoration\n\tconst isInitialLocation = location.isInitial && ! location.isBack;\n\tuseEffect( () => {\n\t\t// Only attempt to restore focus:\n\t\t// - if the current location is not the initial one (to avoid moving focus on page load)\n\t\t// - when the screen becomes visible\n\t\t// - if the wrapper ref has been assigned\n\t\t// - if focus hasn't already been restored for the current location\n\t\t// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.\n\t\tif (\n\t\t\tisInitialLocation ||\n\t\t\t! isMatch ||\n\t\t\t! wrapperRef.current ||\n\t\t\tlocationRef.current.hasRestoredFocus ||\n\t\t\tlocation.skipFocus\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = wrapperRef.current.ownerDocument.activeElement;\n\n\t\t// If an element is already focused within the wrapper do not focus the\n\t\t// element. This prevents inputs or buttons from losing focus unnecessarily.\n\t\tif ( wrapperRef.current.contains( activeElement ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet elementToFocus: HTMLElement | null = null;\n\n\t\t// When navigating back, if a selector is provided, use it to look for the\n\t\t// target element (assumed to be a node inside the current NavigatorScreen)\n\t\tif ( location.isBack && location.focusTargetSelector ) {\n\t\t\telementToFocus = wrapperRef.current.querySelector(\n\t\t\t\tlocation.focusTargetSelector\n\t\t\t);\n\t\t}\n\n\t\t// If the previous query didn't run or find any element to focus, fallback\n\t\t// to the first tabbable element in the screen (or the screen itself).\n\t\tif ( ! elementToFocus ) {\n\t\t\tconst [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );\n\t\t\telementToFocus = firstTabbable ?? wrapperRef.current;\n\t\t}\n\n\t\tlocationRef.current.hasRestoredFocus = true;\n\t\telementToFocus.focus();\n\t}, [\n\t\tisInitialLocation,\n\t\tisMatch,\n\t\tlocation.isBack,\n\t\tlocation.focusTargetSelector,\n\t\tlocation.skipFocus,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\treturn isMatch ? (\n\t\t<View ref={ mergedWrapperRef } className={ classes } { ...otherProps }>\n\t\t\t{ children }\n\t\t</View>\n\t) : null;\n}\n\n/**\n * The `NavigatorScreen` component represents a single view/screen/panel and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorScreen = contextConnect(\n\tUnconnectedNavigatorScreen,\n\t'NavigatorScreen'\n);\n\nexport default NavigatorScreen;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_dom","require","_element","_compose","_escapeHtml","_warning","_interopRequireDefault","_context","_useCx","_view","_context2","styles","_interopRequireWildcard","_useScreenAnimatePresence","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedNavigatorScreen","props","forwardedRef","test","path","globalThis","SCRIPT_DEBUG","warning","screenId","useId","children","className","onAnimationEnd","onAnimationEndProp","otherProps","useContextSystem","location","match","addScreen","removeScreen","useContext","NavigatorContext","isInitial","isBack","focusTargetSelector","skipFocus","isMatch","wrapperRef","useRef","skipAnimationAndFocusRestoration","useEffect","screen","id","escapeAttribute","animationStyles","shouldRenderScreen","screenProps","useScreenAnimatePresence","skipAnimation","cx","useCx","classes","useMemo","navigatorScreen","locationRef","current","wrapperEl","hasRestoredFocus","activeElement","ownerDocument","contains","elementToFocus","querySelector","firstTabbable","focus","tabbable","find","mergedWrapperRef","useMergeRefs","jsx","View","ref","NavigatorScreen","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseId,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { escapeAttribute } from '@wordpress/escape-html';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport type { NavigatorScreenProps } from '../types';\nimport { useScreenAnimatePresence } from './use-screen-animate-presence';\n\nfunction UnconnectedNavigatorScreen(\n\tprops: WordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tif ( ! /^\\//.test( props.path ) ) {\n\t\twarning(\n\t\t\t'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'\n\t\t);\n\t}\n\n\tconst screenId = useId();\n\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tpath,\n\t\tonAnimationEnd: onAnimationEndProp,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.Screen' );\n\n\tconst { location, match, addScreen, removeScreen } =\n\t\tuseContext( NavigatorContext );\n\tconst { isInitial, isBack, focusTargetSelector, skipFocus } = location;\n\n\tconst isMatch = match === screenId;\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\tconst skipAnimationAndFocusRestoration = !! isInitial && ! isBack;\n\n\t// Register / unregister screen with the navigator context.\n\tuseEffect( () => {\n\t\tconst screen = {\n\t\t\tid: screenId,\n\t\t\tpath: escapeAttribute( path ),\n\t\t};\n\t\taddScreen( screen );\n\t\treturn () => removeScreen( screen );\n\t}, [ screenId, path, addScreen, removeScreen ] );\n\n\t// Animation.\n\tconst { animationStyles, shouldRenderScreen, screenProps } =\n\t\tuseScreenAnimatePresence( {\n\t\t\tisMatch,\n\t\t\tisBack,\n\t\t\tonAnimationEnd: onAnimationEndProp,\n\t\t\tskipAnimation: skipAnimationAndFocusRestoration,\n\t\t} );\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() => cx( styles.navigatorScreen, animationStyles, className ),\n\t\t[ className, cx, animationStyles ]\n\t);\n\n\t// Focus restoration\n\tconst locationRef = useRef( location );\n\tuseEffect( () => {\n\t\tlocationRef.current = location;\n\t}, [ location ] );\n\tuseEffect( () => {\n\t\tconst wrapperEl = wrapperRef.current;\n\t\t// Only attempt to restore focus:\n\t\t// - if the current location is not the initial one (to avoid moving focus on page load)\n\t\t// - when the screen becomes visible\n\t\t// - if the wrapper ref has been assigned\n\t\t// - if focus hasn't already been restored for the current location\n\t\t// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.\n\t\tif (\n\t\t\tskipAnimationAndFocusRestoration ||\n\t\t\t! isMatch ||\n\t\t\t! wrapperEl ||\n\t\t\tlocationRef.current.hasRestoredFocus ||\n\t\t\tskipFocus\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = wrapperEl.ownerDocument.activeElement;\n\n\t\t// If an element is already focused within the wrapper do not focus the\n\t\t// element. This prevents inputs or buttons from losing focus unnecessarily.\n\t\tif ( wrapperEl.contains( activeElement ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet elementToFocus: HTMLElement | null = null;\n\n\t\t// When navigating back, if a selector is provided, use it to look for the\n\t\t// target element (assumed to be a node inside the current NavigatorScreen)\n\t\tif ( isBack && focusTargetSelector ) {\n\t\t\telementToFocus = wrapperEl.querySelector( focusTargetSelector );\n\t\t}\n\n\t\t// If the previous query didn't run or find any element to focus, fallback\n\t\t// to the first tabbable element in the screen (or the screen itself).\n\t\tif ( ! elementToFocus ) {\n\t\t\tconst [ firstTabbable ] = focus.tabbable.find( wrapperEl );\n\t\t\telementToFocus = firstTabbable ?? wrapperEl;\n\t\t}\n\n\t\tlocationRef.current.hasRestoredFocus = true;\n\t\telementToFocus.focus();\n\t}, [\n\t\tskipAnimationAndFocusRestoration,\n\t\tisMatch,\n\t\tisBack,\n\t\tfocusTargetSelector,\n\t\tskipFocus,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\treturn shouldRenderScreen ? (\n\t\t<View\n\t\t\tref={ mergedWrapperRef }\n\t\t\tclassName={ classes }\n\t\t\t{ ...screenProps }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</View>\n\t) : null;\n}\n\nexport const NavigatorScreen = contextConnect(\n\tUnconnectedNavigatorScreen,\n\t'Navigator.Screen'\n);\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,114 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useScreenAnimatePresence = useScreenAnimatePresence;
7
+ var _element = require("@wordpress/element");
8
+ var _compose = require("@wordpress/compose");
9
+ var _i18n = require("@wordpress/i18n");
10
+ var styles = _interopRequireWildcard(require("../styles"));
11
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
12
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
13
+ /**
14
+ * WordPress dependencies
15
+ */
16
+
17
+ /**
18
+ * Internal dependencies
19
+ */
20
+
21
+ // Possible values:
22
+ // - 'INITIAL': the initial state
23
+ // - 'ANIMATING_IN': start enter animation
24
+ // - 'IN': enter animation has ended
25
+ // - 'ANIMATING_OUT': start exit animation
26
+ // - 'OUT': the exit animation has ended
27
+
28
+ // Allow an extra 20% of the total animation duration to account for potential
29
+ // event loop delays.
30
+ const ANIMATION_TIMEOUT_MARGIN = 1.2;
31
+ const isEnterAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_IN' && animationName === styles.ANIMATION_END_NAMES[animationDirection].in;
32
+ const isExitAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_OUT' && animationName === styles.ANIMATION_END_NAMES[animationDirection].out;
33
+ function useScreenAnimatePresence({
34
+ isMatch,
35
+ skipAnimation,
36
+ isBack,
37
+ onAnimationEnd
38
+ }) {
39
+ const isRTL = (0, _i18n.isRTL)();
40
+ const prefersReducedMotion = (0, _compose.useReducedMotion)();
41
+ const [animationStatus, setAnimationStatus] = (0, _element.useState)('INITIAL');
42
+
43
+ // Start enter and exit animations when the screen is selected or deselected.
44
+ // The animation status is set to `IN` or `OUT` immediately if the animation
45
+ // should be skipped.
46
+ const becameSelected = animationStatus !== 'ANIMATING_IN' && animationStatus !== 'IN' && isMatch;
47
+ const becameUnselected = animationStatus !== 'ANIMATING_OUT' && animationStatus !== 'OUT' && !isMatch;
48
+ (0, _element.useLayoutEffect)(() => {
49
+ if (becameSelected) {
50
+ setAnimationStatus(skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN');
51
+ } else if (becameUnselected) {
52
+ setAnimationStatus(skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT');
53
+ }
54
+ }, [becameSelected, becameUnselected, skipAnimation, prefersReducedMotion]);
55
+
56
+ // Animation attributes (derived state).
57
+ const animationDirection = isRTL && isBack || !isRTL && !isBack ? 'end' : 'start';
58
+ const isAnimatingIn = animationStatus === 'ANIMATING_IN';
59
+ const isAnimatingOut = animationStatus === 'ANIMATING_OUT';
60
+ let animationType;
61
+ if (isAnimatingIn) {
62
+ animationType = 'in';
63
+ } else if (isAnimatingOut) {
64
+ animationType = 'out';
65
+ }
66
+ const onScreenAnimationEnd = (0, _element.useCallback)(e => {
67
+ onAnimationEnd?.(e);
68
+ if (isExitAnimation(animationDirection, animationStatus, e.animationName)) {
69
+ // When the exit animation ends on an unselected screen, set the
70
+ // status to 'OUT' to remove the screen contents from the DOM.
71
+ setAnimationStatus('OUT');
72
+ } else if (isEnterAnimation(animationDirection, animationStatus, e.animationName)) {
73
+ // When the enter animation ends on a selected screen, set the
74
+ // status to 'IN' to ensure the screen is rendered in the DOM.
75
+ setAnimationStatus('IN');
76
+ }
77
+ }, [onAnimationEnd, animationStatus, animationDirection]);
78
+
79
+ // Fallback timeout to ensure that the logic is applied even if the
80
+ // `animationend` event is not triggered.
81
+ (0, _element.useEffect)(() => {
82
+ let animationTimeout;
83
+ if (isAnimatingOut) {
84
+ animationTimeout = window.setTimeout(() => {
85
+ setAnimationStatus('OUT');
86
+ animationTimeout = undefined;
87
+ }, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN);
88
+ } else if (isAnimatingIn) {
89
+ animationTimeout = window.setTimeout(() => {
90
+ setAnimationStatus('IN');
91
+ animationTimeout = undefined;
92
+ }, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN);
93
+ }
94
+ return () => {
95
+ if (animationTimeout) {
96
+ window.clearTimeout(animationTimeout);
97
+ animationTimeout = undefined;
98
+ }
99
+ };
100
+ }, [isAnimatingOut, isAnimatingIn]);
101
+ return {
102
+ animationStyles: styles.navigatorScreenAnimation,
103
+ // Render the screen's contents in the DOM not only when the screen is
104
+ // selected, but also while it is animating out.
105
+ shouldRenderScreen: isMatch || animationStatus === 'IN' || animationStatus === 'ANIMATING_OUT',
106
+ screenProps: {
107
+ onAnimationEnd: onScreenAnimationEnd,
108
+ 'data-animation-direction': animationDirection,
109
+ 'data-animation-type': animationType,
110
+ 'data-skip-animation': skipAnimation || undefined
111
+ }
112
+ };
113
+ }
114
+ //# sourceMappingURL=use-screen-animate-presence.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_element","require","_compose","_i18n","styles","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ANIMATION_TIMEOUT_MARGIN","isEnterAnimation","animationDirection","animationStatus","animationName","ANIMATION_END_NAMES","in","isExitAnimation","out","useScreenAnimatePresence","isMatch","skipAnimation","isBack","onAnimationEnd","isRTL","isRTLFn","prefersReducedMotion","useReducedMotion","setAnimationStatus","useState","becameSelected","becameUnselected","useLayoutEffect","isAnimatingIn","isAnimatingOut","animationType","onScreenAnimationEnd","useCallback","useEffect","animationTimeout","window","setTimeout","undefined","TOTAL_ANIMATION_DURATION","OUT","IN","clearTimeout","animationStyles","navigatorScreenAnimation","shouldRenderScreen","screenProps"],"sources":["@wordpress/components/src/navigator/navigator-screen/use-screen-animate-presence.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\n\n// Possible values:\n// - 'INITIAL': the initial state\n// - 'ANIMATING_IN': start enter animation\n// - 'IN': enter animation has ended\n// - 'ANIMATING_OUT': start exit animation\n// - 'OUT': the exit animation has ended\ntype AnimationStatus =\n\t| 'INITIAL'\n\t| 'ANIMATING_IN'\n\t| 'IN'\n\t| 'ANIMATING_OUT'\n\t| 'OUT';\n\n// Allow an extra 20% of the total animation duration to account for potential\n// event loop delays.\nconst ANIMATION_TIMEOUT_MARGIN = 1.2;\n\nconst isEnterAnimation = (\n\tanimationDirection: 'end' | 'start',\n\tanimationStatus: AnimationStatus,\n\tanimationName: string\n) =>\n\tanimationStatus === 'ANIMATING_IN' &&\n\tanimationName === styles.ANIMATION_END_NAMES[ animationDirection ].in;\n\nconst isExitAnimation = (\n\tanimationDirection: 'end' | 'start',\n\tanimationStatus: AnimationStatus,\n\tanimationName: string\n) =>\n\tanimationStatus === 'ANIMATING_OUT' &&\n\tanimationName === styles.ANIMATION_END_NAMES[ animationDirection ].out;\n\nexport function useScreenAnimatePresence( {\n\tisMatch,\n\tskipAnimation,\n\tisBack,\n\tonAnimationEnd,\n}: {\n\tisMatch: boolean;\n\tskipAnimation: boolean;\n\tisBack?: boolean;\n\tonAnimationEnd?: React.AnimationEventHandler< Element >;\n} ) {\n\tconst isRTL = isRTLFn();\n\tconst prefersReducedMotion = useReducedMotion();\n\n\tconst [ animationStatus, setAnimationStatus ] =\n\t\tuseState< AnimationStatus >( 'INITIAL' );\n\n\t// Start enter and exit animations when the screen is selected or deselected.\n\t// The animation status is set to `IN` or `OUT` immediately if the animation\n\t// should be skipped.\n\tconst becameSelected =\n\t\tanimationStatus !== 'ANIMATING_IN' &&\n\t\tanimationStatus !== 'IN' &&\n\t\tisMatch;\n\tconst becameUnselected =\n\t\tanimationStatus !== 'ANIMATING_OUT' &&\n\t\tanimationStatus !== 'OUT' &&\n\t\t! isMatch;\n\tuseLayoutEffect( () => {\n\t\tif ( becameSelected ) {\n\t\t\tsetAnimationStatus(\n\t\t\t\tskipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN'\n\t\t\t);\n\t\t} else if ( becameUnselected ) {\n\t\t\tsetAnimationStatus(\n\t\t\t\tskipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT'\n\t\t\t);\n\t\t}\n\t}, [\n\t\tbecameSelected,\n\t\tbecameUnselected,\n\t\tskipAnimation,\n\t\tprefersReducedMotion,\n\t] );\n\n\t// Animation attributes (derived state).\n\tconst animationDirection =\n\t\t( isRTL && isBack ) || ( ! isRTL && ! isBack ) ? 'end' : 'start';\n\tconst isAnimatingIn = animationStatus === 'ANIMATING_IN';\n\tconst isAnimatingOut = animationStatus === 'ANIMATING_OUT';\n\tlet animationType: 'in' | 'out' | undefined;\n\tif ( isAnimatingIn ) {\n\t\tanimationType = 'in';\n\t} else if ( isAnimatingOut ) {\n\t\tanimationType = 'out';\n\t}\n\n\tconst onScreenAnimationEnd = useCallback(\n\t\t( e: React.AnimationEvent< HTMLElement > ) => {\n\t\t\tonAnimationEnd?.( e );\n\n\t\t\tif (\n\t\t\t\tisExitAnimation(\n\t\t\t\t\tanimationDirection,\n\t\t\t\t\tanimationStatus,\n\t\t\t\t\te.animationName\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\t// When the exit animation ends on an unselected screen, set the\n\t\t\t\t// status to 'OUT' to remove the screen contents from the DOM.\n\t\t\t\tsetAnimationStatus( 'OUT' );\n\t\t\t} else if (\n\t\t\t\tisEnterAnimation(\n\t\t\t\t\tanimationDirection,\n\t\t\t\t\tanimationStatus,\n\t\t\t\t\te.animationName\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\t// When the enter animation ends on a selected screen, set the\n\t\t\t\t// status to 'IN' to ensure the screen is rendered in the DOM.\n\t\t\t\tsetAnimationStatus( 'IN' );\n\t\t\t}\n\t\t},\n\t\t[ onAnimationEnd, animationStatus, animationDirection ]\n\t);\n\n\t// Fallback timeout to ensure that the logic is applied even if the\n\t// `animationend` event is not triggered.\n\tuseEffect( () => {\n\t\tlet animationTimeout: number | undefined;\n\n\t\tif ( isAnimatingOut ) {\n\t\t\tanimationTimeout = window.setTimeout( () => {\n\t\t\t\tsetAnimationStatus( 'OUT' );\n\t\t\t\tanimationTimeout = undefined;\n\t\t\t}, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN );\n\t\t} else if ( isAnimatingIn ) {\n\t\t\tanimationTimeout = window.setTimeout( () => {\n\t\t\t\tsetAnimationStatus( 'IN' );\n\t\t\t\tanimationTimeout = undefined;\n\t\t\t}, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( animationTimeout ) {\n\t\t\t\twindow.clearTimeout( animationTimeout );\n\t\t\t\tanimationTimeout = undefined;\n\t\t\t}\n\t\t};\n\t}, [ isAnimatingOut, isAnimatingIn ] );\n\n\treturn {\n\t\tanimationStyles: styles.navigatorScreenAnimation,\n\t\t// Render the screen's contents in the DOM not only when the screen is\n\t\t// selected, but also while it is animating out.\n\t\tshouldRenderScreen:\n\t\t\tisMatch ||\n\t\t\tanimationStatus === 'IN' ||\n\t\t\tanimationStatus === 'ANIMATING_OUT',\n\t\tscreenProps: {\n\t\t\tonAnimationEnd: onScreenAnimationEnd,\n\t\t\t'data-animation-direction': animationDirection,\n\t\t\t'data-animation-type': animationType,\n\t\t\t'data-skip-animation': skipAnimation || undefined,\n\t\t},\n\t} as const;\n}\n"],"mappings":"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","ignoreList":[]}