@atlaskit/navigation-system 7.3.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (347) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/constellation/layout/custom-theming.mdx +1 -1
  3. package/dist/cjs/context/skip-links/skip-links-context.js +2 -54
  4. package/dist/cjs/context/skip-links/use-skip-link-internal.js +45 -0
  5. package/dist/cjs/context/skip-links/use-skip-link.js +17 -0
  6. package/dist/cjs/context/top-nav-start/top-nav-start-attach-ref.js +10 -0
  7. package/dist/cjs/context/top-nav-start/top-nav-start-context-provider.js +4 -3
  8. package/dist/cjs/context/top-nav-start/top-nav-start-element.js +8 -0
  9. package/dist/cjs/entry-points/experimental/top-nav-button.js +8 -5
  10. package/dist/cjs/entry-points/layout/skip-links.js +4 -4
  11. package/dist/cjs/ui/page-layout/aside.js +6 -6
  12. package/dist/cjs/ui/page-layout/banner.js +8 -7
  13. package/dist/cjs/ui/page-layout/{hoist-utils.js → dangerously-hoist-css-var-to-document-root.js} +6 -25
  14. package/dist/cjs/ui/page-layout/hoist-css-var-to-local-grid.js +22 -0
  15. package/dist/cjs/ui/page-layout/main/main.js +4 -4
  16. package/dist/cjs/ui/page-layout/panel-splitter/get-pixel-width.js +13 -0
  17. package/dist/cjs/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js} +1 -12
  18. package/dist/cjs/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.js +10 -0
  19. package/dist/cjs/ui/page-layout/panel-splitter/{context.js → on-double-click-context.js} +1 -9
  20. package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter-context.js +14 -0
  21. package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.js +7 -0
  22. package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js +17 -19
  23. package/dist/cjs/ui/page-layout/panel-splitter/provider.js +2 -2
  24. package/dist/cjs/ui/page-layout/panel-splitter/side-nav-panel-splitter.js +4 -3
  25. package/dist/cjs/ui/page-layout/panel.js +8 -8
  26. package/dist/cjs/ui/page-layout/ribbon.js +4 -4
  27. package/dist/cjs/ui/page-layout/root.js +3 -3
  28. package/dist/cjs/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js +3 -25
  29. package/dist/cjs/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.js +16 -0
  30. package/dist/cjs/ui/page-layout/side-nav/set-side-nav-visibility-state.js +10 -0
  31. package/dist/cjs/ui/page-layout/side-nav/{element-context.js → side-nav-element-provider.js} +2 -14
  32. package/dist/cjs/ui/page-layout/side-nav/side-nav-ref-context.js +10 -0
  33. package/dist/cjs/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.js +10 -0
  34. package/dist/cjs/ui/page-layout/side-nav/side-nav-toggle-button-element.js +12 -0
  35. package/dist/cjs/ui/page-layout/side-nav/side-nav-visibility-state.js +12 -0
  36. package/dist/cjs/ui/page-layout/side-nav/side-nav.js +19 -18
  37. package/dist/cjs/ui/page-layout/side-nav/toggle-button-provider.js +4 -3
  38. package/dist/cjs/ui/page-layout/side-nav/toggle-button.js +8 -8
  39. package/dist/cjs/ui/page-layout/side-nav/use-expand-side-nav.js +2 -2
  40. package/dist/cjs/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js +15 -0
  41. package/dist/cjs/ui/page-layout/side-nav/use-side-nav-ref.js +16 -0
  42. package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +2 -2
  43. package/dist/cjs/ui/page-layout/side-nav/use-side-nav-visibility.js +2 -2
  44. package/dist/cjs/ui/page-layout/side-nav/use-toggle-side-nav.js +2 -2
  45. package/dist/cjs/ui/page-layout/side-nav/visibility-provider.js +4 -3
  46. package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js +2 -2
  47. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +5 -5
  48. package/dist/cjs/ui/page-layout/top-nav/top-nav.js +17 -15
  49. package/dist/cjs/ui/page-layout/{id-utils.js → use-layout-id.js} +2 -14
  50. package/dist/cjs/ui/page-layout/use-resizing-width-css-var-on-root-element.js +2 -2
  51. package/dist/cjs/ui/page-layout/use-skip-link-id.js +17 -0
  52. package/dist/cjs/ui/top-nav-items/app-switcher.js +2 -2
  53. package/dist/cjs/ui/top-nav-items/chat-button.js +2 -2
  54. package/dist/cjs/ui/top-nav-items/create-button.js +2 -2
  55. package/dist/cjs/ui/top-nav-items/end-item.js +2 -2
  56. package/dist/cjs/ui/top-nav-items/log-in.js +2 -2
  57. package/dist/cjs/ui/top-nav-items/search.js +2 -2
  58. package/dist/cjs/ui/top-nav-items/themed/button.js +12 -358
  59. package/dist/cjs/ui/top-nav-items/themed/get-custom-theme-styles.js +10 -10
  60. package/dist/cjs/ui/top-nav-items/themed/get-primitives-spread-props.js +39 -0
  61. package/dist/cjs/ui/top-nav-items/themed/icon-button.js +21 -0
  62. package/dist/cjs/ui/top-nav-items/themed/link-button.js +21 -0
  63. package/dist/cjs/ui/top-nav-items/themed/link-icon-button.js +21 -0
  64. package/dist/cjs/ui/top-nav-items/themed/palette-rgba.js +20 -0
  65. package/dist/cjs/ui/top-nav-items/themed/palette.js +1 -21
  66. package/dist/cjs/ui/top-nav-items/themed/search.js +1 -2
  67. package/dist/cjs/ui/top-nav-items/themed/{button.compiled.css → themed-anchor.compiled.css} +0 -1
  68. package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js +76 -0
  69. package/dist/cjs/ui/top-nav-items/themed/themed-button.compiled.css +2 -0
  70. package/dist/cjs/ui/top-nav-items/themed/themed-button.js +40 -0
  71. package/dist/cjs/ui/top-nav-items/themed/themed-icon-button.js +85 -0
  72. package/dist/cjs/ui/top-nav-items/themed/themed-link-button.compiled.css +2 -0
  73. package/dist/cjs/ui/top-nav-items/themed/themed-link-button.js +45 -0
  74. package/dist/cjs/ui/top-nav-items/themed/themed-link-icon-button.js +83 -0
  75. package/dist/{esm/ui/top-nav-items/themed/button.compiled.css → cjs/ui/top-nav-items/themed/themed-pressable.compiled.css} +0 -1
  76. package/dist/cjs/ui/top-nav-items/themed/themed-pressable.js +64 -0
  77. package/dist/cjs/ui/top-nav-items/themed/types.js +5 -0
  78. package/dist/cjs/ui/top-nav-items/themed/use-custom-theme-new.js +53 -0
  79. package/dist/cjs/ui/top-nav-items/themed/use-custom-theme.js +0 -41
  80. package/dist/es2019/context/skip-links/skip-links-context.js +2 -54
  81. package/dist/es2019/context/skip-links/use-skip-link-internal.js +41 -0
  82. package/dist/es2019/context/skip-links/use-skip-link.js +12 -0
  83. package/dist/es2019/context/top-nav-start/top-nav-start-attach-ref.js +3 -0
  84. package/dist/es2019/context/top-nav-start/top-nav-start-context-provider.js +2 -1
  85. package/dist/es2019/context/top-nav-start/top-nav-start-element.js +2 -0
  86. package/dist/es2019/entry-points/experimental/top-nav-button.js +4 -1
  87. package/dist/es2019/entry-points/layout/skip-links.js +2 -2
  88. package/dist/es2019/ui/page-layout/aside.js +3 -3
  89. package/dist/es2019/ui/page-layout/banner.js +4 -3
  90. package/dist/es2019/ui/page-layout/{hoist-utils.js → dangerously-hoist-css-var-to-document-root.js} +0 -19
  91. package/dist/es2019/ui/page-layout/hoist-css-var-to-local-grid.js +15 -0
  92. package/dist/es2019/ui/page-layout/main/main.js +2 -2
  93. package/dist/es2019/ui/page-layout/panel-splitter/get-pixel-width.js +7 -0
  94. package/dist/es2019/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js} +0 -11
  95. package/dist/es2019/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.js +4 -0
  96. package/dist/es2019/ui/page-layout/panel-splitter/{context.js → on-double-click-context.js} +0 -8
  97. package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter-context.js +9 -0
  98. package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.js +1 -0
  99. package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js +12 -13
  100. package/dist/es2019/ui/page-layout/panel-splitter/provider.js +1 -1
  101. package/dist/es2019/ui/page-layout/panel-splitter/side-nav-panel-splitter.js +2 -1
  102. package/dist/es2019/ui/page-layout/panel.js +4 -4
  103. package/dist/es2019/ui/page-layout/ribbon.js +2 -2
  104. package/dist/es2019/ui/page-layout/root.js +2 -2
  105. package/dist/es2019/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js +2 -22
  106. package/dist/es2019/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.js +10 -0
  107. package/dist/es2019/ui/page-layout/side-nav/set-side-nav-visibility-state.js +3 -0
  108. package/dist/es2019/ui/page-layout/side-nav/side-nav-element-provider.js +10 -0
  109. package/dist/es2019/ui/page-layout/side-nav/side-nav-ref-context.js +4 -0
  110. package/dist/es2019/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.js +3 -0
  111. package/dist/es2019/ui/page-layout/side-nav/side-nav-toggle-button-element.js +7 -0
  112. package/dist/es2019/ui/page-layout/side-nav/{visibility-context.js → side-nav-visibility-state.js} +1 -7
  113. package/dist/es2019/ui/page-layout/side-nav/side-nav.js +9 -8
  114. package/dist/es2019/ui/page-layout/side-nav/toggle-button-provider.js +2 -1
  115. package/dist/es2019/ui/page-layout/side-nav/toggle-button.js +4 -4
  116. package/dist/es2019/ui/page-layout/side-nav/use-expand-side-nav.js +1 -1
  117. package/dist/es2019/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js +10 -0
  118. package/dist/es2019/ui/page-layout/side-nav/use-side-nav-ref.js +11 -0
  119. package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -1
  120. package/dist/es2019/ui/page-layout/side-nav/use-side-nav-visibility.js +1 -1
  121. package/dist/es2019/ui/page-layout/side-nav/use-toggle-side-nav.js +1 -1
  122. package/dist/es2019/ui/page-layout/side-nav/visibility-provider.js +2 -2
  123. package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js +1 -1
  124. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +2 -2
  125. package/dist/es2019/ui/page-layout/top-nav/top-nav.js +11 -8
  126. package/dist/es2019/ui/page-layout/use-layout-id.js +15 -0
  127. package/dist/es2019/ui/page-layout/use-resizing-width-css-var-on-root-element.js +1 -1
  128. package/dist/es2019/ui/page-layout/{id-utils.js → use-skip-link-id.js} +0 -14
  129. package/dist/es2019/ui/top-nav-items/app-switcher.js +1 -1
  130. package/dist/es2019/ui/top-nav-items/chat-button.js +1 -1
  131. package/dist/es2019/ui/top-nav-items/create-button.js +1 -1
  132. package/dist/es2019/ui/top-nav-items/end-item.js +1 -1
  133. package/dist/es2019/ui/top-nav-items/log-in.js +1 -1
  134. package/dist/es2019/ui/top-nav-items/search.js +1 -1
  135. package/dist/es2019/ui/top-nav-items/themed/button.js +11 -347
  136. package/dist/es2019/ui/top-nav-items/themed/get-custom-theme-styles.js +28 -28
  137. package/dist/es2019/ui/top-nav-items/themed/get-primitives-spread-props.js +31 -0
  138. package/dist/es2019/ui/top-nav-items/themed/icon-button.js +12 -0
  139. package/dist/es2019/ui/top-nav-items/themed/link-button.js +12 -0
  140. package/dist/es2019/ui/top-nav-items/themed/link-icon-button.js +12 -0
  141. package/dist/es2019/ui/top-nav-items/themed/palette-rgba.js +14 -0
  142. package/dist/es2019/ui/top-nav-items/themed/palette.js +0 -20
  143. package/dist/es2019/ui/top-nav-items/themed/search.js +1 -2
  144. package/dist/es2019/ui/top-nav-items/themed/{button.compiled.css → themed-anchor.compiled.css} +0 -1
  145. package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js +66 -0
  146. package/dist/es2019/ui/top-nav-items/themed/themed-button.compiled.css +2 -0
  147. package/dist/es2019/ui/top-nav-items/themed/themed-button.js +30 -0
  148. package/dist/es2019/ui/top-nav-items/themed/themed-icon-button.js +72 -0
  149. package/dist/es2019/ui/top-nav-items/themed/themed-link-button.compiled.css +2 -0
  150. package/dist/es2019/ui/top-nav-items/themed/themed-link-button.js +37 -0
  151. package/dist/es2019/ui/top-nav-items/themed/themed-link-icon-button.js +73 -0
  152. package/dist/es2019/ui/top-nav-items/themed/themed-pressable.compiled.css +68 -0
  153. package/dist/es2019/ui/top-nav-items/themed/themed-pressable.js +52 -0
  154. package/dist/es2019/ui/top-nav-items/themed/types.js +1 -0
  155. package/dist/es2019/ui/top-nav-items/themed/use-custom-theme-new.js +45 -0
  156. package/dist/es2019/ui/top-nav-items/themed/use-custom-theme.js +0 -38
  157. package/dist/esm/context/skip-links/skip-links-context.js +2 -54
  158. package/dist/esm/context/skip-links/use-skip-link-internal.js +39 -0
  159. package/dist/esm/context/skip-links/use-skip-link.js +12 -0
  160. package/dist/esm/context/top-nav-start/top-nav-start-attach-ref.js +3 -0
  161. package/dist/esm/context/top-nav-start/top-nav-start-context-provider.js +2 -1
  162. package/dist/esm/context/top-nav-start/top-nav-start-element.js +2 -0
  163. package/dist/esm/entry-points/experimental/top-nav-button.js +4 -1
  164. package/dist/esm/entry-points/layout/skip-links.js +2 -2
  165. package/dist/esm/ui/page-layout/aside.js +3 -3
  166. package/dist/esm/ui/page-layout/banner.js +4 -3
  167. package/dist/esm/ui/page-layout/dangerously-hoist-css-var-to-document-root.js +31 -0
  168. package/dist/esm/ui/page-layout/hoist-css-var-to-local-grid.js +16 -0
  169. package/dist/esm/ui/page-layout/main/main.js +2 -2
  170. package/dist/esm/ui/page-layout/panel-splitter/get-pixel-width.js +7 -0
  171. package/dist/esm/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js} +0 -11
  172. package/dist/esm/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.js +4 -0
  173. package/dist/esm/ui/page-layout/panel-splitter/{context.js → on-double-click-context.js} +0 -8
  174. package/dist/esm/ui/page-layout/panel-splitter/panel-splitter-context.js +9 -0
  175. package/dist/esm/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.js +1 -0
  176. package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js +9 -10
  177. package/dist/esm/ui/page-layout/panel-splitter/provider.js +1 -1
  178. package/dist/esm/ui/page-layout/panel-splitter/side-nav-panel-splitter.js +2 -1
  179. package/dist/esm/ui/page-layout/panel.js +4 -4
  180. package/dist/esm/ui/page-layout/ribbon.js +2 -2
  181. package/dist/esm/ui/page-layout/root.js +2 -2
  182. package/dist/esm/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js +2 -21
  183. package/dist/esm/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.js +9 -0
  184. package/dist/esm/ui/page-layout/side-nav/set-side-nav-visibility-state.js +3 -0
  185. package/dist/esm/ui/page-layout/side-nav/side-nav-element-provider.js +9 -0
  186. package/dist/esm/ui/page-layout/side-nav/side-nav-ref-context.js +4 -0
  187. package/dist/esm/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.js +3 -0
  188. package/dist/esm/ui/page-layout/side-nav/side-nav-toggle-button-element.js +7 -0
  189. package/dist/esm/ui/page-layout/side-nav/{visibility-context.js → side-nav-visibility-state.js} +1 -7
  190. package/dist/esm/ui/page-layout/side-nav/side-nav.js +9 -8
  191. package/dist/esm/ui/page-layout/side-nav/toggle-button-provider.js +2 -1
  192. package/dist/esm/ui/page-layout/side-nav/toggle-button.js +4 -4
  193. package/dist/esm/ui/page-layout/side-nav/use-expand-side-nav.js +1 -1
  194. package/dist/esm/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js +10 -0
  195. package/dist/esm/ui/page-layout/side-nav/use-side-nav-ref.js +11 -0
  196. package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -1
  197. package/dist/esm/ui/page-layout/side-nav/use-side-nav-visibility.js +1 -1
  198. package/dist/esm/ui/page-layout/side-nav/use-toggle-side-nav.js +1 -1
  199. package/dist/esm/ui/page-layout/side-nav/visibility-provider.js +2 -2
  200. package/dist/esm/ui/page-layout/top-nav/top-nav-end.js +1 -1
  201. package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +2 -2
  202. package/dist/esm/ui/page-layout/top-nav/top-nav.js +11 -8
  203. package/dist/esm/ui/page-layout/{id-utils.js → use-layout-id.js} +1 -12
  204. package/dist/esm/ui/page-layout/use-resizing-width-css-var-on-root-element.js +1 -1
  205. package/dist/esm/ui/page-layout/use-skip-link-id.js +12 -0
  206. package/dist/esm/ui/top-nav-items/app-switcher.js +1 -1
  207. package/dist/esm/ui/top-nav-items/chat-button.js +1 -1
  208. package/dist/esm/ui/top-nav-items/create-button.js +1 -1
  209. package/dist/esm/ui/top-nav-items/end-item.js +1 -1
  210. package/dist/esm/ui/top-nav-items/log-in.js +1 -1
  211. package/dist/esm/ui/top-nav-items/search.js +1 -1
  212. package/dist/esm/ui/top-nav-items/themed/button.js +11 -358
  213. package/dist/esm/ui/top-nav-items/themed/get-custom-theme-styles.js +9 -9
  214. package/dist/esm/ui/top-nav-items/themed/get-primitives-spread-props.js +32 -0
  215. package/dist/esm/ui/top-nav-items/themed/icon-button.js +12 -0
  216. package/dist/esm/ui/top-nav-items/themed/link-button.js +12 -0
  217. package/dist/esm/ui/top-nav-items/themed/link-icon-button.js +12 -0
  218. package/dist/esm/ui/top-nav-items/themed/palette-rgba.js +14 -0
  219. package/dist/esm/ui/top-nav-items/themed/palette.js +0 -20
  220. package/dist/esm/ui/top-nav-items/themed/search.js +1 -2
  221. package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css +68 -0
  222. package/dist/esm/ui/top-nav-items/themed/themed-anchor.js +69 -0
  223. package/dist/esm/ui/top-nav-items/themed/themed-button.compiled.css +2 -0
  224. package/dist/esm/ui/top-nav-items/themed/themed-button.js +31 -0
  225. package/dist/esm/ui/top-nav-items/themed/themed-icon-button.js +76 -0
  226. package/dist/esm/ui/top-nav-items/themed/themed-link-button.compiled.css +2 -0
  227. package/dist/esm/ui/top-nav-items/themed/themed-link-button.js +38 -0
  228. package/dist/esm/ui/top-nav-items/themed/themed-link-icon-button.js +77 -0
  229. package/dist/esm/ui/top-nav-items/themed/themed-pressable.compiled.css +68 -0
  230. package/dist/esm/ui/top-nav-items/themed/themed-pressable.js +55 -0
  231. package/dist/esm/ui/top-nav-items/themed/types.js +1 -0
  232. package/dist/esm/ui/top-nav-items/themed/use-custom-theme-new.js +46 -0
  233. package/dist/esm/ui/top-nav-items/themed/use-custom-theme.js +0 -39
  234. package/dist/types/context/skip-links/skip-links-context.d.ts +0 -27
  235. package/dist/types/context/skip-links/use-skip-link-internal.d.ts +10 -0
  236. package/dist/types/context/skip-links/use-skip-link.d.ts +18 -0
  237. package/dist/types/context/top-nav-start/top-nav-start-attach-ref.d.ts +1 -0
  238. package/dist/types/context/top-nav-start/top-nav-start-element.d.ts +1 -0
  239. package/dist/types/entry-points/experimental/top-nav-button.d.ts +4 -1
  240. package/dist/types/entry-points/layout/skip-links.d.ts +2 -2
  241. package/dist/types/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts +8 -0
  242. package/dist/{types-ts4.5/ui/page-layout/hoist-utils.d.ts → types/ui/page-layout/hoist-css-var-to-local-grid.d.ts} +0 -11
  243. package/dist/types/ui/page-layout/panel-splitter/get-pixel-width.d.ts +4 -0
  244. package/dist/types/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts +8 -0
  245. package/dist/types/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts +9 -0
  246. package/dist/types/ui/page-layout/panel-splitter/on-double-click-context.d.ts +8 -0
  247. package/dist/{types-ts4.5/ui/page-layout/panel-splitter/context.d.ts → types/ui/page-layout/panel-splitter/panel-splitter-context.d.ts} +0 -8
  248. package/dist/types/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts +1 -0
  249. package/dist/types/ui/page-layout/panel-splitter/panel-splitter.d.ts +1 -10
  250. package/dist/types/ui/page-layout/panel-splitter/provider.d.ts +1 -1
  251. package/dist/types/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts +6 -11
  252. package/dist/types/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts +5 -0
  253. package/dist/types/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts +3 -0
  254. package/dist/types/ui/page-layout/side-nav/side-nav-element-provider.d.ts +4 -0
  255. package/dist/types/ui/page-layout/side-nav/side-nav-ref-context.d.ts +2 -0
  256. package/dist/types/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts +1 -0
  257. package/dist/types/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts +5 -0
  258. package/dist/{types-ts4.5/ui/page-layout/side-nav/visibility-context.d.ts → types/ui/page-layout/side-nav/side-nav-visibility-state.d.ts} +0 -5
  259. package/dist/types/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts +5 -0
  260. package/dist/{types-ts4.5/ui/page-layout/side-nav/element-context.d.ts → types/ui/page-layout/side-nav/use-side-nav-ref.d.ts} +1 -4
  261. package/dist/types/ui/page-layout/top-nav/top-nav.d.ts +3 -4
  262. package/dist/{types-ts4.5/ui/page-layout/id-utils.d.ts → types/ui/page-layout/use-layout-id.d.ts} +0 -5
  263. package/dist/types/ui/page-layout/use-skip-link-id.d.ts +5 -0
  264. package/dist/types/ui/top-nav-items/themed/button.d.ts +5 -126
  265. package/dist/types/ui/top-nav-items/themed/get-primitives-spread-props.d.ts +16 -0
  266. package/dist/types/ui/top-nav-items/themed/icon-button.d.ts +7 -0
  267. package/dist/types/ui/top-nav-items/themed/link-button.d.ts +3 -0
  268. package/dist/types/ui/top-nav-items/themed/link-icon-button.d.ts +7 -0
  269. package/dist/types/ui/top-nav-items/themed/palette-rgba.d.ts +14 -0
  270. package/dist/types/ui/top-nav-items/themed/palette.d.ts +0 -20
  271. package/dist/types/ui/top-nav-items/themed/themed-anchor.d.ts +32 -0
  272. package/dist/types/ui/top-nav-items/themed/themed-button.d.ts +10 -0
  273. package/dist/types/ui/top-nav-items/themed/themed-icon-button.d.ts +10 -0
  274. package/dist/types/ui/top-nav-items/themed/themed-link-button.d.ts +16 -0
  275. package/dist/types/ui/top-nav-items/themed/themed-link-icon-button.d.ts +13 -0
  276. package/dist/types/ui/top-nav-items/themed/themed-pressable.d.ts +18 -0
  277. package/dist/types/ui/top-nav-items/themed/types.d.ts +54 -0
  278. package/dist/types/ui/top-nav-items/themed/use-custom-theme-new.d.ts +20 -0
  279. package/dist/types/ui/top-nav-items/themed/use-custom-theme.d.ts +0 -11
  280. package/dist/types-ts4.5/context/skip-links/skip-links-context.d.ts +0 -27
  281. package/dist/types-ts4.5/context/skip-links/use-skip-link-internal.d.ts +10 -0
  282. package/dist/types-ts4.5/context/skip-links/use-skip-link.d.ts +18 -0
  283. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-attach-ref.d.ts +1 -0
  284. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-element.d.ts +1 -0
  285. package/dist/types-ts4.5/entry-points/experimental/top-nav-button.d.ts +4 -1
  286. package/dist/types-ts4.5/entry-points/layout/skip-links.d.ts +2 -2
  287. package/dist/types-ts4.5/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts +8 -0
  288. package/dist/{types/ui/page-layout/hoist-utils.d.ts → types-ts4.5/ui/page-layout/hoist-css-var-to-local-grid.d.ts} +0 -11
  289. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-pixel-width.d.ts +4 -0
  290. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts +8 -0
  291. package/dist/types-ts4.5/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts +9 -0
  292. package/dist/types-ts4.5/ui/page-layout/panel-splitter/on-double-click-context.d.ts +8 -0
  293. package/dist/{types/ui/page-layout/panel-splitter/context.d.ts → types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-context.d.ts} +0 -8
  294. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts +1 -0
  295. package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter.d.ts +1 -10
  296. package/dist/types-ts4.5/ui/page-layout/panel-splitter/provider.d.ts +1 -1
  297. package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts +6 -11
  298. package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts +5 -0
  299. package/dist/types-ts4.5/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts +3 -0
  300. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-element-provider.d.ts +4 -0
  301. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-ref-context.d.ts +2 -0
  302. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts +1 -0
  303. package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts +5 -0
  304. package/dist/{types/ui/page-layout/side-nav/visibility-context.d.ts → types-ts4.5/ui/page-layout/side-nav/side-nav-visibility-state.d.ts} +0 -5
  305. package/dist/types-ts4.5/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts +5 -0
  306. package/dist/{types/ui/page-layout/side-nav/element-context.d.ts → types-ts4.5/ui/page-layout/side-nav/use-side-nav-ref.d.ts} +1 -4
  307. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts +3 -4
  308. package/dist/{types/ui/page-layout/id-utils.d.ts → types-ts4.5/ui/page-layout/use-layout-id.d.ts} +0 -5
  309. package/dist/types-ts4.5/ui/page-layout/use-skip-link-id.d.ts +5 -0
  310. package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts +5 -126
  311. package/dist/types-ts4.5/ui/top-nav-items/themed/get-primitives-spread-props.d.ts +16 -0
  312. package/dist/types-ts4.5/ui/top-nav-items/themed/icon-button.d.ts +7 -0
  313. package/dist/types-ts4.5/ui/top-nav-items/themed/link-button.d.ts +3 -0
  314. package/dist/types-ts4.5/ui/top-nav-items/themed/link-icon-button.d.ts +7 -0
  315. package/dist/types-ts4.5/ui/top-nav-items/themed/palette-rgba.d.ts +14 -0
  316. package/dist/types-ts4.5/ui/top-nav-items/themed/palette.d.ts +0 -20
  317. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-anchor.d.ts +32 -0
  318. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-button.d.ts +10 -0
  319. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-icon-button.d.ts +10 -0
  320. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-button.d.ts +16 -0
  321. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-icon-button.d.ts +13 -0
  322. package/dist/types-ts4.5/ui/top-nav-items/themed/themed-pressable.d.ts +18 -0
  323. package/dist/types-ts4.5/ui/top-nav-items/themed/types.d.ts +54 -0
  324. package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme-new.d.ts +20 -0
  325. package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme.d.ts +0 -11
  326. package/package.json +13 -13
  327. package/dist/cjs/context/top-nav-start/top-nav-start-context.js +0 -26
  328. package/dist/cjs/ui/page-layout/side-nav/toggle-button-context.js +0 -26
  329. package/dist/cjs/ui/page-layout/side-nav/visibility-context.js +0 -19
  330. package/dist/cjs/ui/top-nav-items/themed/migration.js +0 -53
  331. package/dist/es2019/context/top-nav-start/top-nav-start-context.js +0 -20
  332. package/dist/es2019/ui/page-layout/side-nav/element-context.js +0 -21
  333. package/dist/es2019/ui/page-layout/side-nav/toggle-button-context.js +0 -19
  334. package/dist/es2019/ui/top-nav-items/themed/migration.js +0 -45
  335. package/dist/esm/context/top-nav-start/top-nav-start-context.js +0 -20
  336. package/dist/esm/ui/page-layout/hoist-utils.js +0 -51
  337. package/dist/esm/ui/page-layout/side-nav/element-context.js +0 -20
  338. package/dist/esm/ui/page-layout/side-nav/toggle-button-context.js +0 -19
  339. package/dist/esm/ui/top-nav-items/themed/migration.js +0 -45
  340. package/dist/types/context/top-nav-start/top-nav-start-context.d.ts +0 -16
  341. package/dist/types/ui/page-layout/panel-splitter/get-width.d.ts +0 -16
  342. package/dist/types/ui/page-layout/side-nav/toggle-button-context.d.ts +0 -16
  343. package/dist/types/ui/top-nav-items/themed/migration.d.ts +0 -10
  344. package/dist/types-ts4.5/context/top-nav-start/top-nav-start-context.d.ts +0 -16
  345. package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width.d.ts +0 -16
  346. package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-context.d.ts +0 -16
  347. package/dist/types-ts4.5/ui/top-nav-items/themed/migration.d.ts +0 -10
@@ -1,128 +1,7 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import React from 'react';
6
- import { type IconButtonProps } from '@atlaskit/button/new';
7
- import { type AnchorProps, type PressableProps } from '@atlaskit/primitives/compiled';
8
- type ButtonAppearance = 'default' | 'primary' | 'subtle';
9
- interface CommonProps {
10
- /**
11
- * The button style variation.
12
- */
13
- appearance?: ButtonAppearance;
14
- /**
15
- * Whether the button is disabled.
16
- */
17
- isDisabled?: boolean;
18
- /**
19
- * Indicates that the button is selected.
20
- */
21
- isSelected?: boolean;
22
- }
23
- /**
24
- * Props from primitives that we explicitly ignore and remove from spread props,
25
- * because they apply styles.
26
- *
27
- * `css` / `className` are not here because primitives don't support them.
28
- *
29
- * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
30
- * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
31
- */
32
- type IgnoredPrimitiveProps = 'style' | 'xcss' | 'backgroundColor' | 'padding' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd';
33
- /**
34
- * Props present in underlying primitives but we want to override,
35
- * so we don't want to inherit their definitions
36
- */
37
- type OverridenPrimitiveProps = 'aria-label' | 'children' | IgnoredPrimitiveProps;
38
- /**
39
- * Props that are common between link buttons.
40
- */
41
- interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverridenPrimitiveProps> {
42
- }
43
- /**
44
- * Props shared by `Button` and `IconButton`
45
- */
46
- interface ActionVariantCommonProps extends CommonProps, Omit<PressableProps, OverridenPrimitiveProps> {
47
- }
48
- export declare const themedButtonBackground = "--ds-top-bar-button-background";
49
- export declare const themedButtonBackgroundHovered = "--ds-top-bar-button-background-hovered";
50
- export declare const themedButtonBackgroundPressed = "--ds-top-bar-button-background-pressed";
51
- export declare const themedButtonBorder = "--ds-top-bar-button-border";
52
- export declare const themedButtonPrimaryText = "--ds-top-bar-button-primary-text";
53
- export declare const themedButtonPrimaryBackground = "--ds-top-bar-button-primary-background";
54
- export declare const themedButtonPrimaryBackgroundHovered = "--ds-top-bar-button-primary-background-hovered";
55
- export declare const themedButtonPrimaryBackgroundPressed = "--ds-top-bar-button-primary-background-pressed";
56
- export declare const themedButtonSelectedText = "--ds-top-bar-button-selected-text";
57
- export declare const themedButtonSelectedBackground = "--ds-top-bar-button-selected-background";
58
- export declare const themedButtonSelectedBackgroundHovered = "--ds-top-bar-button-selected-background-hovered";
59
- export declare const themedButtonSelectedBackgroundPressed = "--ds-top-bar-button-selected-background-pressed";
60
- export declare const themedButtonSelectedBorder = "--ds-top-bar-button-selected-border";
61
- export declare const themedButtonDisabledText = "--ds-top-bar-button-disabled-text";
62
- export declare const themedButtonDisabledBackground = "--ds-top-bar-button-disabled-background";
63
- /**
64
- * Props shared by `Button` and `LinkButton`
65
- */
66
- interface TextButtonCommonProps {
67
- /**
68
- * Places an icon within the button, before the button's text.
69
- */
70
- iconBefore?: IconButtonProps['icon'];
71
- /**
72
- * Text content to be rendered in the button.
73
- */
74
- children: React.ReactNode;
75
- }
76
- export interface ThemedButtonProps extends ActionVariantCommonProps, TextButtonCommonProps {
77
- }
78
- /**
79
- * __Themed button__
80
- *
81
- * A themed button for the top bar.
82
- */
83
- export declare const ThemedButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps> & React.RefAttributes<HTMLButtonElement>>;
84
- export interface ThemedLinkButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, TextButtonCommonProps {
85
- }
86
- /**
87
- * __Themed link button__
88
- *
89
- * A themed link button for the top bar.
90
- */
91
- export declare const ThemedLinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
92
- /**
93
- * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
94
- */
95
- interface IconButtonCommonProps {
96
- children?: never;
97
- 'aria-label'?: never;
98
- /**
99
- * Provide an accessible label, often used by screen readers.
100
- */
101
- label: React.ReactNode;
102
- /**
103
- * Places an icon within the button.
104
- */
105
- icon: IconButtonProps['icon'];
106
- /**
107
- * Props passed down to the Tooltip component.
108
- */
109
- tooltip?: IconButtonProps['tooltip'];
110
- }
111
- export interface ThemedIconButtonProps extends ActionVariantCommonProps, IconButtonCommonProps {
112
- }
113
- /**
114
- * __Themed icon button__
115
- *
116
- * A themed icon button for the top bar.
117
- */
118
- export declare const ThemedIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps> & React.RefAttributes<HTMLButtonElement>>;
119
- export interface ThemedLinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, IconButtonCommonProps {
120
- href: string | RouterLinkConfig;
121
- }
122
- /**
123
- * __Themed link icon button__
124
- *
125
- * A themed link icon button for the top bar.
126
- */
127
- export declare const ThemedLinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkIconButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
2
+ import { type ThemedButtonProps } from './themed-button';
3
+ type IconButtonMigrationProps = {
4
+ isTooltipDisabled?: boolean;
5
+ };
6
+ export declare const Button: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
128
7
  export {};
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Props from primitives that we explicitly ignore and remove from spread props,
3
+ * because they apply styles.
4
+ *
5
+ * `css` / `className` are not here because primitives don't support them.
6
+ *
7
+ * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
8
+ * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
9
+ */
10
+ export type IgnoredPrimitiveProps = 'style' | 'xcss' | 'backgroundColor' | 'padding' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd';
11
+ /**
12
+ * Returns the spread props to pass through to underlying primitive components.
13
+ *
14
+ * It removes the props which apply styles.
15
+ */
16
+ export declare function getPrimitiveSpreadProps<Props extends Record<string, unknown>>({ style, xcss, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, ...props }: Props): Omit<Props, IgnoredPrimitiveProps>;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { type ThemedIconButtonProps } from './themed-icon-button';
3
+ type IconButtonMigrationProps = {
4
+ isTooltipDisabled?: boolean;
5
+ };
6
+ export declare const IconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
7
+ export {};
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { type ThemedLinkButtonProps } from './themed-link-button';
3
+ export declare const LinkButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkButtonProps> & React.RefAttributes<HTMLAnchorElement>>;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { type ThemedLinkIconButtonProps } from './themed-link-icon-button';
3
+ type IconButtonMigrationProps = {
4
+ isTooltipDisabled?: boolean;
5
+ };
6
+ export declare const LinkIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLAnchorElement>>;
7
+ export {};
@@ -0,0 +1,14 @@
1
+ export declare const paletteRgba: {
2
+ DarkNeutral300A: {
3
+ r: number;
4
+ g: number;
5
+ b: number;
6
+ a: number;
7
+ };
8
+ Neutral300A: {
9
+ r: number;
10
+ g: number;
11
+ b: number;
12
+ a: number;
13
+ };
14
+ };
@@ -1,9 +1,3 @@
1
- /**
2
- * Copied from the brand refresh palette.
3
- *
4
- * Ideally we'd codegen this but the brand refresh palette isn't exposed
5
- * through public API and we shouldn't use the private API of another package.
6
- */
7
1
  export declare const palette: {
8
2
  'DarkNeutral-100': string;
9
3
  'DarkNeutral-100A': string;
@@ -46,17 +40,3 @@ export declare const palette: {
46
40
  Neutral1000: string;
47
41
  Neutral1100: string;
48
42
  };
49
- export declare const paletteRgba: {
50
- DarkNeutral300A: {
51
- r: number;
52
- g: number;
53
- b: number;
54
- a: number;
55
- };
56
- Neutral300A: {
57
- r: number;
58
- g: number;
59
- b: number;
60
- a: number;
61
- };
62
- };
@@ -0,0 +1,32 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
6
+ import { type AnchorProps } from '@atlaskit/primitives/compiled';
7
+ import type { CommonProps, OverriddenPrimitiveProps } from './types';
8
+ /**
9
+ * Props that are common between link buttons.
10
+ */
11
+ interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverriddenPrimitiveProps> {
12
+ }
13
+ /**
14
+ * Props shared by `ThemedPressable` and `ThemedAnchor`
15
+ */
16
+ interface ThemedPrimitiveProps {
17
+ shape?: 'default' | 'square';
18
+ children: React.ReactNode;
19
+ }
20
+ interface ThemedAnchorProps<RouterLinkConfig extends Record<string, any> = never> extends ThemedPrimitiveProps, LinkVariantCommonProps<RouterLinkConfig> {
21
+ }
22
+ /**
23
+ * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
24
+ *
25
+ * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
26
+ *
27
+ * Polymorphism had many typing issues and required sacrificing type safety.
28
+ *
29
+ * Render props had problems passing down styles through `xcss` to the `children` function.
30
+ */
31
+ export declare const ThemedAnchor: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedAnchorProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
32
+ export {};
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
6
+ import type { PressableProps } from '@atlaskit/primitives/compiled';
7
+ import type { CommonProps, OverriddenPrimitiveProps, TextButtonCommonProps } from './types';
8
+ export interface ThemedButtonProps extends CommonProps, Omit<PressableProps, OverriddenPrimitiveProps>, TextButtonCommonProps {
9
+ }
10
+ export declare const ThemedButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps> & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
6
+ import type { PressableProps } from '@atlaskit/primitives/compiled';
7
+ import type { CommonProps, IconButtonCommonProps, OverriddenPrimitiveProps } from './types';
8
+ export interface ThemedIconButtonProps extends CommonProps, Omit<PressableProps, OverriddenPrimitiveProps>, IconButtonCommonProps {
9
+ }
10
+ export declare const ThemedIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps> & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
6
+ import type { AnchorProps } from '@atlaskit/primitives/compiled';
7
+ import type { CommonProps, OverriddenPrimitiveProps, TextButtonCommonProps } from './types';
8
+ /**
9
+ * Props that are common between link buttons.
10
+ */
11
+ interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverriddenPrimitiveProps> {
12
+ }
13
+ export interface ThemedLinkButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, TextButtonCommonProps {
14
+ }
15
+ export declare const ThemedLinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
16
+ export {};
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import type { AnchorProps } from '@atlaskit/primitives/compiled';
3
+ import type { CommonProps, IconButtonCommonProps, OverriddenPrimitiveProps } from './types';
4
+ /**
5
+ * Props that are common between link buttons.
6
+ */
7
+ interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverriddenPrimitiveProps> {
8
+ }
9
+ export interface ThemedLinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, IconButtonCommonProps {
10
+ href: string | RouterLinkConfig;
11
+ }
12
+ export declare const ThemedLinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkIconButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
13
+ export {};
@@ -0,0 +1,18 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
6
+ import { type PressableProps } from '@atlaskit/primitives/compiled';
7
+ import type { CommonProps, OverriddenPrimitiveProps } from './types';
8
+ /**
9
+ * Props shared by `ThemedPressable` and `ThemedAnchor`
10
+ */
11
+ interface ThemedPrimitiveProps {
12
+ shape?: 'default' | 'square';
13
+ children: React.ReactNode;
14
+ }
15
+ interface ThemedPressableProps extends ThemedPrimitiveProps, CommonProps, Omit<PressableProps, OverriddenPrimitiveProps> {
16
+ }
17
+ export declare const ThemedPressable: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedPressableProps> & React.RefAttributes<HTMLButtonElement>>;
18
+ export {};
@@ -0,0 +1,54 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { IconButtonProps } from '@atlaskit/button/new';
3
+ import type { IgnoredPrimitiveProps } from './get-primitives-spread-props';
4
+ /**
5
+ * Props present in underlying primitives but we want to override,
6
+ * so we don't want to inherit their definitions
7
+ */
8
+ export type OverriddenPrimitiveProps = 'aria-label' | 'children' | IgnoredPrimitiveProps;
9
+ export interface CommonProps {
10
+ /**
11
+ * The button style variation.
12
+ */
13
+ appearance?: 'default' | 'primary' | 'subtle';
14
+ /**
15
+ * Whether the button is disabled.
16
+ */
17
+ isDisabled?: boolean;
18
+ /**
19
+ * Indicates that the button is selected.
20
+ */
21
+ isSelected?: boolean;
22
+ }
23
+ /**
24
+ * Props shared by `Button` and `LinkButton`
25
+ */
26
+ export interface TextButtonCommonProps {
27
+ /**
28
+ * Places an icon within the button, before the button's text.
29
+ */
30
+ iconBefore?: IconButtonProps['icon'];
31
+ /**
32
+ * Text content to be rendered in the button.
33
+ */
34
+ children: ReactNode;
35
+ }
36
+ /**
37
+ * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
38
+ */
39
+ export interface IconButtonCommonProps {
40
+ children?: never;
41
+ 'aria-label'?: never;
42
+ /**
43
+ * Provide an accessible label, often used by screen readers.
44
+ */
45
+ label: ReactNode;
46
+ /**
47
+ * Places an icon within the button.
48
+ */
49
+ icon: IconButtonProps['icon'];
50
+ /**
51
+ * Props passed down to the Tooltip component.
52
+ */
53
+ tooltip?: IconButtonProps['tooltip'];
54
+ }
@@ -0,0 +1,20 @@
1
+ import { type CustomTheme } from './get-custom-theme-styles';
2
+ type ResultNew = {
3
+ isEnabled: false;
4
+ } | {
5
+ isEnabled: true;
6
+ style: React.CSSProperties;
7
+ hasDefaultBackground: boolean;
8
+ };
9
+ /**
10
+ * React hook that computes the custom theme style for the top navigation bar.
11
+ *
12
+ * Determines whether a custom theme is enabled, computes the resulting style,
13
+ * and checks if the background color matches the default for the current color mode.
14
+ *
15
+ * @param theme Optional custom theme configuration object.
16
+ * @returns An object indicating if the custom theme is enabled, the computed style,
17
+ * and a flag specifying if the default background color is used.
18
+ */
19
+ export declare function useCustomThemeNew(theme: CustomTheme | undefined): ResultNew;
20
+ export {};
@@ -1,15 +1,4 @@
1
1
  import { type CustomTheme } from './get-custom-theme-styles';
2
- type ResultNew = {
3
- isEnabled: false;
4
- } | {
5
- isEnabled: true;
6
- style: React.CSSProperties;
7
- hasDefaultBackground: boolean;
8
- };
9
- /**
10
- * {description}.
11
- */
12
- export declare function useCustomThemeNew(theme: CustomTheme | undefined): ResultNew;
13
2
  type Result = {
14
3
  isEnabled: false;
15
4
  } | {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "7.3.0",
3
+ "version": "8.0.0",
4
4
  "description": "The latest navigation system for Atlassian apps.",
5
5
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
6
6
  "author": "Atlassian Pty Ltd",
@@ -71,18 +71,18 @@
71
71
  },
72
72
  "dependencies": {
73
73
  "@atlaskit/analytics-next": "^11.2.0",
74
- "@atlaskit/app-provider": "^4.2.0",
74
+ "@atlaskit/app-provider": "^4.3.0",
75
75
  "@atlaskit/avatar": "^25.11.0",
76
76
  "@atlaskit/button": "^23.11.0",
77
77
  "@atlaskit/css": "^0.19.0",
78
78
  "@atlaskit/ds-lib": "^7.0.0",
79
- "@atlaskit/icon": "^34.1.0",
79
+ "@atlaskit/icon": "^34.2.0",
80
80
  "@atlaskit/layering": "^3.6.0",
81
81
  "@atlaskit/logo": "^20.0.0",
82
82
  "@atlaskit/platform-feature-flags": "^1.1.0",
83
83
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
84
84
  "@atlaskit/popup": "^4.16.0",
85
- "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
85
+ "@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
86
86
  "@atlaskit/primitives": "^19.0.0",
87
87
  "@atlaskit/side-nav-items": "^1.13.0",
88
88
  "@atlaskit/tokens": "^13.0.0",
@@ -102,28 +102,28 @@
102
102
  "@af/accessibility-testing": "workspace:^",
103
103
  "@af/integration-testing": "workspace:^",
104
104
  "@af/visual-regression": "workspace:^",
105
- "@atlaskit/badge": "^18.4.0",
105
+ "@atlaskit/badge": "^18.6.0",
106
106
  "@atlaskit/banner": "^14.0.0",
107
- "@atlaskit/breadcrumbs": "^16.0.0",
107
+ "@atlaskit/breadcrumbs": "^16.1.0",
108
108
  "@atlaskit/dropdown-menu": "^16.8.0",
109
109
  "@atlaskit/form": "^15.5.0",
110
110
  "@atlaskit/heading": "^5.4.0",
111
111
  "@atlaskit/link": "^3.4.0",
112
- "@atlaskit/lozenge": "^13.6.0",
113
- "@atlaskit/menu": "^8.4.0",
112
+ "@atlaskit/lozenge": "^13.7.0",
113
+ "@atlaskit/menu": "^8.5.0",
114
114
  "@atlaskit/modal-dialog": "^14.15.0",
115
- "@atlaskit/onboarding": "^14.5.0",
115
+ "@atlaskit/onboarding": "^14.6.0",
116
116
  "@atlaskit/page-header": "^12.1.0",
117
- "@atlaskit/page-layout": "^4.2.0",
118
- "@atlaskit/popper": "^7.1.0",
117
+ "@atlaskit/page-layout": "^4.3.0",
118
+ "@atlaskit/popper": "^7.2.0",
119
119
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
120
120
  "@atlaskit/select": "^21.10.0",
121
121
  "@atlaskit/skeleton": "^2.1.0",
122
122
  "@atlaskit/textfield": "^8.3.0",
123
123
  "@atlassian/feature-flags-test-utils": "^1.0.0",
124
- "@atlassian/gemini": "^1.43.0",
124
+ "@atlassian/gemini": "^1.44.0",
125
125
  "@atlassian/react-compiler-gating": "workspace:^",
126
- "@atlassian/search-dialog": "^9.21.0",
126
+ "@atlassian/search-dialog": "^10.0.0",
127
127
  "@atlassian/ssr-tests": "workspace:^",
128
128
  "@atlassian/test-utils": "^1.0.0",
129
129
  "@atlassian/testing-library": "^0.5.0",
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.TopNavStartElement = exports.TopNavStartAttachRef = void 0;
8
- var _react = require("react");
9
- var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
10
- /**
11
- * Context for the TopNavStart container element
12
- * Used to power the side nav flyout by allowing the side nav to bind event listeners to the element, so we can
13
- * keep the flyout open while the user mouses from the top bar to the side nav.
14
- */
15
- var TopNavStartElement = exports.TopNavStartElement = /*#__PURE__*/(0, _react.createContext)(null);
16
-
17
- /**
18
- * Context for the callback ref used to respond to the TopNavStart element ref being attached. It is used to update the
19
- * `TopNavStartElement` state so consumers can react to the ref being attached.
20
- *
21
- * e.g. Once the TopNavStart element has been mounted, the side nav can bind mouse event listeners to it.
22
- *
23
- * A callback ref is needed because the side nav can be mounted before elements in the top bar (e.g. if the element is lazy loaded),
24
- * which happens in Jira and Confluence), which would prevent the event listeners from being set up.
25
- */
26
- var TopNavStartAttachRef = exports.TopNavStartAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.SideNavToggleButtonElement = exports.SideNavToggleButtonAttachRef = void 0;
8
- var _react = require("react");
9
- var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
10
- /**
11
- * Context for the side nav toggle button element.
12
- * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
13
- */
14
- var SideNavToggleButtonElement = exports.SideNavToggleButtonElement = /*#__PURE__*/(0, _react.createContext)(null);
15
-
16
- /**
17
- * Context for the callback ref used to respond to toggle button ref being attached. It is used to update the
18
- * `SideNavToggleButtonRef` state so consumers can react to the ref being attached.
19
- *
20
- * e.g. Once the side nav toggle button has been mounted, the side nav can bind mouse event listeners to it
21
- * to power the sidenav flyout.
22
- *
23
- * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
24
- * is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
25
- */
26
- var SideNavToggleButtonAttachRef = exports.SideNavToggleButtonAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.SideNavVisibilityState = exports.SetSideNavVisibilityState = void 0;
8
- var _react = require("react");
9
- var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
10
- /**
11
- * Context for the visibility of the side nav.
12
- * State is initialised as null. This is used when the value has not been set yet - which is important to know for SSR.
13
- */
14
- var SideNavVisibilityState = exports.SideNavVisibilityState = /*#__PURE__*/(0, _react.createContext)(null);
15
-
16
- /**
17
- * Sets the visibility of the side nav.
18
- */
19
- var SetSideNavVisibilityState = exports.SetSideNavVisibilityState = /*#__PURE__*/(0, _react.createContext)(_noop.default);
@@ -1,53 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.LinkIconButton = exports.LinkButton = exports.IconButton = exports.Button = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
12
- var _button = require("./button");
13
- var _hasCustomThemeContext = require("./has-custom-theme-context");
14
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
- // Explicitly typed to use only the themed button API,
16
- // which is a subset of the normal button API
17
- var IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
18
- var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
19
- var Component = hasCustomTheme ? _button.ThemedIconButton : _new.IconButton;
20
- return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
21
- ref: ref
22
- }, props));
23
- });
24
-
25
- // Explicitly typed to use only the themed button API,
26
- // which is a subset of the normal button API
27
- var LinkIconButton = exports.LinkIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
28
- var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
29
- var Component = hasCustomTheme ? _button.ThemedLinkIconButton : _new.LinkIconButton;
30
- return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
31
- ref: ref
32
- }, props));
33
- });
34
-
35
- // Explicitly typed to use only the themed button API,
36
- // which is a subset of the normal button API
37
- var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
38
- var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
39
- var Component = hasCustomTheme ? _button.ThemedButton : _new.default;
40
- return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
41
- ref: ref
42
- }, props));
43
- });
44
-
45
- // Explicitly typed to use only the themed button API,
46
- // which is a subset of the normal button API
47
- var LinkButton = exports.LinkButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
48
- var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
49
- var Component = hasCustomTheme ? _button.ThemedLinkButton : _new.LinkButton;
50
- return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
51
- ref: ref
52
- }, props));
53
- });
@@ -1,20 +0,0 @@
1
- import { createContext } from 'react';
2
- import __noop from '@atlaskit/ds-lib/noop';
3
-
4
- /**
5
- * Context for the TopNavStart container element
6
- * Used to power the side nav flyout by allowing the side nav to bind event listeners to the element, so we can
7
- * keep the flyout open while the user mouses from the top bar to the side nav.
8
- */
9
- export const TopNavStartElement = /*#__PURE__*/createContext(null);
10
-
11
- /**
12
- * Context for the callback ref used to respond to the TopNavStart element ref being attached. It is used to update the
13
- * `TopNavStartElement` state so consumers can react to the ref being attached.
14
- *
15
- * e.g. Once the TopNavStart element has been mounted, the side nav can bind mouse event listeners to it.
16
- *
17
- * A callback ref is needed because the side nav can be mounted before elements in the top bar (e.g. if the element is lazy loaded),
18
- * which happens in Jira and Confluence), which would prevent the event listeners from being set up.
19
- */
20
- export const TopNavStartAttachRef = /*#__PURE__*/createContext(__noop);